WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: SVG-Sprites und andere Iconartigkeiten
Publishing Date: 2021-02-28T12:00:00+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/svg-sprites-und-andere-iconartigkeiten/

00:00:00.000 --> 00:00:02.240
 Wo wir sind, ist vorne, Folge 22.

00:00:02.240 --> 00:00:05.520
 Heute redet sich alles um Iconsysteme.

00:00:05.520 --> 00:00:21.420
 Herzlich willkommen bei Wo wir sind, ist vorne.

00:00:21.420 --> 00:00:24.200
 Frontend-Fakten-Frotzeleien.

00:00:24.200 --> 00:00:28.220
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

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

00:00:54.640 --> 00:01:01.640
 Hallo und wir begrüßen ganz besonders alle Neuhörer und Neuhörerinnen, die über den Golem-Artikel zu uns gestoßen sind.

00:01:01.640 --> 00:01:02.600
 Yeah!

00:01:02.600 --> 00:01:06.160
 Herzlich willkommen. Ein kleiner Applaus, oder, wenn ich ihn finde.

00:01:08.720 --> 00:01:12.560
 Wie soll man denn da noch steigern, Mensch, wenn nicht erst der Lahme-Applaus kommt?

00:01:12.560 --> 00:01:13.000
 Ach so.

00:01:13.000 --> 00:01:15.660
 Gleich kommt der höfliche Applaus.

00:01:15.660 --> 00:01:18.640
 Ja, da muss man schon vorlegen.

00:01:18.640 --> 00:01:20.640
 Wann ist der Applaus denn unhöflich?

00:01:20.640 --> 00:01:23.840
 Nein, aber der ist ja auch egal.

00:01:23.840 --> 00:01:28.720
 Ja genau, es gab einen Golem-Artikel, Wissen für ITler, elf tolle Tech-Podcasts.

00:01:28.720 --> 00:01:33.760
 Und da finden wir direkt auf der ersten Seite Erwähnung, was uns natürlich sehr gefreut hat und geehrt hat.

00:01:34.400 --> 00:01:39.920
 Aber es steigt jetzt natürlich auch unsere Verantwortung mit den steigenden Hörerzahlen.

00:01:39.920 --> 00:01:43.040
 Bei mir setzt da immer gleich das Imposter-Syndrome so ein bisschen ein.

00:01:43.040 --> 00:01:45.200
 Da hatten wir es auch in der Vorbesprechung drüber.

00:01:45.200 --> 00:01:49.580
 Irgendwann finden die alle raus, dass wir hier nur heiße Luft labern.

00:01:49.580 --> 00:01:52.780
 Ja, das wissen wir doch schon.

00:01:52.780 --> 00:01:55.740
 Das ist ja nichts Neues.

00:01:55.740 --> 00:01:56.380
 Genau.

00:01:56.380 --> 00:01:58.960
 Ja, Bierfrage, oder?

00:01:58.960 --> 00:02:00.820
 Bierfrage, ja, genau.

00:02:00.820 --> 00:02:02.400
 Hast du heute das Gleiche?

00:02:02.400 --> 00:02:06.060
 Ich glaube, ich habe das Gleiche, weil ich habe dem Konstantin Bier gebracht.

00:02:06.060 --> 00:02:10.780
 Der Konstantin hat mir im Gegenzug Werkzeug ausgeliehen.

00:02:10.780 --> 00:02:13.500
 Ich befürchte, das Bier kriege ich nicht wieder.

00:02:13.500 --> 00:02:14.700
 Er kriegt sein Werkzeug.

00:02:14.700 --> 00:02:16.160
 Hoffe ich doch.

00:02:16.160 --> 00:02:21.760
 Von Guinness, Hop House Lager, Nummer 13.

00:02:21.760 --> 00:02:22.140
 13.

00:02:22.140 --> 00:02:25.480
 Ja, dann öffnen wir es doch mal.

00:02:27.980 --> 00:02:30.940
 So, und ich habe schon mal eins davon getrunken.

00:02:30.940 --> 00:02:31.620
 Okay, ich noch nicht.

00:02:31.620 --> 00:02:32.560
 Ich bin gespannt.

00:02:32.560 --> 00:02:33.340
 Ich habe es noch nicht probiert.

00:02:33.340 --> 00:02:34.220
 Sowohl.

00:02:34.220 --> 00:02:35.360
 Sowohl.

00:02:35.360 --> 00:02:41.060
 Ja, wie das halt remote so klingt.

00:02:41.060 --> 00:02:43.680
 So, ja.

00:02:43.680 --> 00:02:46.920
 Während der Konstantin trinkt, sage ich euch, dass der Konstantin trinkt.

00:02:46.920 --> 00:02:48.920
 Dann kann nämlich ich trinken und dann kann er was sagen.

00:02:48.920 --> 00:02:50.260
 Also jetzt muss ich was sagen.

00:02:51.060 --> 00:02:54.100
 Ja, wir sind schon wieder bei drei Minuten und haben bisher nur getrunken.

00:02:54.100 --> 00:02:56.980
 Und es wird heute lang.

00:02:56.980 --> 00:03:01.100
 Wir haben ja letztes Mal vor zwei Wochen den Längenrekord geknackt.

00:03:01.100 --> 00:03:04.200
 Und ich befürchte, wir sind da heute auch wieder auf einem guten Weg dahin.

00:03:04.200 --> 00:03:06.660
 Also wir haben schon diverse Retro-Punkte.

00:03:06.660 --> 00:03:07.580
 Die geht heute recht lang.

00:03:07.580 --> 00:03:11.220
 Und ich habe deine Notizen gesehen für unser Hauptthema heute.

00:03:11.220 --> 00:03:12.240
 Huiuiui.

00:03:13.000 --> 00:03:15.140
 Ich glaube, da steht doch drüber Moritz geheime Notizen.

00:03:15.140 --> 00:03:16.100
 Wieso guckst du da rein?

00:03:16.100 --> 00:03:18.820
 Nee, ich habe nur drüber gescrollt, über die Länge, weil ich unten was gesucht habe,

00:03:18.820 --> 00:03:20.100
 weil ich unten was angefügt habe.

00:03:20.100 --> 00:03:21.680
 Also das stimmt wirklich.

00:03:21.680 --> 00:03:25.700
 Meine Notizen haben immer die Überschrift Moritz geheime Notizen.

00:03:25.700 --> 00:03:29.500
 Weil, also der Konstantin kann die theoretisch sehen bei uns im Trello.

00:03:29.500 --> 00:03:30.260
 Mach ich aber nicht.

00:03:30.260 --> 00:03:32.260
 Aber ich will nicht, dass er sie liest.

00:03:32.260 --> 00:03:35.600
 Deswegen schreibe ich das immer dazu, weil sonst irgendwie, das ist dann irgendwie blöd,

00:03:35.600 --> 00:03:36.860
 wenn er schon weiß, was ich sagen will.

00:03:36.860 --> 00:03:38.860
 Denke ich mir immer.

00:03:38.860 --> 00:03:39.440
 Ja.

00:03:39.440 --> 00:03:40.800
 Und der darf es einfach nicht wissen.

00:03:40.800 --> 00:03:41.460
 Und es ist geheim.

00:03:41.460 --> 00:03:46.440
 Ja, vor allem heute, weil heute hast du ja alles vorbereitet und ich thematisch nichts

00:03:46.440 --> 00:03:47.220
 so wirklich.

00:03:47.220 --> 00:03:49.660
 Und da soll ich ja Fragen stellen.

00:03:49.660 --> 00:03:52.780
 Und wenn ich mir die schon selber beantworten kann, dann brauche ich sie nicht stellen.

00:03:52.780 --> 00:03:53.980
 Genau.

00:03:53.980 --> 00:03:54.780
 Du darfst.

00:03:54.780 --> 00:03:55.780
 Ich darf.

00:03:55.780 --> 00:03:56.940
 Bier ist gut.

00:03:56.940 --> 00:04:00.260
 Hat sehr, sehr, schmeckt, schmeckt fast.

00:04:00.260 --> 00:04:03.440
 Also durch die Flasche sieht es hell aus, aber es schmeckt fast wie ein dunkles.

00:04:03.440 --> 00:04:05.860
 Es ist auf jeden Fall durchsichtig.

00:04:05.860 --> 00:04:06.380
 Ja.

00:04:06.380 --> 00:04:09.200
 Es ist nicht trüb und es ist nicht dunkel oder irgendwas.

00:04:09.200 --> 00:04:11.300
 Ich weiß gar nicht, wie man das nennt.

00:04:11.460 --> 00:04:12.720
 Es ist ein Kristallbier.

00:04:12.720 --> 00:04:13.340
 Ein Lager.

00:04:13.340 --> 00:04:14.480
 Ein Lager.

00:04:14.480 --> 00:04:15.340
 Also auf Deutsch.

00:04:15.340 --> 00:04:17.180
 Also ich finde es auch echt lecker.

00:04:19.180 --> 00:04:21.700
 Und ja, machen wir doch weiter.

00:04:21.700 --> 00:04:22.280
 Fangen wir doch an.

00:04:22.280 --> 00:04:23.360
 Fangen wir doch an.

00:04:23.360 --> 00:04:30.160
 BWSIV präsentiert die Retrospektive.

00:04:32.620 --> 00:04:34.340
 Und wir haben eine gemeinsame Retro.

00:04:34.340 --> 00:04:35.400
 Ich glaube, das hatten wir auch noch nicht.

00:04:35.400 --> 00:04:37.940
 Wir haben, hast du das gesehen?

00:04:37.940 --> 00:04:38.940
 Überhaupt den ersten Punkt?

00:04:38.940 --> 00:04:42.300
 Ja, du hast es beschlossen, aber ich mach damit.

00:04:42.300 --> 00:04:43.180
 Okay.

00:04:43.180 --> 00:04:46.400
 Ja, wir hatten letzte Woche ein kleines Twitch-Experiment.

00:04:46.400 --> 00:04:48.060
 Man findet uns jetzt auch auf Twitch.

00:04:48.180 --> 00:04:50.620
 Einen Kanal unter twitch.tv slash wwsev.

00:04:50.620 --> 00:04:56.480
 Und wir haben das mal aus Spaß einfach, also recht spontan auch in der Vorbereitung zu dieser

00:04:56.480 --> 00:04:58.160
 Sendung einfach mal getestet.

00:04:58.160 --> 00:05:01.360
 Und hatten dann auch tatsächlich irgendwie elf Hörer.

00:05:02.000 --> 00:05:02.440
 Ausdrückterweise.

00:05:02.440 --> 00:05:03.800
 Zuschauer nennt man das bei Twitch.

00:05:03.800 --> 00:05:09.800
 Ja, ich bin noch nicht dort angekommen, weil wir den Link spontan auf Twitter gepostet

00:05:09.800 --> 00:05:10.040
 haben.

00:05:10.040 --> 00:05:14.040
 Also ich weiß nicht, ob jeder weiß, ich glaube, die jungen Leute wissen, was Twitch ist.

00:05:14.040 --> 00:05:15.560
 Den älteren erklären wir es nochmal kurz.

00:05:15.560 --> 00:05:20.720
 Twitch ist eine Livestreaming-Plattform, wo, naja, ich glaube hauptsächlich für Gaming

00:05:20.720 --> 00:05:26.680
 viele Leute filmen sich beim Zocken und kommentieren dazu und machen das auch irgendwie so in

00:05:26.680 --> 00:05:27.320
 größeren Runden.

00:05:27.320 --> 00:05:30.660
 Und es gibt Leute, die mittlerweile sogar auch davon leben.

00:05:30.660 --> 00:05:33.680
 Da kann man irgendwie dann live auch irgendwie Geld spenden und so.

00:05:33.680 --> 00:05:37.920
 Und ist irgendwie, ich glaube, es ist eine coole Plattform und wir haben einfach das mal

00:05:37.920 --> 00:05:38.400
 ausprobiert.

00:05:38.400 --> 00:05:44.640
 Und vor allem war das eine Technik-Demo von krassem Scheiß, was der Konstantin gebaut hat.

00:05:44.640 --> 00:05:49.520
 Und ich war extrem beeindruckt, weil das Videobild, was wir da hingeschickt haben, das kam

00:05:49.520 --> 00:05:50.340
 aus einem Browser.

00:05:50.340 --> 00:05:57.320
 Genau, also das ist mit NWJS und mit WIT habe ich das gebastelt, beziehungsweise das Grundding

00:05:57.320 --> 00:05:59.960
 hatte ich schon mal vor einer Weile angefangen, weil ich da so eine Idee hatte.

00:06:00.640 --> 00:06:01.760
 was zu basteln mit Streaming.

00:06:01.760 --> 00:06:06.460
 Und das habe ich dann recycelt, ein paar Blöcke davon genommen und mit WIT, was halt super

00:06:06.460 --> 00:06:07.400
 schnell zum Entwickeln geht.

00:06:07.400 --> 00:06:11.760
 Da habe ich ja die letzten beiden Folgen auch drüber gesprochen, vor allem vorletzte Folge,

