Wo wir sind, ist vorne, Folge 16. Heute füllen wir eine Umfrage aus.
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 liebe Webwirkenden und gleich zu Beginn der Sendung die Frage an Moritz Moritz, wie geht's dir denn heute?
Ich frage für eine Zuhörerschaft.
Anders als letztes Mal.
Das klingt schon mal positiv.
Die Dinge haben sich geändert.
Verwirrung gestiftet.
Aber auf der anderen Seite haben wir tatsächlich mal Feedback bekommen und auch mal negatives Feedback, was mich ja fast schon gefreut hat.
Von daher haben wir vielleicht doch auch was richtig gemacht und vor allem die Spenden sind durch die Decke gegangen, was mich natürlich erst recht gefreut hat.
Manche haben sogar gleich mehrfach gespendet in den letzten Monaten.
Und deswegen möchte ich an der Stelle auch mal, ich glaube wir hatten das gesagt, ja wir bedanken uns dann in der Sendung bei euch.
Haben wir glaube ich gar nicht gemacht.
Ich möchte einfach mal die Namen nennen, die sowieso öffentlich auf der Buy-Me-Coffee-Seite stehen.
Vielen Dank an Hamper, an Hüggenberg und an den Schepp, die uns bereichlich bedacht haben.
Ja, vielen Dank.
Vielen Dank für einen andechtigen Applaus.
Genau, also Thema Feedback ist jetzt auch versprochen, versprechen wir das nicht, aber ich will mal sagen, ist jetzt erstmal erledigt.
Wir nerven euch nicht mehr damit, das hieß schon so, das ist eine kleine Marotte von uns.
Ihr dürft uns gerne weiterhin sagen, wie ihr uns findet, aber es ist jetzt auch, also wir wissen jetzt, dass wir anscheinend nicht alles verkehrt machen.
Und wenn wir es verkehrt machen, dann weist ihr uns drauf hin, das wissen wir jetzt auch.
Genau.
Ja, warte mal, irgendwas wollte ich zu den Spenden noch sagen.
Bei mir Coffee, wolltest du noch was, habe ich glaube ich auch schon gesehen in deinen Notizen, ja.
Wer spendet, der bekommt übrigens auch dann, wenn er mit Namen spendet, auch ein Tweet mit Kuss-Smileys, mit Kuss-Emojis, das ist ganz wichtig.
Tausend Küsse.
Wer Kuss-Emojis von uns haben will, es gibt immer einen handgeklöppelten Tweet für jeden, der das macht.
Und eventuell, auf den einen oder anderen bin ich danach auch zugekommen und habe gefragt, ob er vielleicht auch Sticker haben will, das ist auch eine Option.
Also wenn ihr Sticker haben wollt, könnt ihr uns auch fragen, aber wir schicken sie euch noch viel lieber, wenn ihr spendet.
Ja, und ihr könnt auch noch mehr von uns haben, ihr müsst uns nur sagen, was ihr denn gerne wollt.
Es gibt nämlich bei Buy-Meer-Coffee auch eine Membership, wo man jetzt, wenn man sagt, bevor ich jetzt jeden Monat manuell da was hinschicke, dann kann ich auch irgendwie mal ein paar Euro pro Monat springen lassen, automatisiert.
Und dann seid ihr WWSIV-VIP-Club-Member-Ultras.
Und es gibt da die Option, dass man irgendwelche Boni anbietet, da haben wir jetzt einfach mal reingeschrieben, sagt uns doch einfach, was ihr wollt.
Eine Idee war zum Beispiel, dass wir die Spam-Spots irgendwie downloadbar machen, da kam jetzt das Feedback schon öfter, dass die anscheinend sehr gut ankommen und das wäre zum Beispiel eine Idee.
Oder was könntet ihr euch denn vorstellen und habt ihr überhaupt Lust, uns regelmäßig zu unterstützen? Müsst ihr auch nicht, reicht auch so.
Wir werden keine nackte Videofolge machen.
Nein, nein. Eine Videofolge, da kann man vielleicht mal drüber reden, aber dann doch in Klamotten. Das will ja auch keiner sehen.
Aber vielleicht in Klamotten, die aussehen, als wären wir nackt.
Das wäre eine Idee, so ein Naked-Suit. Da lasse ich mich vielleicht zu breit schlagen.
Genau, und ihr könnt uns auch was persönlich zukommen lassen, wenn ihr den einen oder den anderen von uns bedenken wollt.
Ich glaube, das haben wir zu Beginn der zweiten Staffel eingeführt auf der Seite, auf vielfache Nachfrage, haben es aber, glaube ich, gar nicht beworben.
Also es gibt da einen neuen Link oben in dem Header, wer mehr oder weniger über uns erfahren will, der klickt auf, wer wir sind, ist fraglich.
Und da gibt es dann auch Links zu jedem von uns, zu Amazon-Wunschlisten, zu unseren verschiedenen Social-Media-Profilen oder direkter Paypal-Spende.
Also wer das in Anspruch nehmen will, natürlich sehr gerne.
Ja, und ansonsten, bevor wir jetzt zur obligatorischen Bierfrage kommen, die Stammhörer unter euch, die erinnern sich, und Stammhörerinnen natürlich, ich muss da selber immer dran denken,
die erinnern sich vielleicht an Moritz' Blockflöten-Solo aus Folge 5 und ich habe heute Abend dem Moritz noch vor der Sendung geschrieben, bring bitte deine Blockflöte mit.
Und ich habe hier, ich zeige es mal dem Moritz in die Kamera, ich bin jetzt auch in HD zu sehen, habe jetzt eine neue Webcam.
Also der Konstantin sieht so gut aus wie selten.
Ich bin jetzt gerüstet für eine Web-Folge, für eine Video-Folge.
Oh, ein buntes Glockenspiel sehe ich gerade.
Kinderglockenspiel. Und ich stimme einfach mal mit ein und du als Semiprofi-Musiker wirst bestimmt erkennen, was es ist und mitspielen.
Oh Gott.
Ich hoffe, man hört es laut genug, ist es ein bisschen weiter weg vom Mikrofon.
Er hat vorhin gesagt, es fängt an auf C. Ich weiß, bei der Blockflöte genau, wo das C ist und sonst nix.
Okay, dann gucken wir mal.
Sehr schön, auch mit der Verzögerung, der Übertragung.
Ja, herzlichen Glückwunsch, wo wir sind, ist vorne. Herzlichen Glückwunsch wir.
Das ist unsere Jubiläumsfolge. Am 27. Oktober 2019 ist unsere erste Folge entstanden.
Ich wusste das jetzt gar nicht.
Verrückt, ne? Ja, habe ich nachgeschaut und gedacht, das müsste doch jetzt ein Jahr her sein.
Das ist jetzt heute fast exakt ein Jahr her.
Also die Idee war ja schon ein bisschen länger, aber die erste Folge aufgenommen haben wir tatsächlich am 27. Oktober.
Live ging ja erst viel später, muss man ganz gut sagen.
Ja, irgendwie drei Monate später oder so war es dann noch länger.
War ja erst im Jahr drauf, also erst 2020, aber aufgenommen haben wir tatsächlich damals um die Zeit, ja.
Genau, jetzt haben wir das tatsächlich schon ein Jahr durchgezogen. Verrückt, verrückt.
Und das trotz Pandemie, niemand kann uns aufhalten.
Grüße an Olli an der Stelle, vielleicht, falls er zuhört.
Ja, hallo Olli.
Mit dem ich ursprünglich mal diese Idee geschmiedet hatte.
Und dann haben wir ihm sie einfach geklaut.
Dann haben wir sie ihm einfach geklaut, alles anders gemacht und hier sind wir.
Die Flöte sieht aus, als hätte da jemand reingepissen.
Was machst du denn nachts so? Ja, die sieht angekaut aus, definitiv.
Ich habe ja auch noch, warte mal, ich habe ja noch eine andere. Moment.
Aus Metall.
Die ist aus Metall, ein Tin Whistle nennt sich das und die ist auch angekaut.
Was machst du denn?
Ja, der ist ein billiger, der macht das, ja, die, das, da war ich, als ich die bekommen habe, war ich, ähm, weiß ich nicht, so neun.
Ach so.
Ich glaube, da kaut man noch auf Flöten.
Ja, möglich.
Kommen wir doch zur Bierfrage, damit wir dann endlich zu was Gehaltvollerem kommen.
Oh je, da kriege ich wieder Ärger, wenn ich Bier trinke, aber lass uns einfach mal.
Was, du kriegst Ärger, wenn du Bier trinkst? Warum?
Keine Ahnung. Lies mal die Kommentare zur letzten Folge.
Ach so, weil du dann ausfällig wirst und deine Körperöffnungen nicht mehr im Griff hast.
Ja, genau, weil ich, ich wollte eigentlich heute noch ankündigen, gleich in der Retro, dass ich jetzt eine Räuspertaste habe, um genau sowas zu verhindern.
Ja, aber die funktioniert leider, funktioniert leider technisch noch nicht.
Ähm, also, ihr müsst das vielleicht jetzt, ihr müsst jetzt heute noch mal aushalten.
So, was hast du denn?
Ich zeig's dir mal in die Kamera.
Ich hab schon wieder so eins in der, in der Papierverpackung, die hab ich da auch mitgenommen damals.
Ein Seepferd.
Seepferd, wildsauer.
Seltenes Bier steht auch wieder drauf.
Ähm, hoffen wir mal, dass es stimmt.
Ähm, ich mach das mal auf.
Zisch.
Ja, ich hab, ich hab wieder ein, äh, Grevensteiner, das irgendwie...
Oh, es läuft auch schon über.
Also, ihr dürft jetzt euch euer Bier holen und mittrinken.
Und, äh, ich hab wieder dieses Grevensteiner, dieses Pseudo-Craft-Bier, was ich schon öfter hatte.
Ähm, ich glaub, ich muss mal, muss mal Neues kaufen oder, oder vielleicht schicken die Hörer mal wieder was.
Ähm, weil ich, ja, also, ich bin auf jeden Fall immer sehr empfänglich für Augustina, da hatte ich aber jetzt die Woche nur eine Flasche und die ist leider schon weg.
Also, falls ihr mal was Nettes schicken wollt, schickt Augustina, das ist einfach ein sehr gutes Bier.
Oder das aus, äh, eurer Heimat, euer Lieblingsbier oder...
Das ist doch eine Idee.
Ihr wolltet, dass wir es schon immer mal trinken sollen.
Sehr gerne.
Jo.
Jüdi, dann, äh, fangen wir doch an mit der...
BBS e.V. präsentiert die Retrospektive.
Ja, ich hab grad nochmal überlegt, wir haben uns natürlich wieder schlecht abgesprochen, wir sollten uns bei der Retro vielleicht wieder abwechseln.
Ähm, ich verschiebe jetzt mal die Reihenfolge eben.
Was, äh, äh, ja, du bist ja dran mit der Retro.
Ja, genau, aber ich, äh, ich verschiebe mal.
Steht das da falsch?
Nein, nein, ist alles gut, ist alles gut.
Ich verschiebe nochmal die Reihenfolge, dass ich nicht einen langen Blog hab und, äh, du einen langen Blog.
Ach so, so meinst du abwechseln, ja.
Ja, genau, deswegen, ich hab jetzt grad mal verschoben.
Also, äh, mein erster Punkt ist, ähm, ich hab ja immer, ich hab ja immer Witze gemacht über YouTube und schreib's in die Kommentare, äh, oder drück die Glocke.
Oder abonnieren, ich mein, abonniert habt ihr ja hoffentlich schon, wenn ihr uns hört, ähm, aber es gibt jetzt, und wahrscheinlich gibt's das schon voll lange, es ist mir nur nie aufgefallen, es gibt bei Twitter eine Glocke, die man drücken kann, die genau denselben Effekt hat wie bei YouTube, nämlich, dass, äh, man über jeden Tweet, äh, eine Notification bekommt.
Und das könntet ihr bei unserem WWS-IV-Account einfach mal tun und wir würden uns freuen, weil dann kriegt ihr auch alles mit, wenn wir mal wieder Sticker verlosen.
Oder vielleicht auch mal was anderes verlosen, mal.
Oder was anderes verlosen.
Oder uns bei euch bedanken, dass ihr gespendet habt mit vielen Kuss-Smileys, äh, oder, oder was auch immer, wir schreiben gar nicht so viel, also keine Angst, wir spammen euch in der Regel nicht arg voll, aber, äh, das ist, das, die Glocke lohnt sich, würde ich sagen.
Ja, damit, äh, übergebe ich an dich.
Damit übergibst du dich, ähm, äh, jetzt muss ich, jetzt hast du mich mit dem Umsatz hier ein bisschen durch, äh, aus dem Konzept gebracht.
Oh, ich kann auch gerne noch, ich kann auch gerne noch was machen.
Ja, ja, ja, mach, mach noch was.
Ähm, Moment, ich muss gerade mal gucken.
Ich kann, äh, noch über, ich wollte über die Reaper, äh, Reusper-Taste sprechen.
Also, die ja jetzt nicht klappt, aber rein technisch funktioniert's nur nicht mit unserem Setup, aber trotzdem, äh, finde ich die Technik dahinter ganz interessant, weil ich da was gelernt hab, was ich nicht kannte vorher.
Ähm, und zwar, äh, gibt es ein, ein, äh, ein Format, das nennt sich OSC, ähm, mit dem kann man Events durchs Netzwerk schicken und das, äh, das heißt Open Sound Control, das, äh, Format.
Und damit kann man, äh, so, wenn ich jetzt, wenn ich jetzt im Netzwerk irgendwie mein, mein Handy zum Beispiel hab und da eine OSC-App drauf hab, ähm, kann ich da Events schicken an zum Beispiel, ähm, unsere Aufnahmesoftware Reaper.
Das, das Ding hat dann, äh, Reaper hat dann einen Listener und, äh, wenn die beide, äh, ich muss, ich muss an meinem Handy einfach nur, ähm, die IP-Adresse von meinem Rechner eingeben und ein Port.
Und auf dem hört Reaper dann zu und da kann ich da Events hinschicken und dann kann unsere Aufnahmesoftware drauf reagieren, wenn ich auf meinem Handy, äh, eine Taste drücke.
Und das fand ich irgendwie cool, dass es, äh, für genau diesen Fall, also eine Taste, die irgendwie Mute macht, ähm, irgendwie was gibt, wo ich eigentlich, äh, gar nichts irgendwie neu erfinden muss,
Sondern ich muss einfach nur die entsprechende App installieren, ähm, in Reaper das konfigurieren, dann sehe ich die Events reinlaufen und dann, äh, ist das im Prinzip schon eingerichtet.
Also das ist eine ziemlich coole Sache.
Funktioniert ist nur leider nicht, weil wir halt Remote aufnehmen und, äh, das, das Muten bei mir nicht ankommt.
Also das Mute-Signal auf der Spur, äh, die Spur wird trotzdem weiter aufgenommen und das Mute-Signal bei Moritz kommt natürlich bei mir nicht an.
Äh, aber wir finden vielleicht noch eine Lösung, damit uns, äh, Faux, Faux, Pässe, äh, in Zukunft erspart bleiben.
Äh, äh, ich, ich kann gleich noch weitermachen.
Ähm, wir haben vorhin, äh, der Konstantin hat vorhin schon die Spenden-Abo-Geschichte angesprochen und da habe ich noch einen kleinen Nachtrag dazu, ähm, weil mir aufgefallen ist, dass, äh, die Spenden eigentlich immer diese vorausgewählten, äh, Summen sind.
Also so ein, ein Bier, drei Biere und, ne, eins, zwei und, wie, wie, wie war das nochmal?
Äh, ich, drei, äh, ich weiß jetzt auch nicht mehr, drei, fünf und, äh, ich schaue nochmal kurz, äh, eins, drei und fünf.
Eins, drei und fünf.
Eins, drei und fünf. Ähm, es gibt da ein Freitextfeld, also wenn ihr jetzt, ihr könnt die Auswahl, also die, die Menge also selbstbestimmen, bei uns kosten wir drei Euro.
Ähm, ihr könnt aber auch, wenn ihr zwei spenden wollt, könnt ihr auch zwei spenden, das ist natürlich nicht gut.
Ihr könnt natürlich auch 87 Biere spenden, wenn ihr wollt, das kann man einfach in das Freitextfeld reinschreiben. Also, ähm, falls euch die fünf nicht reichen und ihr denkt, oh, den wollte ich, ich wollte den schon immer mal, ähm, das nächste Mikrofon, äh, sponsern, dann könnt ihr da auch 127 reinschreiben oder so.
Was, was guckst du denn so?
Ich, ich, ich, ich höre dir andächtig zu und, äh.
Konstantin hat gerade sehr, sehr, äh, verwirrt und belustigt geschaut, als ob ich irgendwas Lustiges gesagt hätte.
Nein, nein, nein, alles gut.
Vielleicht wirkt das Bier schon, das ist sauer, macht lustig, weißt du.
Du hast ja auch schon vorgetrunken, ne?
Ich hab, äh, schon, ja, bisschen mehr.
Ähm, gut, äh, ich, äh, ja, ich bin nicht irgendwie, ich bin immer noch aus dem Konzept, weil ich jetzt was sagen soll, obwohl du noch nicht fertig bist.
Ähm, mich beschäftigt tatsächlich seit unserer Webtypo-Folge vor zwei Folgen, äh, das Thema Typografie immer noch und, ähm, ich habe gearbeitet an der Bibliothek OpenType.js,
das ist eine, eine viel genutzte, auch in kommerzioneller, kommerzioneller Software eingesetzte JavaScript-Library, mit der man OpenType-Schriftarten lesen und auch speichern kann.
Und das Parsen funktioniert auch gut, aber beim Schreiben ist es doch noch etwas, äh, limitiert.
Und, äh, unter anderem fehlen bestimmte Tabellenformate, in denen OpenType-Features wie Contextual Alternates, ähm, gespeichert werden.
Und ich habe nach Alternativen gesucht, gibt es aber anscheinend nichts Open-Source-mäßiges.
Ähm, ganz oft ist man zum Beispiel auch, ähm, deswegen bin ich halt draufgekommen, in kommerzioneller Software, in, in den Formbeiträgen und vom Support so, äh, ja, warum funktionieren denn Contextual Alternates noch nicht?
Und dann kommt halt raus, ja, wir nutzen OpenType.js und die können das nicht und deswegen können wir das auch nicht.
Ist kommerzionell wirklich ein Wort, muss ich mal kurz einhaken? Oder meinst du kommerzionell?
Habe ich kommerzionell gesagt?
Zum fünften Mal.
Das ist wie Spezifizität, sag mal.
Oh Mann.
Nee, es ist okay, du hast jetzt einfach ein neues Wort erfunden.
Das ist das, äh, ich wollte nur fragen, ob es Absicht ist.
Ich glaube, wir sollten jetzt schon aufhören.
Nein, ich bin, ähm, ja.
Wenn ihr nicht wollt, dass wir aufhören, dann müsst ihr jetzt spenden.
Wir kriegen das live mit.
Ja, es hört ja nur keiner live zu.
Aber gut, ähm, komm jetzt, mein Gott, das ist, das ist so peinlich, da bin ich fast am überlegen, ob ich das, äh, rausschneide, aber, äh, gut.
Nein, nein, nein, nein, ich, ich, ich, ich, ich nehme jetzt ein paar kommerziell, kommerziell, kommerziell auf und dann kann ich die im Nachhinein an der entsprechenden Stelle einfügen.
Und ich habe gerade erfunden Spezifitot.
Spezifitot, okay, so.
Ähm, wo war ich denn jetzt?
Äh, genau, jedenfalls, äh, ich, oh Mann, ähm, ja, auch kommerzielle Software, äh, scheitern dann daran, dass die,
die Library das nicht unterstützt und dann habe ich angefangen, habe gedacht, so, äh, das kann doch so schwer nicht sein.
Äh, wenn die schon manche Sachen schreiben können, muss das doch gehen.
Und habe mir dann echt Nächte um die Ohren geschlagen und, äh, versucht, diese Schreibfunktionen selber zu vervollständigen.
Und das war echt mal interessant, ähm, so als Webentwickler, der normalerweise damit nicht so zu tun hat,
wirklich mal auf Byte-Ebene zu agieren und sich auch so die Spezifikation von so einem Dateiformat mal durchzulesen und das dann umzusetzen.
Und das ist tatsächlich ein tolles Gefühl, wenn es dann auch wirklich funktioniert, ja, wenn man die Schriftart reinlädt, äh, sie exportiert und es kommt keine Meldung,
das was nicht unterstützt wird und dann öffnet man sie in einem anderen Schriftprogramm wie Fontforge zum Beispiel und tatsächlich ist alles da, was man braucht.
Also das war, war echt super, mal, ähm, was komplett anderes zu machen und dann dabei auch noch erfolgreich zu sein.
Und was ich dabei rausgefunden habe, ist, dass Unit-Tests einfach so, so wichtig sind.
Das war früher für mich immer so ein bisschen, ach, äh, komm, braucht man das wirklich und so, ja, aber, äh, gerade in dem Fall war halt wirklich die beste Vorgehensweise erst den Test-Case schreiben,
weil ich hatte Beispieldaten aus den Specs oder zumindest anhand der Specs wusste ich, wie das am Schluss aussehen soll, manchmal gab es keine Beispiele dazu.
Das heißt, ich habe den Test-Case geschrieben, ähm, wenn ich den in den Input hätte, dann müsste am Schluss das und das rauskommen.
Und dann habe ich so lange am Code gearbeitet, bis der Test tatsächlich einfach erfolgreich war und deswegen, äh, Leute schreibt Test-Cases.
Ja, aber dazu muss ich sagen, da habe ich es jetzt gerade mit meinen Kollegen drüber gehabt über Unit-Tests, äh, oder generell Testing.
Ähm, ich finde Unit-Tests, man muss sich genau überlegen, Unit-Tests für alles ist aus meiner Sicht Quatsch, äh, Unit-Tests ist nur sinnvoll, wo du halt auch eine, eine sinnvolle Unit hast, die du testen kannst.
Und, äh, bei den meisten Sachen, die, äh, bei mir so gemacht werden, ähm, da gibt es zwar auch ein paar Units, die man testen kann, aber ich finde da Ende-zu-Ende-Tests, ähm, einfach besser.
Aber wenn du so richtig Software schreibst, so mit, mit Algorithmen und irgendwie Function und Input-Output und sowas, da ist ein Unit-Test durchaus sinnvoll, finde ich.
Genau, also, ja, Unit-Tests meine ich jetzt noch nicht unbedingt nur Unit-Tests, sondern auch, äh, Integration-Tests, also sämtliche Formen einfach, schreib irgendwas, was, was überprüft, ob dein Code dann tatsächlich das tut, was du von ihm erwartest, dass er das tut.
Ja, aber das macht doch der Code schon.
Naja, wenn ihr, ne, ne, ne, ne, ne.
Oh Gott, die ganzen Leute, die Test-Tests und Development geil finden, die, die hängen mich gleich auf.
Ja, aber echt.
Ähm, ist okay.
Ich hab gehört, wenn man ein bisschen, wenn man ein bisschen, äh, kontrovers ist, dann kriegt man auch mehr Spenden.
Ja, hab ich auch schon gehört, soll funktionieren.
Ähm, genau, und noch ein Punkt dazu, äh, Test-Cases, nicht nur einfach, wenn man jetzt gerade solche Specs hat, ja, nicht einfach nur das nehmen und dann einen Test-Case und dann ist die Sache abgehakt, sondern auch erweitern mit, äh, was ist denn, wenn ich mehr Daten hab als in dem Testfall?
Oder was ist, wenn ich weniger Daten hab? Weil wenn das mit einem Eintrag funktioniert und ich dann einem Buchstaben irgendwelche Ligaturen geben kann, äh, und allen anderen aber nicht, dann bringt das natürlich nix.
Also, äh, sinnvolle Tests schreiben. Können wir vielleicht auch mal eine Folge widmen, mal gucken.
Sinnvolle Tests schreiben, ja, das bringst du mir dann bei.
Mhm, live, in Farbe und bunt.
Ja, auch gern in, in, in, äh, HDR.
Gut, dann, äh, übergebe ich nochmal an dich.
Äh, ja, ich bin gerade überlegen, ob wir, ob wir darüber überhaupt jetzt nochmal sprechen. Ich, haben wir, haben wir schon mal über AV-Receiver gesprochen?
Also, ich weiß, dass wir, äh, ich weiß, dass wir, äh, wir haben schon mal über gesprochen. Äh, genau, also ich hab mal gesagt, irgendwie ist es irgendwie Peak-Bluetooth und, ähm, AV-Receiver sind scheiße und, äh, ich hab da so ein, so ein Quest gehabt nach dem richtigen Gerät, äh, für mich.
Und hatte zwei Geräte da, die beide, äh, sich, obwohl von komplett unterschiedlichen Marken, die sich, die beide, äh, darin geglänzt haben, äh, Bluetooth total scheiße zu unterstützen, also Bluetooth-Audio annehmen, ähm, ähm, also der Bluetooth-Receiver war einfach scheiße, so im Sinne von,
äh, ich spiel was ab und es hat irgendwie drei Sekunden Verzögerung, äh, ich, ich skipp im Song und dann, äh, passieren ganz komische Dinge, ich, die Lautstärke, Synchronisation funktioniert nicht vernünftig.
Ich hab jetzt tatsächlich was gefunden, was gut funktioniert. Ich hab's mit, mit Geld erschlagen. Ich will's, weiß gar nicht. Ich sag, nee, nee, Werbung mach ich jetzt nicht.
Ich hab jetzt was gefunden und, äh, Leute, lasst euch nicht verarschen. Wenn, äh, wenn in ein, in ein teures Gerät, sagen wir mal 500 Euro plus, ähm, ein Bluetooth-Receiver eingebaut ist,
der Scheiße macht, der, der drei Sekunden Verzögerung vom Sound hat, dann kauft das einfach nicht. Das, das geht einfach nicht. Das ist, äh,
äh, einfach, einfach nicht machen. Ähm, ja, ich bin da jetzt, ich bin da jetzt endlich happy und kann da einen, einen Punkt auf meiner
schlimmen Liste abhaken. Aber ich bin immer noch nicht überzeugt davon, dass Bluetooth gut funktioniert.
Ja, darfst du mir nachher gerne mal verraten, weil mein AV-Receiver gibt auch demnächst den Geist auf.
Kannst du mir die Marke verraten? Ja, ich kann ja mal bei der Firma anfragen und dann sponsern die uns vielleicht und dann, dann sag ich auch den Namen.
Ähm, alles klar. Ich sag nur, es ist, mit jeder Iteration ist es, es ist ungefähr 100, 150 Euro teurer geworden. Und es ist, ich bin jetzt an einem Punkt angelangt, der, der eigentlich schon total bekloppt ist.
Okay. Aber das Ding tut jetzt wirklich, äh, auch in den Edge-Cases, die mich sonst geärgert haben an anderen Geräten, tut es, was es soll oder hat eine extra Einstellung dafür. Also so der Klassiker ist, ähm, das Gerät sollte sich zu bestimmten Events ausschalten, wenn es weiß, dass es jetzt gerade nicht mehr gebraucht wird.
Aber da können interessante Edge-Cases entstehen. Also sowas wie, ich schalte es ein mit dem Fernseher über so ein ARC-Kabel. Also ich schalte den Fernseher ein und das ist mit so einem ARC-HDMI-Kabel verbunden.
Und dann geht der Receiver mit an. Jetzt wechsle ich, also und dann, wenn ich den Fernseher einfach dann wieder ausschalte, dann, äh, weiß, okay, gut, Fernsehton war gerade an, äh, geht's wieder mit aus. Das ist super, so soll das sein.
Also ist das, ich möchte mich eigentlich gar nicht drum kümmern müssen, dass das Gerät an oder aus geht mit, möchte ich gar nicht manuell machen müssen.
So. Ähm, jetzt, pass aber auf, jetzt gibt's folgenden Fall, ich wechsle jetzt während der Wiedergabe, während ich den Fernseher anhabe, auf Bluetooth-Input.
Mhm.
Dann ist ja de facto der Fernseher nicht mehr der Tongeber, sondern irgendein anderes Gerät und dann schalte ich den Fernseher aus und dann, was passiert auf den allen anderen Scheißgeräten?
Geht, geht auch mit aus, obwohl, obwohl die Audioquelle gerade von woanders kommt. Ja, es sind Edge-Cases, aber das Gerät macht sogar das jetzt richtig. Also, ähm, ich bin guter Dinge, dass ich's nicht in eineinhalb Wochen zurückschicken muss, was ich mit den anderen dann immer jeweils gemacht hab. Ja, äh, gut, das, das ist ein bisschen, äh, out of scope.
Aber vielleicht interessiert's ja irgendjemand. Vielleicht hat ja gerade jemand, ähm, auch den Fall, dass er irgendwie sowas sucht. Ähm, falls jemand genaueres wissen will zum Marco oder zum Typ, dann könnt ihr mich gerne auf Twitter anschreiben, ähm, dann verrate ich euch das.
Genau. Und falls es nicht interessiert, haben wir ja Kapitelmarken. Und falls, genau, äh, Kapitelmarken. Genau.
Gut, ähm, ich hatte ein ganz, äh, interessantes, spannendes, kleines Kundenprojekt letzte Woche. Und zwar ist das gewesen für eine Arztpraxis, die natürlich jetzt mit steigenden Corona-Zahlen aktuell sehr viele Tests am Tag hat.
Und, äh, deren Labor, mit dem die zusammenarbeiten, das bietet keine Online-Abfrage an. Das heißt, die bekommen die Ergebnisse per Fax, ja, muss man sich mal vorstellen, per Fax.
Und, äh, müssen dann die, die Patienten abtelefonieren. Und das kann bei, keine Ahnung, 20, 30 Tests am Tag oder was auch immer, äh, wenn du dann nicht gleich jeden erreichst und so, dann bist du echt viel beschäftigt.
Und das kostet sich verdammt viel Zeit. Und da war unser Auftrag, jetzt, äh, ein System zu schreiben, mit dem die Testergebnisse online abrufbar sind.
Und, äh, als das, da die Anfrage kam, gleich mal gedacht, oh, cool, klingt, äh, spannend, mal auch wieder was, was anderes. Ähm, haben aber gleich die Alarmglocken geschrillt.
Zeitenschutz, äh, möchte ich wirklich Patientendaten und Ergebnisse irgendwo zusammen speichern.
Ja, für den Fall eines Leaks, wenn dann da richtig schön, hier, Namen, Vorname, Geburtsdatum, äh, und hier war Corona positiv, am so und so fehlt und so, möchte ich natürlich nicht.
Aber trotzdem sollen die Leute das ja online abrufen können. Und, äh, unsere Lösung dafür war, dass die Zuordnung tatsächlich ausschließlich offline passiert.
Das heißt, online gespeichert wird nur entsprechend der Code und das Ergebnis dazu. Und die, äh, PDF-Erstellung, also man, es wird dann für den, für den Patienten eine Datei ausgedruckt, ähm, PDF ausgedruckt und für, äh, zum Verbleib in der Praxis eine Ausfertigung.
Und da steht dann eben drauf, was man machen muss, äh, wie man sich zu verhalten hat in der Zeit, ähm, wo man dann auch mit QR-Code, wo man das Ergebnis dann bekommt.
Und, ähm, das wird im Browser erstellt in, in der Eingabemaske, in dem Fall in, in, in WordPress als Backend für die Seite.
Und, ähm, das heißt, die Daten verlassen den Browser nie und werden nie irgendwo an den Server gesendet. Das Einzige, was erstellt wird online, ist der Code.
Und irgendwann später wird das Ergebnis zugeordnet anhand der offline gespeicherten Daten.
Und, ähm, auf der Ergebnisseite dann je nach Ergebnis, ob das jetzt ausstehend, positiv oder negativ ist, gibt es dann jeweils weiterführende Informationen zur Verhaltensweise, äh, zu Kontakten, ähm,
weiterführende Links, Telefonnummern und so weiter.
Und das war mal ganz, ganz lustig, was zu machen, wo man direkt weiß, das spart jetzt jemand einem einen Haufen Arbeit und ist vielleicht auch für die Patienten komfortabler, äh, da selber nachschauen zu können.
Das würde ich jetzt weiterverkaufen.
Ja, das wollte ich jetzt gerade nämlich noch sagen. Wenn denn jemand Arztpraxen als, äh, Kunden hat und keine Lust hat, sowas selber zu schreiben oder sich nicht zutraut, weil er vielleicht ein recht junger Entwickler, junger Entwicklerin ist, äh, oder auch einfach, ähm, das so schnell nicht hinbekommen, Auftragslage, was weiß ich.
Also, ich bin gerne gewillt, aktuell ist das eine Sonderlösung, direkt in das, äh, Custom-Theme, das wir da haben eingebaut, ähm, ich bin gerne gewillt, das als WordPress-Plugin zu verpacken, hab da auch schon ein paar Ideen für so Premium-Features mit Statistikauswertung und was weiß ich, ähm, oder auch gerne Standalone.
Wer das für einen Kunden haben möchte, einfach gerne bei mir melden. Twitter oder Twitter.
Also, das, das, das klingt doch echt nach, äh, da kriegst du jetzt gleich die Bude eingerannt, weil die, also das ist ja was, was jetzt gerade irgendwie jeder braucht, oder? Also, klingt für mich nach.
Ja, ich, also, ich, viele, äh, viele, äh, Labore bieten das, glaube ich, an. Da kriegst du schon, also, du kriegst ja auch für die, für die Corona-App, kriegst du ja auch schon beim Abstrich direkt den Code mit. Und je nachdem, wenn das dann positiv ist, dann kannst du den Code eingeben.
Ja, wenn ich mal das Fax-Papier bieten das auch schon. Also, ich bin, ich und, und auch andere, äh, Menschen in meinem persönlichen Umfeld sind schon mehrfach auch getestet worden. Und da kriegst du beim Abstrich, in der Regel, so war das bei mir immer, von der Praxis direkt auch schon einen Link mit, da kannst du dann online, äh, das abrufen. Ähm, ja, aber wie gesagt, alle, es bieten nicht alle Labore an, von daher, äh, ja.
Ja, manche, bei manchen, äh, ist ja das Fax-Papier leer ab und zu.
Ja, soll vorkommen.
Also, also, für, für Leute, die, also, falls ihr ein Fax in eurem Labor stehen habt, dann meldet euch beim Konstantin.
Genau.
Der hat da was für euch.
Und damit ist die Retro beendet und wir machen weiter.
Das ist heute Focus Visible, äh, eine Eigenschaft, die es schon relativ lange gibt in CSS, ähm, mit der ich mich immer mal beschäftigen wollte und irgendwie nicht so richtig dazu kam.
Und jetzt in den letzten Tagen, äh, hatte ich dann irgendwie nochmal einen Anlass dafür, weil ich es jetzt einfach mal ausprobieren wollte und auch konkret in einem Projekt brauche.
Ähm, und dabei geht's darum, ähm, einfach nur Focus in CSS oder, ähm, die, die Standard-Focus-Styles von Browsern sind oft von, äh, Designern und, äh, Product-Ownern, mit denen ich schon zusammengearbeitet habe, unerwünscht.
Also, worüber spreche ich da zum Beispiel bei einem Link, wenn ich da auf den draufklicke, dass er dann so einen gepünktelten Rahmen kriegt erst mal, ähm, oder ein Button, ähm, kriegt irgendwie einen bestimmten Rahmen.
Ähm, ähm, diverse Styles haben die Browser da, ähm, in petto und das ist oft, äh, ungewünscht und dann deswegen, dann kommt der Designer zum Developer und sagt, mach mal weg.
Und dann macht der sowas wie, ähm, Focus-Outline-Nun oder so, sowas Böses, was man nicht machen sollte.
Ähm, und eigentlich, äh, ist das in erster Linie deswegen, ähm, ein Problem, weil Focus, äh, egal wie man ein Element fokussiert, immer wirkt.
Also, auch wenn ich zum Beispiel mit der Tastatur fokussiere, wo vielleicht, wenn ich, wenn ich nur die Tastatur verwende, ähm, es ja ziemlich interessant ist, dass ich sehe, wo mein Fokus gerade ist.
Also generell finde ich es immer sehr, sehr, äh, interessant zu sehen, wo der Fokus gerade ist oder sehr, sehr nützlich.
Ähm, aber ich kann auch nachvollziehen, dass, äh, dass man in bestimmten Fällen, also zum Beispiel bei einem Mausklick auf bestimmten Elementen jetzt nicht unbedingt so einen gepünktelten Rahmen da haben will.
Ähm, ich finde die nicht schlimm, aber ich kann es nachvollziehen.
Ähm, und, äh, für diesen Fall gibt es jetzt Focus Visible, ähm, das nämlich erraten möchte, äh, auf welchem Wege gerade das Element fokussiert wurde.
Also, äh, zum Beispiel bei, ähm, Focus Visible wirkt zum Beispiel nicht bei einem normalen Mausklick, oder zumindest so soll das sein, ähm, sondern, äh, wenn ich nur mit der Tastatur jetzt ein Element fokussiere.
So, die, also das ist die Idee dahinter, dass, dass clever erkannt wird, auf welchem Weg ich jetzt ein Element fokussiere.
fokussiert habe und dann, äh, äh, dann eben, ähm, bestimmte Styles angezeigt werden oder eben auch nicht.
Also zum Beispiel eine, eine, ein Rahmen irgendwie um ein Input fällt oder ein Link oder keine Ahnung.
So, das funktioniert an sich eigentlich auch, äh, ich habe nämlich mal eine kleine Demo gebaut, ich, äh, ich hätte jetzt einfach nur irgendwie die, die MDN-Seite vorlesen können oder irgendwelche CSS-Tricks-Artikel, aber ich will sowas auch immer mal ausprobieren.
Und das habe ich jetzt heute gemacht, äh, den Link dazu, äh, kriegt ihr in den Shownotes.
Ähm, das hat ein paar Probleme, habe ich dann festgestellt.
Also, zunächst mal, äh, äh, fängt es damit an, dass, äh, in Firefox eine ganz andere Syntax derzeit unterstützt wird, also, äh, als der Standard eigentlich vorsieht.
Nämlich, also normalerweise, der Standard sieht vor, in den Chromium-Browsern ist das auch so, äh, Doppelpunkt Focus minus Visible.
Ähm, in, in Firefox ist es Doppelpunkt minus Mods minus Focus Ring.
Und der erste, der erste, äh, Stolperstein, über den ich dann gestolpert bin, habe gedacht, Mensch, wieso funktioniert das denn nicht, war, dass ich natürlich versucht habe, Focus Visible und, äh, Focus Ring einfach mit Komma zu trennen, die Selektoren, und dann denselben Style drauf anzuwenden.
Nee.
Dann funktioniert aber der ganze Selektor nicht, ne, wenn das Unbekanntes dabei ist.
Genau, der ganze Selektor funktioniert dann nicht. Ich hätte angenommen, der müsste funktionieren, bei manchen ist es aber, äh, bei manchen geht das, bei manchen geht das irgendwie nicht, also, bei, äh, User Select, glaube ich, hatte ich das Problem auch schon.
Genau, das hab, ja.
Ähm, also, erst mal, du musst quasi zweimal denselben, denselben Kram hinschreiben oder dir das irgendwie mit SAS irgendwie zurechtbauen, dass du, äh, da, äh, keine Ahnung, das mit Mixins oder so machst, dass, dass, dann schreibst du es nicht doppelt, aber am Ende im CSS wird, wird, wird das doppelt stehen, was du, was du dafür brauchst.
Also, du musst es einzeln schreiben, einmal Focus Visible, einmal Mods Focus Ring, ähm, und dann das, das zweite Problem, ähm, über das ich gestolpert bin, ist, dass die, die, der Algorithmus, wie versucht wird zu erkennen, ähm, was ich da gerade mache, sich auch irgendwie unterscheidet.
Ähm, weil in, ähm, ähm, also, ich hab's jetzt in Edge ausprobiert, in Edge ist es so, dass, und, äh, ja, übrigens, äh, lieber, lieber einer Hörer, der mich gefragt hat, ob ich Edge mal gesagt hab, ja, ich hab Edge gesagt, äh, in der letzten Folge, äh, ich benutze ihn tatsächlich ab und zu.
Und ich bin nicht gesponsert, äh, von Microsoft an der Stelle, aber ich find ihn tatsächlich, äh, es ist der beste Microsoft-Browser, äh, der jemals da gewesen ist.
Ich mein, es ist natürlich nicht so schwer, wenn man sich die Engine quasi klaut, äh, eine der besten Engines, aber okay.
Naja, ähm, also Edge macht das folgendermaßen, ähm, wenn ich klicke auf einen Link, passiert nix oder wird nur Fokus angewendet, nicht Fokus-Visible, ähm, wenn ich auf einen Button klicke, ebenso, wenn ich auf ein Input-Feld klicke, dann habe ich trotzdem den Fokus-Visible-Style.
Und ich weiß nicht so genau, warum. Wenn ich jetzt mit der Tastatur komme, also per Tabular-Taste, dann ist bei allen dreien, ähm, Fokus-Visible am Start.
Ich hab da so einen schönen Regenbogen, ähm, drumherum gepackt. Ich weiß nicht, ob ich, ich muss, ich muss, glaube ich, dem Konstantin mal schicken, dass der mal mitgucken kann, äh, die Demo.
Ja, ich guck gerade die, die, äh, MDN-Demo an. Die hat nur so einen orangenen.
Ja, die MDN-Demo, die kannst du vergessen.
Die funktioniert auch nicht so wirklich.
Hier hast du den, hier hast du den richtigen Link. So, ja, das ist der, genau, es ist eben, es ist eben sehr, sehr merkwürdiges Verhalten.
So, also wie gesagt, Edge macht das so. In Firefox haben wir wieder ein anderes Verhalten.
In Firefox ist es so, ähm, wenn ich, Moment, ich muss jetzt nochmal kurz nachvollziehen, ähm, wenn ich jetzt initial draufklicke, also wieder kein, kein Fokus, äh, Visible, also auf den Link, ähm, kein Fokus-Visible, ähm, bei dem Input-Feld auch nicht und bei dem Button auch nicht, also bei nix wirkt Fokus-Visible, dann tappe ich rein, dann habe ich die Fokus-Visible-Styles.
Das würde ich jetzt auch so erwarten. Allerdings, wenn ich einmal getappt habe und da nochmal draufklicke, dann wirken auch die Fokus-Visible-Styles in Firefox.
Das heißt, ich kriege die dann nicht mehr weg. Wenn das einmal, wenn einmal dieser Modus ausgelöst ist, ähm, dann sagt der Firefox so, du bist also mit Tastatur unterwegs, ähm, deswegen zeige ich dir jetzt Fokus-Visible immer an.
Kann man jetzt drüber streiten? Ich weiß nicht genau, was im Standard steht, wer sich jetzt da an den Standard hält, vielleicht ist das auch irgendwie sowas, was nicht so genau definiert ist mal wieder, ähm, aber die Browser versuchen da besonders clever zu sein, um irgendwelche Sachen irgendwie rauszufinden, wie, wie das Verhalten ist.
Ähm, wenn man da auf den, äh, CSS-Tricks-Artikel dazu geht, ähm, da ist so eine, so eine kleine Tabelle drin, ähm, in welcher Situation Fokus-Visible sichtbar sein sollte.
Allerdings, ähm, ist das, ähm, wie gesagt, die Browser unterscheiden sich da jetzt schon.
Also, ähm, zum Beispiel soll Fokus-Visible auch per Setting, per Browser-Setting, ähm, angeschaltet werden können.
Das heißt, wenn ich jetzt sage, ich möchte den Browser-Fokus, ich möchte den Fokus immer sehen, kann ich das, äh, weiß ich nicht.
Ich habe noch kein Browser-Setting gesehen in der Richtung, aber kann sein, dass es das gibt.
Ähm, es soll auch sichtbar sein, ähm, generell für Inputs.
Das würde jetzt das, äh, Verhalten von, äh, Edge, beziehungsweise Chrome in dem Fall unterstützen.
Ähm, in Firefox-Systemen nicht so.
Ähm, Keyboard-Navigation, ja, äh, kann ich bestätigen.
Ähm, das funktioniert tatsächlich auch.
Ähm, wenn man mit einem, mit einer Maus kommt, soll es nicht funktionieren.
Da würde jetzt der Edge widersprechen bei seinem Input, was ich irgendwie wirklich merkwürdig finde.
Hast du es mal ausprobiert?
Ist es bei dir auch so?
Ja, ja.
Es ist wirklich merkwürdig.
Ja, also ich finde da vorhin, ich, der Konstantin meinte so, lass uns mal endlich anfangen.
Ich so, nein, ich frage nur 15 Minuten, um meine Demo fertig zu bauen, äh, weil ich, weil es einfach so komisch
äh, reagiert hat.
Ähm, so, ja, genau.
Und dann gibt es noch natürlich den Fall, dass ein Skript, ähm, Fokus, äh, macht.
Und dann soll auch Fokus-Visible, äh, angesprochen werden.
Ähm, und, äh, aber Moment, warte mal.
Das habe ich jetzt, äh, bevor ich jetzt was Falsches sage,
A script causes Fokus to move from Fokus-Visible to another element, dann soll es kommen.
Ähm, wenn es von einem nicht-Fokus-Visible-Element kommt, dann nicht.
Also, und selbst die Demo in dem CSS-Tricks-Artikel, den ich, äh, auch in, den wir auch in die
Shownotes packen, ähm, ist da nicht so eindeutig und funktioniert nicht überall so.
Also, da ist zum Beispiel der Firefox-Fall, äh, glaube ich, gar nicht bedacht.
Also, in meinem Firefox funktioniert das eingebettet zumindest nicht.
Ich habe aber auch schon festgestellt, dass je nachdem, ob ich mich im iFrame befinde oder
nicht, ähm, das Verhalten unterschiedlich sein kann.
Also, das ganze Ding ist noch ziemlich buggy.
Ähm, es ist trotzdem meine Property der Woche, weil, äh, ich finde, dass es, das ist ein
verdammt wichtiger Use-Case, ähm, da, daran, dass, ähm, dass es in Firefox noch, äh, mit,
mit Mods-Prefix und einer anderen Eigenschaft, äh, ist, sieht man, das Ding ist noch im Fluss.
Ähm, ich kann auch noch mal kurz was, äh, zu der, zur, zur Browser-Unterstützung, ähm,
geben. Also, es sind tatsächlich derzeit nur die, äh, Chromium-basierten Browser und
Firefox, die das unterstützen und Firefox halt mit dieser Spezial-Syntax, äh,
ähm, bei Opera ist es hinter einem Flag, ähm, noch und noch dichter und, äh, ansonsten
also irgendwie Safari oder so, äh, kann das auch noch nicht. Ich sehe KaiOS, äh, kann
es auch, aber ich glaube, das basiert auf Firefox. Es hat nämlich auch diese Focus-Ring-Syntax.
Also, das ist noch, ähm, relativ neu, äh, gerade im Fluss, aber ich finde, äh, ist eine
echt coole Sache und sehr wichtig. Ähm, und da jetzt noch ein ganz kleiner Ausflug, äh, was
mir dabei aufgefallen ist, als ich bei Can I Use nachgeschaut habe, wie die Unterstützung
ist, ist mir was aufgefallen, was Neues, was ich auch irgendwie über Twitter schon so halb
mitgelesen hatte, aber jetzt weiß ich, was das wirklich bedeutet. Ähm, bei Can I Use, äh,
ist jetzt Browser-Stack mit angebunden. Ähm, da ist nämlich jetzt, äh, unter den, unter
den jeweiligen Erklärungen und Eigenschaften, da wo die Notes und die Known-Issues und sowas
stehen und die Resources, gibt's jetzt einen neuen Reiter, Reiter, der heißt Test on Real
Browser. Da kann ich einen Browser auswählen, also zum Beispiel einen IE6. Und dann habe ich
da einen Knopf, Launch this Browser. Also, die werden jetzt unterstützt vom Browser-Stack
und dann kann ich tatsächlich, ich hab das vorhin mal ausprobiert, ähm, einen IE6 aufmachen,
äh, also in meinem Firefox. Ähm, warte mal, hier ist Starting Real Explorer. Ich mach das
grad mal live. Ähm, ah, die sagen jetzt schon, äh, ich, ich muss jetzt schon irgendwie was
kaufen, damit ich's benutzen kann, oder? Darf ich, darf ich noch? Ja, nee, ich glaub, ich
glaub, ich muss jetzt schon was kaufen. Aber das fand ich echt extrem beeindruckend, dass
ich vorhin einfach mal im Browser ein IE6 öffnen konnte. Nicht, dass man den noch irgendwie
benutzen sollte, aber ... Ja, wie, du supportest den nicht mehr? Äh, nee, nur 5.5 und 7, aber
6 ist rausgefallen aus dem Support, weil da haben wir nicht mehr genug.
Also, äh, um, um ehrlich zu sein, ich bin, äh, bei mir auf der Arbeit in einer relativ
komfortablen Situation, ähm, da wir Tools für interne, äh, internal Use, äh, hauptsächlich
machen. Ähm, die, die Browser stehen ja unter, unter, so ein bisschen unter der, der Herrschaft
unserer, unserer IT, ähm, und, ähm, wir haben zum Beispiel auch schon kein IE11 mehr bei uns
drin, sondern, äh, und, äh, Edge, glaube ich, haben wir mittlerweile auch nur noch den
Edge Chromium. Also, es ist, ähm, wir können, wir haben ein relativ kontrolliertes Umfeld
und unsere Browser werden auch relativ regelmäßig geupdatet. Das ist, äh, ich weiß, in vielen
anderen großen Firmen ist das nicht so. Da, da, ich weiß nicht, wo man, früher hieß es
immer, ja, die hängen noch auf dem IE6, als irgendwie IE9 schon, äh, da war. Ähm, ich weiß
nicht, was jetzt der alte Browser ist, auf dem die Firmen noch hängen oder ob das immer
noch so ist, aber, ähm, wir sind relativ. Schreibt's in die Kommentare. Aktuell. Schreibt's in die
Kommentare und drückt die Glocke bei Twitter. Wir brauchen noch so ein Ding, Ding, jedes Mal,
wenn wir drückt die Glocke sagen. Ja, äh, wolltest du dazu noch was sagen? Äh, ich hatte
tatsächlich, letztens hab ich an der Seite gebastelt, ähm, also die, die nicht von mir war, sondern
wo ich für jemanden was eingebaut hab und die richtete sich vom Zielpublikum sogar
an Menschen mit potenziellen, äh, Sehbeeinträchtigungen und da war auch alles an visuellem Feedback
bei Fokus weg. Ja, super. Und, äh, ja, ganz großartig. Das ist ja sogar, das ist, das
finde ja sogar ich nützlich, wenn ich den Fokus sehen kann. Ich bin ja auch so jemand, der, der
total viel mit, äh, Keyboard navigiert tatsächlich und das stört mich auch kolossal. Also ich hatte
da was an dem Formular gebaut und hab dann selber gedacht, es funktioniert nicht, was ich
da mache, weil ich dann zu einem Selectfeld gesprungen bin und das hat einfach halt keinen
Fokus oder sowas, äh, visuell erhalten. Und ich dachte, was, warum, warum funktioniert das denn?
Was hab, was hab ich denn kaputt gemacht? Äh, und dann hab ich festgestellt, durch Pfeiltaste
hoch, runter, dass sich da was verändert im Selectfeld. Also ich war drin, ich hab's nur nicht
gesehen. Oh, dazu hab ich auch noch eine Perle. Ähm, was, was ich heute gesehen hab auf, auf einer
Seite. Ähm, und zwar, also auch, äh, fehlender Fokus, großes, großes Suchfeld. Ähm, also so, so, so, so, so, so ein
richtig riesiges Suchfeld mitten auf der Seite. Ähm, und dann fiel mir auf, äh, beim Fokus
durchtappen, dass der Cursor die ganze Zeit blinkt in dem Suchfeld. Und ich dachte so, Moment mal, ich
seh doch jetzt hier gerade, dass ich auf irgendeinem Link bin, das Suchfeld kann gar nicht aktiviert
sein. Dann guck ich mir den Style davon an und seh, naja, da ist halt ein animierter, blinkender
Cursor rein, rein animiert worden mit CSS. Nein. Und doch, und dann dachte ich mir, hm, aber das ist
ja Quatsch, weil wenn ich jetzt was eintippt, dann geht das ja gar nicht da rein. Und dann hab ich
getippt und es ging da rein. Ach. Das heißt, die fangen jede Tastatureingabe auf der Seite
ab. Brutal. Und der geht dann da rein. Das bedeutet natürlich, dass du damit alle möglichen
Screenreader-Shortcuts, die du potenziell hast, da gibt es nämlich sowas wie Haar für Headings
und sowas, das killst du damit komplett. Also alle, jede assistive Technologie, die auf Shortcuts
setzt, die irgendwie Buchstaben hat, vergiss es, sofort tot, kaputt. Ja, aber ich kann nachvollziehen,
warum mal jemand sich gedacht hat, dass das eine gute Idee ist. Man hat halt nur den einen Nutzer
im Sinn gehabt, der so, was man glaubt, wie der halt funktioniert. Und dass der halt
es möglichst einfach hat, da einzutippen, also nicht mit Autofokus, wir setzen den Fokus
da rein, sondern egal, was du tippst, ich kann schon verstehen, ich kann nachvollziehen.
Wenn man nur UX betrachtet, ganz ohne Accessibility und sonst irgendwas, könnte das, wenn man genau
weiß, wie der Nutzer ist, könnte das vielleicht sogar eine gute Idee sein. Aber so funktioniert
die Welt leider nicht. War das nicht, zumindest früher mal, auch bei Amazon? Wenn du da auf
die Seite gekommen bist, da konntest du, glaube ich, da war direkt standardmäßig der Fokus
im Suchfeld und du konntest tippen, soweit ich weiß. Ja, das ist ja Autofokus, aber das
meine ich damit nicht. Ja, ich weiß schon, was du meinst. Also egal, wo du hingekickt hast,
selbst wenn wirklich was anderes fokussiert war, war trotzdem hier Blinky Blinky und du konntest
tippen. Nein, nicht bei Amazon. Das weiß ich jetzt nicht, ob das so war. Ich meine nur, ich
habe verstanden, was du gerade erzählt hast. Ja, es ist wirklich, und der Cursor ist ja gar nicht
echt, der da blinkt. Der ist mit CSS da reingebaut und der blinkt einfach immer.
Also außer, wenn man was schreibt, dann kommt tatsächlich der echte Cursor und rutscht
weiter, weil dann der Fokus mit Gewalt natürlich in dieses Feld gezwängt wird. Also ich weiß,
dass der Fokus nicht immer da ist, aber in dem Augenblick, wo ich tippe, wird er in dieses
Feld einfach reingesetzt. Also jeder Keystroke wird abgefangen. Das ist schon crazy. Das habe
ich vorher so noch nie gesehen. Ja, damit können wir die Property abschließen. Abschließen? Wir
brauchen noch so ein Abschließgeräusch. Nein, wir haben ja ein, wir haben jetzt ein, das nächste
Startetgeräusch, weil wir gehen immer nur nach vorne, wir gehen nicht zurück. Richtig. Weil wo wir
sind, ist vorne. Sie sind hochstwahrscheinlich neugierig, wer ihnen gerade schreibt. Es scheint mir, dass ich
auch überrascht war, eine solche Nachricht zu lesen. Ich habe keine Lust, sie in einen unangenehmen Zustand
zu versetzen. Ich schlage vor, als Erwachsene zu kommunizieren und auch ein mögliches Treffen zu
besprechen. Ich hoffe, du hast Freizeit davor. Das Leben hat sich so entwickelt, dass ich immer noch
nicht heiraten konnte. Ich begann relativ spart zu denken, dass es Zeit war, einen Ehemann zu suchen.
Früher glaubte ich, dass der Mann meiner Traume mich in dieser Welt finden wurde. Mit der Zeit wurde mir
klar, dass das Leben alleine weitergehen kann. Erst vor einer Woche habe ich beschlossen, dass ich mein
Schicksal selbst entscheiden muss. Ich fand eine ausgezeichnete Plattform vor die Kommunikation ohne
finanzielle Kosten. Natürlich ist dieses Format der Datierung vor mich neu, aber ich finde es interessant.
Die Menschen nutzen die Gelegenheit, immer weniger auf die Straße zu gehen. Das Zeitalter der
Informationstechnologie dominiert zunehmend. Es wird vor mich unpraktisch sein, die Kommunikation
fortzusetzen und Briefe auszutauschen. Das Tempo des Lebens zwingt die Menschen, vorsichtiger mit
der Zeit umzugehen. Dies ist der Ort, an dem sie mich finden konnten und wir werden mit der
Kommunikation beginnen. Nach einer einfachen Registrierung finden sie mein Profil. Verwenden
sie dazu meinen Spitznamen helena354. Ich warte auf sie auf der Website. Ich hoffe, dass faszinierende
Kommunikation auf uns wartet. Mit freundlichen Grußen, Helena.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Bist du auch ein bisschen erregt?
Sehr, sehr.
Man merkt schon, das ist jetzt fast zwei Minuten lang oder so der Spam-Spot. Wer liest sich,
also es ist ja schon anstrengend dazu zu hören, obwohl ich es selber aufgenommen habe, aber
wer liest sich dann so lange eine Spam-Mail durch und denkt sich dann, oh ja, das klingt
vertrauenswürdig, da melde ich mich gleich mal an.
Ich habe sie durchgelesen und ich habe mir gedacht, oh, das ist eine super Mail.
Wir gehen, glaube ich, an Spam-Mails auch anders ran. Also hier der obligatorische Hinweis
an unsere Neuzuhörerinnen und Zuhörer. Spam-Spots sind Spam-Mails, die wir tatsächlich im
Original-Wortlaut verwursten, inklusive fehlender Umlaute, wie diesmal der Fall. Und die verwursten
wir dann zu Spam-Spots. Und diesmal muss ich dazu sagen, die Hintergrundmusik, mir gehen
so langsam die Public-Domain-Musikstücke aus. Und dann habe ich, das poste ich auch in
die Shownotes, beim Internet-Archive gefunden, dass es da auch Musikarchive gibt.
Und diesmal muss ich, darf ich, kann ich, soll ich anbringen, dass es sich um eine
CC bei NC, also Creative Commons, mit Attribution und nicht-konventioneller Nutzung nach Version
2.0 handelt. Und muss auch noch kurz vorlesen, der Titel ist Take Me Now. Der Artist Nick Chapman
und vom Album Waka Chika Waka Chika Porn Music for the Masters Volume 1. Und ich glaube,
ich werde da in Zukunft öfter drauf zugreifen. Interessant, was es da so alles gibt.
Ich fand's großartig.
So, bist du imstande, weiterzumachen? Oder bist du zu erregt?
Ja, ich bin, also...
Wir machen weiter.
Hier ist WWS IV mit dem Tagesthema.
Das nüchterne Intro jetzt, das hat mich ein bisschen wieder abgekühlt.
Das hat sich wieder runtergebracht, sehr gut. Ich hab ja eingangs gesagt, wir füllen heute
eine Umfrage aus. Das war kein Spaß. Wir füllen heute eine Umfrage aus.
Boris, du hattest die Idee. State of CSS ist eine Umfrage. Die hatte ich letztens in meiner,
auch in meiner Twitter-Timeline. Und hab sie dann irgendwie kurz angeklickt und dann doch
wieder verworfen, weil man sich anmelden musste. Und da hatte ich irgendwie keine Lust drauf.
Und dann hast du vorgeschlagen, dass wir das einfach mal zum Thema machen.
Genau. Das ist ein sehr, sehr billiges Thema. Da muss man nicht viel vorbereiten.
Wir sind faule Säcke. Außerdem hatten wir jetzt sehr arbeitsintensive Themen. Jetzt machen
wir mal was anderes. Ich glaube, es wird trotzdem spannend, weil wir da dann auch über Sachen
reden können, ob wir die kennen oder nicht. Erzähl doch du mal kurz, was das denn überhaupt
ist.
Ja, ganz kurz. Es geht um eine Umfrage, die heißt, ich sag's nochmal, State of CSS 2020.
Die gab's letztes Jahr schon mal. Ich weiß nicht, ob es die davor schon mal gab.
Es gab davor State of JS.
Ja, das kenne ich auch.
Die gab's, glaube ich, seit 2017. Das sind auch die gleichen Macher.
Da wird so ein bisschen erfasst. Also, ich hab sie tatsächlich, darf ich das sagen? Ich
hab auch schon mal reingeguckt. Da wird so ein bisschen abgefragt, wer sind denn so, also
so ein paar demografische Sachen. Wer, wie alt, Geschlecht und so weiter sind denn CSS-Developer?
Und dann auch so ein bisschen, welche Features sind denn wie bekannt? Hat man damit schon
mal was gemacht? Kennt man das? Kennt man das nicht? So in diese Richtung geht's. Und
dann wird am Ende, ich weiß nicht genau, wie lange, wie lange jetzt noch geht? Steht
das da dabei.
Ich sehe es jetzt gerade auf den ersten Blick nicht.
Irgendwann, wenn die genug Daten haben, nehme ich mal an,
dann werten die das aus und dann
zeigen sie nochmal irgendwie, was ist denn
der State of CSS 2020.
Und ich finde es irgendwie eine ganz
interessante Sache. Ich finde es immer geil, wenn da
möglichst viele Leute mitmachen,
weil ich auch,
ich kann ja immer nur
so das überblicken an der
CSS-Branche, wenn ich das mal so nennen kann,
oder irgendwie der CSS-Szene.
Die Leute, die ich kenne oder denen ich auf Twitter folge,
was man irgendwie öffentlich so mitkriegt.
Aber ich finde es total interessant,
je mehr Leute mitmachen, umso besser,
dass man irgendwie so mal einen Überblick kriegt. Ich finde es einfach
sehr, sehr spannend. Und das zeigt dann auch so,
welche Features sind denn eigentlich noch unbekannt,
die eigentlich total geil oder
total nützlich sind. Also man lernt daraus auch
was, wenn man das macht, weil
es ist vielleicht dann auch was dabei, was man noch nicht kannte.
Man muss dazu sagen, die Ergebnisse werden auch wirklich öffentlich
dann auch grafisch dargestellt.
Dementsprechend, ich weiß gar nicht,
wer so genau dahinter steckt,
das ist keine Firma, die dahinter steckt,
wenn ich das richtig weiß. Das sind einfach
eine Handvoll Entwickler, die diese
State-of-JS-Fragebögen
ursprünglich ins Leben gerufen haben.
Und das Ganze jetzt eben auch auf CSS machen.
Also das ist einfach wirklich nur
reines Interesse von Entwicklern.
Ich glaube, da steht keinerlei
finanzielles Interesse in irgendeiner Form dahinter.
Ja, warte mal, da stehen jetzt hier zwei Entwickler, glaube ich.
Ist made by Raphael Benitz und Sacha Greif.
Also zwei Leute, ja, keine Ahnung.
Und selbst wenn, ich finde es eine gute Sache.
Ist auch verfügbar in Englisch, Deutsch, Spanisch, Französisch,
Kindie, was auch immer,
in vielen verschiedenen Sprachen.
Genau, die Ergebnisse vom letzten Jahr.
Und wer möchte, der kann doch einfach mal mitmachen,
auch während wir das hier machen.
Genau, mach doch mal mit.
Stateofcss.com
Genau, und die Ergebnisse vom letzten Jahr,
die sind auch online, kann man sich noch angucken.
Und die sind auch irgendwie schon interessant.
Es ist wirklich auch grafisch eine hübsche Seite.
Also man sieht schon, dass die Leute sich auch mit CSS beschäftigen,
die das gemacht haben.
Das ist schon irgendwie schick.
Ja, schade ist, dass das Logo als Grafik drin ist.
Das wäre natürlich schick gewesen,
wenn man das irgendwie mit CSS Shapes oder so
schon direkt als CSS umgesetzt hätte.
Du, das ist als CSS umgesetzt.
Also wenn ich das ankläge rechts gehe,
Grafik, Stateofcss2020png.
Bei mir sind das Diffs.
Das ist daran, dass ich Firefox bin.
Diff Class, Letter C zum Beispiel habe ich hier.
Und dann Class Tilde, Tilde 2, Tilde 3.
Das sind diese komischen Waves da rechts.
Das ist tatsächlich mit CSS gebaut bei mir.
Also ich habe sie auch in Chrome als Grafik.
Direkt auf der Startseite.
Seltsam.
Ja, keine Ahnung.
Gut, also wir machen mal.
Wir fangen mal an.
Wir werden dann natürlich ...
In Firefox haben sie es durchgezogen,
In Chrome haben sie gedacht, naja.
Wer mit Chrome kommt, hat er es nicht verdient.
Okay, ja, dann fangen wir mal an, oder?
Genau.
Also jetzt kommt natürlich schon die erste Hürde,
nämlich da muss man jetzt irgendwie eine E-Mail-Adresse eingeben.
Ich mache da immer ganz gern welche, die es nicht gibt.
Man sollte natürlich das jetzt aber auch nicht spammen
mit unnötigen Einträgen und unechten Einträgen.
Also ich habe einfach schnell meine E-Mail-Adresse eingegeben.
Das geht ja ganz schnell.
Warte mal, was?
Langehands, Trashmail?
Also es sind ja, ich erzähle schon mal ein bisschen für die Leute,
die nicht die Zeit oder die Möglichkeit haben, das gerade selber mitzumachen.
Eingeteilt in verschiedene Kategorien.
Layout, Formen und Grafik, Interaktionen, Typografie, Animationen und Transformationen,
Media-Queries, andere Features, Einheiten und Selektoren,
Pre-Post-Processors, CSS-Frameworks, CSS-Methoden, CSS-in-JS,
andere Werkzeuge, Umgebungen, Ressourcen, Meinungen über dich.
Und da sind dann jeweils eine Handvoll von Fragen.
Also das ist, glaube ich, das klingt jetzt nach relativ vielen Kategorien,
aber da sind immer so drei, vier, fünf Fragen drin,
die jeweils drei Antworten haben, die man schnell anklicken kann.
Und vom Format her ist das eigentlich auch immer das Gleiche an Antworten,
nie davon gehört oder nicht sicher, worum es sich handelt.
kenne ich, aber nicht genutzt oder habe ich verwendet.
Und dementsprechend hat man das dann doch recht schnell durchgeklickt.
Ich habe gerade mal die Sprache ändern müssen,
weil bei mir hat er das automatisch auf Deutsch gemacht
und das will ich eigentlich.
Ja, ich musste es automatisch auf Deutsch,
ich musste es manuell auf Deutsch ändern,
weil ich es für den Podcast, weil wir ja auf Deutsch senden,
auch auf Deutsch vorlesen wollte,
weil normalerweise habe ich auch immer alles auf Englisch.
Aber ich dachte, wenn wir auf Deutsch senden,
dann machen wir auch die Fragen und so auf Deutsch.
Dann lese ich es aber auch,
dann lese ich es aber auch Deutsch vor,
also SubGrid.
SubGrid, das ist ein schöner Name.
Hallo, das ist meine Tochter, die SubGrid.
Sollen wir anfangen?
Ja.
Also die erste Kategorie ist Layout.
Und da ist die erste Frage,
wie positionierst du Elemente auf dem Bildschirm?
Und dann sind jetzt, keine Ahnung,
oh, das sind relativ viele Fragen.
Ja, gut, bei der ersten ist gleich ein paar mehr, ja.
Das erste ist CSS Grid,
und da kann ich sagen, habe ich verwendet.
Ja, habe ich auch verwendet.
Ich glaube, das kennt man mittlerweile auch.
Mittlerweile, ja.
Wir hatten es, als wir 2000,
boah, wann war das, wann war wir in Amsterdam auf der CSS Conf?
CSS Days 2017.
Da war das relativ neu,
da wurde es noch so angekündigt,
hier ganz groß,
oh, das ist jetzt endlich in den Stable Builds gelandet und so.
Aber ich glaube, denke doch,
dass man das mittlerweile schon,
ich nutze es tatsächlich nicht so oft.
Ich bin,
ich setze tatsächlich Flexbox noch recht häufig ein.
Grid tue ich mich auch ein bisschen schwer,
auch weil ich es nicht so häufig nutze.
Ich müsste es einfach mal mir selber in den Arsch treten
und es öfter mal nutzen.
Lass uns mal eine Grid-Folge machen.
Können wir sehr gerne mal machen, ja.
Es gibt nämlich auch sehr coole Tools,
mit denen man sich auch visuell einfach die Grids zusammenziehen kann.
Weil wenn man da,
ja, wenn man da versucht,
das händisch zu schreiben
und sich noch nicht so gut damit auskennt,
dann ist es so ein bisschen,
man wird da ein bisschen überwältigt
von der Syntax und von der Komplexität,
die man da erreichen kann.
Aber was geil ist an Grid,
ist, dass es eine Syntax gibt,
wo du dein Layout im Prinzip schreibst.
Also das klingt jetzt komisch,
sondern du kannst dein Layout im Prinzip
ins CSS so schreiben,
wie es später aussehen soll.
Du hast dann quasi,
du schreibst tatsächlich die Positionen
von den Elementen.
Du hast Spalten und Zeilen
und kannst dann wirklich
Head, Head, Head schreiben
und futter, futter, futter.
Genau, genau das.
Also das ist,
also wenn man das mal gemacht hat,
das ist super intuitiv.
Also ich weiß,
bei Flexbox und Grid,
da sind oft Sachen dabei,
wo man so denkt,
oh ja,
das muss ich irgendwie lernen,
das ist mir irgendwie nicht so klar.
Aber wenn man das mal gesehen hat,
dann möchte man eigentlich
nichts anderes mehr machen.
Wobei ich sagen muss,
ich setze es auch nicht so oft ein.
Das liegt aber auch daran,
dass ich hauptsächlich
auf der Arbeit
das Bootstrap-Grid
verwende,
das nicht auf CSS-Grid basiert.
Aber so für private Projekte,
wie zum Beispiel
mein Accessibility-Cheatsheet,
habe ich das schon mal
eingesetzt
und da so ein bisschen
mit rumgespielt.
Also ich kann es nur empfehlen
und es gibt, glaube ich,
auch coole,
so coole kleine Spiele
und Tutorials,
wie man das lernen kann.
Aber wir können nicht
an jedem Punkt so lange reden.
Nee, krass.
Ja, habe ich auch gerade gedacht.
Gut, schnell weiter.
Sub-Grid.
Habe ich noch nicht verendet,
kenne ich aber.
Verendet, verwendet.
Ich bin noch nicht dran verendet,
aber ich kenne es.
Ist im Endeffekt,
wenn man so ein Card-Layout hat,
dass wirklich alle,
wenn das jetzt nicht
im gleichen Parent-Element ist,
dass dann alles trotzdem
auf der gleichen Höhe ist.
Ich hoffe,
das habe ich jetzt
in Kürze korrekt wiedergegeben.
So habe ich es auch verstanden.
Die Rachel Andrew auf Twitter,
die hat da immer
sehr viel drüber geschrieben.
Also da könnt ihr mal reingucken,
wenn ihr mehr was habt.
Weiß ich auch gar nicht,
wie da der Stand ist,
ob das überall
benutzt werden kann.
Mein letzter Stand war,
ja, lässt sich leider
noch nirgends so
wirklich sinnvoll nutzen.
Aber ich glaube,
wir können da jetzt wirklich
nicht zu jedem einzelnen Punkt
hier keiner use.
So, genau.
Flexbox habe ich verwendet.
Flexbox habe ich auch verwendet.
Wer es nicht kennt,
guck's nach.
Generell bei allen Sachen,
die jetzt kommen.
Wer es nicht kennt,
nachgucken lohnt sich.
Außer wir sagen,
es lohnt sich nicht.
Genau.
Also wir können uns in die E-Show
uns ja auch ein paar Links reinpacken.
Vielleicht auch nicht zu allem.
Ich glaube,
dann wird es wirklich zu viel.
Nein, das wird zu viel.
Es geht auch erstmal darum,
also es ist ja keine Schande,
es nicht zu kennen,
sondern man stellt durch die Umfrage fest,
kenne ich nicht,
schaue ich mir an
und genau so ist es auch gedacht,
man macht das am besten so.
CSS Multicallium
habe ich gerade erst letztens
bei einem Projekt eingesetzt.
Also automatisierte Spaltigkeit im CSS.
Kenne ich,
habe ich aber noch nie benutzt.
Ich habe noch nie
einen Anwendungsfall gefunden,
wo das irgendwie sinnvoll hingepasst hatte.
In meinem Fall,
also wenn es dich interessiert,
was konkrete Anwendungsfall,
es ist eine Art Kiosk-System
für Museen
und da können die halt Inhalte
einpflegen
und die sollen das natürlich
auch irgendwie ansprechen.
Du musst halt auf dem Bildschirm
immer gucken,
wie kriegst du das platztechnisch unter
und je nachdem,
wie viel Content du hast,
wie viel Text,
wie viel Bild,
kann das tatsächlich sinnvoll sein,
das irgendwie dreispaltig
oder vielleicht vierspaltig
oder sowas aufzuteilen.
Und da die jetzt auch nicht
unbedingt Gestalter sind,
die das machen,
kann ich da nicht verlangen,
dass ich dann mit CSS
irgendwie selber was basteln
und vier verschiedene Spalten befüllen
oder was weiß ich.
Das heißt,
ich wollte das einfach schön fließen lassen
und möglichst automatisch
und das geht damit natürlich super.
Okay.
CSS-Writing-Modes.
Weiß ich jetzt gerade gar nicht,
was gemeint ist.
Schrift,
ob die Schrift von oben nach unten,
rechts nach links.
Irgendwie sowas in der Richtung.
Also ich kann mit dem Begriff
gerade nichts anfangen.
Es kann sein,
dass ich es vielleicht schon genutzt habe,
aber ...
Ich habe gerade mal nachgeschlagen.
Writing-Mode CSS-Property
ist das tatsächlich.
Und da gibt es so Werte
wie Horizontal minus TB,
Vertical minus LR,
Vertical minus RL.
This property specifies
the block flow direction.
Also es gibt ja Schriften,
es gibt ja,
also das Chinesische ursprünglich
wird von oben nach unten geschrieben,
auch wenn man heutzutage
eigentlich von links nach rechts schreibt.
Es gibt aber bestimmt auch andere Sprachen,
wo das der Fall ist.
Also allein vom Namen her
würde ich jetzt sagen,
nicht sicher,
worum es sich handelt.
Tatsächlich habe ich es aber letztens
schon für was verwendet,
wo ich von was von oben
nach unten schreiben wollte.
Ah.
Okay.
Weiß ich jetzt nicht,
was ich ...
Das Beispiel bei MDN
sind auch diverse Sprachen,
die ich nicht lese.
Also da mir der Name
nichts gesagt hat,
gebe ich jetzt mal an,
nicht sicher,
worum es sich handelt.
Ja, also das ist auch
eine coole Demo,
ja, da sieht man,
also auf MDN Writing Modes
sieht man wie das dann,
also wenn tatsächlich irgendwie
von rechts nach links
und da wird es irgendwie umgedreht,
die Schrift und so weiter.
Also ja.
CSS Exclusions.
Habe ich aber auch noch nie verwendet.
Schnell weiter.
Ja, schnell CSS Exclusions.
Keine Ahnung.
Habe ich noch,
weiß ich auch nicht,
noch nie gehört.
Wir schreiben,
vielleicht notieren wir das mal irgendwie,
was wir noch nie gehört haben
und dann machen wir mal eine Folge,
wo wir nur über die Sachen reden,
die wir noch nie gehört haben.
Schreibst du mit?
Ich schreibe das auf, ja.
Nee, wir können auch einfach
unsere Sekretärin schreibt mit.
Die Redaktion im Hintergrund.
Die Redaktion,
die Redaktion schreibt mit.
Okay, dann gehe ich mal gleich zum Nächsten.
Position Sticky.
Ja, habe ich schon verwendet.
Das habe ich auch schon verwendet.
Funktioniert leider nicht so cool,
wie man sich denken würde,
dass es das tut.
Manchmal funktioniert es dann irgendwie doch nicht.
Also das müssen bestimmte Voraussetzungen
erfüllt sein,
der Parent Container irgendwie
und Position Relative
und was weiß ich.
Kurz gesagt ist es,
du scrollst auf der Seite
und das Element bleibt wirklich oben kleben,
statt dass es aus dem sichtbaren Bereich scrollt,
scrollt es mit runter.
Also einzusetzen zum Beispiel bei Table Headers,
die beim Scrollen von langen, endlosen Tabellen
dann trotzdem oben sichtbar sein sollen.
Oder auch bei vertikalem Scrollen,
nee, horizontal.
Ach, beim Scrollen weiß ich nie,
wie das, ist das jetzt horizontales Scrollen?
Ja, also von links nach rechts
auf Mobilgeräten,
wenn da Tabellen gerne mal
auf dem Handy abgeschnitten werden,
dann kann man das auch nutzen,
dass dann links das stehen bleibt.
Aber wie gesagt,
es ist nicht ganz so einfach.
Hast du dazu was?
Ich habe es auch schon verwendet.
Ich habe da sonst nichts zu.
Logical Properties.
Ah, da steht jetzt sogar ein Beispiel da.
Das ist auch gut.
Ja, Margin, Block, Start, Padding, Inline, End.
Da hattest du schon mal dazu, ja.
Hast du schon mal was dazu gesagt?
Kenne ich, habe ich aber selber noch nicht genutzt.
Ist im Prinzip so die Weiterentwicklung,
wenn man so auch viel
Right-to-Left-Layouts und so was macht,
dann ist das besser als Left
oder Right oder Top oder Bottom oder so.
Weil das kann ja,
weil das kann ja,
wie wir gerade bei Writing-Modes gelernt haben,
kann ja gerne mal umgedreht werden
und dann braucht man Logical Properties,
weil dann Left und Right und so nicht mehr stand.
Aspect Ratio.
Ich glaube, hat das nicht auch mit diesem Object Fit und Object Position zu tun?
Kann man da nicht auch sagen, das soll aber.
Aber ich sage jetzt mal,
ich bin mir nicht sicher, worum es sich handelt.
Weil das war jetzt nur so halb geraten.
Ich glaube, da geht es tatsächlich um so,
ich möchte irgendwie was 16 zu 9 haben oder so.
Ja, genau, genau.
Aber halt im, also in welchem Anwendungsfall,
also generell einfach,
statt dass ich Höhe und Breite definieren muss oder,
egal, ich habe es notiert.
Ich sage jedenfalls, ich habe es, kenne ich nicht.
Das wird, also erstens mal wird das,
wenn wir das jetzt echt ganz durchziehen,
eine sehr lange Folge.
Ja, richtig.
Und wir machen uns hier total nackig
mit Sachen, die wir nicht kennen.
Ja gut, aber das war ja klar,
als wir das Thema angegangen sind.
Oh Gott, und das war auch noch meine Idee.
Ja, natürlich.
Content Visibility sagt mir auch nichts.
Ja doch, das, da habe ich schon mal,
habe ich schon mal gehört.
Doch, ich glaube, das hat was,
das ist so ein Performance-Ding, oder?
Bin ich da jetzt komplett falsch?
Ist ja, ist ja auch egal.
Ah, warte mal.
Nee, nee, nee, Moment,
jetzt muss ich jetzt kurz nachgucken,
ob ich da richtig liege
oder ob ich komplett falsch liege.
Und der erste Blogartikel,
den ich dazu gefunden habe,
Content Visibility,
the new CSS property
that boosts your rendering performance.
Herzlich Willkommen zum
WWSIV Five-Hour-Special.
Ja, genau, nein,
ich wollte nur noch mal wissen,
ob ich damit grob richtig liege.
Also da geht es um Seiten
mit sehr vielen Inhalten, glaube ich.
Aber, ja, egal.
CSS Shapes.
Ich fahre dir jetzt einfach über den Mund.
Was, CSS Shapes?
Moment, warte mal.
Du bist schon in der nächsten Kategorie.
Ja.
Formen und Grafik.
Genau.
Hast du gerade Fick gesagt?
Oh, das gibt wieder Ärger.
Grafik, habe ich gesagt.
CSS Shapes.
Der Graf,
kennst du nicht den Graf Ik?
Wow.
CSS Shapes,
kenne ich,
habe ich aber noch nicht genutzt.
Also damit kann man wirklich,
ja,
Formen zeichnen,
Kreise,
Dreiecke.
Ja,
kenne ich auch,
habe ich auch noch nicht genutzt.
Object Fit,
genau,
da hatten wir es schon mal davon,
haben wir jetzt gerade eben noch mal davon gehabt.
Damit kann ich einfach dafür sorgen,
dass ein Bild tatsächlich den ihm zur Verfügung stehenden Platz nur einnimmt oder ein Video.
Das heißt,
so wie Background Size Fit oder Cover oder so kann ich aber für Elemente setzen.
Gut,
habe ich schon benutzt.
Clip Path habe ich auch schon benutzt.
Damit kann ich,
da bin ich mir gerade nicht sicher,
ob ich das auf der WoWir sind,
das vorne Seite vielleicht sogar eingesetzt habe.
Also damit kann ich einen Pfad definieren.
Ah nein.
wo dann Sachen abgeschnitten werden.
Wir müssen mal,
wir müssen mal,
ähm,
dieses Neulabel,
äh,
was da,
was da gesetzt wird an die aktuelle Folge.
Ja.
Da kann es sein,
dass du das,
dass du das irgendwie an eine Zeit geknüpft hast,
weil das ist jetzt gerade nicht da,
weil da habe ich das für mich eingesetzt.
Ah,
doch,
das sollte bei der,
immer bei der aktuellsten,
warum ist das denn nicht da?
Es ist aber gerade nicht da.
Das ist mir schon mal aufgefallen.
Es ist immer nach,
nach einer Weile geht das weg.
Habe ich das vielleicht sogar absichtlich reingebaut,
dass das nach einer Weile weggeht?
Das wäre blöd.
Das soll immer bei der aktuellen Folge sein,
egal wie alt die ist,
finde ich.
Äh,
gucke ich mir an.
Ähm,
äh,
genau,
Clip Path.
Also man kann damit ...
Es könnte sein,
dass ich,
ich glaube,
damit habe ich Clip Path eingesetzt,
aber da bin ich mir gerade,
oder war es,
mein Gott,
oh Gott.
Also ich hatte das letztens bei einem,
bei einem WordPress-Theme,
das,
äh,
so,
so angeschrägte Section,
ähm,
unterstützt.
Also wo dann die,
die Section nicht einfach eine gerade Linie ist,
sondern die ist so leicht diagonal.
Ähm,
da wurde das mit Clip Path umgesetzt.
Äh,
und auch für was anderes habe ich schon mal verwendet,
aber das darf ich, glaube ich,
nicht sagen,
was das war.
Äh,
CSS Masks.
Das ist, glaube ich,
das Gleiche,
nur mit,
mit Maskenbildern,
richtig?
Ich glaube,
das habe ich auch schon von gehört,
habe ich aber auch noch nicht benutzt.
Genauer.
Ähm,
Blend Modes habe ich auch schon mitgearbeitet,
arbeiten wir, glaube ich,
sogar auf unserer Seite,
auf wo wir sind,
ist vorne.show damit,
mit dem Hintergrundbild,
oder?
Das ist,
ist das Blend Mode,
oder ist das?
Ja, doch,
ich glaube.
Also es ist im Endeffekt,
wie man es aus Photoshop vielleicht kennt,
ähm,
oder anderen Grafikbearbeitungsprogrammen,
also wirklich Ebenen-Misch-Modi,
die ich da machen kann,
Multiply,
Substract und so weiter.
Warte mal,
wir haben Filter,
Filter,
äh,
habe ich da eingesetzt.
Jetzt muss ich gerade mal gucken,
das ist dieses Background Image.
Ja,
das kommt als nächstes,
CSS Filter Effects.
Ich glaube,
keine Blend Modes,
aber Blend Modes habe ich auf jeden Fall
auf meiner persönlichen Homepage
eingesetzt,
für mein Bild,
was da drauf ist.
Also CSS Filter kann man nutzen,
um zum Beispiel,
ähm,
Sachen in Graustufen anzeigen zu lassen,
Bilder,
äh,
oder Kontrast erhöhen,
oder,
äh,
was gibt's noch?
Ja,
Kontrast,
Gamma-Korrektur,
irgendwie sowas.
Oh,
jetzt bräuchte ich die Rollstuhl-Taste.
Mein Bier ist auch leer.
Ähm,
Backdrop Filter.
Äh,
ist das nicht dasselbe für Background Images?
Ja.
Backdrop Filter,
Blurr?
Ich glaube schon.
Aber ich sag mal,
ich weiß es nicht,
weil ich bin mir jetzt nicht ganz sicher.
Abverschiebung,
ah ja,
ich glaube,
das ist,
oh Gott,
ich bin mir nicht sicher.
Also,
ich bin,
ich habe das,
ich habe das schon mal gehört,
aber benutzt habe ich es nicht
und ich weiß auch nicht genau,
was es tut.
Ich schreibe es mal mit auf.
Ja,
schreibe mal auf.
Wir können auch,
vielleicht wird es auch eine Doppelfolge,
weil ich glaube,
das wird echt zu lang.
Das ist echt krass,
ja.
Ja,
da sollten wir echt übernachten.
Scrollsnap.
Scrollsnap hast du,
glaube ich,
schon mal vorgestellt.
Ja,
das habe ich auch schon verwendet.
Es ist zwar noch nichts live,
was ich damit gemacht habe,
aber falls irgendwann in einer Million Jahren
mal der Content auf meiner Homepage live geht
und nicht nur irgendwelche Links,
die zu irgendwelchen Social Profilen zeigen,
dann ist das wahrscheinlich da mit drin.
Ja,
also das ist so,
da kann man,
da kann man quasi,
also das,
das billigste Beispiel ist,
dass man quasi so Folien machen kann,
so dass ich einzelne Seiten habe,
die dann,
die ich scrolle
und dann aber auch immer
die komplette Seite sichtbar ist
und immer an einer bestimmten Stelle
des Scrollen dann aufhört.
Also sozusagen,
muss man mal ausprobiert haben,
wie sich es anfühlt.
Also das kennt man ganz gerne
irgendwie von Slidern oder so,
dass die an bestimmten Stellen anhalten,
dass man den Content immer gut sieht
und es nicht irgendwie zwischendrin
hinscrollt.
Overscrollbehavior.
Ne,
sagt mir nichts.
Ja,
ich glaube mir auch nicht tatsächlich.
Aufschreiben.
Overflow Anchor
habe ich tatsächlich vorhin hinzugefügt
als unser Backlog
für die Property der Woche.
Weiß ich nicht,
ob ich da jetzt schon was davon
wegnehmen will.
sagen wir nichts dazu.
Also ich kenne es,
ich habe es tatsächlich noch nie produktiv benutzt,
aber ich habe es gerade vorhin erst
in der Hand gehabt,
sage ich jetzt mal.
Touch Action.
Das ist dieses,
ich glaube,
das ist dieses Callout-Menü
auf iPads und sowas.
Das kann man damit deaktivieren.
Habe ich tatsächlich auch schon benutzt.
Ich muss jetzt nur nachgucken,
ob ich nicht was Falsches sage,
ob das das ist.
Ob man das will,
ob das eine gute Idee ist.
Mir fällt tatsächlich was ein,
wo ich das mal gebraucht hätte,
aber ich weiß trotzdem nicht,
ob es eine gute Idee gewesen wäre.
Nee, das war nicht mit dem Callout.
Das war mit,
ob man
Pan to Zoom
oder Pinch to Zoom,
ob man das machen darf.
Das sollte auch,
meiner Meinung nach,
dafür sollte es nichts in CSS geben.
Habe ich in dem Fall auch gebraucht
bei diesem Kiosk-Ding,
weil da will ich nicht,
dass die User irgendwas rumscrollen.
Das ist tatsächlich eher für Apps,
also für Web-Apps,
das ist eine Progressive Web-App,
die ich dafür gemacht habe.
Da will man das nicht,
dass der User da irgendwas
manipulieren kann.
Ja, es gibt immer irgendein Argument,
aber da können wir uns jetzt,
da will ich jetzt
Point-Events.
Point-Events habe ich auch schon verwendet.
Wenn man in bestimmten Situationen
nicht will,
dass irgendwas anklickbar ist,
obwohl es sichtbar ist.
Und ja.
Ja, das habe ich auch schon verwendet.
So, dann gehen wir zum nächsten.
Typografie.
Und wer sich dafür nochmal
im Besonderen interessiert,
unsere Folge Nummer 13.
13? War das die 13?
Oder die 14?
Ich glaube, das war die 14.
Folge 14 widmet sich
komplett der Web-Typografie.
Web-Fonds,
Font-Face,
yo.
Ja, Font-Face,
das kennen wir.
Ist inzwischen ja
nicht mehr so neu.
Variable-Fonds.
Variable-Fonds hatten wir es drüber,
kenne ich,
habe ich aber selber noch nicht eingesetzt.
Ja, ich habe auf jeden Fall schon mit rumgespielt.
Folge 14.
Folge 14, da kann ich auf jeden Fall,
da sage ich nochmal,
in der Folge 14 kommt das auch,
der Inter-Font,
Inter heißt die Schriftart,
da kann man sehr viel mit rumspielen,
auch auf deren Seite.
Das macht echt Spaß.
Also da muss man gar nichts irgendwie installieren.
Da kann man einfach auf deren Seite
die ganzen Font-Features ausprobieren.
Das ist echt cool.
Dann haben wir hier
Line-Breaking-Properties.
Overflow-Rap,
Word-Break,
Line-Break und Hyphens.
Jo, da hatten wir es auch bei der Typografie.
Also ich glaube,
bei dem ganzen Thema kann man sagen,
davon hatten wir es in der Typografie-Folge.
Einfach die anhören,
wer sich dafür interessiert.
Overflow-Rap habe ich, glaube ich,
noch nie verwendet.
Word-Break,
Line-Break bin ich mir nicht sicher,
aber Hyphens und Word-Break.
Overflow-Rap bin ich mir auch nicht sicher,
aber die anderen drei auf jeden Fall.
Font-Variant,
davon hatten wir es
auch in der Folge.
Initial-Letter,
ja, das ist dieses Typische,
was man aus dem Print so kennt,
dass der erste Buchstabe anders formatiert ist.
Moment.
Habe ich, glaube ich.
Moment, warte mal.
Aber das ist doch First Letter.
Ach so.
Du meinst, oder?
Du meinst bestimmt First Letter.
Ja, das ist der Selektor,
aber Initial Letter ist doch ...
Set styling for dropped,
raised and sunken initial letters.
Ja, aber wo unterscheidet sich das denn?
Applies to First Letter.
Das gehört zu First Letter dazu.
Another approach is different.
Number or Integer.
Also, ich glaube,
das macht tatsächlich das Gleiche.
Nee, nee, nee.
Das ist, das ist,
da kommt, da kommt entweder
ein numerischer Wert rein,
oder
da kommen numeric values rein.
also, wie viele Zeilen der irgendwie verschoben wird.
Dann habe ich es tatsächlich mit First Letter verwechselt.
Ja, genau.
Gut, also ...
Es ist für First Letter gedacht,
es ist für First Letter gedacht,
aber es verschiebt den Buchstaben,
wenn ich das richtig sehe.
Initial Letters,
CSS Property set styling for dropped,
raised and sunken initial letters.
Also, da kommen tatsächlich numerische Werte rein.
Interessant.
Also, kannte ich auch noch nicht.
Dann haben wir hier Font Variant Numeric.
Das sagt mir jetzt gezielt nichts.
Das ist, glaube ich,
ein Feature von Variable Fonts.
Auch gleich mal notiert.
Font Display.
Glaube ich auch ein Feature von Variable Fonts.
Aber jetzt ...
Ha!
Und dann Line Clamp.
Das hatten wir hier schon als Property.
Da hatten wir es schon mal drüber, ja.
Das gab schon,
das war schon eine Property der Woche.
Dürft ihr selbst raussuchen,
in welcher Folge das war.
Da haben wir schon mal drüber gesprochen.
Wüsste ich jetzt spontan auch nicht.
Gertsch, dann nächste Kategorie.
Animationen und Transformationen.
Animiere und transformiere Elemente.
CSS Transitions.
Ja, natürlich.
Da muss man auch nix drüber sagen.
Das kennt ja jeder.
Nein, Spaß.
CSS Transforms.
Ja, das sind Übergänge, Animationen, Transforms.
Genau, also Übergänge,
dass ich ein Property von der Farbe Rot zur Farbe Blau
zum Beispiel transitionieren lasse.
Ich erfinde einfach wieder ein neues Wort dafür.
Hier können die Opas nochmal vom Krieg erzählen.
Das war nicht immer so ein.
Nein, das ging nicht.
Das hatte man früher mit Jahreskaps machen müssen.
Und gerade bei Farben war das irgendwie schwierig.
Da brauchte man extra Bibliotheken,
die dann die Farbwerte ineinander umrechnen können.
Das war früher großer Schmerz.
Geht jetzt mittlerweile sehr einfach.
Kinder, Kinder, Kinder, ich weiß ja gar nicht,
wie gut ihr es heute habt.
Ach ja.
Mensch, jetzt sitzen wir hier immer noch
und machen diesen komischen Schrott.
Ich glaube, wir machen mal eine komplette Folge
als Waldorf und Stadler.
Ja, aber ich glaube, wir verstehen uns zu gut.
Ja, vermutlich.
Danach, das ist ja die letzte Folge, glaube ich.
CSS Transforms.
Sachen durch die Gegend schieben oder rotieren.
Oder vergrößern.
Auch im 3D-Bereich.
Ja, das möchte ich unbedingt mal machen.
Animations, ja.
Sie heißt Animations, ähnlich wie Transitions,
nur dass die halt automatisiert ablaufen
und nicht irgendwie, wenn ich eine Klasse setze
und entferne, dann passiert das oder so.
Sondern die laufen einfach ab.
Ich kann sagen, fangen mit Rot an und Blau
und bei 20 Prozent und so weiter.
Du kannst diese Twins machen mit Prozentual
und so Geschichten, das ist irgendwie schon cool.
Perspective.
Das spielt mit rein bei den Transitions.
Bei 3D, ne?
Genau, wenn man da irgendwelche 3D-Rotationen macht,
dann kann man da die Perspektive festlegen.
Das habe ich auch schon mal irgendwo benutzt,
aber so ganz häufig brauche ich das eigentlich nicht.
Ich rotiere da selten im 3D-Raum, muss ich sagen.
Also meistens ist es dann doch eher auf
hier ein paar Grad mal was drehen oder so.
Ich habe da vor kurzem,
ich weiß nicht, ob ich den Link dazu nochmal finde,
jemanden gesehen, der auf YouTube Live-Coding gemacht hat.
Das ist ja irgendwie gerade so ein Ding,
dass die Leute irgendwie Live-Coding machen.
Und der hat da tatsächlich so relativ einfach erklärt,
wie man einen Würfel baut mit CSS
und wie man den dann auch animiert und so.
Und das fand ich ziemlich cool.
Tatsächlich habe ich das für eine Bastelei schon mal.
Ich habe so einen Ticker gebaut,
auch für so eine Screen-Anzeige,
also so ein Display-Werbemittel,
nein, nicht Werbemittel, aber egal,
also so ein Wartebildschirm.
Und da habe ich so einen Ticker,
so N24-Style-mäßig,
da rotiert so der Text eben auch wie in so einem,
ja, nicht Würfel, aber halt ein Quader.
Das ist schwierig zu beschreiben,
wenn man es jetzt nicht zeigen kann.
Und der geht nicht einfach nur nach oben
und verschwindet aus dem Sichtbarbereich,
sondern der wird wirklich gedreht.
Und dafür habe ich das auch schon eingesetzt,
die Perspective.
Gut, dann haben wir schon den nächsten Bereich,
Media-Queries.
Warte mal.
Ach so, ja, stimmt.
Ah, ich war schon eins weiter.
Da bist du noch weiter, okay.
Nee, nee, ich war eins weiter.
Also da gibt es,
da habe ich bei allen dreien,
kenne ich, aber noch nicht genutzt.
So, nee, ich habe da schon.
Ja.
Ich glaube, wir haben es sogar auf der Podcast-Seite
teilweise auch im Einsatz.
Also Prefers-Reduced-Motion.
Ich glaube, da gibt es mittlerweile so ein paar CSS-Tricks,
hatten sie es mal davon,
und das habe ich eigentlich überall eingebaut,
so ein Standardschnipsel, den man da reinpackt,
der einfach alle Animationen auf Zeit Null setzt,
somit important,
damit eben die Motion-Reduced wird.
Also man soll halt,
es soll sich dann eben nichts mehr bewegen.
Oder es soll sich nicht bewegen,
es soll halt mehr so abgehackt dann sein.
Das ist vielleicht, ich nehme mal an,
es geht viel so in Richtung Epilepsie.
Genau, genau, ja.
Könnte ich mir vorstellen.
Oder vielleicht auch ältere Devices,
die aber durch ein Update noch quasi mitbekommen,
hier sag allen Seiten,
dass du keine krassen Animationen unterstützen möchtest.
Aber zum Thema Epilepsie fällt mir gerade noch was ein.
Ich weiß nicht, ob ich das noch mal irgendwo verlinken darf
oder ob die Leute mich dann komplett bekloppt halten.
Aber erinnerst du dich an den Epileptomat?
Ja.
Den packe ich noch mal in die Shownotes.
Okay, alles klar.
Ich hab mal was, ich hab mal was,
ich hab mal quasi,
nee, das ist jetzt wirklich geht,
also wenn ihr Epilepsie gefährdet seid
oder das nicht wisst, ob ihr es habt,
dann geht da wirklich nicht drauf.
Das ist wirklich,
dann ist es vielleicht tatsächlich gefährlich für euch.
Also ich muss es jetzt wirklich sagen,
so lustig es für mich ist,
aber ich hab halt mal eine Seite gebaut,
die ein bisschen anstrengend anzugucken ist.
Das ist moritzgiesmann.de
slash Epileptomat.
Da solltest du vielleicht auch dann das
Prefers Reduced Motion einbauen,
damit das dann einfach nichts tut.
Ja, also es ist sehr wild.
Ich hab's irgendwann mal entschärft,
aber es ist immer noch ziemlich wild.
Und es kommt aber vorher auch so eine Warning
so im Style von Jackass.
Und da ist auch ein Button,
auf dem steht No Risk, No Fun.
Also den muss man erst klicken,
bevor was Schlimmes passiert.
Sehr vernünftig.
Und ich sag nichts weiter,
es passiert dann was Schlimmes.
Sehr vernünftig, wie wir dich kennen, Moritz.
Ja, ja, also ich hatte das ursprünglich ohne
und dann hat mich jemand darauf hingewiesen,
dass das eventuell wirklich gefährlich sein kann.
Und dann hab ich diesen Hinweis noch eingebaut.
Weil ich will ja auch,
Accessibility ist ja schon eins meiner Themen
und dann kann ich nicht dafür sorgen,
dass alle epileptische Anfälle kriegen.
Das ist einfach nicht cool.
Also Prefers Reduced Motion.
Gibt's einen coolen kleinen Schnipsel,
könnt ihr irgendwie mal googeln.
Der schadet keiner Seite,
der einfach, wenn dieses Media Query gesetzt ist,
einfach alle Animationen und Transitions ausschaltet.
Und das tut niemandem weh, würde ich sagen.
Also ich hab's auch schon verwendet.
Dann sind wir Prefers Color Scheme,
Dark und Light sind da die Werte meines Wissens nach.
Und da geht's tatsächlich um,
dass der Browser beziehungsweise das Betriebssystem
Dark Modes oder Light Modes setzen kann.
Hab ich bei meinem Accessibility Cheat Sheet schon eingebaut.
Also hab ich schon verwendet.
Color Gamut, da hatten wir es ganz kurz davon
in unserer Folge Nummer 5,
Badass CSS Colors.
Zugriff auf 50% mehr Farben auf eurer Webseite.
Ja, das ist hervorragend.
Mit so einem Clickbait-Beschreibungstext.
Genau, da ging's um den LCH-Farbraum
und generell um Farbräume.
Und damit kann man eben steuern,
dass nur die Browser,
die einen bestimmten Farbraum unterstützen,
dann auch entsprechende Farben angezeigt bekommen
und eben halt Fallbacks schaffen
für andere Browser, die das nicht können.
Dann andere Features.
CSS Variables, jo, verwendet.
Oh, ich muss noch weiter, ja.
Äh, Variables, ja, auf jeden Fall.
Also inzwischen immer häufiger,
also auch irgendwie so zu,
um so eine Art Theming zu schaffen,
tatsächlich irgendwie,
Farben haben wir bei uns bei der Seite auch,
so ein paar Default-Farben
aufs Root-Element als Variable
und die dann nutzen im Code.
Ähm, weiß gar nicht,
wie der Support inzwischen ist.
CSS Variablen.
Ziemlich gut, glaube ich.
Ziemlich gut mittlerweile auch, ne?
Also ich, also ich,
ich hab ja vorhin schon gesagt,
ich bin in einer guten Lage,
was CSS-Features angeht,
aber ich würde das bedenkenlos einsetzen
bei uns auf jeden Fall.
Dann Feature-Support-Queries.
Hab ich schon verwendet.
Hab ich auch schon verwendet.
Das heißt, man kann wirklich abfragen,
kann der Browser das
und nur dann mach ich was Bestimmtes.
Auf der WoWir sind,
ist vorne,
wollte ich das auch für was
mehr sophisticated einsetzen,
wo ich nämlich tatsächlich abfragen wollte,
ob ein bestimmter Selektor geht.
Nicht ein CSS-Feature,
sondern ein Selektor.
Und das war zu dem Zeitpunkt,
ich weiß nicht, wie das jetzt ist,
so schlecht oder gar nicht unterstützt.
Weil das ist natürlich auch interessant,
ob es bestimmte Selektoren in CSS gibt.
Weil wenn es den nicht gibt,
dann macht man irgendwie was anderes.
Fand ich damals schade,
dass das noch nicht geht,
aber vielleicht geht es mittlerweile.
Kann ich jetzt nicht genau sagen.
Hab ich auf jeden Fall schon eingesetzt.
CSS-Containment.
Ich glaube, da geht es darum,
um das, was zum Beispiel Vue macht,
dass das abkapselt für Components.
richtig, weißt du es?
Ah, ich glaube,
da geht es auch um Anzeigeperformance.
Also ja,
aber ich glaube,
da geht es um,
ist das nicht,
also ich schreibe es auf jeden Fall mal auf.
Ich glaube,
da hat da nicht jemand drüber berichtet,
da in Amsterdam.
Ich meine,
da wäre das irgendwo Thema gewesen.
Auf jeden Fall habe ich darüber
auf einer Konferenz mal gehört.
Egal.
Also ich habe es schon mal davon gehört,
ich weiß nicht genau,
was es tut.
Will Change habe ich auch schon benutzt.
Da ging es auch um Performance.
Da kann man dem Browser einfach so einen Tipp geben,
wird sich das Property noch irgendwann ändern
oder bleibt das eher gleich?
Und dann kann man so bestimmte
Performance-Optimierungsmechanismen
im Browser aktivieren,
wo dann Sachen normalerweise geflackert hätten,
die dann nicht flackern,
weil der Browser weiß,
aha,
das wird sich später ändern,
deswegen,
ja,
cache ich das irgendwie nicht
oder,
ja,
wie das genau technisch funktioniert,
kann ich jetzt nicht sagen,
aber,
ähm,
kann nützlich sein.
Ja.
Calc?
Calc, ja,
inzwischen auch eigentlich regelmäßig.
Ich glaube,
der Support ist mittlerweile auch gut
und damit lassen sich halt einfach auch tolle Dinge machen,
also,
irgendwelche Abstände berechnen
zwischen Elementen oder so,
wenn ich halt genau weiß.
25% minus 30 Pixel oder sowas geht da nicht.
Genau, genau.
Das ist immer ganz interessant.
Das ist sehr, sehr, sehr nett zu haben.
Houdini.
Folge 6.
Folge Nummer 6, ja.
Wer dazu was hören will,
ähm,
Houdini.
Aber nicht verwendet bisher.
Ähm.
Ich hab's in Demos verwendet,
das zählt für mich.
Ja, gut.
Ja, ja.
CSS Comparison Functions,
Min, Max und Clamp,
jo,
hab ich auch mal verwendet,
aber ich glaube,
das sollte man tatsächlich aktuell
nur hinter irgendwelchen
Transpilern,
äh,
also nicht Transpilern,
aber, äh,
CSS Post,
äh,
Prozessoren,
äh,
verwenden,
die dann irgendwelche Workarounds
dafür, äh,
schreiben,
sofern das geht.
Ähm,
ist aber tatsächlich auch ganz praktisch,
wenn man wirklich will,
dass,
dass ein Element sich einfach zwischen
zwei verschiedenen Größen bewegt.
Also,
ich will irgendwie meinen Content beschränken,
aber ich will auch,
dass es beim Mobile irgendwie nicht kleiner wird,
als,
als die Bildschirmbreite,
dann kann ich eben sagen, äh,
Min, Max,
Clamp,
fertig.
Einheiten und Selektoren,
die CSS Units,
da hatten wir das letzte Folge,
in unserem von Special Nummer 2,
kurz davon,
von Empower Units,
gibt natürlich deutlich mehr,
wie man jetzt hier sieht,
ähm,
wer dazu was hören will,
einfach letzte Folge nochmal reinhören,
dann, äh,
kann man hier anklicken,
das ist jetzt tatsächlich ein anderes Format
der Beantwortung,
da klickt man einfach Checkboxen an,
welche dieser CSS Einheiten hast du genutzt,
also,
PX,
äh,
PT,
also Punkt,
habe ich die jemals genutzt?
Ne,
habe ich nie genutzt?
Glaube ich nicht.
Prozent,
EM,
RAM,
VH,
VW,
das heißt, ähm,
wirklich Display,
ähm,
Einheiten,
Vmin,
Vmax,
habe ich auch mal irgendwo benutzt,
ich weiß nur gar nicht mehr,
wo.
Ich glaube,
ich habe es noch nicht verwendet.
CH,
für diese Demo,
hatten wir es auch letztes Mal drüber,
habe ich tatsächlich auch letztens bei was eingesetzt.
Hätte ich jetzt tatsächlich die Tage einen Fall dafür gehabt,
ähm,
habe ich einem Kollegen empfohlen,
dass es das gibt,
aber, ähm,
habe ich tatsächlich noch nicht eingesetzt.
X habe ich auch noch nicht eingesetzt.
X,
hatten wir es da auch letztes Mal davon,
ich bin mir gerade gar nicht sicher,
hatten wir X.
Ich weiß es nicht.
Aber Millimeter, Zentimeter habe ich tatsächlich benutzt letztens,
als es um PDF-Generierung im Browser ging.
Inch nicht,
weil ich in Inch nicht arbeite.
Zentimeter habe ich auf meinem Accessibility-Cheat-Sheet benutzt,
einfach nur.
Ah ja.
Welches ist das?
Es ist Pseudo-Elemente.
Pseudo-Elemente.
Before,
After,
Firstline,
Firstletter,
Selection,
Placeholder,
Marker habe ich noch nie benutzt.
Marker ist,
glaube ich,
für Listen.
Ah,
ja.
Das habe ich auf jeden Fall gesagt.
In den Firefox-Dev-Tools sieht man das.
Backdrop,
was macht ein Backdrop?
Backdrop sagt man als einziges wirklich gar nichts.
Backdrop,
ich glaube,
das könnte zusammenhängen mit dem mal geplanten Dialog-Element,
das automatisch auch einen Backdrop setzt.
Das muss ich gerade noch mal gucken.
Also Dialog-Element ist dir bekannt?
Ja,
ja,
aber auch noch nicht irgendwie im Einsatz gehabt.
Noch ganz kurz,
Firstline,
Firstletter,
da hatten wir es ein bisschen ausführlicher in unseren CSS-Feature-Folgen drüber,
Folge Nummer 10,
Folge Nummer 11,
wo wir eine kleine Wunschliste erstellt haben,
was wir an CSS-Features vermissen.
Und da ging es auch um Firstline und Firstletter.
Also Backdrop,
ich habe es kurz nachgeschlagen,
ist tatsächlich für das Dialog-Element,
jedes Element im Stack des Top-Layers,
was auch immer das ist,
wahrscheinlich das,
was angezeigt wird bei Dialog,
hat ein Backdrop-Pseudo-Element,
steht bei MDN.
Also das ist dann der Backdrop von dem Dialog.
Aber Dialog ist, glaube ich,
auch noch nicht so weit,
dass man das wirklich irgendwo einsetzen könnte.
Ich glaube,
das ist leider noch nicht so weit.
Gut,
dann geht es als nächstes um Verkettungen.
Das sind einfach,
da wusste ich zuerst gar nicht,
was meinen die,
Selektoren.
Kombinatoren.
Genau.
Also einfach ein Diff-Span,
ohne irgendwas dazwischen,
jo, klar.
Naja,
nein,
mit einem Leerzeichen dazwischen,
das ist entscheidend.
Ja,
schon klar.
Nur kein Kombinator dazwischen.
Also einfach ein Span,
das sich irgendwo,
wo auch immer,
an welcher Position
im verschachtelten Baum
innerhalb eines Diffs befindet.
Dann Diff,
Pfeil nach rechts,
Span,
also ein Span,
das direktes Kind-Element
eines Diff ist.
Direktes Kind-Element, genau.
Diff plus Diff,
also ein bestimmtes Diff,
das direkt auf ein Diff folgt.
Und Diff mit Tilde,
also dieses geschweifte Dingens.
Und ein Diff,
das heißt,
ein Sibling,
der irgendwann folgt,
aber nicht zwingend darauf.
Ja,
das ist mein Lieblingsselektor,
äh,
Kombinator,
den benutze ich am allerliebsten.
Und den kennen die wenigsten.
Ja.
Oder sagen wir mal so.
Ich nutze ihn relativ selten,
muss ich sagen.
Wenn irgendjemand den nicht,
also irgendeinen von denen nicht kennt,
dann ist das die Tilde.
Mhm.
Also das benutze ich aber echt gerne.
Also gerade so im Zusammenhang mit,
ähm,
ich möchte das,
etwas,
das nach einem Checkt,
äh,
vom, äh,
Input oder so,
irgendwie sich verändert,
nochmal,
ähm,
gerade dafür,
äh,
eignet sich das echt gut.
Also vielleicht muss man das auch erwähnen,
für Leute,
denen das vielleicht nicht klar ist,
das geht jetzt nicht nur mit,
mit, äh,
Tag-Namen,
also,
oder Element-Typen,
also Diff und Spans,
natürlich auch mit Klassen,
also ich kann auch sagen,
äh,
wenn ein Element mit der Klasse so und so,
ein Kind,
ein,
ein direktes Sibling-Element
von einem anderen Element ist.
Mit all diesen Klassen,
also generell mit allen Selektoren.
Gut,
dann, äh,
Baum,
Dokument-Struktur,
das ist nicht übersetzt.
Which of these structure-related CSS-Selectors
have you used?
Hui.
Also Root für CSS-Variablen,
Empty für Elemente,
die keinen Content enthalten,
das ist manchmal auch ganz praktisch,
wenn man da leere Spalten hat,
die dann irgendwie aber trotzdem
sich aufspannen sollen oder so.
Äh,
Not-Selektor,
heute benutzt.
Brauche ich auch sehr häufig inzwischen.
End-Child.
End-Child sehr selten.
Ähm,
ja,
manchmal ganz praktisch.
glaube ich,
habe ich noch nie verwendet.
End-Last-Child,
doch,
habe ich auch schon mal verwendet,
aber glaube ich auch eher
in so einer Spielerei.
Äh,
First-Child,
Last-Child,
ja,
doch auch recht häufig.
Only-Child,
manchmal.
Only-Child,
kenne ich noch nie verwendet.
Äh,
End-Of-Type,
habe ich schon verwendet,
End-Last-Of-Type,
also,
das letzte Diff in einem,
äh,
am besten kein Diff,
ne,
Element mit einer bestimmten Klasse
innerhalb von einem Element zum Beispiel.
Ähm,
First-Of-Type,
Last-Of-Type.
Also,
die meisten von diesen Type-Dingern,
ich glaube,
da habe ich,
glaube ich noch nicht.
Only-Of-Type.
Habe ich nie gebraucht.
Das ist das Gleiche.
Dann gibt's Lang,
tatsächlich,
äh,
Sprachselektor,
habe ich noch nicht gebraucht.
Nee,
ich auch nicht.
Dann gibt's Is-And-Where,
da hatten wir es auch schon mal drüber,
weil das jetzt recht neu in Chrome ist,
da gibt's auch,
äh,
weiß ich gar nicht,
ob ich dann Update dazu gesagt habe,
in den letzten Folgen,
ähm,
da hat sich jetzt was getan,
also das Ticket,
ähm,
ist jetzt im Endeffekt durch
und das wird demnächst in Chrome,
äh,
als fixes Feature kommen.
Cool.
Ähm,
Attribute.
Also,
Diff und den eckigen Klammern.
Wir gehen hier echt einmal quer durch CSS,
dass das ja nicht einmal aus da drin ist.
Äh,
Diff,
eckige Klammern,
also,
wir machen echt,
äh,
ich weiß nicht,
ob wir das echt bis zum Ende.
Ach, das schaffen wir noch,
komm.
Weißt du?
Wir haben jetzt schon eineinhalb Stunden,
meine Frisei.
Okay,
müssen wir uns jetzt echt beeilen.
So,
ähm,
wir waren bei Attribute-Selektoren.
Ich editiere es einfach auf doppelte Geschwindigkeit.
Äh,
Attribute,
also,
ein Diff mit dem,
mit dem Attribut Foo,
Diff mit dem Attribut Foo,
und einem speziellen Value,
äh,
ähm,
ein Diff,
das mit dem,
wo das Attribut Foo mit dem Wort Bar beginnt.
Ja,
also,
das habe ich alles schon mal endet mit,
startet mit,
beinhaltet,
auch schon benutzt,
Sternchen gleich heißt einfach,
äh,
was ist denn da der Unterschied?
Tilde gleich und Sternchen gleich?
Ach,
beinhaltet Wort und beinhaltet Zeichen,
ja.
Also,
ähm,
also,
das habe ich noch nicht verwendet.
Ich glaube, das ist,
meistens wird man das brauchen bei,
äh,
Class zum Beispiel,
aber dann kann ich es ja auch als Klasse benutzen.
Aber wenn ich jetzt ein Attribut habe,
das ähnlich wie,
wie das Class-Attribut funktioniert,
das heißt,
ich habe bestimmte Keywords,
die da drin stehen,
und das können ein oder mehrere sein.
Wenn ich jetzt, ähm,
Sternchen gleich Bar mache,
dann heißt das,
dass wenn das,
wenn das Wort Foo Bar drin vorkommt,
dann würde das auch matchen,
obwohl ja nicht Bar einzeln vorkommt.
Wenn ich jetzt aber,
jetzt mal ehrlich,
also,
wieso benutze ich da nicht einfach die Klasse?
Na gut,
also fürs Class würdest du es tatsächlich über die Klasse machen,
aber wenn ich jetzt ein Data-Attribut habe,
in dem mehrere Werte drin stehen können,
dann sage ich hier,
Data XY beinhaltet speziell das Wort.
Wow.
Ja,
habe ich,
habe ich wirklich,
ähm,
also,
ich glaube,
beginnt mit,
endet mit,
habe ich schon mal verwendet,
ähm,
die,
die unteren beiden mit der Tilde und dem Stern,
ähm,
boah,
nee,
ich glaube noch nicht.
Ich glaube noch nicht.
Dann haben wir hier,
äh,
Link und URL related.
Doppelpunkt,
any minus link.
Nö.
Nee.
Sagt mir nichts.
Kannst du mal aufschreiben.
Ähm,
dann haben wir Doppelpunkt,
Link Selector und Visitor Selector.
Ja.
Oh,
Local Link,
das ist noch nicht.
Local Link sagt mir auch nichts.
Kenn ich auch noch nicht.
Ist das,
ist das vielleicht einer,
der kein HTTP oder sowas dabei hat?
Ich weiß es tatsächlich nicht.
Ah,
relative Links,
mhm.
Ja.
Damit könnte man dann irgendwie,
ja,
keine Ahnung.
Keine Ahnung.
Könnte sein,
müssen wir sagen.
Target haben wir tatsächlich verwendet
auf unserer Seite für den Player.
Korrekt.
Da wird das Element selektiert,
das dem aktuellen Hash in der URL entspricht.
Korrekt.
Und,
äh,
das haben wir bei uns,
also da wird dann angehängt,
äh,
Raute Show minus Player an die URL
und dann wird,
wenn das vorhanden ist in der URL,
tatsächlich das Element,
ähm,
mit Display Block angezeigt,
das Player Element.
Ja.
Ist für so lustige Spielereien
und für,
ohne JavaScript was sichtbar und unsichtbar machen,
ist das ganz cool.
Ähm,
es gibt dafür,
also ich glaube,
der Anwendungsfall ist eigentlich der ursprüngliche,
der für den es gedacht war,
ist eigentlich noch ein anderer
und so setze ich das gerade ein bei mir auf der Arbeit
und zwar, ähm,
äh,
klassische Seite mit viel,
mit vielen Posts oder Kommentaren,
ähm,
und dann kann es sein,
dass man ja einen Link kriegt,
ähm,
zu einem bestimmten Kommentar auf der Seite,
also der vielleicht relativ weit unten ist.
Mhm.
Ähm,
und dann springt das da hin
und dann kann ich zum Beispiel animieren,
ähm,
und,
und das dann hervorheben,
diesen einen Kommentar.
Genau,
hervorheben ist zum Beispiel auch.
Oder den einen,
oder den Post auf der Seite hervorheben
und ich hab das dann also so,
dass das dann ein bisschen hinterlegt ist
mit einer Farbe
und dann noch so eine kleine Animation,
dass das quasi so ein bisschen aufblinkt,
wenn man da hinkommt.
Also dafür ist das sehr, sehr praktisch.
Gut, dann haben wir, äh,
äh,
Hover,
Active,
Focus,
ähm,
ja.
Focus Within,
Focus Visible,
da hatten wir es jetzt auch gerade erst davon.
Genau.
Brauchen wir, glaube ich,
nichts weiter dazu zu sagen.
Nee,
Formularfelder,
Enabled und Disabled als Selector.
Interessant.
Enabled hab ich,
ich wusste gar nicht,
dass es Enabled gibt,
ich kenn nur Disabled.
Ja, tatsächlich.
Wusste ich gar nicht,
dass es da ein Gegenstück zu gibt.
Äh,
Read Only und Read Write,
Okay,
das wusste ich jetzt zum Beispiel auch nicht,
dass man das, äh,
tatsächlich selektieren kann.
Interessant.
Placeholder Shown hatte ich gerade erst letztens.
Oh ja,
da hab ich schon eklige Sachen mitgemacht,
weil da auch der Internet Explorer merkwürdige Dinge tut.
Doppelpunkt Default.
Das sagt mir jetzt nix.
Au.
Ist das das,
wenn,
wenn das beim Laden der Seite quasi schon das Checked Attribut vielleicht enthält?
Ah,
es könnte auch sein.
Und im Vergleich dazu dann aber Checked jedes sein kann,
dass das später bekommt, oder?
Oder in einem Input-Feld,
da kannst du ja auch einen Default-Value drin haben,
der schon drinsteht.
Das muss ich mir direkt mal anschauen.
Und dann könnte es sein,
dass das weggeht in dem Augenblick,
wo du,
äh,
wo du den veränderst.
Weiß ich aber tatsächlich nicht.
Also wir werden über die Sachen,
die wir jetzt aufschreiben,
auf jeden Fall mal,
äh,
uns schlau machen
und dann auch sicherlich mal drüber sprechen.
Ja.
Gut,
Checked Indeterminate.
Nö.
Kann ich mir was darunter vorstellen,
aber ich weiß gar nicht,
ob es das mittlerweile gibt,
Indeterminate-Checkboxes.
Gibt's das mittlerweile?
Können das,
kann das die Browser?
Äh,
das,
äh,
glaub ich nicht.
Oder?
Also,
wenn's den Selector gibt,
scheint's auch jemanden zu geben,
der das unterstützt,
sonst würde es keinen Sinn machen,
aber,
ähm,
ja.
Ja,
Valid,
Invalid,
klar.
Mhm,
Formvalidierung,
äh,
User Invalid,
sagt mir jetzt auch nix.
Inrange,
Out of Range
ist bestimmt für,
Range,
Elemente.
Gott,
wir machen uns hier so nackig,
ey,
danach hört ihr den Podcast nie wieder,
weil ihr denkt,
wir haben eigentlich keine Ahnung,
die wissen,
die wissen gar nix,
wissen die.
Ich bin jetzt aber auch nicht der CSS-Spezialist,
also, ne,
ich bin,
ich bin doch eher tendenziell dann Richtung JavaScript vor.
Ja,
ich jetzt auch nicht mehr.
Wird required und optional ist auch klar.
Ja.
Dann kommen wir jetzt zu den Pre- und Post-Prozessoren.
Das ist vielleicht für,
für Leute,
die gar nicht mit irgendwelchen Build-Systemen und so arbeiten,
sondern wirklich, ähm,
nur,
nur in Anführungsstrichen,
HTML,
CSS,
vielleicht JavaScript im Browser,
äh,
also im Editor schreiben und, äh,
so ist das ein,
eine schwarze Box.
Ähm,
aber wir gehen jetzt trotzdem mal durch.
Äh,
Sass,
jo,
schon mal verwendet.
Ach so,
oder kann man jetzt sogar werten?
Aha.
Ja,
würde ich wiederverwenden,
kein Interesse.
Genau,
nicht sicher,
ob es geht,
möchte lernen,
kein Interesse,
würde ich wiederverwenden,
würde ich nicht wiederverwenden.
Da muss ich mich jetzt aber auch noch entscheiden.
Ich würde es wiederverwenden
und ich verwende es gerade.
Ja,
ich würde es wiederverwenden,
äh,
ich nutze tatsächlich eher less als Sass.
Kann dir gar nicht sagen,
warum.
Ich glaube,
das war einfach das Erste,
was ich gelernt habe.
Ähm,
PostCSS,
jo,
habe ich auch schon verwendet.
Das macht eben genau solche Sachen,
da gibt es verschiedene Filter,
auch Plugins,
ähm,
das macht so Sachen wie eben,
äh,
Vendor-Prefixes davor setzen.
Ja.
Oder,
ähm,
was wir da vorhin hatten,
wenn da eine Browser irgendwie ausreißt
und der braucht dann ein anderes,
äh,
Attribut,
weil das einfach anders heißt,
dann,
Moritz lässt es vor Schrecks ein Bier fallen,
ähm,
dann macht es das automatisch.
also wenn man jetzt irgendwie, ähm,
Webpack oder sowas nutzt,
äh,
dann kann man das einsetzen.
Stylus,
ähm,
davon gehört,
äh,
kein Interesse.
Ja,
nee,
keine Ahnung.
Ja,
muss nicht sein.
Jetzt kann man noch andere eintragen,
das machen wir jetzt mal nicht.
Also ich hab,
ich hab da jetzt auch,
glaube ich,
nichts.
Ähm,
doch,
da gibt's doch noch von dem,
von dem Peter Kröner,
das Turbine gab's da mal.
Ach Gott.
Könnte man jetzt da noch eintragen?
Zufriedenheit insgesamt.
Wie zufrieden bin ich mit den?
Ich würd sagen,
sehr neutral.
Was mit den unten genannten Optionen?
Ähm,
ich glaube,
Ich glaub,
das ist falsch übersetzt,
oder?
Unten genannten Optionen,
das ist, glaube ich,
gemeint.
Ich,
ich übersetze mal kurz auf Englisch.
Das macht natürlich keinen Sinn.
Ähm,
Ja,
äh,
Options Listed Above.
Ja.
Ah ja,
und vor allem,
äh,
es geht um den,
um den,
äh,
Current Overall State of Things.
As it relates to the Options Listed Above.
Also,
wie diese genannten Techniken,
SAS,
LAS,
Post CSS,
Stylus,
wie zufrieden man mit dem,
mit dem Ist-Zustand ist.
Das ist wirklich schlecht übersetzt.
Äh,
was soll ich jetzt,
äh,
neutral.
Ja komm,
egal,
weiter,
Frameworks.
Ja,
nächster Punkt.
Gut,
äh,
Bootstrap.
Jetzt mal,
Bootstrap habe ich verwendet,
würde ich wieder verwendet.
Würde ich auch wieder verwendet.
Das ist ein gutes Framework.
Da würde ich auch wieder verwendet.
Materialized CSS, äh,
schon mal gehört,
ja,
weiß nicht,
muss nicht,
äh,
Ant Design kenne ich nicht.
Ja, warte mal,
sind das,
sind das nicht diese,
hatten wir es da nicht mal von bei Twitter?
Ist das nicht so,
ist das nicht so ein Micro-Mini-Framework?
Da hast du doch mal vor,
vor einer Weile nachgefragt,
ob jemand so Mini-Dinger kennt
und dann hat sich auch jemand gemeldet.
Oder nee,
anders,
uns hat jemand gefragt,
ob wir so kleine,
äh,
Ja,
aber da war das,
glaube ich,
nicht dabei.
Ist ja auch egal.
Semantic UI,
sag mir nix.
Bulma,
sag mir nix.
Kenne ich,
die reagieren konsequent
nicht auf Fragen,
die Accessibility-Version zu machen.
An sich ist es aber
ein cooles Framework,
glaube ich.
Foundation,
habe ich gehört,
aber aktuell kein Interesse.
UI-Kids,
sag mir nix.
Tachions,
Taktakions,
keine Ahnung.
Primer,
keine Ahnung.
Also man merkt,
so CSS-Framework-mäßig,
da bin ich überhaupt nicht bewandert.
Also klar,
Bootstrap kenne ich,
aber ansonsten,
nope.
Tailwind,
habe ich schon verwendet.
Ja,
habe ich nicht.
Das ist so Utility-First,
das ist interessant.
Ich weiß nicht,
ob das jetzt der geilste Ansatz
aller Zeiten ist,
aber es ist auf jeden Fall interessant.
Du kommst auf jeden Fall
schnell vorwärts damit,
wenn du schnell mal
irgendwas Prototypen willst.
Ich finde es generell schwierig
bei diesen CSS-Frameworks,
weil du halt unheimlich schnell
dein komplettes Markup
zuklatschst
mit hunderten
an Klassen
pro Element.
Und
ich habe gerne
meine Sachen
einfach schlank.
Also wenn ich,
wenn ich mit einer HTML-Seite
ein KB durch die Gegend
schicken kann
oder 50,
ja,
dann schicke ich lieber
eins durch die Gegend.
Ja, aber...
Weißt du,
man macht so viel mit,
oh und dann minifiziere ich das
und dann entferne ich sogar
alle Umbrüche automatisch
und was weiß ich,
aber dann kleinst du das
dann halt so mit...
Ich glaube,
ich glaube,
am Ende gibt sich das
gar nicht so viel,
weil wo du die Komplexität hast
und ob du dann doppelte Sachen
in CSS hast
oder die Sachen in CSS
nur einmal,
aber im HTML halt mehrere Klassen,
ich glaube,
am Ende gibt es sich
wahrscheinlich gar nicht so viel.
Da würde ich gerne mal
eine Studie dazu sehen.
Ich kann mir echt vorstellen,
dass es am Ende
total egal ist
und es nur
an unterschiedlichen Orten
die Komplexität
sich befindet.
Was zu diskutieren wäre.
Egal,
pure CSS
klingt für mich
nach Vanilla JavaScript.
Ich weiß aber nicht,
ob damit gemeint ist,
wir machen einfach nur
normales CSS.
Skeleton kenne ich nicht
und Spectre
kenne ich auch nicht.
Nee,
Spectre war doch so ein,
was ist nicht,
so eine Sicherheitslücke.
und ein Jens-Bund-Film.
Stimmt.
Zu viel denn insgesamt
auch neutral.
Ich will da gar nichts,
ich will gar nichts werten.
Ich glaube,
das ist eine super langweilige Folge.
Ich glaube auch.
Das ist eine schreckliche Folge.
Nee,
wir reden ja auch zwischendrin.
BEM,
da hatten wir es auch
in Folge Nummer 14 davon.
Also ich bin schon
beim nächsten CSS-Piloten.
Ja,
BEM,
das versuche ich,
da bin ich gerade
großer Advokat
und bringe das
gerade Leuten bei.
Magst du es kurz umreißen?
Ist eine Methode,
um CSS möglichst flach zu schreiben.
Es heißt Block Element Modifier
und genau das ist es.
Du definierst Blöcke,
innerhalb denen kann es Elemente geben
und die können auch jeweils Modifier haben.
Das heißt,
du hast irgendwie eine Variante davon,
die ist jetzt irgendwie mal blau oder so.
Genau,
da gibt es spezielle,
also eine Konvention,
wie man das schreibt.
Also ich sage jetzt mal
ein Card Block
und da drin gibt es dann
das Visual Element
und das Headline Element
und das wäre dann
was weiß ich was,
Card-Unterstrich-Unterstrich,
damit trenne ich dann
ein Element ab
und dann ist es halt
Card-Unterstrich-Unterstrich-Headline
und wenn das jetzt
eine speziell ausgezeichnete Headline ist,
zum Beispiel eben
für das neueste Element,
für New,
dann wäre das
Card-Unterstrich-Unterstrich-Headline-minus-minus-New.
Das ist dann der Modifier,
das New.
Genau.
Setze ich auch ein,
wenn ich gerade Lust drauf habe.
Manchmal auch nicht.
Da hatte der Gerrit auch was dazu gesagt.
Wie gesagt,
einfach mal Folge 14 anhören.
Es geht aber auch wieder in die Richtung mit,
ich klatsche mir halt dann ordentlich
da die Klassenattribute zu.
Aber gut,
brauchen wir nicht nochmal
darüber zu sprechen.
Nee,
ganz kurz noch,
es kommt echt drauf an,
also gerade wenn du große Projekte hast,
ist das echt sehr,
sehr, sehr hilfreich,
weil du gerade so Spezifitätsprobleme damit löst,
weil du also auch komplett flaches CSS schreiben kannst.
Du hast im Prinzip kaum noch verschachtelte Selektoren.
Die gibt es zwar an der einen oder anderen Stelle
schon immer noch,
aber im Prinzip brauchst du die dann gar nicht mehr,
weil du einfach,
weil einfach alles einfach eine Klasse hat.
Es ist vor allem auch,
wenn ein anderer Entwickler deinen Code übernimmt,
dann ist viel klarer,
was du,
also wie du es strukturiert hast
und was du meinst
und was du damit eigentlich bezweckst,
weil jeder schreibt irgendwie seine Klassen an,
das und dann,
was weiß ich,
was derjenige damit gemeint hat
und damit wird es einfach klar.
Es gibt ja auch das Schirmwort Klassitis,
das könnte man jetzt darauf natürlich anwenden,
aber es ist,
es hilft echt
und vor allem auch,
weil es unabhängig ist
von dem Element,
was du verwendest,
aber wenn du Elementselektoren verwendest,
dann musst du jedes Mal Refactoren,
wenn du jetzt denkst,
naja,
ich will jetzt aus dem Span
vielleicht doch mal ein Diff machen
oder eine Section oder so,
aber wenn du BAM verwendest,
überhaupt gar kein Problem,
verändere das einfach,
die Klasse ist immer noch da,
funktioniert alles,
subi.
Also BAM bin ich,
also ich habe lang gebraucht,
um damit warm zu werden
und mittlerweile bin ich ein Fan davon,
das ist echt gut.
Ja.
Also die anderen restlichen Sachen
hier auf der Seite,
habe ich einfach mal alle,
Also Atomic habe ich gehört,
aber kein Interesse,
den Rest habe ich alles nicht gehört.
Also eigentlich würde ich sagen,
sind da,
das ist,
da könnte man eine Timeline draus machen.
Und zwar,
am Anfang steht OOCSS,
meines Wissens nach,
das hat die Nicole Sullivan
irgendwann mal eingeführt,
2000, weiß ich nicht,
10 oder so,
oder 9 oder so,
die hat damals bei Yahoo gearbeitet,
die hat da so eine Idee gehabt,
wie man ein objektorientiertes CSS bauen kann.
Das war noch relativ
simpler Ansatz.
Und danach kam das
Smacks von Jonathan Snook,
der hat da ein Buch drüber geschrieben auch
und ich habe auch mal
einen Workshop dazu bei dem gehabt,
der hat das auf vielen,
vielen Konferenzen präsentiert.
Das ging von dem OOCSS
noch einen Schritt weiter.
Noch ein bisschen mehr Methode,
der hatte dann irgendwie auch schon
Modifier und sowas
für Theming und so weiter,
also auch irgendwie so eine Methode,
wie man das,
wie man das aufteilt.
und das wurde immer spezieller
und BAM ist quasi so,
wenn du jetzt Smacks
auf die Spitze treibst,
zumindest habe ich das so verstanden immer.
Krass, also da bist du
deutlich tiefer drin als ich.
Das sind ganz ähnliche Ansätze
und das sind verschiedene,
meiner Meinung nach,
verschiedene Evolutionsstufen
von der gleichen Idee,
die dann immer weitergehen.
Und IT,
IT, CSS,
ist nochmal,
das habe ich auch,
das ist davon eigentlich losgelöst,
das ist quasi eine Reihenfolge,
in der du dein CSS gruppierst.
Also da geht es darum,
am Ende,
dass man mit den allgemeinsten,
mit den niedrigsten Spezifitäten beginnt,
mit den allgemeinsten Sachen
und sich immer weiter arbeitet
zu höherer Spezifität.
Das heißt,
ganz am Ende stehen irgendwie
so Helferklassen mit Important,
die ja manchmal auch sinnvoll sind.
und ganz am Anfang
hast du so Reset zum Beispiel stehen
oder, keine Ahnung,
allgemeines Styling für,
es gibt es ja nicht unbedingt
zu verteufeln,
wenn du jetzt irgendwie sagst,
ja, ich habe halt allgemein
so eine H1,
die sieht halt bei mir erst mal so aus
und ein P sieht bei mir erst mal so aus.
Das hast du halt am Anfang
und dann irgendwann hast du halt
dein Styling für deine Module
mit irgendwelchen Klassen,
dass die Spezifität dir dann schon mal höher
als der Element,
die Elementspezifität
und dann bis halt eben
zu irgendwelchen Helferklassen
mit Important.
Empfehle ich auf jeden Fall,
da mal reinzugucken,
weil das Ziel dahinter ist,
glaube ich,
dann auch schon,
dass man eine gute Performance kriegt
und auch mit der Spezifität
keine Probleme mehr hat.
Also der Spezifitäts-Graph,
da gibt es ja auch so eine schöne Seite
um und die Specificity-Graph,
der soll stetig aufsteigend sein.
Das ist das Ziel hinter It's.
Ist eine coole Sache,
auf jeden Fall.
Kann man auf sein Projekt drauf tun,
egal was für eine Methode
man sonst verwendet hat.
Ist eine gute Sache.
Cube CSS kenne ich tatsächlich nicht.
Meine Zufriedenheit damit ist so,
ich bin eigentlich bei allen neutral,
ich bin der Seiten euphorisch.
Okay, so, viel geredet.
Aber das ist so was,
womit ich mich halt schon viel beschäftigt habe.
Ja, krass, ja, ich merke schon.
Also das war,
mir hat das wie gesagt alles nichts gesagt.
Jetzt kommt was,
da kann ich fast gar nichts dazu sagen,
aber du vielleicht.
Nee, auch nicht.
Also ich weiß so grob,
also CSS in JS,
das ist so der,
glaube ich,
der neue heiße Scheiß,
wenn man gerade viel mit React
zum Beispiel arbeitet.
Ja,
ich weiß gar nicht,
ob wir das fast,
ob wir das fast jetzt aufmachen sollen.
Und da irgendwie,
es ist im Endeffekt,
du schreibst tatsächlich,
also dein CSS wird geschrieben
durch
Bildtools,
indem du mit JavaScript,
also es ist,
oh, nee,
also ich glaube,
wir lassen das echt.
Okay,
dann machen wir das nicht auf,
das macht ihr dann einfach selbst,
dann überspringen wir das jetzt einfach mal.
Also wir können vielleicht mal eine Folge dazu machen,
auch wenn ich mich dann tiefer eingearbeitet habe,
weil ich jetzt auch noch nicht so tief da mit drin bin,
aber ich glaube an sich finde ich es auch nicht gut.
Wir bewerten das jetzt nicht,
wir überspringen das,
aber ich möchte einfach noch
drei Namen von Frameworks oder Methoden,
oder Methoden,
ich weiß gar nicht genau,
ich kenne die nicht,
vorlesen,
weil die einfach lustig sind,
und zwar
Styletron,
Linaria
und
AstroTurf.
AstroTurf, ja.
Und damit springen wir zum nächsten.
Genau,
andere Werkzeuge.
Andere Werkzeuge.
Stylinth.
Jawohl.
Eingesetzt
bei mir.
Perch, CSS,
Purify, CSS sagt mir aber nix.
Das ist eine sehr gute Sache.
Das sagt mir aber nix.
Also zu Stylinth noch ganz kurz,
sehr, sehr, sehr umfangreich zu konfigurieren.
Ich empfehle in jedem Falle
so ein Standard-Stylinth-Default-Konfiguration,
weil du möchtest nicht alle Regeln
selbst konfigurieren müssen.
Also vielleicht müssen wir auch ein bisschen,
also Linting generell,
was ist denn Linting?
Weil wir haben halt auch
vielleicht nicht so erfahrene
Zuhörerinnen und Zuhörer.
Also Linting ist,
es gibt ein definiertes Regelset,
auch zum Beispiel bei JavaScript,
das ist nicht bei CSS nur,
wie Sachen,
wie der Code formatiert sein soll.
Also wie viel,
fängt an mit Indentation,
wie viele Leerzeichen
oder Tabs nutze ich denn,
um den Code einzurücken.
Oder darf nach einer CSS-Regel,
da dürfen da zwei Leerzeilen sein
oder darf immer maximal eine sein
und so weiter.
Also die diverse Regeln,
wie soll der Code formatiert sein.
Und da gibt es eben Tools
in der Toolchain,
Linter, eben Style-Lint für CSS
oder JS-Lint oder was weiß ich.
oder auch PHP,
jede Programmiersprache hat also ihre Bibliothek,
die das einfach automatisiert übernimmt,
vielleicht sogar automatisiert fixt,
wenn sie das anbietet,
die Library.
Hilft eben auch,
einen einheitlichen
Code-Stil durchzuziehen,
wenn da viele Entwickler mitarbeiten.
Und es hilft einem zum Beispiel auch,
besser Stellen im Code zu finden.
Also wenn ich zum Beispiel weiß,
mein Linter,
der lässt mich gar nicht
ins Repository pushen,
wenn die Regeln fehlen
oder zumindest kriege ich
einen anderen Entwickler
auf die Finger gehauen,
dann weiß ich zum Beispiel,
wenn definiert ist in den Regeln,
nach einem If kommt immer ein Leerzeichen
vor der öffnenden Klammer,
dann brauche ich im Code
gar nicht suchen nach
If mit Direktklammer auf.
Oder ich suche nach einer bestimmten Variable
in der If-Abfrage.
Dann suche ich eben
nach der Zeichenkette
und ich weiß einfach,
wir haben die und die Regeln
und nach dem und dem
muss ich suchen
und dann übersehe ich auch nichts,
weil es vielleicht irgendwo
an einer anderen Stelle
anders geschrieben ist.
Da kann es mir fressen.
Super, danke für den Lehrauftrag
hier an der Stelle nochmal,
weil ich glaube,
wir sind über viele Sachen
jetzt sehr schnell drüber gegangen.
Ja, absolut.
Also ich glaube,
da fühlen sich vielleicht jetzt
Neulinge echt überfordern.
Oh mein Gott.
Mir geht es ja jetzt schon teilweise so,
wenn ich das alles sehe
und denke so,
ich bin voll hinten dran,
Aber ich habe ja jetzt auch schon gehört,
dass wir viel auch nicht kennen.
Ja, definitiv.
Also von daher.
Oh Gott,
die Postcast-Folge,
die darf kein zukünftiger Arbeitgeber hören.
Wir wissen ja gar nichts.
Die Iopaisa.
So,
ja,
ich habe mir gerade noch ein Bier geholt.
Das war jetzt mal noch.
Ja, plötzlich warst du weg.
Ja, ich war aber nur ganz kurz weg.
Also ich war ja schon mal länger weg.
Sehr schnell.
Aber diesmal war ich nur ganz kurz weg.
Ja.
Gut,
schnell weiter.
Texteditoren.
VSCode habe ich benutzt.
Sublime habe ich benutzt.
Atom habe ich noch nicht benutzt.
Vim habe ich benutzen müssen.
Das muss man manchmal,
wenn man auf Server geht.
Emacs ist, glaube ich,
auch so ein Server-Dings.
Oder Git-Merch.
Oh ja.
Da könnt ihr,
was mich jetzt wundert,
ist,
dass da Nano nicht dabei steht.
Weil das ist das,
was ich immer versuche zu benutzen
auf den Servern.
Weil das ist was,
das finde ich noch,
wenn man mal auf einem Server
per SSH irgendwie
ein Textfile editieren muss,
also in der Kommandozeile,
ohne GUI,
dann ist Nano für mich
immer noch das am zugänglichste.
Da werden jetzt die ganzen
Wim-Fanatiker aufschreien,
aber dazu sage ich nur
Doppelpunkt Q.
Doppelpunkt Q,
Ausrufezeichen.
Ah, scheiße,
Ausrufezeichen,
das kann ich mir merken.
Es ist
Wim oder VI,
ich sage es euch,
wenn ihr da drumherum kommen könnt,
da werden jetzt
die Wim-Fanatiker
oder die VI-Fanatiker,
die werden mich jetzt
auch dafür steinigen,
weil davon gibt es wirklich,
es gibt so richtig
Hardcore-Fans davon.
Aber das ist einfach ich.
Also,
nee,
nee.
Dann gibt es hier noch
die Frage,
WebStorm habe ich tatsächlich
noch nie verwendet,
aber was ich schon verwendet habe,
ist IntelliJ
und das ist von der gleichen Firma,
aber so die ultimative,
alles mögliche,
auch Java-Variante.
Also es geht auch darum,
welche man regelmäßig benutzt.
Also deswegen habe ich da mal
VS Code und Sublime angekriegt.
Dann muss ich,
nee,
Sublime,
dann ist es tatsächlich bei mir
nur VS Code,
was ich wirklich regelmäßig benutze.
Ich habe noch so ein IntelliJ
bei mir auf dem Rechner,
aber eigentlich benutze ich es nicht mehr.
Also ich habe Sublime tatsächlich,
wenn ich mal nur eben schnell
irgendeine Textdatei anschauen will
und noch kein VS Code offen habe,
dann öffne ich die schnell in Sublime,
weil VS Code inzwischen
echt immer länger dauert.
Je mehr Plugins und so,
was du hast,
es dauert immer länger,
bis es offen ist.
muss ich gerade sagen,
dass VS Code,
das wird das neue Visual Studio.
Die bohren das jetzt so auf,
also da kommen ja mit jeder Version
so viele krasse neue Features dazu.
Ich sag auch,
es ist toll,
aber das wird jetzt so ein,
das wird gerade so ein Schwergewicht.
Und das war ja das Coole an Sublime eigentlich immer,
dass es super leichtgewichtig war,
mega schnell gestartet hat,
auch irgendwie,
Vervollständigungen so immer super schnell alles.
Also bei Sublime Text war immer,
ja,
und so langsam wie es Code,
auch ohne Plugins,
es wird,
es wird sehr,
sehr schwer gerade.
Da kann ich auch gleich IntelliJ benutzen,
also,
ja.
Gut,
dann ist noch eine Frage nach dem Browser,
welche Browser oder welchen Browser
nutzt du primär zu Beginn eines neuen Projekts?
Jetzt kriege ich wieder Ärger.
Edge tatsächlich?
Edge,
Edge tatsächlich,
ja.
Lieber als Chrome.
Vor allem auch wegen dem Feature,
das ich irgendwann mal vielleicht als Geilteil vorstelle.
Aber das ist jetzt noch nicht.
Ja,
noch nicht vorgreifen.
Für Umgebungen.
Für welche Umgebungen?
Moment,
warte mal.
Hast du jetzt echt alle Browser schon durchgelesen?
Das sind so viele.
Ja,
aber die brauchen wir doch jetzt alle.
Für die Zuhörer ist es ja jetzt.
Jetzt warte doch mal.
Vielleicht ist das ja total interessant,
was für Browser ich benutze.
Ich benutze nämlich den Android Firefox regelmäßig.
Aber es geht ja um zu Beginn eines neuen
neuen Projekts.
Da hast du gleich 50 Geräte offen.
Da dürfte ich ja nur einen auswählen dürfen.
Das wäre dann wahrscheinlich...
Ja,
ich habe meistens Firefox und Chrome parallel.
Und Polypane.
Polypane.
Opera,
wie war die Samsung?
Den kenne ich nicht,
nie gehört,
aber das ist der letzte Liste.
Also da sind jedenfalls einige aufgelistet,
aber wir müssen die jetzt nicht alle vorlesen.
Opera Mini,
da muss der echt hart drauf sein,
wenn das dein erster Browser ist,
wenn du ein Projekt aufmachst.
Das ist ja so der,
der bei Can I Use immer gar nichts unterstützt.
Warte mal.
Und,
und,
ähm,
Dings da,
wie heißt der?
Wieder vergessen,
der,
der Textbrowser.
Der Kommandozeilenbrowser.
Egal.
Der,
der nach Teletext aussieht,
ja.
Der,
der nach Teletext aussieht.
Gut,
Umgebungen.
Für welche Umgebungen schreibst du CSS?
Ja gut,
ich glaube,
also Edge und Chrome ist inzwischen...
Ja,
müssen wir glaube ich jetzt nicht,
müssen wir glaube ich nicht alle die ganze Liste durchgehen.
Also gut,
interessant,
Internet Explorer 11 hast du gesagt,
ist bei euch schon gar nicht mehr relevant,
weil einfach in der Firma.
Ich muss tatsächlich auch sagen,
wenn ich nicht weiß,
also es kommt auf den Kunden an,
ich lasse inzwischen,
also inzwischen gucke ich nach dem IE 11 auch nicht mehr so wirklich.
Sage ich ganz ehrlich.
Wenn ich weiß,
das ist was Größeres,
wo viele Businesskunden vielleicht eben noch mit,
mein Arbeitsrechner kann nichts anderes,
ja,
dann schon,
dann gucke ich,
dass es läuft.
Aber gerade so,
also vor allem bei ES6-Geschichten.
Aber hier geht es jetzt um CSS hauptsächlich,
weil wir ja in der CSS-Umfrage sind,
aber ich hatte das jetzt gerade letztens,
ja,
nutze ich jetzt Arrow-Functions oder nicht?
Ich habe es dann einfach gemacht
und ja,
also irgendwann muss man auch mal aufhören.
Eieieieiei.
Eieieiei.
Man muss auch irgendwann einfach mal aufhören,
es zu supporten,
weil sonst,
einfach mal aufhören.
So wie wir,
wir müssen einfach mal irgendwann aufhören.
Ich wollte gerade sagen,
ich glaube,
wir müssen jetzt auch mal aufhören.
Okay.
Also,
vielleicht aus der Liste,
welchen Brause ich zum Testen,
ah nee,
das haben wir,
Moment,
warte mal,
hä?
Ich bin schon bei Umgebungen.
Du bist bei,
wie bei Umgebungen?
Nächster Punkt.
Was?
Hast du jetzt die Formfaktoren
und CSS für Print und E-Mail-Klein?
Habe ich da was?
Nee,
das ist doch das.
Ach Mensch,
ich bin,
ja,
genau.
Mit welchen Formfaktoren
testest du?
Desktop,
Smartphone?
Featurephone nicht.
Tablet,
ja.
Tablet,
ja.
Smartwatch,
unbedingt.
Also meine Webseite,
meine Firmenwebseite muss auf der Smartwatch
auch gut aussehen.
Ja,
hallo.
TV.
Also das mache ich manchmal,
wenn ich richtig hart drauf bin.
Ich habe so einen relativ,
mittlerweile relativ alten Samsung TV,
der also für heutige Verhältnisse,
ich glaube,
der ist vier Jahre alt,
der aber halt so einen Uraltbrowser drauf hat,
so einen komischen Samsung irgendwas Chromium
und das ist so eine Katastrophe.
Also wenn ich mir mal wirklich einen Tag vermiesen will,
dann mache ich eine Webseite auf diesem Browser auf.
Das ist echt,
das ist wirklich schlimm,
schlimm,
schlimm.
Wobei mich echt mal interessieren würde,
was für Zeigegeräte da detected werden würden
per JavaScript.
Also mit was ist das?
Tastatur ist es ja irgendwie nicht,
aber irgendwie vielleicht schon
und da gibt es auch so ein Zeigegerät
und man kann aber mit der Tastatur ...
Das ist ja quasi wie Touch dann oft,
dass man da irgendwie so einfach so einen Böbel rumschiebt.
Es ist echt,
ja,
es wäre vielleicht tatsächlich interessantes Archäologie-Material,
was ich hier habe.
Was haben wir noch?
Spielkonsole, Screenreader,
ja,
das ist tatsächlich mein Ding.
Sollte man.
Druckerzeugnis,
also Print-CSS,
teste ich nicht.
Das soll man nicht mehr machen.
Habe ich tatsächlich für diese PDF-Druckgeschichte,
die ja auf HTML-Template basierend gedruckt wird,
gebraucht,
aber regelmäßig mache ich das jetzt nicht.
Aber da habe ich vielleicht noch eine kleine,
lustige Code-Pen-Demo,
die,
muss ich mal gerade gucken,
ob ich die jetzt schnell finde.
Weil ich habe irgendwann mal ausprobiert,
ob man denn den Inhalt von einer Seite für Sprint-CSS
auch mit CSS austauschen kann,
um dann einfach zu sagen,
nee, nee, nee, nee, nee,
druck das hier einfach nicht aus.
Wenn jemand versucht zu drucken,
kriegt er einfach was anderes.
Und das hat tatsächlich auch funktioniert.
Ich muss gerade gucken,
ich hatte da mal eine Code-Pen-Demo gebaut.
Die ist aber jetzt in der Liste schon relativ weit nach hinten gerutscht.
So, ich bin jetzt aber gleich da.
Das Ding,
da stand nämlich dann irgendwie,
try to print this.
Und, äh,
Spoiler-Alert geht natürlich nicht, ne?
So, das ist aber eine,
ich glaube,
eins meiner ersten Code-Pens war das überhaupt.
Da muss ich echt weit zurück.
Soll ich das,
das wird jetzt gerade langweilig für die Zuhörer, gell?
Das ist sogar mein,
das ist sogar mein erstes Code-Pen.
Das ist sogar mein allererstes.
Ich habe es gerade gefunden.
Und es hat ein Herz und tatsächlich 1097 Views.
Ich habe keine Ahnung,
wie das zustande gekommen ist.
Ich muss mal gucken,
ob ich da noch sehen kann,
wann das angelegt wurde.
Das wäre jetzt echt mal interessant zu wissen.
Moment mal.
Last saved almost eight years ago.
Wow.
Okay,
das packe ich mal in die Show-Notes mal rein.
Das, äh,
wer mal,
wer mal drucken will
und nicht drucken will,
würde ich sagen.
Das ist auch witzig.
Äh,
nächstes ist CSS für Print.
Schreibst du Styles für Print?
Und es gibt tatsächlich die Auswahlmöglichkeit,
ich schreibe hauptsächlich Print-Style-Sheets.
Das würde mich in der Auswertung extrem interessieren.
Oh ja,
das kann eigentlich fast nur Spaßantwort sein.
Doch, doch,
nein,
das kann ich mir vorstellen.
Es gibt ja auch Leute,
die hauptsächlich E-Mail-Newsletter bauen.
Ja, ja.
Und das finde ich auch schon sehr speziell.
Mich würde es nicht wundern,
wenn es irgendeinen speziellen Anwendungsfall gibt,
an den wir jetzt gerade nicht denken,
wo, ähm,
wie ist das denn,
wenn du jetzt zum Beispiel ein EPUB hast,
das aber published wird?
EPUB ist ja CSS hintendran.
Und jemand,
der für sowas CSS schreibt,
das wäre ja vielleicht Print-Style im weitesten Sinne.
Es ist zwar nicht in dem Print-Media-Query,
aber es wäre Print-Style.
Also man kann ja mit CSS,
kannst ja theoretisch auch Druckerzeugnisse designen.
Geht ja.
Also würde ich nicht ausschließen wollen.
Ja, klar.
Nee, weiß man nicht.
Man steckt nicht drin.
Als nächstes kommt nämlich auch für E-Mail-Clients.
Ja, CSS für E-Mail-Clients.
Ich habe tatsächlich eine Zeit lang,
weil du es gerade angesprochen hast,
sehr viel damit zu tun gehabt
und da auch sehr viel drüber gelernt.
Inzwischen,
weil ich da nicht mehr mit betraut bin,
mit dem Team,
mit der Sache,
nicht mehr so oft.
Aber ab und zu mal noch.
Schön Tabellen-Layouts.
Coding like it's 1999.
Ich musste gerade nicht rülpsen,
tut mir leid.
Gut.
Nächster Punkt.
Wir sind jetzt fast fertig.
Jetzt sind wir fast durch.
Ressourcen.
Oh Gott, wir haben es bald geschafft.
Welche Ressourcen?
Wird das unsere längste Folge?
Vielleicht, wer weiß.
Ressourcen, also wo lernt man konsultieren?
Das ist ja schön übersetzt.
Welche Ressourcen konsultierst du zu CSS?
Das ist sehr schön.
Ich finde konsultieren ist ein sehr schönes Wort.
Konsultatieren, würde ich jetzt sagen.
Ich habe einfach mal wieder was erfunden.
Also CSS Tricks, A List Apart, Smashing Magazine.
Code Drops.
Eine, also wirklich,
Shoutout Code Drops.
Schaut euch Code Drops an.
Da gibt es so geile Demos,
das ist immer wieder der Hammer.
Also eigentlich will ich das gar nicht so laut sagen,
weil ich eigentlich der Einzige sein will,
der die kennt.
Das ist eh schon mega bekannt.
Code Drops, supergeile Seite.
Sidepoint.
Hatte ich sogar mal ein Buch von denen,
aber das ist nicht mehr so bekannt.
David Walsh, Blog, DevTO, Sidebar,
Hey Designer, CSS Weekly, Frontend Horse.
Frontend Horse?
Was?
Kennst du das?
Nee.
Frontend Fertz.
Ich kenne keinen Seiten und Kurse,
MDN natürlich,
Stack Overflow hatten wir ja auch schon.
Gut, andere Blogs und Magazine,
natürlich wo wir sind,
ist vorne von der Show, ne?
Muss da rein als andere Antwort, oder?
Ja, das müsste ja auf jeden Fall kommen.
Wo, ja, wo wir sind.
Aber kommt das vielleicht später noch?
Also alle sind aufgefordert,
hier in dieses Feld reinzuschreiben,
wo wir sind, ist vorne.show.
Ja, bitte das machen.
Also ich könnte mir vorstellen,
dass wenn jeder Hörer das macht,
also ich sage jetzt mal nicht,
wie viele Hörer wir haben,
aber wenn es jeder macht,
das würde statistisch signifikant werden,
sodass wir, behaupte ich mal,
dass wir da irgendwie so vielleicht
einen kleinen Balken auftauchen würden.
Was ist das denn?
Ja, das, ich,
also wenn es wirklich jeder macht,
also hier wird es wirklich,
ihr, also ihr kriegt Ruhm und Ehre,
also wenn wir da auftauchen,
dann, Ruhm und Ehre,
da machen wir eine Sonderfolge,
wo wir eine Flasche rumtrinken
und Feuerwerk abschießen,
den Sound,
den kriegt ihr dann live eingespielt.
Nee, Spaß.
Also schnell weiter, schnell weiter.
Seiten und Kurse,
Stack Overflow,
da haben wir tatsächlich
Folge Nummer eins
widmet sich Stack Overflow.
MDN hatten wir es
schon sehr oft davon,
haben wir auch immer wieder verlinkt
in den Shownotes,
auch wenn es jetzt wohl leider
nicht weitergeht,
da hatten wir es in Folge,
was weiß ich,
davon.
Aber da habe ich jetzt gerade
was gehört drüber.
Geht es, soll doch weitergehen?
Die haben ja offiziell,
sollte das ja nie aufhören,
das soll jetzt
in den Sternen,
das wird jetzt migriert
zu GitHub,
habe ich gehört.
Also zumindest die Datenquelle,
wenn ich das,
okay, korrigiert mich,
wenn ich das falsch verstanden habe,
ich lese bei Twitter
immer nur so drüber,
dass die Datenquelle
am Ende GitHub ist
und nicht mehr irgendwie
die Datenbank,
aus der das vorher kam.
Wahrscheinlich,
weil Mozilla das loswerden will,
dass sie das nicht mehr
betreiben müssen.
Kommt das jetzt woanders hin?
Ja, beim MDN
total geile,
unverzichtbare Quelle.
Hoffen wir mal,
dass es das noch lange gibt.
W3-Schools,
oft gescholten,
ich weiß nicht,
wie da der aktuelle Stand ist.
Die haben auf jeden Fall
sehr gute SEO,
man landet oft da drauf,
wenn man nach was sucht.
Free Code Camp
kenne ich,
habe ich auch schon benutzt,
mache ich jetzt aber nicht
regelmäßig,
aber eigentlich auch ganz cool.
Code Academy,
Dito,
Level Up Tutorial,
sagt mir gar nichts.
Also,
ich habe so langsam
echtes Gefühl,
ich bin Legastheniker,
weil nachdem du das
jetzt vorgelesen hast,
habe ich zum ersten Mal gemerkt.
Ich hatte letztens auf Twitter
die Diskussion verfolgt,
wo jemand geschrieben hat,
ach Gott,
das heißt ja Code Academy,
das heißt ja gar nicht
Code Academy.
Ja,
das ist dasselbe
wie I'm Developer.
Ja,
genau,
I'm Developer.
Das ist,
also,
jetzt,
jetzt habe ich gerade geblickt,
dass das nicht Code Academy heißt,
sondern Code Academy.
Sehr schön,
wir sind ja hier,
um was zu lernen.
Ei,
ei, ei, ei,
meine Güte.
Man hätte auch denken können,
ich habe wieder einfach
irgendein Wort erfunden,
so wie Spezifizität
oder kommersionelle.
Die kommersionelle Spezifizität,
das Frontendbuch
von Konstantin Klein.
Okay,
wir überspringen das mal,
da gibt es noch diverse Alternativen.
Ich habe einfach,
bei überall,
wo stehen andere Seiten und Kurse
und andere Podcasts,
habe ich,
wo wir sind,
ist vorne im Punkt Show eingetragen.
Okay,
das mache ich jetzt auch.
Gut,
dann gibt es Syntax FM.
Ach,
Podcast kommt noch als extra.
Das sind natürlich alles Englischsprachige.
Ich kenne sie nicht alle.
Und ich höre davon keinen regelmäßig.
Also Syntax,
ja,
mal rein,
aber keinen davon regelmäßig.
Non-Breaking Space Show?
Keine Ahnung.
Das geht auch ein bisschen nach Drogen.
Gut.
Am Schluss geht es jetzt noch um Meinungen.
Ich glaube,
das füllt jeder für sich aus.
Ich glaube,
wir kommen dann wirklich zum Ende damit,
oder?
Es gibt noch Meinungen,
sowas wie,
nur ein paar Beispiele.
CSS ist leicht zu lernen.
Starke Ablehnung,
Ablehnung neutral,
Zustimmung,
starke Zustimmung.
Entwickelt sich zu langsam
und so weiter und so fort.
Also das müssen wir jetzt echt nicht durchgehen.
Dann gibt es zuallerletzt noch eine Section über dich.
Erfahrungen in Jahren,
Unternehmensgröße,
jährliches Einkommen,
wenn man das angeben will.
Ich arbeite kostenlos.
Jetzt auch als Auswahl.
Okay,
mich kann man mieten.
Mir ist gerade aufgefallen,
ich habe da jetzt gerade mal,
also ich muss mal rausfinden,
was für eine Schriftart
diese Optionen sind,
weil ich das scharfe S
abgefahren finde da drin.
Das ist mir nämlich gerade aufgefallen.
Ach ja,
Unternehmensgröße.
Ui,
schick.
Das ist noch so ein richtiges S-Set.
Es ist ein S-Set.
Da sieht man,
warum das auch so genannt wird.
Und dann ein Z.
Das lange S.
Das lange S und das Z.
Genau.
Ich würde jetzt nicht sagen,
dass es schön ist,
aber es ist abgefahren.
Das habe ich so noch nie gesehen.
Das sieht echt verrückt aus.
Ah,
ich sehe es gerade.
Okay.
IBM Plex Mono.
Okay,
krass.
Verrückt.
Gut,
aber ja,
damit sind wir eigentlich am Ende.
Das kann,
wie gesagt,
jeder für sich ausfüllen.
Und ich glaube,
wenn man das jetzt nicht so zerkaut,
sondern wirklich nur anklickt,
dann kann man da echt schnell durch sein.
Man kriegt einen Score am Ende.
Wir haben nicht alles ausgefüllt,
aber ich habe,
wie viel Prozent hast du?
Na,
ich habe es ja noch nicht alles durch.
Ist ja egal.
Einfach jetzt mal abschließen.
Ich habe auch nicht alles durch.
Ja,
aber dann komme ich da noch mal zurück,
wenn ich jetzt abfertig stelle?
Egal,
mach noch mal.
Nee,
nee,
ich will den Rest ja auch in ehrlich.
Also ich habe 89 Prozent
und ich habe 89,
so viel hatte ich doch,
als ich es ehrlich ausgefüllt habe,
letztes Mal nicht.
Ich muss irgendwas falsch ausgefüllt haben.
Also ich mache das noch fertig dann bei Gelegenheit
und ja,
ich hoffe,
das war jetzt echt nicht zu langweilig.
Wir haben einfach gedacht,
wir probieren das mal aus.
Kannst du ja mal deinen Score vertwittern.
genau im Nachgang sage ich dann,
wie viel ich habe.
Ja,
wie gesagt,
ich hoffe,
das war jetzt nicht zu langweilig.
Wir haben einfach gedacht,
wir probieren das mal aus.
Ich behaupte,
ich behaupte,
dass wir haben auf der Hälfte
bestimmt die Leute verloren.
Ja,
das sehen wir dann in den Zuschauerzahlen.
Vielleicht müssen wir noch,
vielleicht müssen wir am Anfang
noch irgendeinen Cliffhanger packen,
wo wir sagen,
da gehen wir ganz am Ende noch mal drauf ein,
dass die Leute zuhören.
Wir verlosen ein Pony.
Ganz am Ende gibt es noch einen Werbeblock.
Gut.
Ja.
Ja,
ich würde sagen.
Wir sind etwas über zwei Stunden jetzt schon.
Oh,
verrückt.
Dann machen wir jetzt noch ganz schnell,
was steht jetzt noch an?
Noch ein Geilteil.
Ein Steilteil.
Und dann machen wir das ganz schnell.
Moment,
wenn ich hier einen Knopf finde.
Soll ich den Knopf machen?
Das Geilteil.
Geilteil.
Sehr beliebt.
In Jingle reinlabern.
So.
Das Geilteil ist heute ein Link,
wie so oft.
Ich habe,
habe ich dir den reingepostet?
Also,
ja,
du hast den reingepostet.
Geh mal da drauf.
Es ist schwierig.
Es klingt schon,
es klingt schon sehr merkwürdig.
Es ist so geil.
Ich weiß nicht,
ob ich das nicht eigentlich
im Private-Mode aufrufen muss,
weil da steht
adultswim.com.
Ach so,
nee,
adultswim,
das ist so das Nachprogramm
von Comedy Central,
habe ich gelernt.
Die haben zum Beispiel auch,
die haben auch,
die haben auch mehrere solche,
solche Spiele und sowas drauf.
Die sind auch teilweise sehr komisch.
so künstlerisch angehaubt.
Es ist lustig.
Also,
ich versuche es mal zu beschreiben
für alle,
die den Link jetzt nicht gerade öffnen können
und als Tipp auch,
nicht auf schwachen Mobilgeräten anschauen,
sondern schon in einem,
in einem gescheiten,
gepowerten Desktop-Blauser.
Das ist ja crazy.
Das sind vier Münder,
einer ist im Vordergrund
und den kann man anpacken
mit der Maus
und nach unten ziehen,
dass er aufgeht.
Und dann öffnen sich alle Münder,
ich weiß nicht,
ob man das versteht,
wenn ich das jetzt beschreibe,
und öffnen sich und singen.
Schade,
dass wir es,
wir müssten das jetzt einspielen können,
ne?
Das ist ja verrückt.
Wow,
ich bin,
äh,
Jedenfalls singen die,
also ich erkläre es mal dazu,
die Münder singen
und zwar in schönen,
passenden Akkorden
und ich kann die,
je höher ich die aufziehe,
umso höher singen die
und je weniger,
desto weniger.
Also es ist echt verrückt.
Und wir wären natürlich kein Frontend-Podcast,
wenn ich mir nicht die technische Seite
dann auch angeschaut hätte.
Ah,
und das ist natürlich minifiziert,
ich hab's natürlich versucht dann zu deminifizieren,
aber die variablen Namen sind dann nicht mehr sprechend
und, ähm,
aber so ganz kurz,
Audio-Kontext kommt natürlich zum Einsatz,
ja,
wenn man,
wenn man irgendwie Audio-Dateien geloopt,
ohne dass man so eine Schnitt,
äh,
Marke,
Schnittnarbe,
wie auch immer man es nennen will,
hört,
das macht kann man mit Audio-Kontext.
Was für ein Format?
Nee,
bin ich leider nicht dahinter gekommen,
was die da reinladen.
Weil damit hab ich ja auch schon mal Probleme gehabt,
ähm,
dass ich,
dass ich ein schönes Loop machen wollte
und das hat irgendwie nicht geklappt.
Da kam ich leider nicht,
nicht dahinter,
weil das wird im Netzwerktab nicht angezeigt.
Und zwar,
Meinst du,
das ist Web-Audio-API?
Na gut,
Audio-Kontext ist,
gehört,
ist das nicht auch schon Teil der Web-Audio-API?
Das ist Web-Audio-API,
wird das eventuell direkt erzeugt?
Genau,
also Audio-Kontext ist drin,
nee,
erzeugt wird es,
wird es nicht,
also es kann sein,
dass der Pitch verändert wird
mit der Web-Audio-API.
ich glaub nicht,
dass die für jeden,
für jede Tonhöhe
da einen eigenen Sound haben,
aber das sind wohl schon Samples,
die da,
die da genommen wurden.
Ja,
die müsste man ja sehen können im Netzwerk.
Die müssten nicht.
Weil,
Achtung,
und jetzt kommt's
und wieder eine Cross-Referenz,
äh,
Reference,
äh,
Cross-Referenz auf eine unserer ersten Folgen,
glaub ich,
war das,
oder?
Ist das Frontend,
oder kann das weg?
Folge Nummer drei.
Und zwar ist das gemacht mit WebGL und Wasm.
Da muss doch auch,
da muss doch aber auch was reingeladen werden.
Ach, Wasm,
okay,
Wasm ist natürlich,
äh,
verschlüsselt,
also nicht verschlüsselt,
aber binär,
das ist natürlich binär.
Da siehst du halt nix
und das taucht dann wohl auch nicht im Netzwerk drauf auf.
Fick.
Und,
äh,
zu dem Thema WebGL und Wasm noch,
wen es interessiert,
ähm,
einfach mal die Folge Nummer drei anhören.
Ähm,
man sieht,
es ist wieder nur eine Spielerei,
also es ist wieder noch kein Anwendungsfall,
wo ich sag,
oh ja,
krass,
äh,
aber es scheint wohl performance-hungrig zu sein,
genug,
dass man Wasm hier einsetzen muss,
um es,
äh,
flüssig wiederzugeben.
Wow.
Es ist aber auch echt verrückt.
Es ist crazy, ne?
Es ist wirklich verrückt.
Und mit,
mit DevTools offen,
ähm,
äh,
hört sich's komisch an.
Ja,
es ruckelt und stottert und,
ja.
Ja,
aber es,
wow,
ich glaub,
das macht,
das macht den Akku von meinem Laptop hier,
ja.
Also wenn der Moritz gleich weg ist,
dann.
Ich schließ mal den Strom an,
damit es weitergeht.
Alles klar.
Genau,
also Link kommt in die Shownotes
und das fand ich einfach,
ähm,
ja,
also verrückt,
was mit Webtechnik zu machen ist,
wobei,
wie gesagt,
die Frage,
ist das denn noch Frontend oder kann das weg?
Äh,
beantworten die definitiv und endgültig,
äh,
für alle Zeiten in Folge 3.
Ich bin total verstört.
Mich verstört das total.
Ich glaub's auch.
Dann schick ich dir noch mal die anderen Spiele,
die ich gefunden hab auf Adult Swim.
Es ist faszinierend.
Wo du als Alien irgendwie Menschen sammelst und so.
Ja,
ich,
ich poste die auch mit rein.
Wir besprechen's jetzt nicht hier,
aber ich,
ähm,
ich poste die mit rein.
Ja,
faszinierend.
Genau.
Wow,
das ist also,
das ist glaube ich das,
das krasseste Geilteil,
was wir jemals hatten.
Wirklich das,
also das,
weißt du mal,
ich,
ich denke jedes Mal,
wenn ich,
wenn ich dann den Mund geöffnet hab,
was ist da jetzt los?
Und das sieht auch komisch aus.
Ja.
Und dann der Ton ist auch irgendwie verstörend.
Aber ich kann trotzdem nicht aufhören zu machen.
Nee, nee,
echt,
man muss es dann auch irgendwann,
also mein Bruder hat mir das geschickt
während der Arbeitszeit.
Oh Gott.
Und ich hab dann echt irgendwann gesagt,
ich muss das jetzt zumachen.
Ich kann,
ich kann nicht mehr aufhören.
ich kann nicht arbeiten.
Es ist verstörend und faszinierend zugleich,
ja.
Oh je.
Gut,
ja,
dann sind wir durch.
Und da wir keinen Endschingel haben.
Heidebimbam.
Kommen wir noch zum Werbeblock.
Genau.
Und jetzt kommen wir zu
Werbung.
Oh Gott.
Ja,
ihr merkt schon,
also ich hab mir auch schon
das zweite Bier geholt,
dass du immer merkt,
das auch.
Aber ich kann,
ich muss das mit diesen Mündern jetzt zumachen.
Machst du,
machst du ja.
Das verwirrt mich einfach zu sehr.
Okay.
So,
Disziplin.
Am Ende nochmal.
Gut.
Ihr sollt uns bewerten,
weitererzählen,
also bewerten auf Podcastportalen.
Ihr sollt weitererzählen.
Die Leute,
die Sticker bekommen haben,
die haben auch alle einen kleinen Sticker,
einen kleinen Zettel bekommen,
wo drauf steht,
empfehlt uns weiter.
Das dürft ihr auch machen ohne Sticker,
aber ihr dürft auch bei uns Sticker anfragen.
vielleicht sind wir nett
und schicken euch einfach welche.
Ja,
wir nerven euch nicht mehr
in Zukunft jetzt mit Feedback,
aber dafür mit
empfehlt uns weiter,
weil das ist glaube ich so,
dass wir wissen jetzt,
dass wir gut sind.
Jetzt müssen es nur noch mehr,
noch mehr Leute wissen.
Und für Leute,
die es interessiert
und die uns,
die uns helfen wollen,
uns zu verbreiten,
ihr könnt ja einen
TikTok-Fankanal machen.
Oh ja.
das hätten wir jetzt noch nicht.
Also,
ich würde mich sehr drüber freuen,
wenn ich demnächst
beim Scrollen durch TikTok
WWS-IV-Ultras-Kanal finden würde,
wo mit den merkwürdigsten Zitaten
von uns
und gefakten Nacktbildern
oder so,
das fände ich wirklich,
da würde ich mich drüber freuen.
Und offenen Mündern.
Offenen Mündern?
Oh Gott,
nein,
das kriege ich nie wieder weg
aus meinem Hirn.
Geilteil,
meine ich jetzt.
Achso,
ja,
meine ich ja.
Das kriege ich nie wieder
aus meinem Hirn weg.
Okay,
ja,
bevor es noch blöder wird
und noch langwieriger,
würde ich sagen,
wir verabschieden uns
und
wir hoffen,
es hört uns nächstes Mal
noch jemand zu.
Oh je,
wir haben es echt durchgezogen.
Okay,
das Gute daran ist,
Ups.
Das Gute daran ist,
ihr müsst keine zweite Folge
damit aushalten,
weil zwischendurch
haben wir ja drüber nachgedacht,
ob wir das splitten.
Oh Gott,
stell dir mal vor.
Ja,
dann wäre es aber vielleicht
leichter konsumierbar gewesen.
Also jetzt ganz am Ende,
nachdem ihr das gehört habt,
können wir sagen,
es wäre vielleicht eine gute Idee,
zwischendurch mal einen Tag
Pause zu machen mit der Folge.
Weil es jetzt natürlich zu spät ist.
Tja,
dumm gelaufen.
Ja,
Mensch,
das war jetzt blöd.
Ich habe jetzt einfach mal draufgedrückt.
Bevor das hier kein Ende nimmt.
Ciao.