WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: #BADA55 #C55 #C01025
Publishing Date: 2020-04-12T14:22:41+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/bada55-c55-c01025/

00:00:00.760 --> 00:00:07.020
 Folge 5. Heute geht es um CSS-Farbnotationen und die kommende Unterstützung für den LCH-Farbraum.

00:00:07.020 --> 00:00:23.300
 Herzlich Willkommen bei WoWirSindistVorne!

00:00:23.300 --> 00:00:26.020
 Frontend-Fakten-Frotzelein!

00:00:26.020 --> 00:00:30.100
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:30.100 --> 00:00:41.700
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.

00:00:52.040 --> 00:01:02.060
 Hallo und herzlich Willkommen zu Ausgabe Nummer 5 unserer Osterausgabe sozusagen.

00:01:02.060 --> 00:01:09.800
 Wir haben ein bisschen was an unserem Setup verändert. Ich habe mir ein LAN-Kabel quer durch die Wohnung gelegt, weil ich bisher nur WLAN hatte.

00:01:10.460 --> 00:01:18.620
 Und wir hoffen, dass das an der Übertragungsqualität ein bisschen was positiv bewirkt. Und außerdem sehen wir uns heute per Webcam.

00:01:18.620 --> 00:01:19.220
 Hi!

00:01:19.220 --> 00:01:21.600
 Genau, hello, hello, hello.

00:01:21.600 --> 00:01:23.920
 Und ich glaube, das wird auch ein bisschen dafür sorgen.

00:01:23.920 --> 00:01:26.480
 Ich muss kurz mein Bier öffnen.

00:01:26.480 --> 00:01:28.360
 Ah, schön.

00:01:28.360 --> 00:01:30.000
 Ah, das kam sogar an, glaube ich.

00:01:30.000 --> 00:01:30.500
 Ja, klar.

00:01:30.500 --> 00:01:32.660
 Ja, dann, lass uns mal.

00:01:32.660 --> 00:01:35.860
 Ich habe heute kein Anstoßgeräusch, glaube ich.

00:01:35.860 --> 00:01:37.280
 Das klingt scheiße.

00:01:37.280 --> 00:01:41.660
 Ja, was trinkst du? What's your poison? Wie der Brite sagt.

00:01:41.680 --> 00:01:43.660
 Ja, wie immer. Das gute alte Wölfle.

00:01:43.660 --> 00:01:45.740
 Ich habe ein...

00:01:45.740 --> 00:01:47.120
 Wir werden immer noch nicht gesponsert.

00:01:47.120 --> 00:01:51.620
 Thema relevantes Bier. Ich trinke Corona.

00:01:51.620 --> 00:01:53.660
 Ah, tatsächlich.

00:01:53.660 --> 00:02:00.240
 Ja, tatsächlich. Aber mit einer Scheibe Zitrone statt Limette, weil man muss ja erfinderisch werden in diesen Zeiten. Ich hatte keine Limette zu Hause.

00:02:01.580 --> 00:02:03.320
 Dann würde ich auch kein Bier trinken ohne Limette.

00:02:03.320 --> 00:02:04.780
 Das schmeckt mir eigentlich mit Zitrone sogar besser.

00:02:04.780 --> 00:02:13.160
 Ich muss jetzt nur aufpassen, ich habe dich so bildschirmtechnisch ein bisschen rechts von mir, dass ich hier jetzt nicht immer rechts am Mikrofon entlang spreche, sondern ins Mikro rein.

00:02:13.160 --> 00:02:21.360
 Ja, also ich hoffe, dass das mit den Webcams so ein bisschen die Interaktion verbessert und wir uns vielleicht auch nicht mehr so ins Wort fallen und übereinander reden.

00:02:21.360 --> 00:02:28.840
 Und es ist Ostern, wie gesagt. Da würde ich sagen, können wir doch auch mal über Eier reden.

00:02:29.900 --> 00:02:31.940
 Ja, warum eigentlich nicht über Eier reden?

00:02:31.940 --> 00:02:35.620
 Wir haben nämlich ein kleines Easter Egg auf unserer Website.

00:02:35.620 --> 00:02:37.620
 Nein, willst du das verraten?

00:02:37.620 --> 00:02:40.780
 Ja, doch. Ich glaube, nach fünf Folgen kann man da auch mal kurz einen Hinweis geben.

00:02:40.780 --> 00:02:49.360
 Also wer es sehen möchte, ich weiß, ich habe gehört, dass es einige Leute schon tatsächlich erschreckt hat, was mich sehr freut.

00:02:49.360 --> 00:02:59.320
 Wer das sehen möchte, kann sich über den Weblayer auf unserer Seite, wo wir sind, ist vorne.show, die Folge eins mal bis ganz, ganz, ganz zum Schluss anhören.

00:02:59.900 --> 00:03:02.460
 Und dabei gebannt auf seinen Bildschirm schauen.

00:03:02.460 --> 00:03:09.980
 Ja, gebannt. Das erinnert mich ein bisschen an derbauer.de oder derbauer.com. Erinnerst du dich daran noch?

00:03:09.980 --> 00:03:10.880
 Nee, das sagt mir nichts.

00:03:10.880 --> 00:03:26.500
 Ich weiß jetzt nicht mehr, ob es das noch gibt. Ich gucke mal kurz. Ich hoffe, war das de oder .com? Da, de, genau, das gibt es auch noch. Das waren in der großen Zeit der Flash-Seiten, das waren irgendwie die Könige.

00:03:26.820 --> 00:03:37.800
 Also die haben so wahnsinnig krasse Animationen gemacht und 3D und die Seite flog so durch die Gegend und das war immer schon so, man hat mir immer so gedacht, naja, wenn du mal eine richtig krasse Webseite sehen willst, dann gehst du auf derbauer.de.

00:03:38.800 --> 00:03:42.060
 Ich bin gespannt. Ich mach's jetzt extra mal nicht auf, sonst kackt dir vielleicht alles ab.

00:03:42.060 --> 00:03:42.820
 Ja, das macht auch Sound.

00:03:42.820 --> 00:04:00.400
 Nee, aber die Version, auf die ich gerade anspiele, die ist nicht mehr online. Also ich muss, da kurzer Einschub. Kleine Geschichte. Ich saß nachts am Rechner und hatte irgendwo nebenher noch derbauer offen, hab aber gerade was anderes gemacht und nicht auf dem Monitor geschaut.

00:04:00.800 --> 00:04:19.280
 Und diese, der Bauerseite, die hatte ein Easter Egg, das irgendwann so nach 5 Minuten Inaktivität das Interface in ein, äh, in ein Gesicht sich morft sozusagen, das so rauskommt aus dem Bildschirm sozusagen und dann irgendwie sowas sagt wie, hello, are you afraid of the dark?

00:04:19.280 --> 00:04:26.800
 Und überleg dir mal, eine Webseite macht das plötzlich nachts, wenn du vorm Rechner sitzt und irgendwie an nichts Böses denkst.

00:04:26.800 --> 00:04:30.940
 Ja, so schlimm ist unser Easter Egg nicht.

00:04:30.940 --> 00:04:32.440
 Nein, nein, ich find's so schlimm.

00:04:32.440 --> 00:04:35.360
 Und das ist nett, aber man kann auch ein bisschen Angst kriegen, glaub ich.

00:04:35.360 --> 00:04:41.420
 Das passt übrigens auch zum Folgentitel der Folge, bei dem's auftritt. Ist mir dann so aufgefallen.

00:04:41.420 --> 00:04:43.120
 Ah.

00:04:43.120 --> 00:04:45.760
 War gar keine Absicht, aber ist, äh, ist ganz passend.

00:04:45.760 --> 00:04:56.040
 Okay, äh, ja, bevor wir jetzt an die Retro gehen, wie jedes Mal, möchte ich vorher noch was anderes ansprechen und zwar das, was wir eigentlich sonst immer am Ende ansprechen.

00:04:56.700 --> 00:05:00.300
 Social Media, bitte teilen und liken.

00:05:00.300 --> 00:05:14.520
 Also falls ihr über irgendeine Social Media, äh, über irgendeinen Post auf uns aufmerksam geworden seid, auf Twitter oder Facebook oder LinkedIn oder Xing oder sonst wo, ähm, wenn ihr das noch offen habt oder auch wenn ihr es nicht offen habt, teilt doch bitte einmal kurz diesen Post.

00:05:14.940 --> 00:05:27.740
 Das tut euch nicht weh, aber es erhöht unsere Reichweite. Einfach mal schön in eure Timeline fluten und wenn ihr ganz lieb zu uns sein wollt, dann lasst ihr vielleicht sogar noch ein Herzchen oder Like oder Faff oder was auch immer da.

00:05:27.740 --> 00:05:29.540
 Genau, ich mag Herzchen.

00:05:30.540 --> 00:05:37.700
 An der Stelle ja auch danke an Klaas, der tatsächlich den ersten Kommentar auf unserer Seite veröffentlicht hat.

00:05:37.700 --> 00:05:38.540
 Yay!

00:05:38.540 --> 00:05:41.620
 Jetzt hätten wir eigentlich so einen Applaus-Einspieler noch irgendwie so machen müssen.

00:05:42.580 --> 00:05:57.080
 Und wie versprochen, äh, es ist ein Paket an Klaas unterwegs. Also ich hoffe zumindest, dass es schon unterwegs ist, wenn die Folge rauskommt. Ich muss mal gucken, wie ich es jetzt aktuell gerade zur Post schaffe, aber es kommt auf jeden Fall was. Wir haben es ja versprochen.

00:05:58.180 --> 00:06:04.920
 Ja, cool. Äh, genau. Letzte Folge haben wir gesagt, es gibt dann Getränke nach Wahl, ähm, an den ersten Kommentator.

00:06:04.920 --> 00:06:13.000
 Wir haben ein Bier versprochen, aber wir haben dann gedacht, okay, Bier verschicken, dann muss man hier Altersprüfung und so. Es gibt was anderes, aber, ähm, ich finde es sogar besser als ein Sechserbier.

00:06:13.000 --> 00:06:16.240
 Ja, ich auch, aber wir verraten jetzt mal nicht zu viel.

00:06:16.240 --> 00:06:16.520
 Nö.

00:06:16.520 --> 00:06:18.180
 Nö.

00:06:18.180 --> 00:06:20.580
 Sondern wir machen direkt weiter.

00:06:24.580 --> 00:06:48.880
 Ja, die Retrospektive. Was war denn? Und zwar gestern, also wir nehmen heute am Freitag auf, gestern am 19.4., und das ist jedes Jahr am 19.4., war CSS Naked Day. Und wir haben nicht mitgemacht.

00:06:49.580 --> 00:06:57.900
 Ich hab's, ich muss ja gestehen, ich weiß gar nicht, was das ist, und ich hab's vorhin nur in den Shownotes in unseren Vorbereitungen gelesen, und ich bin sehr gespannt, äh, was jetzt kommt.

00:06:58.960 --> 00:07:11.940
 Ja, es ist, äh, ja, es ist, ist nix perverses, ähm, tatsächlich, ähm, äh, ich kann, ich kann mal den, den Bogen noch mal schlagen zur letzten Sendung, da hab ich, äh, empfohlen, wenn man, ähm, seine Website of Accessibility testen möchte, kann man mal das CSS ausschalten.

00:07:11.940 --> 00:07:21.920
 Ähm, der CSS Naked Day ist aus, aus, ich muss grad mal nachschauen, seit wann es den gibt, ähm, ich bin mir grade nicht sicher, bin schlecht vorbereitet, muss ich leider zugeben.

00:07:21.920 --> 00:07:35.140
 Ähm, also den gibt es schon mindestens zehn Jahre, ich würde sagen eher 15, ähm, und, äh, der hat seinen, seinen Ursprung so in der Web-Standards-Bewegung, also so, ähm, ja, ich erklär erst mal, was man macht.

00:07:35.140 --> 00:07:55.000
 Am CSS Naked Day, ähm, alle, die mitmachen, schalten das CSS auf ihrer Webseite aus, komplett, sodass, also wirklich, die Webseite ohne CSS erscheint, also in dem Standard-Style, den der Browser eben vorgibt, also meistens irgendwie weißer Hintergrund, ähm, mit blauen Links und, äh, schwarzer Schrift und das alles in Times New Roman oder so, je nachdem, was der Browser als Standard-Style hat.

00:07:55.000 --> 00:08:09.520
 Ähm, der Grund, äh, ist, dass man, ähm, dann, also, man, man, es ist so ein kleiner Show-off, so, hey, meine Seite funktioniert auch ohne CSS ganz wunderbar und sieht dann immer noch gut aus oder man kann sie, na, das heißt, sie sieht noch gut aus, man kann sie gut, immer noch gut benutzen.

00:08:09.520 --> 00:08:27.980
 Ähm, ja, genau, und das ist jedes Jahr am 9.4. und, äh, wir haben nicht mitgemacht, es gibt aber, glaube ich, sogar, oder zumindest gab's das früher mal, ein WordPress-Plugin CSS Naked Day, das, glaube ich, sogar, äh, automatisch an diesem Tag dann irgendwie das CSS entfernt, wenn man so ein Standard-Them benutzt hat, so, so war das früher auf jeden Fall mal.

00:08:27.980 --> 00:08:30.060
 Vielleicht machen wir ja nächstes Jahr mal mit.

00:08:30.060 --> 00:08:31.500
 Ja, so, auf jeden Fall.

00:08:31.500 --> 00:08:51.880
 Ich hab, ich hab, äh, das tatsächlich, äh, am CSS Naked Day ausprobiert, wie das denn aussehen würde und hab da ein, ein Problem festgestellt, das man heutzutage hat, was man früher nicht hatte, äh, am CSS Naked Day und zwar, äh, je nachdem, wie, wenn man SVGs verwendet auf der Seite und je nachdem, wie die eingebunden sind, erscheinen die dann riesig groß, weil die überhaupt nicht beschränkt werden in ihrer Größe.

00:08:51.880 --> 00:09:00.940
 Ähm, also, ich, ich, äh, glaube, das kann man fixen, indem man entsprechende Dinge ins SVG mit reinschreibt, ähm, haben wir bei unseren Seiten nicht, also auf meiner privaten Homepage nicht.

00:09:00.940 --> 00:09:09.340
 Und auf, äh, wo wir sind, ist vorne.show auch nicht. Also, äh, würde man dann sehr von großen SVG-Grafiken erschlagen werden. Aber ansonsten sah das eigentlich alles ganz fluffig aus.

00:09:09.340 --> 00:09:14.880
 Hast du in freier Wildbahn, äh, gestern was gesehen? Seiten, die da mitgemacht haben?

00:09:14.880 --> 00:09:30.380
 Äh, nee, also, ich bin, ich bin nicht zufällig über eine gestolpert. Ähm, es gibt, jetzt muss ich grad noch mal schauen, ist das die Eier genau? Es gibt, äh, css-naked-day.github.io, äh, da wird eine, da ist eine,

00:09:30.380 --> 00:09:42.580
 eine Liste mit, ja, genau, 2006 gab's den ersten css-naked-day, nochmal kurz nachgereicht, ähm, und, äh, da auf bestimmte Jahreszahlen in so einer Liste sind da verlinkt und da ist eine Liste mit Seiten, die mitgemacht haben.

00:09:42.660 --> 00:10:00.400
 Und dieses Jahr sind's leider nur 21 Stück und, äh, da ist jetzt auch nichts, aus, auf den ersten Blick nichts Großes dabei, in erster Linie private Blogs von, äh, Web-Leuten, also zum Beispiel, ähm, das Blog von Eric Mayer, glaube ich, hat, ist auf jeden Fall damit drauf, den kennt vielleicht der ein oder andere.

00:10:00.400 --> 00:10:08.800
 Ähm, anders zum Beispiel 2006, ähm, da waren es, äh, da zeigt die Liste 763 Teilnehmer. Wow.

00:10:08.800 --> 00:10:18.220
 Also, 763 Leute, die am css-naked-day teilgenommen haben und dann auch noch, äh, irgendwo gesagt haben, hier, schau mal, ich mach da mit, trag mich bitte mal auf der Liste ein.

00:10:18.480 --> 00:10:36.180
 Und da ist durchaus der ein oder andere bekannte Name irgendwie dabei, also Jeremy Keefe, über den haben wir schon mal gesprochen, ähm, so, wenn ich so mal über, überfliege, also das sind, ähm, ich glaube jetzt auf den ersten Blick keine großen Portale, sofern man 2006 schon von großen Portalen sprechen konnte, naja, MySpace war ja, glaube ich, groß, oder?

00:10:36.180 --> 00:10:38.840
 Ja, war mal, war mal groß, ja.

00:10:38.840 --> 00:10:46.580
 Genau, also, ein Appell, nächstes Jahr könnt ihr vielleicht mitmachen oder ihr könnt auf jeden Fall mal eure Seite ohne CSS anschauen, ist auf jeden Fall eine interessante und schöne Sache.

00:10:47.700 --> 00:10:52.000
 Ähm, genau, ich hab noch einen zweiten Retro-Punkt oder möchtest du erst ein Thema?

00:10:52.000 --> 00:10:58.700
 Äh, nee, ich wollte vielleicht noch sagen, du kannst mal ein bisschen Werbung machen für deine, äh, is it all caps day, äh, Seite.

00:10:58.700 --> 00:10:59.520
 Ach so, ist, ah.

00:10:59.520 --> 00:11:10.180
 Das scheint mir, das scheint mir jetzt inzwischen leider so ein bisschen so ein Nischen, äh, Dings geworden zu sein, wenn das früher mal 700 waren und jetzt heute irgendwie noch eine Handvoll, ähm, und so ist es mit dem all caps day, glaube ich, auch.

00:11:10.180 --> 00:11:11.640
 Äh, du meinst caps lock day?

00:11:11.640 --> 00:11:16.720
 Ja, caps lock day, ja. Manche Leute schreiben ja sowieso noch mit caps lock auf Twitter, aber.

00:11:16.920 --> 00:11:36.160
 Äh, ja, ich weiß nicht, ja, kann man vielleicht an der Stelle mal kurz einschieben, ähm, ich hab vor einigen Jahren, das ist ja keine Ahnung genau wie lang, bestimmt vor sechs, sieben Jahren oder so, äh, mal den, den Gedanken gehabt, ähm, es gab, es gab damals so einige Seiten, äh, so wie, ist Präsident XY noch im Amt und auf der Seite stand dann, äh, einfach nur ja oder nein.

00:11:36.720 --> 00:11:56.840
 Und, äh, ich fand das witzig, äh, den Leuten irgendwie sagen zu können, wann ist denn eigentlich caps lock day? Also caps lock days sind am 28. Juni und am 22. Oktober jeweils, also es gibt sogar zwei im Jahr. Ähm, und die Seite is it caps lock day.com sagt einem dann schön, ähm, ob's grad caps lock day ist oder nicht, war auch so ein bisschen Design-Experiment damals.

00:11:57.840 --> 00:12:01.000
 Es ist schön, dass bei dir caps lock day noch groß geschrieben wird, Moritz.

00:12:01.960 --> 00:12:24.620
 Äh, äh, ja, caps lock day wird bei mir groß geschrieben, aber ihr könnt auch gern mal in den, in den Style, äh, ins HTML reinschauen auf der Seite. Ich hab, äh, versucht alles groß zu schreiben, was man groß schreiben darf. Äh, das war auch ein interessantes Experiment an der Stelle, ähm, einfach mal auszuprobieren, ähm, was darf man denn alles groß schreiben? Also viele wissen ja gar nicht, dass man HTML-Tags auch komplett groß schreiben darf, wenn man das möchte.

00:12:26.080 --> 00:12:55.980
 Genau, äh, dann Retro Punkt Teil 2. Eigentlich, äh, Retro ist ja eigentlich auch, was ist denn so passiert? Was haben wir denn so gemacht in, in den letzten Tagen? Ähm, und da, da bin ich relativ schnell. Ich wollte nur mal so, so ein bisschen drüber. Ähm, also ich bin gerade, äh, für die Arbeit so ein bisschen fleißig am, am Django und Python lernen, ähm, weil wir, äh, ein neues Produkt, äh, mit Django und Python bauen und hab mich da jetzt auch viel mit Markdown und dem Parsing von Markdown beschäftigt. Ähm, ist jetzt nichts wahnsinnig super Überspannendes, aber ist ein Bereich,

00:12:55.980 --> 00:13:04.380
 in den ich eigentlich noch nie so reingeguckt hab, also gerade Markdown, ich hab's schon benutzt, aber ich hab's noch nie gepasst, äh, und, äh, ja, das macht, das macht Spaß soweit.