00:06:11.760 --> 00:06:15.960
 Nummer, was haben wir heute, Folge 20, wen das interessiert, WITJS.

00:06:17.640 --> 00:06:21.880
 Und damit ging das also echt ratzfatz, da was zu entwickeln, was dann auch funktioniert.

00:06:21.880 --> 00:06:29.820
 Also das war im Endeffekt in zwei Nachmittagen schnell zusammengehackt und hat aber stabil funktioniert

00:06:29.820 --> 00:06:30.160
 eigentlich.

00:06:30.960 --> 00:06:35.340
 Erstaunlich gut, ja und da vielleicht mal so, zumindest so wie mein technisches Verständnis

00:06:35.340 --> 00:06:40.640
 davon ist nur sehr oberflächlich, aber wir haben da ein Jitsi-Video, kam von mir, das wurde

00:06:40.640 --> 00:06:44.680
 da irgendwie direkt reingeleitet und am Ende hatte man da dann so ein Bild, wo der Konstantin

00:06:44.680 --> 00:06:47.420
 links war, ich rechts, aber halt im Browser.

00:06:47.660 --> 00:06:51.900
 Der Konstantin hat es auch bewiesen, indem er die Dev-Tools mal drüber hat flackern lassen

00:06:51.900 --> 00:06:57.620
 und es lief auch noch Musik dazu und irgendwann kam dann so ein Kommentar, ey, die Musik ist

00:06:57.620 --> 00:07:01.620
 zu laut, man versteht euch nicht und dann musste der Konstantin irgendwie in der Kommandozeile

00:07:01.620 --> 00:07:05.420
 rumhacken, um auf dem Audio-Element die Audio-Volume runterzudrehen.

00:07:05.420 --> 00:07:10.020
 Also es ist noch sehr rudimentär und wenn wir das tatsächlich weiter verfolgen, dann wird

00:07:10.020 --> 00:07:15.260
 das nicht so rudimentär sein, aber es hat Spaß gemacht, das zu entwickeln und zu sehen,

00:07:15.260 --> 00:07:15.900
 dass es funktioniert.

00:07:16.140 --> 00:07:19.780
 Das ist echt cool und vielleicht, also vielleicht muss man auch vorweg schicken, das soll den

00:07:19.780 --> 00:07:24.100
 Podcast nicht ersetzen, also der Podcast bleibt schon Podcast, aber es ist manchmal schwierig,

00:07:24.100 --> 00:07:27.520
 Dinge nur zu erklären, ohne sie zeigen zu können und wenn wir dann so ein bisschen so

00:07:27.520 --> 00:07:32.440
 Pair-Programming-Sessions vielleicht mal machen könnten, um Dinge einfach zu demonstrieren,

00:07:32.440 --> 00:07:36.000
 dann wäre das vielleicht ein cooles Zusatzformat, das man nutzen könnte.

00:07:36.000 --> 00:07:40.760
 Außerdem wisst ihr ja, dass wir gern labern und bei Twitch kann man irgendwie geil labern und

00:07:40.760 --> 00:07:44.820
 außerdem ist es live, es gibt also einen Rückkanal, man kann also direkt rein

00:07:44.820 --> 00:07:49.900
 kommentieren, uns quasi von dem, was wir eigentlich machen wollen, ablenken und uns beschimpfen

00:07:49.900 --> 00:07:51.380
 oder sowas, alles in Echtzeit.

00:07:51.380 --> 00:07:55.200
 Ja und das fand ich echt verrückt, also das macht eine ganz andere Dynamik logischerweise

00:07:55.200 --> 00:07:59.180
 ja und das ist einfach, es war so, also wir haben das ja gar nicht geplant und haben das

00:07:59.180 --> 00:08:02.780
 ganz spontan gemacht, plötzlich war da wirklich jemand und wir kriegen Feedback und reden und

00:08:02.780 --> 00:08:06.180
 das war cool, ja. Es war anders, sehr anders, aber es war cool.

00:08:06.180 --> 00:08:11.160
 Ich fand's auch super, ich hätte vorher nie gedacht, dass ich irgendwie so Livestream mal geil finden

00:08:11.160 --> 00:08:16.760
 würde und es war dann mehr oder weniger so, ja lass uns das mal ausprobieren, der Konstantin hatte da die Demo

00:08:16.760 --> 00:08:21.900
 aufgesetzt und ich hab dann gesagt, okay, dann machen wir das halt jetzt mal, probieren wir einfach mal aus und dann

00:08:21.900 --> 00:08:27.100
 mal eben einfach nur kommentarlos den Link dazu bei Twitter reingeworfen, um mal zu schauen, vielleicht kommt ja jetzt

00:08:27.100 --> 00:08:33.880
 tatsächlich jemand dazu und insgesamt hatten wir elf Leute, glaube ich, einfach so ohne, dass, also wir haben ja nicht mal

00:08:33.880 --> 00:08:40.120
 irgendwas Interessantes gemacht, wir haben eine Technik ausprobiert und dann kamen trotzdem irgendwie im Chat so Kommentare, ja irgendwie

00:08:40.120 --> 00:08:46.080
 beste Abendunterhaltung, da dachte ich mir, okay gut, dann müssen wir uns nicht mal vorbereiten, für die Twitch-Session

00:08:46.080 --> 00:08:54.100
 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.

00:08:55.500 --> 00:08:59.620
 ja, vielleicht machen wir das, vielleicht wird das mal irgendwie in der Zukunft irgendwie ein Format.

00:08:59.620 --> 00:09:04.380
 Ihr könnt uns ja mal Feedback geben, wie ihr das denn fändet und ob ihr da Interesse dran habt oder ob das

00:09:04.380 --> 00:09:13.880
 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

00:09:13.880 --> 00:09:18.600
 dafür gebaut hat. Ich hab auch am Wochenende drauf, After Effects mal wieder seit Jahren gemacht.

00:09:18.600 --> 00:09:23.160
 Also ich hab's schon gesehen, vielleicht dürft ihr das dann bald auch sehen. Ich fand's fantastisch.

00:09:23.160 --> 00:09:29.420
 Du könntest ja als Teaser vielleicht sogar schon mal das Intro schon mal anteasern demnächst, wenn's ganz fertig ist.

00:09:29.420 --> 00:09:34.460
 Mal gucken, mal gucken. Also gegen Spenden vielleicht, aber da greifen wir schon wieder vorweg.

00:09:34.840 --> 00:09:50.280
 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.

00:09:51.100 --> 00:10:14.900
 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.

00:10:14.900 --> 00:10:24.960
 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.

00:10:24.960 --> 00:10:29.080
 Umfragen funktionieren erstaunlich gut. Da kommt nachher auch nochmal ein Retro-Punkt dazu, ne?

00:10:29.080 --> 00:10:32.340
 Ja, wir können ja den jetzt als nächstes machen.

00:10:32.340 --> 00:10:38.340
 Ja, aber meiner schließt auch direkt an, weil das schon noch ein bisschen auf die Technik eingeht, die wir da benutzt haben.

00:10:38.340 --> 00:10:39.480
 Dann ...

00:10:39.480 --> 00:10:41.240
 Dann mach ich doch den schnell, oder?

00:10:41.240 --> 00:10:41.960
 Dann mach doch den schnell.

00:10:41.960 --> 00:10:43.240
 Dann kannst du ja vielleicht nachher ...

00:10:43.240 --> 00:10:44.240
 Dann kommt ja jeder, genau.

00:10:44.900 --> 00:10:47.400
 Der nächste Punkt ist nämlich, geht da Hand in Hand.

00:10:47.400 --> 00:10:58.400
 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.

00:10:58.400 --> 00:11:03.380
 Sodass ich dann direkt sein Kamerabild und seinen Ton da durchschleifen kann.

00:11:04.200 --> 00:11:06.700
 Und das hat lokal schön funktioniert.

00:11:06.700 --> 00:11:27.420
 Und das liegt daran, dass WebRTC zwar an sich eine Kommunikation zwischen Clients direkt anstrebt, also Peer-to-Peer, sofern das möglich ist.

00:11:28.220 --> 00:11:35.660
 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.

00:11:35.660 --> 00:11:40.820
 Und man musste dann schmerzlich erfahren, dass es da noch ein paar andere Standards gibt.

00:11:40.820 --> 00:11:44.480
 Stun-Server, die dann dynamische Port-Öffnungen aushandeln.

00:11:44.480 --> 00:11:50.980
 Und als letztes Fallback dann Turn-Server, die dann wirklich die Streams dann tunneln und da als Mittelsmann fungieren.

00:11:51.600 --> 00:11:55.080
 Und verständlicherweise gibt es dafür keine kostenlosen Services.

00:11:55.080 --> 00:12:00.520
 Also vielleicht findet man mal welche, wo die Credentials irgendwie geleakt sind oder so, die man dann natürlich nicht böserweise nutzen sollte.

00:12:00.520 --> 00:12:06.080
 Weil ist klar, Medien, Video-Audio-Übertragung, das zieht ordentlich Ressourcen, natürlich.

00:12:06.080 --> 00:12:09.020
 Und Moritz nickt.

00:12:09.780 --> 00:12:14.060
 Ja, nee, das ist interessant, weil ich, wo war das denn?

00:12:14.060 --> 00:12:19.960
 Ich habe ja irgendwie gehört, ach, das war genau, das war ein Podcast, das war ein Podlovers-Podcast.

00:12:19.960 --> 00:12:29.280
 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.

00:12:29.280 --> 00:12:41.720
 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.

00:12:41.720 --> 00:12:46.940
 Eben um sowas zu machen, wie wir hier machen, eine Remote-Aufnahme, aber mit, finde ich, hoher Qualität.

00:12:46.940 --> 00:12:52.780
 Also viel besser als alle möglichen komischen Video- und Audio-Dienste, die irgendwie bis zu Tode komprimieren.

00:12:52.780 --> 00:12:54.100
 Das ist einfach sehr, sehr gut.

00:12:54.100 --> 00:12:56.180
 Und der hat auch das im Hintergrund irgendwo laufen.

00:12:56.320 --> 00:13:00.220
 Ich glaube aber, so wie wir das benutzen, weiß ich gar nicht, ob das gebraucht wird.

00:13:00.220 --> 00:13:02.120
 Ich glaube, darüber läuft das in dem Fall gar nicht.

00:13:02.120 --> 00:13:09.320
 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.

00:13:09.320 --> 00:13:11.200
 Ach so, dass der dann lokal.

00:13:11.200 --> 00:13:17.140
 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.

00:13:17.140 --> 00:13:23.180
 Ja, ich habe wieder alles vergessen, fast alles vergessen aus dieser Folge.

00:13:23.180 --> 00:13:25.920
 Nur Stun und Turn, das blieb irgendwie hängen bei mir.

00:13:25.920 --> 00:13:31.640
 Und falls ihr das wissen wollt, wie das genau funktioniert, dann könnt ihr mal bei den Podlovers reinhören.

00:13:31.640 --> 00:13:32.320
 Ich weiß nicht genau.

00:13:32.320 --> 00:13:34.900
 Verlinken wir die Folge vielleicht in den Shownotes, wenn du sie findest.

00:13:34.900 --> 00:13:40.960
 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.

00:13:41.300 --> 00:13:46.260
 Und jetzt für unseren Fall fände ich das jetzt also irgendwie ein bisschen overkill da extra irgendwelche Server anzubieten.

00:13:46.260 --> 00:13:55.440
 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.

00:13:55.440 --> 00:14:05.280
 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.

00:14:06.100 --> 00:14:15.100
 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.

00:14:15.100 --> 00:14:26.460
 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

00:14:26.460 --> 00:14:37.020
 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.

00:14:37.020 --> 00:14:45.120
 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.

00:14:45.120 --> 00:14:47.000
 Sehr geil.

00:14:47.000 --> 00:14:49.720
 Und damit, ja, ist der Punkt eigentlich auch abgeschlossen.

00:14:49.720 --> 00:14:55.680
 Ja, sehr gut. Dann bin ich wahrscheinlich dran, beziehungsweise ich glaube, das ist auch ein gemeinsamer Punkt.

00:14:56.460 --> 00:15:03.840
 Und zwar hat jemand für euch den nächsten Spam-Spot gekauft, wollte ich mal sagen.

00:15:03.840 --> 00:15:04.280
 Warte, warte, warte.

00:15:04.280 --> 00:15:09.880
 Ja, also finde ich, hat auf jeden Fall einen Applaus für dich.

00:15:09.880 --> 00:15:10.500
 Das finde ich besucht, den Applaus.

00:15:10.500 --> 00:15:18.780
 Also könnt ihr euch schon mal bedanken bei Cormanda auf Twitter, der hat euch den Spam-Spot gekauft.

00:15:18.780 --> 00:15:23.120
 Aber warum ich eigentlich jetzt auch nochmal, also vielen Dank an der Stelle für die Spende.

00:15:23.300 --> 00:15:30.120
 Und auch noch an Christian, der noch einen Kommentar zu seiner Spende dazu geschrieben hat.

00:15:30.120 --> 00:15:31.460
 Den lese ich jetzt einfach mal vor.

