Wo wir sind, ist vorne, Folge 22.
Heute redet sich alles um Iconsysteme.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend-Fakten-Frotzeleien.
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 wir begrüßen ganz besonders alle Neuhörer und Neuhörerinnen, die über den Golem-Artikel zu uns gestoßen sind.
Yeah!
Herzlich willkommen. Ein kleiner Applaus, oder, wenn ich ihn finde.
Wie soll man denn da noch steigern, Mensch, wenn nicht erst der Lahme-Applaus kommt?
Ach so.
Gleich kommt der höfliche Applaus.
Ja, da muss man schon vorlegen.
Wann ist der Applaus denn unhöflich?
Nein, aber der ist ja auch egal.
Ja genau, es gab einen Golem-Artikel, Wissen für ITler, elf tolle Tech-Podcasts.
Und da finden wir direkt auf der ersten Seite Erwähnung, was uns natürlich sehr gefreut hat und geehrt hat.
Aber es steigt jetzt natürlich auch unsere Verantwortung mit den steigenden Hörerzahlen.
Bei mir setzt da immer gleich das Imposter-Syndrome so ein bisschen ein.
Da hatten wir es auch in der Vorbesprechung drüber.
Irgendwann finden die alle raus, dass wir hier nur heiße Luft labern.
Ja, das wissen wir doch schon.
Das ist ja nichts Neues.
Genau.
Ja, Bierfrage, oder?
Bierfrage, ja, genau.
Hast du heute das Gleiche?
Ich glaube, ich habe das Gleiche, weil ich habe dem Konstantin Bier gebracht.
Der Konstantin hat mir im Gegenzug Werkzeug ausgeliehen.
Ich befürchte, das Bier kriege ich nicht wieder.
Er kriegt sein Werkzeug.
Hoffe ich doch.
Von Guinness, Hop House Lager, Nummer 13.
13.
Ja, dann öffnen wir es doch mal.
So, und ich habe schon mal eins davon getrunken.
Okay, ich noch nicht.
Ich bin gespannt.
Ich habe es noch nicht probiert.
Sowohl.
Ja, wie das halt remote so klingt.
So, ja.
Während der Konstantin trinkt, sage ich euch, dass der Konstantin trinkt.
Dann kann nämlich ich trinken und dann kann er was sagen.
Also jetzt muss ich was sagen.
Ja, wir sind schon wieder bei drei Minuten und haben bisher nur getrunken.
Und es wird heute lang.
Wir haben ja letztes Mal vor zwei Wochen den Längenrekord geknackt.
Und ich befürchte, wir sind da heute auch wieder auf einem guten Weg dahin.
Also wir haben schon diverse Retro-Punkte.
Die geht heute recht lang.
Und ich habe deine Notizen gesehen für unser Hauptthema heute.
Huiuiui.
Ich glaube, da steht doch drüber Moritz geheime Notizen.
Wieso guckst du da rein?
Nee, ich habe nur drüber gescrollt, über die Länge, weil ich unten was gesucht habe,
weil ich unten was angefügt habe.
Also das stimmt wirklich.
Meine Notizen haben immer die Überschrift Moritz geheime Notizen.
Weil, also der Konstantin kann die theoretisch sehen bei uns im Trello.
Mach ich aber nicht.
Aber ich will nicht, dass er sie liest.
Deswegen schreibe ich das immer dazu, weil sonst irgendwie, das ist dann irgendwie blöd,
wenn er schon weiß, was ich sagen will.
Denke ich mir immer.
Ja.
Und der darf es einfach nicht wissen.
Und es ist geheim.
Ja, vor allem heute, weil heute hast du ja alles vorbereitet und ich thematisch nichts
so wirklich.
Und da soll ich ja Fragen stellen.
Und wenn ich mir die schon selber beantworten kann, dann brauche ich sie nicht stellen.
Genau.
Du darfst.
Ich darf.
Bier ist gut.
Hat sehr, sehr, schmeckt, schmeckt fast.
Also durch die Flasche sieht es hell aus, aber es schmeckt fast wie ein dunkles.
Es ist auf jeden Fall durchsichtig.
Ja.
Es ist nicht trüb und es ist nicht dunkel oder irgendwas.
Ich weiß gar nicht, wie man das nennt.
Es ist ein Kristallbier.
Ein Lager.
Also auf Deutsch.
Also ich finde es auch echt lecker.
Und ja, machen wir doch weiter.
Fangen wir doch an.
BWSIV präsentiert die Retrospektive.
Und wir haben eine gemeinsame Retro.
Ich glaube, das hatten wir auch noch nicht.
Wir haben, hast du das gesehen?
Überhaupt den ersten Punkt?
Ja, du hast es beschlossen, aber ich mach damit.
Okay.
Ja, wir hatten letzte Woche ein kleines Twitch-Experiment.
Man findet uns jetzt auch auf Twitch.
Einen Kanal unter twitch.tv slash wwsev.
Und wir haben das mal aus Spaß einfach, also recht spontan auch in der Vorbereitung zu dieser
Sendung einfach mal getestet.
Und hatten dann auch tatsächlich irgendwie elf Hörer.
Ausdrückterweise.
Zuschauer nennt man das bei Twitch.
Ja, ich bin noch nicht dort angekommen, weil wir den Link spontan auf Twitter gepostet
haben.
Also ich weiß nicht, ob jeder weiß, ich glaube, die jungen Leute wissen, was Twitch ist.
Den älteren erklären wir es nochmal kurz.
Twitch ist eine Livestreaming-Plattform, wo, naja, ich glaube hauptsächlich für Gaming
viele Leute filmen sich beim Zocken und kommentieren dazu und machen das auch irgendwie so in
größeren Runden.
Und es gibt Leute, die mittlerweile sogar auch davon leben.
Da kann man irgendwie dann live auch irgendwie Geld spenden und so.
Und ist irgendwie, ich glaube, es ist eine coole Plattform und wir haben einfach das mal
ausprobiert.
Und vor allem war das eine Technik-Demo von krassem Scheiß, was der Konstantin gebaut hat.
Und ich war extrem beeindruckt, weil das Videobild, was wir da hingeschickt haben, das kam
aus einem Browser.
Genau, also das ist mit NWJS und mit WIT habe ich das gebastelt, beziehungsweise das Grundding
hatte ich schon mal vor einer Weile angefangen, weil ich da so eine Idee hatte.
was zu basteln mit Streaming.
Und das habe ich dann recycelt, ein paar Blöcke davon genommen und mit WIT, was halt super
schnell zum Entwickeln geht.
Da habe ich ja die letzten beiden Folgen auch drüber gesprochen, vor allem vorletzte Folge,
Nummer, was haben wir heute, Folge 20, wen das interessiert, WITJS.
Und damit ging das also echt ratzfatz, da was zu entwickeln, was dann auch funktioniert.
Also das war im Endeffekt in zwei Nachmittagen schnell zusammengehackt und hat aber stabil funktioniert
eigentlich.
Erstaunlich gut, ja und da vielleicht mal so, zumindest so wie mein technisches Verständnis
davon ist nur sehr oberflächlich, aber wir haben da ein Jitsi-Video, kam von mir, das wurde
da irgendwie direkt reingeleitet und am Ende hatte man da dann so ein Bild, wo der Konstantin
links war, ich rechts, aber halt im Browser.
Der Konstantin hat es auch bewiesen, indem er die Dev-Tools mal drüber hat flackern lassen
und es lief auch noch Musik dazu und irgendwann kam dann so ein Kommentar, ey, die Musik ist
zu laut, man versteht euch nicht und dann musste der Konstantin irgendwie in der Kommandozeile
rumhacken, um auf dem Audio-Element die Audio-Volume runterzudrehen.
Also es ist noch sehr rudimentär und wenn wir das tatsächlich weiter verfolgen, dann wird
das nicht so rudimentär sein, aber es hat Spaß gemacht, das zu entwickeln und zu sehen,
dass es funktioniert.
Das ist echt cool und vielleicht, also vielleicht muss man auch vorweg schicken, das soll den
Podcast nicht ersetzen, also der Podcast bleibt schon Podcast, aber es ist manchmal schwierig,
Dinge nur zu erklären, ohne sie zeigen zu können und wenn wir dann so ein bisschen so
Pair-Programming-Sessions vielleicht mal machen könnten, um Dinge einfach zu demonstrieren,
dann wäre das vielleicht ein cooles Zusatzformat, das man nutzen könnte.
Außerdem wisst ihr ja, dass wir gern labern und bei Twitch kann man irgendwie geil labern und
außerdem ist es live, es gibt also einen Rückkanal, man kann also direkt rein
kommentieren, uns quasi von dem, was wir eigentlich machen wollen, ablenken und uns beschimpfen
oder sowas, alles in Echtzeit.
Ja und das fand ich echt verrückt, also das macht eine ganz andere Dynamik logischerweise
ja und das ist einfach, es war so, also wir haben das ja gar nicht geplant und haben das
ganz spontan gemacht, plötzlich war da wirklich jemand und wir kriegen Feedback und reden und
das war cool, ja. Es war anders, sehr anders, aber es war cool.
Ich fand's auch super, ich hätte vorher nie gedacht, dass ich irgendwie so Livestream mal geil finden
würde und es war dann mehr oder weniger so, ja lass uns das mal ausprobieren, der Konstantin hatte da die Demo
aufgesetzt und ich hab dann gesagt, okay, dann machen wir das halt jetzt mal, probieren wir einfach mal aus und dann
mal eben einfach nur kommentarlos den Link dazu bei Twitter reingeworfen, um mal zu schauen, vielleicht kommt ja jetzt
tatsächlich jemand dazu und insgesamt hatten wir elf Leute, glaube ich, einfach so ohne, dass, also wir haben ja nicht mal
irgendwas Interessantes gemacht, wir haben eine Technik ausprobiert und dann kamen trotzdem irgendwie im Chat so Kommentare, ja irgendwie
beste Abendunterhaltung, da dachte ich mir, okay gut, dann müssen wir uns nicht mal vorbereiten, für die Twitch-Session
können wir einfach abends uns mit einem Bier hinsetzen und ein bisschen über Gott und die Welt und gerne auch über das Web quatschen.
ja, vielleicht machen wir das, vielleicht wird das mal irgendwie in der Zukunft irgendwie ein Format.
Ihr könnt uns ja mal Feedback geben, wie ihr das denn fändet und ob ihr da Interesse dran habt oder ob das
Quatsch ist. Ich kann schon mal spoilern, der Konstantin, der war, der war so excited, dass er sogar, dass er sogar schon ein Intro, ein Video-Intro
dafür gebaut hat. Ich hab auch am Wochenende drauf, After Effects mal wieder seit Jahren gemacht.
Also ich hab's schon gesehen, vielleicht dürft ihr das dann bald auch sehen. Ich fand's fantastisch.
Du könntest ja als Teaser vielleicht sogar schon mal das Intro schon mal anteasern demnächst, wenn's ganz fertig ist.
Mal gucken, mal gucken. Also gegen Spenden vielleicht, aber da greifen wir schon wieder vorweg.
Ich muss ja sagen, wir halten's generell und dieser Podcast funktioniert auch nur deswegen so gut mit allem drum und dran, weil wir irgendwie eine ähnliche Vorstellung von Qualität haben und wir machen was nicht, wenn wir es nicht gut genug finden beide.
Und deswegen reifen die Sachen bei uns manchmal ein bisschen länger. Aber wenn's dann da ist, dann sind wir zumindest davon überzeugt, dass es irgendwie eine halbwegs gute Qualität hat. Und deswegen weiß ich nicht genau, wie lange es jetzt noch dauert. Das reift jetzt halt noch ein bisschen. Der Gedanke war irgendwie so da und wir haben beide jetzt irgendwie ... Ich hab's echt unterschätzt, diese Dynamik. Wir haben, glaube ich, beide irgendwie Bock, das nochmal auszuprobieren.
Ich bin echt gespannt. Ihr könnt uns ja echt mal irgendwie in die Kommentare schreiben oder irgendwo bei Twitter mal sagen, wie ihr das fändet. Vielleicht mach ich auch nochmal so eine Umfrage. Die klicken immer so gut.
Umfragen funktionieren erstaunlich gut. Da kommt nachher auch nochmal ein Retro-Punkt dazu, ne?
Ja, wir können ja den jetzt als nächstes machen.
Ja, aber meiner schließt auch direkt an, weil das schon noch ein bisschen auf die Technik eingeht, die wir da benutzt haben.
Dann ...
Dann mach ich doch den schnell, oder?
Dann mach doch den schnell.
Dann kannst du ja vielleicht nachher ...
Dann kommt ja jeder, genau.
Der nächste Punkt ist nämlich, geht da Hand in Hand.
Und zwar hab ich mir WebRTC mal ein bisschen angeschaut, weil ich eigentlich vorhatte, dass quasi das Programm, mit dem wir das streamen, direkt auch als Server funktioniert, mit dem sich der Moritz auch verbinden kann.
Sodass ich dann direkt sein Kamerabild und seinen Ton da durchschleifen kann.
Und das hat lokal schön funktioniert.
Und das liegt daran, dass WebRTC zwar an sich eine Kommunikation zwischen Clients direkt anstrebt, also Peer-to-Peer, sofern das möglich ist.
Aber das Problem ist, dass durch NAT bzw. Firewalls das oft nicht machbar ist, weil die Ports blockiert sind und eben nur bestimmte Ports durchgelassen werden.
Und man musste dann schmerzlich erfahren, dass es da noch ein paar andere Standards gibt.
Stun-Server, die dann dynamische Port-Öffnungen aushandeln.
Und als letztes Fallback dann Turn-Server, die dann wirklich die Streams dann tunneln und da als Mittelsmann fungieren.
Und verständlicherweise gibt es dafür keine kostenlosen Services.
Also vielleicht findet man mal welche, wo die Credentials irgendwie geleakt sind oder so, die man dann natürlich nicht böserweise nutzen sollte.
Weil ist klar, Medien, Video-Audio-Übertragung, das zieht ordentlich Ressourcen, natürlich.
Und Moritz nickt.
Ja, nee, das ist interessant, weil ich, wo war das denn?
Ich habe ja irgendwie gehört, ach, das war genau, das war ein Podcast, das war ein Podlovers-Podcast.
Da war ja der Macher von Studio-Link zu Gast und wurde da befragt und hat eben genau darüber berichtet, auch über Stun- und Turn-Server.
Das hat er auch am Laufen, also Studio-Link ist eine Software, die einem hoch-Audio, hoch-Audio, audio-qualitativ und mit sehr kurzer Latenz durchs Netz schickt.
Eben um sowas zu machen, wie wir hier machen, eine Remote-Aufnahme, aber mit, finde ich, hoher Qualität.
Also viel besser als alle möglichen komischen Video- und Audio-Dienste, die irgendwie bis zu Tode komprimieren.
Das ist einfach sehr, sehr gut.
Und der hat auch das im Hintergrund irgendwo laufen.
Ich glaube aber, so wie wir das benutzen, weiß ich gar nicht, ob das gebraucht wird.
Ich glaube, darüber läuft das in dem Fall gar nicht.
Na gut, Studio-Link öffnet sich in einem Browser-Fenster, also ich könnte mir gut vorstellen, dass das tatsächlich dann einfach Web-RTC ist.
Ach so, dass der dann lokal.
Ich habe jetzt tatsächlich noch gar nicht in den Source irgendwie reingeschaut oder geschaut, was da für Streams laufen, aber könnte ich mir gut vorstellen.
Ja, ich habe wieder alles vergessen, fast alles vergessen aus dieser Folge.
Nur Stun und Turn, das blieb irgendwie hängen bei mir.
Und falls ihr das wissen wollt, wie das genau funktioniert, dann könnt ihr mal bei den Podlovers reinhören.
Ich weiß nicht genau.
Verlinken wir die Folge vielleicht in den Shownotes, wenn du sie findest.
Genau, also es ist schwer, da mehr als nur irgendwie lokal was zu basteln und zu testen, wenn man jetzt nicht gleich Geld in die Hand nehmen will.
Und jetzt für unseren Fall fände ich das jetzt also irgendwie ein bisschen overkill da extra irgendwelche Server anzubieten.
Und ich habe leider keine Möglichkeit gefunden, jetzt irgendwie nur einen bestimmten Port zu öffnen, ja, in der Fritzbox irgendwie eine Portfreigabe für einen bestimmten Port.
Und dann zu sagen, hey, WebRTC, bitte benutzt nur diesen Port, weil WebRTC standardmäßig Zufallsports, UDP-Ports zwischen 10.000 und 20.000 nutzt.
Also 10.000 und 1-Port und die wollte ich nicht jetzt unbedingt alle einfach so öffnen, damit da Hints und Kunst drauf dann reinkommt.
Und ja, und um uns da zu behelfen, habe ich eben, wie Moritz vorhin gesagt hat, dann Jitsi einfach in einem zusätzlichen Browserfenster über NWJS angezapft
und mir dort dann den Video-Stream und den Audio-Stream rausgeholt und die dann wiederum durch die Audio-Kontext-API und als Video-Element eben dann reingezogen.
Ein bisschen von hinten durch die Brüste ins Auge und man ist natürlich auf die Qualität von Jitsi angewiesen, aber es hat funktioniert.
Sehr geil.
Und damit, ja, ist der Punkt eigentlich auch abgeschlossen.
Ja, sehr gut. Dann bin ich wahrscheinlich dran, beziehungsweise ich glaube, das ist auch ein gemeinsamer Punkt.
Und zwar hat jemand für euch den nächsten Spam-Spot gekauft, wollte ich mal sagen.
Warte, warte, warte.
Ja, also finde ich, hat auf jeden Fall einen Applaus für dich.
Das finde ich besucht, den Applaus.
Also könnt ihr euch schon mal bedanken bei Cormanda auf Twitter, der hat euch den Spam-Spot gekauft.
Aber warum ich eigentlich jetzt auch nochmal, also vielen Dank an der Stelle für die Spende.
Und auch noch an Christian, der noch einen Kommentar zu seiner Spende dazu geschrieben hat.
Den lese ich jetzt einfach mal vor.
Und zwar steht da, jedes Mal, wenn ihr in eurem Podcast nochmal Homepage sagt, wenn ihr von einer Website sprecht, bitte ein Bier auf Ex.
Danke.
Er hat auch ein paar Biere spendiert, wir können uns davon ein paar kaufen.
Aber ich weiß jetzt nicht, ich glaube, wir sind beide ein bisschen geschädigt von einem gemeinsamen Arbeitgeber, den wir mal hatten.
Weil da Homepage ein ganz bestimmtes Produkt ist und deswegen gibt es das Wort in meinem Wortschatz überhaupt noch, weil ich war früher sehr, sehr streng, was das angeht.
Und deswegen habe ich nämlich auch noch nie was gesagt, weil ich gestehe, mir ist es auch schon ein paar Mal aufgefallen und irgendwie zuckt dann so mein linkes Augenlid.
Aber ich weiß eben genau, warum das bei dir so drin ist.
Deswegen ist das für mich fein.
Ja, also genau.
Und ich glaube auch, dass ich in erster Linie der Schuldige daran bin, der das öfter mal gesagt hat.
Bier auf Ex, so viel Bier habe ich jetzt hier gar nicht.
Ich versuche einfach, ich sage einfach nichts mehr, dann kann mir der Fehler auch nicht mehr passieren.
Ja, damit war es das auch.
Nein, nein.
Ich kann nicht versprechen, dass es mir nicht nochmal rausrutscht.
Jedes Mal, wenn es mir rausrutscht, ich soll ja dann jedes Mal ein Bier auf Ex trinken.
Das heißt, jedes Mal müsst ihr mir dann ein Bier spenden, was ich jetzt trinken.
Stimmt, ja, so machen wir es einfach.
Genau.
Also, auf der Homepage, nein, Spaß.
Müssen wir jetzt noch erklären, den Unterschied zwischen Homepage und Website?
Nee, das guckt ihr einfach mal online nach.
Das machen wir nicht.
Genau, aber ich habe, du hast gerade gesehen, ich habe umsortiert.
Also, wenn wir schon bei Kommentaren und Kommunikation sind, wir haben eine kleine Umfrage gemacht bei Twitter zu unserer Soundqualität.
Einfach, weil die Twitter-Umfragen irgendwie gern geklickt werden.
Und mir das Spaß macht, bei Twitter-Umfragen einzustellen.
haben wir mal gefragt, wie ihr unseren Sound findet.
Und es kam, eigentlich 100 Prozent haben gesagt, unser Sound ist okay.
Beziehungsweise, unser Sound ist gut.
Ja, du musst sagen, was für Auswahlmöglichkeiten es gab.
Weil das klingt jetzt so okay, klingt jetzt naja, okay.
Es gab aber, glaube ich, nur, ist okay oder ist schlecht.
Genau.
Es gab keine einzige Stimme für, ist schlecht.
Jetzt muss ich gerade noch mal gucken.
Wo haben wir es?
Passt war die eine Auswahlmöglichkeit.
Und naja, entklammern sie ihr Kommentar.
Weil die Leute zu faul sind, Kommentare zu schreiben, hat keiner dafür abgestimmt.
Darauf habe ich mein Geld gesetzt.
Ich hoffte, dass es gut ausgeht, weil die Leute zu faul sind, Kommentare zu schreiben.
Nein, es stimmt aber gar nicht.
Weil die Leute, also die Leute sagen einem ja ganz gern, wenn man falsch liegt oder was schlecht macht.
Ja, eher als, dass man was gut macht, ja.
Also freut uns, dass der Sound für euch passt.
Das finde ich einfach schön, weil wir sind jetzt auch keine Audioingenieure.
Wir haben das irgendwie so, wir haben zwar beide, glaube ich, Audio-Vorerfahrungen,
aber haben uns das so irgendwie zusammengeklöppelt.
Und mich freut, dass das irgendwie passt für euch.
Ja, damit können wir zum nächsten Retro.
Ja, ich habe einen NPM, wie sagt man, einen Befehl, beziehungsweise eigentlich auch ein Package, gefunden.
Ich habe euch einen Tweet, den ich leider jetzt nicht mehr finde, und zwar npx npkill.
Also npkill ist das Paket und npx, falls ihr das nicht kennt, ist ein Command von NPM,
mit dem ich ein Paket direkt ausführen kann, ohne es installieren zu müssen in dem Package.
Das heißt, das lädt das dann im Hintergrund natürlich trotzdem runter und führt das dann direkt aus.
Und was npkill macht, ist, dass es einem alle, also es sucht in dem Verzeichnis, in dem ich gerade bin,
und in allen Unterordnern nach Node-Modules-Ordnern.
Und zeigt mir die dann an, und zwar sogar mit der Größe, die die belegen.
Und erlaubt mir dann mit einfach auswählen, und ich glaube, Leertaste ist es, diesen Ordner zu löschen.
Und das macht natürlich Sinn, wenn man irgendwie so einen Entwicklungsordner hat mit 100 Open-Source-Projekten.
Da kommt ja schnell mal was zusammen.
Und damit kann man das dann eben den Speicherplatz räumen.
Und das Problem, Problem in Anführungsstrichen bei NPM ist eben, dass es jedes Paket in jedem Projekt abspeichert.
Also wenn ich irgendwie 50 Projekte habe, die Lodash benutzen, dann habe ich halt wirklich 50 Mal das Lodash-Paket.
Wahrscheinlich noch in irgendwie verschiedenen Versionen, wenn es dann irgendwie noch eine Peer-Dependency gibt und was weiß ich.
Und das belegt natürlich 50 Mal Speicherplatz.
Und was PNPM anders macht, das ist nämlich der nächste Punkt.
PNPM ist ein alternativer Package-Manager zu NPM.
Und der legt alle Pakete nur einmal auf der Platte ab und verlinkt die dann per Hardlinks.
Ah, interesting.
Ja, sehr interessanter Ansatz.
Und dadurch spart man natürlich ordentlich was an Speicherplatz.
Weil es gibt ja wirklich Pakete, die sind in Tausenden oder Millionen von NPM-Paketen genutzt und die hat man entsprechend oft rumliegen und das ist eigentlich unnötig.
Und das geht sogar so weit, dass die, wenn es mehrere Versionen gibt, dann auch wirklich nur die Dateien neu ablegt wohl, die sich verändert haben zwischen den Versionen.
Das heißt, auch wenn die Datei gleich geblieben ist, dann habe ich diese Datei wohl auch nur einmal auf der Platte liegen und die wird dann in den anderen auch wieder per Hardlink verteilt.
Klingt erstmal nach einer coolen Idee, aber ich habe irgendwie so, irgendwie habe ich so das Gefühl, dass es Probleme geben könnte.
Ja, das ist genau mein nächster Punkt.
Es gibt mit manchen Paketen Probleme, aber die machen dann auch tatsächlich was falsch, was man eigentlich nicht so machen sollte.
Also kurz zum Hintergrund, NPM nutzt eine flache Hierarchie, zumindest seit Version 3, vorher war das nicht so.
Vorher hatten NPM-Pakete jeweils wieder einen Node-Modules-Ordner, was dazu geführt hat, dass also sehr viele Projekte unter Windows einfach nicht lauffähig waren, weil es eine Pfadlängenbeschränkung in Windows gibt.
Die kann man, glaube ich, in Windows 10 mittlerweile abstellen, aber mit älteren Windows-Versionen gab es da zumindest Probleme.
Ich konnte teilweise die Projektordner nicht mehr löschen damals unter Windows.
Ja, genau.
Also es ist interessant, ich konnte sie anlegen, diese langen Pfade, diese ewig tief verschachtelten, aber löschen konnte ich sie nicht mehr.
Man konnte sie nicht löschen und ich glaube, es gab dann auch wirklich Probleme, wenn man versuchte, dann irgendwie Binarys auszuführen in den Paketen oder auch beim Requireng, glaube ich, gab es dann unter Windows Probleme.
Das war auch riesig groß dadurch alles, weil die Pakete tausendmal irgendwie vorlagen, dieselben Pakete immer wieder aufs Neue.
Und das führt aber jetzt zu folgendem Problem. Ich kann alle Pakete, die in dem Node-Modules-Ordner liegen, kann ich per Require oder per Import, kann ich die importieren.
Und das heißt, obwohl die nicht in der Package-Json direkt als Dependency von dem Projekt angelegt sind, kann ich die einbinden.
Und das funktioniert mit Jahren und mit MPM und ist aber eigentlich technisch falsch.
Also ich require ein Paket, das ich eigentlich nicht als Dependency angegeben habe.
Dürfte eigentlich nicht gehen, geht aber mit den anderen Packet-Managern.
Und PMPM-Hunter hat das eben strikter, weil, was zur Folge hat, dass solche Packages dann zu Module-Not-Found-Fehlern führen, logischerweise.
Und da gibt es Workarounds dafür als Quick-Fix, aber wenn man sowas findet, dann sollte man bei den Paketen ein Issue anlegen oder vielleicht sogar gleich einen Pull-Request erstellen.
Weil das einfach, wie gesagt, technisch falsch ist.
Also sagen zwar viele so, oh, aber es funktioniert doch, aber das macht es nicht richtiger.
Also wenn ich das Paket brauche, dann gebe ich es halt einfach als Dependency an, wenn ich es direkt im Projekt brauche und gut ist.
Ja.
Es gibt aber noch ein paar andere Probleme, das ist nicht das einzige wohl, musste ich schmerzlich erfahren.
Ich habe ja von Cypress erzählt in unserer letzten Folge, Folge 21.
Da hatte ich auch irgendwie Probleme und habe ein Issue gefunden, da steht dann quasi drin so, na, wir haben nicht viele PMPM-User.
Das fixen wir nicht, aber wir sind offen für PRs.
Ich hoffe, es werden mehr PMPM-User, weil ich finde das Konzept an sich eigentlich gut und in anderen Projekten hatte ich die Probleme auch nicht.
Also man benutzt das wirklich einfach wie NPM.
PMPM-Install, PMPM-Add, was weiß ich.
Die Commands sind also wirklich identisch.
Es gibt noch ein paar andere coole Features.
NPM-Link hatte ich, glaube ich, angesprochen und Jan-Link auch in der letzten Folge, glaube ich, funktioniert der auch.
Also ansonsten scheint mir das echt eine gute Sache zu sein und würde mich freuen, wenn das mehr Einzug hält.
Ja, also ich kann mir vorstellen, dass das vieles deutlich auch verschnellert irgendwie beim NPM-Install, wenn du irgendwie das schon mal was hast.
Stimmt, ganz wichtiger Punkt, das habe ich gar nicht jetzt berücksichtigt.
Install habe ich gerade gesagt, gell?
Im Stall.
NPM im Stall.
Oh Gott.
Geht schon gut los, he?
Genau, also das ist ein ganz wichtiger Punkt.
Ich bin jetzt nur auf diese Hierarchie und Speicherplatz eingegangen, aber Installs sind natürlich auch tatsächlich um einiges schneller, weil so ein Hardlink ist viel schneller erstellt, selbst im Vergleich dazu, als ob die Datei jetzt auf der gleichen Festplatte kopiert werden muss.
Also ich meine, neu runtergeladen wird das bei NPM auch nicht, wenn ich es nicht forciere, weil es da auch einen Cache gibt, der sich da auch selbst bereinigt und so.
Der Vorteil ist halt wirklich so ein Hardlink ist, der Vorteil ist halt wirklich so ein Hardlink, der ist fast instantan da, während Kopieren halt wirklich lange Zeit dauern kann.
Und ja, das ist einer der wirklich großen Vorteile von PNPM.
Sehr coole Sache, ich bin, ich glaube, ich muss es irgendwie mal ausprobieren. Das ist bei so Sachen immer, ich habe es jetzt irgendwie so grob verstanden vom Konzept, wie es funktioniert, aber ich habe es wahrscheinlich übermorgen vergessen.
Einfach mal machen.
Also wenn ich es nicht, ja, einfach mal machen.
Genau, also gerade in Verbindung mit NpKill, das mal drüber laufen lassen und dann mal nach und nach, so habe ich es jetzt gemacht, also wirklich alle NPM-Node-Modules-Ordner bei mir mal entfernt und alles nochmal mit PNPM neu installieren.
Ja, ich muss es einfach mal ausprobieren. Wir haben ja bei unserer Podcast-Seite haben wir gar keinen NPM, ne?
Ich glaube nicht, ne?
Irgendwie haben wir nicht. Okay, weil da machen wir alles von Hand, weil das geht auch. Es ist total crazy, aber man kann HTML, JavaScript und CSS von Hand schreiben. Ich weiß nicht, ob ihr das wusstet, aber ich wollte nochmal daran erinnern, es geht. Ja, ganz ohne Build-Chain. Yes.
Verrückt. Das klüpft sehr gut an an unsere letzte Folge, wen so Retro-Sachen interessieren, da haben wir letztes Mal in rumgeschritten.
Ja, machen wir mal schnell weiter. Wir sind dann auch gleich fertig mit der Retro, also bald. So in 24 Minuten. Ich weiß nicht genau, ob ihr es schafft.
Ja, das ist jetzt, das nächste ist so ein bisschen Fallout noch von der letzten Folge, wo ich ein bisschen über meinen Gipschmerz geklagt habe und gesagt habe, ich habe irgendwie so endlos Merges und habe das Gefühl, ich muss irgendwie dasselbe immer wieder, dieselben Konflikte immer wieder auflösen.
Ein Hörer hat mich darauf hingewiesen, dass es zum einen ein Git-Branching und dann auch in dem Fall Merching interaktives Tutorial gibt unter learngitbranching.js.org.
Ich habe es nicht durchgemacht, sage ich explizit, aber es sieht wirklich nett aus. Kann ich auf jeden Fall empfehlen. Ich mag ja immer Sachen, die hübsch sind. Ich weiß nicht, ob man seinen Weg durchfindet oder ob es irgendwelche Bugs hat. Ich gehe mal nicht davon aus, es sieht irgendwie ganz nett aus.
Könnte also was sein, wenn man da ein bisschen tiefer einsteigen will. Zusätzlich wurde ich dann noch darauf hingewiesen und das hatte ich irgendwann in meinem Hinterkopf wahr, dass ich das irgendwie schon mal gebraucht habe. Und zwar der Befehl git re re re.
Nacht schon, du hast dich vertippt.
Nee, nee, das heißt wirklich so. Ich lese mal die Description vor aus der Doku. Und dann fragt man sich echt, warum muss es sowas geben? Also ich frage mich das dann.
Und zwar, da steht, in a workflow employing relatively long-lived topic branches, the developer sometimes needs to resolve the same conflicts over and over again until the topic branches are done. Bla, bla, bla, bla.
Und dieser Befehl hilft dir dabei, eben genau diese immer wieder auftretenden Konflikte wieder automatisch zu lösen, wo ich mich dann frage, warum treten die überhaupt auf? Das hat mir jetzt noch keiner genau erklären können.
Aber ich habe mir dann sagen lassen, dass wenn man kein Rebase benutzt, sondern einfach ein Merge statt Rebase, da sind jetzt wieder die Git-Götter, die sagen wieder, das darf man nicht, weil dann irgendwie die History nicht mehr schön ist.
Aber wenn man diesen Schmerz vermeiden will, den ich da hatte, dann ist wohl Merge das Ding statt Rebase und dann sollte das in den meisten Fällen dann funktionieren.
Das ist es, was ich jetzt daraus mitgenommen habe. Und wie gesagt, ich wollte mich noch nie in der Tiefe mit Git beschäftigen, beziehungsweise es ist mir eigentlich relativ egal, wie es funktioniert, es muss halt funktionieren.
Und ja, ich weiß, man muss an vielen, mit vielen Sachen muss man sich in der Tiefe auseinandersetzen, dass man, dass sie am Ende funktionieren, dass man sie in der Tiefe versteht.
Aber an der Stelle muss ich sagen, Git, funktioniere einfach so.
Was macht das Re-Re-Re jetzt genau? Ich habe es nicht verstanden oder ich hatte Sekundenschlaf.
Nee, ich habe es auch nicht erklärt, weil ich auch nicht, weil ich auch nicht so weit gekommen bin, in der Doku es zu lesen, das soll mein Problem lösen. Ist mir egal, wie.
Okay.
Das sage ich da an der Stelle einfach. Ich habe die Doku nicht weiter durchgelesen, es löst aber offenbar dieses Problem. Ich weiß nicht genau, wie.
Dann wirst du uns vielleicht in einer folgenden Folge sagen, ob es funktioniert hat.
Vielleicht. Ganz klares Vielleicht.
Ja, jetzt kommt dein Laptop.
Ja, mein Laptop. Ich habe meinen Laptop gebrickt mit einem Windows-Update.
Also Windows-Update sagt irgendwie, ja, bitte einmal neu starten, weil ich habe ganz viele wichtige Sachen installiert.
Und ich mir nichts Böses bei gedacht, neu gestartet, zack, Bildschirm komplett schwarz. Und zwar also wirklich, also Computer aus und beim Hochfahren komplett schwarz im Sinne von nicht dieses leichte Grau, der Bildschirm geht an und irgendwas leuchtet, sondern wirklich einfach bleibt aus.
Und es leuchtet immerhin noch das WiFi-LED. Der Lüfter ging kurz hoch und wieder aus. Also so. Und ansonsten Stille. Das hat mir dann irgendwie nicht so gut gefallen.
Und der erste Impuls ist dann Akku raus und wieder rein. Inklusive irgendwie Transistoren entleeren. Sprich, bei ausgeschaltetem Akku die Starttaste zehn Sekunden gedrückt halten und so. Alles erfolglos.
Und dann habe ich gedacht, ja, geil, jetzt brauche ich einen neuen Laptop. Aber wir hatten es ja in der Folge davor, von wegen, ja, so Leute der alten Schule und mit Hardware auskennen und so.
Ich habe gedacht, komm, wenn du sowas erzählst, dann musst du es auch mal selber anwenden und habe dann gedacht, komm, jetzt schraubst du das Ding einfach auseinander.
Das ist von, ich weiß gar nicht, 2012, glaube ich. Also Garantie ist sowieso nichts mehr. Und wenn es kaputt ist, dann ist es halt komplett kaputt. Daten sind sowieso alle in der Cloud.
Also mach's da einfach mal. Und hab das Ding aufgeschraubt. Hab erstmal RAM raus und Festplatten raus und damit nochmal gebootet, weil das soll manchmal was bringen.
Und war natürlich keine Veränderung. Immer noch LED leuchtet und sonst nix. Und dann habe ich gedacht, gut, was hat man früher gemacht? BIOS zurücksetzen.
Oder vielleicht ist die BIOS-Batterie leer. Also, wie gesagt, alles aufgeschraubt, dann noch ein paar Klappen mehr.
Ich glaube, das weiß gar nicht jeder, dass so Laptops normalerweise oder Computer allgemein so eine kleine Batterie drin haben.
Genau, also selbst bei Stromausfall läuft da ja die Uhr zum Beispiel weiter für Datum und Uhrzeit.
Das ist so eine, wie heißt es, ich weiß gar nicht, 2032er, handelsübliche Knopfbatterie.
Ich habe aber keine gefunden. Also ich habe da wirklich alles unten abgeschraubt.
Was ging den Lüfter raus und diese Heating-Pipes und so.
Also wirklich alles rausgemacht. Selbst da, wo irgendwelche Warnzettelchen dranhingen.
Hier von wegen Garantie geht verdornen, was weiß ich. Also alles rausgemacht. Ja, nirgends war die CMOS-Batterie zu sehen.
Und dann habe ich vorne alles abgemacht und unter der Tastatur war sie dann. Also ich hätte ungefähr die Hälfte unten gar nicht wegschrauben müssen, weil ich hätte nur ein paar Schrauben von der Seite lösen müssen.
Dann hätte ich vorne alles lösen können und dann wäre ich da dran gekommen. Aber da ich auch die Anleitung nicht hatte und im Internet auch nur die, also keine Hardware-Anleitung gefunden habe, sondern nur so Funktionalitätsanleitung für den Laptop.
Ja, hätte ich das mal gewusst, aber gut. Und was man dann machen kann, ist ein 10-Cent-Stück. Das passt genau in diese CMOS-Batterie, in diese Lücke, in diesen Kreis.
Und dadurch überbrückt man das und entlädt wirklich alle Transistoren. Also normalerweise reicht das auch Batterie raus und irgendwie ein, zwei Sekunden und dann wieder rein.
Aber um wirklich auf Nummer sicher zu gehen, entweder einfach 24 Stunden warten, wenn man die Zeit hat, oder halt eben mit einem 10-Cent-Stück überbrücken.
Dann entlädt sich da auch wirklich alles. Und dann habe ich das Ding wieder zusammengebaut und das heißt, ich musste ja wirklich alles wieder, die ganzen Heatpipes und Lüfter und was weiß ich wieder einsetzen, bevor ich das Ding überhaupt wieder booten kann.
Und dann hieß es, ja, hoffen. Und tatsächlich, da, Bioscreen, frag mich dann Passwort. Ups. Ich hatte keine Ahnung mehr, dass ich überhaupt mein Bios-Passwort gesetzt hatte.
Aber tatsächlich, beim allerersten Versuch habe ich das richtige Passwort, so ein altes Passwort, was ich halt, weil ich dachte, was habe ich denn 2012 vielleicht mal für ein Bios-Passwort benutzt.
Und das war tatsächlich richtig.
Oh, wow.
Ja.
Ja, Bios-Passwort, das ist so was, da hast du zwar theoretisch unendlich viele Versuche, aber da geht halt nichts dran vorbei.
Richtig. Ja.
Wenn, ja, wenn du es halt nicht mehr weißt, dann viel Spaß.
Aber der Laptop läuft wieder. Wenn auch ein bisschen lauter. Also irgendwas habe ich beim Einbau von dem Lüfter, glaube ich, nicht so ganz sauber gemacht, wie es vorher war.
Ich finde es faszinierend. Aber ich frage mich ja, auf welche Systemebene das Windows-Update eingreift, dass sowas passieren kann.
Das finde ich irgendwie, also ich meine, das gar nicht mehr angeht quasi. Also nicht mal der Bildschirm, irgendwas zur Hölle passt da.
Es hat tatsächlich wohl irgendwas im Bios. Keine Ahnung. Ja. Also mir ist das auch ein Rätsel. Finde ich auch irgendwie nicht gut, dass Windows da so krassen Scheiß mitmachen kann. Aber ja, Hauptsache das Ding läuft wieder. Also da war ich dann doch froh, dass ich mich daran getraut habe und das Ding nicht einfach irgendwie zum Elektroschrott getan habe.
Weil an sich tut ja noch gute Dienste. Also ich kann es ja auch sagen, ich glaube, den Hersteller gibt es sowieso nicht mehr oder den Vertriebler. XMG steht da vorne drauf.
Ich sage mal, von Schenker Notebooks gab es früher mal. Ich war auch echt sehr zufrieden damit, konnte man sich da so zusammen konfigurieren. Und das Ding läuft, wie gesagt, jetzt neun Jahre. Und ich bin da absolut noch zufrieden damit.
Und das geht mir nicht bei vielen technischen Geräten so.
Gibt es noch? Haben wir mal, glaube ich, umfilmiert oder so. Also irgendwas war da.
XMG.gg.
Witzigerweise ist die Homepage.
Ja gut, Schenker war, glaube ich, halt irgendwo der Vertrieb.
Homepage, habe ich gesagt.
Ja komm, also Schluckbier muss jetzt drin sein.
Okay.
Ich habe es selbst gemerkt.
Ja, ist doch schon mal was.
Ja, also es lohnt sich dann doch, wenn man, wenn man dann Hand anlegt und sich halt denkt, naja.
Website.
Nicht Webseite.
Ja, die Webseite ist die einzelne Seite auf der Website.
Website.
Wenn man es jetzt ganz, wenn man es ganz genau nimmt.
Kennst du dieses Lied? Warte mal, wie hieß das denn?
Das war so eins von den ersten, von den ersten Nerd-Technik-Web-Songs.
Das war so ein Rap. Das war sehr, sehr, sehr alt, wo, ey, es ist egal, es ist nicht so wichtig.
Ja, also XMG.gg ist wirklich .gg, wusste ich gar nicht. Ja, und die haben hier irgendwie ein Laptop, das heißt The Answer.
Steht da zumindest direkt nebendran. Neo, ah nee, Neo 15.
Ja, das sind so, das sind so große, so Verbrennermotoren, so große, so Gaming-artige, so richtig dicke.
Ja, ich kenne ja auch dein Gerät. Das ist so ähnlich wie mein altes. Das ist so, das ist eine Generation, ich glaube, solche Geräte, die wird es, obwohl, die gibt es immer noch in der Form, aber ich glaube, das wird jetzt immer weniger werden, dass die so richtig mega fett sind.
Ja, der ist auch schwer. Also der ist nicht für mal eben so, also wenn ich damit irgendwie im Zug oder so arbeiten will, dann ist schon, pff, tue ich mir das wirklich an.
Ja, ich wollte gerade auch sagen, wie lange hält denn der Akku davon?
Akku irgendwie zwei Stunden oder so.
Na, immerhin.
Anderthalb bis, also je nachdem, wenn ich den Bildschirm ein bisschen dunkler mache und dann halt nicht irgendwie jetzt After Effects drauflaufen lasse, sondern nur ein bisschen Code, dann das schon, aber.
Also der von meinem alten Gaming-Laptop, der hielt am Anfang, als ich es gekauft habe, eine Dreiviertelstunde.
Was?
Und irgendwann ging er dann kaputt, jetzt hält er quasi null Sekunden.
Mhm.
Also wenn ich den Strom abziehe, ist sofort aus. Da geht gar nichts mehr, das ist Ende. Gut. Laptop gebrickt. Fertig.
Ja.
Dann kann ich jetzt auch noch ein bisschen ranten. Das alte Thema Vodafone.
Habe ich noch ein kleines Update dazu.
Ja, ich finde es interessant, also irgendwie machen die jetzt einmal pro Woche Wartungsarbeiten, irgendwie immer so nachts, zum Glück kriegt man es nicht mit.
Also ich habe bisher noch nicht, hat mich bisher noch nicht irgendwie negativ beeinflusst, aber irgendwie ist immer noch irgendwas kaputt, weil ich meine, das ist jetzt zum dritten Mal, glaube ich, innerhalb von ein paar Monaten, dass Wartungsarbeiten angekündigt wurden nachts.
Also irgendwie kriegen sie es nicht in den Griff.
Und ich habe ja noch irgendwann mal positiv erwähnt, dass die mir so ein Ticket aufgemacht haben, wo ich dann nachgucken kann, wie der Status ist.
Und jetzt haben sie mir eine SMS geschrieben, wo drin steht, dein Problem ist gelöst.
Und dann habe ich mir gedacht, ah cool, dann gucke ich jetzt nochmal auf das Ticket drauf.
Ticket ist gelöscht, gibt es nicht mehr, der Link ist tot.
Also sie haben nicht mal ins Ticket reingeschrieben, ja geht jetzt wieder, weißt du, in einem Ticket müsste man ja vielleicht auch reinschreiben, ja wir haben das Problem gelöst durch das, was wir getan haben.
Ne, das Ticket ist einfach gelöscht, es ist weg, wahrscheinlich gibt es das Ticketsystem gar nicht mehr, ich habe jetzt nicht andere Ticket-IDs ausprobiert.
Das ist einfach.
Da stand in dem Ticket was drin, wie viel die dir erstatten wollen und das haben sie jetzt deswegen gelöscht, damit du dich da nicht drauf berufen kannst.
Ne, das habe ich mit denen mit Twitter besprochen, mit der Erstattung, das habe ich auch noch alles schriftlich.
Twitter löscht da ja nichts, also das ist doch, also ich bin da in regem Austausch mit denen, immer mal wieder.
Unglaublich, wie lange sich das jetzt schon hinzieht bei dir.
Na, wie geht's? Ja, eigentlich seit ich, seit es Vodafone ist, seit ich den Vertrag umgezogen habe von Unity Media auf Vodafone und es war im Januar, Februar letztes Jahr, also vor einem Jahr, seitdem ist es irgendwie so wie es ist.
Naja, wie auch immer, also wir können aufnehmen, immerhin wieder und meistens, ja, es funktioniert eigentlich ja auch, also dafür reicht's, für meine Cloud-Backups, der Upstream ist, naja, aber, nun gut, wenn einen das Ticket nicht mehr interessiert, also jetzt der Tipp an euch, Pro-Tipp, einfach das Ticketsystem löschen, dann kann sich auch keiner mehr beschweren.
Ja, es ist einfach so, ich weiß nicht, was die da machen, aber irgendwie ist es kaputt, es ist grundkaputt.
Verrückt.
Ja, jetzt müssen wir auch nicht weiter drüber reden, weil jetzt kommen wir einfach schon zum nächsten Punkt, nämlich die Property der Woche.
Ja, ich darf wieder ran, also wir haben heute, wie gesagt, Moritz hat das Thema Haupt vorbereitet, deswegen hört man mich heute bei der Property und beim Geilteil.
Jetzt setz mich nicht so unter Druck mit dem Thema.
Doch, doch, doch, der Moritz hat das Thema sehr, sehr gut vorbereitet, ausführlichst.
Aber jetzt, die Property der Woche, und zwar geht es um das Before und After Pseudo, oder die Before und After Pseudo-Elemente, beziehungsweise da um ein spezielles Feature, und drauf gestoßen bin ich da gerade erst heute frisch, also wir nehmen freitags auf, und das ist ein Tweet von Stefan Judis von gestern, und er hat da gesagt, ja, ich hab heute gelernt, man kann Quotes, also Anführungszeichen, lokalisieren.
Und er ist da drauf gestoßen durch einen Artikel, den ich auch in Gänze sehr empfehlenswert finde, den verlinke ich natürlich auch in den Shownotes, da geht es grundsätzlich um Before und After und was man damit alles machen kann, also richtig in die Tiefe auch mit CSS-Countern und schlag mich tot, mit das Content-Property, was man da alles reinpacken kann, dass man da sogar Bilder reinpacken kann und so weiter, wusste ich auch nicht.
Darf ich raten, wie es funktioniert? Oder willst du sagen?
Mit der Lokalisierung? Ja, klar, schieß los.
Also, das ist keine fest eingebaute Lokalisierung, oder?
Also, das ist eine, die man selbst macht.
Doch? Okay, gut.
Es ist keine Schwarzmagie, kein, ja, also ich weiß nicht, was du genau hinaus willst.
Ich hätte jetzt geraten, Lang-Attribut, dass das da mit reinspielt und dass man dann, je nachdem, wie das gesetzt ist.
Das hat die entsprechende Auswirkung, ja.
Okay, gut.
Also, ich habe eine Demo gebastelt, da kannst du auch mal draufklicken.
Ja.
Die kommt natürlich auch in die Shownotes.
Das ist jetzt wieder was zum, ja, so eine Code-Pen-Demo besprechen im Audio-Only-Podcast ist halt immer schwierig, aber ich versuche es mal zu erklären.
Generell übrigens, wo ist sie denn? Hast du mir die geschickt?
Die ist im, ja, ne, im Trello drin.
Die Property der Woche, der letzte hier mit Demo, mit Pfeilchen.
Ach, da unten, jetzt, ja, jetzt, ja, jetzt, ah.
Also, Quotes, Anführungszeichen, dass man die richtigen nutzt, darüber hatten wir es übrigens in Folge 14, kleine Cross-Reference zu unserer Typografie-Folge, weil man sieht ja ganz oft, also deutscher Text, aber englische Anführungszeichen.
Ja, der Moritz kriegt ganz große Augen, dass er die Demo aufgemacht hat.
Ja, ich fand's auch cool.
Und deswegen hab ich's auch so spontan für heute als Property genommen.
Und zwar, ähm, also ich, oder möchtest du's beschreiben, was du siehst vielleicht, dass wir ein bisschen Abwechslung drin haben?
Nee, also, warte, ich, nee, es ist ganz anders, als ich mir's gedacht hab, äh, muss ich sagen.
Nee, was, was mich jetzt gerade überrascht hat, war, ähm, ich hab grad Anführungszeichen gesehen von denen, die ich, die ich nicht kannte.
Und zwar das unterste Beispiel. Kannst du mir sagen, was das ist?
Äh, Traditionelles, äh, Chinesisch.
Traditionelles Chinesisch, das sind Anführungszeichen, die sind wie so, äh, die linke obere Ecke von einem Rechteck und die rechte untere Ecke von einem Rechteck.
Ja, genau.
So versuch ich's mal zu beschreiben.
Ähm, und ich wusste, ich wusste nicht, dass das so einfach ist.
Also, ich hätte jetzt gedacht, dass man das manuell noch machen muss in CSS, dass man dem sagen muss, wenn langattribut bla, dann nimm, ähm, before und after, ähm, dies, dieses Zeichen.
Das kommt aber direkt aus dem, äh, aus dem, äh, Browser-Stylesheet, tatsächlich.
Genau, das ist, das ist doch noch deutlich, äh, deutlich tiefer im Browser eingebaut, als ich das jetzt vermutet hätte, weil das andere, das kann ja jeder, also ich mein, ich kann, ich kann ja beliebige, ähm, Zeichen in before und after reintun.
Und das kannst, kannst natürlich auf den Attributselektor, kannst natürlich reagieren, kannst sagen, ja, wenn's en ist, dann das und de und so weiter.
Aber das ist ja tatsächlich komplett eingebaut.
Genau, also vielleicht gleich generell mal before und after Element, vielleicht kennt das auch nicht jeder, das ist auch wieder was, was wir so voraussetzen, aber ganz neuer Neuling, äh, kennt das vielleicht nicht.
Also mit before und after kann ich in einem Element vor dem eigentlichen Content und nach dem eigentlichen Content was einfügen.
Also das kann Text sein, das kann aber auch, wie ich auch gelernt habe, ein Bild sein und, ähm, damit kann man eben so Sachen machen wie, ja, irgendwie ein Pfeilchen vor Links einfügen oder was weiß ich und andere tolle Dinge.
Ähm, genau, und ich erklär mal kurz, was man bei der Demo sieht, also man sieht, äh, mehrere Textabsätze.
Einmal, das ist ein Zitatblock auf Deutsch mit den deutschen Anführungsstrichen, also unten und am Ende oben.
Äh, this is a blockquote in English, äh, mit den Quotes jeweils oben, aber nach links zeigend und, äh, rechts nach rechts zeigend und die französischen Anführungsstrichen und auf chinesisch sind das auch wieder andere Anführungsstrichen, dann eben diese Ecken.
Also das sind wirklich, ähm, ja, lokalisierte Anführungsstriche, wie man sie in der entsprechenden Sprache verwenden, verwenden würde.
Und, ähm, technisch sieht das so aus, ich hab Blockquote-Elemente, in denen einfach der Text entsprechend drinsteht und die haben ein Lang-Attribut, also lang.de für Deutsch, lang.en für Englisch.
Erf, erf, erf, französisch und so weiter.
Und was ich dann im CSS mache, um das Ganze entsprechend zu formatieren, ist einfach nur auf dem Before-Element, also auf dem Before-Pseudo-Element, setze ich das Property Content, Doppelpunkt, Open, Minus Quote.
Und das ist die ganze Magie, derer es bedarf, damit das so aussieht, wie es aussieht. Und das fand ich auch echt cool. Also das ist sowas, das kennt, glaub ich, auch nicht jeder.
Ja, um jetzt mal bei dem Beispiel zu bleiben, das, was ich jetzt geraten hätte, wäre, ähm, dass man's folgendermaßen schreibt, äh, Blockquote und dann Attributselektor, äh, Lang und dann, ähm, en oder de.
Das braucht man ja da gar nicht. Und dass man dann eben reinschreibt Content und dann tatsächlich das Zeichen, was man da haben möchte, reintun.
Genau, und das suchst dann selber. Kann man auch machen. Also das ist auch in dem, in dem Artikel, ist das auch nochmal detailliert beschrieben, ähm, wie man da quasi eigene Zeichen einfügt,
Falls das jetzt in der Sprache nicht unterstützt werden sollte oder falls ich irgendwie, ja, keine Ahnung, Icons, äh, vorhaben möchte und, und dahinter, ähm, warum auch immer ich das machen wollen sollte, ähm, ich kann mit Quotes Doppelpunkt und dann in Anführungsstrichen das linke, also in, in, in Single Quotes, dann in Leerzeichen und nochmal in Single Quotes das rechte Zeichen kann ich angeben und, äh, ja, dementsprechend werden die Zeichen dann davor und danach ausgegeben.
Also ich find's super cool. Das ist, das sind so kleine Details, die es irgendwie dann geil machen, wo man jetzt in dem Fall sich gar nicht so viel Gedanken machen muss, sondern man kann dem Browser einfach die Lokalisierung überlassen. So was find ich immer echt schick.
Also an der Stelle echt, äh, geile, geile Property der Woche, find ich.
Und schaut euch auch wirklich den Artikel an, der da mit dazu verlinkt ist und der dazu geführt hat, dass erst Stefan Judis und dann ich da drauf gestoßen sind, ähm, weil der ist wirklich sehr interessant. Also ich hab nicht nur das, sondern auch noch weitere Dinge über,
über, über Before und After gelernt. Also es lohnt sich, das mal, das mal ganz durchzuschauen, auch mit, mit Code-Beispielen.
Ah, After, hahaha, Code, hahaha.
Oh, wow. Oh, ja, oh.
Ja, okay, das war jetzt nicht einfach nur, war nicht einfach nur, äh, irgendwie hier so, ha-pipi-kaka-Humor, sondern es hat, hat eine Bewandtnis, damit die V-Haber nicht breitreden möchten.
Hä, was?
Ich weiß nicht, warum du, ich weiß wirklich nicht, warum du, ich weiß wirklich nicht, warum du.
Ja, egal, Werbung.
Lieber Geliebter, ich freue mich sehr, meine Geschichte mit Ihnen zu teilen.
Am Kerstin Glaser, ein 47-Jähriger aus Vernon, der einzige am 6. Januar Jackpot-Gewinner in Höhe von 559,7 Millionen US-Dollar Powerball, hat die Geschichte des Garden State gezeichnet.
Da habe ich eins, spende einen Teil meines Jackpots an Menschen auf der ganzen Welt und wollte immer meine Träume wahr werden lassen, lebensveränderndes Geld für Familie, Freunde und Menschen in Not, Veränderung.
Einiges davon könnte auch seinen Zweck erfüllen.
Eines stellen Sie Corvette von 1963 wieder her.
Ich wurde positiv für Covid-19 getestet und weiß nicht, was als nächstes passieren wird.
Bitte kontaktieren Sie mich unter...
Lieber Geliebter, ich höre mich sehr, meine Geschichte mit Ihnen zu teilen.
M. Kate Glaser Franklin, ein 47-Verantwortlicher aus Vernon, der leere am 6. Januar Jackpot-Gewinner in Höhe von 559,7 Millionen US-Dollar Powerball, hat die Geschichte des Garden State gezeichnet.
Da habe ich eins, spende einen Teil meiner Jackpots und Menschen auf der ganzen Welt und verloren immer meine Träume wahr werden lassen.
Lebensveränderndes Geld für Familie, Freunde und Menschen in Not, Auswirkungen.
Einiges davon, auch sein Zweck, eines stellen Sie Corvette von 1963 wieder her.
Ich wurde positiv für Covid-19 getestet und weiß nicht, wurde auch als angemessen geändert wird.
Bitte kontaktieren Sie mich unter...
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Weißt du eigentlich, wie schwer es ist, so einen Text, der völlig unzusammenhängend ist, abzulesen?
Ich habe, glaube ich, 50 Takes gebraucht für den Spam-Spot.
Du bist der Profisprecher, echt, das ist unglaublich.
Ja, die Spam-Mail ist unglaublich.
Also kurz mal wieder die obligatorische Erklärung für alle Neuhörerinnen.
Unsere Spam-Spots, das sind tatsächlich Spam-Mails, die wir erhalten haben oder die uns zugeschickt wurden von Hörern auch und Hörerinnen, die wir dann vertonen.
Das heißt, der Text war eins zu eins so in einer Mail, auch mit diesem, es fängt einfach zwischendrin nochmal neu an, aber die Übersetzung ist anders.
War auch nicht sinnvoller, die zweite Übersetzung, im Gegenteil, aber ja.
Ich erinnere mich nicht mehr an die, war das eine von dir?
Ich bin mir nicht mehr sicher, ich weiß nicht.
Ich weiß es nicht, genau.
Aber es ist, glaube ich, unser längster Spam-Spot bisher, aber es hat ja auch lange gedauert, bis er wieder kam, weil wir haben ja pausiert, bis er wieder gespendet wird.
Mich hat es fertig gemacht, wirklich.
An der Stelle danke an Commander, der diesen Spam-Spot gespendet hat.
Genau, dem haben wir den Spam-Spot zu verdanken.
Und ich muss noch dazu sagen, die Musik im Hintergrund, das ist der Track I'll Be Right Behind You, Josephine von Josh Woodward, Creative Commons Attribution License.
Und das sage ich nicht nur, weil ich es muss aufgrund der Lizenz, sondern man kann das kostenlos runterladen und ich finde es einfach echt cool.
Auf joshwoodward.com ist einfach ein Musiker, der kostenlos seine Musik da zur Verfügung stellt.
Und es ist gar nicht so einfach, so Produktionsmusik zu finden, die nicht nur kostenlos, sondern auch gut ist.
Also oft hat man dann halt irgendwie so, es ist im Endeffekt einfach nur MIDI, was dann durch eine Aufnahmesoftware gejagt wurde.
Und das klingt entsprechend so.
Und das ist halt einfach, das ist halt echte Musik.
Und der hat hunderte, hunderte Tracks.
Hast du den Leuten verraten, dass wir die Musik nicht selbst komponieren?
Doch, klar, ich sitze da und klampfe, während ich spreche im Hintergrund.
Ja, das ist nicht mal, das ist alles live.
Achso, jetzt habe ich das auch noch verraten, dass wir das nicht live einsprechen, verdammt.
Nee, ist natürlich nicht so.
Genau, also lohnt es sich da einfach mal reinzuhören.
Der bietet die Musik sogar mit Text und als Instrumental an.
Und das Ganze, wie gesagt, Creative Commons.
Wenn wir mal mit WWS TV auf der Bühne sind, dann müssen wir so einen Spam-Spot aber live vertonen.
Das können wir dann gerne machen, ja.
Oh, du planst schon unsere Twitch-Karriere explosionsartig und dann mit live Auftritten.
Ja, natürlich live Auftritten.
Schauen wir mal.
Klar, man muss ja, also andere Podcasts machen das auch.
Warum sollen wir das?
Hast du eigentlich auch eine Corvette von 1963, die du aufmöbelst?
Nee, nee, von 1962.
Das Verrückte daran ist, dass das so spezifisch ist und so zusammenhangslos.
Ja.
Ich weiß nicht mal mehr, was ich da jetzt eigentlich genau kaufe.
Also, das war so ein typisches Fishing-Ding, dass ich da irgendwie Millionen gespendet bekomme.
Ich muss wahrscheinlich nur irgendwelche Transaktionsgebühren vorschießen oder so.
Darauf basiert das wahrscheinlich.
Fantastisch, nee, du musst nur diese indische Hotline anrufen und, äh, die mir dann sagt, dass mein Microsoft-System kaputt ist und dann kann ich sagen, ja, habe ich selber gemerkt, dass der Lab noch nicht mehr hochfährt.
Danke.
Okay, ja gut, also es hat mich hier in WWF-IV mit dem Tagesthema.
Ich habe einen nervösen Finger, ich wollte eigentlich nur schon mal in die Richtung gehen.
Ist schon okay, bevor wir zu lange labern, äh, guck mal, wir haben auch erst 58 Minuten ohne Thema.
Also, ich habe schon Befürchtungen gehabt, dass die Retro lang wird, aber wir haben tatsächlich, das ist noch im Rahmen, also wir waren schon über eine Stunde bei der Retro und da hatten wir nur drei Themen.
Ja, das ist ja gar nicht, mein Recording ist ja viel früher gestartet, als, äh, als es eigentlich losgeht, von daher, keine Ahnung, wo wir jetzt gerade sind.
Aber sorry, das ist nicht abgebrochen, falls du noch was zum Spam-Spot hast, ansonsten habe ich hier einen zu schnellen Triggerfinger.
Nein, nein, nein, nein, ich habe nichts mehr zum Spam-Spot, ich wollte, ich wollte gar nichts mehr sagen.
Ähm, ja, das heutige Thema, ähm, ich habe das, das steht schon lange auf unserer Liste und, äh, ich habe mich immer ein bisschen davor gedrückt, weil ich mir dachte, oh Gott, das muss ich ja dann auch
vorbereiten, aber jetzt heute, heute sprechen wir mal drüber und zwar über, ähm, Icons und Iconsysteme und wie man Icons auf seine Webseite bringen kann, was es da so für Möglichkeiten gibt, was,
ich habe auch am Ende so die Empfehlung, wie ich es jetzt heutzutage machen würde und auch so ein bisschen Geschichte, ähm, wo kommen wir her, äh, was, was, wie hat man es früher gemacht, ähm, deswegen hat das Thema ein bisschen Potenzial auch wieder länger zu werden.
Also, da ich, da ich sonst nicht viel dazu beizutragen habe, sage ich einfach mal kurz, was mein letzter Stand war, was das State of the Art war und dann gucken wir mal, wie man da hinkommt und wo wir seitdem davon hergekommen sind, nicht?
Okay.
Ja, also mein letzter Stand war, äh, ein PHP-generiertes Iconsprite und entsprechend das CSS dazu, aber immerhin schon SVG, ja, aber es ist ein paar Jahre her, also da war noch Node, war da erst im Kommen und, äh.
PHP-generiertes Iconsprite?
Du weißt, du, dieses Projekt hat dich auch tangiert, miau, äh, sag ich nur, äh, ach so, echt, war das PHP-generiert?
Mhm.
Eieiei, oh, das, ach, ja, doch, ja, stimmt, das war ja alles PHP dahinter, ähm, äh, und jetzt bin ich gespannt, was sich seitdem getan hat.
Und wer, also ich, ähm, du bist, du bist eigentlich schon, du bist schon recht nah dran, ähm, ich würde nur sagen, wer es generiert oder wie es generiert wird, ist eigentlich wurscht.
Ich hätte jetzt eine andere, also ich, das, was ich als, als State of the Art kenne.
Aber zumindest, dass es dynamisch generiert ist, also dass da nicht jemand rumschubsen muss, das meinte ich jetzt halt.
Okay, ja, genau, also eigentlich ist es clever, so jetzt am Anfang schon mal anteasern und jetzt aber dann nix sagen.
Genau, ich wollte einfach mal sagen, so, was, was ist mein Standpunkt und, äh, ja, erleuchte mich.
Jetzt geht's, scroll ich's in meine Geheimnotizen. Ähm, genau, so, wo fangen wir denn an?
Wir fangen mal an mit, ähm, wie hat man das denn früher gemacht? So ganz, ganz, ganz früher, so in der Zeit, als ich irgendwie angefangen hab, da gab's auch irgendwie schon Icons oder, da hat man eigentlich noch gar nicht so viele Icons verwendet.
Die wurden aber dann noch in Stein gemeißelt, oder?
Die wurden, äh, genau, die wurden in Stein gemeißelt, als ich damit angefangen hab. Da gab's auch noch nix anderes. Wir hatten ja nix. Wir hatten nur Hammer und Meißel.
Und manchmal auch ein Stein. Nein, natürlich ist das Blödsinn. Ähm, ich, ich wollte jetzt noch ein bisschen Theorie vorweg schicken, weil das jetzt gleich noch, ähm, ein bisschen, ähm, ich weiß nicht, wie gesagt, wir versuchen ja auch irgendwie ein bisschen zugänglich zu sein für die Leute, die jetzt nicht schon ewig, äh, in der Branche sind.
Ähm, und ein bisschen Theorie, da kannst du mir bitte auch, äh, dabei helfen. Äh, du kannst da, glaube ich, auch was dazu sagen. Und zwar, ähm, ich, man unterscheidet eigentlich, äh, bei Grafiken generell, äh, im, im Web eigentlich zwischen Bitmap-Grafiken und, ähm, und, ähm, es hat halt im Web mit, eigentlich mit Bitmaps begonnen und mittlerweile ist man bei Vektor-Grafiken angekommen.
Ähm, und der Unterschied ist, äh, naja, ein Bitmap ist im Prinzip genau das, was es sagt, was das Wort auch sagt, also eine Map von Bits, im Prinzip eine Matrix oder, äh, wenn man es, wenn man es ganz runterbricht,
so eine Art Tabelle, in der steht, äh, der erste Pixel links oben hat Farbe bla und der nächste Pixel hat Farbe bla und so weiter geht man quasi einmal die ganze Reihe durch, äh, von oben bis unten, also, ja, äh, wie in der Matrix eben und, ähm, dann, daraus ergibt sich dann das Bild aus diesen einzelnen Punkten.
Das ist natürlich noch ein bisschen komplizierter, wenn man dann irgendwie mit Komprimierung arbeitet, dann ist das nicht mehr so, dass wirklich jeder einzelne Pixel beschrieben wird, aber, ähm, ihr, ihr versteht es, glaube ich, was ich meine.
Ich wollte noch kurz in den Raum werfen, den, den, den Begriff Raster-Grafik, den man konträr zur Vektor-Grafik, äh, auch hört, nur dass das mal, äh, gehört wurde.
Genau, das, das, das, das, nee, das ist, das ist auch noch auf jeden Fall, äh, ein gutes Wort an der Stelle, damit kann man sich's besser vielleicht vorstellen.
Stellt's euch vor wie, äh, ein, ein Raster, in dem, äh, jeder, jeder Punkt ein Pixel ist und, äh, der dann gesagt kriegt, was für eine Farbe und das ist dann noch RGB und so weiter, aber so tief müssen wir da jetzt gar nicht rein.
Ähm, demgegenüber steht, äh, die Vektor-Grafik, ähm, die im Prinzip mit einer Art Code beschreibt, was da jetzt aus, was, was, was, wie das, wie das, wie die Grafik aussehen soll.
Also einmal, äh, bei, bei, bei, beim Bitmap oder bei der Raster-Grafik setzt sich das Bild aus den einzelnen Pixeln zusammen, die eine Farbe kriegen und, äh, in der Vektor-Grafik werden zum Beispiel Formen beschrieben.
Also zum Beispiel, äh, ich hätte, ich hab hier an einer Stelle ein Quadrat und das ist auf meinem Rahmen, den dieses Bild hat, irgendwie so und so viel Prozent hoch, äh, und breit und, ähm, dann liegt da irgendwie an Positionen so und so noch ein Kreis drüber.
Jetzt so ganz, ganz einfach gesprochen, du kannst halt auch Text reinpacken, äh, in, in, in eine Vektor-Grafik, ähm, du kannst auch Freiformen beschreiben, alles Mögliche.
Also BBSI-Kurfen zum Beispiel.
Genau, ähm, genau, äh, genau, also jeder, der ein Vektor-Programm, Grafikprogramm schon mal benutzt hat oder so ein Formenzeichen-Programm, sag ich jetzt mal so ganz, äh, ganz einfach, ähm, der hat schon mal irgendwie einen Vektor gesehen.
Und, äh, das hat, also letzten Endes natürlich, ähm, könnte man jetzt sagen, wenn ihr aufgepasst habt, äh, bei Vektoren in der Schule, nee, aber, ähm.
Oder bei unserer letzten Folge.
Das braucht man zum Glück dafür normalerweise nicht.
Dafür gibt's eigentlich ganz nette Tools, wenn man Vektor-Grafiken erstellen will.
Man muss jetzt nicht, äh, Vektor-Berechnung in der Schule gut aufgepasst haben dafür.
Das kann man auch irgendwie so, also einfach mal ein paar Formen zeichnen.
Ähm, genau, also das, das so, so vorab, also das ist so, es ist so das, ähm, was man, glaube ich, wissen muss, um, um zu verstehen, ähm, von wo nach wo man geht.
Weil das ist irgendwie, finde ich schon, schon wichtig, dass, dass man das so als, als Grundlage hat.
Ähm, genau, was ich jetzt, was ich dich noch fragen wollte, ob du da was drüber weißt, ähm, weil ich jetzt auf die Schnelle, äh, vorher jetzt in, in, in der Vorbereitung nichts gefunden habe,
aber eigentlich, ich, ich, ich, so eine logische Antwort drauf hab, ist, Rechenaufwand, ähm, Raster-Grafik versus Vektor-Grafik.
Also, hast du da mal irgendwas?
Och, nee, keine Ahnung, äh, ob das jetzt...
Also, ich hab mir halt gedacht, und vielleicht muss man, vielleicht muss ich mal irgendwie ein Test-Case bauen.
Also, mein, mein, ja, der Gedanke wäre jetzt, naja, der Computer muss das ja aber wieder in Raster umwandeln, weil ich ja am Bildschirm, ich hab ja nur Pixel, ja, außer man hat einen Vektor-Bildschirm, auch wieder Link auf unsere letzte Folge, ähm, aber der Computer muss
wieder muss ja, anstatt das einfach als Raster da irgendwo hin zu plotten, muss er das ja vorher in einen Raster umwandeln.
Deswegen würde ich sagen, wahrscheinlich...
Bei einer Vektor-Grafik.
Bei einer Vektor-Grafik, genau.
Also, ist wahrscheinlich der Aufwand, äh, wahrscheinlich ist es verschwindend gering, aber dürfte höher liegen, als einfach eine Pixel-Grafik darzustellen.
Ich weiß nicht, ob es was ausmacht, aber wenn du eine Vektor-Grafik hast, muss der Rechner halt noch irgendwie, ähm, sich erstmal überlegen, was ist denn das jetzt überhaupt, was für eine Form zeichne ich denn da hin?
Und in welcher Größe muss die da hin und was hab ich eigentlich für eine, für eine Pixeldichte auf dem Bildschirm und so, und so weiter.
Genau, weil am Ende kommen ja wieder, kommt ja wieder ein Raster raus, sozusagen, ne?
Also das, äh, keine Ahnung, es würde mich echt interessieren, falls ihr irgendwie wisst, dass, äh, dass es irgendwie jemand schon mal getestet hat, äh, Rechenaufwand und vielleicht auch Performance, keine Ahnung, aber wahrscheinlich auf einem Level, der, der nicht, nicht wichtig ist.
Ähm, ähm, äh, Performance und Rechenaufwand von, äh, Bitmap versus Vector, würde mich interessieren, äh, falls es jemand irgendwie schon mal gesehen hat, dass es das irgendwo gibt, äh, dann schreibt's mal bitte in die Kommentare, äh, und natürlich die Glocke nicht vergessen, die Glocke bei Twitter.
Nein, nein, nein, war nur Spaß, es ist in meinem, in meinem Hirn ist es hart verknüpft, schreibt's mal in die Kommentare und die Glocke.
Nein, nein, jetzt nicht nochmal.
Nein, nein, okay.
Also, fangen wir ganz einfach an, in der Zeit, als ich angefangen habe, irgendwie Webseiten zu bauen,
da war das so, ähm, da gab's eigentlich keine Icon-Systeme oder zumindest keine, die mir bekannt waren, sondern wenn man irgendwie ein Icon gebraucht hat, ähm, dann hat man einfach, äh, die Rastergrafik und in dem Fall war das, da waren es damals oft GIFs und, ähm, nicht, weil man sie animieren konnte, sondern einfach, weil es irgendwie damals, äh, ein relativ effizientes Dateiformat war, irgendwie nur 256 Farben und, ähm, dann konntest du irgendwie so Pixel für Pixel da irgendwie schön hinsetzen, ähm, das wurde einfach damals verwendet.
Also, GIF ist, äh, Rastergrafik, ähm, wie gesagt, 256 Farben, kann man auch animieren, aber gar nicht, ich glaub, dass das gar nicht mal deswegen, ähm, für die, äh, für die Icons benutzt wurde, obwohl, da fallen mir diese, diese lustigen Baustellen, äh, Bagger-GIFs irgendwie ein.
Kling, Kling, Kling, äh.
Ist ja irgendwie auch ein Icon, aber, ja, kann man jetzt nicht drüber streiten, ob das jemals jemand brauchte, ähm, ein Kollege hat mir heute was geschickt, wo er gesagt hat, naja, Under Construction, das kommt jetzt auch wieder, hat er irgendwo gefunden, ähm, äh, das war allerdings nicht animiert.
Ähm, immerhin.
Genau, also man hat einfach jetzt ein GIF gehabt, mit einem Icon, das hat man einfach als Image eingebunden auf die Seite und das war dann halt da, so.
Ähm, ist ja jetzt erstmal kein Problem, kann man so machen. Warum auch nicht, ne? Oder? Spricht irgendwas dagegen?
Ja, ja, nee. Es gab ja auch nichts anderes, also so blöd es klingt, aber ich mein, das war halt, ja, wenn ich ein bisschen mehr als Text wollte, dann hab ich halt Image eingebunden.
Das ist auch, das ist auch zu Zeiten, wir reden hier über Zeiten, vielleicht mal um es einordnen zu können, wo es eigentlich auch noch so gut wie kein CSS gab.
Ich wollte gerade sagen, da war auch nichts mit, naja, dann nehme ich es als, als Background-Image, ähm, geschweige denn irgendwie als Before- oder After-Element irgendwo hin, ja, also, das war noch weit entfernt und ich glaube, das Einzige um, um irgendwie Hintergrundbilder zum Beispiel war halt in der Table, ja, Tabell-Dayout und dann irgendwie BG-Image.
Und dann konnte man Hintergrundbilder angeben, aber irgendwie, also ansonsten hast du halt einfach eine Grafik eingebunden, ja.
Genau, so, und der nächste Schritt war dann, ähm, und das, das war dann, als ich dann irgendwann das, äh, verstanden hab, das war für mich auch wieder so, so ein, äh, Brain-Explodes-Moment, äh, wo wir auch schon öfter drüber gesprochen haben, ähm, manchmal, wenn man, wenn man versteht, wie dann was funktioniert, dann, äh, dann hat man irgendwie so ein, äh, ja, da geht die Glühbirne, äh, ähm, irgendwie an.
Ja, hier auch wieder Cross-Reference auf unsere Folge, acht magische Entwickler-Momente, wo wir genau sowas besprechen.
Ähm, und zwar, äh, das, das Stichwort, was jetzt als nächstes kommt, heißt Sprites.
Also ein, ähm, ein Sprite ist eine, eine Grafik, also ein, äh, ja, eine Grafikdatei, die mehrere Icons in dem Fall dann gleichzeitig enthält.
Und damit man nur immer eins davon sieht, weil man will meistens nicht jetzt alle auf einmal sehen, ähm, hat man ein Container-Element, das eine bestimmte Größe hat und, ähm, die Position, ähm, der, der, des, des Hintergrundbildes, was eben in dem Fall diese Sprite-Grafik ist, ähm, bestimmt welches, welches Icon man dann in dem Fall sieht.
Also man sieht immer nur einen Ausschnitt von der Gesamt-Grafik.
Ähm, warum hat man das gemacht? Ähm, der Klassiker war damals noch, naja, man möchte ja vielleicht irgendwie mit Mouse-Over über ein Icon, äh, wenn das jetzt in einem Link ist oder so, vielleicht auch die Farbe mal wechseln davon.
Das war irgendwie so der Klassiker.
Das ist dann schon wieder Sliding-Doors eigentlich auch, ne?
Ja, genau, man hatte, man hatte das Gleiche, ja, ist im Prinzip Sliding-Doors, ähm, so hieß, so hieß das damals, müsst ihr euch, müsst ihr jetzt nicht googeln, was das genau ist.
Nee, hatten wir auch letzte Folge, wer letzte Folge gehört hat, weiß Bescheid.
Die Obras, die Obras erzählen wieder vom Krieg.
Genau, äh, da gibt's auch einen schönen CSS-Tricks-Artikel dazu, ähm, wo, äh, Sprites erklärt werden und der ist von, äh, von 2009.
Ach doch.
Ähm, das ist, glaub ich, auch so die Zeit, äh, rum, wo ich zum ersten Mal mich damit irgendwie so ein bisschen tiefer, äh, beschäftigt hab, oh, nee, warte, stimmt nicht, stimmt nicht, was ich sage.
Ähm, hier steht First Publication 2007, also der Artikel ist von 2007, ist noch ein bisschen älter.
Bei CSS-Tricks, die waren immer schon relativ früh dran. Ähm, ich glaube, ähm, Sprite, ähm, für mich war das damals komplett neu, aber so für Leute, die irgendwie damals, äh, C64-Programme geschrieben haben oder, keine Ahnung, äh, wussten, wie Nintendo-Spiele funktionieren oder irgendwie Games gebaut haben, die kannten damals auf jeden Fall schon Sprites.
Weil das ist irgendwie so das Ding, ähm, dass man irgendwie eine große Grafik hat, die irgendwie alle kleinen, äh, Untergrafiken enthält, die dann irgendwie in der Position, äh, durchrotiert werden auf einem Container, der den Rest halt nicht anzeigt, der nur eine bestimmte Größe hat, das war, ist in Games schon, schon lange gegangen.
Und das ist übrigens, weil wir es vorhin von Performance hatten, auch der Grund, also es ist einfacher, eine große Grafik reinzuladen in den Grafikspeicher als irgendwie tausende von, von kleinen Minigrafiken.
Also das ist einfach performanter.
Genau, und, ähm, das war auch der Grund, warum man das, also einer der Gründe, warum man das damals so gemacht hat, ähm, HTTP-Requests, ähm, waren damals noch teurer als, als heute, ähm, vor allem halt auch langsamere Internetleitungen.
Man wollte möglichst wenig Requests haben, also lieber ein großer als, als 25 kleine für die einzelnen Grafiken und zusätzlich, wenn das Sprite einmal geladen ist, kann auch ganz schnell irgendwie nochmal ein Bild irgendwo, äh, äh, eingebunden werden oder irgendwie ausgetauscht werden.
Dann, weil er eigentlich im Prinzip nur die Position der Grafik hin und her springt, ähm, ähm, ähm, was dann halt zum Beispiel auch so, äh, so Hover-Effekte irgendwie sehr, sehr schnell gemacht hat, sobald das Ding einmal geladen war, kein Problem, weil ich erinnere mich noch, dass ich das mal so gebaut hab, naja, bei Hover auf ein Element wird dann das andere Bild geladen.
Und dann hattest du immer so beim ersten Mal so eine leichte Verzögerung, bis es dann nachgeladen wurde, dass, und da hat er gesagt, nein, nein, nein, da muss man ein Sprite nehmen und dann, äh, dann, dann, dann schiebt sich das hin und her und, äh, dann ist irgendwie alles, alles fein.
Ähm, genau, natürlich hat es noch einen weiteren Vorteil, nämlich, dass ich die gleiche Grafik, ähm, aus der, aus dem gleichen Bild, äh, irgendwie auch nur einmal, ähm, laden muss.
Ähm, ähm, ich meine, der Cache ist zwar vielleicht gut, aber, äh, und wenn ich dieselbe Grafik nochmal lade, äh, sorgt vielleicht dafür, dass ich es nicht nochmal laden muss, aber sie wird auch gar, es gibt gar keine Möglichkeit, dass sie nochmal angefragt wird, weil ich sie nur einmal tatsächlich im CSS referenziere und sage, das ist jetzt mein Sprite und dann am Ende dann immer nur noch das, äh, das nochmal, äh, sag hier, das ist dieses Sprite und, ähm, spring bitte, bitte, eigentlich, nee, eigentlich nur die Position, eigentlich am Ende hast du auf dem Element nur noch die Position, äh, die du veränderst und, ähm, genau.
Ähm, ähm, der nächste Schritt war dann, ähm, dass Sprites automatisiert werden, also damals hat man, äh, kurz zur Erklärung, warum sage ich das jetzt extra, äh, damals hat man die Sprites dann noch von Hand gebaut, also, es war so, ich hatte halt in Photoshop irgendwie, äh, seine, seine Icons reingepackt und hat dann gesagt, naja, äh, ich habe jetzt hier die, die Position so und so und ich schiebe die jetzt mal nebeneinander und da habe ich vielleicht noch ein bisschen Weißraum dazwischen, ähm, ähm, ich habe da schon sehr abenteuerliche Geschichten gesehen mit Sprites, die irgendwie mehrere tausend Pixel hoch waren,
Weil man irgendwie noch Platz gelassen hat für andere Zustände der gleichen Grafik, äh, und so, sodass man auch nicht, äh, die direkt nebeneinander packen wollte und früher war es dann auch noch so, da hattest du im Browser ganz gern mal irgendwie Rundungsfehler, äh, wenn du, wenn du irgendwie was positioniert hast, das heißt, man hat dann noch so eine Art Schutzrahmen manchmal drumherum gemacht, der dann transparent war, in dem Fall dann, äh, waren es PNGs, also immer noch, äh, Rastergrafiken.
Ähm, und so sind die dann, äh, gewachsen, sehr groß geworden und das war auch, äh, also wenn man da irgendwie was Größeres hat, das ist, äh, Maintenance Hölle, da möchte man eigentlich nicht, weil, weil dann irgendwann kommt man auf die Idee, scheiße, jetzt habe ich hier noch, noch eine, ähm, noch einen weiteren Zustand vom Gleichen, aber ich habe jetzt da irgendwie gar keinen Platz mehr, was mache ich denn jetzt, muss ich das ganze Ding jetzt da noch breiter machen und, äh, furchtbar.
Ja, und dann jedes Mal auch die, im CSS dann die Werte wieder aktualisieren müssen, wenn ein Icon dazukam und so ausmessen wie, also entweder hat man sich dann halt Hilfslinien gezogen und irgendwie ein Raster gemacht, ähm, oder halt schnell hier eine Maske aufgezogen mit, mit eine rechteckige und geguckt, äh, XY, also ja, ich erinnere mich da auch noch sehr gut dran.
Genau, und weil, weil das keiner alles von Hand machen will, kamen dann irgendwann die Sprite-Generatoren ums Eck, also so kleine, noch üblicherweise, äh, Command-Line, äh, Skripte, die zum Beispiel hingehen und sagen, äh, du hast hier in deinem Projekt in Folder XY, ähm, hast du deine ganzen einzelnen Grafiken liegen, die ganzen einzelnen Icons, die, ähm, obwohl, nee, ich glaube, es ist egal, ich wollte gerade sagen, die alle gleich groß sind, äh, von, von, von den Abmessungen her müssen sie aber gar nicht sein.
Ist egal, können so groß sein, wie sie wollen. Ähm, und das, das Skript geht dann her, schnappt die sich alle und, ähm, packt die automatisiert in eine Grafik und zwar wirklich dicht an dicht und versucht die auch noch möglichst klein zu machen, also versucht die so anzuordnen, ähm, dass die, äh, dass die möglichst wenig Platz wegnehmen und dann möglichst kleine Grafik, also auch von der Dateigröße her, erstellen. Ähm, was das natürlich dann auch machen muss, ist das CSS automatisiert schreiben, weil, äh, nur das
Skript weiß dann in dem Augenblick, welche Grafik wo ist. Das muss dann halt, äh, das macht dieses Skript dann und ich hab da jetzt mal ein Beispiel, äh, kommt auch in die Shownotes, ähm, hab ich auch gesehen jetzt gerade, ist, äh, ist in meiner Firma noch im Einsatz
an einer Stelle, ähm, und zwar SpriteSmith heißt das, das ist so ein, äh, das ist glaube ich, äh, ja, von, ist ein NPM, äh, gibt's als NPM-Paket und ich hab das da in dem, äh, als, als Galb-Plugin gibt's das auch, ähm, für die Leute, die Galb kennen.
Als nächstes, so, das war jetzt, das war jetzt, das war jetzt, das war jetzt, das war jetzt ein Teil, den, äh, die Podcatcher schön rausschneiden können, die lange Pause.
Ähm, hab grad schon eine Editiermarke gesetzt, aber gut, jetzt lassen wir's drin.
Hast du?
Nein, nein, nein, das, das soll die Software machen.
Okay.
Das soll's nicht du machen, das soll die Software machen.
Ähm, das nächste, der nächste heiße Scheiß waren dann Icon-Fonts, ähm, und ich glaube, es gibt Leute, die immer noch da drauf schwören, zumindest hab ich das immer mal wieder so mitbekommen, wo Leute sagen, ja, was, wie, äh, SVG, äh, nein, wir nutzen noch Icon-Fonts, ähm, und so, also, was, was ist ein Icon-Font?
Naja, man hat halt eine Schriftart, die statt bestimmten Zeichen eben die Icons enthält, die man, äh, die man haben möchte. Ähm, und es gab da sogar auch wieder so schöne Skripte und irgendwie Generatoren, wo man, äh, wo man seine eigenen Icons dann in eine Schriftart verpacken konnte, weil wer will schon eine Schriftart von Hand bauen, ne, Konstantin?
Ja, richtig.
Genau.
Stille Referenz auf eine Folge, wo ich die, die, die, die, die Nummer nicht mehr weiß, aber der Konstantin hat sowas schon mal gemacht. Ähm, genau, also da gab's diverse Skripte und warum wollte man das machen oder was war jetzt der Vorteil gegenüber, ähm, jetzt einem PNG-Sprite?
Naja, ähm, bei, wenn man eine Schriftart hat, Schriften, wie, wie wir alle wissen, naja, dir kann, man kann die Schriftgröße angeben, man kann die Größe verändern und, äh, eine Schrift in, ähm, 100 Pixel Schriftgröße sieht immer noch gut aus im Browser, ähm, weil, oder, ich, weil, weil sie auch Vektoren basiert, genau.
Und was man, man kann halt dann mit dem, äh, mit einem Icon-Font, also mit einem Icon, das in der Schriftart drin ist, alles machen, was man mit CSS, mit Schrift halt auch machen kann.
Also, ich kann irgendwie Text-Shadow vergeben, ähm, ich kann die Größe verändern, ähm, ich kann die Farbe verändern, äh, alles Mögliche.
Wie gesagt, alles, was man mit CSS, mit Schrift machen kann, kann man damit eben auch machen. Ähm, berühmtes Beispiel, weil da gab's natürlich nicht nur Leute, die das selbst gebaut haben, sondern es gab halt auch so fertige Eigen-Font-Sets, waren zum Beispiel, äh, Font Awesome kennt vielleicht der ein oder andere.
Ähm, könnt ihr gerne mal, äh, euch angucken oder Ico-Moon, glaube ich, war das andere. Ähm, genau. Und, äh, wie hat man das dann eingebunden?
Also, das war dann nicht mehr irgendwie ein Image-Tag oder ein, äh, HTML-Container mit, mit irgendwie Hintergrund-Grafik, sondern meistens wurde das so verwendet, dass man ein HTML-Element genommen hat.
Ich glaube, äh, bei, bei SMAX wurde mal vorgeschlagen, irgendwie so ein I-Element für Icon, was natürlich Bullshit ist, weil I eigentlich für Italics steht, aber es wurde ganz gerne so,
äh, verwendet, das I-Element mit einer bestimmten, äh, Klasse drauf, irgendwie so erstmal, ähm, ich bin hier ein, äh, ich bin in Icon-Font und dann noch, welches Icon ich genau haben will.
Und dann wurde da, äh, hat, hat man dementsprechend dann noch ein, ein passendes CSS dazu gehabt, wo dann, ich glaube, die haben das auch so gemacht, dass das nicht dann einfach den Buchstaben da drin, geht natürlich nicht, kann es nicht per CSS in Buchstaben reintun, nur mit Content-Before in dem Fall, weil es hatten wir heute schon, äh, Content-Before oder Content-After, ähm, also als Pseudo-Element wurde da dann das entsprechende Zeichen eingebunden.
Ähm, man hat da üblicherweise, soweit ich's weiß, ähm, nicht standardmäßig irgendwelche Buchstaben oder Zahlen oder so genommen, die, äh, die irgendwie normalerweise vorkommen, wenn man eine Webseite benutzt, sondern, äh, so, so, äh, verwaiste Unicode-Spaces.
Genau, beziehungsweise, es gibt, glaube ich, sogar so Custom-Unicode-Spaces als Platzhalter für irgendwelche Geschichten, die nicht wirklich vergeben sind für einen bestimmten Zweck.
Aber du jetzt gerade meintest, ähm, man kann nicht einfach Buchstaben reinmachen, könnte man ja theoretisch schon, ist aber halt für Accessibility blöd, ne?
Oder wenn die Schrift da nicht geladen wird, weil dann würde das flackern oder der Screenreader liest das vor, dass da ein Zeichen drinsteht oder so.
Hast du, hast du heimlich meine Notizen gelesen?
Nein, nein, nein, aber ich will dir jetzt auch gar nichts wegnehmen, ich wollte nur meine, meine 50 Cent da.
Ich find's wunderbar.
Okay.
Ähm, dann, dann gehen wir doch, dann gehen wir doch direkt mal drauf ein, auf das, was du gerade gesagt hast, das sind nämlich meine zwei letzten Punkte jetzt davon noch, ähm, nämlich, äh, du hast gesagt Accessibility-Probleme, ja, weil man möchte nicht, nicht, dass da irgendwie ein Buchstabe vorgelesen wird und, ähm, before und after, wenn da, wenn da, äh, Text drinsteht, das wird durchaus vom Screenreader vorgelesen, aber man möchte vielleicht nicht, äh, vorgelesen haben, äh, Herzchen, Icon oder keine Ahnung, was auch immer.
Das ist, äh, oder F, äh, oder F, äh, das ist natürlich totaler Quatsch an der Stelle, also möchte man möglichst was haben, was nicht vorgelesen wird und, äh, deswegen wurden da bestimmte, äh, Unicode Spaces, äh, genommen, aber was man natürlich auch noch, also, was man dann halt machen muss und, ähm, um sicherzugehen, dass der Screenreader nicht irgendeinen Käse vorliest, ist, zum Beispiel bei Font Awesome steht in der Dokumentation, dass man auch dem Element noch ein ARIA hidden, äh, ist true geben soll, damit der Screenreader auch, äh, das dann komplett ignoriert.
Ähm, das zweite, was du gerade noch angesprochen hast, ähm, ist der Flash of Unstyle Text, also man kann dann unter Umständen, wenn eine Seite geladen wird und der Font ist noch nicht geladen, ähm, dann hat man da irgendwie so ein komisches Unicode Kästchen stehen, solange bis der Font dann geladen wird.
Ähm, äh, kann relativ hässlich aussehen, hat vielleicht, äh, der ein oder andere auch schon mal gesehen, ähm, auf, auf Seiten, dass irgendwie, äh, erstmal sind keine Icons da und dann irgendwie zwei Sekunden später dann ploppen sie plötzlich auf, das war dann ein ziemlich sicherer Icon Font, der da verwendet wurde.
So, hast du noch was zu Icon Fonts?
Nee, nee.
Ansonsten würde ich weitergehen und jetzt sind wir nämlich dann schon sehr, sehr nah an dem, ähm, was ich jetzt heutzutage empfehlen würde oder wie ich, wie ich das heutzutage machen würde.
Ähm, also fangen wir an, das ist jetzt schon, wir sind jetzt schon beim, wir kommen jetzt schon beim richtigen Grafikformat an, äh, nämlich, äh, SVG, auch ein Vektorformat, aber es ist dann eben eine Grafik und kein Font.
Ähm, ähm, Scalable Vektor Graphics und, ähm, der naivste oder einfachste Ansatz davon ist, einfach SVGs, SVG-Grafiken, ähm, einfach ins HTML reinzuschreiben und, äh, ich erinnere mich, äh, da gab es mal einen, äh, einen Artikel auch auf CSS-Tricks von Chris, äh, der, äh, da geschrieben hat, ähm, leckt mich doch alle am Arsch so ungefähr mit, mit, mit euren fancy, äh, SVG-Sprite-Lösungen.
Ähm, ich schreibe die per PHP, äh, hart in die Seite rein und ja, ich weiß, das macht Probleme, aber es ist, äh, ermöglicht mir auch ganz viel, was, was dann irgendwie nicht nervig ist dadurch.
Also das ist der erste Weg, Entschuldigung, was man machen kann, ist einfach das SVG in HTML reinschreiben, genauso wie es ist, weil SVG ist XML und es ist auch standardmäßig definiert, dass das SVG da einfach drinstehen darf in HTML.
Also einfach nur ein anderer, äh, XML-Namespace, der dann da aufgemacht wird.
Ähm.
Was das, was das Problem davon unter anderem sein kann, ist, wenn man relativ viele Grafiken hat oder vielleicht irgendwie in einer langen Liste immer wieder das, gleich, die gleiche Grafik hat, dann muss man immer wieder das gleiche SVG, äh, reinladen und bläht damit sehr das HTML auf.
Und, äh, äh, wie man es von anderen Bildern oder, äh, äh, äh, anderen externen, äh, Grafiken oder, oder, oder, äh, Ressourcen gewöhnt ist, geht dann da halt nicht, weil HTML wird nicht gecached normalerweise und, ähm, das heißt, das kann dann durchaus, wenn man jetzt eine lange Liste hat, wo viele SVG-Icons drin sind, oder sagen wir mal, du hast jetzt irgendwie eine Tabelle mit, mit, äh, 500 Zeilen und, äh, in jeder Zeile sind irgendwie drei SVGs drin.
Ähm, naja, das läppert sich dann schon, wenn du jedes Mal die komplette Vektorbeschreibung irgendwie an der Stelle drin hast. Würde ich jetzt nicht unbedingt empfehlen, kann man aber in Einzelfällen, äh, so machen. Also, es gibt auch gute Gründe, die dafür sprechen.
Also, wenn man jetzt die Unicode-Emoji-Übersicht, äh, darstellen will, dann sollte man das vielleicht nicht tun, weil sonst, äh, lädt die Seite halt irgendwie eine Minute, bis alles da ist.
So, jetzt habe ich noch gar nicht gesagt, warum man eigentlich ein SVG verwenden will, warum ich der Meinung bin, dass es irgendwie mehr Spaß macht. Ähm, also, zunächst mal mit den, äh, aktuellen Devices, die man heutzutage so hat, ähm, die relativ hochauflösende Displays haben,
möchte man auf jeden Fall Vektorgrafiken verwenden, weil man dann nie das Problem hat, dass irgendwie, ähm, irgendwas irgendwie unscharf aussieht oder so, was man öfter mal hat.
Wenn ich jetzt irgendwie, äh, eine Website mit, äh, Pixelgrafiken auf einem 4K-Display angucke, die nicht extra optimiert sind dafür, dann kann das sehr blurry aussehen, weil es muss dann irgendwie hochgerechnet werden auf irgendwie die doppelte, äh, ne, die vierfache Pixelmenge und dann, äh, dann sieht es einfach nicht mehr gut aus.
Aber da das SVG ja nur die, ähm, die Information darüber enthält, was für eine Form da dargestellt werden soll und was für Farben, ähm, kann natürlich das System oder der Browser in dem Fall,
das mit den, äh, mit den verfügbaren Pixeln so dahin zeichnen, wie er es braucht und dann ist es eben gestochen scharf.
Ähm, ähm, weitere Vorteile ist, SVGs können, äh, mit CSS gestylt werden.
Ähm, man kann da ziemlich viel, äh, verrückte Sachen machen.
Ich meine, es ist einfach, das ist wahrscheinlich irgendwie so die Farbe.
Man kann sie aber auch einfach in der Größe, äh, verändern.
Ich kann die, ich kann ein SVG haben, dass ich aber immer, dass ich immer wieder ein bin, dabei in unterschiedlicher Größe und brauche gar keine andere Grafik dann dafür.
Und, äh, beliebig Farben und ich kann zum Beispiel einen Hover-Effekt machen da drauf, äh, wo das SVG dann, wenn ich mit der Maus drüber fahre, ähm, einfach die Farbe ändert.
Äh, ganz einfach nur, indem ich ein CSS sage, so, bei Hover hast du halt jetzt eine andere Farbe, fertig.
Ich brauche dafür keine andere Grafik oder irgendwas, so wie das, äh, früher oder jetzt mit, mit, wenn du irgendwie ein PNG nimmst, ähm, ähm, der Fall war.
Wobei ich schon, äh, verrückte Ansätze gesehen habe, äh, bei PNGs, wo man das auch versucht hat, indem man dann HTML, äh, wo man im Prinzip umgekehrt transparente PNGs verwendet hat und der Hintergrund davon dann eine Farbe hatte, die man dann mit Hover ausgetauscht hat.
Weißt du ungefähr, wie ich es meine?
Äh, ich kann es mir gerade nicht vorstellen, ohne dass man irgendwie dann, also den Hintergrund siehst du dann überall durch, also das ist ja dann ein Rechteck quasi mit, mit der Farbe oder nicht?
Ähm, naja, stell dir vor, ähm, ich weiß jetzt zum Beispiel, dass der Hintergrund meiner Seite,
immer weiß ist.
Okay, wenn du das weißt und dann entsprechend, ja, okay.
Und dann kann ich ein, ein Bild machen, das im Prinzip in, in der Form, ähm, des Icons, das ich haben will oder der Grafik, die ich haben will, transparent ist und der Rest ist weiß.
Und dann lege ich ein HTML-Element dahinter oder sag die Background-Color von diesem Bild, das kann man nämlich machen, ein Bild kann eine Background-Color haben, ähm, die verändere ich dann bei Hover.
Und dann habe ich quasi, ging das mit PNG theoretisch auch schon, so Schweinereien haben wir früher manchmal gemacht bei bestimmten Projekten, wo es gar nicht anders ging.
Wo wir dann gesagt haben, naja, ähm, das ist jetzt der Hintergrund, es weiß, der wird sich nie ändern und dann kann man sowas machen.
Wird sich nie ändern, ist immer gut.
Ja gut, ich meine, ähm, im Zweifel muss man dann halt in den sauren Apfel beißen und diese ganzen Grafiken halt nochmal umziehen.
Aber, ähm, ich habe, ähm, dieser Technik zu verdanken, dass ich so einige, ähm, ähm, Grafikwünsche, Grafiker und Grafikerinnenwünsche umsetzen konnte, was anders unmöglich gewesen wäre zu dieser Zeit.
Mittlerweile jetzt mit SVG ist ja alles cool.
So, jetzt kommen wir der Sache schon näher.
Also ich habe jetzt gesagt, man kann SVG irgendwie so einfach so in den Quellcode reinhauen, ähm, und dann ist das irgendwie schon fein.
Und dann kann man auch schon, äh, da das ja einfach dann im HTML drin ist, kann man auch einfach, äh, mit CSS da drauf selektieren und Dinge dran verändern.
Ähm, wenn man jetzt noch einen Schritt weiter gehen will, dann macht man ein Sprite, ein SVG-Sprite.
Ähm, warum möchte man das machen?
Ähm, weil man möchte vielleicht tatsächlich wieder alle in einer Grafik haben, Request sparen, beziehungsweise in dem Fall, äh, wie ich schon gesagt habe, nicht das HTML vollballern mit extrem vielen Grafiken,
sondern man möchte vielleicht jede Grafik nur einmal haben und dann irgendwie einbinden, so wie man das, äh, wie man das von, äh, CSS teilweise mit Hintergrundgrafiken auch gewohnt ist.
Eine Stelle, wo es referenziert wird, ähm, also den Vorteil von einem Sprite nutzen und das, äh, dass das Bild dann auch, äh, vielleicht gecached werden kann.
Ähm, ähm, um solche SVG-Sprites zu erstellen, gibt es natürlich auch wieder Generatoren, äh, Generator-Skripte, kleine, äh, Command-Line-Skripte.
Ähm, das, was ich weiß, was bei uns im Einsatz ist, ist, ähm, SVG-Store.
Ähm, das macht nämlich genau das, das packt viele verschiedene, ähm, einzelne SVG-Grafiken, ähm, in ein großes SVG und packt die so da rein, dass man die dann von außen wieder referenzieren kann.
Und zwar, indem man, ähm, drauf verlinkt. Die kriegen nämlich dann alle, äh, ne, so eine Art ID. Ähm, und dann, äh, kann ich mit der ID, ich spreche das SVG an und sage, ich hätte gern dieses SVG. Ähm, und sag dann hier, ID ist, äh, in dem Fall, keine Ahnung, wie auch immer das einzelne Icon heißt.
Und dann wird das genau angezogen an der Stelle. Punkt.
Also, es ist nicht, nicht, ist nicht so eine Art ID, sondern es ist wirklich ein ID-Attribut tatsächlich auf dem Element.
Genau, es ist das ID-Attribut.
Genau, es ist tatsächlich mit, auch mit Fragment, äh, nee, ich wollte gerade sagen, Fragment, äh, Blödsinn, mit Hash, äh, also Hash, äh, ID, ähm, wird es dann auch geschrieben.
Ähm, genau, also SVG-Store wird da eingesetzt, damit kann man sich sowas bauen, äh, und zwar sieht es dann am Ende so aus, dass man, ähm, äh, wenn man es einbinden möchte, dieses SVG, das da rausgeneriert wurde, ähm, dass man dann ein, äh, man schreibt da an der Stelle, wo man, wo man das einzelne Icon haben möchte, dann auch, ähm, irgendwie SVG in den
Code rein, also so, als würde man ein normales SVG reinschreiben, das SVG-Tag, aber innerhalb des SVG-Tags, ähm, hat man dann, äh, nochmal ein Untertag, use, und, ähm, jetzt habe ich gerade vorher nochmal nachgeschaut, ich habe gesehen, dass das, was wir momentan
verwenden, tatsächlich deprecated ist, also, äh, deprecated xlink-href, ähm, und dann, äh, kommt da rein, dann, ähm, Moment, jetzt bin ich gerade nicht sicher, ob ich jetzt nicht gerade schon einen Schritt weiter bin.
Ich glaube, diesen xlink-Namespace braucht man dann gar nicht mehr, ne?
Inzwischen. Ähm, genau, den brauchen wir nicht mehr, das ist nämlich das Neue, das xlink-brauch man nicht mehr, es ist deprecated, ähm, man kann jetzt einfach direkt
href, äh, schreiben, Hypertext, äh, Reference, ähm, und dann die ID da rein. Ähm, jetzt bin ich aber, glaube ich, schon einen Schritt zu weit, also, was ich noch sagen wollte, das, das Tool, noch ein zweites Tool, was wir verwenden, ähm, um die SVGs auch schön klein zu halten, das hat jetzt mit, äh, mit, mit, mit der Sprite-Geschichte gar nichts zu tun, ähm, ist es wie Go, keine Ahnung, ich weiß nicht, wo wir das auch,
SVGO, ähm, SVGO, ähm, was die, was die SVGs schön klein macht und was aber auch ganz gut ist, äh, wenn man SVGs aus verschiedenen Quellen bekommt, die haben manchmal unterschiedlichen, äh, Meta-Kram da noch drinstehen, also irgendwelche komischen Meta-Tags, irgendwelche komischen Attribute, die man alle eigentlich für das Bild nicht braucht, je nachdem aus welchem Grafikprogramm das exportiert wurde. Ähm, dieses, äh, SVGO, ähm, das schmeißt das da alles raus, da kann man relativ gut definieren, was da, was da, äh, was da, äh, was man eigentlich
eigentlich noch braucht und der Rest wird alles weggeworfen und dadurch werden die Dinger auch kleiner. Und wer das mal nicht, äh, automatisiert ausprobieren will, sondern wirklich vielleicht eine einzelne Datei hat oder nur eine Handvoll Dateien, die er optimieren will, die dann doch wieder irgendwo einzeln landen oder was weiß ich, ähm, es gibt auch ein GUI dafür, äh, kommt in die Show Notes, ist auf, auf GitHub, äh, so eine GitHub-Seite, äh, da kann man einfach per Drag-and-Drop auch oder über einen öffnen Dialog SVGs reinziehen
und hat dann da auch ganz viele Möglichkeiten, also, ähm, ob man jetzt Leerzeichen entfernen will oder, äh, manchmal macht das auch einen Unterschied durch die GZIP-Komprimierung in, ob die Attribute in alphabetischer Reihenfolge sind
oder sowas oder Hex-Werte von sechs auf drei Stellen, äh, optimieren, sofern das geht. Also da gibt's ganz viele Einstellungen und man sieht dann, ob sich dadurch
optisch was an dem SVG verändert oder nicht, das ganz praktisch damit mal rumzuspielen, kommt in die Show Notes.
Ja, cool, ähm, genau, jetzt hab ich aber noch gar nicht gesagt, wie man, wie so ein SVG eigentlich jetzt, ähm, wenn ich's nicht direkt ins HTML reinschreibe, wie das jetzt überhaupt
da hinkommt, dass ich's benutzen kann, ähm, und so ein, äh, gängiger Weg war halt früher, äh, mittlerweile, ja, teilweise wird's immer noch so gemacht, ähm, das
tatsächlich komplett reinzuschreiben ins HTML irgendwo an eine bestimmte Stelle und das, und dann kann man uns referenzieren, sodass diese IDs quasi zur Verfügung stehen
und das steht dann da, aber da ist dann eben nur an einer Stelle hast du dieses Sprite im, im, äh, Dokumentenbaum drinstehen, äh, und kannst dann an den anderen Stellen
drauf zugreifen. Wir nutzen das auch auf unserer Seite, ne, wir haben oben im Header einmal unser Logo und wir haben auch immer wieder bei jeder Episode, äh, das gleiche Icon im Endeffekt nochmal und da nutzen wir das auch so, ja.
Das müssen wir, das müssen wir mal umstellen auf was Cooleres.
Naja, so wird's einmal mit der Seite geladen oben und wird einfach überall wiederverwendet.
Äh, ja, aber das geht noch cooler.
Da kommen wir noch dazu. Also, ähm, ich muss noch, ich muss noch dazu sagen, ähm, wenn man SVG, äh, nicht im, im DOM, im Quellcode drinstehen hat, oder wenn man, äh, wie soll ich sagen, wenn man es da, wo man es verwendet,
also mit diesem Use und dann mit, mit der ID, ähm, wenn man das stylen möchte, dann ist man eingeschränkt. Ähm, warum?
Also normalerweise, wenn man es einfach so ins HTML reinschreibt, ähm, dann kann man einfach so drauf zugreifen, wie auf jedes andere DOM-Element auch und kann da irgendwie CSS mitmachen, so wie man will, weil es ist einfach Teil vom HTML.
Wenn man das nicht hat, also wenn man jetzt quasi das von anderswo anzieht, ist es jetzt egal, ob das, äh, im HTML selbst irgendwo schon mal drinsteht an der Stelle und ich es dann referenziere woanders,
oder ob es irgendwie von extern kommt, da kommen wir gleich noch drauf, ähm, dann ist man irgendwie eingeschränkt, weil ich hab nicht den kompletten Baum an der Stelle zur Verfügung innerhalb vom SVG,
also die einzelnen Elemente, die da drin sind, ähm, ich kann nicht auf die zugreifen.
Was man da dann macht, ist normalerweise ist, äh, man nimmt in CSS, also üblicherweise reicht es, eine Farbe dem SVG zu verändern, wenn man jetzt irgendwie,
also ich meine, die Größe ist eh definiert durch das Element, selbst kann man mit CSS machen, ähm, aber man möchte jetzt vielleicht eine Farbe verändern.
Und, äh, das geht noch mit, äh, mit dem referenzierten SVG, äh, per Fill, soweit ich weiß, ähm, äh, äh, äh, ja genau, Fill, äh, ich hab, wieso hab ich den Filter in meinen Shownotes stehen, das ist ja totaler Käse.
Also, Fill, äh, ja, oder, ja, vielleicht.
Was mir da jetzt spontan einfällt, ich weiß gar nicht, ob ich da jetzt was vorwegnehme oder ob du das überhaupt berücksichtigt hast, ähm, was ist denn mit CSS-Variablen?
Kann ich die, also wenn ich jetzt was mit Use verwende von einer anderen Stelle, aber ich verändere auf dem Parent-Element eine CSS-Variable, kann ich darüber die Farbe beeinflussen?
Das ist eine gute Frage.
Das wäre nämlich mal interessant, weil das wäre ein schöner Ansatz.
Ich weiß es tatsächlich nicht.
Das kriegen wir jetzt spontan auch nicht recherchiert, das würde jetzt zu lang gehen, aber, ähm, ja, vielleicht mach ich mir da mal selber eine Notiz und probier das mal aus und dann können wir nächste Folge vielleicht nochmal drauf eingehen, weil das würde mich selber interessieren, ob das funktioniert.
Ja, das, das machen wir. Äh, da gehen wir, gehen wir nächste Folge nochmal drauf ein. Ich weiß es jetzt tatsächlich nicht auswendig.
Also, wie gesagt, per Fill kann ich, äh, die Farbe von dem ganzen Ding verändern. Ähm, jetzt ist das Problem, naja, vielleicht will ich ja auch mal noch eine zweite Farbe verändern oder eine dritte oder eine fünfte. Ähm, das ist gar nicht so einfach möglich.
Ich, mir sind nur, ist nur die Möglichkeit bekannt, dass man noch eine zweite Farbe beeinflussen kann per CSS. Also, dass man zwei gleichzeitig verändern kann. Ähm, und zwar ist der Trick an der Stelle, dass man im SVG selbst Bereiche hat, ähm, die, ähm, Fill bekommen mit Current Color.
Und dann kann ich dem Element von außen per CSS die Color geben und, äh, die wird dann tatsächlich auf diese Elemente angewendet. Also, CSS Color, wie als würde man die Textfarbe ändern, ähm, wird dann auf, äh, auf dem SVG den, auf den Elementen angewendet, die Farbe, die, ähm, Fill Current Color haben, weil das dadurch ausgewertet wird.
Current Color, ähm, kann man tatsächlich in CSS auch verwenden. Das hatten wir irgendwo anders, äh, in einer anderen Folge schon mal. Ähm, und es ist, glaube ich, auch so eine Sache, die nicht so, die nicht so unbedingt jeder weiß, dass es, dass es das gibt. Äh, in CSS, also Current Color ist in dem Fall natürlich einfach nur die, die normale Textfarbe und die kann man auch für andere Sachen verwenden. Ähm, worauf ich noch hinweisen wollte, ein Problem, was mit, mit SVGs, äh, wenn man sie so einbindet, manchmal, äh, auftaucht, ist, dass, wenn man, wenn man die Seite mal ohne CSS lässt,
äh, dass die riesig groß sind, äh, das kann ja auch mal passieren, dass das CSS kaputt ist oder dass es irgendwie langsam lädt oder so, ähm, da hilft dann, dass man, ähm, dem, äh, dem SVG-Element einfach Width und Height Attribute mitgibt, ähm, und da dann eben, äh, dieses, äh, Viewbox-Attribut spielt da, glaube ich, auch noch mit rein, ne?
Da bin ich mir nicht sicher, ich glaube, Width und Height reichen an der Stelle aus, dass das irgendwie eine bestimmte Standardgröße hat und die kann ich per CSS-Seite dann hinterher auch nochmal ändern, das CSS würde das dann überschreiben, aber damit sie nicht so extrem riesig, ich glaube, Viewbox, ja, damit hat es was zu tun, ähm, aber habe ich auf vielen Seiten schon gesehen, ähm, dass das manchmal auftritt, ähm, damit kann man das auf jeden Fall verhindern, das wollte ich an der Stelle noch kurz sagen.
Ähm, so, das mit den zwei Farben, das haben wir, genau. Eine Sache, die mir auch noch aufgefallen ist, ähm, die man, wenn man jetzt SVGs als Icons verwendet, wo man, wo man vielleicht mal drüber stolpert, gerade jetzt, wenn man jetzt nicht gerade einen 4K-Monitor hat oder irgendwas mit sehr hoher Pixeldichte, ist, ähm, dass die manchmal, gerade wenn man sie, wenn man Icons hat und die dann ein bisschen kleiner werden, dass die so ein bisschen verwaschene Ecken kriegen.
Also, dass dann nicht irgendwie so, ähm, ich habe irgendwo vielleicht normalerweise in dem Icon definiert eine klare schwarze Linie, aber die trifft dann in dem Fall nicht genau das Pixelraster von meinem Monitor und dann versucht der Monitor natürlich irgendwie was daraus zu machen und dann kriege ich so eine verwaschene Kante.
Ja, da versuchen vor allem auch die Browser was unterschiedliches draus zu machen. Also wir hatten letztens den Fall, dass, äh, ein Kunde ein sehr filigranes Logo hatte mit sehr dünnen Linien, dummerweise auch im Text, also wirklich in dem, was man erkennen sollte, erst auf den ersten Blick.
Und je nachdem, in welchem Viewport-Bereich man da war, in welchem Breakpoint und so, ähm, hat Chrome dann Linien komplett verschluckt. Und das war sehr unschön bei dem Logo. Und das hat dann gereicht irgendwie in dem Fall, das um 0,5 Pixel zu verschieben und dann hat sich Chrome wieder gefangen.
Aber das ist, ist mir jetzt schon mehrfach aufgefallen, dass Chrome da irgendwelche Sachen rundet und vor allem halt so klein rundet, dass sie dann verschwinden und das sollte eigentlich nicht sein. Und das machen andere Browser, handhaben das auch anders.
Also was in dem Fall mal, als wir das Problem hatten, geholfen hat, war, ähm, und da scheiden sich die Geister, da gibt's Artikel, die sagen, das darfst du auf keinen Fall machen und andere sagen, ja, das ist eine super Idee.
Man kann die, die SVG-Grafiken in ihrer Viewbox, also wenn man sie tatsächlich auch im, äh, im Grafikprogramm vielleicht noch offen hat, auf das Pixel-Raster, äh, tatsächlich genau versuchen zu mappen, sodass dann, ähm, ein Pixel im, äh, oder dass das eine Linie, die sehr, sehr schmal sein soll, auch tatsächlich genau ein Pixel breit ist auf dem Pixel-Raster.
Ähm, das, das hilft dann aber auch nur bei bestimmten Monitoren, natürlich, ähm, aber das, das hat dann tatsächlich diese Probleme, die wir da hatten, ähm, behoben, sodass du, wenn du da feine Linien hast, musst du halt gucken, dass die irgendwo genau auf dem Pixel-Raster anfangen und aufhören, äh, und nicht irgendwo dazwischen und dann kannst du das damit beheben.
Ähm, ich bin, ich würde jetzt aber keine Empfehlung aussprechen, ich bin mir unsicher, weil es gibt wohl auch gute Argumente dagegen, ähm, da habe ich jetzt aber mich nicht so tief reingelesen, das wollte ich nur mal, äh, noch erwähnen, so am Rande.
Das kann ein Problem sein, was auftritt, gerade wenn man kleine Grafiken oder wenn man sie sehr klein hat, ähm, und man dann noch feine Linien irgendwie da drin hat, dann kann das, äh, kann das problematisch werden.
So, und jetzt kommen wir, ähm, zum ultimativen, zur ultimativen Empfehlung, äh, so wie ich das jetzt heutzutage machen würde und ich gehe jetzt davon aus, dass man keine Uralt-Browser mehr unterstützen muss, weil dann, ähm, mit denen geht es nicht, beziehungsweise es gibt aber auch, ähm, noch eine Library, in der das dann vielleicht geht.
Und zwar, was ich momentan empfehlen würde für, äh, Icon-Sprites oder Icon-Systeme, ist ein SVG-Sprite, so wie wir es gerade besprochen haben, ähm, mit diesen IDs und den, den Symbol-Elementen.
Das habe ich vorhin noch gar nicht gesagt, äh, das sind, das sind die Elemente, mit denen es dann, äh, da drin steht, ähm, was man aber auf eine externe URL, äh, aus einer externen URL, äh, referenziert.
Das heißt, ich kann in diesem, äh, href-Attribut oder in diesem x-link-ahref kann ich nicht nur die ID angeben, sondern ich kann auch, ähm, angeben, von welcher URL das kommt.
Äh, warte mal, ich muss jetzt gerade mal gucken, ob ich hier noch ein Beispiel habe. Ähm, Moment.
Wo war das noch gleich?
Ich mache vielleicht mal mit was anderes.
Ich überbrücke mal, indem ich was in den Raum werfe, ähm, ich meine aber, dass das mit den externen URLs nicht überall unterstützt wird.
Ist das richtig?
So, natürlich habe ich Can-I-Use dafür.
So, das, was heißt nicht überall unterstützt.
Also, es gibt bei Can-I-Use tatsächlich ein, äh, tatsächlich ein, äh, eine Eigenschaft oder, ja, ein, ein, so, eine so Angabe, äh, SVG-Element-Use-Load-From-External-Uri.
Also, tatsächlich genau dieser Fall, den ich gerade beschrieben habe.
Ähm, und das geht, ähm, in Edge ab 13, aber warte mal, wir haben doch immer diese schöne Zahl, 93 Prozent, ähm, global.
Ähm, und die, in denen es nicht geht, sind alte Android-Browser, alte Safaris, irgendwie Version 6.
Ähm, Chrome kann's ab 22, Firefox kann's seit Version 4.
Und Edge ab 13, ähm, ist also relativ weit verbreitet, die IS können das alle nicht.
Aber dafür gibt es, ähm, SVG for Everybody, ähm, ist so ein Polyfill, der in dem Augenblick, wo das, äh, wo erkannt wird, dass das nicht funktioniert mit extern, der eben genau das macht, was wir, was wir vorhin besprochen haben, nämlich das dann in das DOM reinschreibt.
Er sagt, hey, okay, du kannst es nicht, kein Problem, ich schreib's jetzt hier mal rein, dann kannst du davon rechnen.
Das heißt, er macht dann manuell einen Request und sucht sich dann die ID da raus und tauscht das aus.
Genau, schreibt's da rein und ich glaube dann, logischerweise müssen dann eigentlich auch die URLs von den SVGs umgeschrieben werden, sodass dann im Prinzip nur noch die ID da steht.
Das rate ich jetzt, das hab ich mir jetzt nicht genau angeguckt.
Genau, also ich würde empfehlen, mach das mit extern, ähm, dann kann man nämlich auch irgendwie, ähm, komplett, Caching funktioniert dann gut, ähm, und man legt seinen SVG-Sprite einfach irgendwo,
hin und referenziert's immer wieder von dieser Stelle mit ID, das ist super bequem, ähm, hab ich mehrfach jetzt schon im Einsatz gehabt, funktioniert einfach, äh, sofern man jetzt, wie gesagt, nicht irgendwelche uralt, irgendwelche esoterischen Uraltbrowser unterstützen muss, ähm, und im Zweifelsfall, wie gesagt, SVG for everybody, wobei,
ich hab mir das irgendwann in der Vergangenheit mal ein bisschen genauer angeguckt und der hat dann, glaube ich, tatsächlich versucht, am, ähm, User-Agent-String rauszufinden, ob die, ob es unterstützt wird oder nicht und das ist immer so ein bisschen,
ich weiß nicht, ob das in der aktuellen Version noch so ist, aber das war mal so, ähm, da ist dann so fraglich, kann der wirklich jetzt rausfinden, unterstützt der Browser das oder nicht, oder versucht er es nur zu raten?
Ähm, genau, so, damit, äh, hast, hast du noch Fragen dazu?
Nee, nee, alles, alles gut erklärt.
Ja, ich, äh, ich, ich hoffe auch, ähm, wenn ihr noch Fragen habt, könnt ihr sie gern, äh, in die Kommentare schreiben oder könnt ihr uns auch bei Twitter stellen oder so, ihr dürft uns auch sowas altertümliches wie eine Mail schreiben, steht bei uns, äh, auf, auf unserer Homepage.
Social at, oh, auf unserer Homepage.
Jetzt musst du über dir, auf der Startseite steht es nämlich nicht.
Auf der Startseite, auf unserer Website steht das, irgendwo.
Also social at, wo wir sind, ist vorne.show.
Genau.
Verdammt, ich sag das echt oft, jetzt fällt mir das mal auf, das ist ja furchtbar.
Danke, danke, dass ich drauf hingewiesen wurde, das ist ja wirklich schrecklich.
Ähm, ich hab noch einen kleinen Punkt dazu und dann, äh, dann musst du mal wieder reden, weil, äh, mein Mund wird schon relativ trocken.
Also sag noch ein paar Mal Homepage, dann darfst du noch ein paar Mal Bier trinken.
Genau.
Ähm, und zwar, ich hab noch, ähm, ich hab noch Ausblick, äh, und, äh, Wünsche, ne, eigentlich sind's nur Wünsche, ich hab's Ausblick und Wünsche genannt, aber eigentlich sind's nur Wünsche.
Ähm, was ich gerne hätte, äh, und ich weiß nicht, ob's technisch überhaupt möglich ist, ähm, ich hätte gerne, dass, dass diese Einschränkungen, die man momentan hat, mit SVGs, die nur referenziert werden, äh, dass ich nämlich nicht auf, auf den, auf den, äh, aufs Dom von dem sozusagen zugreifen kann, auf deren Baum und da drin mit CSS, äh, Dinge manipulieren kann.
Das wär ja ziemlich cool, wenn das gehen würde.
Also ich lehne mich mal weit aus dem Fenster und sage, technisch möglich muss das auf jeden Fall sein, weil der Browser macht ja im Hintergrund sicher nichts anderes, als sich das zu holen, und er muss das ja irgendwie rendern.
Also da wird ja nicht eine komplett andere Rendering-Engine dahinter stehen, sondern der holt sich das ja auch und rendert das aus dem, aus dem, aus dem SVG-Markup.
Also ich könnte mir vorstellen, dass Sicherheitssachen dagegen sprechen, ähm, wobei ich mir dann denke, dann muss man halt irgendwie das quasi sandboxen und, und sagen, ich kann da nicht alles irgendwie drauf ausführen, beziehungsweise ich kann ja dadurch, selbst wenn ich da jetzt irgendwie per Script was modifizieren könnte, ähm, heißt das ja nicht, dass ich auf dem externen Server dann irgendwas verändere, sondern das ist ja wirklich nur dieses, äh, Markup, das da virtuell im Hintergrund reingeladen wird, dass ich da drauf Zugriff bekomme, das macht ja, das ist ja nichts, was irgendwie Sicherheitsbedenken eigentlich auslösen sollte.
Aber es gibt bestimmt einen Grund dafür, warum es nicht ist.
In SVG gibt's eine Menge Schweinereien, die man da machen kann, also, das ist, äh, das ist dann eher das, was, das was externes, was ich ziehe, nicht in meiner Seite was kaputt macht, so in die Richtung ist es dann eher.
Aber auch da, ähm, ja, wenn ich das, wenn ich das SVG anziehe, also, ich bin mir sicher, es gibt da Sichermöglichkeiten, das zu sandboxen oder so, aber wahrscheinlich ist das nicht ganz trivial und deswegen geht's nicht.
Das ist mein Wunsch, dass man da im DOM rumfuhrwerken kann, wie man möchte und nicht irgendwie mit, äh, mit Fill und, äh, Current Color rumeiern muss, sondern dass ich beliebig viele Farben, äh, da irgendwie rumschieben kann und dass ich's auch irgendwie animieren kann.
Das geht natürlich alles, wenn ich das SVG direkt in die Seite schreibe, äh, kein Problem, ähm, aber ich find diesen externen Ansatz gerade für Icons ziemlich elegant.
Vielleicht sind ja CSS-Variablen tatsächlich Lösungen. Das versuchen wir mal rauszubekommen. Das wäre cool.
Das, das versuchen wir rauszubekommen. Achso, dass du da, ja, doch, stimmt, also ich, jetzt, jetzt hab ich, glaub ich, verstanden, wie, was du meinst, ist nämlich, dass ich einfach die dann setze da drauf und hab's ja aber im Sprite schon referenziert, sodass sie sich dann automatisch ändern könnten.
Genau, also auf das Element, dass ein, dass das Use-Tag verwendet, oder du machst das jetzt tatsächlich doch im Hintergrund schon, dann versuch ich mal, ich rede mal ganz langsam und versuche, äh, um den heißen Brei herumzureden, genau, also ich hab, dass ich das SVG habe und auf das setze ich, oder vielleicht sogar auf das Use-Tag direkt, äh, CSS-Variablen, also irgendwie, ähm, Hovercolor, äh, Green oder was heiß ich, und dass die dann in dem referenzierten SVG ausgetauscht werden entsprechend oder berücksichtigt werden.
Ah, ich find grad keine eindeutige Antwort. Ich glaub, man muss doch tatsächlich, müsste ich jetzt nochmal ein bisschen, äh, tiefer gucken.
Dann müsste es halt die Standardfarbe, müsste es halt aus dem externen SVG, aus dem äußeren Element, das ich nicht über die IDE referenziere, müsste es da die Standardfarbe rausziehen, aber ob das geht, ob das quasi, ob ich das in den gleichen Scope ziehen kann, oder ob das eben halt rein technisch komplett getrennte Scopes sind, die gar nicht sich gegenseitig berücksichtigen können, das ist die Frage.
Aber das, da müssen wir echt mal ein Code bringen, vielleicht machen wir das nach der Sendung noch schnell.
Also schnell ein anderes Stück.
Also Voraussetzung ist dafür auf jeden Fall, ähm, dass ich das SVG direkt manipuliere und da Dinge reinschreibe. Ähm, das hätte ich halt bei meinem Wunschkonzert, wäre das nicht nötig, da könnte ich nämlich direkt eventuell auf die Elemente zugreifen, die da drin sind.
Also vielleicht quasi über so eine Art Shadow DOM im Endeffekt auch. Also es ist nicht wirklich in der Seite drin, aber dass man dann speziellen Selektor hat, um dann innen drin was verändern zu können, das wäre, wäre echt cool.
Ja, gutes Schlusswort, ähm, zum Thema zumindest. Und, äh, damit, äh, könnten wir dann schon einfach, äh, in den nächsten Vlog, in den nächsten Vlog, ja, was ist passiert?
Eine Stunde 40, und wir haben hier gesagt, äh, neuer, neuer Rekord nach dem letzten Rekord.
Mensch.
Ja, wir trinken jetzt einfach noch eine Menge Bier und dann, äh, und dann, äh, und dann labern wir einfach noch ein bisschen.
Ich hab mal wieder ein YouTube-Video, ich hab irgendwie als Geilteil fast ausschließlich YouTube-Videos, äh, vielleicht lass ich mir auch was anderes einfallen, aber, das war was, das ich letzte Woche, auf was ich geschlossen bin, äh, weiß gar nicht mehr wie, ich glaube, das war wieder der, der YouTube-Algorithmus, äh, der gesagt hat, hey, das könnte dich interessieren, und das hat mich interessiert.
Ähm, ein Video mit dem Titel JavaScript-Counters the Hard Way von Jake Archibald und Soma, äh, Soma ist ein deutscher Chrome-Entwickler übrigens, vielleicht, vielleicht holen wir den auch mal in die Sendung, mal gucken.
Wenn er, wenn er möchte.
Wenn er möchte, wenn er.
Wir fragen uns vorher.
Äh, natürlich.
Ähm, genau, und, äh, also es sind beide Chrome-Entwickler und machen Videos, ähm, das Video ist jetzt schon ein bisschen älter, aber ich glaube, sie ist immer noch aktiv, äh, das zu machen, wo sie bestimmte
Sachen beleuchten, nicht unbedingt nur Chrome-spezifisch, sondern eben auch solche Sachen wie, wie mache ich dann sowas am besten per JavaScript, und darum geht's in dem Video, ähm, Counter finde ich in dem Fall ein bisschen irreführend, als Begriff gewählt, Counter ist für mich was, ja, was, was eben was hochzählt oder so, ähm, es geht in dem Fall aber darum, eigentlich getakteten Update-Mechanismus zu haben, also mein Anwendungsfall wäre jetzt eher eine Zeitanzeige, also ob das jetzt die Uhrzeit ist oder, oder eine Stoppuhr,
Uhrzeit oder was auch immer, ähm, dass ich halt sage, ich möchte alle Sekunde, und zwar wirklich jede Sekunde, 1000 Millisekunden und nicht irgendwas plus minus, möchte ich eine Zahl aktualisiert haben, eben die Sekundenzahl zum Beispiel in einer Uhrzeitanzeige.
Und das klingt eigentlich simpel, aber der Weg zur perfekten Lösung, der dauert im Video immerhin schon 25 Minuten, und in echt hat Jake da sicherlich noch länger dran rumgetüftelt, das, ähm, hinzubekommen.
So, der erste Impuls wäre wahrscheinlich, äh, Set-Timeout, beziehungsweise Set-Interval, wenn ich das, ähm, öfter brauche oder regelmäßig updaten will, ähm, aber wie man vielleicht weiß, wenn man schon ein bisschen länger bei der ganzen Geschichte dabei ist, Set-Timeout, Set-Interval ist zu ungenau.
Also, das klingt zwar schön, ah, ich möchte alle 1000 Millisekunden was ausführen, aber das funktioniert nicht so genau, also der Browser, äh, kann das nicht garantieren.
Der schuckt das vielleicht an, tatsächlich nach 1000 Millisekunden, dass man das haben möchte, aber ich hab ja ne, ne gewisse, äh, Queue, die da abgearbeitet wird, und wenn da eben andere Sachen vorne anstehen, dann kann's halt passieren, dass dann am Schluss doch ne Millisekunde oder mehr, äh, mehrere vorbeigegangen sind, bis tatsächlich das, was ich ausführen möchte, zu dem Zeitpunkt dann auch ausgeführt wird.
Dann könnte man sich denken, ähm, gut, dann nehme ich Request Animation Frame, das ist ja genau für solche performanten Sachen gemacht, ähm, funktioniert an sich eigentlich auch, aber das Problem ist, das feuert halt ungefähr 60 Mal in der Sekunde oder was auch immer die, die Frame Rate, äh, eben ist, in der gerendert wird.
Und ich brauch das ja aber nur einmal jede Sekunde, das heißt, ich mach da im Hintergrund ganz viel und, äh, ist jetzt auf dem Desktop vielleicht relativ egal, aber auf, äh, Mobilgeräten kann das natürlich die Performance und, äh, vor allem die, die Batterielaufzeit auch deutlich beeinflussen, wenn ich da vielleicht noch mehrere Sachen auf der Seite hab, äh, die das beanspruchen, dann hab ich mit Request Animation Frame natürlich, zieh ich da ordentlich Saft.
Und ich möchte das gar nicht vorwegnehmen, wie er es am Schluss, äh, genau löst, das sollt ihr natürlich in dem Video anschauen, ähm, es ist ein bisschen eine Kombination aus, aus mehreren Ansätzen und dann ist er auch zwischendurch auf Probleme gestoßen, dass, äh, manche Browser das hat, ich glaube, es war sogar der Chrome, der was nicht optimiert, was man eigentlich optimieren könnte, wo dann andere Browser besser waren, was dann mit der Performance wieder geschadet hat und dann waren so Sachen wie, dass dann die, die Sekunde dann irgendwie, dann zwei Sekunden lang stehen bleibt und dann nur einmal kurz aufflackert und dann, dann erst sich ändert.
ähm, oder es waren so Sachen wie, es sieht eigentlich optisch gut aus, aber es feuert das Event eigentlich zweimal hintereinander und das wollte er dann auch noch optimiert bekommen, weil das einfach auch nicht schön ist, ja.
Der Jake, der findet immer die schlimmen Sachen, das ist echt, ja, aber, aber er findet auch die Lösungen und in dem Fall hat er es tatsächlich so hinbekommen, dass es in allen Browsern, die er getestet hat, auch funktioniert und zwar wirklich nur einmal alle Sekunde und wirklich zu dem Zeitpunkt, zu dem die Sekunde auch wirklich sich wechseln soll.
Und, äh, ja, lohnt sich das mal anzuschauen und es ist einfach Wahnsinn, was man bei vermeintlich, äh, trivialen Geschichten und bei so Kleinigkeiten wie, aktualisieren wir hier alle Sekunde eine Zahl, was man da an Hirnschmalz reinstecken kann und auch technisch reinstecken kann, damit das am Ende auch einfach gut funktioniert und nicht nur irgendwie funktioniert.
Ja, in den meisten Fällen, äh, muss ich sagen, was ich bisher gesehen habe, reicht den Leuten irgendwie Set-Intervall oder Set-Timeout und das hat mich auch schon mal überrascht, also auch wenn, wenn man irgendwie sowas wie eine Stoppuhr macht und da ist ja die Zeit tatsächlich kritisch.
Ich weiß nicht genau, wie groß die Ungenauigkeit ist, äh, wenn man das länger laufen lässt, aber...
Oh, die kann ich schon sehr, also wenn du noch hin und her switchst und vielleicht läuft noch irgendwas mit WebGL, äh, oder sowas, das kann schon, also ich hab, ich hab das tatsächlich in diesem Ursprungsprojekt, das ich gebaut habe für unser, äh, Twitch-Streaming-Projekt, da hab ich einfach zu Demo-Zwecken eine Uhrzeit laufen gehabt.
Sogar NTP, äh, NTP, äh, Time-Projekt, NTP synchronisiert, ähm, die, die, die Atom-Uhrzeit quasi, ähm, da hab ich die laufen lassen und da hab ich dann echt gedacht, irgendwas stimmt mit der, also FFM-Pack nutze ich da im Hintergrund, um das dann zu encodieren.
Da dachte ich, irgendwas läuft da schief, äh, meine Frame-Rage stimmt nicht, die Zeit wobbelt da lustig rum und dann hab ich eben genau diesen Effekt, ja, eine Sekunde bleibt dann irgendwie ewig, also ewig ist ja, ne, perzeptiv, aber, ähm, es sind halt anderthalb Sekunden und dann macht's irgendwie kurz die Sekunde mehr
und dann nochmal eine drauf und so und dann hab ich aber festgestellt, nee, das ist gar nicht im, im, im, äh, im Umwandeln am Schluss vom Video, sondern das ist schon im Browser so und da hätte ich das gebrauchen können, wenn ich das da schon gewusst hätte.
Und deswegen, also gerade bei so, wenn wirklich alle Sekunde, da, da merkt man, wenn das dann halt doch 300 Millisekunden mehr sind, wir hatten's ja auch letztes Mal über Animationen und ob die zu lange dauern gefühlt oder zu, zu, nicht lange genug, da machen 300 Sekunden halt echt was aus und das, das merkst du.
Millisekunden?
Äh, 300 Millisekunden, ja.
300 Sekunden machen auf jeden Fall was aus.
Ähm, nee, aber das, äh, das, das, das merkt man einfach, wenn das, wenn das nicht stimmt, weil man weiß, wie eine Uhr funktioniert, man weiß, wie schnell sich ungefähr ein Sekundenzeiger bewegt oder auf einer digitalen Uhr eben halt das umspringen soll und das merkt man dann schon, wenn ein bisschen was nicht stimmt.
Ja, im Prinzip war dein Geilteil heute fast eine Property der Woche, aber du hast es nicht ganz erklärt.
Ja, das sind mehrere Properties, ja, aber, ja, ja.
Am Schluss steckt eben doch ein bisschen mehr dahinter als ein paar Properties.
Also, ja, weil ich hab, ich hab nämlich auch noch eins.
Ah, spontan.
Das ist vorhin, äh, das ist vorhin, äh, das ist vorhin bei der Recherche zum Thema, ist, ist das an mir vorbei geflattert und ich dachte mir, das will ich euch nicht vorenthalten.
Und zwar, äh, historyoficons.com, das passt ganz gut zum Thema.
Und zwar ist es eine wirklich außerordentlich hübsch gestaltete Seite, die, ähm, mal so von den 80ern, also, äh, kommt, also es geht um Icons im Computersinne, Icons auf Displays, sag ich mal, weil ich glaube, so, so was wie, naja, Icons gab es vorher ja auch schon in anderer Form, ähm, aber es geht um digitale Icons.
Und dann, äh, wird da einmal so von 1980 bis heute, ähm, so ein bisschen gezeigt, was, wie sah das denn früher bei Betriebssystemen beispielsweise aus, als irgendwie jetzt hat man von 1981, äh, zum Beispiel so ein Papierkorb-Icon oder ein Dokument oder ein, äh, Taschenrechner oder sowas.
Und so arbeitet das sich, ähm, langsam immer weiter vor, bis in die heutige Zeit, ähm, wo wir, äh, äh, wieder so den, den Flat-Trend haben, sag ich mal, es sind zwar hochauflösende Icons, aber sie sind meistens einfarbig.
Zwischendurch waren sie mal sehr bunt und 3D und sahen sehr real aus, also fast eigentlich wie Fotos, ähm, und, äh, ja, es ist ein bisschen so, so eine, so eine, so eine kleine Reise durch die Icon-Trends, aber am Anfang natürlich auch davon bestimmt, was ging denn überhaupt technisch.
Also, sie sind noch sehr pixelig am Anfang und auch schwarz-weiß und irgendwann werden sie ein bisschen farbig und ein bisschen weniger pixelig und, wie gesagt, äh, irgendwann werden sie noch schärfer und irgendwann sehen sie fast aus wie Fotos und jetzt mittlerweile sehen sie wieder sehr flach und einfarbig aus.
Oder manchmal dann auch irgendwie noch zweifarbig. Genau.
Weil mehr als zwei Farben haben wir ja gelernt, ähm, haben wir ja nicht zur Verfügung, um ein Icon zu stylen.
Sehr schönes, spontanes, äh, Geilteil, dass unsere letzten beiden, also diese Folge und die letzte Folge so ein bisschen tangiert, sehr schön.
Also, diese Seite ist wirklich wunderschön typografisch und halt auch wirklich schön mit den Icons und so ist es wirklich sehr, sehr hübsch gemacht.
Ich habe es jetzt auf Mobile noch nicht angeguckt, ob sie da auch gut funktioniert, aber so auf meinem Desktop, in meinem Desktop-Browser, äh, sehr schön auch mit Animationen, ja, wie gesagt, typografisch auch echt schön gemacht.
Ähm, da geht mein Herz auf, wenn ich sowas sehe.
Ja, und das ist doch ein schöner Abschluss, bevor wir zum Werbeblog kommen.
Ja, die Werbung hatten wir ja schon.
Ja, zu unserer Eigenwerbung.
Jetzt kommt die Werbung für uns.
Ja.
Wenn's, willst du, will ich?
Ja, äh, mach, mach ruhig.
Also, ich wäre schon direkt zum, zum, zum, äh, zur Obligationen Spendeneintreibung gekommen, zum Klingelbeutel, zum Digitalen.
Ähm, ja, wenn's euch ein bisschen gefallen hat, dann, äh, lasst uns doch gerne auch eine kleine Spende da.
Und wenn's euch noch ein bisschen mehr gefallen hat, dann gerne auch eine große.
Und zwar unter buymircoffee.com slash www.siv.
Da kann man uns ein virtuelles Bier oder auch zwei, drei, vier virtuelle Biere spenden.
Und das freut uns dann.
Und da werden dann echte Biere draus.
Richtig.
Also aktuell haben wir, ja, verwenden wir das dann für, für Bier.
Ne, nein, wir verwenden's natürlich auch für unsere teure Domain, auf die ich bestanden hab, die tatsächlich ein bisschen mehr kostet als andere.
Und auch für unser Hosting und, äh, natürlich, äh, für dem Konstantin seinen kommenden Laptop.
Genau, wenn er dann doch mal das Zeit nicht gesegnet, ja.
Ja, gut, wir haben natürlich auch in Hardware hier investiert, in unsere Mikros, um eben eine bessere Audioqualität liefern zu können.
Ähm, ich glaube, da müssten noch einige Spenden reinkommen, bis wir allein die Hardware-Anschaffungen wieder drin haben.
Also, spendet.
Genau, ihr könnt, ihr könnt gerne mal, ihr könnt auch spenden in Form von, ähm, ihr geht auf unsere Seite und, äh, guckt euch an, was für Hardware wir haben.
Und wenn ihr die auch kauft über unsere Affiliate-Links, dann kriegen wir auch so ein paar Cent.
Ich hab übrigens rausgefunden, ich weiß gar nicht, hab ich das in der letzten Folge schon gesagt, äh, man kann bei Amazon ja sehen, ähm, was über Affiliate-Links gekauft wurde.
Du hast es mir gesagt, aber du hast es nicht in der Sendung gesagt.
Genau, es hat tatsächlich, äh, jemand, ähm, den, äh, diese Klett-Kabelbinder gekauft.
Es war aber im letzten Sommer schon.
Ich hab das jetzt erst gesehen, ich guck da nicht so oft rein.
Ich hab mir gedacht, naja, wenn wir jetzt Millionen reingekommen wären, dann hätte sich Amazon vielleicht schon gemeldet.
Wahrscheinlich nicht, weil die dieses Geld behalten wollen.
Ähm, aber da hat tatsächlich jemand, also danke für den Kauf, hat mich sehr gefreut, dass tatsächlich, äh, jemand den Kabelbinder gekauft hat.
Genau, also da, so könnt ihr uns auch unterstützen, aber so direkte Spenden sind uns ein bisschen lieber, weil da kommt ein bisschen mehr bei uns an, als wenn ihr jetzt Kabelbinder kauft.
Aber ihr dürft auch Kabelbinder kaufen oder Mikrofone oder was auch immer ihr bei uns lustiges...
Oder auf einen Reffling von uns klicken und euch danach dann einen Porsche überlassen bestellen.
Genau, ihr dürft auch, ihr dürft auch dem Konstantin, äh, seine, äh, Oliven schicken und...
Ja, stimmt, das haben wir auch schon länger nicht mehr gesagt, bei uns, äh, auf der Seite findet man auch Packstation-Adressen, an die man uns gerne was schicken darf, was Nettes.
Ich glaube, wir müssen aufhören, das zu sagen, sonst macht's keiner.
Ja, stimmt, stimmt.
Haben wir auch im Feedback schon festgestellt, wenn wir zu viel drauf pochen, dann, dann sollten wir aber auch nichts mehr zu spenden sagen.
Wir haben nichts gesagt, vergesst die letzten drei Minuten und, äh, hört uns nächstes Mal wieder zu.
Genau.
Wenn es wieder heißt, probieren Sie es vorne.
Schade.
Und jetzt, Outro.
Und jetzt, und jetzt Outro, oder? Ja, macht's gut, schön, dass ihr wieder dabei wart.
Vielen Dank fürs Zuhören, bleibt uns gewogen, bis zum nächsten Mal.
Ciao.
Tschüss.
Musik.