00:13:04.380 --> 00:13:07.780
 Was ist, wie ist dir denn so ergangen, Konstantin?

00:13:07.780 --> 00:13:18.140
 Ja, ich hab sogar drei Retro-Punkte, ich glaub, die Retro wird heute länger als unser Thema. Ähm, ich hab es endlich mal geschafft, was ich schon lange vorhatte, mich in Laravel mal ein bisschen einzuarbeiten.

00:13:18.800 --> 00:13:24.240
 Ähm, ich will da jetzt gar nicht zu arg in die Tiefe gehen, weil das natürlich jetzt doch eher, äh, Backend ist als Frontend.

00:13:24.240 --> 00:13:31.580
 Also Laravel ist ein PHP-Framework für die, denen das gar nichts sagt, ähm, und das ist so ein ganz eigenes Ökosystem.

00:13:31.800 --> 00:13:39.200
 Also das ist so ein bisschen, wie wenn man anfängt als, äh, JavaScript-Lernender sich plötzlich mit Buildchain auseinanderzusetzen, nur nochmal irgendwie eine Spur härter.

00:13:39.200 --> 00:13:48.920
 Ähm, also wenn man das richtig machen will, dann installiert man sich die Dev-Umgebung als, äh, VM, also als virtuelle Maschine, die dann alles mitbringt, was da benötigt wird.

00:13:49.000 --> 00:13:54.960
 Also, ähm, Apache-Server, ähm, die ganze Konfiguration, die verschiedenen PHP-Module, die man dafür braucht.

00:13:54.960 --> 00:13:58.760
 Und, äh, es gibt eine CLI, mit der man das Ganze konfigurieren kann.

00:13:58.760 --> 00:14:05.440
 Also es ist echt ein, man arbeitet sich da nicht mal eben so ein und es dauert schon eine Weile, bis man das mal ein bisschen am Laufen hat.

00:14:05.440 --> 00:14:14.260
 Ähm, aber was ich ganz cool fand, ist, dass man Bootstrap und View oder auch React, wenn man das gerne möchte, relativ leicht integrieren kann.

00:14:14.260 --> 00:14:16.680
 Jetzt war der Moritz kurz weg.

00:14:16.680 --> 00:14:18.000
 Nee, ich bin noch da.

00:14:18.000 --> 00:14:18.940
 Jetzt höre ich dich doppelt.

00:14:18.940 --> 00:14:21.540
 Oh, so, jetzt nicht mehr.

00:14:21.540 --> 00:14:22.040
 Jetzt, okay.

00:14:22.040 --> 00:14:24.100
 Auf den falschen Knopf gedrückt.

00:14:24.100 --> 00:14:35.680
 Genau, also Bootstrap und View lässt sich relativ einfach integrieren oder React, wenn man das möchte, äh, einfach per Kommandozeile lässt sich das rein installieren in das Projekt und so kann man recht schnell anfangen, da was zu prototypen oder eben auch fertig zu entwickeln.

00:14:35.680 --> 00:14:39.900
 Und so an sich von den Ansätzen her gefällt mir Laravel auch ganz gut.

00:14:39.900 --> 00:14:47.980
 Ähm, aber ich will eigentlich gar nicht so viel Backend machen, ich will ja mich eigentlich aufs Frontend konzentrieren, nur muss ich halt bei uns leider, wir sind ja, äh, aktuell nur zu zweit.

00:14:48.000 --> 00:14:51.860
 Ähm, muss ich bei uns eben auch teilweise Backend machen.

00:14:51.860 --> 00:15:00.280
 Ähm, und dann habe ich mir über den Artikel, den wir später noch im Thema erklären, äh, oder erläutern wollen, äh, bin ich auf was gestoßen.

00:15:00.820 --> 00:15:05.020
 Ähm, auf Mavo, sagt dir das was? M-A-V-O.

00:15:05.020 --> 00:15:11.320
 Ich weiß gar nicht, ob Framework der richtige Begriff dafür ist, ähm, mavo.io.

00:15:11.320 --> 00:15:24.840
 Ähm, es ist, also es ist schon eine Library, man lädt also ein JavaScript und ein CSS in die Seite rein und kann dann über zusätzliche HTML-Attribute die Seite bearbeitbar machen.

00:15:26.020 --> 00:15:41.180
 Und zwar sagst du einfach, ähm, ich, wo sollen die Daten gespeichert werden, entweder in Local Storage oder du verknüpfst es mit GitHub und dann hast du automatisch auch eine Login-Leiste, da kannst du draufklicken, kannst dich mit deinem GitHub-Account einloggen und die Änderungen werden dann in deinem Git-Repository gespeichert.

00:15:42.820 --> 00:15:47.680
 Ich seh gerade, meine Browser-History sagt, ich war schon mal auf der Seite, wie auch immer das sein kann.

00:15:47.680 --> 00:15:49.940
 Wahrscheinlich auch über den Artikel, vielleicht hast du mal draufgeklickt.

00:15:49.940 --> 00:15:50.780
 Ja.

00:15:50.780 --> 00:15:51.940
 Da ist es nämlich auch verlinkt.

00:15:51.940 --> 00:15:55.220
 Ähm, das klingt echt spannend.

00:15:55.220 --> 00:16:16.860
 Also es ist, ich fand es auch spannend, es ist halt mal ein ganz anderer Ansatz irgendwie und ich würde es jetzt glaube ich nicht für ein, äh, ja, Kundenprojekt oder, oder für irgendwas Produktives einsetzen, aber so, wenn ich jetzt irgendwie schnell mal einen Blog aufsetzen will und ich will jetzt nicht irgendwie hier WordPress hosten und was weiß ich, ähm, dann ist das schon ganz cool.

00:16:16.860 --> 00:16:24.920
 Also ich hab da dann auch mal Demo-Videos angeguckt, wie schnell man sich dann eben so einen kleinen Blog zusammengeklickt hat, wo man dann einfach sagt, hier neuer Beitrag und dann schreibt man da was rein.

00:16:24.920 --> 00:16:32.560
 Also um Gedanken irgendwie aufzuschreiben, ähm, aber auch Bilder und sowas ist auch alles kein Problem, kann man dann bei Drag & Drop hochladen.

00:16:32.560 --> 00:16:39.080
 Ähm, also es sah echt interessant aus, also es lohnt sich das auf jeden Fall mal anzuschauen, um den Horizont so ein bisschen zu erweitern.

00:16:39.400 --> 00:16:47.600
 Und man kann übrigens auch, ähm, ohne selber irgendwie eine Zeile JavaScript schreiben zu müssen, Berechnungen direkt ausführen, also irgendwelche Sachen zusammenrechnen lassen.

00:16:47.600 --> 00:16:53.360
 Alleine durch Attribute und durch eine bestimmte Syntax, die man in den Attributen dann verwendet.

00:16:53.360 --> 00:16:58.600
 So ein bisschen wie, äh, geschweifle Klammer in React oder, äh, in Vue.

00:16:58.600 --> 00:17:08.820
 Also es klingt ganz interessant, ich wüsste jetzt noch nicht, wofür ich es jetzt genau einsetzen könnte, aber wie gesagt, es lohnt sich auf jeden Fall mal einen Blick drauf zu werfen.

00:17:09.400 --> 00:17:15.940
 Ähm, klingt so ein bisschen nach, äh, offline first vielleicht, also du sagst, es wird alles im Local Storage gespeichert, also das heißt.

00:17:15.940 --> 00:17:33.380
 Also man kann es im Local Storage speichern, man kann es aber wie gesagt auch mit GitHub verknüpfen, ähm, aber ja, man könnte es im Local Storage, den Local Storage nutzen, um dann irgendwie, ich weiß ja nicht, ob mir das sicher genug wäre, nicht, dass er dann irgendwie mal plötzlich weg ist, also irgendwas, äh, wirklich Wichtiges würde ich da mir jetzt vielleicht nicht drin speichern, ähm, aber so generell, ja.

00:17:33.380 --> 00:17:45.060
 Klingt, klingt aber nach einer, ja, aber ich meine, ähm, also ohne es mir jetzt genauer angeschaut zu haben, klingt das für mich jetzt nach einer Möglichkeit, nach einer einfachen Möglichkeit, so ein bisschen offline first für die eigene Seite zu machen.

00:17:45.180 --> 00:17:53.220
 Es muss ja nicht der einzige Ort sein, wo ich meine Daten hin speichere, sondern das kann sich ja im Hintergrund, äh, synken mit GitHub oder mit was weiß ich, mit irgendeiner Datenbank oder so.

00:17:53.220 --> 00:17:57.260
 Ähm, aber es ist ja sehr, sehr schnell was im Local Storage gespeichert.

00:17:57.760 --> 00:18:13.000
 Und, äh, wenn man, also so als, so als Ansatz, ich weiß nicht vielleicht, ich weiß nicht, ob das taugt, das ist nur grad so ein, so ein Hirnfurz, ähm, so als Ansatz für, ich, ich hab erstmal offline first, speichere alles im Local Storage und bau dann irgendwie noch sowas drumherum, was dann eben im Hintergrund dann zum Server synkt, äh, klingt irgendwie reizvoll.

00:18:13.000 --> 00:18:17.860
 Weiß ich gar nicht, ob man das Out of the Box damit machen kann, aber, ja, könnte man sich mal anschauen.

00:18:17.860 --> 00:18:19.640
 Cool.

00:18:19.640 --> 00:18:23.240
 Ja, dann, äh, achso, hast du noch was dazu?

00:18:23.240 --> 00:18:28.220
 Nee, nee, ich, äh, ich, äh, mir fiel gerade auf, da, da ist noch ein komisches Datum, äh, in der Retro.

00:18:28.220 --> 00:18:30.460
 Ein komisches Datum in der Retro.

00:18:30.460 --> 00:18:32.680
 Ja, das, äh, mach, mach einfach weiter.

00:18:32.680 --> 00:18:38.500
 Ja, und zwar hatte, äh, Windows 3.1 Geburtstag am 6. April.

00:18:38.500 --> 00:18:43.100
 Am 6. April 1992 ist das nämlich rausgekommen.

00:18:43.100 --> 00:18:51.300
 Ähm, aber so ein Jubiläum findet halt jedes Stadt, jedes Jahr statt, das heißt auch am 6. April 2020 war dieses Jubiläum, falls sich das verwirrt hat.

00:18:52.660 --> 00:18:59.040
 Genau, 92, äh, 92, das heißt, das sind jetzt, ich bin so gut in Mathe, äh, 28 Jahre.

00:18:59.040 --> 00:18:59.980
 28 Jahre.

00:18:59.980 --> 00:19:00.500
 Wahnsinn.

00:19:00.500 --> 00:19:09.200
 Und, ähm, ja, da möchte ich noch was dazu sagen, das ist jetzt fast schon ein eigenes Geilteil, aber weil das jetzt im Rahmen von dem Jubiläum ist, packe ich das jetzt einfach mal in die Retro.

00:19:09.720 --> 00:19:14.720
 Und zwar kann man Windows 3.11 im Browser ausführen.

00:19:14.720 --> 00:19:23.660
 Wir haben es in einer der letzten Folgen schon mal gesagt, ähm, archive.org, wo man über so einen DOS-Box-Emulator im Browser alte Spiele spielen kann.

00:19:24.000 --> 00:19:28.240
 Und da kann man eben nicht nur alte Spiele spielen, sondern da kann man tatsächlich auch Windows 3.11 laufen lassen.

00:19:29.280 --> 00:19:36.020
 Und, äh, es dauert ein bisschen, es fühlt sich so ähnlich an, wie wenn man damals Windows über Disketten installiert hat, ja.

00:19:36.500 --> 00:19:43.440
 Also, das dauert schon so irgendwie ein paar Minuten, gut, das ging wahrscheinlich damals noch länger, ähm, aber bis man da die Disketten gewechselt hatte.

00:19:43.440 --> 00:19:46.380
 Und wenn es dann geladen ist, dann läuft das aber im Browser.

00:19:46.380 --> 00:19:56.980
 Und was mich da überrascht hat, also Minesweeper, das wusste ich noch, dass das damals schon dabei war, aber auch Solitaire war da schon dabei und Paint, was damals noch Paintbrush hieß.

00:19:57.840 --> 00:20:02.860
 Ja, Solitaire, das hatte damals die geilsten Effekte, wenn du das zum Ende gespielt hast.

00:20:02.860 --> 00:20:03.660
 Mit den Karten, ja.

00:20:03.660 --> 00:20:12.400
 Das hatte, das hatte das damals in Windows 3.11 schon und das, das war wirklich, also alleine, alleine nur dieser, dieser Schlusseffekt hat sich gelohnt, das bis zum Schluss zu spielen.

00:20:12.400 --> 00:20:14.760
 Nee, wirklich, also das war auch so eine Art geiles Easter Egg da.

00:20:14.760 --> 00:20:18.480
 Ja, und es gab kein Startmenü, das war mir auch nicht mehr bewusst.

00:20:18.480 --> 00:20:27.340
 Es gab noch kein Startmenü bei Windows 3.11, das kam erst mit Windows 95 und stattdessen hatte man den Programmanager, was also ein eigenes,

00:20:27.340 --> 00:20:33.120
 Icon war, was dann ein Fenster geöffnet hat und da drin waren dann alle Programme, die ich dann da raus starten konnte.

00:20:33.120 --> 00:20:41.600
 Und wenn ich ein Programm dann minimiert habe, dann war das einfach unten am unteren Bildschirmrand stand dann das Icon rum, aber eine Startleiste gab es noch nicht.

00:20:41.600 --> 00:20:43.260
 War mir auch nicht mehr bewusst.

00:20:43.260 --> 00:20:47.840
 Die Opas erzählen vom Krieg oder die Opas erzählen vom Browser-War, aber der Browser-War war erst später.

00:20:47.840 --> 00:20:48.420
 Genau.

00:20:48.420 --> 00:20:51.440
 Ja, hast du noch was?

00:20:52.140 --> 00:21:00.980
 Ich habe nichts mehr für die Retro, das bedeutet, wir kommen jetzt zu die Property der Woche.

00:21:03.420 --> 00:21:05.020
 Das war perfektes Timing.

00:21:05.020 --> 00:21:15.400
 Ja, die Property der Woche mache ich jetzt auch weiter, normalerweise wechseln wir uns ab, aber das liegt am Thema der Woche, das heute ein bisschen anders gestaltet ist, aber da erzähle ich nachher noch was dazu.

00:21:16.240 --> 00:21:28.400
 Und die Property der Woche ist heute ein HTML-Attribut, beziehungsweise ein bestimmter Wert eines HTML-Attributs und zwar geht es um das REL-Attribut bei Links und um den Wert NoOpener.

00:21:29.360 --> 00:21:38.540
 Und zwar geht es da um ein Sicherheitsrisiko und ein Angriffsszenario, Proof of Concept dazu, relativ gut gemacht, verlinke ich auch in den Shownotes natürlich.

00:21:38.540 --> 00:21:41.460
 So kurz aus dem Bauch raus, sagt dir das was?

00:21:42.560 --> 00:21:44.780
 Ich habe es auf meiner Seite sogar im Einsatz.

00:21:44.780 --> 00:21:48.280
 Also du bist darüber im Bilde, ist nichts Neues für dich?

00:21:48.280 --> 00:21:56.940
 Sagen wir mal so, ich bin Best Practices gefolgt, ich habe nicht in der Tiefe mir angeschaut, warum man das jetzt so machen muss.

00:21:56.940 --> 00:22:04.260
 Wenn ich ganz ehrlich bin, das haben mir diverse Dev-Tools mal gesagt, mach das doch mal da rein, aber ich habe mir es mal ein bisschen angeschaut.

00:22:04.260 --> 00:22:11.220
 Ich muss gestehen, dass ich tatsächlich erst irgendwie so vor einer Woche oder sowas da drauf gestoßen bin und mir dessen vorher nicht bewusst war.

00:22:11.220 --> 00:22:24.920
 Und zwar geht es um folgendes, ich kann einen Link aus einer Seite öffnen, per Target Blank zum Beispiel, auf eine andere Seite, also das Angriffsszenario funktioniert auch nur in Verbindung mit Target Blank.

00:22:24.920 --> 00:22:33.860
 Das heißt, ich öffne eine Seite in einem neuen Zielfenster, auf der Seite an sich sehe ich nichts Außergewöhnliches, gucke da vielleicht ein lustiges Bild an oder lese einen kurzen Text,

00:22:34.120 --> 00:22:45.920
 mache die Seite wieder zu, weil ich fertig bin und es hat sich aber, vielleicht ohne, dass ich das visuell merke, weil es genau nachgebaut ist, auf meiner Ursprungsseite eine Phishing-Seite geöffnet.

00:22:45.920 --> 00:22:54.000
 Und das heißt, da ist vielleicht jetzt ein Login von wegen Sitzung abgelaufen, bitte nochmal neu eingeben und wenn ich nicht auf die Adressbar schaue,

00:22:54.000 --> 00:22:59.360
 die ja vielleicht auch ähnlich aussehen kann, ohne dass ich das merke, dann kriege ich das gar nicht mit, dass da was passiert ist.

00:23:00.060 --> 00:23:13.220
 Und das Ganze funktioniert so, dass ich in einem, in dem neuen Fenster Zugriff habe auf window.opener und auch auf window.opener.location und das Ganze funktioniert cross-domain.

00:23:13.880 --> 00:23:19.500
 Das heißt, ich kann sagen, window.opener.location.href ist gleich meine Phishing-Seite.

00:23:19.500 --> 00:23:25.320
 Und besonders gefährlich ist das Ganze natürlich bei user-generierten Inhalten.

00:23:25.320 --> 00:23:33.220
 Das heißt, irgendwelche Communities oder was, wo die Leute eben ihren eigenen Content posten können und auch Links posten können.

00:23:33.780 --> 00:23:40.380
 Und wenn die dann einfach mit Target Blank geöffnet werden, dann besteht natürlich die Gefahr, dass jemand mich absichtlich auf so eine Phishing-Seite leitet.

00:23:40.380 --> 00:23:47.780
 Und, also man liest in den Artikeln immer wieder so, user-generated Content wäre da besonders gefährlich, will ich auch nicht abstreiten.

00:23:48.000 --> 00:23:56.360
 Aber theoretisch kann jeder Link, der auf irgendeiner Seite auch vom Webmaster selber, Webmaster, den Begriff habe ich auch schon lange nicht mehr verwendet.

00:23:56.360 --> 00:23:57.440
 Webmaster, ich habe gerade auch schon gedacht.

00:23:57.460 --> 00:24:00.840
 Das ist auch wieder so retro 90er-Sprech.

00:24:00.840 --> 00:24:03.960
 Jedenfalls vom Seitenbetreiber selbst gepostet wird.

00:24:03.960 --> 00:24:06.100
 Die Zielseite kann auch mal irgendwie gehackt werden.

00:24:06.100 --> 00:24:12.160
 Und dort kann dann eben bösartiger Content untergebracht werden, der mich dann auf dem anderen Tab weiterleitet.

00:24:12.160 --> 00:24:21.800
 Und das war mir tatsächlich gar nicht bewusst, obwohl es eine Beschreibung, also die früheste Beschreibung für dieses Szenario, die ich gefunden habe, war vom Oktober 2012.

00:24:21.800 --> 00:24:24.600
 Ein Bug-Ticket bei Chromium.

00:24:25.900 --> 00:24:31.180
 Und man müsste man denken, 2012, oh dann ist das ja schon so alt, ist wahrscheinlich gar nicht mehr relevant.

00:24:31.180 --> 00:24:36.780
 Oder wieso ist der Konstantin so doof und hat sowas immer noch nicht mitbekommen, obwohl das schon so lange existiert.

00:24:36.780 --> 00:24:42.480
 Das betrifft aber auch nicht nur Chromium, sondern es läuft durch alle Browser hinweg.

00:24:42.480 --> 00:24:48.540
 Und Gecko gibt es ein Ticket dazu, ich verlinke auch die einzelnen Tickets bei uns in den Shownotes.

00:24:48.540 --> 00:24:55.120
 Gecko, das Ticket ist von November 2015 und von Webkit auch 2016 im März.

00:24:55.780 --> 00:25:05.540
 Und gedauert hat es aber jeweils, also Ende 2016 im Oktober haben die ganzen Browser dann erst was implementiert, eben dieses No-Opener, dieses Value.