00:15:31.460 --> 00:15:39.200
 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.

00:15:39.200 --> 00:15:39.620
 Danke.

00:15:40.520 --> 00:15:43.800
 Er hat auch ein paar Biere spendiert, wir können uns davon ein paar kaufen.

00:15:43.800 --> 00:15:49.500
 Aber ich weiß jetzt nicht, ich glaube, wir sind beide ein bisschen geschädigt von einem gemeinsamen Arbeitgeber, den wir mal hatten.

00:15:50.620 --> 00:15:59.660
 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.

00:15:59.660 --> 00:16:06.220
 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.

00:16:06.220 --> 00:16:10.600
 Aber ich weiß eben genau, warum das bei dir so drin ist.

00:16:10.700 --> 00:16:12.380
 Deswegen ist das für mich fein.

00:16:12.380 --> 00:16:14.020
 Ja, also genau.

00:16:14.020 --> 00:16:21.160
 Und ich glaube auch, dass ich in erster Linie der Schuldige daran bin, der das öfter mal gesagt hat.

00:16:21.160 --> 00:16:24.960
 Bier auf Ex, so viel Bier habe ich jetzt hier gar nicht.

00:16:24.960 --> 00:16:28.900
 Ich versuche einfach, ich sage einfach nichts mehr, dann kann mir der Fehler auch nicht mehr passieren.

00:16:28.900 --> 00:16:31.060
 Ja, damit war es das auch.

00:16:31.060 --> 00:16:31.400
 Nein, nein.

00:16:31.400 --> 00:16:36.000
 Ich kann nicht versprechen, dass es mir nicht nochmal rausrutscht.

00:16:36.000 --> 00:16:40.300
 Jedes Mal, wenn es mir rausrutscht, ich soll ja dann jedes Mal ein Bier auf Ex trinken.

00:16:40.520 --> 00:16:42.980
 Das heißt, jedes Mal müsst ihr mir dann ein Bier spenden, was ich jetzt trinken.

00:16:42.980 --> 00:16:44.120
 Stimmt, ja, so machen wir es einfach.

00:16:44.120 --> 00:16:44.540
 Genau.

00:16:44.540 --> 00:16:47.100
 Also, auf der Homepage, nein, Spaß.

00:16:47.100 --> 00:16:51.740
 Müssen wir jetzt noch erklären, den Unterschied zwischen Homepage und Website?

00:16:51.740 --> 00:16:53.280
 Nee, das guckt ihr einfach mal online nach.

00:16:53.280 --> 00:16:53.940
 Das machen wir nicht.

00:16:53.940 --> 00:16:57.880
 Genau, aber ich habe, du hast gerade gesehen, ich habe umsortiert.

00:16:57.880 --> 00:17:05.880
 Also, wenn wir schon bei Kommentaren und Kommunikation sind, wir haben eine kleine Umfrage gemacht bei Twitter zu unserer Soundqualität.

00:17:05.880 --> 00:17:09.360
 Einfach, weil die Twitter-Umfragen irgendwie gern geklickt werden.

00:17:09.740 --> 00:17:13.820
 Und mir das Spaß macht, bei Twitter-Umfragen einzustellen.

00:17:14.480 --> 00:17:16.680
 haben wir mal gefragt, wie ihr unseren Sound findet.

00:17:16.680 --> 00:17:21.420
 Und es kam, eigentlich 100 Prozent haben gesagt, unser Sound ist okay.

00:17:21.420 --> 00:17:23.540
 Beziehungsweise, unser Sound ist gut.

00:17:23.540 --> 00:17:25.660
 Ja, du musst sagen, was für Auswahlmöglichkeiten es gab.

00:17:25.660 --> 00:17:27.580
 Weil das klingt jetzt so okay, klingt jetzt naja, okay.

00:17:27.580 --> 00:17:30.860
 Es gab aber, glaube ich, nur, ist okay oder ist schlecht.

00:17:31.700 --> 00:17:32.360
 Genau.

00:17:32.360 --> 00:17:34.680
 Es gab keine einzige Stimme für, ist schlecht.

00:17:34.680 --> 00:17:37.740
 Jetzt muss ich gerade noch mal gucken.

00:17:37.740 --> 00:17:38.840
 Wo haben wir es?

00:17:38.840 --> 00:17:42.300
 Passt war die eine Auswahlmöglichkeit.

00:17:42.300 --> 00:17:44.420
 Und naja, entklammern sie ihr Kommentar.

00:17:44.420 --> 00:17:49.060
 Weil die Leute zu faul sind, Kommentare zu schreiben, hat keiner dafür abgestimmt.

00:17:49.440 --> 00:17:52.660
 Darauf habe ich mein Geld gesetzt.

00:17:52.660 --> 00:17:56.760
 Ich hoffte, dass es gut ausgeht, weil die Leute zu faul sind, Kommentare zu schreiben.

00:17:56.760 --> 00:17:57.800
 Nein, es stimmt aber gar nicht.

00:17:57.800 --> 00:18:02.680
 Weil die Leute, also die Leute sagen einem ja ganz gern, wenn man falsch liegt oder was schlecht macht.

00:18:03.520 --> 00:18:05.940
 Ja, eher als, dass man was gut macht, ja.

00:18:05.940 --> 00:18:09.140
 Also freut uns, dass der Sound für euch passt.

00:18:09.140 --> 00:18:13.480
 Das finde ich einfach schön, weil wir sind jetzt auch keine Audioingenieure.

00:18:13.480 --> 00:18:17.340
 Wir haben das irgendwie so, wir haben zwar beide, glaube ich, Audio-Vorerfahrungen,

00:18:17.340 --> 00:18:19.060
 aber haben uns das so irgendwie zusammengeklöppelt.

00:18:19.060 --> 00:18:22.260
 Und mich freut, dass das irgendwie passt für euch.

00:18:22.260 --> 00:18:26.160
 Ja, damit können wir zum nächsten Retro.

00:18:26.160 --> 00:18:33.380
 Ja, ich habe einen NPM, wie sagt man, einen Befehl, beziehungsweise eigentlich auch ein Package, gefunden.

00:18:33.520 --> 00:18:38.360
 Ich habe euch einen Tweet, den ich leider jetzt nicht mehr finde, und zwar npx npkill.

00:18:38.360 --> 00:18:46.100
 Also npkill ist das Paket und npx, falls ihr das nicht kennt, ist ein Command von NPM,

00:18:46.100 --> 00:18:50.380
 mit dem ich ein Paket direkt ausführen kann, ohne es installieren zu müssen in dem Package.

00:18:50.380 --> 00:18:56.180
 Das heißt, das lädt das dann im Hintergrund natürlich trotzdem runter und führt das dann direkt aus.

00:18:56.700 --> 00:19:05.400
 Und was npkill macht, ist, dass es einem alle, also es sucht in dem Verzeichnis, in dem ich gerade bin,

00:19:05.400 --> 00:19:08.120
 und in allen Unterordnern nach Node-Modules-Ordnern.

00:19:08.120 --> 00:19:11.560
 Und zeigt mir die dann an, und zwar sogar mit der Größe, die die belegen.

00:19:12.720 --> 00:19:17.760
 Und erlaubt mir dann mit einfach auswählen, und ich glaube, Leertaste ist es, diesen Ordner zu löschen.

00:19:17.760 --> 00:19:22.080
 Und das macht natürlich Sinn, wenn man irgendwie so einen Entwicklungsordner hat mit 100 Open-Source-Projekten.

00:19:22.080 --> 00:19:24.240
 Da kommt ja schnell mal was zusammen.

00:19:24.240 --> 00:19:28.740
 Und damit kann man das dann eben den Speicherplatz räumen.

00:19:29.260 --> 00:19:36.640
 Und das Problem, Problem in Anführungsstrichen bei NPM ist eben, dass es jedes Paket in jedem Projekt abspeichert.

00:19:36.640 --> 00:19:42.320
 Also wenn ich irgendwie 50 Projekte habe, die Lodash benutzen, dann habe ich halt wirklich 50 Mal das Lodash-Paket.

00:19:42.320 --> 00:19:46.840
 Wahrscheinlich noch in irgendwie verschiedenen Versionen, wenn es dann irgendwie noch eine Peer-Dependency gibt und was weiß ich.

00:19:47.640 --> 00:19:49.540
 Und das belegt natürlich 50 Mal Speicherplatz.

00:19:49.540 --> 00:19:54.160
 Und was PNPM anders macht, das ist nämlich der nächste Punkt.

00:19:54.160 --> 00:19:59.380
 PNPM ist ein alternativer Package-Manager zu NPM.

00:19:59.380 --> 00:20:04.360
 Und der legt alle Pakete nur einmal auf der Platte ab und verlinkt die dann per Hardlinks.

00:20:04.360 --> 00:20:06.360
 Ah, interesting.

00:20:06.360 --> 00:20:08.140
 Ja, sehr interessanter Ansatz.

00:20:08.140 --> 00:20:11.760
 Und dadurch spart man natürlich ordentlich was an Speicherplatz.

00:20:12.560 --> 00:20:21.940
 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.

00:20:21.940 --> 00:20:32.880
 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.

00:20:32.880 --> 00:20:42.700
 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.

00:20:42.700 --> 00:20:49.980
 Klingt erstmal nach einer coolen Idee, aber ich habe irgendwie so, irgendwie habe ich so das Gefühl, dass es Probleme geben könnte.

00:20:49.980 --> 00:20:53.780
 Ja, das ist genau mein nächster Punkt.

00:20:54.460 --> 00:21:01.300
 Es gibt mit manchen Paketen Probleme, aber die machen dann auch tatsächlich was falsch, was man eigentlich nicht so machen sollte.

00:21:01.300 --> 00:21:08.280
 Also kurz zum Hintergrund, NPM nutzt eine flache Hierarchie, zumindest seit Version 3, vorher war das nicht so.

00:21:08.280 --> 00:21:19.140
 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.

00:21:19.140 --> 00:21:23.520
 Die kann man, glaube ich, in Windows 10 mittlerweile abstellen, aber mit älteren Windows-Versionen gab es da zumindest Probleme.

00:21:23.520 --> 00:21:27.380
 Ich konnte teilweise die Projektordner nicht mehr löschen damals unter Windows.

00:21:27.380 --> 00:21:27.600
 Ja, genau.

00:21:27.600 --> 00:21:34.480
 Also es ist interessant, ich konnte sie anlegen, diese langen Pfade, diese ewig tief verschachtelten, aber löschen konnte ich sie nicht mehr.

00:21:34.480 --> 00:21:44.100
 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.

00:21:44.100 --> 00:21:51.380
 Das war auch riesig groß dadurch alles, weil die Pakete tausendmal irgendwie vorlagen, dieselben Pakete immer wieder aufs Neue.

00:21:51.380 --> 00:21:59.620
 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.

00:21:59.620 --> 00:22:06.460
 Und das heißt, obwohl die nicht in der Package-Json direkt als Dependency von dem Projekt angelegt sind, kann ich die einbinden.

00:22:06.660 --> 00:22:12.320
 Und das funktioniert mit Jahren und mit MPM und ist aber eigentlich technisch falsch.

00:22:12.320 --> 00:22:16.700
 Also ich require ein Paket, das ich eigentlich nicht als Dependency angegeben habe.

00:22:16.700 --> 00:22:20.260
 Dürfte eigentlich nicht gehen, geht aber mit den anderen Packet-Managern.

00:22:20.260 --> 00:22:30.840
 Und PMPM-Hunter hat das eben strikter, weil, was zur Folge hat, dass solche Packages dann zu Module-Not-Found-Fehlern führen, logischerweise.

00:22:30.840 --> 00:22:40.940
 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.

00:22:42.420 --> 00:22:44.600
 Weil das einfach, wie gesagt, technisch falsch ist.

00:22:44.600 --> 00:22:48.500
 Also sagen zwar viele so, oh, aber es funktioniert doch, aber das macht es nicht richtiger.

00:22:48.500 --> 00:22:54.680
 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.

00:22:54.680 --> 00:22:56.280
 Ja.

00:22:56.280 --> 00:23:00.680
 Es gibt aber noch ein paar andere Probleme, das ist nicht das einzige wohl, musste ich schmerzlich erfahren.

00:23:00.680 --> 00:23:04.300
 Ich habe ja von Cypress erzählt in unserer letzten Folge, Folge 21.

00:23:05.480 --> 00:23:11.840
 Da hatte ich auch irgendwie Probleme und habe ein Issue gefunden, da steht dann quasi drin so, na, wir haben nicht viele PMPM-User.

00:23:11.840 --> 00:23:16.120
 Das fixen wir nicht, aber wir sind offen für PRs.

00:23:16.120 --> 00:23:24.000
 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.

00:23:24.000 --> 00:23:25.980
 Also man benutzt das wirklich einfach wie NPM.

00:23:25.980 --> 00:23:29.060
 PMPM-Install, PMPM-Add, was weiß ich.

00:23:29.060 --> 00:23:32.060
 Die Commands sind also wirklich identisch.

