Folge 5. Heute geht es um CSS-Farbnotationen und die kommende Unterstützung für den LCH-Farbraum.
Herzlich Willkommen bei WoWirSindistVorne!
Frontend-Fakten-Frotzelein!
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Hallo und herzlich Willkommen zu Ausgabe Nummer 5 unserer Osterausgabe sozusagen.
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.
Und wir hoffen, dass das an der Übertragungsqualität ein bisschen was positiv bewirkt. Und außerdem sehen wir uns heute per Webcam.
Hi!
Genau, hello, hello, hello.
Und ich glaube, das wird auch ein bisschen dafür sorgen.
Ich muss kurz mein Bier öffnen.
Ah, schön.
Ah, das kam sogar an, glaube ich.
Ja, klar.
Ja, dann, lass uns mal.
Ich habe heute kein Anstoßgeräusch, glaube ich.
Das klingt scheiße.
Ja, was trinkst du? What's your poison? Wie der Brite sagt.
Ja, wie immer. Das gute alte Wölfle.
Ich habe ein...
Wir werden immer noch nicht gesponsert.
Thema relevantes Bier. Ich trinke Corona.
Ah, tatsächlich.
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.
Dann würde ich auch kein Bier trinken ohne Limette.
Das schmeckt mir eigentlich mit Zitrone sogar besser.
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.
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.
Und es ist Ostern, wie gesagt. Da würde ich sagen, können wir doch auch mal über Eier reden.
Ja, warum eigentlich nicht über Eier reden?
Wir haben nämlich ein kleines Easter Egg auf unserer Website.
Nein, willst du das verraten?
Ja, doch. Ich glaube, nach fünf Folgen kann man da auch mal kurz einen Hinweis geben.
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.
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.
Und dabei gebannt auf seinen Bildschirm schauen.
Ja, gebannt. Das erinnert mich ein bisschen an derbauer.de oder derbauer.com. Erinnerst du dich daran noch?
Nee, das sagt mir nichts.
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.
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.
Ich bin gespannt. Ich mach's jetzt extra mal nicht auf, sonst kackt dir vielleicht alles ab.
Ja, das macht auch Sound.
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.
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?
Und überleg dir mal, eine Webseite macht das plötzlich nachts, wenn du vorm Rechner sitzt und irgendwie an nichts Böses denkst.
Ja, so schlimm ist unser Easter Egg nicht.
Nein, nein, ich find's so schlimm.
Und das ist nett, aber man kann auch ein bisschen Angst kriegen, glaub ich.
Das passt übrigens auch zum Folgentitel der Folge, bei dem's auftritt. Ist mir dann so aufgefallen.
Ah.
War gar keine Absicht, aber ist, äh, ist ganz passend.
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.
Social Media, bitte teilen und liken.
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.
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.
Genau, ich mag Herzchen.
An der Stelle ja auch danke an Klaas, der tatsächlich den ersten Kommentar auf unserer Seite veröffentlicht hat.
Yay!
Jetzt hätten wir eigentlich so einen Applaus-Einspieler noch irgendwie so machen müssen.
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.
Ja, cool. Äh, genau. Letzte Folge haben wir gesagt, es gibt dann Getränke nach Wahl, ähm, an den ersten Kommentator.
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.
Ja, ich auch, aber wir verraten jetzt mal nicht zu viel.
Nö.
Sondern wir machen direkt weiter.
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.
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.
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.
Ä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.
Ä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.
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.
Ä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.
Ä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.
Vielleicht machen wir ja nächstes Jahr mal mit.
Ja, so, auf jeden Fall.
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.
Ä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.
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.
Hast du in freier Wildbahn, äh, gestern was gesehen? Seiten, die da mitgemacht haben?
Ä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,
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.
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.
Ähm, anders zum Beispiel 2006, ähm, da waren es, äh, da zeigt die Liste 763 Teilnehmer. Wow.
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.
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?
Ja, war mal, war mal groß, ja.
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.
Ähm, genau, ich hab noch einen zweiten Retro-Punkt oder möchtest du erst ein Thema?
Ä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.
Ach so, ist, ah.
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.
Äh, du meinst caps lock day?
Ja, caps lock day, ja. Manche Leute schreiben ja sowieso noch mit caps lock auf Twitter, aber.
Ä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.
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.
Es ist schön, dass bei dir caps lock day noch groß geschrieben wird, Moritz.
Ä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.
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,
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.
Was ist, wie ist dir denn so ergangen, Konstantin?
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.
Ä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.
Also Laravel ist ein PHP-Framework für die, denen das gar nichts sagt, ähm, und das ist so ein ganz eigenes Ökosystem.
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.
Ä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.
Also, ähm, Apache-Server, ähm, die ganze Konfiguration, die verschiedenen PHP-Module, die man dafür braucht.
Und, äh, es gibt eine CLI, mit der man das Ganze konfigurieren kann.
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.
Ä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.
Jetzt war der Moritz kurz weg.
Nee, ich bin noch da.
Jetzt höre ich dich doppelt.
Oh, so, jetzt nicht mehr.
Jetzt, okay.
Auf den falschen Knopf gedrückt.
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.
Und so an sich von den Ansätzen her gefällt mir Laravel auch ganz gut.
Ä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.
Ähm, muss ich bei uns eben auch teilweise Backend machen.
Ä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.
Ähm, auf Mavo, sagt dir das was? M-A-V-O.
Ich weiß gar nicht, ob Framework der richtige Begriff dafür ist, ähm, mavo.io.
Ä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.
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.
Ich seh gerade, meine Browser-History sagt, ich war schon mal auf der Seite, wie auch immer das sein kann.
Wahrscheinlich auch über den Artikel, vielleicht hast du mal draufgeklickt.
Ja.
Da ist es nämlich auch verlinkt.
Ähm, das klingt echt spannend.
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.
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.
Also um Gedanken irgendwie aufzuschreiben, ähm, aber auch Bilder und sowas ist auch alles kein Problem, kann man dann bei Drag & Drop hochladen.
Ä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.
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.
Alleine durch Attribute und durch eine bestimmte Syntax, die man in den Attributen dann verwendet.
So ein bisschen wie, äh, geschweifle Klammer in React oder, äh, in Vue.
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.
Ähm, klingt so ein bisschen nach, äh, offline first vielleicht, also du sagst, es wird alles im Local Storage gespeichert, also das heißt.
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.
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.
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.
Ähm, aber es ist ja sehr, sehr schnell was im Local Storage gespeichert.
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.
Weiß ich gar nicht, ob man das Out of the Box damit machen kann, aber, ja, könnte man sich mal anschauen.
Cool.
Ja, dann, äh, achso, hast du noch was dazu?
Nee, nee, ich, äh, ich, äh, mir fiel gerade auf, da, da ist noch ein komisches Datum, äh, in der Retro.
Ein komisches Datum in der Retro.
Ja, das, äh, mach, mach einfach weiter.
Ja, und zwar hatte, äh, Windows 3.1 Geburtstag am 6. April.
Am 6. April 1992 ist das nämlich rausgekommen.
Ä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.
Genau, 92, äh, 92, das heißt, das sind jetzt, ich bin so gut in Mathe, äh, 28 Jahre.
28 Jahre.
Wahnsinn.
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.
Und zwar kann man Windows 3.11 im Browser ausführen.
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.
Und da kann man eben nicht nur alte Spiele spielen, sondern da kann man tatsächlich auch Windows 3.11 laufen lassen.
Und, äh, es dauert ein bisschen, es fühlt sich so ähnlich an, wie wenn man damals Windows über Disketten installiert hat, ja.
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.
Und wenn es dann geladen ist, dann läuft das aber im Browser.
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ß.
Ja, Solitaire, das hatte damals die geilsten Effekte, wenn du das zum Ende gespielt hast.
Mit den Karten, ja.
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.
Nee, wirklich, also das war auch so eine Art geiles Easter Egg da.
Ja, und es gab kein Startmenü, das war mir auch nicht mehr bewusst.
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,
Icon war, was dann ein Fenster geöffnet hat und da drin waren dann alle Programme, die ich dann da raus starten konnte.
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.
War mir auch nicht mehr bewusst.
Die Opas erzählen vom Krieg oder die Opas erzählen vom Browser-War, aber der Browser-War war erst später.
Genau.
Ja, hast du noch was?
Ich habe nichts mehr für die Retro, das bedeutet, wir kommen jetzt zu die Property der Woche.
Das war perfektes Timing.
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.
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.
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.
So kurz aus dem Bauch raus, sagt dir das was?
Ich habe es auf meiner Seite sogar im Einsatz.
Also du bist darüber im Bilde, ist nichts Neues für dich?
Sagen wir mal so, ich bin Best Practices gefolgt, ich habe nicht in der Tiefe mir angeschaut, warum man das jetzt so machen muss.
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.
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.
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.
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,
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.
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,
die ja vielleicht auch ähnlich aussehen kann, ohne dass ich das merke, dann kriege ich das gar nicht mit, dass da was passiert ist.
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.
Das heißt, ich kann sagen, window.opener.location.href ist gleich meine Phishing-Seite.
Und besonders gefährlich ist das Ganze natürlich bei user-generierten Inhalten.
Das heißt, irgendwelche Communities oder was, wo die Leute eben ihren eigenen Content posten können und auch Links posten können.
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.
Und, also man liest in den Artikeln immer wieder so, user-generated Content wäre da besonders gefährlich, will ich auch nicht abstreiten.
Aber theoretisch kann jeder Link, der auf irgendeiner Seite auch vom Webmaster selber, Webmaster, den Begriff habe ich auch schon lange nicht mehr verwendet.
Webmaster, ich habe gerade auch schon gedacht.
Das ist auch wieder so retro 90er-Sprech.
Jedenfalls vom Seitenbetreiber selbst gepostet wird.
Die Zielseite kann auch mal irgendwie gehackt werden.
Und dort kann dann eben bösartiger Content untergebracht werden, der mich dann auf dem anderen Tab weiterleitet.
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.
Ein Bug-Ticket bei Chromium.
Und man müsste man denken, 2012, oh dann ist das ja schon so alt, ist wahrscheinlich gar nicht mehr relevant.
Oder wieso ist der Konstantin so doof und hat sowas immer noch nicht mitbekommen, obwohl das schon so lange existiert.
Das betrifft aber auch nicht nur Chromium, sondern es läuft durch alle Browser hinweg.
Und Gecko gibt es ein Ticket dazu, ich verlinke auch die einzelnen Tickets bei uns in den Shownotes.
Gecko, das Ticket ist von November 2015 und von Webkit auch 2016 im März.
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.
Also man sieht zwischen der Meldung und dem Fix sind drei Jahre vergangen, das fand ich ganz schön heftig.
Und das liegt eben daran, eigentlich war es standardkonform umgesetzt von allen Browsern, deswegen war es auch einheitlich in allen Browsern angreifbar.
Das heißt, man musste sich erstmal einig werden darüber, wie man dem Ganzen jetzt begegnen möchte.
Und es gab schon das, na wie heißt das andere, nicht No-Opener, sondern No-Referrer.
Genau, dass kein Referrer mit gesendet wird und dann hat man sich eben darauf geeinigt, dass man dieses No-Opener-Weldung hinzufügt.
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.
Aber klar, wenn da erst irgendwelche Standards angepasst werden müssen, dann dauert das entsprechend lange.
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.
Aber auch der war betroffen, also wirklich alle großen Browser hinweg.
Ja, No-Referrer ist mir jetzt gerade die Tage über den Weg gelaufen, mal wieder.
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.
Weil, also im Zusammenhang mit, ist das denn eigentlich sicher?
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,
aber es hält einen ja keiner davon ab, eine alte Browser-Version zu verwenden, die das einfach nicht implementiert hat.
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.
Um irgendwelche bösen Sachen zu machen, also No-Referrer, man sollte sich offenbar nicht zu 100% drauf verlassen.
Das war so irgendwie da der Konsens.
Das heißt, wenn man wirklich sicherheitsrelevante Sachen hat, sollte man noch einen De-Referrer einbauen.
So eklig das ist. Also so eine De-Referrer-Seite für die, die nicht wissen, was das ist, ist so der Klassiker.
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,
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,
du gehst jetzt übrigens und wir leiten dich jetzt weiter, aber der ursprüngliche Link ist nicht mehr erkennbar.
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.
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.
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,
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.
Man sieht immer noch oft Links auf externen Seiten, die das trotzdem nicht setzen. Aber ich werde jetzt drauf achten, ganz gezielt.
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.
Genau, weil ich glaube, das war Webhint.io. Das ist ein ganz interessantes Tool. Kanntest du das?
Nee, sag mir nix, nee. Aber kannst du gleich mal in die Shownotes setzen.
Genau, das packe ich gleich mal rein. Webhint.io ist, glaube ich, von, muss ich gerade nochmal nachschauen, von Microsoft?
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.
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.
Also es ist ganz, ganz nett. Einfach nur URL reinwerfen und dann kriegt man eine Menge interessanter Informationen.
Genau, das noch als Ergänzung.
Ja, das war's eigentlich auch dazu. Wie gesagt, achtet da in Zukunft drauf, dass ihr das implementiert.
Und nach dem nächsten Spam-Spot geht's weiter.
Hallo, das hier ist keine Nachricht. Das ist die letzte Erinnerung.
Sie haben noch ungefähr 15 Minuten, um ihr neues Konto zu aktivieren.
Alles ist eingerichtet und startbereit.
Sie haben auf zahlreiche E-Mails nicht geantwortet und einige Zahltage verpasst.
Klicken Sie hier und erhalten Sie.
Ansonsten erfreut sich ein anderes Mitglied daran, wenn Sie es nicht möchten.
Danke.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Jetzt habe ich natürlich noch reingelacht.
Macht ja nix.
Danke wieder für diesen mega genialen Spam-Spot.
Mal wieder ein Spot auf Basis eines Textes, den, glaube ich, ich bekommen habe.
Ich glaube, das hast du sogar eingetragen, ja.
Ich glaube, das war eine Spam-Mail, die ich mal bekommen habe.
Wir sammeln da immer fleißig lustige Spam-Texte.
Und der Konstantin hat die bisher immer sehr genial vertont.
Danke, danke.
Also vielen Dank nochmal an der Stelle.
Allein das ist schon ein Highlight. Das ist schon ein Grund, unsere Sendung zu hören.
Auf jeden Fall. Nur deswegen.
Damit kommen wir wahrscheinlich jetzt dann auch schon zum Thema, weil das ist ja die Werbung vom Thema.
Genau, das Thema der Woche.
Hier ist WWS IV mit dem Tagesthema.
Ja, höchst professionell.
Ja, das hat der Moritz wieder gemacht.
Ja, es klingt ein bisschen dröge.
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.
Weil gut Blockflöte spielen, ich habe zu gut gespielt, deswegen, also ich muss noch ein bisschen mehr üben, schlecht zu spielen, glaube ich.
Nee, also das ist eine Kunst, die wirklich unterschätzt wird, meiner Meinung nach.
Wirklich so glaubwürdig, so zu spielen, irgendein Instrument zu spielen, dass es glaubwürdig schlecht wirkt.
Also wie ein Achtjähriger an Weihnachten.
Ja, aber versuch das mal nachzumachen.
Wenn du ein Instrument beherrschst, absichtlich schlecht zu spielen, ist echt, also gut, ich beherrsche die Blockflöte nicht.
Nein, nein.
Das ist interessant, ich habe bisher noch niemanden getroffen, der von sich behauptet, die Blockflöte zu beherrschen.
Nee, aber ich habe tatsächlich ein Profimodell mir ausgeliehen dafür.
Oh, okay.
So, warte mal kurz.
Du musst mal ganz kurz überbrücken, dann hole ich es mal und zeig es dir.
Oh Gott, wie soll ich den jetzt überbrücken? Ich kann was singen oder rappen?
Du kannst zum Beispiel schon mal sagen, was unser Thema der Woche ist und dann kommen wir noch mal kurz zur Flöte.
Ja, ich habe eh noch was zu sagen.
Das Thema der Woche machen wir diesmal etwas anders.
Bisher hat es immer einer von uns beiden vorbereitet und darüber referiert und es war relativ wenig Interaktion.
Und wir haben das diesmal ein bisschen anders gemacht auf Basis eines Artikels, den wir beide gelesen haben.
Ein Artikel, relativ aktuell sogar jetzt von Anfang an April, von Lia Varou mit dem Titel
LCH Colors in CSS – What, Why and How.
Das heißt, das ist unser Ausgangspunkt.
Es geht aber insgesamt um CSS-Farbsysteme und im Speziellen eben um diesen LCH-Farbraum.
Ja, cool.
Danke fürs Überbrücken.
Perfekt, ich bin wieder da.
Der Moritz ist da und zeigt mir seine Blockflöte.
Genau, ich zeige dir meine Blockflöte.
Ich meine, wie gesagt, nur ausgeliehen.
Was das Profi daran ist, ist, die hat die, also ich weiß nicht, die meisten werden ja wahrscheinlich
schon mal eine normale Blockflöte gesehen haben.
Und in diesem Falle, das Profi-Modell hat die beiden unteren Löcher, sind quasi Doppellöcher.
Das heißt, man kann sie quasi halb zuhalten.
Und was ich daran wirklich erstaunlich fand bei dieser Flöte, war tatsächlich eine Gebrauchsanleitung
dabei.
Und zwar tatsächlich, wie man welche Töne spielt.
Da sind genau die Griffe drauf.
Und man kann tatsächlich auf dieser Flöte, also ich dachte ja immer so eine Blockflöte,
das ist einfach, das ist eine C-Dur-Tonleiter, da geht sonst nichts drauf.
Naja, aber du kannst mit bestimmten Tricks und Kniffen und ab und zu mal zwischendrin ein
Loch frei halten und dann irgendwie unten nur ein halbes oder so, kannst du tatsächlich so gut
wie jeden Ton spielen.
Also du kommst einmal durch die chromatische Tonleiter damit durch, was ich ziemlich beeindruckend
finde.
Also das ist, glaube ich, ein unterschätztes Instrument.
Was man hier noch alles lernen kann bei uns.
Also ab nächster Folge ist das Ganze hier übrigens ein Blockflöten-Tutorial.
Genau.
Und hier noch kurz meine Impression auf jemand, der nicht Flöte spielen kann.
So, so weit bin ich gekommen mit.
Das war doch schon mal ganz schlecht.
Ja, das ist, äh, das, äh, ja genau.
Gut, okay.
Wir sind ein Audio-Podcast, hier muss es auch was Schönes für die Ohren geben.
Ja, deswegen reden wir jetzt auch über Farben, weil man das so wunderschön beschreiben
kann.
Ähm.
Ich glaube, ich muss mir gleich noch ein Bier holen.
Okay, ja.
Äh, äh, Farben, Farben.
Farben, genau.
Weil du, weil du gerade, weil du gerade angefangen hast und, äh, weil ich dich jetzt ein bisschen
alleine gelassen habe, dann fange ich vielleicht einfach mal an jetzt.
Ähm, also ich habe mir überlegt, also wir haben das unabhängig voneinander vorbereitet.
Wir wissen nicht, was der André jeweils vorbereitet hat, genau.
Ähm, deswegen kann es sein, dass wir ein bisschen Überschneidung haben.
Das drückt sich ganz gut, weil ich habe nichts vorbereitet und habe dich alles machen lassen.
Ja, genau.
Wie Helge Schneider gesagt hat, ich habe nichts vorbereitet, da kann auch nichts schief gehen.
Übrigens, Helge Schneider, nochmal bei den Instrumenten zu bleiben, der große Gott der
Leute, die Instrumente, die Instrumente beherrschen, aber es vermögen sie so zu spielen, dass es
so wirkt, als könnten sie es nicht.
Und dann aus Versehen trotzdem die Töne treffen.
Also scheinbar aus Versehen.
Das ist wirklich der große Meister.
Ich glaube, der spielt auch so ziemlich jedes Instrument, das es auf dieser Welt gibt.
Genau, wir spielen jetzt die Klaviatur der Farben.
Und zwar.
Wow.
Ja, nicht schlecht, ne?
Habe ich mir nicht vorher ausgedacht.
Genau, also worauf ich ein bisschen eingehen wollte, ist so am Anfang mal ein bisschen Farbtheorie.
Also ganz, ganz, ganz low level, dass wir auch jetzt nicht nur über einen verrückten
neuen Farbraum reden, der noch in keinem Browser implementiert ist, sondern mal so generell
auch für, weil wir durch unseren Kommentar wissen, hier sind auch zum Beispiel Azubis,
die zuhören.
Also mal ein bisschen was über Farben allgemein.
Wie funktioniert das denn überhaupt mit dem Monitor?
Also ganz, ganz grob allgemein.
Es gibt ja die additive und die subtraktive Farbmischung.
Ich denke, davon sollte man in der Schule eventuell schon mal gehört haben.
Wir sind ein Ü18-Podcast, also setze ich das mal voraus.
Additive Farbmischung funktioniert mit Licht.
Das bedeutet, verschiedenfarbiges Licht addiert sich auf, am Ende zu weiß.
Und subtraktive Farbmischung wird normalerweise mit Partikeln gemacht, also zum Beispiel aus
dem Farbkasten werden verschiedene Farben zusammengemischt.
Und das endet normalerweise, also in der perfekten Welt, wendet das in Schwarz, wenn ich alle Farben
zusammen mische.
Aber meistens ist es eher so ein dreckiges Braun.
Momentan ist es so, dass die normalen gängigen Monitore normalerweise pro Farbe, also Rot, Grün und Blau
sind die Farben, die in einem Monitor vorkommen, RGB, normalerweise pro Farbe 256 verschiedene Farbabstufungen haben
oder zumindest haben sollten, laut Definition.
Ich weiß nicht, ob das wirklich immer so ist.
Es ist auch schwer nachzuvollziehen, 256 verschiedene Helligkeitsstufen von jedem einzelnen Pixel nachzuvollziehen.
Daher weiß ich nicht, ob es wirklich so ist, aber so sollte es sein.
Dazu kommt bei vielen Farben noch ein Transparenz-Layer.
Das kommt dann zum Tragen, wenn man verschiedene Farben kombiniert und übereinander legt.
An der Stelle noch ein kleiner Einschub, weil wir vorhin irgendwie die Opas erzählen von den Browser Wars waren.
Alte Grafikchips, ich erinnere mich noch daran, so ein riesiger alter Rechner, das war der erste Computer, an dem ich saß.
Da war das noch ein Ding, wenn die bestimmte Farbräume konnten.
Also so der derzeitige RGB-SRGB-Farbraum mit, glaube ich, 16,7 Millionen Farben, das konnte damals nicht jeder Rechner.
Also ich bin mir jetzt nicht sicher.
Konstantin, weißt du, was der C64, wie groß der Farbraum da war?
Das waren wahrscheinlich so 32, ich weiß es nicht genau, wenige Farben.
Ich erinnere mich noch an die Ära 256 Farben, das ist auch in GIFs noch der Fall.
Das heißt, ein GIF kann normalerweise nur 256 verschiedene Farben, die können aber vorher definiert werden, welche es sind.
16,64, 16 Farben.
16 Farben sogar nur.
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.
An der Stelle noch ein kleiner Querverweis nochmal zur letzten Folge, also zur Folge Nummer 4, wo wir über Accessibility gesprochen haben.
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.
Das ist aber genug mit alten Sachen, jetzt reden wir über aktuelle Sachen.
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.
Ich wollte jetzt mal so über die Farbsysteme, die es im Browser gibt, sprechen, also in CSS.
Was ist denn, fangen wir mal so an, machen wir mal ein bisschen Interview, was ist denn dein Lieblingsfarbname?
Mein Lieblingsfarb, ach du meinst von den benamten CSS-Farben?
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.
Ich kann dir meine Lieblingsfarben in Hex-RQ-Codes nennen.
Nee, nee, nee, das gilt nicht.
Okay, dann sage ich mal kurz meine.
Also ich bin großer Fan von Peach Puff, das benutze ich gerne, aber nur wegen dem Namen.
Hot Pink ist auch super.
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.
Es gibt aber auch so die ganz klassischen Farbnamen, White, Black, Blue, Brown, Yellow und so weiter.
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.
Das erinnert mich schon wieder an mein Data-Backer-Buch, mit dem ich HTML gelernt habe, irgendwann in den 90ern.
Da war auch so eine Tabelle, wo man die ganzen Farbnamen aufgelistet bekommen hat.
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.
Und deswegen erinnert mich das gerade an die alte Zeit.
Aber jetzt fangen wir schon wieder an, in alten Zeiten zu schwelgen.
Ja, da sind wir irgendwie, irgendwie sind wir heute so auf der Vergangenheit hängen wir da irgendwie.
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.
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.
Kann man heute auch noch bei Photoshop anschalten?
Tatsächlich.
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.
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.
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.
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.
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.
Also ich habe dann zum Beispiel FF-0000 wäre halt ein Knallrot, also voll Rot und 0 Grün und 0 Blau.
Genau, also vielleicht noch, wenn jemand Hex jetzt nicht so geläufig ist, also 255 wäre dann FF und 0 logischerweise 0.
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.
Also Coffee ist zum Beispiel Türkis.
Schade, dass es nicht gerade braun ist, aber.
Also Chrome hatte in seinen DevTools mal als Standardwert, da drinstehen, DA-Code, also D-A-C-0-D-E.
Aber logischerweise kann man nur Worte schreiben, die irgendwie bis F gehen, beziehungsweise wenn man noch einzelne Zahlen dazwischen tut, die aussehen wie Buchstaben,
dann kann man noch ein bisschen mehr schreiben, wie in dem Fall das 0 als O.
Genau, jetzt gibt es verschiedene Möglichkeiten, Hexfarben zu schreiben.
Also ich kann tatsächlich die sechs Stellen ausnutzen, also zwei Stellen pro Farbe, also Rot, Grün und Blau.
Ich kann aber auch sogenannte Shortcodes benutzen, also statt FF-0000 kann ich zum Beispiel auch schreiben F00.
Das geht dann noch weiter, wenn ich Transparenzen hinzufügen will.
Jetzt bin ich gespannt, jetzt kommt der erste Punkt, wo ich nicht weiß, ob das jeder schon wusste.
Mir ist das mal in Inkscape über den Weg gelaufen und ich dachte dann, naja, Inkscape Vektor-Grafikprogramm,
kann sein, dass das irgendwie ein Standard ist in SVG, weil das am Ende seine Daten in SVG speichert.
Muss ja nicht sein, dass es im Browser funktioniert.
Ich habe es dann in diversen Browsern mal ausprobiert und war erstaunt, dass es geht.
Also ich habe später noch die Can-I-Use-Statistik für die einzelnen Notationsmöglichkeiten für die Farben.
Bin ich gespannt, ob die dabei ist.
Kennst du die Hex-Notation mit Transparenz dabei?
Ja.
Gut.
Nein, nicht gut.
Aber auch tatsächlich ursprünglich aus Inkscape, also in dem Zusammenhang auch das erste Mal.
Ja, genau.
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.
Und da kann ich dann zum Beispiel auch, also genau, 0 wäre dann komplett transparent und F wäre komplett sichtbar.
Das hätte ich da dann noch dabei, also der Alpha Channel sozusagen von der Farbe.
Das Ganze geht auch als Shortcode, also das wäre dann ein vierstelliger Shortcode, also zum Beispiel D0C4.
Weiß ich jetzt nicht genau, was für eine Farbe das ist.
F004 wäre ein sehr schwaches Rot, was dann vom Hintergrund abhängt, wie das dann genau aussieht.
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.
Und da würde ich gerne wissen, ob du da wusstest, dass es da auch zwei verschiedene Schreibweisen gibt.
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.
Da ist aber, das nehme ich vielleicht schon mal weg, die Abdeckung ist…
Aber da gibt es nochmal zwei verschiedene.
Ach, gibt es auch nochmal, okay, dann gehe ich nachher auf die Verbreitung ein.
Es gibt eine Komma-Schreibweise, also RGB 255,0,153,1 oder so.
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.
Mit Kommas dazwischen, es gibt aber auch eine Variante ohne Komma mit Leerzeichen.
Das war mir nicht bekannt, bis ich die MDN gelesen habe.
Okay, das wusste ich auch nicht.
Weißt du, wie da die Unterstützung ist, ob das überall funktioniert?
Ich habe es nur in Firefox ausprobiert, da hat es funktioniert.
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.
Das Ganze, man kann den Alpha-Wert interessanterweise auch mit Prozent schreiben, also zwischen 0 und 100 Prozent in dieser Schreibweise.
Und dann gibt es noch was ganz Abgefahrenes, wo ich nicht ganz 100 Prozent verstanden habe, wie es funktioniert.
Falls es jemand verstanden hat, der zuhört, ihr dürft mir da gerne mal schreiben.
Und zwar, ich lese einfach jetzt mal vor, was für ein Beispiel ich da gefunden habe.
Und zwar RGB, Klammer auf, 1E2, Leerzeichen 0,5E1, 0,5E0, plus 0,25E2 Prozent, Klammer zu.
Ja.
Ist das nicht irgendwie Exponential, aber warum sollte man das tun wollen?
Ja, genau, das habe ich auch gedacht.
Aber ja, ihr könnt ja gerne mal in MDN reinschauen.
So tief wollte ich dann doch nicht reinlesen.
Aber ich fand es echt interessant, dass es da einige Schreibweisen gibt, die ich noch nie gesehen habe.
An der Stelle noch mein Proposal, was ich mal hatte.
Ich hätte ja gerne auch einen Shortcode, den es nicht gibt mit Hex.
Und zwar hätte ich nämlich gerne einen zweistelligen Shortcode mal gehabt.
Kannst du dir vorstellen, was der dann tut?
Der dann nie aufgelöst wird? Nee.
Naja, der macht am Ende nur Grauwerte.
Und zwar ist das dann dreimal der gleiche zweistellige Wert.
Also wenn ich jetzt zum Beispiel D3 schreibe, wäre das dann D3, D3, D3.
Fände ich cool, muss aber nicht sein.
Würde sich aber auch beißen mit der Alpha-Variante, weil dann wäre, glaube ich, nicht mehr klar, was was ist.
Hast du mal ausprobiert, was passiert, wenn du zweistellige Werte nimmst?
Nee, habe ich ehrlich gesagt nicht ausprobiert.
Machen wir mal schnell.
Genau.
Ganz am Ende noch zu erwähnen.
Ich habe vorhin gesagt, passiert nichts.
Ich habe vorhin gesagt, man kann lustige Wörter damit schreiben.
Es gibt eine Seite, die sich dem verschrieben hat, lustige Farbcode-Wörter zu sammeln, also die tatsächlich Hex sind.
Und die heißt Badass.io, beziehungsweise B-A-D-A-5-5.io.
Und da gibt es lustige Wörter, die man mit Hex-Werten schreiben kann.
Zum Beispiel Idiots, Boobs, FBI, LOL, Diesel, Coffee hatten wir vorhin schon, Failed-Ass und Oracle.
Eines sind noch einige mehr, aber das verlinken wir mal in den Show Notes.
Das ist ganz witzig, da reinzugucken. Das ist eine ganz coole Idee.
Genau, RGBA sind wir vorhin schon drauf eingegangen.
Vielleicht willst du was zur RGBA sagen?
Nee, ich habe, wie gesagt, dann später noch einfach die Auflistung, was wie unterstützt wird.
Okay, dann erzähle ich kurz was zur RGBA.
RGBA ist explizit mit Alpha-Kanal, also mit der Transparenz noch mit dabei.
Das wäre dann in dem Fall, ich schreibe RGBA, Klammer auf, 255, 255, 255.3 oder so.
Dann hätte ich 30-prozentiges Weiß.
Was es aber da auch gibt, was mir dann auch zum ersten Mal begegnet ist,
ist, dass ich da auch Prozentzahlen schreiben könnte.
Also ich kann schreiben RGBA, Klammer auf, 100%, 0%, 0%, 0%, 50% oder so.
Also sowohl bei den Farbwerten als auch bei den Transparenzwerten kannst du auch mit Prozent arbeiten.
Ja, bei allen.
Aber ich glaube, ich darf sie nicht mischen.
Also wenn, dann muss ich mich für eins entscheiden.
Ja, macht auch Sinn.
Ja, genau.
Aber das fand ich ganz interessant, weil, also ich meine, klar, damit kriegt man nicht so,
wahrscheinlich nicht so genau den präzisen Wert hin.
Oder da müsste man vielleicht so mit komischen Kommaprozentzahlen arbeiten,
um dann einen genauen Wert zu kriegen.
Aber so, wenn man, wenn es einem nicht so wichtig ist, dass genau exakt die gleiche Farbe am Ende rauskommt,
finde ich dieses Prozentmodell eigentlich ganz nett.
Also da kann man, glaube ich, ganz, ganz nett mit rumspielen.
Da gerade, wenn man Farben irgendwie dynamisch generiert oder gestaltet oder miteinander mischt oder was weiß ich,
dass man da dann eher mit Prozentwerten spielt vielleicht.
Also wenn ich jetzt irgendwie eine Farbpalette zusammenstellen will oder was weiß ich.
Aber da kommen wir vielleicht auch später noch im Zuge von diesem neuen Farbsystem drauf.
Ja, also ich erzähle jetzt, ja, ich mache nochmal kurz ein bisschen weiter.
Und zwar, was gibt es denn noch?
Also ich komme jetzt dann, also RGBA abgehandelt, eigentlich relativ easy.
Wie gesagt, zum RGB kommt einfach nur der Alpha-Kanal, also die Transparenz noch mit dazu.
Dann gibt es noch das Farbsystem HSL, beziehungsweise HSLA.
Das steht für Hue, Saturation und Lightness, also Farbton, Farbsättigung und Helligkeit.
Und ebenfalls eben noch das A, halt wieder für den Alpha-Kanal.
Letzten Endes ist das nur eigentlich ein anderer Weg, die gleichen Farben zu beschreiben wie in RGB.
Das kann dann zum Beispiel so aussehen, HSLA, Klammer auf, 270,60%, 50,15% oder so.
Sieht sehr ähnlich aus wie das, wie RGB, beziehungsweise RGBA von der Schreibweise her.
Ist aber ganz interessant, weil man vermeintlich da dann zum Beispiel einfach nur die Helligkeit von der Farbe anpassen kann.
Aber da kommen wir später noch dazu, ob das wirklich gut funktioniert.
Also man kann dann theoretisch sagen, naja, ich will den gleichen Farbton haben,
aber in zwei verschiedenen Helligkeiten oder in zwei verschiedenen Sättigungen und muss dafür nur einen Wert ändern.
Das geht mit RGBA so an der Stelle nicht.
Ich glaube, wir müssen uns ein bisschen beeilen.
Ich darf nicht so viel jetzt so altes Zeug erzählen.
Ja, wir gehen schon sehr in die Tiefe, ja.
Aber wie gesagt, es hören uns ja auch Leute unterschiedlichster Kenntnisstände zu.
Und von daher ist das vielleicht gar nicht schlecht.
Man kann es ja auch überspulen ein bisschen.
Ja, nein, nicht überspulen, auf keinen Fall.
Jede Sekunde ist wertvoll.
Einfach doppelt so schnell anhören?
Nee, halb so schnell, weil jede Sekunde hast du doppelt so viel von jeder Sekunde.
Ich versuche auch ein bisschen schneller zu reden, damit sich auf keinen Fall auf die Idee kommt,
das irgendwie viel zu schnell anzuhören, weil dann versteht man einfach nichts mehr.
Ja, also was mir noch aufgefallen ist, was ich selten benutze, aber was immer wieder interessant ist, dass es das gibt.
Es gibt natürlich noch so Farbschlüsselwörter, nenne ich das mal.
Wenn du jetzt Color hast, Color in CSS Transparent, das ist wahrscheinlich so das Prominenteste an der Stelle.
Aber es gibt zum Beispiel auch sowas wie Current Color.
Kennst du das, Current Color?
Kannst du kurz erklären, wie es funktioniert?
Oh je, jetzt bringst du mich über hier.
Okay, dann erklär, kein Problem.
Wenn du es vorbereitet hast, erklär es lieber du, bevor ich irgendwie Schluss erzähle.
Aber ja, ich verstehe das Konzept dahinter.
Ich habe es auch schon eingesetzt.
Also wenn ich zum Beispiel, ich bin gerade mal überlegen, was ein sinnvolles Beispiel wäre dafür.
Current Color ist im Prinzip einfach die Farbe, die der Text hat an der Stelle.
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.
Automatisch zieht das das mit an.
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.
Dann würde ich da eine spezielle Klasse setzen, die dann eben die Current Color setzt als Textfarbe.
Ja, aber wenn ich ein Button-Element habe, hat das ja auch schon eine Standard-Textfarbe.
Wahrscheinlich funktioniert das an der Stelle nicht.
Ich habe das mal eingesetzt für SVGs.
Das war mal so ein Hack.
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.
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.
Jetzt möchte ich aber vielleicht noch eine zweite Farbe übergeben.
Ich will jetzt nicht, dass das Icon nur eine Farbe hat, aus irgendeinem Grund brauche ich jetzt zwei verschiedene Farben.
Und dann kann man das mit Current Color noch machen, weil die kann man da drin nämlich auch ansprechen.
Das war mein Anwendungsfall, wofür ich das mal gebraucht habe.
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.
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.
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.
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.
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.
Bei Kinder Use habe ich jetzt nichts dazu gefunden, aber dann lese die Speck.
Genau, lese die Speck, also die Speck oder halt diese wunderbare MDN-Seite, wo diese ganzen schönen Farbbeispiele mit drauf sind.
Okay, damit bin ich, mit dem Grundlagen bin ich damit fertig.
Jetzt lass uns ein bisschen...
Lass uns mal auf den Artikel im Speziellen eingehen, der ja eigentlich unsere Ausgangslage war.
Und zwar stellt Elia Verruda den LCH Farbraum vor.
Und das steht im Gegensatz zu HSL für Lightness, Chroma und U.
Das heißt, U und Lightness haben wir auch wieder wie bei HSL, es funktioniert aber ein bisschen anders als bei HSL.
Und warum braucht man das überhaupt?
Warum muss man jetzt schon wieder einen neuen Farbraum da implementieren?
Die Sache ist die, dass die Bildschirme in ihrer Darstellbarkeit und in dem Umfang der Farbräume mit den Jahren immer besser geworden sind
und immer kräftigere Farben darstellen können, immer mehr Farben darstellen können.
Aber im CSS haben wir aktuell keine Möglichkeit, diese alle darzustellen, sondern uns fehlt ein Drittel des aktuell möglichen Farbraums.
Und das ist schon eine ganze Menge.
Und das sind nicht irgendwelche Farben, die da fehlen, sondern das sind besonders die brillantesten Farben, die wir darstellen können.
Und das ist natürlich schade.
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.
Also auf neuen Monitoren, das muss man dazu sagen.
Also es geht da so um HDR-Farbraummonitore, die mehr darstellen können als nur den sRGB-Farbraum.
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,
sondern wenn der Monitor das technisch überhaupt nicht darstellen kann, dann habe ich dadurch natürlich nichts gewonnen.
Aber es geht eben darum, die Farben ansprechen zu können auf den Bildschirmen, wo sie auch tatsächlich darstellbar sind.
Und das geht aktuell nicht, weil die Farbräume beschränkt sind auf sRGB, auf den Farbraum.
Und da gibt es eben jetzt diese Spezifikation, die geschrieben wurde, um diesen neuen Farbraum einzuführen.
Und es ist so, dass Safari aktuell schon kurz davor ist oder am Implementieren schon ist.
Also es ist noch nicht im Browser drin, aber es wird wohl daran gearbeitet aktiv.
Chrome hat es auf jeden Fall vor zu implementieren und bei Firefox, da ist man noch am diskutieren.
Aber ich denke mal, wenn Safari und Chrome da schon mal vorgezogen sind, dann wird das nicht lange dauern, bis Firefox da mitzieht.
Ja, also denke ich auch.
Also das ist auf jeden Fall, es ist eine Sache, wo ich mir sehr wünsche, dass das schnell irgendwie umgesetzt wird,
auch wenn das jetzt momentan noch in einem starken Anfangsstadium ist.
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.
Ich kann gar nicht verstehen oder mir war gar nicht klar, dass das bis die ganze Zeit gar nicht ging,
dass man da im Browser ganz viele Farben gar nicht darstellen kann, die dann, nehme ich mal an, Video einfach schon kann.
Ich weiß das gar nicht genau. Also es muss ja, weißt du zufällig, was diverse Videoformate für Farbräume unterstützen?
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.
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.
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.
Aber das ist eine gute Frage, ja. Also ich meine, es muss ja die Möglichkeit schon geben, per Videoformaten HDR-Bildschirme anzusprechen.
Und auch die Streaming-Anbieter bieten das ja teilweise an, nicht nur VK, sondern auch HDR anzusprechen.
Das heißt, es muss auf jeden Fall technisch möglich sein. Und ich denke mal, dass das mit H.265 dann realisiert wird.
Ja, genau. Also irgendwo muss es das schon geben, weil sonst wären die Monitore ja ziemlich sinnlos.
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.
Genau. Ich wollte mal kurz auf die Begrifflichkeiten eingehen. Ich weiß gar nicht, hast du schon gesagt, was die Abkürzung LCH ist?
Genau, also Lightness, Chroma und U.
Lightness, Chroma und U.
Also Helligkeit, Farbsättigung und Farbton auf Deutsch.
Ja, genau. Klingt erstmal ein bisschen nach HSL. Ist es aber nicht, weil HSL ja wie gesagt nur den normalen Standard-SRGB-Farbraum abdeckt.
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.
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.
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.
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.
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.
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.
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.
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.
Also da kann man nicht einfach die Grad-Werte übernehmen.
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.
Genau. Also hier steht explizit, Chroma is theoretically unbounded. Also das hat keinen Maximalwert.
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.
Wie hell kann oder wie gesättigt kann denn eine Farbe überhaupt auf dem Display dargestellt werden?
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.
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.
Da kannst du irgendwie, kannst du mal ausprobieren, kannst du mal gucken, wie hoch du gehen kannst.
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.
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.
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.
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.
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.
Also zum Beispiel, warum die Farben in Firefox momentan ein bisschen besser aussehen als in Chrome oder Safari.
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.
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.
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.
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.
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.
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.
Da wird, glaube ich, der Farbraum angegeben, oder?
Ja, P3 ist, glaube ich, eine Spezifikation, welchen Umfang an Farben Bildschirme darstellen können.
Also, ich sehe halt in dem Color Picker, dass man das explizit wohl angeben kann in diesem Farbwert.
Also, offenbar kann man den Farbraum, den man anspricht oder den man beabsichtigt anzusprechen, explizit angeben.
Aber, wie gesagt, das ist jetzt so tief, habe ich mich da jetzt nicht reingewühlt an der Stelle.
Ja, du hast auch schon gesagt, es funktioniert ähnlich oder analog zu unserer menschlichen Sehwahrnehmung.
Und was das jetzt konkret bedeutet ist, der Farbabstand ist von der Farbwahrnehmung her einheitlich.
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.
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.
Hab ich gerade ein bisschen rausgebracht.
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.
Das heißt, wenn ich ein Rot heller mache und dunkler, dann verändert sich dadurch auch der Farbton.
Also, es ist nicht einfach nur das gleiche Rot in ein bisschen heller oder dunkler, sondern es entsteht dadurch wirklich ein neuer Farbton.
Und diese Punkte macht eben LCH besser.
Also, da ist es wirklich so, wie man die Farbwahrnehmung auch tatsächlich erwarten würde.
Ich schraube an dem Wert und ich habe ein zu erwartendes Ergebnis, das auch tatsächlich so abgebildet wird.
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.
Ich weiß gar nicht, ob mein iPad beispielsweise, das ist ein iPad Pro, glaube ich, nicht die allerneueste Generation, sondern eine davor.
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.
Das könnte ich mir vorstellen, ja, dass das vielleicht geht.
Das muss ich mal recherchieren.
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?
Ja, genau, das habe ich ja gesagt, angeeingangs auch.
Ich bin durch den Artikel da drauf gestoßen und habe mir das deswegen dann auch angeguckt, ja.
Ah ja, okay, dann habe ich das vorhin überhört, ja.
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.
Ja, generell kann ich auf jeden Fall sagen, die Demos, die Lea Veru baut, sind immer geil.
Die hat jetzt ganz viele, viele, schon seit Jahren ganz viele kleine Tools immer wieder gebaut.
Wenn wir schon bei Farben sind zum Beispiel, auch so dieses Color Contrast Ausrechentool, was ich in der letzten Folge schon vorgestellt habe.
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.
Muss man echt mal, echt mal Shoutout an Lea Veru, auch wenn sie wahrscheinlich nicht versteht, was wir hier sprechen.
Soweit ich weiß, kann sie ganz gut Englisch und Griechisch.
Weiß nicht, keine Ahnung über weitere Sprachkenntnisse.
Ich habe einen Talk von ihr gesehen, gerade gestern oder heute, wo sie Portugiesisch spricht, aber auch nur so zur Begrüßung.
Das auch noch, okay.
Ich habe zum Thema jetzt nichts mehr.
Haben wir noch was vergessen?
Ja, hätte mal interessiert.
Also ich verwende hauptsächlich tatsächlich die Hex-Notation.
Wie ist das denn bei dir?
Ha, das kommt drauf an.
Also meistens ist es Hex.
In den Fällen, wo ich Transparenzen haben will, ist es oft RGBA.
Also da habe ich jetzt nicht diese achtstellige Hex-Notation habe ich eigentlich noch nicht verwendet im Browser.
Also wenn ich Alpha brauche, dann nehme ich auch RGBA.
Aber ganz ehrlich, das, was ich am meisten verwende, sind Variablen Namen.
Also SAS-Variablen Namen, die auch Farben zeigen.
Gut, aber was haben die dann als Inhalt?
Oh, da sprichst du ein sehr politisches Thema an.
Oh je.
Was haben die als Inhalt?
Also derzeit…
Nee, wirklich nur von der Notation her.
Also wir müssen jetzt gar nicht irgendwie in die Tiefe gehen.
Wie gesagt, Hexadezimal oder RGBA.
Das sind so die, die ich normalerweise verwende.
Zum Testen verwende ich ganz gern Farbnamen.
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.
Aber das tippt sich halt einfach schnell und die Browser-Vervollständigung in den DevTools ist davon auch ganz gut.
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.
Geht für mein Hirn irgendwie schneller zu tippen, Red, Blue, Yellow oder sowas als FF00 oder so.
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.
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.
Und zwar mit einem Wert aus den Namen wurde eine Farbe generiert.
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.
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.
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.
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.
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…
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.
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.
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.
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.
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.
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.
Die Leute haben wohl den Artikel nicht gelesen, weil dann wäre der nicht klar gewesen.
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.
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.
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.
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.
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.
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.
Es gibt doch dann bestimmt ein Babel-Plugin, was dir dann die, die neuen, die neuen Farbwerte in RGB umschreibt.
Herzlichen Glückwunsch. Warte, dazu, dazu, dazu, dazu habe ich noch ein kurzes Flöten-Solo.
Schön, sehr schön, für unsere neue Titelmelodie.
Ja, damit, ja, also, deine Kamera wandert gerade, das ist interessant.
Ich bin verabschiedet, aber das Kabel wobbelt hier so ein bisschen durchgedient.
Ich wollte, ähm, ich weiß nicht, hast du zu LCH noch was?
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?
Ja, dann mach das noch, dann habe ich nämlich auch noch eine kleine Ergänzung.
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.
Ä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.
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.
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.
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.
Nicht LHC, das ist der Large Hadron Collider.
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.
Ist nur die Frage, wie viel mir diese Komma-Werte tatsächlich wird zu bringen.
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.
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.
Weiße und schwarze Fallbacks für alles.
Genau.
Wo wir wieder beim CSS Naked Day wären.
Ähm, die HEX RGBA.
Annotation, also mit diesen achtstelligen HEX-Werten, ähm, liegt bei 88,85%.
Also selbst das, würde ich sagen, ist relativ safe einzusetzen.
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.
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.
Mach keinen Fass auf.
Wir sind schon bei einer Stunde zwanzig.
Ähm, ne, doch, ich mach's gut drauf.
Die nachfolgende Sendung verzögert sich um 20 Minuten.
Das könnte man vielleicht auch noch, äh, ich mach' einen Jingle.
Ne, also, äh, bevor ich einen Faden wieder verliere.
Ä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ß.
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.
Ä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.
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,
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.
Und da musst du auch gar nicht auf irgendwelche Riesenportale gehen.
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.
Und dann werden entsprechend die Plugins, also CSS-Prefigs und so weiter angepasst, damit es dann eben in den Browsern läuft.
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.
Und die Prozentwerte werden dann tatsächlich übernommen in die Browsers-List-Konfiguration.
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.
Und die waren auch bei unserer kleinen Seite schon, so bekannt sind wir ja nicht, waren die schon deutlich anders als irgendwelche weltweiten Statistiken.
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.
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.
Aber das nur am Rande.
Dann noch zum Abschluss noch zwei kleine Sachen, die auch noch die Farben betreffen.
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.
Das Betriebssystem kann dem Browser sagen, ich bin gerade im Dark Mode, zeig du doch auch mal deinen Dark Mode an.
Dafür gibt es ein CSS Media Query, Prefers Color Scheme Dark oder irgendwie so heißt das, glaube ich.
Das finde ich irgendwie an der Stelle noch erwähnenswert, das heißt, ihr könnt eure Seite auf euer Betriebssystem Farbschema reagieren lassen.
Um mich da auch nochmal kurz einklinken zu lassen und den Bogen zu schlagen zu einer unserer ersten Folgen.
Stack Overflow hat seit neuestem einen Dark Mode.
Ich mag ja Dark Modes auch, aber es ist tatsächlich sehr ungewohnt.
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?
Weil es einem gar nicht so bekannt vorkommt, aber es ist sehr angenehm für die Augen.
Ja, also das kann man auf jeden Fall einbauen.
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.
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.
Ich bin mir nicht so sicher, auf manchen Geräten sieht dann der Kontrast ein bisschen schwach aus.
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.
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.
Da gibt es einige, die ganz gut sind.
Ich habe da jetzt keine spezielle Empfehlung.
Da gibt es so viele verschiedene, die ganz gut funktionieren.
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.
Sowas gibt es nämlich auch.
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.
Da würde ich gerne Webseite draus machen.
So sind die Farben bei, wo wir sind, ist vorne.show entstanden.
Zumindest die Basisfarben am Ende, wenn man dann in der Umsetzung ist von so einer Webseite.
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.
Das darf man ja dann auch.
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.
Dann einfach mal so einen Generator verwenden und gucken, was da rauskommt.
Und ich kann, wie gesagt, keinen speziellen empfehlen, weil die sind eigentlich alle ganz gut.
Einfach mal bei Google eingeben und nein, bei DuckDuckGo eingeben und Spaß haben.
Genau, damit bin ich mit Farben durch.
Ente, Ente, Ente, Ente.
Ente, Ente, Farbe, Ente, Sag ganz.
Okay, ja, ich bin auch durch.
Dann haben wir das Thema heute mal tatsächlich wieder ein bisschen länger gehabt als sonst.
Ich hatte ja schon Angst, dass die Retro länger wird als das Thema, aber wir haben heute sehr ausführlich über Farben geredet.
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.
Wow.
Das war natürlich total geplant.
Das war unser Oster-Special.
Und damit...
Bunte Eierstöcke für alle.
Und damit...
Das Geiltein.
Geiltein.
Ja, wo wir gerade von Eierstöcken gesprochen haben.
Nein, ich finde das jetzt keine klassische Überleitung.
Es ist nichts Schlimmes an Eierstöcken.
Nein, ich finde da keinen Überleitung.
Frauen in die Webtechnik.
Nein, nein, nein, da setzen wir uns jetzt in die Nesseln.
Es ist egal, was wir da sagen, das ist auf jeden Fall falsch.
Macht aber auch nichts.
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.
Also so vor eineinhalb Jahren.
Aber jetzt so die Tage habe ich es nochmal wieder für mich entdeckt.
Es war jetzt komisch betont.
Wieder für mich entdeckt.
Für mich wiederentdeckt, glaube ich.
Du sprichst zu viel Plopflöte, das ist nicht gut für dein Hirn.
Das hat jetzt was von balinesischer Gamelanmusik.
Warte, Moment.
So.
Ich wollte nur beweisen, ich kann auch normale Töne da drauf spielen, aber so schief spielen macht einfach viel mehr Spaß.
Und wie gesagt, das übe ich ja gerade.
Also die Musik von Bill Wurtz, ich glaube, so wird er ausgesprochen.
B-I-L-L-W-U-R-T-Z.
Das ist meine favorite weird music gerade.
Also ich weiß nicht, wie ich es richtig beschreiben soll.
Es ist so, also mir macht es sehr, sehr gute Laune.
Ich finde, der Sound und die Komposition lehnt sich so ein bisschen an an Toto.
So teilweise Toto-Sachen.
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.
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.
Aber die Musikvideos dazu, die sollte man nicht während der Arbeit schauen wahrscheinlich besser.
Die sind eher, die gehen eher in Richtung verstörend bis sehr bunt.
Ich kann da auch nicht empfehlen.
Wenn ihr unter Epilepsie leidet, ja, alles passt heute zu den Farben.
Das wäre die Überleitung gewesen.
Danke, Konstantin.
Hättest du mich mal gefragt?
Also, Leuten, die unter Epilepsie leiden, kann ich diese Musikvideos auf jeden Fall nicht empfehlen.
Das muss ich an der Stelle sagen.
Die sollten vielleicht einfach nur mit dem Sound vorlieb nehmen.
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.
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.
Ich habe mich jetzt gerade geoutet.
Ich bin seit letzter Woche auch bei TikTok.
Da musst du mir mal deinen Handle nennen, dass wir uns da folgen können.
Nee, ich habe keinen Account.
Ich bin stiller Voyeur.
Das geht?
Ja, das geht.
Also, auf meinem Handy geht das.
Ich habe keinen Account.
Ich gucke nur so, was der Algorithmus mir vorschlägt.
So ein bisschen Algorithmusforschung auch.
Dürfen wir da überhaupt sein?
Ich dachte da irgendwie, bei 30 ist Schluss.
Nee, nee, bei 17, glaube ich.
Ist auch sehr gefährlich.
TikTok ist sehr gefährlich.
Ja, ist sehr gefährlich.
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.
Und zwar heißt er, I just did a bad thing.
Und der fängt halt einfach an mit, just did a bad thing.
Und jetzt muss ich gleich Gema bezahlen, wenn ich noch weiter singe.
Aber es ist einfach sehr, sehr, sehr merkwürdig und finde ich auf eine erfrischende Art und Weise irgendwie sehr lustig.
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.
Ist nett.
Aber wenn man anfängt, auf die Texte zu achten, da erschließt sich nochmal so ein neuer Level.
Da muss ich dir jetzt einfach mal auf die Finger hauen.
Ist doch kein Bass.
Ist doch populäre Musik.
Ja gut, populär ist es schon.
Ja, es ist so.
Diskussion zu Ende.
Egal.
Aber kurz ein Haken zu Bill Words.
Du hast mir das vor zwei Tagen, glaube ich, oder gestern geschickt.
Da hört es mal an.
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.
Da habe ich auch mal so ein bisschen geguckt und bin dabei auf ein YouTube-Video gestoßen, das ich auch verlinken werde.
How to Bill Words.
Oh.
Und das fand ich ganz lustig.
Und ich kenne tatsächlich noch kein wirkliches Musikvideo von ihm.
Aber weil du sagst, sehr psychedelisch und farben und komisch.
Und ja, auch das How to ist entsprechend gemacht.
Also schaust dir mal an.
Es ist extrem merkwürdig.
Ist es vielleicht von ihm selbst?
Das könnte ich mir sehr gut vorstellen.
Ich weiß es nicht.
Der Account heißt Imaginary Ambition.
Ah, nee.
Ich habe keine Ahnung.
Ich weiß auch nicht, wie sein.
Ich glaube, seine heißt tatsächlich wie sein Name.
Aber ich weiß es tatsächlich nicht auswendig.
Ich folge ja niemandem bei YouTube.
Ich habe zwar einen Account, aber ich habe die Abonniere.
Keine Subscription.
Keine einzige Subscription.
Ich habe das nur, weil ich mal eine Playlist machen wollte.
Weil an einer Stelle nicht alles das war in einem Account,
was ich haben wollte.
Und deswegen ist das der einzige Use Case für meinen YouTube-Account.
Ja, genau.
Hört euch das mal an.
Und an der Stelle, weil ich vorhin gesagt habe, Epilepsie-Warnung und so.
Das ist keine gute Idee für Epileptiker.
Was auch keine gute Idee für Epileptiker ist,
ist eine kleine Tech-Demo, die ich vor ein paar Jahren mal gebaut habe aus Langeweile.
An der Stelle kann ich da nochmal drauf verlinken.
MoritzGießmann.de
Aber wirklich, ganz, ganz, ganz ehrlich, nur draufklicken, wenn ihr keine Epilepsie habt.
Das ist kein Scheiß.
Aber da ist auch noch eine Warning davor.
Also ich hoffe, da klickt dann keiner drauf.
Aber für alle anderen Mutigen, die können das mal.
Falls sie mal Farben brauchen, falls sie mal einen Hexcode brauchen, so zufällig,
dann kann man das mal ausprobieren.
Mehr will ich an der Stelle nicht verraten.
Alles klar.
War das dein Geilteil?
Das war mein Geilteil.
Wir haben kein Geilteil Ende-Dschingel.
Brauchen wir das?
Wir könnten vielleicht das Jingle falschrum abspielen.
Ja, das haben wir schon mal gesagt, genau.
Das Geilteil, wir gucken mal.
Aber ansonsten bin ich mit unserer Soundverpackung schon sehr zufrieden.
Ja, bevor jetzt jemand sagt, das Geilteil, das hat jetzt gar nichts hier mit Webtechnik zu tun.
Das haben wir ganz am Anfang schon angekündigt.
Also das Geilteil hat nicht immer was mit Webtechnologie zu tun.
Das kann auch wirklich mal ein Musiktipp oder Sonstiges sein.
Gewöhnt euch dran.
Ja, gewöhnt euch dran.
So, das ist der pädagogische Teil dieser Sendung.
Der pädagogische Teil, sowas machen wir jetzt auch.
Genau, an Bill Gertz muss man sich auch gewöhnen.
Genau, wir belehren.
Und ich glaube, wir sind jetzt auch schon am Ende.
Das heißt, wir belehren nochmal, bitte, bitte, bitte, liked uns und folgt uns und teilt uns vor allem.
Und auch offline erzählt weiter von unserem Podcast.
Ist natürlich jetzt zur Zeit gerade ein bisschen schwierig, aber auch im Homeoffice.
Es gibt ja bestimmt auch irgendwelche Off-Topic-Slack-Channel oder was auch immer genutzt wird.
Nervt eure Arbeitskollegen, postet Links.
Ja, oder schreibt eurer Mutter mal einen Brief mit einer auf Schallplatte gepressten Folge von uns oder so.
Ja.
Das geht auch.
Das nehmen wir auch.
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.
Also ich finde, man darf auch offline, also du hast, der Fokus war jetzt irgendwie zu sehr auf online.
Nee, ich meine ja auch offline, aber ist halt im Moment gerade ein bisschen schwierig, weil eigentlich gefühlt jetzt alle online sind.
Aber ansonsten natürlich gerne offline im Gespräch.
Und genau, als Graffiti auf eure Hauswand sprühen, auf euren eigenen Besitz.
Auf alle Hauswände, wenn ihr euch traut.
Nee, nicht, dann werden wir jetzt nicht hier zum Anschliffen.
Nichts Justiziables, nichts Justiziables.
Ja, oder so, wie heißen denn diese Graffitis, wo man den Dreck wegnimmt?
Kennst du die?
Ja, diese, ja, Negativ-Graffitis, oder?
Ja, also die Dreck-Weg-Mach-Graffitis, die sind ja auch verboten, darf man ja auch nicht machen.
Man darf nicht mal den Dreck wegmachen, das ist auch, ja.
Okay, ich glaube, es wird jetzt schon irgendwie, ich glaube, wir sind am Ende.
Wir sind am Ende, das wird jetzt auch ein bisschen länger wieder als sonst.
Ach was, das ist genau richtig.
Ist ja nix.
Also für Leute, die die Freakshow hören, die lachen.
Die hören jetzt gleich hinten dran noch eine Folge, noch eine, leider ist das hier gerade die neueste, aber egal.
Ja, damit kommen wir zu Ende.
Und, ähm, hast du noch was?
Nee, nee, gehabt euch wohl, passt auf euch auf, schaltet gesund wieder ein.
Und jetzt kommt noch ein Abschieds-Scheiß, ich seh's schon, ein Abschieds-Ständchen von Moritz.
Jetzt spielt aber bitte auch, spielt bitte auch das Outro.
Wo es sie jetzt mitspielt.
Okay.
Ich spiel, ich spiel, ich spiel mit.
Bis zum nächsten Mal.
Ja, dann.
Ciao, macht's gut.
Bis zum nächsten Mal.