00:25:06.260 --> 00:25:10.940
 Also man sieht zwischen der Meldung und dem Fix sind drei Jahre vergangen, das fand ich ganz schön heftig.

00:25:11.560 --> 00:25:19.180
 Und das liegt eben daran, eigentlich war es standardkonform umgesetzt von allen Browsern, deswegen war es auch einheitlich in allen Browsern angreifbar.

00:25:19.900 --> 00:25:24.660
 Das heißt, man musste sich erstmal einig werden darüber, wie man dem Ganzen jetzt begegnen möchte.

00:25:24.660 --> 00:25:30.460
 Und es gab schon das, na wie heißt das andere, nicht No-Opener, sondern No-Referrer.

00:25:30.460 --> 00:25:37.580
 Genau, dass kein Referrer mit gesendet wird und dann hat man sich eben darauf geeinigt, dass man dieses No-Opener-Weldung hinzufügt.

00:25:37.580 --> 00:25:44.780
 Ja und das hat ganz schön lange gedauert und das fand ich ein bisschen erschreckend, wie lange das auch bei sicherheitsrelevanten Sachen gehen kann.

00:25:44.900 --> 00:25:48.860
 Aber klar, wenn da erst irgendwelche Standards angepasst werden müssen, dann dauert das entsprechend lange.

00:25:48.860 --> 00:25:55.580
 Das Edge-Ticket habe ich gar nicht gefunden, das gibt es irgendwie nicht mehr, den Bug-Tracker, weil die ja inzwischen auf Chromium umgestiegen sind.

00:25:55.580 --> 00:25:59.660
 Aber auch der war betroffen, also wirklich alle großen Browser hinweg.

00:25:59.660 --> 00:26:03.400
 Ja, No-Referrer ist mir jetzt gerade die Tage über den Weg gelaufen, mal wieder.

00:26:03.400 --> 00:26:13.760
 Das ist ja dafür, dass der Ursprungsort oder die Ursprungs-URL nicht mitgeschickt wird, wenn ich einen Link aufrufe, also an die entsprechende Zielseite.

00:26:14.900 --> 00:26:19.820
 Weil, also im Zusammenhang mit, ist das denn eigentlich sicher?

00:26:19.820 --> 00:26:32.140
 Und ich habe da was gelesen von Kollegen von mir, die sich viel mit Security beschäftigen, die dann gesagt haben, naja, ist an sich irgendwie schon eine gute Sache,

00:26:32.140 --> 00:26:37.220
 aber es hält einen ja keiner davon ab, eine alte Browser-Version zu verwenden, die das einfach nicht implementiert hat.

00:26:37.220 --> 00:26:44.700
 Also wenn ich irgendwie ein böser Angreifer sein will, dann nehme ich einfach, also die nehmen ja ganz gerne Browser, die irgendwie Sicherheitslecks haben.

00:26:45.580 --> 00:26:50.700
 Um irgendwelche bösen Sachen zu machen, also No-Referrer, man sollte sich offenbar nicht zu 100% drauf verlassen.

00:26:50.700 --> 00:26:52.060
 Das war so irgendwie da der Konsens.

00:26:52.060 --> 00:26:57.060
 Das heißt, wenn man wirklich sicherheitsrelevante Sachen hat, sollte man noch einen De-Referrer einbauen.

00:26:57.820 --> 00:27:03.160
 So eklig das ist. Also so eine De-Referrer-Seite für die, die nicht wissen, was das ist, ist so der Klassiker.

00:27:03.160 --> 00:27:11.740
 Du klickst bei Facebook auf einen Link oder bei irgendeinem Social Network, du klickst irgendwie auf einen Link, der nach draußen geht und dann landet man auf so einer Zwischenseite,

00:27:11.840 --> 00:27:22.460
 die sagt, übrigens, du verlässt jetzt hier übrigens socialnetwork.com und ja, also es ist meistens so eine Zwischenseite, wo dann irgendwie nochmal gesagt wird,

00:27:22.460 --> 00:27:27.420
 du gehst jetzt übrigens und wir leiten dich jetzt weiter, aber der ursprüngliche Link ist nicht mehr erkennbar.

00:27:27.480 --> 00:27:35.240
 Ja, das ist ja manchmal auch silent, also zum Beispiel bei Webmail-Clients, bei Gmail zum Beispiel, da wird man auch erst auf eine Google-URL geleitet und dann geht's weiter.

00:27:35.240 --> 00:27:44.400
 Ja, genau. Also wie gesagt, eigentlich ging's ja um No-Opener, aber in dem Fall kann man auch No-Referrer mal erwähnen und sagen, was das tut.

00:27:44.400 --> 00:27:57.100
 Genau, also implementiert ist das Ganze schon seit Ende 2016, wie gesagt, in allen Browsern dann, aber wenn man sich heute mal die Seiten so anguckt, scheint sich das auch noch nicht überall herumgesprochen zu haben,

00:27:57.200 --> 00:28:04.580
 deswegen war mein schlechtes Gewissen, dass ich das jetzt erst so auf den Schirm bekommen habe, hielt sich da in Grenzen, also ich scheine da nicht alleine zu sein.

00:28:04.580 --> 00:28:13.880
 Man sieht immer noch oft Links auf externen Seiten, die das trotzdem nicht setzen. Aber ich werde jetzt drauf achten, ganz gezielt.

00:28:13.880 --> 00:28:25.200
 Ich glaube, mir ist gerade wieder eingefallen, welches Tool ich auf No-Opener gestoßen bin. Ich muss gerade nochmal schauen, ob das denn noch das macht.

00:28:25.980 --> 00:28:30.040
 Genau, weil ich glaube, das war Webhint.io. Das ist ein ganz interessantes Tool. Kanntest du das?

00:28:30.600 --> 00:28:33.640
 Nee, sag mir nix, nee. Aber kannst du gleich mal in die Shownotes setzen.

00:28:33.640 --> 00:28:41.460
 Genau, das packe ich gleich mal rein. Webhint.io ist, glaube ich, von, muss ich gerade nochmal nachschauen, von Microsoft?

00:28:42.500 --> 00:28:53.000
 OpenJS Foundation? Nee, offenbar nicht. Ich gucke jetzt nicht genau rein. Das ist so ein nettes Tool, da gibt man seine Domain ein und dann kriegt man Hinweise, was man da noch besser machen könnte.

00:28:53.140 --> 00:29:03.520
 Also das testet, es ist so ein bisschen wie Lighthouse, glaube ich, in Chrome. Das testet auch so ein bisschen Performance, aber weist dann auch auf so Sicherheitslücken hin, die man potenziell hat.

00:29:03.520 --> 00:29:08.440
 Also es ist ganz, ganz nett. Einfach nur URL reinwerfen und dann kriegt man eine Menge interessanter Informationen.

00:29:10.180 --> 00:29:12.480
 Genau, das noch als Ergänzung.

00:29:12.480 --> 00:29:20.100
 Ja, das war's eigentlich auch dazu. Wie gesagt, achtet da in Zukunft drauf, dass ihr das implementiert.

00:29:20.100 --> 00:29:24.700
 Und nach dem nächsten Spam-Spot geht's weiter.

00:29:24.700 --> 00:29:31.580
 Hallo, das hier ist keine Nachricht. Das ist die letzte Erinnerung.

00:29:31.580 --> 00:29:37.220
 Sie haben noch ungefähr 15 Minuten, um ihr neues Konto zu aktivieren.

00:29:38.220 --> 00:29:40.840
 Alles ist eingerichtet und startbereit.

00:29:40.840 --> 00:29:47.760
 Sie haben auf zahlreiche E-Mails nicht geantwortet und einige Zahltage verpasst.

00:29:47.760 --> 00:29:51.520
 Klicken Sie hier und erhalten Sie.

00:29:51.520 --> 00:29:56.980
 Ansonsten erfreut sich ein anderes Mitglied daran, wenn Sie es nicht möchten.

00:29:56.980 --> 00:29:59.220
 Danke.

00:29:59.220 --> 00:30:03.840
 Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.

00:30:03.840 --> 00:30:06.560
 Jetzt habe ich natürlich noch reingelacht.

00:30:06.560 --> 00:30:08.100
 Macht ja nix.

00:30:08.220 --> 00:30:11.220
 Danke wieder für diesen mega genialen Spam-Spot.

00:30:11.220 --> 00:30:16.520
 Mal wieder ein Spot auf Basis eines Textes, den, glaube ich, ich bekommen habe.

00:30:16.520 --> 00:30:17.980
 Ich glaube, das hast du sogar eingetragen, ja.

00:30:17.980 --> 00:30:20.420
 Ich glaube, das war eine Spam-Mail, die ich mal bekommen habe.

00:30:20.420 --> 00:30:22.840
 Wir sammeln da immer fleißig lustige Spam-Texte.

00:30:22.840 --> 00:30:25.900
 Und der Konstantin hat die bisher immer sehr genial vertont.

00:30:25.900 --> 00:30:26.340
 Danke, danke.

00:30:26.340 --> 00:30:27.520
 Also vielen Dank nochmal an der Stelle.

00:30:27.520 --> 00:30:31.060
 Allein das ist schon ein Highlight. Das ist schon ein Grund, unsere Sendung zu hören.

00:30:31.060 --> 00:30:32.400
 Auf jeden Fall. Nur deswegen.

00:30:32.400 --> 00:30:37.060
 Damit kommen wir wahrscheinlich jetzt dann auch schon zum Thema, weil das ist ja die Werbung vom Thema.

00:30:37.060 --> 00:30:39.360
 Genau, das Thema der Woche.

00:30:41.360 --> 00:30:44.540
 Hier ist WWS IV mit dem Tagesthema.

00:30:50.580 --> 00:30:52.480
 Ja, höchst professionell.

00:30:52.480 --> 00:30:54.920
 Ja, höchst professionell.

00:30:54.920 --> 00:30:56.820
 Ja, das hat der Moritz wieder gemacht.

00:30:56.820 --> 00:31:00.520
 Ja, es klingt ein bisschen dröge.

00:31:00.520 --> 00:31:08.240
 Ich habe noch versucht, irgendwie was mit einer Blockflöte dazu einzuspielen, aber das hat nicht so gut geklappt, wie ich wollte, beziehungsweise nicht so schlecht.

00:31:08.920 --> 00:31:16.980
 Weil gut Blockflöte spielen, ich habe zu gut gespielt, deswegen, also ich muss noch ein bisschen mehr üben, schlecht zu spielen, glaube ich.

00:31:16.980 --> 00:31:21.860
 Nee, also das ist eine Kunst, die wirklich unterschätzt wird, meiner Meinung nach.

00:31:21.860 --> 00:31:29.760
 Wirklich so glaubwürdig, so zu spielen, irgendein Instrument zu spielen, dass es glaubwürdig schlecht wirkt.

00:31:29.760 --> 00:31:31.580
 Also wie ein Achtjähriger an Weihnachten.

00:31:31.580 --> 00:31:33.440
 Ja, aber versuch das mal nachzumachen.

00:31:33.440 --> 00:31:38.840
 Wenn du ein Instrument beherrschst, absichtlich schlecht zu spielen, ist echt, also gut, ich beherrsche die Blockflöte nicht.

00:31:38.840 --> 00:31:39.860
 Nein, nein.

00:31:39.860 --> 00:31:44.140
 Das ist interessant, ich habe bisher noch niemanden getroffen, der von sich behauptet, die Blockflöte zu beherrschen.

00:31:44.140 --> 00:31:48.660
 Nee, aber ich habe tatsächlich ein Profimodell mir ausgeliehen dafür.

00:31:48.660 --> 00:31:49.140
 Oh, okay.

00:31:49.140 --> 00:31:50.800
 So, warte mal kurz.

00:31:50.800 --> 00:31:54.000
 Du musst mal ganz kurz überbrücken, dann hole ich es mal und zeig es dir.

00:31:54.000 --> 00:31:56.400
 Oh Gott, wie soll ich den jetzt überbrücken? Ich kann was singen oder rappen?

00:31:56.400 --> 00:32:00.320
 Du kannst zum Beispiel schon mal sagen, was unser Thema der Woche ist und dann kommen wir noch mal kurz zur Flöte.

00:32:00.320 --> 00:32:02.380
 Ja, ich habe eh noch was zu sagen.

00:32:02.580 --> 00:32:05.020
 Das Thema der Woche machen wir diesmal etwas anders.

00:32:05.020 --> 00:32:11.200
 Bisher hat es immer einer von uns beiden vorbereitet und darüber referiert und es war relativ wenig Interaktion.

00:32:11.200 --> 00:32:17.660
 Und wir haben das diesmal ein bisschen anders gemacht auf Basis eines Artikels, den wir beide gelesen haben.

00:32:17.660 --> 00:32:23.320
 Ein Artikel, relativ aktuell sogar jetzt von Anfang an April, von Lia Varou mit dem Titel

00:32:23.320 --> 00:32:26.660
 LCH Colors in CSS – What, Why and How.

00:32:27.240 --> 00:32:28.760
 Das heißt, das ist unser Ausgangspunkt.

00:32:28.760 --> 00:32:35.760
 Es geht aber insgesamt um CSS-Farbsysteme und im Speziellen eben um diesen LCH-Farbraum.

00:32:35.760 --> 00:32:37.100
 Ja, cool.

00:32:37.100 --> 00:32:38.000
 Danke fürs Überbrücken.

00:32:38.000 --> 00:32:39.220
 Perfekt, ich bin wieder da.

00:32:39.220 --> 00:32:41.120
 Der Moritz ist da und zeigt mir seine Blockflöte.

00:32:41.120 --> 00:32:42.720
 Genau, ich zeige dir meine Blockflöte.

00:32:42.720 --> 00:32:44.380
 Ich meine, wie gesagt, nur ausgeliehen.

00:32:44.500 --> 00:32:50.080
 Was das Profi daran ist, ist, die hat die, also ich weiß nicht, die meisten werden ja wahrscheinlich

00:32:50.080 --> 00:32:51.660
 schon mal eine normale Blockflöte gesehen haben.

00:32:51.660 --> 00:32:56.960
 Und in diesem Falle, das Profi-Modell hat die beiden unteren Löcher, sind quasi Doppellöcher.

00:32:56.960 --> 00:32:59.860
 Das heißt, man kann sie quasi halb zuhalten.

00:33:00.880 --> 00:33:05.440
 Und was ich daran wirklich erstaunlich fand bei dieser Flöte, war tatsächlich eine Gebrauchsanleitung

00:33:05.440 --> 00:33:05.900
 dabei.

00:33:05.900 --> 00:33:10.240
 Und zwar tatsächlich, wie man welche Töne spielt.

00:33:10.240 --> 00:33:11.520
 Da sind genau die Griffe drauf.

00:33:11.520 --> 00:33:18.060
 Und man kann tatsächlich auf dieser Flöte, also ich dachte ja immer so eine Blockflöte,

00:33:18.060 --> 00:33:21.200
 das ist einfach, das ist eine C-Dur-Tonleiter, da geht sonst nichts drauf.

00:33:21.200 --> 00:33:25.700
 Naja, aber du kannst mit bestimmten Tricks und Kniffen und ab und zu mal zwischendrin ein

00:33:25.700 --> 00:33:29.500
 Loch frei halten und dann irgendwie unten nur ein halbes oder so, kannst du tatsächlich so gut

00:33:29.500 --> 00:33:30.500
 wie jeden Ton spielen.

00:33:30.500 --> 00:33:35.400
 Also du kommst einmal durch die chromatische Tonleiter damit durch, was ich ziemlich beeindruckend

00:33:35.400 --> 00:33:35.660
 finde.

00:33:35.660 --> 00:33:37.240
 Also das ist, glaube ich, ein unterschätztes Instrument.

00:33:37.240 --> 00:33:39.300
 Was man hier noch alles lernen kann bei uns.

00:33:39.300 --> 00:33:47.000
 Also ab nächster Folge ist das Ganze hier übrigens ein Blockflöten-Tutorial.

00:33:47.000 --> 00:33:47.300
 Genau.

00:33:47.300 --> 00:33:50.980
 Und hier noch kurz meine Impression auf jemand, der nicht Flöte spielen kann.

00:33:50.980 --> 00:33:54.140
 So, so weit bin ich gekommen mit.

00:33:54.140 --> 00:33:55.940
 Das war doch schon mal ganz schlecht.

00:33:58.440 --> 00:34:01.940
 Ja, das ist, äh, das, äh, ja genau.

00:34:01.940 --> 00:34:03.480
 Gut, okay.

00:34:03.480 --> 00:34:07.240
 Wir sind ein Audio-Podcast, hier muss es auch was Schönes für die Ohren geben.

00:34:07.240 --> 00:34:12.660
 Ja, deswegen reden wir jetzt auch über Farben, weil man das so wunderschön beschreiben

00:34:12.660 --> 00:34:13.000
 kann.

00:34:13.000 --> 00:34:14.100
 Ähm.

00:34:14.100 --> 00:34:17.080
 Ich glaube, ich muss mir gleich noch ein Bier holen.

00:34:18.340 --> 00:34:18.980
 Okay, ja.

00:34:18.980 --> 00:34:20.680
 Äh, äh, Farben, Farben.

00:34:20.680 --> 00:34:21.240
 Farben, genau.

00:34:21.240 --> 00:34:24.520
 Weil du, weil du gerade, weil du gerade angefangen hast und, äh, weil ich dich jetzt ein bisschen

00:34:24.520 --> 00:34:26.840
 alleine gelassen habe, dann fange ich vielleicht einfach mal an jetzt.

00:34:26.840 --> 00:34:30.980
 Ähm, also ich habe mir überlegt, also wir haben das unabhängig voneinander vorbereitet.

00:34:30.980 --> 00:34:33.380
 Wir wissen nicht, was der André jeweils vorbereitet hat, genau.

00:34:33.380 --> 00:34:36.080
 Ähm, deswegen kann es sein, dass wir ein bisschen Überschneidung haben.

00:34:36.200 --> 00:34:39.540
 Das drückt sich ganz gut, weil ich habe nichts vorbereitet und habe dich alles machen lassen.

00:34:39.540 --> 00:34:40.340
 Ja, genau.

00:34:40.340 --> 00:34:43.380
 Wie Helge Schneider gesagt hat, ich habe nichts vorbereitet, da kann auch nichts schief gehen.

00:34:43.380 --> 00:34:48.560
 Übrigens, Helge Schneider, nochmal bei den Instrumenten zu bleiben, der große Gott der

00:34:48.560 --> 00:34:53.340
 Leute, die Instrumente, die Instrumente beherrschen, aber es vermögen sie so zu spielen, dass es

00:34:53.340 --> 00:34:54.760
 so wirkt, als könnten sie es nicht.

00:34:54.760 --> 00:34:57.480
 Und dann aus Versehen trotzdem die Töne treffen.

00:34:57.480 --> 00:34:59.020
 Also scheinbar aus Versehen.

00:34:59.020 --> 00:35:00.580
 Das ist wirklich der große Meister.

00:35:00.580 --> 00:35:03.640
 Ich glaube, der spielt auch so ziemlich jedes Instrument, das es auf dieser Welt gibt.

00:35:04.260 --> 00:35:06.700
 Genau, wir spielen jetzt die Klaviatur der Farben.

00:35:06.700 --> 00:35:08.020
 Und zwar.

00:35:08.020 --> 00:35:09.080
 Wow.

00:35:09.080 --> 00:35:13.200
 Ja, nicht schlecht, ne?

00:35:13.200 --> 00:35:14.480
 Habe ich mir nicht vorher ausgedacht.

00:35:14.480 --> 00:35:22.040
 Genau, also worauf ich ein bisschen eingehen wollte, ist so am Anfang mal ein bisschen Farbtheorie.

00:35:22.040 --> 00:35:27.120
 Also ganz, ganz, ganz low level, dass wir auch jetzt nicht nur über einen verrückten

00:35:27.120 --> 00:35:31.100
 neuen Farbraum reden, der noch in keinem Browser implementiert ist, sondern mal so generell

00:35:31.100 --> 00:35:36.480
 auch für, weil wir durch unseren Kommentar wissen, hier sind auch zum Beispiel Azubis,

00:35:36.480 --> 00:35:37.140
 die zuhören.

00:35:37.140 --> 00:35:39.520
 Also mal ein bisschen was über Farben allgemein.

00:35:39.520 --> 00:35:41.300
 Wie funktioniert das denn überhaupt mit dem Monitor?

00:35:41.300 --> 00:35:43.460
 Also ganz, ganz grob allgemein.