00:23:32.060 --> 00:23:33.920
 Es gibt noch ein paar andere coole Features.

00:23:34.800 --> 00:23:40.040
 NPM-Link hatte ich, glaube ich, angesprochen und Jan-Link auch in der letzten Folge, glaube ich, funktioniert der auch.

00:23:40.040 --> 00:23:46.420
 Also ansonsten scheint mir das echt eine gute Sache zu sein und würde mich freuen, wenn das mehr Einzug hält.

00:23:46.420 --> 00:23:54.440
 Ja, also ich kann mir vorstellen, dass das vieles deutlich auch verschnellert irgendwie beim NPM-Install, wenn du irgendwie das schon mal was hast.

00:23:54.440 --> 00:23:58.660
 Stimmt, ganz wichtiger Punkt, das habe ich gar nicht jetzt berücksichtigt.

00:23:58.660 --> 00:24:00.300
 Install habe ich gerade gesagt, gell?

00:24:00.300 --> 00:24:01.180
 Im Stall.

00:24:01.180 --> 00:24:01.640
 Im Stall.

00:24:01.640 --> 00:24:02.860
 Im Stall.

00:24:03.700 --> 00:24:04.800
 NPM im Stall.

00:24:04.800 --> 00:24:06.560
 Oh Gott.

00:24:08.800 --> 00:24:09.900
 Geht schon gut los, he?

00:24:09.900 --> 00:24:12.740
 Genau, also das ist ein ganz wichtiger Punkt.

00:24:12.740 --> 00:24:24.660
 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.

00:24:25.120 --> 00:24:32.240
 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.

00:24:33.800 --> 00:24:39.140
 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.

00:24:39.140 --> 00:24:43.740
 Und ja, das ist einer der wirklich großen Vorteile von PNPM.

00:24:45.220 --> 00:24:54.560
 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.

00:24:54.560 --> 00:24:55.060
 Einfach mal machen.

00:24:55.060 --> 00:24:56.840
 Also wenn ich es nicht, ja, einfach mal machen.

00:24:56.840 --> 00:25:09.400
 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.

00:25:09.400 --> 00:25:15.580
 Ja, ich muss es einfach mal ausprobieren. Wir haben ja bei unserer Podcast-Seite haben wir gar keinen NPM, ne?

00:25:15.580 --> 00:25:16.940
 Ich glaube nicht, ne?

00:25:16.940 --> 00:25:34.420
 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.

00:25:34.420 --> 00:25:41.280
 Verrückt. Das klüpft sehr gut an an unsere letzte Folge, wen so Retro-Sachen interessieren, da haben wir letztes Mal in rumgeschritten.

00:25:41.280 --> 00:25:49.620
 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.

00:25:49.620 --> 00:26:06.300
 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.

00:26:07.680 --> 00:26:21.940
 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.

00:26:22.840 --> 00:26:37.860
 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.

00:26:38.220 --> 00:26:51.260
 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.

00:26:52.560 --> 00:26:53.880
 Nacht schon, du hast dich vertippt.

00:26:53.880 --> 00:27:05.520
 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.

00:27:05.520 --> 00:27:18.260
 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.

00:27:18.480 --> 00:27:32.120
 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.

00:27:33.440 --> 00:27:47.300
 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.

00:27:47.300 --> 00:27:57.320
 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.

00:27:57.400 --> 00:28:08.060
 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.

00:28:08.060 --> 00:28:15.960
 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.

00:28:15.960 --> 00:28:19.980
 Aber an der Stelle muss ich sagen, Git, funktioniere einfach so.

00:28:19.980 --> 00:28:24.800
 Was macht das Re-Re-Re jetzt genau? Ich habe es nicht verstanden oder ich hatte Sekundenschlaf.

00:28:26.160 --> 00:28:34.440
 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.

00:28:34.440 --> 00:28:35.020
 Okay.

00:28:35.020 --> 00:28:43.540
 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.

00:28:43.540 --> 00:28:49.420
 Dann wirst du uns vielleicht in einer folgenden Folge sagen, ob es funktioniert hat.

00:28:49.420 --> 00:28:53.720
 Vielleicht. Ganz klares Vielleicht.

00:28:54.920 --> 00:28:57.440
 Ja, jetzt kommt dein Laptop.

00:28:57.440 --> 00:29:01.620
 Ja, mein Laptop. Ich habe meinen Laptop gebrickt mit einem Windows-Update.

00:29:01.620 --> 00:29:08.840
 Also Windows-Update sagt irgendwie, ja, bitte einmal neu starten, weil ich habe ganz viele wichtige Sachen installiert.

00:29:09.580 --> 00:29:26.100
 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.

00:29:26.100 --> 00:29:40.040
 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.

00:29:40.780 --> 00:29:53.360
 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.

00:29:55.300 --> 00:30:05.140
 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.

00:30:05.140 --> 00:30:12.400
 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.

00:30:12.400 --> 00:30:22.400
 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.

00:30:22.940 --> 00:30:29.820
 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.

00:30:29.820 --> 00:30:37.040
 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.

00:30:37.040 --> 00:30:42.720
 Oder vielleicht ist die BIOS-Batterie leer. Also, wie gesagt, alles aufgeschraubt, dann noch ein paar Klappen mehr.

00:30:42.720 --> 00:30:46.960
 Ich glaube, das weiß gar nicht jeder, dass so Laptops normalerweise oder Computer allgemein so eine kleine Batterie drin haben.

00:30:46.960 --> 00:30:51.820
 Genau, also selbst bei Stromausfall läuft da ja die Uhr zum Beispiel weiter für Datum und Uhrzeit.

00:30:52.460 --> 00:31:00.440
 Das ist so eine, wie heißt es, ich weiß gar nicht, 2032er, handelsübliche Knopfbatterie.

00:31:00.440 --> 00:31:05.000
 Ich habe aber keine gefunden. Also ich habe da wirklich alles unten abgeschraubt.

00:31:05.000 --> 00:31:08.440
 Was ging den Lüfter raus und diese Heating-Pipes und so.

00:31:08.440 --> 00:31:13.180
 Also wirklich alles rausgemacht. Selbst da, wo irgendwelche Warnzettelchen dranhingen.

00:31:14.140 --> 00:31:19.620
 Hier von wegen Garantie geht verdornen, was weiß ich. Also alles rausgemacht. Ja, nirgends war die CMOS-Batterie zu sehen.

00:31:19.620 --> 00:31:29.960
 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.

00:31:29.960 --> 00:31:41.340
 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.

00:31:41.740 --> 00:31:53.920
 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.

00:31:53.920 --> 00:32:01.240
 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.

00:32:01.240 --> 00:32:07.860
 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.

00:32:07.860 --> 00:32:18.120
 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.

00:32:18.640 --> 00:32:31.700
 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.

00:32:32.480 --> 00:32:41.060
 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.

00:32:41.060 --> 00:32:42.480
 Und das war tatsächlich richtig.

00:32:42.480 --> 00:32:43.540
 Oh, wow.

00:32:43.540 --> 00:32:44.280
 Ja.

00:32:44.280 --> 00:32:50.600
 Ja, Bios-Passwort, das ist so was, da hast du zwar theoretisch unendlich viele Versuche, aber da geht halt nichts dran vorbei.

00:32:50.600 --> 00:32:51.880
 Richtig. Ja.

00:32:51.880 --> 00:32:55.760
 Wenn, ja, wenn du es halt nicht mehr weißt, dann viel Spaß.

00:32:55.760 --> 00:33:07.320
 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.

00:33:07.320 --> 00:33:15.460
 Ich finde es faszinierend. Aber ich frage mich ja, auf welche Systemebene das Windows-Update eingreift, dass sowas passieren kann.

00:33:15.460 --> 00:33:24.280
 Das finde ich irgendwie, also ich meine, das gar nicht mehr angeht quasi. Also nicht mal der Bildschirm, irgendwas zur Hölle passt da.

00:33:24.280 --> 00:33:44.620
 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.

00:33:44.800 --> 00:33:55.620
 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.

00:33:55.620 --> 00:34:06.740
 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.

00:34:07.740 --> 00:34:09.560
 Und das geht mir nicht bei vielen technischen Geräten so.

00:34:09.560 --> 00:34:13.700
 Gibt es noch? Haben wir mal, glaube ich, umfilmiert oder so. Also irgendwas war da.

00:34:13.700 --> 00:34:15.880
 XMG.gg.

00:34:15.880 --> 00:34:18.000
 Witzigerweise ist die Homepage.

00:34:18.000 --> 00:34:20.340
 Ja gut, Schenker war, glaube ich, halt irgendwo der Vertrieb.

00:34:20.340 --> 00:34:21.300
 Homepage, habe ich gesagt.

00:34:21.300 --> 00:34:23.500
 Ja komm, also Schluckbier muss jetzt drin sein.

00:34:23.500 --> 00:34:23.680
 Okay.

00:34:25.600 --> 00:34:26.820
 Ich habe es selbst gemerkt.

00:34:26.820 --> 00:34:27.960
 Ja, ist doch schon mal was.

00:34:27.960 --> 00:34:35.140
 Ja, also es lohnt sich dann doch, wenn man, wenn man dann Hand anlegt und sich halt denkt, naja.

00:34:35.140 --> 00:34:35.920
 Website.

00:34:35.920 --> 00:34:37.160
 Website.

00:34:37.160 --> 00:34:37.920
 Nicht Webseite.

00:34:37.920 --> 00:34:40.700
 Ja, die Webseite ist die einzelne Seite auf der Website.

00:34:40.700 --> 00:34:41.800
 Website.

00:34:41.800 --> 00:34:43.340
 Wenn man es jetzt ganz, wenn man es ganz genau nimmt.

00:34:43.340 --> 00:34:44.960
 Kennst du dieses Lied? Warte mal, wie hieß das denn?

00:34:44.960 --> 00:34:51.840
 Das war so eins von den ersten, von den ersten Nerd-Technik-Web-Songs.

00:34:53.060 --> 00:34:58.260
 Das war so ein Rap. Das war sehr, sehr, sehr alt, wo, ey, es ist egal, es ist nicht so wichtig.

00:34:58.260 --> 00:35:09.080
 Ja, also XMG.gg ist wirklich .gg, wusste ich gar nicht. Ja, und die haben hier irgendwie ein Laptop, das heißt The Answer.

00:35:09.080 --> 00:35:12.560
 Steht da zumindest direkt nebendran. Neo, ah nee, Neo 15.

00:35:12.560 --> 00:35:20.160
 Ja, das sind so, das sind so große, so Verbrennermotoren, so große, so Gaming-artige, so richtig dicke.

00:35:20.300 --> 00:35:35.300
 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.

00:35:35.300 --> 00:35:43.460
 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.

00:35:44.300 --> 00:35:46.760
 Ja, ich wollte gerade auch sagen, wie lange hält denn der Akku davon?

00:35:46.760 --> 00:35:50.240
 Akku irgendwie zwei Stunden oder so.

00:35:50.240 --> 00:35:51.040
 Na, immerhin.

00:35:51.040 --> 00:35:59.120
 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.

00:35:59.480 --> 00:36:07.480
 Also der von meinem alten Gaming-Laptop, der hielt am Anfang, als ich es gekauft habe, eine Dreiviertelstunde.

00:36:07.480 --> 00:36:07.840
 Was?

00:36:08.680 --> 00:36:11.840
 Und irgendwann ging er dann kaputt, jetzt hält er quasi null Sekunden.

00:36:11.840 --> 00:36:12.680
 Mhm.

00:36:12.680 --> 00:36:20.860
 Also wenn ich den Strom abziehe, ist sofort aus. Da geht gar nichts mehr, das ist Ende. Gut. Laptop gebrickt. Fertig.

00:36:20.860 --> 00:36:21.300
 Ja.

00:36:21.300 --> 00:36:25.280
 Dann kann ich jetzt auch noch ein bisschen ranten. Das alte Thema Vodafone.

00:36:25.280 --> 00:36:28.260
 Habe ich noch ein kleines Update dazu.

00:36:28.260 --> 00:36:35.040
 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.

00:36:35.040 --> 00:36:50.560
 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.

00:36:50.560 --> 00:36:52.040
 Also irgendwie kriegen sie es nicht in den Griff.

00:36:52.040 --> 00:36:59.640
 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.

00:36:59.900 --> 00:37:04.960
 Und jetzt haben sie mir eine SMS geschrieben, wo drin steht, dein Problem ist gelöst.

00:37:04.960 --> 00:37:07.920
 Und dann habe ich mir gedacht, ah cool, dann gucke ich jetzt nochmal auf das Ticket drauf.

00:37:07.920 --> 00:37:10.680
 Ticket ist gelöscht, gibt es nicht mehr, der Link ist tot.

00:37:10.680 --> 00:37:21.140
 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.

00:37:21.280 --> 00:37:28.460
 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.

00:37:28.460 --> 00:37:29.400
 Das ist einfach.

00:37:29.400 --> 00:37:35.900
 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.

00:37:35.900 --> 00:37:41.660
 Ne, das habe ich mit denen mit Twitter besprochen, mit der Erstattung, das habe ich auch noch alles schriftlich.

00:37:41.660 --> 00:37:47.120
 Twitter löscht da ja nichts, also das ist doch, also ich bin da in regem Austausch mit denen, immer mal wieder.

00:37:47.120 --> 00:37:49.300
 Unglaublich, wie lange sich das jetzt schon hinzieht bei dir.

00:37:49.300 --> 00:38:04.020
 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.

00:38:05.220 --> 00:38:27.320
 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.

00:38:29.220 --> 00:38:36.180
 Ja, es ist einfach so, ich weiß nicht, was die da machen, aber irgendwie ist es kaputt, es ist grundkaputt.

00:38:36.180 --> 00:38:36.900
 Verrückt.

00:38:37.060 --> 00:38:45.600
 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.

00:38:48.080 --> 00:38:55.620
 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.

00:38:55.620 --> 00:38:57.040
 Jetzt setz mich nicht so unter Druck mit dem Thema.

00:38:57.040 --> 00:39:00.340
 Doch, doch, doch, der Moritz hat das Thema sehr, sehr gut vorbereitet, ausführlichst.

00:39:02.340 --> 00:39:26.880
 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.

00:39:27.980 --> 00:39:51.160
 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.

00:39:51.160 --> 00:39:54.980
 Darf ich raten, wie es funktioniert? Oder willst du sagen?

00:39:54.980 --> 00:39:57.920
 Mit der Lokalisierung? Ja, klar, schieß los.

00:39:57.920 --> 00:40:02.920
 Also, das ist keine fest eingebaute Lokalisierung, oder?

00:40:02.920 --> 00:40:04.560
 Also, das ist eine, die man selbst macht.

00:40:04.560 --> 00:40:06.240
 Doch? Okay, gut.

00:40:06.240 --> 00:40:12.360
 Es ist keine Schwarzmagie, kein, ja, also ich weiß nicht, was du genau hinaus willst.

00:40:12.360 --> 00:40:20.060
 Ich hätte jetzt geraten, Lang-Attribut, dass das da mit reinspielt und dass man dann, je nachdem, wie das gesetzt ist.

00:40:20.060 --> 00:40:21.680
 Das hat die entsprechende Auswirkung, ja.

00:40:21.680 --> 00:40:22.560
 Okay, gut.

00:40:22.560 --> 00:40:24.760
 Also, ich habe eine Demo gebastelt, da kannst du auch mal draufklicken.

00:40:24.760 --> 00:40:25.640
 Ja.

00:40:25.640 --> 00:40:27.780
 Die kommt natürlich auch in die Shownotes.

00:40:27.780 --> 00:40:35.160
 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.

00:40:36.620 --> 00:40:39.040
 Generell übrigens, wo ist sie denn? Hast du mir die geschickt?

00:40:39.040 --> 00:40:40.820
 Die ist im, ja, ne, im Trello drin.

00:40:40.820 --> 00:40:44.480
 Die Property der Woche, der letzte hier mit Demo, mit Pfeilchen.

00:40:44.480 --> 00:40:46.620
 Ach, da unten, jetzt, ja, jetzt, ja, jetzt, ah.

00:40:46.620 --> 00:40:57.340
 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.

00:40:58.000 --> 00:41:00.620
 Ja, der Moritz kriegt ganz große Augen, dass er die Demo aufgemacht hat.

00:41:00.620 --> 00:41:01.800
 Ja, ich fand's auch cool.

00:41:01.800 --> 00:41:04.920
 Und deswegen hab ich's auch so spontan für heute als Property genommen.

00:41:04.920 --> 00:41:10.780
 Und zwar, ähm, also ich, oder möchtest du's beschreiben, was du siehst vielleicht, dass wir ein bisschen Abwechslung drin haben?

00:41:10.780 --> 00:41:17.900
 Nee, also, warte, ich, nee, es ist ganz anders, als ich mir's gedacht hab, äh, muss ich sagen.

00:41:17.900 --> 00:41:23.860
 Nee, was, was mich jetzt gerade überrascht hat, war, ähm, ich hab grad Anführungszeichen gesehen von denen, die ich, die ich nicht kannte.

00:41:23.860 --> 00:41:27.220
 Und zwar das unterste Beispiel. Kannst du mir sagen, was das ist?

00:41:27.520 --> 00:41:29.560
 Äh, Traditionelles, äh, Chinesisch.

00:41:29.560 --> 00:41:38.420
 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.

00:41:38.420 --> 00:41:38.560
 Ja, genau.

00:41:38.560 --> 00:41:40.140
 So versuch ich's mal zu beschreiben.

00:41:40.140 --> 00:41:44.080
 Ähm, und ich wusste, ich wusste nicht, dass das so einfach ist.

00:41:44.080 --> 00:41:56.020
 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.

00:41:56.520 --> 00:42:00.200
 Das kommt aber direkt aus dem, äh, aus dem, äh, Browser-Stylesheet, tatsächlich.

00:42:00.480 --> 00:42:12.360
 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.

00:42:12.360 --> 00:42:18.240
 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.

00:42:18.240 --> 00:42:20.360
 Aber das ist ja tatsächlich komplett eingebaut.

00:42:20.360 --> 00:42:28.780
 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.

00:42:28.880 --> 00:42:35.080
 Also mit before und after kann ich in einem Element vor dem eigentlichen Content und nach dem eigentlichen Content was einfügen.

00:42:35.260 --> 00:42:48.280
 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.

00:42:48.280 --> 00:42:55.180
 Ähm, genau, und ich erklär mal kurz, was man bei der Demo sieht, also man sieht, äh, mehrere Textabsätze.

00:42:55.180 --> 00:43:01.100
 Einmal, das ist ein Zitatblock auf Deutsch mit den deutschen Anführungsstrichen, also unten und am Ende oben.

00:43:01.640 --> 00:43:14.700
 Ä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.

00:43:14.700 --> 00:43:20.940
 Also das sind wirklich, ähm, ja, lokalisierte Anführungsstriche, wie man sie in der entsprechenden Sprache verwenden, verwenden würde.

00:43:20.940 --> 00:43:31.620
 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.

00:43:31.640 --> 00:43:33.440
 Erf, erf, erf, französisch und so weiter.

00:43:33.440 --> 00:43:47.740
 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.

00:43:47.740 --> 00:44:01.020
 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.

00:44:01.560 --> 00:44:15.120
 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.

00:44:15.380 --> 00:44:21.580
 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.

00:44:21.580 --> 00:44:29.100
 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,

00:44:29.200 --> 00:44:55.460
 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.

00:44:56.720 --> 00:45:08.600
 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.

00:45:08.600 --> 00:45:13.920
 Also an der Stelle echt, äh, geile, geile Property der Woche, find ich.

00:45:13.920 --> 00:45:26.340
 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,

00:45:26.340 --> 00:45:33.340
 über, über Before und After gelernt. Also es lohnt sich, das mal, das mal ganz durchzuschauen, auch mit, mit Code-Beispielen.

00:45:33.340 --> 00:45:35.920
 Ah, After, hahaha, Code, hahaha.

00:45:35.920 --> 00:45:38.520
 Oh, wow. Oh, ja, oh.

00:45:38.520 --> 00:45:47.200
 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.

00:45:47.200 --> 00:45:48.680
 Hä, was?

00:45:51.680 --> 00:45:54.100
 Ich weiß nicht, warum du, ich weiß wirklich nicht, warum du, ich weiß wirklich nicht, warum du.

00:45:54.100 --> 00:45:54.980
 Ja, egal, Werbung.

00:45:54.980 --> 00:45:59.880
 Lieber Geliebter, ich freue mich sehr, meine Geschichte mit Ihnen zu teilen.

00:45:59.880 --> 00:46:13.040
 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.

00:46:13.680 --> 00:46:25.500
 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.

00:46:25.500 --> 00:46:29.040
 Einiges davon könnte auch seinen Zweck erfüllen.

00:46:29.040 --> 00:46:32.820
 Eines stellen Sie Corvette von 1963 wieder her.

00:46:33.340 --> 00:46:38.360
 Ich wurde positiv für Covid-19 getestet und weiß nicht, was als nächstes passieren wird.

00:46:38.360 --> 00:46:41.760
 Bitte kontaktieren Sie mich unter...

00:46:41.760 --> 00:46:46.060
 Lieber Geliebter, ich höre mich sehr, meine Geschichte mit Ihnen zu teilen.

00:46:46.060 --> 00:47:00.380
 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.

00:47:00.760 --> 00:47:07.740
 Da habe ich eins, spende einen Teil meiner Jackpots und Menschen auf der ganzen Welt und verloren immer meine Träume wahr werden lassen.

00:47:07.740 --> 00:47:12.620
 Lebensveränderndes Geld für Familie, Freunde und Menschen in Not, Auswirkungen.

00:47:12.620 --> 00:47:18.960
 Einiges davon, auch sein Zweck, eines stellen Sie Corvette von 1963 wieder her.

00:47:18.960 --> 00:47:24.980
 Ich wurde positiv für Covid-19 getestet und weiß nicht, wurde auch als angemessen geändert wird.

00:47:24.980 --> 00:47:27.760
 Bitte kontaktieren Sie mich unter...

00:47:29.180 --> 00:47:32.820
 Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.

00:47:32.820 --> 00:47:41.280
 Weißt du eigentlich, wie schwer es ist, so einen Text, der völlig unzusammenhängend ist, abzulesen?

00:47:41.280 --> 00:47:44.220
 Ich habe, glaube ich, 50 Takes gebraucht für den Spam-Spot.

00:47:44.220 --> 00:47:47.160
 Du bist der Profisprecher, echt, das ist unglaublich.

00:47:47.160 --> 00:47:50.400
 Ja, die Spam-Mail ist unglaublich.

00:47:50.840 --> 00:47:55.220
 Also kurz mal wieder die obligatorische Erklärung für alle Neuhörerinnen.

00:47:55.220 --> 00:48:05.980
 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.

00:48:05.980 --> 00:48:12.900
 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.

00:48:14.240 --> 00:48:18.000
 War auch nicht sinnvoller, die zweite Übersetzung, im Gegenteil, aber ja.

00:48:18.000 --> 00:48:21.700
 Ich erinnere mich nicht mehr an die, war das eine von dir?

00:48:21.700 --> 00:48:23.700
 Ich bin mir nicht mehr sicher, ich weiß nicht.

00:48:23.700 --> 00:48:25.200
 Ich weiß es nicht, genau.

00:48:25.200 --> 00:48:33.540
 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.

00:48:33.540 --> 00:48:35.420
 Mich hat es fertig gemacht, wirklich.

00:48:35.880 --> 00:48:39.100
 An der Stelle danke an Commander, der diesen Spam-Spot gespendet hat.

00:48:39.100 --> 00:48:41.740
 Genau, dem haben wir den Spam-Spot zu verdanken.

00:48:41.740 --> 00:48:52.000
 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.

00:48:52.540 --> 00:49:01.000
 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.

00:49:01.000 --> 00:49:07.280
 Auf joshwoodward.com ist einfach ein Musiker, der kostenlos seine Musik da zur Verfügung stellt.

00:49:07.640 --> 00:49:12.440
 Und es ist gar nicht so einfach, so Produktionsmusik zu finden, die nicht nur kostenlos, sondern auch gut ist.

00:49:12.440 --> 00:49:19.080
 Also oft hat man dann halt irgendwie so, es ist im Endeffekt einfach nur MIDI, was dann durch eine Aufnahmesoftware gejagt wurde.

00:49:19.080 --> 00:49:20.460
 Und das klingt entsprechend so.

00:49:20.460 --> 00:49:23.060
 Und das ist halt einfach, das ist halt echte Musik.

00:49:23.060 --> 00:49:25.780
 Und der hat hunderte, hunderte Tracks.

00:49:25.780 --> 00:49:27.160
 Hast du den Leuten verraten, dass wir die Musik nicht selbst komponieren?

00:49:27.160 --> 00:49:31.660
 Doch, klar, ich sitze da und klampfe, während ich spreche im Hintergrund.

00:49:31.660 --> 00:49:35.200
 Ja, das ist nicht mal, das ist alles live.

00:49:36.620 --> 00:49:40.920
 Achso, jetzt habe ich das auch noch verraten, dass wir das nicht live einsprechen, verdammt.

00:49:40.920 --> 00:49:42.500
 Nee, ist natürlich nicht so.

00:49:42.500 --> 00:49:45.520
 Genau, also lohnt es sich da einfach mal reinzuhören.

00:49:45.520 --> 00:49:49.100
 Der bietet die Musik sogar mit Text und als Instrumental an.

00:49:49.100 --> 00:49:51.680
 Und das Ganze, wie gesagt, Creative Commons.

00:49:51.680 --> 00:49:55.100
 Wenn wir mal mit WWS TV auf der Bühne sind, dann müssen wir so einen Spam-Spot aber live vertonen.

00:49:55.100 --> 00:49:56.760
 Das können wir dann gerne machen, ja.

00:49:56.760 --> 00:50:03.340
 Oh, du planst schon unsere Twitch-Karriere explosionsartig und dann mit live Auftritten.