00:35:43.460 --> 00:35:45.920
 Es gibt ja die additive und die subtraktive Farbmischung.

00:35:46.000 --> 00:35:48.300
 Ich denke, davon sollte man in der Schule eventuell schon mal gehört haben.

00:35:48.300 --> 00:35:51.020
 Wir sind ein Ü18-Podcast, also setze ich das mal voraus.

00:35:51.020 --> 00:35:55.060
 Additive Farbmischung funktioniert mit Licht.

00:35:55.060 --> 00:35:59.680
 Das bedeutet, verschiedenfarbiges Licht addiert sich auf, am Ende zu weiß.

00:36:00.280 --> 00:36:04.900
 Und subtraktive Farbmischung wird normalerweise mit Partikeln gemacht, also zum Beispiel aus

00:36:04.900 --> 00:36:07.560
 dem Farbkasten werden verschiedene Farben zusammengemischt.

00:36:07.560 --> 00:36:12.800
 Und das endet normalerweise, also in der perfekten Welt, wendet das in Schwarz, wenn ich alle Farben

00:36:12.800 --> 00:36:13.360
 zusammen mische.

00:36:13.360 --> 00:36:15.240
 Aber meistens ist es eher so ein dreckiges Braun.

00:36:18.380 --> 00:36:25.760
 Momentan ist es so, dass die normalen gängigen Monitore normalerweise pro Farbe, also Rot, Grün und Blau

00:36:25.760 --> 00:36:34.400
 sind die Farben, die in einem Monitor vorkommen, RGB, normalerweise pro Farbe 256 verschiedene Farbabstufungen haben

00:36:34.400 --> 00:36:36.660
 oder zumindest haben sollten, laut Definition.

00:36:36.660 --> 00:36:38.240
 Ich weiß nicht, ob das wirklich immer so ist.

00:36:38.240 --> 00:36:45.880
 Es ist auch schwer nachzuvollziehen, 256 verschiedene Helligkeitsstufen von jedem einzelnen Pixel nachzuvollziehen.

00:36:46.720 --> 00:36:49.140
 Daher weiß ich nicht, ob es wirklich so ist, aber so sollte es sein.

00:36:49.140 --> 00:36:53.100
 Dazu kommt bei vielen Farben noch ein Transparenz-Layer.

00:36:53.100 --> 00:36:57.080
 Das kommt dann zum Tragen, wenn man verschiedene Farben kombiniert und übereinander legt.

00:36:57.080 --> 00:37:06.080
 An der Stelle noch ein kleiner Einschub, weil wir vorhin irgendwie die Opas erzählen von den Browser Wars waren.

00:37:06.080 --> 00:37:11.960
 Alte Grafikchips, ich erinnere mich noch daran, so ein riesiger alter Rechner, das war der erste Computer, an dem ich saß.

00:37:13.180 --> 00:37:16.620
 Da war das noch ein Ding, wenn die bestimmte Farbräume konnten.

00:37:16.620 --> 00:37:23.840
 Also so der derzeitige RGB-SRGB-Farbraum mit, glaube ich, 16,7 Millionen Farben, das konnte damals nicht jeder Rechner.

00:37:23.840 --> 00:37:25.240
 Also ich bin mir jetzt nicht sicher.

00:37:25.240 --> 00:37:28.340
 Konstantin, weißt du, was der C64, wie groß der Farbraum da war?

00:37:28.720 --> 00:37:34.060
 Das waren wahrscheinlich so 32, ich weiß es nicht genau, wenige Farben.

00:37:34.060 --> 00:37:42.600
 Ich erinnere mich noch an die Ära 256 Farben, das ist auch in GIFs noch der Fall.

00:37:42.600 --> 00:37:47.480
 Das heißt, ein GIF kann normalerweise nur 256 verschiedene Farben, die können aber vorher definiert werden, welche es sind.

00:37:47.480 --> 00:37:49.420
 16,64, 16 Farben.

00:37:49.420 --> 00:37:51.220
 16 Farben sogar nur.

00:37:51.720 --> 00:38:01.680
 Ja, und da lernt man dann auch, das müssen wir jetzt nicht genau erklären, wie es funktioniert, was Divering ist, also wie man dann mit 16 Farben trotzdem es so aussehen lässt, als hätte man noch mehr zur Verfügung.

00:38:03.740 --> 00:38:12.020
 An der Stelle noch ein kleiner Querverweis nochmal zur letzten Folge, also zur Folge Nummer 4, wo wir über Accessibility gesprochen haben.

00:38:12.020 --> 00:38:27.940
 Farbe, da haben wir, es war ein kleiner Punkt, Farbe sollte nicht alleiniges Alleinstellungsmerkmal, einziges Alleinstellungsmerkmal in Interfaces sein, also wenn ich irgendwie eine Fehlermeldung habe auf einer Website oder so, dann sollte das nicht einfach nur rot erscheinen, sondern man soll vielleicht noch ein Icon nebendran packen.

00:38:27.940 --> 00:38:34.860
 Das ist aber genug mit alten Sachen, jetzt reden wir über aktuelle Sachen.

00:38:34.860 --> 00:38:45.000
 Ich habe mir da jetzt überlegt, nur um, dass wir uns jetzt nochmal kurz absprechen, dass ich dir mal sage, wieso der Farbplan jetzt, mein Farbplan aussieht, dass ich dich auch nochmal zu Wort kommen lasse.

00:38:45.000 --> 00:38:52.640
 Ich wollte jetzt mal so über die Farbsysteme, die es im Browser gibt, sprechen, also in CSS.

00:38:53.200 --> 00:38:58.920
 Was ist denn, fangen wir mal so an, machen wir mal ein bisschen Interview, was ist denn dein Lieblingsfarbname?

00:38:58.920 --> 00:39:03.860
 Mein Lieblingsfarb, ach du meinst von den benamten CSS-Farben?

00:39:03.860 --> 00:39:09.360
 Oh je, das ist so lange her, dass ich die tatsächlich mal benutzt habe, ich weiß es gar nicht, kann ich dir gar nicht sagen.

00:39:09.360 --> 00:39:15.460
 Ich kann dir meine Lieblingsfarben in Hex-RQ-Codes nennen.

00:39:15.620 --> 00:39:16.600
 Nee, nee, nee, das gilt nicht.

00:39:16.600 --> 00:39:18.120
 Okay, dann sage ich mal kurz meine.

00:39:18.120 --> 00:39:23.960
 Also ich bin großer Fan von Peach Puff, das benutze ich gerne, aber nur wegen dem Namen.

00:39:23.960 --> 00:39:26.360
 Hot Pink ist auch super.

00:39:26.360 --> 00:39:32.860
 Und dann gibt es auch noch sowas wie Teal, es gibt aber, das sind jetzt die Verrückten, wir haben jetzt mit den Verrückten angefangen.

00:39:32.940 --> 00:39:38.700
 Es gibt aber auch so die ganz klassischen Farbnamen, White, Black, Blue, Brown, Yellow und so weiter.

00:39:38.700 --> 00:39:46.500
 Das ist so die erste, die einfachste Variante, glaube ich, wie man in den CSS Farben anziehen kann, ist, dass man einfach diese Farbnamen verwendet.

00:39:46.500 --> 00:39:54.040
 Das erinnert mich schon wieder an mein Data-Backer-Buch, mit dem ich HTML gelernt habe, irgendwann in den 90ern.

00:39:54.040 --> 00:39:59.200
 Da war auch so eine Tabelle, wo man die ganzen Farbnamen aufgelistet bekommen hat.

00:39:59.200 --> 00:40:05.560
 Jetzt, wo du die gerade wieder sagst, weil ich glaube auch, seitdem ich dann RGB-Hacks-Werte kennengelernt habe, habe ich das auch tatsächlich nicht mehr benutzt.

00:40:05.560 --> 00:40:08.780
 Und deswegen erinnert mich das gerade an die alte Zeit.

00:40:08.780 --> 00:40:10.580
 Aber jetzt fangen wir schon wieder an, in alten Zeiten zu schwelgen.

00:40:10.580 --> 00:40:14.100
 Ja, da sind wir irgendwie, irgendwie sind wir heute so auf der Vergangenheit hängen wir da irgendwie.

00:40:14.500 --> 00:40:20.220
 Ja, genau, da fällt mir zu alten Zeiten noch ein, Web-Safe-Colors, also web-sichere Farben, gab es ja irgendwie auch noch so.

00:40:20.220 --> 00:40:28.100
 Man konnte zwar eine Zeit lang sehr, sehr viele Farben auswählen, aber es hieß dann, naja, aber man soll nur dieses Subset nehmen, weil die anderen sind nicht Web-Safe.

00:40:28.100 --> 00:40:30.760
 Kann man heute auch noch bei Photoshop anschalten?

00:40:30.760 --> 00:40:32.100
 Tatsächlich.

00:40:32.100 --> 00:40:41.460
 Also zumindest ging es bis vor zwei Versionen oder sowas noch, ich habe jetzt nicht mehr nochmal nachgeguckt, aber da konnte man immer noch sagen, hier, nur Web-Safe-Farben im Color-Picker darstellen, bitte.

00:40:41.460 --> 00:40:58.920
 Ja, okay, gut, gehen wir eine Stufe schwieriger oder eine Stufe komplexer, als einfach nur einen Farbnamen reinschreiben, weil das, ich glaube, die sind zwar fest definiert, das heißt, wenn ich jetzt Blue rein, na gut, Blue ist jetzt vielleicht ein schlechtes Beispiel, wenn ich jetzt Peach-Puff reinschreibe, glaube ich, kriege ich auch in jedem Browser das Gleiche.

00:40:59.400 --> 00:41:19.060
 Aber trotzdem, manchmal darf es ja auch ein bisschen mehr Präzision sein, ich möchte eine genaue Farbe haben, also nicht einfach nur FF-0000, damit sind wir nämlich schon bei Hex, Hexadezimalfarben, beziehungsweise, naja, letzten Endes sind es genau die gleichen Farben, es ist nur eine andere Bezeichnung dafür oder ein anderer Weg zu beschreiben.

00:41:21.400 --> 00:41:41.180
 Maximal, das ist quasi, naja, das sind am Ende immer noch Zahlen, aber der Zahlenraum geht halt nicht von 0 bis 9, sondern von 0 bis F, also 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, also ich habe pro Zeichen 16 verschiedene Werte, die ich wählen kann.

00:41:41.520 --> 00:41:51.940
 Daraus ergibt sich dann, wenn ich 256 verschiedene Werte haben will pro Farbe, wie wir vorhin gesagt haben, für Rot, Grün und Blau, dass ich zwei Zeichen dafür brauche.

00:41:51.940 --> 00:42:03.760
 Also ich habe dann zum Beispiel FF-0000 wäre halt ein Knallrot, also voll Rot und 0 Grün und 0 Blau.

00:42:03.760 --> 00:42:11.880
 Genau, also vielleicht noch, wenn jemand Hex jetzt nicht so geläufig ist, also 255 wäre dann FF und 0 logischerweise 0.

00:42:11.880 --> 00:42:24.620
 Genau, da gibt es auch lustige Kombinationen, da man ja dann Zahlen und Buchstaben hat, gibt es Leute, die sagen, naja, da kann man doch bestimmt irgendwie lustige Wörter damit schreiben.

00:42:24.640 --> 00:42:26.680
 Also Coffee ist zum Beispiel Türkis.

00:42:26.680 --> 00:42:30.160
 Schade, dass es nicht gerade braun ist, aber.

00:42:30.160 --> 00:42:38.920
 Also Chrome hatte in seinen DevTools mal als Standardwert, da drinstehen, DA-Code, also D-A-C-0-D-E.

00:42:38.920 --> 00:42:48.000
 Aber logischerweise kann man nur Worte schreiben, die irgendwie bis F gehen, beziehungsweise wenn man noch einzelne Zahlen dazwischen tut, die aussehen wie Buchstaben,

00:42:48.000 --> 00:42:50.660
 dann kann man noch ein bisschen mehr schreiben, wie in dem Fall das 0 als O.

00:42:50.660 --> 00:42:57.760
 Genau, jetzt gibt es verschiedene Möglichkeiten, Hexfarben zu schreiben.

00:42:57.760 --> 00:43:05.260
 Also ich kann tatsächlich die sechs Stellen ausnutzen, also zwei Stellen pro Farbe, also Rot, Grün und Blau.

00:43:05.260 --> 00:43:11.900
 Ich kann aber auch sogenannte Shortcodes benutzen, also statt FF-0000 kann ich zum Beispiel auch schreiben F00.

00:43:13.960 --> 00:43:19.500
 Das geht dann noch weiter, wenn ich Transparenzen hinzufügen will.

00:43:19.500 --> 00:43:24.900
 Jetzt bin ich gespannt, jetzt kommt der erste Punkt, wo ich nicht weiß, ob das jeder schon wusste.

00:43:24.900 --> 00:43:30.900
 Mir ist das mal in Inkscape über den Weg gelaufen und ich dachte dann, naja, Inkscape Vektor-Grafikprogramm,

00:43:30.900 --> 00:43:37.900
 kann sein, dass das irgendwie ein Standard ist in SVG, weil das am Ende seine Daten in SVG speichert.

00:43:37.900 --> 00:43:39.740
 Muss ja nicht sein, dass es im Browser funktioniert.

00:43:39.740 --> 00:43:43.100
 Ich habe es dann in diversen Browsern mal ausprobiert und war erstaunt, dass es geht.

00:43:43.700 --> 00:43:51.100
 Also ich habe später noch die Can-I-Use-Statistik für die einzelnen Notationsmöglichkeiten für die Farben.

00:43:51.100 --> 00:43:53.040
 Bin ich gespannt, ob die dabei ist.

00:43:53.040 --> 00:43:57.140
 Kennst du die Hex-Notation mit Transparenz dabei?

00:43:57.140 --> 00:43:57.480
 Ja.

00:43:57.480 --> 00:43:58.860
 Gut.

00:43:58.860 --> 00:44:00.640
 Nein, nicht gut.

00:44:00.640 --> 00:44:04.760
 Aber auch tatsächlich ursprünglich aus Inkscape, also in dem Zusammenhang auch das erste Mal.

00:44:05.420 --> 00:44:06.320
 Ja, genau.

00:44:06.320 --> 00:44:18.260
 Also ich kann zum Beispiel, also Transparenzwert ist im Prinzip normalerweise nochmal ein Wert zwischen 0 und 100 Prozent oder in dem Fall, wenn ich Hex habe, zwischen 0 und 256, also genauso zwischen 0, 0 und FF.

00:44:18.940 --> 00:44:26.140
 Und da kann ich dann zum Beispiel auch, also genau, 0 wäre dann komplett transparent und F wäre komplett sichtbar.

00:44:26.740 --> 00:44:31.060
 Das hätte ich da dann noch dabei, also der Alpha Channel sozusagen von der Farbe.

00:44:31.060 --> 00:44:37.940
 Das Ganze geht auch als Shortcode, also das wäre dann ein vierstelliger Shortcode, also zum Beispiel D0C4.

00:44:38.580 --> 00:44:40.340
 Weiß ich jetzt nicht genau, was für eine Farbe das ist.

00:44:40.340 --> 00:44:49.060
 F004 wäre ein sehr schwaches Rot, was dann vom Hintergrund abhängt, wie das dann genau aussieht.

00:44:49.060 --> 00:45:04.840
 Dann gibt es die RGB-Schreibweise dafür, also da ist dann kein Hex-Wert mehr, aber es ist immer noch RGB, also ich schreibe RGB-Klammer auf und dann kommen drei Werte, beziehungsweise es gibt es auch mit Vieren, wiederum für die Transparenz.

00:45:05.740 --> 00:45:10.440
 Und da würde ich gerne wissen, ob du da wusstest, dass es da auch zwei verschiedene Schreibweisen gibt.

00:45:10.440 --> 00:45:21.900
 Ja genau, es gibt einmal RGB-A explizit mit Transparenz und auch der funktionale RGB-Aufruf unterstützt aber in bestimmten Browsern einen Alpha-Wert.

00:45:21.900 --> 00:45:25.960
 Da ist aber, das nehme ich vielleicht schon mal weg, die Abdeckung ist…

00:45:25.960 --> 00:45:26.860
 Aber da gibt es nochmal zwei verschiedene.

00:45:26.860 --> 00:45:31.680
 Ach, gibt es auch nochmal, okay, dann gehe ich nachher auf die Verbreitung ein.

00:45:32.280 --> 00:45:41.260
 Es gibt eine Komma-Schreibweise, also RGB 255,0,153,1 oder so.

00:45:41.260 --> 00:45:51.000
 Moment, nee, die 1 am Ende nochmal vergessen, also 255,0,153 oder 255,0,0 oder so, das wäre dann wieder das Rot.

00:45:53.100 --> 00:45:57.500
 Mit Kommas dazwischen, es gibt aber auch eine Variante ohne Komma mit Leerzeichen.

00:45:57.500 --> 00:46:01.640
 Das war mir nicht bekannt, bis ich die MDN gelesen habe.

00:46:01.640 --> 00:46:02.480
 Okay, das wusste ich auch nicht.

00:46:02.480 --> 00:46:05.680
 Weißt du, wie da die Unterstützung ist, ob das überall funktioniert?

00:46:05.680 --> 00:46:08.060
 Ich habe es nur in Firefox ausprobiert, da hat es funktioniert.

00:46:09.900 --> 00:46:23.480
 Interessant ist, dass es offenbar laut MDN auch, dass ich da auch ein Alpha-Channel schon mit dazuschreiben darf, obwohl nur RGB vorne steht, nämlich mit Slash und dann der Alpha-Wert, der dann halt zwischen 0 und 1 ist irgendwo.

00:46:25.500 --> 00:46:32.740
 Das Ganze, man kann den Alpha-Wert interessanterweise auch mit Prozent schreiben, also zwischen 0 und 100 Prozent in dieser Schreibweise.

00:46:32.740 --> 00:46:37.900
 Und dann gibt es noch was ganz Abgefahrenes, wo ich nicht ganz 100 Prozent verstanden habe, wie es funktioniert.

00:46:37.900 --> 00:46:41.500
 Falls es jemand verstanden hat, der zuhört, ihr dürft mir da gerne mal schreiben.

00:46:41.500 --> 00:46:45.300
 Und zwar, ich lese einfach jetzt mal vor, was für ein Beispiel ich da gefunden habe.

00:46:45.300 --> 00:47:00.560
 Und zwar RGB, Klammer auf, 1E2, Leerzeichen 0,5E1, 0,5E0, plus 0,25E2 Prozent, Klammer zu.

00:47:00.560 --> 00:47:01.660
 Ja.

00:47:01.660 --> 00:47:09.420
 Ist das nicht irgendwie Exponential, aber warum sollte man das tun wollen?

00:47:09.420 --> 00:47:11.400
 Ja, genau, das habe ich auch gedacht.

00:47:12.040 --> 00:47:14.800
 Aber ja, ihr könnt ja gerne mal in MDN reinschauen.

00:47:14.800 --> 00:47:17.180
 So tief wollte ich dann doch nicht reinlesen.

00:47:17.180 --> 00:47:21.120
 Aber ich fand es echt interessant, dass es da einige Schreibweisen gibt, die ich noch nie gesehen habe.

00:47:21.120 --> 00:47:25.260
 An der Stelle noch mein Proposal, was ich mal hatte.

00:47:25.260 --> 00:47:30.480
 Ich hätte ja gerne auch einen Shortcode, den es nicht gibt mit Hex.

00:47:30.480 --> 00:47:33.360
 Und zwar hätte ich nämlich gerne einen zweistelligen Shortcode mal gehabt.

00:47:33.360 --> 00:47:36.520
 Kannst du dir vorstellen, was der dann tut?

00:47:36.520 --> 00:47:37.580
 Der dann nie aufgelöst wird? Nee.

00:47:37.580 --> 00:47:39.640
 Naja, der macht am Ende nur Grauwerte.

00:47:40.080 --> 00:47:42.960
 Und zwar ist das dann dreimal der gleiche zweistellige Wert.

00:47:42.960 --> 00:47:46.420
 Also wenn ich jetzt zum Beispiel D3 schreibe, wäre das dann D3, D3, D3.

00:47:46.420 --> 00:47:49.180
 Fände ich cool, muss aber nicht sein.

00:47:49.180 --> 00:47:56.220
 Würde sich aber auch beißen mit der Alpha-Variante, weil dann wäre, glaube ich, nicht mehr klar, was was ist.

00:47:57.980 --> 00:48:01.260
 Hast du mal ausprobiert, was passiert, wenn du zweistellige Werte nimmst?