00:50:03.340 --> 00:50:05.040
 Ja, natürlich live Auftritten.

00:50:05.040 --> 00:50:05.420
 Schauen wir mal.

00:50:05.600 --> 00:50:09.600
 Klar, man muss ja, also andere Podcasts machen das auch.

00:50:09.600 --> 00:50:10.360
 Warum sollen wir das?

00:50:11.640 --> 00:50:14.840
 Hast du eigentlich auch eine Corvette von 1963, die du aufmöbelst?

00:50:14.840 --> 00:50:16.900
 Nee, nee, von 1962.

00:50:16.900 --> 00:50:22.520
 Das Verrückte daran ist, dass das so spezifisch ist und so zusammenhangslos.

00:50:25.520 --> 00:50:25.900
 Ja.

00:50:25.900 --> 00:50:29.420
 Ich weiß nicht mal mehr, was ich da jetzt eigentlich genau kaufe.

00:50:29.420 --> 00:50:33.500
 Also, das war so ein typisches Fishing-Ding, dass ich da irgendwie Millionen gespendet bekomme.

00:50:33.500 --> 00:50:36.340
 Ich muss wahrscheinlich nur irgendwelche Transaktionsgebühren vorschießen oder so.

00:50:36.340 --> 00:50:38.100
 Darauf basiert das wahrscheinlich.

00:50:38.340 --> 00:50:46.900
 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.

00:50:46.900 --> 00:50:47.160
 Danke.

00:50:50.920 --> 00:50:56.180
 Okay, ja gut, also es hat mich hier in WWF-IV mit dem Tagesthema.

00:50:56.180 --> 00:51:05.020
 Ich habe einen nervösen Finger, ich wollte eigentlich nur schon mal in die Richtung gehen.

00:51:05.020 --> 00:51:10.600
 Ist schon okay, bevor wir zu lange labern, äh, guck mal, wir haben auch erst 58 Minuten ohne Thema.

00:51:10.600 --> 00:51:18.140
 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.

00:51:18.140 --> 00:51:24.180
 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.

00:51:24.180 --> 00:51:29.820
 Aber sorry, das ist nicht abgebrochen, falls du noch was zum Spam-Spot hast, ansonsten habe ich hier einen zu schnellen Triggerfinger.

00:51:29.820 --> 00:51:35.340
 Nein, nein, nein, nein, ich habe nichts mehr zum Spam-Spot, ich wollte, ich wollte gar nichts mehr sagen.

00:51:35.340 --> 00:51:48.080
 Ä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

00:51:48.080 --> 00:51:59.800
 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,

00:51:59.800 --> 00:52:13.220
 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.

00:52:13.220 --> 00:52:23.280
 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?

00:52:23.280 --> 00:52:23.500
 Okay.

00:52:23.500 --> 00:52:35.400
 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.

00:52:35.400 --> 00:52:37.160
 PHP-generiertes Iconsprite?

00:52:37.160 --> 00:52:45.380
 Du weißt, du, dieses Projekt hat dich auch tangiert, miau, äh, sag ich nur, äh, ach so, echt, war das PHP-generiert?

00:52:45.380 --> 00:52:45.760
 Mhm.

00:52:45.760 --> 00:52:57.160
 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.

00:52:57.160 --> 00:53:05.960
 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.

00:53:05.960 --> 00:53:09.660
 Ich hätte jetzt eine andere, also ich, das, was ich als, als State of the Art kenne.

00:53:09.660 --> 00:53:13.880
 Aber zumindest, dass es dynamisch generiert ist, also dass da nicht jemand rumschubsen muss, das meinte ich jetzt halt.

00:53:13.880 --> 00:53:18.940
 Okay, ja, genau, also eigentlich ist es clever, so jetzt am Anfang schon mal anteasern und jetzt aber dann nix sagen.

00:53:18.940 --> 00:53:23.300
 Genau, ich wollte einfach mal sagen, so, was, was ist mein Standpunkt und, äh, ja, erleuchte mich.

00:53:25.840 --> 00:53:32.680
 Jetzt geht's, scroll ich's in meine Geheimnotizen. Ähm, genau, so, wo fangen wir denn an?

00:53:32.680 --> 00:53:43.940
 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.

00:53:43.940 --> 00:53:45.660
 Die wurden aber dann noch in Stein gemeißelt, oder?

00:53:45.660 --> 00:53:55.700
 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.

00:53:55.840 --> 00:54:10.960
 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.

00:54:11.180 --> 00:54:32.880
 Ä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.

00:54:33.180 --> 00:54:46.540
 Ä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,

00:54:47.040 --> 00:55:06.800
 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.

00:55:07.000 --> 00:55:15.760
 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.

00:55:15.760 --> 00:55:23.320
 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.

00:55:23.340 --> 00:55:29.400
 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.

00:55:29.400 --> 00:55:39.960
 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.

00:55:39.960 --> 00:55:50.420
 Ä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.

00:55:50.420 --> 00:56:02.140
 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.

00:56:02.140 --> 00:56:17.660
 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.

00:56:17.660 --> 00:56:25.580
 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.

00:56:25.580 --> 00:56:27.640
 Also BBSI-Kurfen zum Beispiel.

00:56:27.640 --> 00:56:40.180
 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.

00:56:40.180 --> 00:56:48.940
 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.

00:56:48.940 --> 00:56:50.380
 Oder bei unserer letzten Folge.

00:56:50.380 --> 00:56:53.580
 Das braucht man zum Glück dafür normalerweise nicht.

00:56:53.580 --> 00:56:56.580
 Dafür gibt's eigentlich ganz nette Tools, wenn man Vektor-Grafiken erstellen will.

00:56:56.580 --> 00:56:59.980
 Man muss jetzt nicht, äh, Vektor-Berechnung in der Schule gut aufgepasst haben dafür.

00:57:00.060 --> 00:57:02.580
 Das kann man auch irgendwie so, also einfach mal ein paar Formen zeichnen.

00:57:02.580 --> 00:57:12.840
 Ä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.

00:57:12.840 --> 00:57:16.600
 Weil das ist irgendwie, finde ich schon, schon wichtig, dass, dass man das so als, als Grundlage hat.

00:57:16.600 --> 00:57:29.400
 Ä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,

00:57:29.400 --> 00:57:36.800
 aber eigentlich, ich, ich, ich, so eine logische Antwort drauf hab, ist, Rechenaufwand, ähm, Raster-Grafik versus Vektor-Grafik.

00:57:36.800 --> 00:57:39.400
 Also, hast du da mal irgendwas?

00:57:39.400 --> 00:57:42.400
 Och, nee, keine Ahnung, äh, ob das jetzt...

00:57:42.400 --> 00:57:45.840
 Also, ich hab mir halt gedacht, und vielleicht muss man, vielleicht muss ich mal irgendwie ein Test-Case bauen.

00:57:45.840 --> 00:57:58.740
 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

00:57:58.740 --> 00:58:03.580
 wieder muss ja, anstatt das einfach als Raster da irgendwo hin zu plotten, muss er das ja vorher in einen Raster umwandeln.

00:58:03.580 --> 00:58:05.140
 Deswegen würde ich sagen, wahrscheinlich...

00:58:05.140 --> 00:58:05.360
 Bei einer Vektor-Grafik.

00:58:05.360 --> 00:58:06.420
 Bei einer Vektor-Grafik, genau.

00:58:06.420 --> 00:58:13.180
 Also, ist wahrscheinlich der Aufwand, äh, wahrscheinlich ist es verschwindend gering, aber dürfte höher liegen, als einfach eine Pixel-Grafik darzustellen.

00:58:13.180 --> 00:58:21.120
 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?

00:58:21.120 --> 00:58:26.160
 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.

00:58:26.300 --> 00:58:30.100
 Genau, weil am Ende kommen ja wieder, kommt ja wieder ein Raster raus, sozusagen, ne?

00:58:30.100 --> 00:58:41.140
 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.

00:58:41.640 --> 00:58:55.720
 Ä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.

00:58:55.720 --> 00:59:02.400
 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.

00:59:02.400 --> 00:59:04.040
 Nein, nein, jetzt nicht nochmal.

00:59:04.040 --> 00:59:05.120
 Nein, nein, okay.

00:59:05.120 --> 00:59:11.200
 Also, fangen wir ganz einfach an, in der Zeit, als ich angefangen habe, irgendwie Webseiten zu bauen,

00:59:11.620 --> 00:59:37.520
 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.

00:59:37.520 --> 00:59:51.520
 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.

00:59:51.520 --> 00:59:52.680
 Kling, Kling, Kling, äh.

00:59:52.680 --> 01:00:07.720
 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.

01:00:07.720 --> 01:00:08.960
 Ähm, immerhin.

01:00:09.760 --> 01:00:17.360
 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.

01:00:17.360 --> 01:00:23.980
 Ähm, ist ja jetzt erstmal kein Problem, kann man so machen. Warum auch nicht, ne? Oder? Spricht irgendwas dagegen?

01:00:23.980 --> 01:00:30.940
 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.

01:00:30.940 --> 01:00:37.440
 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.

01:00:37.440 --> 01:00:54.500
 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.

01:00:54.500 --> 01:01:00.780
 Und dann konnte man Hintergrundbilder angeben, aber irgendwie, also ansonsten hast du halt einfach eine Grafik eingebunden, ja.

01:01:01.760 --> 01:01:19.020
 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.

01:01:19.380 --> 01:01:26.680
 Ja, hier auch wieder Cross-Reference auf unsere Folge, acht magische Entwickler-Momente, wo wir genau sowas besprechen.

01:01:27.680 --> 01:01:32.140
 Ähm, und zwar, äh, das, das Stichwort, was jetzt als nächstes kommt, heißt Sprites.

01:01:32.140 --> 01:01:42.500
 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.

01:01:42.500 --> 01:02:04.240
 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.

01:02:04.240 --> 01:02:06.920
 Also man sieht immer nur einen Ausschnitt von der Gesamt-Grafik.

01:02:07.700 --> 01:02:19.180
 Ä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.

01:02:19.180 --> 01:02:20.480
 Das war irgendwie so der Klassiker.

01:02:20.480 --> 01:02:23.160
 Das ist dann schon wieder Sliding-Doors eigentlich auch, ne?

01:02:23.160 --> 01:02:32.060
 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.

01:02:32.060 --> 01:02:34.700
 Nee, hatten wir auch letzte Folge, wer letzte Folge gehört hat, weiß Bescheid.

01:02:34.700 --> 01:02:37.180
 Die Obras, die Obras erzählen wieder vom Krieg.

01:02:37.200 --> 01:02:47.580
 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.

01:02:47.580 --> 01:02:48.500
 Ach doch.

01:02:48.500 --> 01:02:58.440
 Ä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.

01:02:58.440 --> 01:03:04.260
 Ähm, hier steht First Publication 2007, also der Artikel ist von 2007, ist noch ein bisschen älter.

01:03:04.260 --> 01:03:22.980
 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.

01:03:23.060 --> 01:03:36.600
 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.

01:03:36.600 --> 01:03:46.560
 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.

01:03:47.180 --> 01:03:48.460
 Also das ist einfach performanter.

01:03:48.460 --> 01:04:01.640
 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.

01:04:01.640 --> 01:04:17.160
 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.

01:04:17.160 --> 01:04:36.980
 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.

01:04:36.980 --> 01:04:50.580
 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.

01:04:51.460 --> 01:05:01.680
 Ä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.

01:05:01.960 --> 01:05:30.120
 Ä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.

01:05:30.120 --> 01:05:59.720
 Ä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,

01:05:59.720 --> 01:06:21.340
 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.

01:06:21.400 --> 01:06:44.200
 Ä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.

01:06:44.200 --> 01:07:00.700
 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.

01:07:01.700 --> 01:07:31.680
 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.

01:07:31.700 --> 01:08:01.560
 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

01:08:01.560 --> 01:08:13.600
 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

01:08:13.600 --> 01:08:28.040
 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.

01:08:30.220 --> 01:08:35.860
 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.

01:08:35.860 --> 01:08:40.120
 Ähm, hab grad schon eine Editiermarke gesetzt, aber gut, jetzt lassen wir's drin.

01:08:40.120 --> 01:08:40.680
 Hast du?

01:08:42.300 --> 01:08:44.240
 Nein, nein, nein, das, das soll die Software machen.

01:08:44.240 --> 01:08:44.560
 Okay.

01:08:44.560 --> 01:08:46.680
 Das soll's nicht du machen, das soll die Software machen.

01:08:46.680 --> 01:09:03.760
 Ä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?

01:09:03.760 --> 01:09:22.600
 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?

01:09:23.240 --> 01:09:24.040
 Ja, richtig.

01:09:24.040 --> 01:09:25.000
 Genau.

01:09:25.000 --> 01:09:40.140
 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?

01:09:40.760 --> 01:09:59.360
 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.

01:10:00.040 --> 01:10:09.620
 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.

01:10:09.620 --> 01:10:15.960
 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.

01:10:15.960 --> 01:10:29.920
 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.