00:48:01.260 --> 00:48:03.940
 Nee, habe ich ehrlich gesagt nicht ausprobiert.

00:48:03.940 --> 00:48:04.740
 Machen wir mal schnell.

00:48:04.740 --> 00:48:06.420
 Genau.

00:48:06.420 --> 00:48:08.840
 Ganz am Ende noch zu erwähnen.

00:48:08.840 --> 00:48:11.260
 Ich habe vorhin gesagt, passiert nichts.

00:48:13.900 --> 00:48:16.380
 Ich habe vorhin gesagt, man kann lustige Wörter damit schreiben.

00:48:16.380 --> 00:48:23.000
 Es gibt eine Seite, die sich dem verschrieben hat, lustige Farbcode-Wörter zu sammeln, also die tatsächlich Hex sind.

00:48:23.800 --> 00:48:29.880
 Und die heißt Badass.io, beziehungsweise B-A-D-A-5-5.io.

00:48:29.880 --> 00:48:33.460
 Und da gibt es lustige Wörter, die man mit Hex-Werten schreiben kann.

00:48:33.460 --> 00:48:43.960
 Zum Beispiel Idiots, Boobs, FBI, LOL, Diesel, Coffee hatten wir vorhin schon, Failed-Ass und Oracle.

00:48:43.960 --> 00:48:48.480
 Eines sind noch einige mehr, aber das verlinken wir mal in den Show Notes.

00:48:48.480 --> 00:48:50.980
 Das ist ganz witzig, da reinzugucken. Das ist eine ganz coole Idee.

00:48:50.980 --> 00:48:54.480
 Genau, RGBA sind wir vorhin schon drauf eingegangen.

00:48:54.480 --> 00:48:56.160
 Vielleicht willst du was zur RGBA sagen?

00:48:56.160 --> 00:49:01.220
 Nee, ich habe, wie gesagt, dann später noch einfach die Auflistung, was wie unterstützt wird.

00:49:02.280 --> 00:49:04.660
 Okay, dann erzähle ich kurz was zur RGBA.

00:49:04.660 --> 00:49:09.320
 RGBA ist explizit mit Alpha-Kanal, also mit der Transparenz noch mit dabei.

00:49:09.320 --> 00:49:17.760
 Das wäre dann in dem Fall, ich schreibe RGBA, Klammer auf, 255, 255, 255.3 oder so.

00:49:17.760 --> 00:49:19.280
 Dann hätte ich 30-prozentiges Weiß.

00:49:19.280 --> 00:49:24.420
 Was es aber da auch gibt, was mir dann auch zum ersten Mal begegnet ist,

00:49:24.420 --> 00:49:26.800
 ist, dass ich da auch Prozentzahlen schreiben könnte.

00:49:26.800 --> 00:49:33.420
 Also ich kann schreiben RGBA, Klammer auf, 100%, 0%, 0%, 0%, 50% oder so.

00:49:33.420 --> 00:49:40.260
 Also sowohl bei den Farbwerten als auch bei den Transparenzwerten kannst du auch mit Prozent arbeiten.

00:49:40.260 --> 00:49:40.860
 Ja, bei allen.

00:49:40.860 --> 00:49:43.100
 Aber ich glaube, ich darf sie nicht mischen.

00:49:43.100 --> 00:49:45.460
 Also wenn, dann muss ich mich für eins entscheiden.

00:49:45.460 --> 00:49:46.460
 Ja, macht auch Sinn.

00:49:47.460 --> 00:49:48.140
 Ja, genau.

00:49:48.140 --> 00:49:51.480
 Aber das fand ich ganz interessant, weil, also ich meine, klar, damit kriegt man nicht so,

00:49:51.480 --> 00:49:53.600
 wahrscheinlich nicht so genau den präzisen Wert hin.

00:49:53.600 --> 00:49:57.020
 Oder da müsste man vielleicht so mit komischen Kommaprozentzahlen arbeiten,

00:49:57.020 --> 00:49:58.380
 um dann einen genauen Wert zu kriegen.

00:49:58.840 --> 00:50:03.320
 Aber so, wenn man, wenn es einem nicht so wichtig ist, dass genau exakt die gleiche Farbe am Ende rauskommt,

00:50:03.320 --> 00:50:05.340
 finde ich dieses Prozentmodell eigentlich ganz nett.

00:50:05.340 --> 00:50:09.020
 Also da kann man, glaube ich, ganz, ganz nett mit rumspielen.

00:50:09.020 --> 00:50:14.240
 Da gerade, wenn man Farben irgendwie dynamisch generiert oder gestaltet oder miteinander mischt oder was weiß ich,

00:50:14.240 --> 00:50:16.820
 dass man da dann eher mit Prozentwerten spielt vielleicht.

00:50:16.820 --> 00:50:22.060
 Also wenn ich jetzt irgendwie eine Farbpalette zusammenstellen will oder was weiß ich.

00:50:22.060 --> 00:50:27.060
 Aber da kommen wir vielleicht auch später noch im Zuge von diesem neuen Farbsystem drauf.

00:50:27.060 --> 00:50:31.340
 Ja, also ich erzähle jetzt, ja, ich mache nochmal kurz ein bisschen weiter.

00:50:31.340 --> 00:50:32.520
 Und zwar, was gibt es denn noch?

00:50:32.520 --> 00:50:35.860
 Also ich komme jetzt dann, also RGBA abgehandelt, eigentlich relativ easy.

00:50:35.860 --> 00:50:39.500
 Wie gesagt, zum RGB kommt einfach nur der Alpha-Kanal, also die Transparenz noch mit dazu.

00:50:39.500 --> 00:50:44.520
 Dann gibt es noch das Farbsystem HSL, beziehungsweise HSLA.

00:50:45.040 --> 00:50:54.920
 Das steht für Hue, Saturation und Lightness, also Farbton, Farbsättigung und Helligkeit.

00:50:54.920 --> 00:50:58.160
 Und ebenfalls eben noch das A, halt wieder für den Alpha-Kanal.

00:50:58.160 --> 00:51:03.220
 Letzten Endes ist das nur eigentlich ein anderer Weg, die gleichen Farben zu beschreiben wie in RGB.

00:51:04.640 --> 00:51:15.880
 Das kann dann zum Beispiel so aussehen, HSLA, Klammer auf, 270,60%, 50,15% oder so.

00:51:15.880 --> 00:51:22.760
 Sieht sehr ähnlich aus wie das, wie RGB, beziehungsweise RGBA von der Schreibweise her.

00:51:22.760 --> 00:51:29.400
 Ist aber ganz interessant, weil man vermeintlich da dann zum Beispiel einfach nur die Helligkeit von der Farbe anpassen kann.

00:51:29.400 --> 00:51:32.740
 Aber da kommen wir später noch dazu, ob das wirklich gut funktioniert.

00:51:32.740 --> 00:51:35.320
 Also man kann dann theoretisch sagen, naja, ich will den gleichen Farbton haben,

00:51:35.320 --> 00:51:39.440
 aber in zwei verschiedenen Helligkeiten oder in zwei verschiedenen Sättigungen und muss dafür nur einen Wert ändern.

00:51:39.440 --> 00:51:42.040
 Das geht mit RGBA so an der Stelle nicht.

00:51:42.040 --> 00:51:46.280
 Ich glaube, wir müssen uns ein bisschen beeilen.

00:51:46.280 --> 00:51:48.040
 Ich darf nicht so viel jetzt so altes Zeug erzählen.

00:51:48.040 --> 00:51:49.400
 Ja, wir gehen schon sehr in die Tiefe, ja.

00:51:49.400 --> 00:51:53.900
 Aber wie gesagt, es hören uns ja auch Leute unterschiedlichster Kenntnisstände zu.

00:51:53.900 --> 00:51:56.240
 Und von daher ist das vielleicht gar nicht schlecht.

00:51:56.240 --> 00:51:57.800
 Man kann es ja auch überspulen ein bisschen.

00:51:57.800 --> 00:52:00.520
 Ja, nein, nicht überspulen, auf keinen Fall.

00:52:00.520 --> 00:52:01.820
 Jede Sekunde ist wertvoll.

00:52:01.820 --> 00:52:02.900
 Einfach doppelt so schnell anhören?

00:52:02.900 --> 00:52:08.480
 Nee, halb so schnell, weil jede Sekunde hast du doppelt so viel von jeder Sekunde.

00:52:08.480 --> 00:52:13.320
 Ich versuche auch ein bisschen schneller zu reden, damit sich auf keinen Fall auf die Idee kommt,

00:52:13.320 --> 00:52:15.880
 das irgendwie viel zu schnell anzuhören, weil dann versteht man einfach nichts mehr.

00:52:16.720 --> 00:52:27.020
 Ja, also was mir noch aufgefallen ist, was ich selten benutze, aber was immer wieder interessant ist, dass es das gibt.

00:52:27.020 --> 00:52:30.580
 Es gibt natürlich noch so Farbschlüsselwörter, nenne ich das mal.

00:52:30.580 --> 00:52:36.700
 Wenn du jetzt Color hast, Color in CSS Transparent, das ist wahrscheinlich so das Prominenteste an der Stelle.

00:52:36.700 --> 00:52:39.520
 Aber es gibt zum Beispiel auch sowas wie Current Color.

00:52:40.480 --> 00:52:41.940
 Kennst du das, Current Color?

00:52:41.940 --> 00:52:44.720
 Kannst du kurz erklären, wie es funktioniert?

00:52:44.720 --> 00:52:47.420
 Oh je, jetzt bringst du mich über hier.

00:52:47.420 --> 00:52:48.940
 Okay, dann erklär, kein Problem.

00:52:48.940 --> 00:52:52.220
 Wenn du es vorbereitet hast, erklär es lieber du, bevor ich irgendwie Schluss erzähle.

00:52:52.220 --> 00:52:54.880
 Aber ja, ich verstehe das Konzept dahinter.

00:52:54.880 --> 00:52:56.240
 Ich habe es auch schon eingesetzt.

00:52:57.080 --> 00:53:03.140
 Also wenn ich zum Beispiel, ich bin gerade mal überlegen, was ein sinnvolles Beispiel wäre dafür.

00:53:03.140 --> 00:53:06.820
 Current Color ist im Prinzip einfach die Farbe, die der Text hat an der Stelle.

00:53:06.820 --> 00:53:15.600
 Also wenn ich einen Selektor habe und der hat normalerweise immer eine Color gesetzt, im Zweifel ist es halt die Default Color, das ist dann genau diese Farbe.

00:53:15.600 --> 00:53:17.200
 Automatisch zieht das das mit an.

00:53:17.200 --> 00:53:30.500
 Nehmen wir zum Beispiel mal an, ich hätte einen Button im Fließtext, der standardmäßig irgendwie grüne Schriftart hat und ich möchte das mit einer CSS-Regel überschreiben und möchte, dass der Button im Fließtext die Textfarbe annimmt.

00:53:30.500 --> 00:53:36.220
 Dann würde ich da eine spezielle Klasse setzen, die dann eben die Current Color setzt als Textfarbe.

00:53:37.280 --> 00:53:42.200
 Ja, aber wenn ich ein Button-Element habe, hat das ja auch schon eine Standard-Textfarbe.

00:53:42.200 --> 00:53:44.880
 Wahrscheinlich funktioniert das an der Stelle nicht.

00:53:44.880 --> 00:53:47.540
 Ich habe das mal eingesetzt für SVGs.

00:53:47.540 --> 00:53:50.380
 Das war mal so ein Hack.

00:53:50.380 --> 00:54:00.960
 Also Current Color ist da, kann ich jetzt auch nicht so tief drauf eingehen, war da ein Hack, um zwei verschiedene Farbe an SVG zu übergeben, nur mit CSS.

00:54:01.320 --> 00:54:16.500
 Also ich kann, der ein oder andere wird es wissen, der schon mal irgendwie SVG-Icons eingebunden hat, ich kann bei SVG-Icons normalerweise, wenn ich die Farbe davon bestimmen will, mache ich das mit Fill und dann gebe ich die Farbe an.

00:54:16.500 --> 00:54:20.260
 Jetzt möchte ich aber vielleicht noch eine zweite Farbe übergeben.

00:54:20.260 --> 00:54:24.320
 Ich will jetzt nicht, dass das Icon nur eine Farbe hat, aus irgendeinem Grund brauche ich jetzt zwei verschiedene Farben.

00:54:25.020 --> 00:54:28.920
 Und dann kann man das mit Current Color noch machen, weil die kann man da drin nämlich auch ansprechen.

00:54:28.920 --> 00:54:31.340
 Das war mein Anwendungsfall, wofür ich das mal gebraucht habe.

00:54:31.340 --> 00:54:44.360
 Und dann auch, was ich auch irgendwie noch wusste, was es noch gibt in Bezug auf Farben und wie kann ich den Farben benennen, war, dass es System Colors gibt, die man ansprechen kann.

00:54:44.360 --> 00:54:50.620
 Wie da die Verbreitung ist, wie das in den Browsern unterstützt ist, habe ich überhaupt gar keine Ahnung, weil ich das noch nie eingesetzt habe.

00:54:50.620 --> 00:55:03.120
 Aber man kann sowas wie Background oder Window Text als Farbnamen hinterlegen und dann Background zum Beispiel soll den Desktop Background, die Desktop Background Farbe annehmen.

00:55:03.120 --> 00:55:12.860
 Window Text wäre die normale Fließtext Farbe in Windows zum Beispiel vom System selbst, also außerhalb vom Browser, was da eingestellt ist.

00:55:12.860 --> 00:55:19.620
 Aber wie weit das wirklich funktioniert und unterstützt wird, habe ich keine Ahnung, aber das findet man da auch noch in der Speck, beziehungsweise bei MDN.

00:55:19.620 --> 00:55:23.820
 Bei Kinder Use habe ich jetzt nichts dazu gefunden, aber dann lese die Speck.

00:55:23.820 --> 00:55:32.820
 Genau, lese die Speck, also die Speck oder halt diese wunderbare MDN-Seite, wo diese ganzen schönen Farbbeispiele mit drauf sind.

00:55:34.040 --> 00:55:37.540
 Okay, damit bin ich, mit dem Grundlagen bin ich damit fertig.

00:55:37.540 --> 00:55:39.440
 Jetzt lass uns ein bisschen...

00:55:39.440 --> 00:55:44.640
 Lass uns mal auf den Artikel im Speziellen eingehen, der ja eigentlich unsere Ausgangslage war.

00:55:44.640 --> 00:55:49.240
 Und zwar stellt Elia Verruda den LCH Farbraum vor.

00:55:49.240 --> 00:55:53.500
 Und das steht im Gegensatz zu HSL für Lightness, Chroma und U.

00:55:53.860 --> 00:56:01.000
 Das heißt, U und Lightness haben wir auch wieder wie bei HSL, es funktioniert aber ein bisschen anders als bei HSL.

00:56:01.000 --> 00:56:03.440
 Und warum braucht man das überhaupt?

00:56:03.440 --> 00:56:07.180
 Warum muss man jetzt schon wieder einen neuen Farbraum da implementieren?

00:56:07.180 --> 00:56:16.540
 Die Sache ist die, dass die Bildschirme in ihrer Darstellbarkeit und in dem Umfang der Farbräume mit den Jahren immer besser geworden sind

00:56:16.540 --> 00:56:19.900
 und immer kräftigere Farben darstellen können, immer mehr Farben darstellen können.

00:56:19.900 --> 00:56:28.620
 Aber im CSS haben wir aktuell keine Möglichkeit, diese alle darzustellen, sondern uns fehlt ein Drittel des aktuell möglichen Farbraums.

00:56:28.620 --> 00:56:30.560
 Und das ist schon eine ganze Menge.

00:56:30.560 --> 00:56:38.000
 Und das sind nicht irgendwelche Farben, die da fehlen, sondern das sind besonders die brillantesten Farben, die wir darstellen können.

00:56:38.000 --> 00:56:39.580
 Und das ist natürlich schade.

00:56:40.140 --> 00:56:53.300
 Das heißt, Webseiten sehen aktuell viel, ja, trister, dekolorierter aus, als es eigentlich, ja, flacher, langweiliger vielleicht auch, weniger brillant auf jeden Fall, als es aktuell technisch schon darstellbar wäre.

00:56:53.300 --> 00:56:56.140
 Also auf neuen Monitoren, das muss man dazu sagen.

00:56:56.140 --> 00:57:02.600
 Also es geht da so um HDR-Farbraummonitore, die mehr darstellen können als nur den sRGB-Farbraum.

00:57:02.600 --> 00:57:07.860
 Genau, also nur weil das jetzt eingeführt wird, heißt das natürlich nicht, dass ich jetzt auf jedem Monitor plötzlich brillantere Farben habe,

00:57:07.860 --> 00:57:12.460
 sondern wenn der Monitor das technisch überhaupt nicht darstellen kann, dann habe ich dadurch natürlich nichts gewonnen.

00:57:12.460 --> 00:57:18.820
 Aber es geht eben darum, die Farben ansprechen zu können auf den Bildschirmen, wo sie auch tatsächlich darstellbar sind.

00:57:19.020 --> 00:57:24.560
 Und das geht aktuell nicht, weil die Farbräume beschränkt sind auf sRGB, auf den Farbraum.

00:57:24.560 --> 00:57:32.020
 Und da gibt es eben jetzt diese Spezifikation, die geschrieben wurde, um diesen neuen Farbraum einzuführen.

00:57:32.020 --> 00:57:39.900
 Und es ist so, dass Safari aktuell schon kurz davor ist oder am Implementieren schon ist.

00:57:39.900 --> 00:57:43.460
 Also es ist noch nicht im Browser drin, aber es wird wohl daran gearbeitet aktiv.

00:57:44.300 --> 00:57:49.700
 Chrome hat es auf jeden Fall vor zu implementieren und bei Firefox, da ist man noch am diskutieren.

00:57:49.700 --> 00:57:55.960
 Aber ich denke mal, wenn Safari und Chrome da schon mal vorgezogen sind, dann wird das nicht lange dauern, bis Firefox da mitzieht.

00:57:55.960 --> 00:57:58.820
 Ja, also denke ich auch.

00:57:58.820 --> 00:58:04.740
 Also das ist auf jeden Fall, es ist eine Sache, wo ich mir sehr wünsche, dass das schnell irgendwie umgesetzt wird,

00:58:04.740 --> 00:58:08.160
 auch wenn das jetzt momentan noch in einem starken Anfangsstadium ist.

00:58:09.420 --> 00:58:16.760
 Ja, also ich glaube, ich weiß gar nicht, was für ein Stadium dieser Draft da ist, der da gerade geschrieben wird von W3C, aber es wird Zeit.

00:58:16.760 --> 00:58:21.460
 Ich kann gar nicht verstehen oder mir war gar nicht klar, dass das bis die ganze Zeit gar nicht ging,

00:58:21.460 --> 00:58:29.080
 dass man da im Browser ganz viele Farben gar nicht darstellen kann, die dann, nehme ich mal an, Video einfach schon kann.

00:58:29.140 --> 00:58:35.980
 Ich weiß das gar nicht genau. Also es muss ja, weißt du zufällig, was diverse Videoformate für Farbräume unterstützen?

00:58:35.980 --> 00:58:43.720
 Och nee, da bin ich auch überfragt. Also es kann sein, dass vielleicht, ich weiß nicht, ob das jetzt vom Codec an sich dann auch abhängt.

00:58:43.720 --> 00:58:52.100
 Also vielleicht kann H.265, was ja auch für HDR-Video meines Wissens eingesetzt wird, wahrscheinlich kann das auch einen höheren Farbraum umsetzen.

00:58:52.340 --> 00:59:02.220
 Ob man jetzt in einem normalen H.264-Video irgendwie den Farbraum schon beeinflussen kann, gehe ich mal nicht davon aus, weil das existiert ja jetzt auch schon einige Zeit.

00:59:02.220 --> 00:59:10.600
 Aber das ist eine gute Frage, ja. Also ich meine, es muss ja die Möglichkeit schon geben, per Videoformaten HDR-Bildschirme anzusprechen.

00:59:10.600 --> 00:59:15.660
 Und auch die Streaming-Anbieter bieten das ja teilweise an, nicht nur VK, sondern auch HDR anzusprechen.

00:59:15.760 --> 00:59:20.220
 Das heißt, es muss auf jeden Fall technisch möglich sein. Und ich denke mal, dass das mit H.265 dann realisiert wird.

00:59:20.220 --> 00:59:26.460
 Ja, genau. Also irgendwo muss es das schon geben, weil sonst wären die Monitore ja ziemlich sinnlos.

00:59:26.460 --> 00:59:35.080
 Oder sie würden halt versuchen, alles irgendwie zu interpolieren auf den Farbraum, den sie unterstützen, was aber dann irgendwie auch, naja, wahrscheinlich immer mehr oder weniger gut funktioniert.

00:59:35.080 --> 00:59:43.800
 Genau. Ich wollte mal kurz auf die Begrifflichkeiten eingehen. Ich weiß gar nicht, hast du schon gesagt, was die Abkürzung LCH ist?

00:59:43.800 --> 00:59:45.960
 Genau, also Lightness, Chroma und U.

00:59:45.960 --> 00:59:47.560
 Lightness, Chroma und U.

00:59:47.560 --> 00:59:51.820
 Also Helligkeit, Farbsättigung und Farbton auf Deutsch.

00:59:51.820 --> 01:00:00.480
 Ja, genau. Klingt erstmal ein bisschen nach HSL. Ist es aber nicht, weil HSL ja wie gesagt nur den normalen Standard-SRGB-Farbraum abdeckt.

01:00:02.000 --> 01:00:13.300
 Was das Besondere ist an dem Farbraum, wenn ich das richtig verstanden habe, ist, dass der versucht zum ersten Mal nicht an der Technik ausgerichtet sein, sondern daran, was man sehen kann oder was das Auge wahrnehmen kann, wie das Sehen funktioniert.

01:00:15.200 --> 01:00:33.640
 Also, bei manchen Farben können wir einfach viel mehr als 256 verschiedene Abstufungen sehen und bei manchen eben nicht. Da sind ein paar Beispiele in einem Artikel. Ich glaube, das ist am besten, wenn man sich das anschaut. Das ist jetzt schwer zu beschreiben. Einfach mal den Artikel in den Shownotes verlinkt mal anschauen.

01:00:33.640 --> 01:00:44.080
 Genau, auf jeden Fall. Die Diagramme sind sehr interessant, die sie da eingebaut hat. Und das lässt sich natürlich jetzt per Audio in einem Podcast schlecht beschreiben, was da alles genau zu sehen ist.

01:00:44.080 --> 01:01:02.520
 Ja, also ich wollte noch auf die Werte kurz eingehen, die das annehmen kann. Also LCH, das finde ich nämlich auch ganz interessant. Also Lightness ist ziemlich, also war mir eigentlich auch klar, als ich es gelesen habe, das ist halt die Helligkeit, also ein Wert von 0 und 100, zwischen 0 und 100 Prozent.

01:01:02.520 --> 01:01:12.400
 Also 0 ist komplett schwarz und 100 Prozent, oder ja, doch ist komplett schwarz und 100 Prozent ist halt voll aufgedreht. Also volle Helligkeit müsste dann bei weiß landen.

01:01:12.400 --> 01:01:31.820
 Dann springe ich mal weiter zu Hue und lasse das Chroma mal kurz aus, weil das ist eigentlich das Interessante daran. Hue, wer Farbkreise kennt, Hue wird mit einem Grad angegeben. Also auf dem 360 Grad Farbkreis kann ich 360 verschiedene Farbtöne haben. Also von 0 bis 360, beziehungsweise ich bin mir gar nicht sicher.

01:01:31.820 --> 01:01:37.540
 Vielleicht gibt es auch Komma-Werte, dann gibt es auch noch was dazwischen. Auf jeden Fall bewegen sich die Hue-Werte zwischen 0 und 360.

01:01:37.540 --> 01:01:49.580
 Und da muss man auch sagen, auch da gibt es schon einen Unterschied zu HSL, obwohl sich beides Hue nennt. Aber bei HSL ist ein Hue-Wert von 0 ein Rot und bei LCH ist es eher so in Richtung Magenta.

01:01:50.740 --> 01:01:52.820
 Also da kann man nicht einfach die Grad-Werte übernehmen.

01:01:52.820 --> 01:02:11.080
 Ja, genau. Chroma ist interessant deswegen, weil in dem Artikel steht explizit, dass der Wert im Prinzip kein Ende hat, also dass der keinen Höchstwert hat. Moment, jetzt muss ich gerade nochmal zu dem entsprechenden Punkt springen.

01:02:11.080 --> 01:02:17.200
 Genau. Also hier steht explizit, Chroma is theoretically unbounded. Also das hat keinen Maximalwert.

01:02:18.440 --> 01:02:25.560
 Und der Chroma-Wert ist wahrscheinlich auch von Farbe zu Farbe unterschiedlich. Auf jeden Fall hängt er aber auch am Display, was das überhaupt darstellen kann.

01:02:25.560 --> 01:02:31.060
 Wie hell kann oder wie gesättigt kann denn eine Farbe überhaupt auf dem Display dargestellt werden?

01:02:31.400 --> 01:02:38.120
 Ich gehe jetzt mal davon aus, wenn ich den Wert zu hoch schraube, dann wird wahrscheinlich das Display auf den höchsten Wert zurückfallen, was es hat.

01:02:38.120 --> 01:02:48.200
 Ja, aber ist auf jeden Fall eine interessante Geschichte, weil sowas kenne ich bisher irgendwie von Farben noch nicht, dass man sagt, naja, einen Wert, den kannst du dir irgendwie aussuchen.

01:02:48.200 --> 01:02:51.840
 Da kannst du irgendwie, kannst du mal ausprobieren, kannst du mal gucken, wie hoch du gehen kannst.

01:02:51.940 --> 01:03:03.000
 Also das kann ich noch nicht so ganz greifen, was dann damit möglich ist. Aber ich glaube, die Beispiele, gerade was Gelb betrifft, Gelb hat wohl, da kann man wohl sehr, sehr viele Sättigungsgrade angeben.

01:03:03.000 --> 01:03:19.860
 Interessant auch der Colorpicker, den die Lea Veruda gebaut hat. Natürlich funktioniert der theoretisch noch nicht, weil, naja, man kann zwar den benutzen, also der ist auch verlinkt, aber es bringt noch nichts, weil dein Browser unterstützt das ziemlich sicher noch nicht.

01:03:20.680 --> 01:03:29.240
 Richtig, das heißt, es sind Näherungswerte. Es wird versucht, das möglichst nahe auf normalen Bildschirmen darzustellen, aber es ist natürlich nur ein Annäherungswert.

01:03:29.240 --> 01:03:39.960
 Ja, genau. Also ich empfehle auf jeden Fall jedem, der irgendwie so an der Farbtheorie da interessiert ist oder was so in Browsern geht, sich das mal anzuschauen.

01:03:39.960 --> 01:03:48.380
 Den Artikel ist sehr interessant. Sie geht auch am Ende nochmal, sie hat einige Fragen gestellt bekommen dazu am Ende und geht da auch nochmal drauf ein.

01:03:48.380 --> 01:03:56.060
 Also zum Beispiel, warum die Farben in Firefox momentan ein bisschen besser aussehen als in Chrome oder Safari.

01:03:56.060 --> 01:04:05.800
 Wir haben vorhin schon kurz drüber gesprochen. Das ist wohl so, weil Firefox sich an einer Stelle wohl nicht an die Spec hält, was aber dann einen Vorteil hat bei Monitoren.

01:04:06.060 --> 01:04:18.940
 Genau, weil alle anderen Browser, die machen halt wirklich dieses Capping auf sRGB und stellen alles darüber hinaus gar nicht dar und Firefox sagt, wir stellen einfach so weit dar, wie der Bildschirm das Anzeigergerät das tatsächlich kann.

01:04:21.020 --> 01:04:30.380
 Ja, also, ja, genau. Ich habe auch gesehen, da ist noch eine Demo drin, die natürlich bei mir nicht funktioniert, weil der Farbrauch mit meinem Browser nicht unterstützt wird.

01:04:30.380 --> 01:04:36.140
 Da kannst du nämlich sehen, wird es funktioniert? Sehe ich ein Rot oder ein Grün? Das ist natürlich auch toll für Leute mit Rot-Grün-Schwäche wie mir.

01:04:36.420 --> 01:04:44.040
 Aber ich bin mir relativ sicher, dass ich da ein Rot sehe an der Stelle. Ja, Knallrot ist dann halt schon noch ganz gut erkennbar für mich auch auf dem Monitor.

01:04:44.940 --> 01:04:54.860
 Jetzt bin ich gerade am überlegen, da gibt es noch so eine komische Syntax. Müssen wir eigentlich auf die auch noch eingehen, weil das ist irgendwie dieses Display P3.

01:04:54.860 --> 01:04:58.000
 Da wird, glaube ich, der Farbraum angegeben, oder?

01:04:58.000 --> 01:05:03.700
 Ja, P3 ist, glaube ich, eine Spezifikation, welchen Umfang an Farben Bildschirme darstellen können.

01:05:03.700 --> 01:05:10.780
 Also, ich sehe halt in dem Color Picker, dass man das explizit wohl angeben kann in diesem Farbwert.

01:05:11.460 --> 01:05:18.360
 Also, offenbar kann man den Farbraum, den man anspricht oder den man beabsichtigt anzusprechen, explizit angeben.

01:05:18.360 --> 01:05:25.480
 Aber, wie gesagt, das ist jetzt so tief, habe ich mich da jetzt nicht reingewühlt an der Stelle.

01:05:25.480 --> 01:05:33.260
 Ja, du hast auch schon gesagt, es funktioniert ähnlich oder analog zu unserer menschlichen Sehwahrnehmung.

01:05:33.260 --> 01:05:39.740
 Und was das jetzt konkret bedeutet ist, der Farbabstand ist von der Farbwahrnehmung her einheitlich.

01:05:40.160 --> 01:05:49.080
 Also, bei HSL ist es so, oder auch bei RGB, ich schraube den einen Wert hoch, bei der einen Farbe, mit Blau und mit Rot zum Beispiel, macht das ein bisschen heller.

01:05:50.200 --> 01:06:01.200
 Und es ist aber von der Wahrnehmung her, ist das hellere Blau mehr, also unterschiedlicher, du machst gerade komische Geräusche über unseren Video-Chat.

01:06:01.200 --> 01:06:03.060
 Hab ich gerade ein bisschen rausgebracht.

01:06:05.260 --> 01:06:15.960
 Die Farbwahrnehmung ist unterschiedlich, das heißt, das hellere Blau sieht deutlich anders aus als das hellere Rot und auch der Helligkeitswert bedeutet bei HLS eigentlich nichts.

01:06:16.640 --> 01:06:22.760
 Das heißt, wenn ich ein Rot heller mache und dunkler, dann verändert sich dadurch auch der Farbton.

01:06:22.760 --> 01:06:27.560
 Also, es ist nicht einfach nur das gleiche Rot in ein bisschen heller oder dunkler, sondern es entsteht dadurch wirklich ein neuer Farbton.

01:06:27.560 --> 01:06:32.080
 Und diese Punkte macht eben LCH besser.

01:06:32.080 --> 01:06:35.580
 Also, da ist es wirklich so, wie man die Farbwahrnehmung auch tatsächlich erwarten würde.

01:06:35.580 --> 01:06:39.800
 Ich schraube an dem Wert und ich habe ein zu erwartendes Ergebnis, das auch tatsächlich so abgebildet wird.

01:06:40.120 --> 01:06:47.440
 Ja, also ich bin sehr gespannt, wenn ich das mal sehen kann, beziehungsweise wenn ich dann auch mal ein Display habe, auf dem ich das überhaupt sehen könnte.

01:06:47.440 --> 01:06:55.520
 Ich weiß gar nicht, ob mein iPad beispielsweise, das ist ein iPad Pro, glaube ich, nicht die allerneueste Generation, sondern eine davor.

01:06:55.520 --> 01:07:02.180
 Apple ist ja da oft weit vorne dabei, da weiß ich tatsächlich nicht, ob das das eventuell könnte oder zumindest mehr als das RGB.

01:07:02.180 --> 01:07:03.980
 Das könnte ich mir vorstellen, ja, dass das vielleicht geht.

01:07:03.980 --> 01:07:05.240
 Das muss ich mal recherchieren.

01:07:06.980 --> 01:07:12.280
 Bist du eigentlich, das habe ich, weil ich es jetzt gerade im Artikel gesehen habe, bist du eigentlich durch den Artikel auf dieses Marwo gestoßen?

01:07:12.280 --> 01:07:14.220
 Ja, genau, das habe ich ja gesagt, angeeingangs auch.

01:07:14.220 --> 01:07:18.880
 Ich bin durch den Artikel da drauf gestoßen und habe mir das deswegen dann auch angeguckt, ja.

01:07:18.880 --> 01:07:22.060
 Ah ja, okay, dann habe ich das vorhin überhört, ja.

01:07:22.060 --> 01:07:31.140
 Also sie hat, wenn ich das richtig noch weiß, den Color Picker auch teilweise damit gebaut und noch ein bisschen Custom JavaScript noch dazu, dass das so funktioniert.

01:07:31.340 --> 01:07:35.940
 Ja, generell kann ich auf jeden Fall sagen, die Demos, die Lea Veru baut, sind immer geil.

01:07:35.940 --> 01:07:40.020
 Die hat jetzt ganz viele, viele, schon seit Jahren ganz viele kleine Tools immer wieder gebaut.

01:07:40.020 --> 01:07:49.960
 Wenn wir schon bei Farben sind zum Beispiel, auch so dieses Color Contrast Ausrechentool, was ich in der letzten Folge schon vorgestellt habe.

01:07:50.300 --> 01:07:58.800
 Das ist auch von ihr, die hat, also die Tools, die sie baut, die sind immer klein, minimalistisch, super leicht zu benutzen und funktionieren einfach super.

01:07:58.800 --> 01:08:05.240
 Muss man echt mal, echt mal Shoutout an Lea Veru, auch wenn sie wahrscheinlich nicht versteht, was wir hier sprechen.

01:08:05.240 --> 01:08:08.000
 Soweit ich weiß, kann sie ganz gut Englisch und Griechisch.

01:08:08.000 --> 01:08:12.160
 Weiß nicht, keine Ahnung über weitere Sprachkenntnisse.

01:08:12.300 --> 01:08:19.660
 Ich habe einen Talk von ihr gesehen, gerade gestern oder heute, wo sie Portugiesisch spricht, aber auch nur so zur Begrüßung.

01:08:19.660 --> 01:08:22.880
 Das auch noch, okay.

01:08:22.880 --> 01:08:25.740
 Ich habe zum Thema jetzt nichts mehr.

01:08:25.740 --> 01:08:26.880
 Haben wir noch was vergessen?

01:08:26.880 --> 01:08:29.060
 Ja, hätte mal interessiert.

01:08:29.060 --> 01:08:32.820
 Also ich verwende hauptsächlich tatsächlich die Hex-Notation.

01:08:32.820 --> 01:08:34.120
 Wie ist das denn bei dir?

01:08:35.500 --> 01:08:37.200
 Ha, das kommt drauf an.

01:08:37.200 --> 01:08:38.520
 Also meistens ist es Hex.

01:08:38.520 --> 01:08:44.240
 In den Fällen, wo ich Transparenzen haben will, ist es oft RGBA.

01:08:44.240 --> 01:08:50.400
 Also da habe ich jetzt nicht diese achtstellige Hex-Notation habe ich eigentlich noch nicht verwendet im Browser.

01:08:50.400 --> 01:08:53.060
 Also wenn ich Alpha brauche, dann nehme ich auch RGBA.

01:08:53.060 --> 01:08:58.720
 Aber ganz ehrlich, das, was ich am meisten verwende, sind Variablen Namen.

01:08:58.720 --> 01:09:02.720
 Also SAS-Variablen Namen, die auch Farben zeigen.

01:09:02.720 --> 01:09:04.640
 Gut, aber was haben die dann als Inhalt?

01:09:04.640 --> 01:09:09.520
 Oh, da sprichst du ein sehr politisches Thema an.

01:09:09.520 --> 01:09:09.960
 Oh je.

01:09:09.960 --> 01:09:13.060
 Was haben die als Inhalt?

01:09:13.060 --> 01:09:14.160
 Also derzeit…

01:09:14.160 --> 01:09:16.140
 Nee, wirklich nur von der Notation her.

01:09:16.140 --> 01:09:20.380
 Also wir müssen jetzt gar nicht irgendwie in die Tiefe gehen.

01:09:20.380 --> 01:09:24.820
 Wie gesagt, Hexadezimal oder RGBA.

01:09:24.820 --> 01:09:27.600
 Das sind so die, die ich normalerweise verwende.

01:09:27.600 --> 01:09:31.100
 Zum Testen verwende ich ganz gern Farbnamen.

01:09:31.640 --> 01:09:42.820
 Also da haben auch meine Kollegen vor kurzem mal was ziemlich hässliches abbekommen, was da eine Weile auch so geblieben ist von einem neuen Produkt, was wir bauen, weil da halt eben Peach Puff und Hot Pink und so mit drin war.

01:09:42.820 --> 01:09:47.700
 Aber das tippt sich halt einfach schnell und die Browser-Vervollständigung in den DevTools ist davon auch ganz gut.

01:09:48.640 --> 01:09:55.760
 Also wenn du einfach mal irgendwie kurz sehen willst, welchen Container habe ich denn jetzt hier gerade, dann ist es immer recht leicht, so einen Farbnamen zu tippen.

01:09:55.760 --> 01:10:04.540
 Geht für mein Hirn irgendwie schneller zu tippen, Red, Blue, Yellow oder sowas als FF00 oder so.

01:10:05.400 --> 01:10:19.180
 Ja, HSL habe ich an einer Stelle mal eingesetzt in den letzten Jahren, wo es darum ging, dass wir für Avatare, wir wollten für Nutzer so Standard-Avatare einbauen.

01:10:19.180 --> 01:10:33.120
 Das heißt, wenn jemand kein Avatar-Bild hochgeladen hat, soll er, und das ist so, wie man es mittlerweile von vielen Systemen oder Seiten kennt, so einen initialen Buchstaben angezeigt bekommen mit einer entsprechenden Farbe, die dann auch für jeden Nutzer neu generiert wird.

01:10:33.220 --> 01:10:36.500
 Und zwar mit einem Wert aus den Namen wurde eine Farbe generiert.

01:10:36.500 --> 01:10:47.100
 Und da, weil wir da nicht einmal durch den kompletten Farbraum durchwollten, haben wir da HSL genommen, um eben nur einen Wert davon zu ändern.

01:10:47.100 --> 01:10:56.980
 Ich glaube, in dem Fall war das dann halt Hue, klar, also dass wir eine andere Farbe kriegen, aber Sättigung und Helligkeit sind immer gleich geblieben, so sind die Farben dann alle relativ ähnlich.

01:10:56.980 --> 01:11:22.580
 Ja, das wollte ich nämlich auch noch ansprechen, ich habe es ja vorhin schon kurz erwähnt mit dynamischen Farben und Generierung, das ist genau das, was ich ansprechen wollte, also man kann eben bei HSL sagen, ich möchte mich innerhalb von einer gewissen Helligkeit oder einem gewissen Kontrast bewegen und kann da einfach dann eine random Farbe reinklatschen, während bei RGB ja tatsächlich in Hex-Sondationen die dollsten Sachen rauskommen, wenn ich da einfach zufällig Buchstaben und Zahlen durcheinander würfel, genau, also, ja.

01:11:23.240 --> 01:11:32.420
 Ja, also, nicht oft, nicht oft eingesetzt bisher, aber das war so der Anwendungsfall, ich glaube, das ist so für mich so der Anwendungsfall für HSL-Farben.

01:11:32.420 --> 01:11:42.240
 Und das wird dann auf jeden Fall mit LCH noch interessanter, weil da ist das, das ist quasi so für mich gefühlt HSL und Steroids, weil das dann irgendwie…

01:11:42.240 --> 01:12:02.080
 Ja, also, ich fand es interessant, ich habe mich gefragt, warum mache ich das eigentlich, wenn es RGB auch gibt. Die Unterstützung ist nämlich die gleiche zwischen dem funktionalen Aufruf, also RGB, Klammer auf, irgendwas, Klammer zu, und der Hex-Notation, das sind tatsächlich 95,3 Prozent.

01:12:02.800 --> 01:12:18.540
 Wobei ich mich frage, warum es immer noch irgendwas, 7 Prozent Browser gibt, die das nicht können, was machen die dann? Also, wenn die keine Hex-Notationen können und kein RGB, was machen die dann? Habe ich noch nicht rausgefunden, muss ich mal recherchieren.