01:10:30.040 --> 01:10:39.960
 Ä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?

01:10:39.960 --> 01:10:50.520
 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.

01:10:50.520 --> 01:10:59.980
 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,

01:11:00.040 --> 01:11:10.560
 ä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.

01:11:11.140 --> 01:11:34.900
 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.

01:11:35.140 --> 01:11:49.540
 Ä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.

01:11:49.540 --> 01:11:57.200
 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.

01:11:57.200 --> 01:12:02.700
 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?

01:12:02.700 --> 01:12:08.720
 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.

01:12:08.720 --> 01:12:10.460
 Hast du, hast du heimlich meine Notizen gelesen?

01:12:10.460 --> 01:12:14.740
 Nein, nein, nein, aber ich will dir jetzt auch gar nichts wegnehmen, ich wollte nur meine, meine 50 Cent da.

01:12:14.740 --> 01:12:15.720
 Ich find's wunderbar.

01:12:15.720 --> 01:12:16.220
 Okay.

01:12:16.220 --> 01:12:40.340
 Ä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.

01:12:40.340 --> 01:13:09.960
 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.

01:13:10.220 --> 01:13:25.940
 Ä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.

01:13:26.500 --> 01:13:41.500
 Ä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.

01:13:43.120 --> 01:13:44.740
 So, hast du noch was zu Icon Fonts?

01:13:44.740 --> 01:13:45.520
 Nee, nee.

01:13:45.520 --> 01:13:53.740
 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.

01:13:53.740 --> 01:14:03.580
 Ä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.

01:14:03.580 --> 01:14:31.280
 Ä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.

01:14:31.280 --> 01:14:40.040
 Ä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.

01:14:40.040 --> 01:14:53.420
 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.

01:14:53.420 --> 01:14:58.140
 Also einfach nur ein anderer, äh, XML-Namespace, der dann da aufgemacht wird.

01:14:58.140 --> 01:14:59.660
 Ähm.

01:15:01.040 --> 01:15:15.800
 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.

01:15:16.360 --> 01:15:38.300
 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.

01:15:38.300 --> 01:15:49.280
 Ä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.

01:15:49.700 --> 01:15:58.620
 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.

01:15:58.620 --> 01:16:15.120
 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,

01:16:15.520 --> 01:16:24.060
 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.

01:16:24.060 --> 01:16:39.340
 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.

01:16:39.560 --> 01:16:50.160
 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,

01:16:50.600 --> 01:16:56.060
 das mit den, äh, mit den verfügbaren Pixeln so dahin zeichnen, wie er es braucht und dann ist es eben gestochen scharf.

01:16:56.060 --> 01:17:02.040
 Ähm, ähm, weitere Vorteile ist, SVGs können, äh, mit CSS gestylt werden.

01:17:02.040 --> 01:17:05.640
 Ähm, man kann da ziemlich viel, äh, verrückte Sachen machen.

01:17:05.640 --> 01:17:07.620
 Ich meine, es ist einfach, das ist wahrscheinlich irgendwie so die Farbe.

01:17:07.620 --> 01:17:10.480
 Man kann sie aber auch einfach in der Größe, äh, verändern.

01:17:10.680 --> 01:17:18.480
 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.

01:17:18.480 --> 01:17:27.460
 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.

01:17:27.460 --> 01:17:31.640
 Äh, ganz einfach nur, indem ich ein CSS sage, so, bei Hover hast du halt jetzt eine andere Farbe, fertig.

01:17:31.640 --> 01:17:39.260
 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.

01:17:39.680 --> 01:17:54.360
 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.

01:17:54.360 --> 01:17:56.280
 Weißt du ungefähr, wie ich es meine?

01:17:56.280 --> 01:18:04.620
 Ä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?

01:18:04.620 --> 01:18:09.600
 Ähm, naja, stell dir vor, ähm, ich weiß jetzt zum Beispiel, dass der Hintergrund meiner Seite,

01:18:09.680 --> 01:18:10.340
 immer weiß ist.

01:18:10.340 --> 01:18:12.640
 Okay, wenn du das weißt und dann entsprechend, ja, okay.

01:18:12.640 --> 01:18:25.040
 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ß.

01:18:25.360 --> 01:18:35.980
 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.

01:18:35.980 --> 01:18:44.040
 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.

01:18:44.440 --> 01:18:49.280
 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.

01:18:49.280 --> 01:18:51.180
 Wird sich nie ändern, ist immer gut.

01:18:51.180 --> 01:19:00.080
 Ja gut, ich meine, ähm, im Zweifel muss man dann halt in den sauren Apfel beißen und diese ganzen Grafiken halt nochmal umziehen.

01:19:00.180 --> 01:19:11.640
 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.

01:19:11.640 --> 01:19:14.000
 Mittlerweile jetzt mit SVG ist ja alles cool.

01:19:14.000 --> 01:19:17.280
 So, jetzt kommen wir der Sache schon näher.

01:19:17.280 --> 01:19:23.880
 Also ich habe jetzt gesagt, man kann SVG irgendwie so einfach so in den Quellcode reinhauen, ähm, und dann ist das irgendwie schon fein.

01:19:23.880 --> 01:19:31.700
 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.

01:19:31.700 --> 01:19:37.820
 Ähm, wenn man jetzt noch einen Schritt weiter gehen will, dann macht man ein Sprite, ein SVG-Sprite.

01:19:37.820 --> 01:19:40.820
 Ähm, warum möchte man das machen?

01:19:40.820 --> 01:19:52.700
 Ä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,

01:19:52.700 --> 01:20:00.680
 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.

01:20:00.680 --> 01:20:08.360
 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.

01:20:08.360 --> 01:20:20.620
 Ähm, ähm, um solche SVG-Sprites zu erstellen, gibt es natürlich auch wieder Generatoren, äh, Generator-Skripte, kleine, äh, Command-Line-Skripte.

01:20:21.100 --> 01:20:25.380
 Ähm, das, was ich weiß, was bei uns im Einsatz ist, ist, ähm, SVG-Store.

01:20:25.380 --> 01:20:38.840
 Ä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.

01:20:39.080 --> 01:20:57.220
 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.

01:20:57.360 --> 01:21:00.140
 Und dann wird das genau angezogen an der Stelle. Punkt.

01:21:00.140 --> 01:21:05.340
 Also, es ist nicht, nicht, ist nicht so eine Art ID, sondern es ist wirklich ein ID-Attribut tatsächlich auf dem Element.

01:21:05.340 --> 01:21:06.800
 Genau, es ist das ID-Attribut.

01:21:06.920 --> 01:21:16.480
 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.

01:21:16.480 --> 01:21:36.820
 Ä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

01:21:36.820 --> 01:21:50.680
 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

01:21:50.680 --> 01:22:04.840
 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.

01:22:04.840 --> 01:22:06.500
 Ich glaube, diesen xlink-Namespace braucht man dann gar nicht mehr, ne?

01:22:06.720 --> 01:22:15.040
 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

01:22:15.040 --> 01:22:36.620
 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,

01:22:36.620 --> 01:23:06.600
 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

01:23:06.600 --> 01:23:30.600
 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

01:23:30.600 --> 01:23:42.700
 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

01:23:42.700 --> 01:23:50.780
 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

01:23:50.780 --> 01:23:55.020
 optisch was an dem SVG verändert oder nicht, das ganz praktisch damit mal rumzuspielen, kommt in die Show Notes.

01:23:55.020 --> 01:24:05.100
 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

01:24:05.100 --> 01:24:14.760
 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

01:24:14.760 --> 01:24:22.760
 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

01:24:22.760 --> 01:24:30.760
 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

01:24:30.760 --> 01:24:41.560
 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.

01:24:41.560 --> 01:24:43.520
 Das müssen wir, das müssen wir mal umstellen auf was Cooleres.

01:24:43.520 --> 01:24:48.640
 Naja, so wird's einmal mit der Seite geladen oben und wird einfach überall wiederverwendet.

01:24:48.640 --> 01:24:52.040
 Äh, ja, aber das geht noch cooler.

01:24:52.040 --> 01:25:07.900
 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,

01:25:07.900 --> 01:25:15.720
 also mit diesem Use und dann mit, mit der ID, ähm, wenn man das stylen möchte, dann ist man eingeschränkt. Ähm, warum?

01:25:16.220 --> 01:25:28.140
 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.

01:25:29.100 --> 01:25:38.020
 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,

01:25:38.020 --> 01:25:47.860
 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,

01:25:47.960 --> 01:25:51.680
 also die einzelnen Elemente, die da drin sind, ähm, ich kann nicht auf die zugreifen.

01:25:51.680 --> 01:26:02.260
 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,

01:26:02.260 --> 01:26:08.820
 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.

01:26:08.820 --> 01:26:24.900
 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.

01:26:24.900 --> 01:26:28.900
 Also, Fill, äh, ja, oder, ja, vielleicht.

01:26:28.900 --> 01:26:35.320
 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?

01:26:35.820 --> 01:26:45.620
 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?

01:26:45.620 --> 01:26:47.280
 Das ist eine gute Frage.

01:26:47.280 --> 01:26:50.580
 Das wäre nämlich mal interessant, weil das wäre ein schöner Ansatz.

01:26:50.580 --> 01:26:53.260
 Ich weiß es tatsächlich nicht.

01:26:53.260 --> 01:27:03.700
 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.

01:27:03.700 --> 01:27:09.540
 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.

01:27:09.540 --> 01:27:20.880
 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.

01:27:21.020 --> 01:27:40.500
 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.

01:27:40.740 --> 01:28:01.060
 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.

01:28:01.060 --> 01:28:31.040
 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,

01:28:31.060 --> 01:28:49.320
 ä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?

01:28:49.760 --> 01:29:12.400
 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.

01:29:12.400 --> 01:29:35.800
 Ä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.

01:29:36.140 --> 01:29:52.880
 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.

01:29:52.880 --> 01:30:07.900
 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.

01:30:08.420 --> 01:30:25.780
 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.

01:30:26.180 --> 01:30:36.360
 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.

01:30:36.360 --> 01:30:47.420
 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.

01:30:47.560 --> 01:31:08.760
 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.

01:31:09.600 --> 01:31:26.660
 Ä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.

01:31:26.660 --> 01:31:37.880
 Ä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.

01:31:37.880 --> 01:31:48.060
 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.

01:31:49.660 --> 01:32:05.420
 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.

01:32:05.420 --> 01:32:19.420
 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.

01:32:19.460 --> 01:32:30.000
 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.

01:32:30.000 --> 01:32:42.220
 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.

01:32:42.220 --> 01:32:47.260
 Äh, warte mal, ich muss jetzt gerade mal gucken, ob ich hier noch ein Beispiel habe. Ähm, Moment.

01:32:48.540 --> 01:32:50.320
 Wo war das noch gleich?

01:32:50.320 --> 01:32:52.760
 Ich mache vielleicht mal mit was anderes.

01:32:52.760 --> 01:32:59.580
 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.

01:32:59.580 --> 01:33:00.720
 Ist das richtig?

01:33:01.040 --> 01:33:03.600
 So, natürlich habe ich Can-I-Use dafür.

01:33:03.600 --> 01:33:07.220
 So, das, was heißt nicht überall unterstützt.

01:33:07.220 --> 01:33:19.640
 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.

01:33:20.440 --> 01:33:23.160
 Also, tatsächlich genau dieser Fall, den ich gerade beschrieben habe.

01:33:23.160 --> 01:33:32.660
 Ähm, und das geht, ähm, in Edge ab 13, aber warte mal, wir haben doch immer diese schöne Zahl, 93 Prozent, ähm, global.

01:33:33.580 --> 01:33:40.160
 Ähm, und die, in denen es nicht geht, sind alte Android-Browser, alte Safaris, irgendwie Version 6.

01:33:40.160 --> 01:33:46.360
 Ähm, Chrome kann's ab 22, Firefox kann's seit Version 4.

01:33:46.360 --> 01:33:53.640
 Und Edge ab 13, ähm, ist also relativ weit verbreitet, die IS können das alle nicht.

01:33:53.640 --> 01:34:11.220
 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.

01:34:11.220 --> 01:34:15.260
 Er sagt, hey, okay, du kannst es nicht, kein Problem, ich schreib's jetzt hier mal rein, dann kannst du davon rechnen.

01:34:15.260 --> 01:34:20.180
 Das heißt, er macht dann manuell einen Request und sucht sich dann die ID da raus und tauscht das aus.

01:34:20.180 --> 01:34:27.560
 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.

01:34:27.560 --> 01:34:30.400
 Das rate ich jetzt, das hab ich mir jetzt nicht genau angeguckt.

01:34:30.400 --> 01:34:41.200
 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,

01:34:41.200 --> 01:34:59.200
 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,

01:34:59.200 --> 01:35:09.400
 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,

01:35:09.400 --> 01:35:20.040
 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?

01:35:21.200 --> 01:35:25.880
 Ähm, genau, so, damit, äh, hast, hast du noch Fragen dazu?

01:35:25.880 --> 01:35:28.760
 Nee, nee, alles, alles gut erklärt.

01:35:30.820 --> 01:35:44.800
 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.

01:35:44.800 --> 01:35:47.280
 Social at, oh, auf unserer Homepage.

01:35:47.280 --> 01:35:50.480
 Jetzt musst du über dir, auf der Startseite steht es nämlich nicht.

01:35:50.480 --> 01:35:55.160
 Auf der Startseite, auf unserer Website steht das, irgendwo.

01:35:55.160 --> 01:35:57.940
 Also social at, wo wir sind, ist vorne.show.

01:35:57.940 --> 01:35:59.200
 Genau.

01:35:59.320 --> 01:36:03.720
 Verdammt, ich sag das echt oft, jetzt fällt mir das mal auf, das ist ja furchtbar.

01:36:03.720 --> 01:36:08.540
 Danke, danke, dass ich drauf hingewiesen wurde, das ist ja wirklich schrecklich.

01:36:08.540 --> 01:36:16.120
 Ä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.

01:36:16.120 --> 01:36:19.380
 Also sag noch ein paar Mal Homepage, dann darfst du noch ein paar Mal Bier trinken.

01:36:19.380 --> 01:36:19.880
 Genau.

01:36:19.880 --> 01:36:28.120
 Ä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.

01:36:28.120 --> 01:36:49.320
 Ä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.

01:36:49.400 --> 01:36:51.220
 Das wär ja ziemlich cool, wenn das gehen würde.

01:36:51.220 --> 01:36:59.920
 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.

01:37:00.060 --> 01:37:08.100
 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.

01:37:08.600 --> 01:37:38.280
 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.

01:37:38.280 --> 01:37:40.820
 Aber es gibt bestimmt einen Grund dafür, warum es nicht ist.

01:37:40.820 --> 01:37:52.380
 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.

01:37:52.380 --> 01:38:03.820
 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.

01:38:03.820 --> 01:38:16.800
 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.

01:38:16.860 --> 01:38:24.520
 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.

01:38:24.660 --> 01:38:30.220
 Vielleicht sind ja CSS-Variablen tatsächlich Lösungen. Das versuchen wir mal rauszubekommen. Das wäre cool.

01:38:30.220 --> 01:38:43.400
 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.

01:38:43.460 --> 01:39:12.580
 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.

01:39:13.460 --> 01:39:20.180
 Ah, ich find grad keine eindeutige Antwort. Ich glaub, man muss doch tatsächlich, müsste ich jetzt nochmal ein bisschen, äh, tiefer gucken.

01:39:20.180 --> 01:39:40.140
 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.

01:39:40.140 --> 01:39:43.880
 Aber das, da müssen wir echt mal ein Code bringen, vielleicht machen wir das nach der Sendung noch schnell.

01:39:43.880 --> 01:39:44.960
 Also schnell ein anderes Stück.

01:39:44.960 --> 01:39:58.960
 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.

01:39:59.960 --> 01:40:11.320
 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.

01:40:13.260 --> 01:40:23.540
 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?

01:40:23.540 --> 01:40:29.320
 Eine Stunde 40, und wir haben hier gesagt, äh, neuer, neuer Rekord nach dem letzten Rekord.

01:40:29.320 --> 01:40:30.160
 Mensch.

01:40:30.160 --> 01:40:34.880
 Ja, wir trinken jetzt einfach noch eine Menge Bier und dann, äh, und dann, äh, und dann labern wir einfach noch ein bisschen.

01:40:34.880 --> 01:40:58.960
 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.

01:40:58.960 --> 01:41:11.720
 Ä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.

01:41:11.720 --> 01:41:12.680
 Wenn er, wenn er möchte.

01:41:12.680 --> 01:41:13.600
 Wenn er möchte, wenn er.

01:41:13.600 --> 01:41:14.940
 Wir fragen uns vorher.

01:41:14.940 --> 01:41:16.320
 Äh, natürlich.

01:41:16.320 --> 01:41:28.940
 Ä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

01:41:28.940 --> 01:41:58.920
 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,

01:41:58.920 --> 01:42:12.920
 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.

01:42:12.920 --> 01:42:27.060
 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.

01:42:27.880 --> 01:42:42.920
 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.

01:42:43.400 --> 01:42:51.860
 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.

01:42:52.420 --> 01:43:11.500
 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.

01:43:12.160 --> 01:43:28.460
 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.

01:43:29.320 --> 01:43:51.800
 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.

01:43:52.740 --> 01:44:22.720
 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.

01:44:22.720 --> 01:44:34.540
 ä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.

01:44:34.540 --> 01:44:51.400
 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.

01:44:52.700 --> 01:45:10.040
 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.

01:45:10.700 --> 01:45:23.740
 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.

01:45:24.720 --> 01:45:28.720
 Ich weiß nicht genau, wie groß die Ungenauigkeit ist, äh, wenn man das länger laufen lässt, aber...

01:45:28.720 --> 01:45:43.720
 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.

01:45:43.720 --> 01:45:58.400
 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.

01:45:58.400 --> 01:46:13.600
 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

01:46:13.600 --> 01:46:25.120
 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.

01:46:25.120 --> 01:46:41.220
 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.

01:46:41.220 --> 01:46:41.920
 Millisekunden?

01:46:41.920 --> 01:46:43.160
 Äh, 300 Millisekunden, ja.

01:46:43.480 --> 01:46:45.720
 300 Sekunden machen auf jeden Fall was aus.

01:46:45.720 --> 01:46:56.560
 Ä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.

01:46:58.720 --> 01:47:03.880
 Ja, im Prinzip war dein Geilteil heute fast eine Property der Woche, aber du hast es nicht ganz erklärt.

01:47:03.880 --> 01:47:06.440
 Ja, das sind mehrere Properties, ja, aber, ja, ja.

01:47:07.720 --> 01:47:10.860
 Am Schluss steckt eben doch ein bisschen mehr dahinter als ein paar Properties.

01:47:10.860 --> 01:47:14.800
 Also, ja, weil ich hab, ich hab nämlich auch noch eins.

01:47:14.800 --> 01:47:15.560
 Ah, spontan.

01:47:15.560 --> 01:47:22.900
 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.

01:47:22.900 --> 01:47:27.800
 Und zwar, äh, historyoficons.com, das passt ganz gut zum Thema.

01:47:27.800 --> 01:47:49.800
 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.

01:47:49.800 --> 01:48:06.200
 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.

01:48:06.200 --> 01:48:19.300
 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.

01:48:19.300 --> 01:48:35.500
 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.

01:48:35.500 --> 01:48:49.060
 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.

01:48:49.060 --> 01:48:52.580
 Oder manchmal dann auch irgendwie noch zweifarbig. Genau.

01:48:52.580 --> 01:48:58.840
 Weil mehr als zwei Farben haben wir ja gelernt, ähm, haben wir ja nicht zur Verfügung, um ein Icon zu stylen.

01:48:59.200 --> 01:49:07.600
 Sehr schönes, spontanes, äh, Geilteil, dass unsere letzten beiden, also diese Folge und die letzte Folge so ein bisschen tangiert, sehr schön.

01:49:08.300 --> 01:49:14.860
 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.

01:49:14.860 --> 01:49:23.980
 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.

01:49:24.620 --> 01:49:26.900
 Ähm, da geht mein Herz auf, wenn ich sowas sehe.

01:49:26.900 --> 01:49:32.000
 Ja, und das ist doch ein schöner Abschluss, bevor wir zum Werbeblog kommen.

01:49:32.000 --> 01:49:33.380
 Ja, die Werbung hatten wir ja schon.

01:49:33.380 --> 01:49:35.440
 Ja, zu unserer Eigenwerbung.

01:49:35.440 --> 01:49:36.300
 Jetzt kommt die Werbung für uns.

01:49:36.300 --> 01:49:37.520
 Ja.

01:49:37.520 --> 01:49:41.140
 Wenn's, willst du, will ich?

01:49:41.140 --> 01:49:43.440
 Ja, äh, mach, mach ruhig.

01:49:43.440 --> 01:49:51.620
 Also, ich wäre schon direkt zum, zum, zum, äh, zur Obligationen Spendeneintreibung gekommen, zum Klingelbeutel, zum Digitalen.

01:49:51.620 --> 01:49:56.640
 Ähm, ja, wenn's euch ein bisschen gefallen hat, dann, äh, lasst uns doch gerne auch eine kleine Spende da.

01:49:56.640 --> 01:50:00.020
 Und wenn's euch noch ein bisschen mehr gefallen hat, dann gerne auch eine große.

01:50:00.020 --> 01:50:04.840
 Und zwar unter buymircoffee.com slash www.siv.

01:50:04.840 --> 01:50:09.720
 Da kann man uns ein virtuelles Bier oder auch zwei, drei, vier virtuelle Biere spenden.

01:50:09.720 --> 01:50:11.340
 Und das freut uns dann.

01:50:11.340 --> 01:50:12.900
 Und da werden dann echte Biere draus.

01:50:12.900 --> 01:50:13.320
 Richtig.

01:50:13.320 --> 01:50:17.100
 Also aktuell haben wir, ja, verwenden wir das dann für, für Bier.

01:50:18.240 --> 01:50:27.180
 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.

01:50:27.180 --> 01:50:33.360
 Und auch für unser Hosting und, äh, natürlich, äh, für dem Konstantin seinen kommenden Laptop.

01:50:33.360 --> 01:50:36.360
 Genau, wenn er dann doch mal das Zeit nicht gesegnet, ja.

01:50:36.840 --> 01:50:43.780
 Ja, gut, wir haben natürlich auch in Hardware hier investiert, in unsere Mikros, um eben eine bessere Audioqualität liefern zu können.

01:50:43.780 --> 01:50:48.500
 Ähm, ich glaube, da müssten noch einige Spenden reinkommen, bis wir allein die Hardware-Anschaffungen wieder drin haben.

01:50:48.500 --> 01:50:49.760
 Also, spendet.

01:50:49.760 --> 01:50:59.200
 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.

01:50:59.280 --> 01:51:02.500
 Und wenn ihr die auch kauft über unsere Affiliate-Links, dann kriegen wir auch so ein paar Cent.

01:51:02.500 --> 01:51:10.800
 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.

01:51:10.800 --> 01:51:12.720
 Du hast es mir gesagt, aber du hast es nicht in der Sendung gesagt.

01:51:12.720 --> 01:51:19.140
 Genau, es hat tatsächlich, äh, jemand, ähm, den, äh, diese Klett-Kabelbinder gekauft.

01:51:19.140 --> 01:51:22.020
 Es war aber im letzten Sommer schon.

01:51:22.020 --> 01:51:25.140
 Ich hab das jetzt erst gesehen, ich guck da nicht so oft rein.

01:51:25.140 --> 01:51:30.440
 Ich hab mir gedacht, naja, wenn wir jetzt Millionen reingekommen wären, dann hätte sich Amazon vielleicht schon gemeldet.

01:51:30.440 --> 01:51:32.320
 Wahrscheinlich nicht, weil die dieses Geld behalten wollen.

01:51:32.320 --> 01:51:40.940
 Ä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.

01:51:41.680 --> 01:51:48.560
 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.

01:51:48.560 --> 01:51:53.500
 Aber ihr dürft auch Kabelbinder kaufen oder Mikrofone oder was auch immer ihr bei uns lustiges...

01:51:53.500 --> 01:51:56.880
 Oder auf einen Reffling von uns klicken und euch danach dann einen Porsche überlassen bestellen.

01:51:56.880 --> 01:52:03.100
 Genau, ihr dürft auch, ihr dürft auch dem Konstantin, äh, seine, äh, Oliven schicken und...

01:52:03.100 --> 01:52:11.240
 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.

01:52:11.240 --> 01:52:14.500
 Ich glaube, wir müssen aufhören, das zu sagen, sonst macht's keiner.

01:52:14.500 --> 01:52:15.640
 Ja, stimmt, stimmt.

01:52:15.640 --> 01:52:21.200
 Haben wir auch im Feedback schon festgestellt, wenn wir zu viel drauf pochen, dann, dann sollten wir aber auch nichts mehr zu spenden sagen.

01:52:21.200 --> 01:52:25.540
 Wir haben nichts gesagt, vergesst die letzten drei Minuten und, äh, hört uns nächstes Mal wieder zu.

01:52:25.540 --> 01:52:27.140
 Genau.

01:52:27.720 --> 01:52:30.820
 Wenn es wieder heißt, probieren Sie es vorne.

01:52:30.820 --> 01:52:32.880
 Schade.

01:52:32.880 --> 01:52:33.680
 Und jetzt, Outro.

01:52:33.680 --> 01:52:38.400
 Und jetzt, und jetzt Outro, oder? Ja, macht's gut, schön, dass ihr wieder dabei wart.

01:52:38.400 --> 01:52:41.480
 Vielen Dank fürs Zuhören, bleibt uns gewogen, bis zum nächsten Mal.

01:52:41.480 --> 01:52:42.820
 Ciao.

01:52:42.820 --> 01:52:43.780
 Tschüss.

01:52:43.780 --> 01:52:44.780
 Musik.