01:12:19.080 --> 01:12:35.240
 Ja, aber jedenfalls fand ich das interessant, also, dass tatsächlich Hex-Notation und RGB gleich viel unterstützt wird. Ich glaube, es ist einfach eine Gewohnheitssache. Vielleicht ist man da, wenn man mehr Grafiker ist, vielleicht kennt man sich da aus Photoshop, mehr tatsächlich mit den Werten von 0 bis 255 aus.

01:12:35.560 --> 01:12:52.920
 Und bei mir ist es einfach so, dadurch, dass ich von Grund auf immer mit den Hex-Werten, mit den sechsstelligen gearbeitet habe, ich kenne die Farben teilweise einfach auch schon. Also, ich weiß, unser altes Firmengrün war 99CC00. Da weiß ich genau, wie das aussieht. Ich weiß, dass ein Orangeton FFAA00 ist.

01:12:53.260 --> 01:13:13.340
 Und klar, klassisch, die FF000 oder 0F0, weiß man sowieso, in welche Richtung das geht. Und man kann dann relativ schnell mit ein bisschen rumspielen, den Farbton ungefähr erreichen, den man haben wollte. Und ja, irgendwie ist das einfach Gewohnheitssache. Aber es spricht absolut von der Technik her nichts dagegen, auch RGB-Aufruf zu nutzen.

01:13:14.300 --> 01:13:28.120
 Das ist eine normale Gewohnheitssache. Fällt mir gerade noch ein, der, ich bin auf den Artikel gestoßen von Lea Verroux über den Tweet, mit dem sie den beworben hat. Und da waren auch so einige Kommentare unten drunter, ja, what's wrong with Hex und sowas.

01:13:28.120 --> 01:13:34.500
 Die Leute haben wohl den Artikel nicht gelesen, weil dann wäre der nicht klar gewesen.

01:13:34.500 --> 01:13:55.960
 Das ist doch die Antwort. Du hast den Artikel wohl nicht gelesen. Oder so, ja, aber kann man das dann irgendwie in Hex konvertieren? Nein, kann man halt nicht, weil der Farbraum kleiner ist. Und das ist dann auch so dieses, also das ist eine Denke, die ich meistens doof finde. Ich kann sie nachvollziehen, aber ich finde sie meistens doof.

01:13:55.960 --> 01:14:06.020
 Dieses, kann ich denn das neue, äh, coole, was ich jetzt nicht unbedingt vielleicht noch lernen will, in das alte konvertieren, was ich kenne. Das gibt es an so vielen Stellen im Web-Bereich.

01:14:06.020 --> 01:14:16.520
 Das macht natürlich höchstens Sinn als Fallback, je nachdem wie das jetzt dann implementiert wird, was passiert, wenn ich eine nicht darstellbare Farbe wähle, ähm, dass ich wirklich genau den RGB-Wert als Fallback haben will.

01:14:16.520 --> 01:14:28.340
 Dann mache ich halt, äh, die gleiche Anweisung zweimal. Also zweimal den, äh, das, äh, Color in CSS und erst das alte und dann das neue. Und wenn das neue nicht akzeptiert wird, äh, macht der Browser ja automatisch ein Fallback.

01:14:28.340 --> 01:14:42.140
 Ich glaube, an der Stelle ging's, ging's mehr drum, dass sich jemand eher nicht so gern umgewöhnen will, äh, weil er halt das eine gewöhnt ist, genau das, was du gerade gesagt hast. Ähm, ähm, naja, manchmal muss man halt eben mal was Neues lernen.

01:14:42.140 --> 01:14:57.480
 Es, man kommt nicht drumherum. Gerade bei uns im Web-Bereich ist es halt einfach so, äh, wir müssen eigentlich ständig was Neues lernen. Ähm, einfach nur immer Generatoren zu schreiben, die das, das Neue auf das alte mappen, was ich gewöhnt bin, ist, glaube ich, nicht, äh, nicht besonders Ziel.

01:14:57.480 --> 01:15:03.420
 Es gibt doch dann bestimmt ein Babel-Plugin, was dir dann die, die neuen, die neuen Farbwerte in RGB umschreibt.

01:15:03.420 --> 01:15:08.000
 Herzlichen Glückwunsch. Warte, dazu, dazu, dazu, dazu habe ich noch ein kurzes Flöten-Solo.

01:15:10.740 --> 01:15:14.260
 Schön, sehr schön, für unsere neue Titelmelodie.

01:15:14.260 --> 01:15:20.740
 Ja, damit, ja, also, deine Kamera wandert gerade, das ist interessant.

01:15:20.740 --> 01:15:23.520
 Ich bin verabschiedet, aber das Kabel wobbelt hier so ein bisschen durchgedient.

01:15:23.520 --> 01:15:26.660
 Ich wollte, ähm, ich weiß nicht, hast du zu LCH noch was?

01:15:26.660 --> 01:15:35.760
 Zu LCH nicht, ne, ich hätte dann noch die, die Verbreitung, die, die, äh, Browser-Unterstützung für die einzelnen Notationen. Soll ich das noch kurz, dann wäre ich fertig?

01:15:36.360 --> 01:15:39.000
 Ja, dann mach das noch, dann habe ich nämlich auch noch eine kleine Ergänzung.

01:15:39.000 --> 01:15:55.700
 Ja, wie gesagt, RGB und HEX, äh, ne, was habe ich, äh, ne, RGB und HEX, genau, 95,3%, ähm, dann RGB als Funktionsaufruf mit Alpha-Wert, äh, bei 87,15%, das heißt kein IE-11 und Edge-SZ-Chromium.

01:15:56.380 --> 01:16:11.420
 Ähm, und dafür aber RGBA, wenn ich es explizit mit angebe, mit 95,19%, äh, was auch die gleiche Abdeckung hat wie HSL als Funktionsaufruf, das heißt auch mit RGBA ist man inzwischen echt safe, kann man sagen.

01:16:11.860 --> 01:16:21.280
 Also wundere mich auch, dass RGBA irgendwie bei 95,19% ist und, äh, HEX, äh, bei 95,3%, ja gut, okay, macht schon Sinn, ist ein bisschen drunter.

01:16:21.480 --> 01:16:27.320
 Also jedenfalls macht man, macht man auch mit RGBA inzwischen nix verkehrt, das war ja noch vor ein paar Jahren war das, glaube ich, noch ein bisschen ein anderes Thema.

01:16:27.320 --> 01:16:36.960
 Und, äh, Kommazahlen, weil du vorhin meintest, du bist ja nicht sicher, ob Kommazahlen bei dem neuen Farbraum, ich muss immer wieder nachgucken, wie der heißt, LCH, ähm, ob das funktioniert wird.

01:16:36.960 --> 01:16:38.200
 Nicht LHC, das ist der Large Hadron Collider.

01:16:38.200 --> 01:16:50.000
 Auch nicht THC, ähm, äh, genau, Komma-Werte in RGB und RGBA unterstützen auch 87,1%, das ist auch wieder kein IE-11 und Edge erst seit Chromium, aber ich denke, auch da ist man eigentlich fast sogar safe.

01:16:50.260 --> 01:16:54.480
 Ist nur die Frage, wie viel mir diese Komma-Werte tatsächlich wird zu bringen.

01:16:54.480 --> 01:17:05.280
 Ja, das ist interessant, äh, da man mal drüber nachdenkt, wenn man so hin und her rechnet, das habe ich nämlich, äh, in Recherche für den Artikel auch mal gemacht und so gedacht, hm, da musst du dann genau den Komma-Wert treffen, damit das, egal, nicht so wichtig.

01:17:05.280 --> 01:17:12.320
 Ja, genau, und da ist auch wieder die Frage, was passiert im Browser, die es nicht können und so weiter, aber, ja, äh, ist, glaube ich, eher eine Nische für die Leute, die das nutzen.

01:17:12.320 --> 01:17:14.240
 Weiße und schwarze Fallbacks für alles.

01:17:14.240 --> 01:17:14.740
 Genau.

01:17:14.740 --> 01:17:17.300
 Wo wir wieder beim CSS Naked Day wären.

01:17:17.300 --> 01:17:20.240
 Ähm, die HEX RGBA.

01:17:20.240 --> 01:17:25.600
 Annotation, also mit diesen achtstelligen HEX-Werten, ähm, liegt bei 88,85%.

01:17:25.600 --> 01:17:29.780
 Also selbst das, würde ich sagen, ist relativ safe einzusetzen.

01:17:29.780 --> 01:17:39.160
 Aber wahrscheinlich würde ich dann doch, also da ist dann der Vorteil, das so kurz zu halten, überwiegt für mich dann schon nicht mehr so, dass ich dann nicht vielleicht auf RGBA setzen würde, wo ich noch ein paar mehr Browser mit erwische.

01:17:40.600 --> 01:17:46.800
 Wobei, ich weiß nicht, ob ich da jetzt ein zu großes Fass aufmache, äh, aber, naja, egal, nee, machen wir es einfach nicht auf.

01:17:46.800 --> 01:17:47.720
 Mach keinen Fass auf.

01:17:47.720 --> 01:17:50.780
 Wir sind schon bei einer Stunde zwanzig.

01:17:50.780 --> 01:17:52.760
 Ähm, ne, doch, ich mach's gut drauf.

01:17:53.800 --> 01:17:56.360
 Die nachfolgende Sendung verzögert sich um 20 Minuten.

01:17:57.640 --> 01:17:59.840
 Das könnte man vielleicht auch noch, äh, ich mach' einen Jingle.

01:17:59.840 --> 01:18:03.480
 Ne, also, äh, bevor ich einen Faden wieder verliere.

01:18:03.480 --> 01:18:11.700
 Ähm, bei Can I Use diese Werte, die Prozentswerte, die du grad vorliest, ähm, die basieren ja auch auf irgendwelchen globalgalaktischen Browser-Statistiken, wo man auch nicht genau weiß.

01:18:11.700 --> 01:18:22.060
 Ja, da kommt's auch drauf an, ob ich jetzt ausgewählt hab, ich möchte nur für mein Land und so weiter, natürlich sind die, ich nenn die immer ganz gerne und ich glaub' als grober Anhaltspunkt reicht's, aber, äh, ja, muss man mit Vorsicht genießen, gut, dass du's dazu sagst, ja.

01:18:22.060 --> 01:18:39.880
 Äh, genau, ich, ich sag das extra nochmal, weil, ähm, ich mal, äh, Zugriff auf die Browser-Statistiken von einer sehr großen deutschen Seite hatte oder von mehreren sehr großen deutschen Seiten, ähm, und, äh, wenn man das dann verglichen hat mit den, mit diesen offiziellen Statistiken von irgendwelchen Statistikseiten, war das oft sehr, sehr anders.

01:18:39.880 --> 01:19:09.860
 Also, äh, offenbar funktioniert der deutsche Markt schon mal ganz, ganz, ganz, der deutsche Browser-Markt ganz, ganz anders als, äh, der internationale, weil, zum Beispiel, das kann ich einfach jetzt mal so sagen, ist kein großes Geheimnis, Firefox ist viel stärker in Deutschland als in vielen anderen Ländern, wo, wo Chrome, äh, weitaus der stärkste Browser ist in vielen, ähm, wobei ich mich zugeben muss, ich hab, ich hab mich schon länger nicht mehr mit so internationalen Browser-Statistiken beschäftigt, weil es mich momentan nicht betrifft, ähm, aber man muss echt dazu sagen, äh, glaubt euren eigenen Statistiken am ehesten, also,

01:19:09.860 --> 01:19:25.640
 wenn da steht irgendeine Prozentzahl, guckt euch genau an, welche Browser das sind, diese, diese Prozentzahl, das ist nur so ein grober, äh, Wert, guckt lieber mal, was habt ihr denn überhaupt für Nutzer, weil, was bei Can I Use für Statistiken drin sind, das sind nicht eure, da wisst ihr auch nicht genau, ähm, ob das dann wirklich zutrifft.

01:19:25.640 --> 01:19:28.200
 Und da musst du auch gar nicht auf irgendwelche Riesenportale gehen.

01:19:28.200 --> 01:19:43.100
 Ich habe das mal gemacht und habe, das ist auch wieder ein kleiner Exkurs jetzt, es gibt ja dieses Browsers-List, mit dem man konfigurieren kann in seiner Build-Chain, in Webpack, welche Browser man targeten will.

01:19:43.100 --> 01:19:49.260
 Und dann werden entsprechend die Plugins, also CSS-Prefigs und so weiter angepasst, damit es dann eben in den Browsern läuft.

01:19:49.540 --> 01:19:58.080
 Und es gibt da auch ein Tool, muss ich mal raussuchen, dass ich das verlinke in den Shownotes, mit dem man sich von seinen Google Analytics die Statistiken ziehen kann.

01:19:58.080 --> 01:20:03.540
 Und die Prozentwerte werden dann tatsächlich übernommen in die Browsers-List-Konfiguration.

01:20:03.540 --> 01:20:09.340
 Und so kann ich halt gezielt, also wir haben das gemacht für unseren Relaunch, haben geguckt, was haben wir denn tatsächlich für Besucher.

01:20:09.340 --> 01:20:16.920
 Und die waren auch bei unserer kleinen Seite schon, so bekannt sind wir ja nicht, waren die schon deutlich anders als irgendwelche weltweiten Statistiken.

01:20:17.640 --> 01:20:26.400
 Und da kann man sich das dann eben synchronisieren und kann das entsprechend konfigurieren lassen, sodass das für die eigenen Bedürfnisse halt wirklich perfekt passt.

01:20:26.400 --> 01:20:33.620
 Weil wenn ich keine Benutzer mit IE11 mehr habe, dann brauche ich da nicht irgendwie den Code um 20 Prozent aufblähen, nur um da jetzt irgendwelche Fallbacks drin zu haben.

01:20:33.620 --> 01:20:35.680
 Aber das nur am Rande.

01:20:37.680 --> 01:20:43.100
 Dann noch zum Abschluss noch zwei kleine Sachen, die auch noch die Farben betreffen.

01:20:43.100 --> 01:20:56.280
 Keine Ahnung, es betrifft jetzt nicht unbedingt die Farbsysteme, aber weil ich großer Fan von Dark Modes bin, an der Stelle noch die kurze Erwähnung, dass man mittlerweile ja im Browser sagen kann, ob, also nein, anders.

01:20:56.720 --> 01:21:01.380
 Das Betriebssystem kann dem Browser sagen, ich bin gerade im Dark Mode, zeig du doch auch mal deinen Dark Mode an.

01:21:01.380 --> 01:21:06.920
 Dafür gibt es ein CSS Media Query, Prefers Color Scheme Dark oder irgendwie so heißt das, glaube ich.

01:21:07.720 --> 01:21:16.960
 Das finde ich irgendwie an der Stelle noch erwähnenswert, das heißt, ihr könnt eure Seite auf euer Betriebssystem Farbschema reagieren lassen.

01:21:16.960 --> 01:21:21.600
 Um mich da auch nochmal kurz einklinken zu lassen und den Bogen zu schlagen zu einer unserer ersten Folgen.

01:21:21.600 --> 01:21:25.240
 Stack Overflow hat seit neuestem einen Dark Mode.

01:21:25.240 --> 01:21:30.820
 Ich mag ja Dark Modes auch, aber es ist tatsächlich sehr ungewohnt.

01:21:31.280 --> 01:21:38.020
 Also wenn ich auf so einer Stack Overflow Antwort lande, weil ich irgendwas gegoogelt habe, dann denke ich manchmal, huch, wo bin ich denn jetzt?

01:21:38.020 --> 01:21:42.720
 Weil es einem gar nicht so bekannt vorkommt, aber es ist sehr angenehm für die Augen.

01:21:42.720 --> 01:21:45.260
 Ja, also das kann man auf jeden Fall einbauen.

01:21:45.260 --> 01:21:51.260
 Wer das mal sehen will in Aktion, das habe ich zum Beispiel auf meinem Accessibility Cheat Sheet aus der letzten Folge, da habe ich das auch mal eingebaut.

01:21:51.260 --> 01:21:57.080
 Da kann man das in Aktion sehen und dann könnt ihr euch darüber streiten, ob das Dark Theme genauso gut funktioniert wie das Light Theme.

01:21:57.400 --> 01:22:02.320
 Ich bin mir nicht so sicher, auf manchen Geräten sieht dann der Kontrast ein bisschen schwach aus.

01:22:02.320 --> 01:22:18.560
 Genau, falls ihr jetzt ganz frisch mit Farbe anfangen wollt und jetzt vielleicht nicht unbedingt einen Designer habt, der euch sagt, ihr müsst da jetzt genau diesen Wert nehmen und da genau diesen Wert, dann seien noch diverse Color Scheme Generators empfohlen.

01:22:18.560 --> 01:22:33.180
 Also wenn ihr eine Webseite bauen wollt und wisst, sagt, naja, ich hätte gern irgendwie so ein Rot dabei, aber ich weiß jetzt nicht, was für gute andere Farben dazu passen würden, empfehle ich uns Color Scheme Generator zu benutzen dafür.

01:22:33.180 --> 01:22:34.620
 Da gibt es einige, die ganz gut sind.

01:22:34.620 --> 01:22:36.260
 Ich habe da jetzt keine spezielle Empfehlung.

01:22:36.260 --> 01:22:38.760
 Da gibt es so viele verschiedene, die ganz gut funktionieren.

01:22:39.880 --> 01:22:50.360
 An der Stelle noch kurz gesagt, das Color Scheme von unserer Webseite, wo wir sind, ist vorne.show, ist mit einem Generator erstellt, allerdings auf Basis eines Bildes.

01:22:50.360 --> 01:22:51.540
 Sowas gibt es nämlich auch.

01:22:51.540 --> 01:22:56.560
 Also da ist mir mal so eine Illustration über den Weg gelaufen und ich dachte so, das Color Scheme, das gefällt mir eigentlich ganz gut.

01:22:56.560 --> 01:22:58.900
 Da würde ich gerne Webseite draus machen.

01:22:59.300 --> 01:23:01.740
 So sind die Farben bei, wo wir sind, ist vorne.show entstanden.

01:23:01.740 --> 01:23:05.500
 Zumindest die Basisfarben am Ende, wenn man dann in der Umsetzung ist von so einer Webseite.

01:23:05.500 --> 01:23:14.500
 Da kommt man immer mal wieder nochmal an den Punkt, wo man merkt, wenn ich jetzt die zwei miteinander kombiniere und das muss ich an der Stelle, dann muss ich das eine vielleicht dann doch noch ein bisschen heller machen.

01:23:14.500 --> 01:23:16.140
 Das darf man ja dann auch.

01:23:16.140 --> 01:23:23.460
 Aber genau, das kann ich auf jeden Fall empfehlen, wenn man irgendwie mit noch nicht weiß, was für Farben man jetzt für eine Webseite einsetzen möchte.

01:23:23.460 --> 01:23:26.960
 Dann einfach mal so einen Generator verwenden und gucken, was da rauskommt.

01:23:26.960 --> 01:23:31.200
 Und ich kann, wie gesagt, keinen speziellen empfehlen, weil die sind eigentlich alle ganz gut.

01:23:31.200 --> 01:23:37.900
 Einfach mal bei Google eingeben und nein, bei DuckDuckGo eingeben und Spaß haben.

01:23:37.900 --> 01:23:40.100
 Genau, damit bin ich mit Farben durch.

01:23:40.100 --> 01:23:41.860
 Ente, Ente, Ente, Ente.

01:23:41.860 --> 01:23:45.900
 Ente, Ente, Farbe, Ente, Sag ganz.

01:23:45.900 --> 01:23:48.800
 Okay, ja, ich bin auch durch.

01:23:48.800 --> 01:23:55.400
 Dann haben wir das Thema heute mal tatsächlich wieder ein bisschen länger gehabt als sonst.

01:23:55.500 --> 01:23:59.820
 Ich hatte ja schon Angst, dass die Retro länger wird als das Thema, aber wir haben heute sehr ausführlich über Farben geredet.

01:23:59.820 --> 01:24:05.380
 Und mir fällt jetzt auch gerade auf, dass das ja voll passend ist, weil wir ja Ostern haben und bunte Eier und bunte Farben.

01:24:05.380 --> 01:24:05.940
 Wow.

01:24:05.940 --> 01:24:07.900
 Das war natürlich total geplant.

01:24:07.900 --> 01:24:09.160
 Das war unser Oster-Special.

01:24:09.160 --> 01:24:10.760
 Und damit...

01:24:10.760 --> 01:24:11.760
 Bunte Eierstöcke für alle.

01:24:11.760 --> 01:24:14.140
 Und damit...

01:24:14.140 --> 01:24:15.880
 Das Geiltein.

01:24:15.880 --> 01:24:19.140
 Geiltein.

01:24:19.140 --> 01:24:24.100
 Ja, wo wir gerade von Eierstöcken gesprochen haben.

01:24:24.100 --> 01:24:26.760
 Nein, ich finde das jetzt keine klassische Überleitung.

01:24:26.760 --> 01:24:29.500
 Es ist nichts Schlimmes an Eierstöcken.

01:24:30.780 --> 01:24:32.780
 Nein, ich finde da keinen Überleitung.

01:24:32.780 --> 01:24:34.400
 Frauen in die Webtechnik.

01:24:34.400 --> 01:24:36.580
 Nein, nein, nein, da setzen wir uns jetzt in die Nesseln.

01:24:36.580 --> 01:24:39.460
 Es ist egal, was wir da sagen, das ist auf jeden Fall falsch.

01:24:39.460 --> 01:24:40.460
 Macht aber auch nichts.

01:24:40.460 --> 01:24:47.520
 Ich möchte als Geilteil mal jetzt gar nichts Technisches empfehlen, sondern Musik, die mir vor einiger Zeit schon mal über den Weg gelaufen ist.

01:24:47.640 --> 01:24:49.600
 Also so vor eineinhalb Jahren.

01:24:49.600 --> 01:24:52.400
 Aber jetzt so die Tage habe ich es nochmal wieder für mich entdeckt.

01:24:52.400 --> 01:24:54.460
 Es war jetzt komisch betont.

01:24:54.460 --> 01:24:55.520
 Wieder für mich entdeckt.

01:24:55.520 --> 01:24:57.600
 Für mich wiederentdeckt, glaube ich.

01:24:57.600 --> 01:25:00.940
 Du sprichst zu viel Plopflöte, das ist nicht gut für dein Hirn.

01:25:00.940 --> 01:25:09.940
 Das hat jetzt was von balinesischer Gamelanmusik.

01:25:09.940 --> 01:25:11.960
 Warte, Moment.

01:25:11.960 --> 01:25:16.700
 So.

01:25:17.240 --> 01:25:22.560
 Ich wollte nur beweisen, ich kann auch normale Töne da drauf spielen, aber so schief spielen macht einfach viel mehr Spaß.

01:25:22.560 --> 01:25:23.820
 Und wie gesagt, das übe ich ja gerade.

01:25:23.820 --> 01:25:27.620
 Also die Musik von Bill Wurtz, ich glaube, so wird er ausgesprochen.

01:25:27.620 --> 01:25:30.360
 B-I-L-L-W-U-R-T-Z.

01:25:30.360 --> 01:25:34.820
 Das ist meine favorite weird music gerade.

01:25:34.820 --> 01:25:37.180
 Also ich weiß nicht, wie ich es richtig beschreiben soll.

01:25:37.180 --> 01:25:39.220
 Es ist so, also mir macht es sehr, sehr gute Laune.

01:25:39.220 --> 01:25:43.740
 Ich finde, der Sound und die Komposition lehnt sich so ein bisschen an an Toto.

01:25:43.740 --> 01:25:45.780
 So teilweise Toto-Sachen.

01:25:46.840 --> 01:25:54.920
 Ein Künstler, der macht das, glaube ich, alleine und man muss wirklich Künstler sagen, der ist Künstler im wahrsten Sinne des Wortes, glaube ich, auch so Lebenskünstler und so.

01:25:55.560 --> 01:26:05.540
 Wenn man die Musikvideos von ihm mal dazu gesehen hat, also nicht nur sich die Musik, also die Musik an sich funktioniert bei mir super zum Arbeiten, dann bin ich mega gut irgendwie drauf und das beschwingt.

01:26:07.060 --> 01:26:11.000
 Aber die Musikvideos dazu, die sollte man nicht während der Arbeit schauen wahrscheinlich besser.

01:26:11.000 --> 01:26:14.460
 Die sind eher, die gehen eher in Richtung verstörend bis sehr bunt.

01:26:14.460 --> 01:26:15.760
 Ich kann da auch nicht empfehlen.

01:26:15.940 --> 01:26:21.180
 Wenn ihr unter Epilepsie leidet, ja, alles passt heute zu den Farben.

01:26:21.180 --> 01:26:22.700
 Das wäre die Überleitung gewesen.

01:26:22.700 --> 01:26:23.640
 Danke, Konstantin.

01:26:23.640 --> 01:26:25.580
 Hättest du mich mal gefragt?

01:26:25.820 --> 01:26:30.160
 Also, Leuten, die unter Epilepsie leiden, kann ich diese Musikvideos auf jeden Fall nicht empfehlen.

01:26:30.160 --> 01:26:31.620
 Das muss ich an der Stelle sagen.

01:26:31.620 --> 01:26:33.720
 Die sollten vielleicht einfach nur mit dem Sound vorlieb nehmen.

01:26:34.160 --> 01:26:41.200
 Hört es euch mal an, wenn ihr komische, wenn ihr Toto mögt auf jeden Fall und wenn ihr merkwürdige Texte mögt auch.

01:26:41.200 --> 01:26:53.260
 Also, da sind, ich möchte nicht so viel vorwegnehmen, aber das, worauf ich, wie ich auf Bill Words aufmerksam wurde, war tatsächlich, ja, ich bin manchmal bei TikTok und gucke mir da Sachen an.

01:26:53.260 --> 01:26:54.220
 Ich habe mich jetzt gerade geoutet.

01:26:54.220 --> 01:26:56.240
 Ich bin seit letzter Woche auch bei TikTok.

01:26:56.240 --> 01:26:59.360
 Da musst du mir mal deinen Handle nennen, dass wir uns da folgen können.

01:26:59.360 --> 01:27:00.580
 Nee, ich habe keinen Account.

01:27:00.580 --> 01:27:02.660
 Ich bin stiller Voyeur.

01:27:02.660 --> 01:27:03.160
 Das geht?

01:27:03.800 --> 01:27:04.420
 Ja, das geht.

01:27:04.420 --> 01:27:05.840
 Also, auf meinem Handy geht das.

01:27:05.840 --> 01:27:06.720
 Ich habe keinen Account.

01:27:06.720 --> 01:27:09.960
 Ich gucke nur so, was der Algorithmus mir vorschlägt.

01:27:09.960 --> 01:27:11.480
 So ein bisschen Algorithmusforschung auch.

01:27:11.480 --> 01:27:11.760
 Dürfen wir da überhaupt sein?

01:27:11.760 --> 01:27:13.400
 Ich dachte da irgendwie, bei 30 ist Schluss.

01:27:13.400 --> 01:27:16.360
 Nee, nee, bei 17, glaube ich.

01:27:16.360 --> 01:27:19.740
 Ist auch sehr gefährlich.

01:27:19.740 --> 01:27:20.960
 TikTok ist sehr gefährlich.

01:27:20.960 --> 01:27:22.760
 Ja, ist sehr gefährlich.

01:27:22.760 --> 01:27:32.500
 Aber bei TikTok gab es ein schönes Meme, was mit einem seiner Songs oder mit einem kleinen Schnipsel seiner Songs, also von Bill Words, funktioniert hat.

01:27:32.580 --> 01:27:35.300
 Und zwar heißt er, I just did a bad thing.

01:27:35.300 --> 01:27:38.700
 Und der fängt halt einfach an mit, just did a bad thing.

01:27:38.940 --> 01:27:41.020
 Und jetzt muss ich gleich Gema bezahlen, wenn ich noch weiter singe.

01:27:41.020 --> 01:27:49.160
 Aber es ist einfach sehr, sehr, sehr merkwürdig und finde ich auf eine erfrischende Art und Weise irgendwie sehr lustig.

01:27:49.420 --> 01:27:57.220
 Wenn man die Texte überhaupt hört, wenn man die Texte nicht hört, dann denkt man, oh ja, netter Pop, irgendwie so ein bisschen an Toto angelehnt, viel Keyboard und so.

01:27:57.220 --> 01:27:58.820
 Ist nett.

01:27:58.820 --> 01:28:02.600
 Aber wenn man anfängt, auf die Texte zu achten, da erschließt sich nochmal so ein neuer Level.

01:28:02.600 --> 01:28:04.880
 Da muss ich dir jetzt einfach mal auf die Finger hauen.

01:28:04.880 --> 01:28:05.920
 Ist doch kein Bass.

01:28:05.920 --> 01:28:07.640
 Ist doch populäre Musik.

01:28:08.140 --> 01:28:09.660
 Ja gut, populär ist es schon.

01:28:09.660 --> 01:28:10.480
 Ja, es ist so.

01:28:10.480 --> 01:28:11.660
 Diskussion zu Ende.

01:28:11.660 --> 01:28:12.100
 Egal.

01:28:12.100 --> 01:28:15.460
 Aber kurz ein Haken zu Bill Words.

01:28:15.460 --> 01:28:19.900
 Du hast mir das vor zwei Tagen, glaube ich, oder gestern geschickt.

01:28:19.900 --> 01:28:20.660
 Da hört es mal an.

01:28:20.660 --> 01:28:26.500
 Und ich habe dann auch in den Shownotes in der Vorbereitung für die Sendung gesehen, dass du tatsächlich das auch als Geilteil verwenden willst.

01:28:26.500 --> 01:28:32.840
 Da habe ich auch mal so ein bisschen geguckt und bin dabei auf ein YouTube-Video gestoßen, das ich auch verlinken werde.

01:28:32.840 --> 01:28:35.140
 How to Bill Words.

01:28:35.140 --> 01:28:35.900
 Oh.

01:28:35.900 --> 01:28:37.440
 Und das fand ich ganz lustig.

01:28:37.440 --> 01:28:40.960
 Und ich kenne tatsächlich noch kein wirkliches Musikvideo von ihm.

01:28:40.960 --> 01:28:44.720
 Aber weil du sagst, sehr psychedelisch und farben und komisch.

01:28:44.720 --> 01:28:48.640
 Und ja, auch das How to ist entsprechend gemacht.

01:28:48.640 --> 01:28:50.540
 Also schaust dir mal an.

01:28:50.540 --> 01:28:52.420
 Es ist extrem merkwürdig.

01:28:52.420 --> 01:28:53.600
 Ist es vielleicht von ihm selbst?

01:28:53.600 --> 01:28:54.920
 Das könnte ich mir sehr gut vorstellen.

01:28:55.640 --> 01:28:56.660
 Ich weiß es nicht.

01:28:56.660 --> 01:29:01.940
 Der Account heißt Imaginary Ambition.

01:29:01.940 --> 01:29:03.920
 Ah, nee.

01:29:03.920 --> 01:29:04.700
 Ich habe keine Ahnung.

01:29:04.700 --> 01:29:05.360
 Ich weiß auch nicht, wie sein.

01:29:05.360 --> 01:29:07.060
 Ich glaube, seine heißt tatsächlich wie sein Name.

01:29:07.060 --> 01:29:08.540
 Aber ich weiß es tatsächlich nicht auswendig.

01:29:08.540 --> 01:29:11.180
 Ich folge ja niemandem bei YouTube.

01:29:11.180 --> 01:29:13.080
 Ich habe zwar einen Account, aber ich habe die Abonniere.

01:29:13.080 --> 01:29:13.820
 Keine Subscription.

01:29:13.820 --> 01:29:16.240
 Keine einzige Subscription.

01:29:16.240 --> 01:29:19.560
 Ich habe das nur, weil ich mal eine Playlist machen wollte.

01:29:19.560 --> 01:29:25.240
 Weil an einer Stelle nicht alles das war in einem Account,

01:29:25.240 --> 01:29:26.120
 was ich haben wollte.

01:29:26.120 --> 01:29:29.460
 Und deswegen ist das der einzige Use Case für meinen YouTube-Account.

01:29:29.460 --> 01:29:31.740
 Ja, genau.

01:29:31.740 --> 01:29:32.660
 Hört euch das mal an.

01:29:32.660 --> 01:29:35.780
 Und an der Stelle, weil ich vorhin gesagt habe, Epilepsie-Warnung und so.

01:29:35.780 --> 01:29:38.200
 Das ist keine gute Idee für Epileptiker.

01:29:38.200 --> 01:29:40.360
 Was auch keine gute Idee für Epileptiker ist,

01:29:40.360 --> 01:29:44.560
 ist eine kleine Tech-Demo, die ich vor ein paar Jahren mal gebaut habe aus Langeweile.

01:29:45.120 --> 01:29:46.940
 An der Stelle kann ich da nochmal drauf verlinken.

01:29:46.940 --> 01:29:48.340
 MoritzGießmann.de

01:29:48.340 --> 01:29:54.800
 Aber wirklich, ganz, ganz, ganz ehrlich, nur draufklicken, wenn ihr keine Epilepsie habt.

01:29:54.800 --> 01:29:55.660
 Das ist kein Scheiß.

01:29:55.660 --> 01:29:57.700
 Aber da ist auch noch eine Warning davor.

01:29:57.700 --> 01:30:00.820
 Also ich hoffe, da klickt dann keiner drauf.

01:30:00.820 --> 01:30:03.460
 Aber für alle anderen Mutigen, die können das mal.

01:30:03.920 --> 01:30:08.160
 Falls sie mal Farben brauchen, falls sie mal einen Hexcode brauchen, so zufällig,

01:30:08.160 --> 01:30:10.680
 dann kann man das mal ausprobieren.

01:30:10.680 --> 01:30:13.480
 Mehr will ich an der Stelle nicht verraten.

01:30:13.480 --> 01:30:16.380
 Alles klar.

01:30:16.380 --> 01:30:17.280
 War das dein Geilteil?

01:30:17.280 --> 01:30:19.400
 Das war mein Geilteil.

01:30:19.400 --> 01:30:21.860
 Wir haben kein Geilteil Ende-Dschingel.

01:30:21.860 --> 01:30:22.560
 Brauchen wir das?

01:30:22.560 --> 01:30:25.840
 Wir könnten vielleicht das Jingle falschrum abspielen.

01:30:25.840 --> 01:30:27.120
 Ja, das haben wir schon mal gesagt, genau.

01:30:27.120 --> 01:30:29.800
 Das Geilteil, wir gucken mal.

01:30:29.800 --> 01:30:33.760
 Aber ansonsten bin ich mit unserer Soundverpackung schon sehr zufrieden.

01:30:33.760 --> 01:30:38.180
 Ja, bevor jetzt jemand sagt, das Geilteil, das hat jetzt gar nichts hier mit Webtechnik zu tun.

01:30:38.180 --> 01:30:41.400
 Das haben wir ganz am Anfang schon angekündigt.

01:30:41.400 --> 01:30:45.040
 Also das Geilteil hat nicht immer was mit Webtechnologie zu tun.

01:30:45.040 --> 01:30:48.540
 Das kann auch wirklich mal ein Musiktipp oder Sonstiges sein.

01:30:48.540 --> 01:30:49.920
 Gewöhnt euch dran.

01:30:49.920 --> 01:30:51.660
 Ja, gewöhnt euch dran.

01:30:51.660 --> 01:30:56.120
 So, das ist der pädagogische Teil dieser Sendung.

01:30:56.120 --> 01:30:58.600
 Der pädagogische Teil, sowas machen wir jetzt auch.

01:30:58.600 --> 01:31:01.200
 Genau, an Bill Gertz muss man sich auch gewöhnen.

01:31:01.200 --> 01:31:02.680
 Genau, wir belehren.

01:31:02.680 --> 01:31:04.560
 Und ich glaube, wir sind jetzt auch schon am Ende.

01:31:04.560 --> 01:31:11.000
 Das heißt, wir belehren nochmal, bitte, bitte, bitte, liked uns und folgt uns und teilt uns vor allem.

01:31:11.000 --> 01:31:15.660
 Und auch offline erzählt weiter von unserem Podcast.

01:31:15.660 --> 01:31:18.740
 Ist natürlich jetzt zur Zeit gerade ein bisschen schwierig, aber auch im Homeoffice.

01:31:18.740 --> 01:31:23.060
 Es gibt ja bestimmt auch irgendwelche Off-Topic-Slack-Channel oder was auch immer genutzt wird.

01:31:23.060 --> 01:31:25.620
 Nervt eure Arbeitskollegen, postet Links.

01:31:25.620 --> 01:31:31.740
 Ja, oder schreibt eurer Mutter mal einen Brief mit einer auf Schallplatte gepressten Folge von uns oder so.

01:31:31.740 --> 01:31:32.920
 Ja.

01:31:32.920 --> 01:31:33.660
 Das geht auch.

01:31:33.660 --> 01:31:35.160
 Das nehmen wir auch.

01:31:35.160 --> 01:31:43.380
 Das taucht zwar leider bei uns in den Statistiken dann nicht auf, aber falls ihr das macht, gerne mit Foto oder Kommentar an uns, dann werden wir euch erwähnen.

01:31:44.080 --> 01:31:49.260
 Also ich finde, man darf auch offline, also du hast, der Fokus war jetzt irgendwie zu sehr auf online.

01:31:49.260 --> 01:31:53.540
 Nee, ich meine ja auch offline, aber ist halt im Moment gerade ein bisschen schwierig, weil eigentlich gefühlt jetzt alle online sind.

01:31:53.540 --> 01:31:56.880
 Aber ansonsten natürlich gerne offline im Gespräch.

01:31:56.880 --> 01:32:04.180
 Und genau, als Graffiti auf eure Hauswand sprühen, auf euren eigenen Besitz.

01:32:04.180 --> 01:32:07.080
 Auf alle Hauswände, wenn ihr euch traut.

01:32:07.080 --> 01:32:09.400
 Nee, nicht, dann werden wir jetzt nicht hier zum Anschliffen.

01:32:09.400 --> 01:32:11.620
 Nichts Justiziables, nichts Justiziables.

01:32:11.620 --> 01:32:17.380
 Ja, oder so, wie heißen denn diese Graffitis, wo man den Dreck wegnimmt?

01:32:17.380 --> 01:32:17.960
 Kennst du die?

01:32:18.040 --> 01:32:21.160
 Ja, diese, ja, Negativ-Graffitis, oder?

01:32:21.160 --> 01:32:25.280
 Ja, also die Dreck-Weg-Mach-Graffitis, die sind ja auch verboten, darf man ja auch nicht machen.

01:32:25.280 --> 01:32:27.840
 Man darf nicht mal den Dreck wegmachen, das ist auch, ja.

01:32:27.840 --> 01:32:31.360
 Okay, ich glaube, es wird jetzt schon irgendwie, ich glaube, wir sind am Ende.

01:32:31.360 --> 01:32:35.800
 Wir sind am Ende, das wird jetzt auch ein bisschen länger wieder als sonst.

01:32:35.800 --> 01:32:38.020
 Ach was, das ist genau richtig.

01:32:38.820 --> 01:32:39.260
 Ist ja nix.

01:32:39.260 --> 01:32:39.840
 Ist ja nix.

01:32:39.840 --> 01:32:42.540
 Also für Leute, die die Freakshow hören, die lachen.

01:32:42.540 --> 01:32:47.140
 Die hören jetzt gleich hinten dran noch eine Folge, noch eine, leider ist das hier gerade die neueste, aber egal.

01:32:47.140 --> 01:32:49.740
 Ja, damit kommen wir zu Ende.

01:32:49.740 --> 01:32:52.380
 Und, ähm, hast du noch was?

01:32:52.380 --> 01:32:57.980
 Nee, nee, gehabt euch wohl, passt auf euch auf, schaltet gesund wieder ein.

01:32:57.980 --> 01:33:04.300
 Und jetzt kommt noch ein Abschieds-Scheiß, ich seh's schon, ein Abschieds-Ständchen von Moritz.

01:33:04.300 --> 01:33:08.560
 Jetzt spielt aber bitte auch, spielt bitte auch das Outro.

01:33:08.820 --> 01:33:10.740
 Wo es sie jetzt mitspielt.

01:33:10.740 --> 01:33:11.300
 Okay.

01:33:11.300 --> 01:33:12.820
 Ich spiel, ich spiel, ich spiel mit.

01:33:12.820 --> 01:33:14.360
 Bis zum nächsten Mal.

01:33:14.360 --> 01:33:14.660
 Ja, dann.

01:33:14.660 --> 01:33:17.240
 Ciao, macht's gut.

01:33:20.240 --> 01:33:50.220
 Bis zum nächsten Mal.