WEBVTT NOTE Podcast: Wo wir sind ist vorne. Episode: Semantic HTMHELL Publishing Date: 2020-10-18T14:05:00+02:00 Podcast URL: https://wowirsindistvorne.show Episode URL: https://wowirsindistvorne.show/semantic-htmhell/ 00:00:00.000 --> 00:00:03.220 Wo wir sind, ist vorne, Folge 15, wir müssen reden. 00:00:03.220 --> 00:00:19.660 Herzlich willkommen bei Wo wir sind, ist vorne. 00:00:19.660 --> 00:00:22.440 Frontend-Fakten-Frotzeleien. 00:00:22.440 --> 00:00:26.460 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung. 00:00:29.400 --> 00:00:34.980 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann 00:00:34.980 --> 00:00:38.160 und JavaScript-Jungleur Konstantin Groß. 00:00:38.160 --> 00:00:57.580 Ja, hi. Normalerweise käme jetzt eine freundliche Begrüßung. 00:00:58.800 --> 00:01:01.220 Heute ist sie nicht freundlich, weil wir müssen reden. 00:01:01.220 --> 00:01:01.820 Oh, oh, oh. 00:01:01.820 --> 00:01:05.460 Das verspricht nichts Gutes. 00:01:05.460 --> 00:01:08.580 Was da jetzt los ist, das kommt dann gleich beim Thema, 00:01:08.580 --> 00:01:10.020 aber ich bin ein bisschen aufgepeitscht. 00:01:10.020 --> 00:01:13.040 Und ich finde, es muss auch nicht alles immer nur nett und freundlich sein. 00:01:13.040 --> 00:01:17.840 Vielleicht ist Rage ja auch gut für Klicks hier bei Podcasts. 00:01:17.840 --> 00:01:19.420 Heute gibt es mal ein bisschen Rage. 00:01:20.280 --> 00:01:24.280 Und hoffentlich noch kein Rage-Quit, weil sonst ist der Podcast halt vorbei. 00:01:24.280 --> 00:01:25.980 Dann müsst ihr mir alleine zuhören. 00:01:25.980 --> 00:01:28.200 Wir sind heute sowieso nur noch zu zweit. 00:01:28.200 --> 00:01:30.660 Letztes Mal waren wir ja ausnahmsweise mal zu dritt. 00:01:30.660 --> 00:01:33.020 Muss ich sagen, hat Spaß gemacht. 00:01:33.020 --> 00:01:34.640 Machen wir mit Sicherheit auch mal wieder demnächst, 00:01:34.640 --> 00:01:37.780 wenn wir einen geeigneten Gast finden. 00:01:39.000 --> 00:01:41.880 Ja, dann, warte mal jetzt. 00:01:41.880 --> 00:01:42.420 Hä? 00:01:42.420 --> 00:01:43.720 Unsere Reihenfolge. 00:01:43.720 --> 00:01:44.740 Ich blick's gerade nicht mehr. 00:01:44.740 --> 00:01:45.340 So, egal. 00:01:45.340 --> 00:01:46.940 Bier. 00:01:46.940 --> 00:01:48.940 Bier. 00:01:50.680 --> 00:01:54.820 Ja, ihr merkt schon, ihr merkt schon, es ist was, es liegt was im Argen. 00:01:54.820 --> 00:01:57.220 Jetzt fangen wir einfach mal an mit Bier, 00:01:57.220 --> 00:01:59.520 weil das Bier macht mir vielleicht ein bisschen bessere Laune. 00:01:59.520 --> 00:02:05.320 Ja, ich hab heute einen, ich will die Marke mal nicht nennen, 00:02:05.320 --> 00:02:07.080 aber ich hab einen Himbeerradler. 00:02:07.080 --> 00:02:07.620 Aha. 00:02:07.620 --> 00:02:08.240 Also ihr merkt schon. 00:02:08.240 --> 00:02:09.800 Zeig mal, zeig mal in die Kamera. 00:02:09.800 --> 00:02:11.380 Alles, äh, huch. 00:02:11.380 --> 00:02:12.980 In der Dose. 00:02:12.980 --> 00:02:14.960 Alles ist ein bisschen komisch heute. 00:02:14.960 --> 00:02:15.300 Aber sieht gut aus. 00:02:15.300 --> 00:02:18.360 Und heute gibt's Himbeerradler zur Feier des Tages. 00:02:18.360 --> 00:02:21.680 Neben meinem Energydrink Kokosblaubier. 00:02:21.680 --> 00:02:25.140 Ja, den muss ich mir auch mal holen, den musst du mir auch mal zeigen. 00:02:25.140 --> 00:02:29.460 Ja, ich hab auch was Koffeinhaltiges, einen Clubmate-Eistee 00:02:29.460 --> 00:02:33.600 und ein Craft-Bier, das ich im Supermarkt entdeckt habe. 00:02:33.600 --> 00:02:37.000 Das hat hier auch so, ich muss das erstmal hier, siehst du das? 00:02:37.000 --> 00:02:40.920 Eine Par-Bier-Verpackung außenrum. 00:02:40.920 --> 00:02:43.300 Ja, ich wollte gerade sagen, was ist das denn nicht? 00:02:43.300 --> 00:02:45.820 Das ist tatsächlich mit so Papier eingewickelt. 00:02:45.820 --> 00:02:47.540 Kannst du das noch mal, kannst du ein bisschen weiter halten? 00:02:48.220 --> 00:02:49.720 Also gut, ihr könnt das jetzt auch alles sehen. 00:02:49.720 --> 00:02:52.860 Das nennt sich, wir müssen doch noch anfangen zu streamen mit Video. 00:02:52.860 --> 00:02:53.540 Ja, wir müssen noch anfangen zu streamen. 00:02:53.540 --> 00:02:56.120 Also wir haben, es ist ein Baltic Double. 00:02:56.120 --> 00:03:00.440 Und ich bin sehr gespannt, also es steht drauf, seltenes Bier. 00:03:00.440 --> 00:03:02.680 Inselbrauerei. 00:03:02.680 --> 00:03:06.160 Four Times World's Best Beer. 00:03:06.160 --> 00:03:08.580 In den London World Beer Awards. 00:03:08.580 --> 00:03:11.080 Also ich bin gespannt, was das ist. 00:03:11.080 --> 00:03:14.020 Na dann, also komm dann, ich mach mal hier. 00:03:16.600 --> 00:03:18.340 Ganz facile in der Dose. 00:03:18.340 --> 00:03:19.800 Ja, natürlich. 00:03:19.800 --> 00:03:21.020 Ja dann, zum Wohl. 00:03:21.020 --> 00:03:22.220 Zum Wohl. 00:03:22.220 --> 00:03:23.200 Dann müssen wir auch mal erstmal hier. 00:03:23.200 --> 00:03:25.880 Hm. 00:03:25.880 --> 00:03:26.780 Also geschmert. 00:03:26.780 --> 00:03:26.900 Ja. 00:03:26.900 --> 00:03:32.560 Übrigens, ich glaube, wir müssen ein bisschen, wir müssen ein bisschen mehr essen und trinken 00:03:32.560 --> 00:03:33.280 während dem Podcast. 00:03:33.740 --> 00:03:35.060 Schmatzen und Kauen. 00:03:35.060 --> 00:03:39.320 Es hat sich noch nie jemand drüber beschwert, dass wir irgendwie zu viel essen, trinken, schmatzen 00:03:39.320 --> 00:03:43.180 oder kauen oder irgendwie komische, eklige Geräusche machen. 00:03:43.180 --> 00:03:48.120 Ich weiß, dass es Leute gibt, die da richtige Phobien davor haben und richtig durchdrehen. 00:03:48.240 --> 00:03:51.720 Ja, ich, hier, Kau-Kau-Geräusche. 00:03:51.720 --> 00:03:53.300 Ganz, oh, ganz schlimm. 00:03:53.300 --> 00:03:58.180 Also auch bei Fernsehsendungen, wenn da jemand kaut und isst oder in Serien oder Filmen. 00:03:58.180 --> 00:03:59.160 Puh. 00:03:59.160 --> 00:04:02.960 Na da ist ja gut, dass sie bei Big Bang Theory immer nur so tun, als würden sie essen. 00:04:02.960 --> 00:04:03.940 Da musst du mal drauf achten. 00:04:04.300 --> 00:04:05.260 Das ist so witzig. 00:04:05.260 --> 00:04:10.740 Die haben, die haben wirklich das dumm gucken und währenddessen im Essen rumstochern, aber 00:04:10.740 --> 00:04:12.500 nix essen, das haben die perfektioniert. 00:04:12.500 --> 00:04:13.180 Das ist so gut. 00:04:13.180 --> 00:04:18.560 Also das kann ich jedem nur empfehlen, der gern essen riecht, aber nix davon essen will. 00:04:18.560 --> 00:04:20.080 Guckt euch das mal an und macht mal nach. 00:04:20.080 --> 00:04:20.720 Wisst ihr, wie es geht? 00:04:20.720 --> 00:04:22.960 Also das ist übrigens ein dunkles Bier, merke ich jetzt gerade. 00:04:22.960 --> 00:04:25.700 Also das war mir voll, ich wusste nicht, was ein Double ist oder Double ist. 00:04:25.700 --> 00:04:31.200 Das ist wohl eine belgische Bierart und das ist ein dunkles Bier. 00:04:31.200 --> 00:04:32.340 Mag ich auch manchmal sehr gerne. 00:04:32.340 --> 00:04:34.080 Ich glaube, meins ist auch dunkler, also wenn ich in die Dose reingucke. 00:04:34.300 --> 00:04:35.620 Da ist auch dunkel drin. 00:04:35.620 --> 00:04:36.240 Okay. 00:04:36.240 --> 00:04:41.020 Ja, gut, dann legen wir los. 00:04:41.020 --> 00:04:42.200 Ja. 00:04:42.200 --> 00:04:50.100 BW SIV präsentiert die Retrospektive. 00:04:50.100 --> 00:04:55.800 Ja, jetzt wäre es vielleicht auch an der Zeit für die Hörerinnen und Hörer, sich auch 00:04:55.800 --> 00:04:57.480 was zu trinken, zu holen oder was zu essen. 00:04:57.480 --> 00:04:59.500 Die Retro fällt heute etwas länger aus. 00:04:59.500 --> 00:05:00.560 Oh nein. 00:05:00.560 --> 00:05:01.320 Oh nein. 00:05:01.320 --> 00:05:03.940 Ach, Moritz legt sich jetzt eine Runde hin. 00:05:04.300 --> 00:05:08.860 Nee, aber es sind ja immerhin drei Wochen und ich habe tatsächlich sehr viel zu arbeiten 00:05:08.860 --> 00:05:12.900 gehabt in den letzten drei Wochen, was unter anderem der Grund ist, warum wir jetzt auch 00:05:12.900 --> 00:05:14.340 eine Woche später als gewohnt sind. 00:05:15.600 --> 00:05:19.240 Wenn ihr das verhindern wollt, dann müsst ihr Geld in die Spendenkasse werfen. 00:05:19.240 --> 00:05:20.520 Damit wir nicht mehr arbeiten müssen. 00:05:23.340 --> 00:05:33.480 Und ich starte aber erstmal mit einem Follow-up zu dem Color-Font, liebe Heide, über den wir es in unserem letzten Font-Spezial hatten. 00:05:33.480 --> 00:05:33.920 Ich zitiere Gerrit. 00:05:33.920 --> 00:05:34.100 Ich zitiere Gerrit. 00:05:34.100 --> 00:05:34.960 Falls ihr das noch nicht gehört habt. 00:05:34.960 --> 00:05:35.220 Oh. 00:05:35.220 --> 00:05:37.100 Hm. 00:05:37.100 --> 00:05:40.420 Das war Gerrits Reaktion auf den Font. 00:05:40.420 --> 00:05:40.940 Ach ja, genau. 00:05:40.940 --> 00:05:45.860 Also unbedingt anhören, die letzte Folge wäre wirklich lohnenswert. 00:05:45.860 --> 00:05:50.120 Nicht zu viel Spoilen, aber wer Gerrit mal erregt hören will. 00:05:50.120 --> 00:05:51.120 Nein, das ist jetzt übertrieben. 00:05:51.120 --> 00:05:51.880 Entschuldigung, Gerrit. 00:05:52.840 --> 00:05:53.520 Ja, genau. 00:05:53.520 --> 00:05:54.740 Also Color-Font. 00:05:54.740 --> 00:05:59.600 Und ich habe mir den dann mal im Nachgang erst so ein bisschen genauer angeschaut und gesehen, 00:05:59.600 --> 00:06:01.060 das ist ein Bitmap-Font. 00:06:01.060 --> 00:06:03.600 Ich glaube, der Gerrit hat das auch in der Sendung erwähnt. 00:06:03.600 --> 00:06:09.000 Und das heißt, erstens ist der nicht unendlich skalierbar, weil eben Bitmap und kein Vektor-Font. 00:06:09.000 --> 00:06:11.180 Und außerdem ist die Farbe nicht änderbar. 00:06:11.180 --> 00:06:15.600 Also in diesen Beispielen, der ist halt wirklich blau, weil die Bitmaps da drin blau eingefärbt sind. 00:06:15.600 --> 00:06:20.240 Und dann habe ich mal ein bisschen rumgespielt in den DevTools und gedacht, irgendwie muss das doch aber möglich sein. 00:06:20.720 --> 00:06:24.960 Und man kann, weil ich gelesen hatte, in Photoshop kann man per Filter halt dann die Farbe ändern. 00:06:24.960 --> 00:06:30.440 Und man kann das Ganze aber auch mit CSS machen, weil ich gedacht habe, Moment, CSS hat ja auch Filter. 00:06:30.440 --> 00:06:36.380 Und wenn ich da den, also wer das machen mag, ich verlinke es auch nochmal, die Demo-Seite von der Font. 00:06:36.380 --> 00:06:40.260 Einfach mal reingehen, Textelement von der Vorschau auswählen. 00:06:40.260 --> 00:06:47.240 Und dann Filter-Property mit U-Rotate in Klammern 125-Dec wie Degree. 00:06:47.240 --> 00:06:48.980 Und dann wird der Font rot. 00:06:49.120 --> 00:06:54.300 Also falls jemand die Notwendigkeit hat, einen Bitmap-Font rot einzufärben. 00:06:54.300 --> 00:06:58.840 Moment mal, du rotatest den Font, um ihn einzufärben? 00:06:58.840 --> 00:07:00.240 Nee, nee, nee, U-Rotate. 00:07:00.240 --> 00:07:01.240 Ach, U, ah. 00:07:01.700 --> 00:07:07.380 Also die Farbe wird einfach rotiert, dieser Farbstirkel, und dann hat man den Font in Rot. 00:07:07.380 --> 00:07:15.320 Aber, ja, die Sache ist halt, Web-Font, schön und gut, aber der hat halt 4 MB, also mehr als 4 MB im Woff-Format. 00:07:15.420 --> 00:07:21.280 Ich weiß nicht, warum man dann nicht gleich auf Woff 2 gesetzt hat, weil die Brotli-Komprimierung da natürlich auch nochmal ordentlich was rausholt. 00:07:21.660 --> 00:07:28.420 Aber selbst wenn das jetzt die Hälfte schafft von der Komprimierung her, dann hätte man immer noch 2 MB, finde ich jetzt für einen Font schon relativ viel. 00:07:28.420 --> 00:07:32.840 Dann spart man sich vielleicht halt das 1 MB große Hero-Bild, dann hat man es wieder drin. 00:07:34.900 --> 00:07:43.380 Aber ich dachte, ich probiere das einfach mal aus, vielleicht gibt es ja auch kleinere Bitmap-Fonts, und natürlich gibt es Color-Fonts, also das ist nicht gebunden an Bitmap, sondern das können natürlich auch SVG-Fonts sein. 00:07:43.380 --> 00:07:46.420 Was kostet die Welt? Einfach mal schön Bandbreite rumballern. 00:07:46.420 --> 00:07:50.080 Richtig. Am besten auch nicht crashen, schön bei jedem Aufruf nochmal neu laden. 00:07:50.080 --> 00:08:03.860 Bei TikTok habe ich gelesen, 6G ist total sinnlos. Keiner weiß bislang, was 6G ist, aber einer wusste es schon ganz genau, aber es wird auf jeden Fall alles sehr, sehr schnell, und mit 5G sind wir dann eh gerettet, oder man weiß es nicht so genau. 00:08:04.640 --> 00:08:25.520 Schauen wir mal. Und ich habe letztes Mal, es geht auch noch weiter mit Fonts, ich habe ja letztes Mal dann spontan ein Geilteil angebracht, ohne es wirklich ausprobiert zu haben, dieses Plugin namens Font Self für Illustrator und Photoshop, das gibt es einzeln zu kaufen oder als Bundle für beides, und damit kann man wirklich relativ einfach und schnell zur eigenen Schriftart gelangen. 00:08:25.520 --> 00:08:34.480 Das heißt, man kann die Vektorisierungsfunktion von Illustrator nutzen oder einfach tatsächlich Vektorformen erstellen und kann dann damit sogar Color-Fonts selber generieren. 00:08:34.480 --> 00:08:37.680 Oder mit dem Photoshop-Plugin eben Bitmap-Fonts. 00:08:38.080 --> 00:08:49.040 Und das habe ich jetzt heute mal ausprobiert und das ist tatsächlich, es macht echt Spaß. Also es geht relativ schnell, dass man da dann ein Font hat und auch die Autospacing- und Kerning-Funktion ist tatsächlich brauchbar. 00:08:49.040 --> 00:09:06.640 Also es gibt schon ganz gute Ergebnisse, auf denen man dann aufbauen kann und dann noch ein bisschen selber manuell Hand anlegen kann. Also sehr gut als Einstieg, als Basis und weiterarbeiten mit einer richtigen Fontsoftware, sage ich mal mit einer teureren, die jetzt nicht nur 60 Euro kostet, kann man dann immer noch. 00:09:07.040 --> 00:09:14.600 Genau, also nur um tatsächlich das, was ich angepriesen habe, auch nochmal mit fundiertem eigenem Hintergrundwissen zu füttern. 00:09:14.600 --> 00:09:26.320 Gut, dann mein nächster Punkt. Ich werde hier zum Alleinunterhalter. Letztes Mal vergessen zu sagen, ich als, hast du denn noch was? Hast du mehrere Punkte? 00:09:28.000 --> 00:09:31.020 Ja, gerne. Ja, wenn du mehrere Punkte hast, dann sag du mal was. 00:09:31.020 --> 00:09:49.380 Äh, ja, ich hab, ja, ja, ja, ja, irgendwie schon. Also mein, mein erster Punkt ist Firefox oder Chrome zum Entwickeln. Ich habe jetzt sehr, sehr, sehr lange Firefox benutzt. Davor habe ich Chrome benutzt zum Entwickeln. Die Chrome DevTools waren halt eine Zeit lang mal irgendwie besser als Firebug damals noch. 00:09:49.820 --> 00:10:08.420 Dann irgendwann, als Firefox Quantum kam und da groß mit Speed angepriesen wurde, habe ich dann nochmal zurückgewechselt auf Firefox und habe dann gemerkt, naja, und die waren auch relativ weit vorne dabei, da irgendwie mit Grid Tools und so, da waren sie auch irgendwie vorne und haben dann auch so langsam irgendwie alles nachgerüstet, was mir in Chrome gefehlt hat. 00:10:08.500 --> 00:10:20.680 Und jetzt so in den letzten Tagen habe ich immer mal wieder so ein bisschen rumgespielt. Ich habe jetzt einen neuen Laptop und dann fiel mir auf, dass die Frame Rate in Firefox oft echt sehr, sehr schlecht ist. 00:10:20.680 --> 00:10:35.020 Also sowohl unter Linux als auch unter Windows. Und ich konnte das nicht so richtig nachvollziehen, wo das jetzt irgendwie herkommt. Ich hatte so den Eindruck, je nachdem, auf welchem Screen ich den geöffnet habe, ist Hardware Acceleration an oder nicht. 00:10:35.240 --> 00:10:42.900 Und das war irgendwie alles sehr, sehr strange. Also gerade bei uns auf der, wo wir sind, ist vorne.show-Seite, da geht ja so ein bisschen was ab. 00:10:42.900 --> 00:10:47.760 Genau, da ist es mir letztens auch aufgefallen, ja, Firefox ruckel, ruckel und Chrome flüssig. 00:10:47.760 --> 00:11:01.860 Genau, genau. Aber es kommt tatsächlich, also ich habe Firefox auch schon total flüssig da gesehen, auf dem gleichen Rechner. Je nachdem, also es ist irgendwie mir nicht so klar, was jetzt die Hardware Acceleration da irgendwie triggert. 00:11:02.420 --> 00:11:10.140 Also im gleichen Browser, auf der gleichen Seite. Also ich kenne die CSS-Eigenschaften, die Hardware Acceleration triggern, die haben wir teilweise auch verwendet. 00:11:10.140 --> 00:11:16.960 Aber das macht es nicht aus. Es ist bei mir irgendwas auf dem System, wo unter bestimmten Umständen die angeht und unter bestimmten Umständen nicht. 00:11:17.340 --> 00:11:27.240 Und das Problem hatte ich jetzt mit Chrome oder Edge tatsächlich noch nie. Das war immer, das war immer alles flauschig und die Animation irgendwie sauber und gut. 00:11:28.240 --> 00:11:37.840 Ja, also das bewegt mich jetzt so ein bisschen. Irgendwie Chrome vielleicht, beziehungsweise eigentlich fast lieber Edge nochmal auszuprobieren. 00:11:37.840 --> 00:11:38.100 Tatsächlich. 00:11:38.100 --> 00:11:49.900 Ist im Prinzip dieselbe Engine dahinter. Ja, keine Ahnung. Unter Windows ist Edge halt besser integriert. Ich habe die gleiche Engine. Es spricht eigentlich ... 00:11:49.900 --> 00:11:54.820 Schreibt es mal in die Kommentare, falls irgendwas, wenn man jetzt eh schon Chrome verwenden würde, ob irgendwas gegen Edge sprechen würde. 00:11:54.820 --> 00:12:05.720 Weil ich sehe momentan nichts. Das ist gut in Windows integriert, wenn man Windows benutzt und dann fluppt das. Startet sehr schnell. Hat genau die gleichen Dev-Tools, hat genau die gleiche Edge. 00:12:05.720 --> 00:12:09.380 Ja gut, weil es im Hintergrund nicht so viele Daten an Google schicken muss. 00:12:09.380 --> 00:12:14.280 Edge muss im Hintergrund nicht so viele Daten an Google schicken. Ja, halt nur an Microsoft. 00:12:14.280 --> 00:12:15.700 Ja, dafür an Microsoft natürlich, ja. 00:12:15.700 --> 00:12:23.140 Ja, keine Ahnung. Ach, was weiß ich. Also, ja, schreibt es mal in die Kommentare, was ihr benutzt. Also macht es wirklich. 00:12:23.440 --> 00:12:24.640 Weil wir müssen auch noch ein bisschen schimpfen. 00:12:24.640 --> 00:12:28.120 Ja, da müssen wir. Ich glaube, wir schimpfen dann zur Verabschiedung. Wir wollen ja jetzt nicht gleich am Anfang. 00:12:28.120 --> 00:12:36.020 Ja, also freut euch auf eine schimpfende Verabschiedung. Nee, wir schimpfen häufig viel mehr. Aber genau. Also das war so mein erstes Retro-Thema. 00:12:36.020 --> 00:12:46.960 Ja, dann wechseln wir mal zurück zu mir. Ich habe letztes Mal vergessen zu sagen, dass Vue 3.0 rausgekommen ist. Damals irgendwie zwei Tage, glaube ich, vor der Sendung. 00:12:47.480 --> 00:12:56.960 Und ich als alter Vue-Fanboy habe das vergessen zu sagen. Es würde jetzt aber auch zu weit führen, da jetzt irgendwie groß drauf einzugehen, was da sich getan hat. 00:12:56.960 --> 00:13:02.480 Es hat sich jedenfalls einiges getan. Und ich verlinke einfach mal drei Artikel zu dem Thema, zum Launch. 00:13:03.440 --> 00:13:08.280 Ich habe ja schon in der ersten Folge, glaube ich, in der Folge 0 schon angekündigt, irgendwann mache ich mal eine Folge über Vue. 00:13:08.720 --> 00:13:12.660 Und da können wir dann mal ausführlich drüber reden. Aber das ging jetzt in der Retro zu weit. 00:13:12.660 --> 00:13:18.980 Die Folge über Vue kommt, wenn wir bei den Spenden 400.000 Euro ergeben. 00:13:18.980 --> 00:13:23.740 Und sobald wir einen End-Jingle haben, dann kommt die Vue-Folge. 00:13:25.740 --> 00:13:37.440 Das war jetzt nur ein kurzer Punkt. Ich mache mal noch weiter. Ich habe einen Bug in InDesign gefunden. Ich mache ja ab und zu auch Print. Ich bin ja eigentlich gar kein Designer, eher der Techniker. 00:13:37.440 --> 00:13:51.360 Aber so ein bisschen Print mache ich. Und ich habe da eine Broschüre angelegt. Und da soll jedes Kapitel eigene Farbgebung haben. Aber ich wollte nicht irgendwie 24 Swatches anlegen oder so. 00:13:51.360 --> 00:14:00.480 Das heißt, ich habe mir ein Master-Template gemacht und habe dann die Book-Funktion genutzt von InDesign. Ich weiß nicht, ob die Leute, die mit InDesign arbeiten, überhaupt kennen großartig. 00:14:00.700 --> 00:14:12.740 Damit kann man eben verschiedene InDesign-Dateien zusammenfassen zu einem Buch. Wo dann dateiübergreifend auch die Seitenzahlen gesetzt werden und man Inhaltsverzeichnungen erstellen kann und so weiter. 00:14:12.740 --> 00:14:22.740 Und das funktioniert. Aber ich habe irgendwie so, nachdem ich dann ein Drittel fertig hatte, gedacht, boah, das mache ich nie wieder. 00:14:22.740 --> 00:14:30.120 Weil dann doch irgendwie manche Sachen doch nicht so toll waren. Unter anderem möchte man ja vielleicht zwischendrin mal dem Kunden ein Preview schicken. 00:14:30.620 --> 00:14:34.060 Und das sollte dann nach Möglichkeit natürlich so aussehen, wie die aufgeschlagene Broschüre. 00:14:34.060 --> 00:14:38.860 Also ich will dann nicht irgendwie ein PDF und jede Seite ist einzeln und dann ist die Seitenzahl mal links und mal rechts. 00:14:38.860 --> 00:14:43.140 Sondern am besten habe ich ja natürlich dann das so, als hätte der Kunde das aufgeschlagen vor sich liegen. 00:14:43.140 --> 00:14:46.620 Das lässt sich auch, wenn man eine InDesign-Datei hat, super machen. 00:14:46.620 --> 00:14:52.720 Da gibt es dann Einstellungen, wo dann wirklich beides als eine PDF-Seite gesetzt wird und trotzdem stimmen dann die Seitenzahlen noch und so weiter. 00:14:52.720 --> 00:14:59.860 Ja, wenn ich das mit der Book-Funktion exportiere, dann kann es passieren, dass ich mittendrin einzelne Seiten habe. 00:15:00.540 --> 00:15:05.980 Also wenn das eine Kapitel jetzt irgendwie links endet und das nächste eigentlich rechts weitergehen sollte, 00:15:05.980 --> 00:15:11.980 dann habe ich halt die linke Seite vom vorherigen Kapitel als eine Seite und die rechte Seite vom nächsten Kapitel auch als Einzelseite. 00:15:11.980 --> 00:15:18.920 Zwar richtig links und rechts angeordnet, aber eben nicht auf einem Spread heißt das ja, wenn es so nebeneinander liegt. 00:15:18.920 --> 00:15:24.920 Ich habe schon lange kein InDesign mehr offen gehabt, also du könntest mir alles erzählen, ich würde dir alles glauben. 00:15:24.980 --> 00:15:28.360 Also es ist so und es ist vor allem, es ist seit 2009 so. 00:15:28.360 --> 00:15:36.180 Und für mich gibt es da auch keine Diskussion, dass das irgendwie gewollt sein kann, sondern für mich ist das ganz klar, dass die Funktionalität einfach kaputt ist. 00:15:36.180 --> 00:15:43.120 Weil warum sollte ich das wollen, dass mein Kapitel da links und dann rechts, wenn ich doch schon extra sage, ich möchte die Datei mit Spreads ausdrucken. 00:15:43.520 --> 00:15:48.880 Also es macht einfach keinen Sinn und es gibt auch keine einfache Möglichkeit, das dann irgendwie zusammenzufügen per Acrobat oder so. 00:15:49.240 --> 00:16:07.900 Also es ist einfach, es ist kaputt und ich habe dann gegoogelt und ich habe Forenbeiträge gefunden, wie gesagt der älteste von 2009, sogar im Adobe Support Community Forum und zwei Einträge auf User Voice, was offiziell von Adobe als Feedback Einholtool genutzt wird. 00:16:07.900 --> 00:16:18.100 Also nicht irgendwas, wo die eh nicht drauf gucken, sondern das ist von denen das Feedback Tool und da sind zwei Einträge von 2019 und von offizieller Seite hat sich da noch niemand gemeldet und hat sich nichts getan. 00:16:18.960 --> 00:16:22.300 Und dann habe ich das gemacht, was man in solchen Situationen macht. 00:16:22.300 --> 00:16:22.940 Diese High-Edge-Case ist Konstantin. 00:16:22.940 --> 00:16:31.240 Ja, es war mir klar, dass das wieder kommt, ja, der Konstantin hat halt die Sonderfälle, aber nee, das ist doch einfach, da ist eine Funktionalität und die funktioniert nicht, wie sie soll, ganz einfach. 00:16:31.240 --> 00:16:41.840 Und dann bin ich auf Twitter und habe das Social-Media-Team da von Adobe, wie auch immer, angetweetet und habe tatsächlich umgehend auch eine Reaktion erhalten. 00:16:41.840 --> 00:16:48.060 Also das ging relativ schnell und das lohnt sich also immer, diese Kanäle auch auf Social Media zu nutzen, das geht oft viel schneller. 00:16:48.060 --> 00:16:50.420 Also haben sie gesagt, melde dich doch per DM und dann geh sterben? 00:16:51.040 --> 00:16:59.800 Nee, nee, nicht mal. Also das ist ja tatsächlich das, was dann ganz oft kommt, so von wegen, ja, wir wollen jetzt gar nicht öffentlich breittreten, nachher kommt noch jemand auf die Idee, das weiter zu verfolgen, ja. 00:17:00.160 --> 00:17:04.540 Sondern tatsächlich, die haben wirklich auf meine Nachrichten geantwortet, haben weitere Informationen erbeten. 00:17:04.540 --> 00:17:11.440 Ich habe dann Screenshots angehängt, genau was ich gemacht habe, was ich vorhabe und das Endergebnis und wie es eigentlich sein sollte. 00:17:12.280 --> 00:17:15.020 Und dann kam tatsächlich, ja, wurde weitergeleitet. 00:17:15.020 --> 00:17:20.220 Also erstmal kam natürlich, ja, sie erbitten sich ein bisschen Geduld, da habe ich schon gedacht, jo, da wird nie wieder was passieren. 00:17:20.220 --> 00:17:26.840 Und hatte mir schon vorgenommen, ich hake da nochmal nach, weil, kennt man ja, dann verläuft das im Sande und dann ist der Kunde, ist dann ruhig. 00:17:27.500 --> 00:17:35.660 Und an dem Tag, als ich dann nochmal schreiben wollte, kam tatsächlich auch eine Antwort, sie haben es weitergegeben an das Product-Team und die schauen sich das an. 00:17:35.660 --> 00:17:43.660 Und sie haben keinen ETA für irgendwelche Fixes, aber das Team arbeitet hart daran, das zu testen und die Changes zu finalisieren. 00:17:43.660 --> 00:17:47.920 Das heißt, es klingt für mich schon wirklich nach einem Eingeständnis, da wird was gemacht, ja. 00:17:47.920 --> 00:17:51.620 Bevor das ausgerollt ist und bei dir ankommt, würde ich kein Wort glauben. 00:17:51.620 --> 00:17:53.120 Da vergehen noch zwei Jahre. 00:17:53.120 --> 00:17:54.820 Nee, würde ich einfach kein Wort glauben. 00:17:54.820 --> 00:17:57.100 Aber es klingt zumindest schon mal besser, als das bei anderen. 00:17:57.100 --> 00:18:00.500 Das ist ein ganz, ganz nett formuliertes Halt-die-Schnauze. 00:18:00.500 --> 00:18:01.900 Ah, ich wäre mir nicht so sicher. 00:18:01.900 --> 00:18:04.140 Also ich habe auch geschrieben, ich nerv euch damit noch ein bisschen. 00:18:04.140 --> 00:18:11.600 Und ich hatte eine andere Supporterfahrung mit Google zum Beispiel letztens, wegen einem Feature auf Google Home. 00:18:11.600 --> 00:18:14.160 Und da war das so, wie man sich es vorstellt. 00:18:14.160 --> 00:18:16.780 Ja, erstmal hier, schau dir doch den Support-Artikel an. 00:18:16.780 --> 00:18:22.760 Und ich habe schon so geschrieben, ja komm, lass das sein, seid eh nicht an der richtigen Problemlösung interessiert. 00:18:23.180 --> 00:18:25.480 Und dann kam halt nochmal zurück, ja, wie können wir dir denn weiterhelfen? 00:18:25.480 --> 00:18:32.280 Und dann habe ich halt gesagt, naja, hier sind fünf Vorbeiträge, die das Problem schildern und es gibt keine offizielle Reaktion, also viel Spaß damit. 00:18:32.280 --> 00:18:34.200 Also es geht auch anders. 00:18:34.200 --> 00:18:36.100 Ich bin echt mal gespannt, was da draus wird. 00:18:36.100 --> 00:18:38.100 Also ich werde das weiterverfolgen auf jeden Fall. 00:18:38.100 --> 00:18:41.060 Gut, hast du noch einen Retro-Punkt? 00:18:41.320 --> 00:18:42.380 Ich habe noch Sticker. 00:18:42.380 --> 00:18:44.080 Sticker, ja. 00:18:44.080 --> 00:18:46.340 Ich habe eine Menge und das ist tatsächlich, ich habe wirklich Sticker. 00:18:46.340 --> 00:18:50.500 Ich habe nicht mehr ganz tausend Sticker hier rumliegen. 00:18:50.500 --> 00:18:53.460 Ja, da können wir vielleicht doch schon ein bisschen schimpfen. 00:18:53.460 --> 00:18:55.060 Wenn wir das schon aufgreifen. 00:18:55.060 --> 00:18:55.960 Vielleicht müssen wir ein bisschen schimpfen. 00:18:55.960 --> 00:19:01.760 Ja, wir haben eine kleine Aktion gestartet, dass wir Sticker verschenken. 00:19:02.420 --> 00:19:09.860 Also erstmal haben wir es nur auf Twitter geschrieben und es gibt auch einen Link dazu auf unserer Homepage, in unserem schönen Marquis-Tag ganz oben. 00:19:11.060 --> 00:19:21.880 Man muss einfach nur den Tweet retweeten oder unter einem bestimmten Hashtag, der da drin steht, was twittern über unseren Podcast und dann kriegt ihr kostenlos Sticker von uns geschickt. 00:19:21.880 --> 00:19:27.020 Und die Leute, die vielleicht dann Angst haben, ja, was ist da mit dem Porto, das schenken wir euch auch. 00:19:27.020 --> 00:19:28.320 Ihr kriegt sie einfach so. 00:19:28.320 --> 00:19:35.440 Ihr müsst uns einfach nur, ihr müsst einfach nur da mitmachen und dann später fragen wir euch nach der Adresse und dann kriegt ihr die einfach so geschickt. 00:19:35.440 --> 00:19:38.640 Und ihr müsst euch da auch melden. 00:19:38.640 --> 00:19:40.320 Ihr müsst das jetzt auch machen. 00:19:40.320 --> 00:19:41.740 Es gibt was umsonst, hallo? 00:19:41.740 --> 00:19:44.160 Das sagen doch sonst immer alle hier. 00:19:44.160 --> 00:19:53.120 Wir sollten vielleicht noch sagen, dass es vielleicht bei jedem siebten eine geheime Zutat mitgeschickt wird. 00:19:53.120 --> 00:19:55.660 Ich hab gesagt, vielleicht. 00:19:55.660 --> 00:19:56.840 Okay. 00:19:56.840 --> 00:20:00.600 Man muss ja die Leute ein bisschen triggern. 00:20:00.600 --> 00:20:02.520 Ja, wir müssen ja erstmal sieben zusammenkriegen. 00:20:02.520 --> 00:20:04.240 Was? Nein. 00:20:04.240 --> 00:20:06.440 Also maximal 500. 00:20:06.440 --> 00:20:07.780 Maximal 500. 00:20:09.260 --> 00:20:13.400 Eigentlich war der Termin dafür Sonntag, also wenn die Folge rauskommt. 00:20:13.400 --> 00:20:14.440 18.10., ja. 00:20:14.440 --> 00:20:27.640 Aber da die Leute, die das jetzt hören, dann keine Chance mehr haben mitzumachen, würde ich das jetzt aber nur für die Zuhörer, nicht für die, die es bei Twitter gelesen haben, nur für die Zuhörer, noch um, wie lange wollen wir es noch verlängern? 00:20:27.640 --> 00:20:31.820 Bis Mittwoch oder noch eine ganze Woche? 00:20:31.820 --> 00:20:36.980 Nehmen wir mal eine Woche, vielleicht kommen die Leute erst am Wochenende dann dazu, das zu hören. 00:20:36.980 --> 00:20:39.000 Sagen wir mal 25. abends. 00:20:39.000 --> 00:20:40.940 25. abends. 00:20:40.940 --> 00:20:42.760 Warte mal, jetzt muss ich gerade mal kurz auf den Kalender gucken. 00:20:42.760 --> 00:20:44.860 Okay, das ist dann der nächste Sonntag. 00:20:45.560 --> 00:20:49.800 Okay, 25. abends, aber geheime Verlängerungen bei Twitter werden wir das nicht ankündigen. 00:20:49.800 --> 00:20:54.220 Wir sagen das, also ihr erfahrt das jetzt nur hier und könnt dann auch mitmachen. 00:20:54.220 --> 00:20:56.740 Den Tweet werden wir in den Shownotes verlinken. 00:20:56.740 --> 00:20:58.500 Genau. 00:20:58.500 --> 00:21:03.080 Einfach mitmachen, dann kriegt ihr von uns kostenlose, wo wir sind, ist vorne Sticker, die sehr hübsch sind. 00:21:03.080 --> 00:21:07.400 Und wenn ihr auf eure Laptop-Deckel kleben könnt oder eure Oma schenken. 00:21:07.400 --> 00:21:13.140 Ja, und auf Schiefkästen, eure Oma schenken, natürlich auf Spielplätzen verteilen, an Straßenlaternen. 00:21:13.140 --> 00:21:15.320 Das ist ja, darf man nicht. 00:21:15.320 --> 00:21:17.140 Ja, das ist aber nicht unsere. 00:21:17.140 --> 00:21:20.460 Nee, das dürft ihr auf keinen Fall machen. 00:21:20.460 --> 00:21:21.140 Das dürft ihr nicht machen. 00:21:21.140 --> 00:21:25.100 Ihr dürft ihr auch auf keinen Fall an befreundete Entwickler verschenken. 00:21:25.100 --> 00:21:26.220 Genau. 00:21:26.220 --> 00:21:31.620 Also ich habe mich da tatsächlich mal informiert, als ich mal meine erste große Sticker-Bestellung gemacht habe, 00:21:31.620 --> 00:21:37.880 wie das denn rechtlich ist, ob ich als derjenige, der die Sticker bestellt oder in Auftrag gibt, 00:21:37.880 --> 00:21:42.800 irgendwie rechtlich belangt werden kann dafür, wenn jemand die irgendwo hinklebt, wo sie nicht hingehören. 00:21:42.800 --> 00:21:43.660 Nee, natürlich nicht. 00:21:43.660 --> 00:21:45.400 Naja, aber wenn du öffentlich dazu aufforderst schon. 00:21:45.400 --> 00:21:47.760 Okay, ich nehme es zurück. 00:21:47.760 --> 00:21:52.460 Ich nehme es zurück und sage, der Konstantin hat euch dazu aufgefordert. 00:21:52.460 --> 00:21:57.240 Ach so, üble Nachrede also auch noch. 00:21:57.240 --> 00:22:00.960 Ach, alles, was ihr wollt. Heute alles, was ihr wollt. 00:22:01.020 --> 00:22:02.400 Das volle Programm gibt es heute von mir. 00:22:02.400 --> 00:22:05.740 Ja, ich bin schon wieder viel zu nett geworden. 00:22:05.740 --> 00:22:07.180 Es wird Zeit, dass wir zum Thema kommen. 00:22:07.180 --> 00:22:08.280 Ja, ich habe noch einen Retro-Punkt. 00:22:08.280 --> 00:22:09.440 Du hast noch Retro, oder? 00:22:09.440 --> 00:22:14.940 Ich habe noch einen Punkt, was mich beschäftigt hat, wo ich jetzt gerade dran saß. 00:22:14.940 --> 00:22:18.660 Ich muss ja auch manchmal mit WordPress zu tun haben. 00:22:19.360 --> 00:22:21.500 Und das macht nicht immer Spaß. 00:22:21.500 --> 00:22:28.980 Ja, es waren turbulente drei Wochen seit der letzten Sendung, kann ich dir sagen. 00:22:28.980 --> 00:22:37.220 Jedenfalls habe ich was gebraucht, um eine verschachtelte Shortcode-Struktur irgendwie zu manipulieren. 00:22:37.740 --> 00:22:42.540 Und da das mit RegEx natürlich nicht sehr schön ist, habe ich dann geschaut. 00:22:42.620 --> 00:22:45.360 Und es gibt eine Klasse WP-Shortcode-Tree, heißt die. 00:22:45.360 --> 00:22:47.820 Also WP-Shortcode-Tree. 00:22:49.100 --> 00:22:55.720 Und die macht genau das, die Past-Shortcodes auch verschachtelt, gibt die in der Baumstruktur aus, also als Array mit Objekten. 00:22:55.720 --> 00:23:12.300 Und die kann ich dann manipulieren und am Ende wieder serialisieren und kann dann so lustige Dinge machen wie, also wenn ich jetzt mit so einem visuellen Editor bastle, der da irgendwie tausend Tags reinbaut und dann Container erzeugt und was weiß ich, dann kann ich mir halt bestimmte Inhalte aus einem Post herausfiltern und anzeigen. 00:23:12.300 --> 00:23:24.520 Also irgendwie sagen, ich möchte nur, also es gibt bei dem Film, mit dem wir da arbeiten, gibt's Tab-Container und ich möchte an einer Stelle, möchte ich nur das erste Tab, nur den Inhalt des ersten Tabs von jedem Post ausgeben. 00:23:24.520 --> 00:23:25.720 Und das kann ich zum Beispiel damit machen. 00:23:25.720 --> 00:23:30.600 Und dann habe ich das gefunden und habe festgestellt, okay, in manchen Edge-Cases von mir funktioniert das natürlich wieder nicht. 00:23:30.600 --> 00:23:40.620 Und da wären natürlich Tests ganz schön, dann habe ich angefangen, mir so ein paar Test-Cases zu schreiben, also einfach nur zu ausprobieren, funktioniert denn das? 00:23:40.660 --> 00:23:53.340 Dann habe ich gesagt, nee, komm, jetzt machst du das richtig, habe das dann geforkt, habe tatsächlich Unit-Tests implementiert und Code-Coverage und die dann gleich noch auf 100% geprügelt und ein Pull-Request gestellt und das ist tatsächlich drin. 00:23:53.340 --> 00:24:02.920 Und ich bin da jetzt sogar zum allerersten Mal in meiner Geschichte als Entwickler, auch als offizieller Collaborator mit Schreibrechten auf diesem Repo. 00:24:03.300 --> 00:24:08.600 Ja, das war jetzt für mich ein Novum und bin mal gespannt, was ich da beisteuere. 00:24:08.600 --> 00:24:15.160 Deswegen sage ich es nicht, ich sage es, um die Leute zu animieren, macht mit bei Open-Source-Projekten. 00:24:15.160 --> 00:24:23.800 Also es macht tatsächlich Spaß und wenn ich könnte, dann würde ich einfach mal ein halbes Jahr mit einer Auszeit nehmen und nur beisteuern, Code bei Open-Source-Projekten. 00:24:23.900 --> 00:24:29.400 Sachs-Fixen-Issues durcharbeiten, so wie bei diesem PDF-Gedöns, was ich da in der letzten Folge erwähnt habe. 00:24:29.400 --> 00:24:36.740 Das macht einfach echt Spaß, also auch mit anderen Entwicklern, gerade jetzt, wenn man halt selbstständig ist und nicht so oft den Austausch hat mit anderen Kollegen und sowas, 00:24:36.740 --> 00:24:43.260 dann ist das echt eine Abwechslung, da mal Feedback auch zu bekommen zum Code, zur Vorgehensweise und einfach mit anderen und auch zu sehen, 00:24:43.360 --> 00:24:47.520 das Feedback von den Leuten, die die Issues eingestellt haben, die sich total freuen und sagen, oh cool, jetzt funktioniert das. 00:24:47.520 --> 00:24:49.580 Also das ist echt super. 00:24:49.580 --> 00:24:54.180 Also falls ihr wollt, dass der Konstantin das macht, dann jetzt mal eben kurz applaudieren. 00:24:54.180 --> 00:24:55.760 Und ganz viel spenden. 00:24:55.760 --> 00:24:59.300 Ja, aber guck, guck, es gibt schon ein paar Leute, die es wollen. 00:24:59.300 --> 00:25:06.800 Es ist ja auch passend, es ist ja das Hacktoberfest, hast du das mitbekommen, das Schlamassel ums Hacktoberfest. 00:25:06.800 --> 00:25:11.600 Ach, ich hab's ignoriert, ich hab irgendwas auf Twitter gelesen und dann Twitter wieder zugemacht. 00:25:12.480 --> 00:25:14.400 Twitter auf, scheiße, Twitter zu. 00:25:14.400 --> 00:25:16.600 Twitter auf, Mist, Twitter wieder zu. 00:25:16.600 --> 00:25:25.380 Jetzt müssen wir es noch kurz erläutern, Hacktoberfest, das ist irgendwie seit einigen Jahren, wie heißt das, Digital Ocean, die Firma, die dahinter steckt. 00:25:25.380 --> 00:25:27.580 Ich weiß es nicht, ich will ja auch gar keine Werbung jetzt für die so arg machen. 00:25:27.580 --> 00:25:39.500 Die machen an sich eine gute Sache, ja, immer jedes Jahr im Oktober gibt's das Hacktoberfest und wenn man da vier Pull-Requests gemacht hat bei Open-Source-Projekten, bei öffentlichen Repositories, dann kann man T-Shirts gewinnen. 00:25:39.500 --> 00:25:42.520 Und die sind wohl anscheinend auch qualitativ und auch designtechnisch echt ganz schlecht. 00:25:42.520 --> 00:25:44.360 Also ich glaub, man kriegt die dann einfach, oder? 00:25:44.620 --> 00:25:45.620 Genau, die kriegt man geschenkt. 00:25:45.620 --> 00:25:46.900 Genau, das ist nicht nur gewinnen. 00:25:46.900 --> 00:26:04.320 Also man verknüpft das mit seinem Git-Account und dann sehen die automatisch alle Pull-Requests, die man macht und dann, wenn man genug zusammen hat, ich glaub, das ist limitiert auf 70.000 oder so, aber das ist ja schon eine Menge, dann kriegt man das und ansonsten kriegt man als Drohspreis Sticker, solange der Vorrat reicht. 00:26:04.460 --> 00:26:08.640 Also das ist einfach so ein bisschen, ne, Open-Source-Community anheizen und die lassen sich das ja auch was kosten. 00:26:08.640 --> 00:26:13.780 Also ich mein, 70.000 T-Shirts, selbst wenn man die jetzt mit Mengenrabatt günstig, also schon, lassen da schon was springen. 00:26:13.780 --> 00:26:14.640 Ist ja an sich eine gute Sache. 00:26:15.000 --> 00:26:26.520 Jetzt hat aber irgendein indischer Entwickler ein YouTube-Video gemacht, wo er dazu aufgerufen hat oder quasi Tipps gezeigt hat, wie man denn möglichst schnell diese vier Pull-Requests zusammenbekommt. 00:26:26.920 --> 00:26:53.240 Und dann haben reihenweise, sind die Leute, die die Owner nicht mehr hinterhergekommen, Issues zu bearbeiten, die dann solche Sachen waren, wie irgendwo ein Komma entfernt oder einfach den Satz eingefügt, this is an awesome project, in die Readme, ja, solche Sachen, werden wirklich geflutet davon, was jetzt zur Folge hatte, dass jetzt nur noch Repositories teilnehmen, die explizit ein Label gesetzt haben mit Hacktoberfest. 00:26:54.620 --> 00:27:02.980 Ja, Menschen. Ja, Menschen. Also, this is why we can't have nice things. Irgendjemand muss das immer kaputt machen. 00:27:02.980 --> 00:27:05.920 Ja, vor allem, es geht um ein T-Shirt. 00:27:05.920 --> 00:27:08.420 Es geht um ein T-Shirt, ja, es geht um ein scheiß T-Shirt. 00:27:08.420 --> 00:27:13.220 Also, was haben die vor? Dann damit wollen die das dann hinterher irgendwie bei Ebay verkaufen? 00:27:13.220 --> 00:27:23.960 Vielleicht denken sie, das ist ihre Eintrittskarte, weil sie mit diesem T-Shirt dann zeigen können, wie toll sie in der Open-Source-Community mitmachen und beim nächsten Vorstellungsgespräch tragen sie das und werden dann auf jeden Fall eingestellt. Keine Ahnung. 00:27:24.240 --> 00:27:29.080 Aber Arctic Code Vault Contributor klingt einfach so viel geiler als Hacktoberfest. 00:27:29.080 --> 00:27:30.280 Ja, auf jeden Fall. 00:27:30.280 --> 00:27:32.840 Wollte ich nur nochmal sagen. 00:27:32.840 --> 00:27:40.420 Auf mein GitHub-Profil hinweisen, github.com slash Moritz Gießmann, wenn ihr das sehen wollt, Arctic Code Vault Contributor. 00:27:40.420 --> 00:27:43.780 Und dank Moritz weiß ich, dass das bei mir auch steht, ich hätte es nämlich sonst gar nicht mitbekommen. 00:27:43.980 --> 00:27:54.020 Ich weiß gar nicht, ist auch egal. Sendung weiß ich nicht, Nummer 37. 00:27:54.020 --> 00:27:55.740 Ach, müsste ich auch gucken. Weiß ich auch nicht mehr. 00:27:55.740 --> 00:27:58.720 Ich weiß, nein, es gibt noch gar keine 37 Folgen, aber egal. 00:28:00.120 --> 00:28:03.280 Ja, gut. Das war Hacktoberfest. 00:28:03.280 --> 00:28:06.700 Und damit, nee, damit kommt jetzt... 00:28:06.700 --> 00:28:08.760 Moment, aber da irgendwie... 00:28:08.760 --> 00:28:10.040 Habe ich da noch was reingeschrieben, was ich... 00:28:10.040 --> 00:28:14.000 Irgendwie steht da noch was, ähm, was mit Units. 00:28:14.000 --> 00:28:15.980 Ja, das ist dann bei der Property der Woche. 00:28:15.980 --> 00:28:17.560 Ach, Entschuldigung. 00:28:17.760 --> 00:28:23.760 Weil ich nämlich noch nicht genug gesprochen habe, äh, mach ich nämlich jetzt weiter mit... 00:28:23.760 --> 00:28:27.000 Die Property der Woche. 00:28:27.000 --> 00:28:30.600 Mit die Property der Woche, genau. 00:28:30.600 --> 00:28:32.580 Oh Gott, du sagst dann später beim Thema nichts mehr, oder? 00:28:32.580 --> 00:28:34.440 Ich sag später nichts mehr, nee. 00:28:34.440 --> 00:28:35.860 Ich bin dann einfach mal ruhig. 00:28:35.860 --> 00:28:42.600 Nee, ich hab, ich, äh, werde schon versuchen, irgendwie mich auch noch ein bisschen einzubringen, aber, ähm, ich bin dann erstmal ruhig. 00:28:42.600 --> 00:28:44.400 Nein. 00:28:44.400 --> 00:28:46.100 Also, es geht... 00:28:46.100 --> 00:28:47.060 Nein, du musst meinen Rage teilen. 00:28:47.580 --> 00:28:50.040 Ich werde mit dir, mit dir zusammen ragen, auf jeden Fall. 00:28:50.040 --> 00:28:57.600 Ähm, es gibt eine Fortsetzung vom Fontspezial, äh, von letzter Sendung, also das Fontspezial Teil 2. 00:28:57.600 --> 00:29:05.000 Und da habe ich heute noch ein paar Properties im Petto, äh, die sich auf Text in irgendeiner Form beziehen. 00:29:05.000 --> 00:29:09.120 Und ich fange mal an mit, äh, Text Decoration. 00:29:09.120 --> 00:29:15.840 Text Decoration Style, Text Decoration Color, Text Decoration Thickness und Text Decoration Skip Ink. 00:29:16.560 --> 00:29:18.940 Und dann gibt's noch Text Decoration Underline Offset. 00:29:18.940 --> 00:29:23.780 Ähm, ich wollte da eigentlich noch eine schöne Demo dazu basteln. 00:29:23.780 --> 00:29:28.120 Das hab ich jetzt zeitlich nicht mehr geschafft, aber vielleicht schaff ich's ja, bis wir die Sendung live stellen. 00:29:28.520 --> 00:29:32.460 Ansonsten hab ich noch ein anderes Code Pen, das, äh, das auch zeigt. 00:29:32.460 --> 00:29:34.820 Ich würd einfach mal irgendeinen Code Pen suchen, musst du bestimmt nicht sehen. 00:29:34.820 --> 00:29:38.840 Ja, ich hab, ich hab schon eins im, also als, als Fallback verlinke ich das. Mal gucken. 00:29:39.020 --> 00:29:39.800 Ja, mach das einfach. 00:29:39.800 --> 00:29:43.380 Genau. Also, ähm, Text Decoration Style Wavy fange ich mal mit an. 00:29:43.380 --> 00:29:47.200 Und, äh, das ist jetzt natürlich nix lebenswichtiges. 00:29:47.200 --> 00:29:52.560 Und man kann das auch, wenn man das übertreibt, dann kann man damit viel Scheiße bauen, ja. 00:29:53.080 --> 00:29:56.500 Aber, ähm, es ist einfach mal ein bisschen was anderes, so zum, zum Aufhübschen. 00:29:56.500 --> 00:30:03.740 Und ich hab da mal eine Seite gesehen, ich glaube sogar, die kommt irgendwo in den Shownotes von einer unserer alten Folgen vor, aber ich hab sie jetzt leider nicht mehr gefunden. 00:30:03.740 --> 00:30:08.940 Da war das echt, äh, stilistisch schön eingearbeitet. Das sah einfach gut aus. 00:30:08.940 --> 00:30:18.160 Also, wenn man das in Verbindung mit Typografie, wenn die Schriftart einfach auch gut aussieht und so als verspieltes Element für Zwischenreihen, ähm, das sah, sah richtig gut aus. 00:30:18.160 --> 00:30:19.820 Oder Rechtschreibprüfung, oder? 00:30:19.820 --> 00:30:25.660 Für die Rechtschreibung, ja genau, das kennt man so klassischerweise, Rechtschreibprüfung, ähm, mit diesen roten Unterkringeln. 00:30:25.660 --> 00:30:27.360 Genauso sieht das auch im Endeffekt aus. 00:30:27.360 --> 00:30:34.860 Aber man kann ja durch die Text-Decoration-Thickness und mit der Text-Decoration-Color kann man das natürlich auch schön einfärben. 00:30:34.860 --> 00:30:42.860 Das heißt, ich hab, äh, einen großen lila Text und setze da eine 5-Pixel-dicke Wellenlinie in Pink drunter zum Beispiel. 00:30:42.860 --> 00:30:52.520 Ähm, und das mit der Text-Decoration-Color und mit der Thickness, das konnte man früher so ein bisschen faken mit Box-Shadow, dass man das im iE 9 Plus zumindest hatte. 00:30:52.520 --> 00:30:54.500 Aber das ist ja jetzt sowieso Geschichte. 00:30:54.820 --> 00:31:05.820 Äh, oder man hat halt ein zusätzliches Rapper-Element, äh, mit Underline-Farbe als Color und dann Text-Decoration-Property, ähm, im Element selbst, dann die Text-Farbe mit Color gesetzt. 00:31:05.940 --> 00:31:10.320 Also, äh, äh, das gab schon immer Versuche, das irgendwie unterschiedlich einzufärben und das geht jetzt ganz offiziell. 00:31:12.020 --> 00:31:16.960 So, gibt's ja auch Short-Code? Ich tippe gerade, weil ich grad versucht, das auszuprobieren. 00:31:16.960 --> 00:31:23.020 Das, äh, ist eine gute Frage, kann ich jetzt nicht beantworten. Ja, ob's Text-Decoration-Doppelpunkt einfach nur gibt und dann kann man da ... 00:31:23.020 --> 00:31:24.020 Also, Text-Decoration-Doppelpunkt gibt's ja auf jeden Fall. 00:31:24.020 --> 00:31:29.520 Ich glaub, man kann Wavy-Red, äh, 5-Pixel oder sowas, das müsste eigentlich, glaub ich, gehen. 00:31:29.520 --> 00:31:33.960 Ja, das hab ich grade versucht, aber da, äh, äh, hast du Browser-Informationen? Sollte das in Firefox funktionieren? 00:31:33.960 --> 00:31:37.600 Äh, das sollte eigentlich überall in allen Everglied-Browsern funktionieren. 00:31:38.100 --> 00:31:41.900 Dann geht's, glaub ich, äh, ich guck mal, äh, Can I Use, verlinke ich natürlich auch wieder, 93 Prozent. 00:31:41.900 --> 00:31:44.900 Also, genau das, äh, hab ich gerade Wavy-Red, 2-Pixel geschrieben. 00:31:44.900 --> 00:31:48.800 Vielleicht ist die Reihenfolge irgendwie spezifisch, ich weiß es nicht. 00:31:48.800 --> 00:31:52.800 Also, es sollte auf jeden Fall funktionieren, Firefox seit Version 6, äh, mit Text-Decoration-Color. 00:31:52.800 --> 00:31:56.380 Style-Wavy seit Version 6 auch, ähm. 00:31:56.380 --> 00:32:04.380 Ah, okay, dann, ich mach's mal einzeln. Ich glaub, es könnte sein, dass das vielleicht aus, aus Backboards-Compatibility-Gründen ... 00:32:04.380 --> 00:32:10.000 Also, nur Wavy, hab ich, hab ich irgendeinen Fehler hier? Ich glaub, ich hab einen Fehler. 00:32:10.000 --> 00:32:19.080 Also, vielleicht gibt's auch keinen Shortcode, weil, weil das ja erst später dazugekommen ist, und, äh, vielleicht wegen Backboards-Compatibility, keine Ahnung. 00:32:19.080 --> 00:32:21.500 Ja, genau, das denk ich mir auch. 00:32:21.500 --> 00:32:29.140 Na, ist auch egal, müssen wir jetzt auch nicht, äh, durchdeklinieren bis zum Ende, aber sind auf jeden Fall coole, äh, coole Eigenschaften. 00:32:29.140 --> 00:32:33.000 Ich kannte die schon, ähm, ist, ist cool, einfach mal, einfach mal bisschen rumspielen. 00:32:33.780 --> 00:32:36.620 Wem Underline zu langweilig ist, aber wolltest du eigentlich noch mehr? 00:32:36.620 --> 00:33:02.760 Ich hab noch, äh, noch die letzten beiden, ja, von denen, also Text-Decoration-Skipping, ähm, das ist, ich glaub, das war, ich kann sein, dass ich jetzt was Falsches erzähle, aber ich glaube, das war eine Zeit lang in manchen Browsern implementiert, aber nicht als Property, das man verändern konnte, sondern manche Browser haben das einfach standardmäßig so gemacht, wenn ich eine, eine Link-Underline hatte, oder generell eine Text-Underline, und da war zum Beispiel ein J oder ein G oder irgendwas mit Unterlängen, dass dann der Strich automatisch an den Buchstaben unterbrochen wurde. 00:33:03.180 --> 00:33:10.960 Und, äh, jetzt gibt's das auch als, als Property tatsächlich zum selber verändern, und, ähm, sodass es in allen Browsern einheitlich ist. 00:33:10.960 --> 00:33:12.620 Ich glaube, das ist teilweise in bestimmten Browsern mittlerweile sogar Standard. 00:33:12.800 --> 00:33:40.480 Genau, genau, also, äh, Firefox macht das zum Beispiel automatisch, soweit ich weiß, Chrome weiß ich jetzt gar nicht, müsste man mal ausprobieren, äh, vielleicht mach ich das auch irgendwie in der Demo, ähm, genau, und da kann man das jetzt einstellen, ob man, also es gibt None, Otto und All als, als Werte dafür, und None heißt eben, es geht durch die Buchstaben durch, Otto heißt, es macht das automatisch an den Buchstaben, und dann gibt's noch dieses All, das ist im Endeffekt nur hilfreich für chinesisch-japanisch-koreanische Schriftzeichen. 00:33:40.800 --> 00:33:47.020 Weil da Otto wohl manchmal nicht so den gewünschten Effekt bringt, äh, und mit All kann man das dann irgendwie erzwingen, dass das funktioniert. 00:33:47.420 --> 00:33:55.800 Und dann gibt's noch eins, das hab ich tatsächlich erst heute nochmal beim So-Nachschauen, äh, entdeckt, das kannte ich auch noch nicht, Text-Decoration-Underline-Offset. 00:33:55.800 --> 00:33:59.160 Damit kann ich die, die Underline, äh, verschieben. 00:33:59.160 --> 00:34:04.560 Und, dann hab ich beim Ausprobieren rausgefunden, dass das zusammenspielt mit Text-Decoration-Skipping. 00:34:05.560 --> 00:34:18.600 Das heißt, wenn ich jetzt zum Beispiel irgendwo ein Wort hab, das mit Bindestrich getrennt ist, und ich schieb die, die, das Underline-Offset so weit nach oben, dann hab ich unter dem Bindestrich, hab ich den, seh ich die Linie noch, aber unter den anderen Buchstaben nicht. 00:34:18.820 --> 00:34:26.400 Also, das ist relativ intelligent, was das angeht, das erkennt wirklich, wo ist Buchstabe, wo ist kein Buchstabe, und anhand dessen wird das dann unterbrochen. 00:34:26.680 --> 00:34:30.780 Also, das fand ich nett, dass dann solche Details auch gedacht wurde bei der Implementierung. 00:34:30.780 --> 00:34:36.060 Ah, es gibt doch ein Shortcode, ich hab's nur falsch, ich hab's nur falsch interpretiert. 00:34:36.060 --> 00:34:43.560 Man muss erst sagen, also, was ich vergessen hab, ist, also, ich hab gedacht, Wavy reicht, aber du musst auch Underline hinschreiben, damit das Underline überhaupt da ist. 00:34:43.560 --> 00:34:45.440 Ja, sonst weiß er ja nicht, ob Underline oder Overline stimmt. 00:34:45.440 --> 00:34:49.760 Genau, also kann ich schreiben, Text-Decoration-Underline-Wavy, äh, 00:34:49.760 --> 00:34:51.300 Red, 5 Pixel. 00:34:51.300 --> 00:34:52.100 4 Pixel, Red. 00:34:52.100 --> 00:34:54.460 Und wahrscheinlich sogar noch das Offset, noch mit minus 3 oder so. 00:34:55.000 --> 00:34:59.000 Äh, oh, das ist aber, das ist verrückt, was ich grad gebaut hab. 00:34:59.000 --> 00:35:02.820 Äh, so, was, äh, Offset, warte mal, dann müssen wir mal gucken, was minus ... 00:35:02.820 --> 00:35:05.620 Ja, wahrscheinlich noch einen zweiten Pixelwert und dann irgendwie minus 3 Pixel oder so. 00:35:05.620 --> 00:35:15.000 Okay, das war vielleicht zu viel, minus 1, irgendwas, ich muss mal ein bisschen kleiner machen, Moment, also, ich seh das jetzt leider nicht, was ich hier gerade mache, aber ... 00:35:15.000 --> 00:35:18.180 Ah, das mit dem zweiten Pixelwert, irgendwie, das geht, glaub ich, nicht. 00:35:18.180 --> 00:35:20.160 Okay, na gut, dann ist das wohl nicht implementiert, ja. 00:35:20.160 --> 00:35:24.820 Auf jeden Fall in dem Shortcode, ich weiß nicht, soll ich die Demo, die ich jetzt grad gebaut hab? 00:35:24.820 --> 00:35:26.140 Nee, es lohnt sich fast, oder? 00:35:26.140 --> 00:35:27.940 Ich, vielleicht bastel ich dir noch eines. 00:35:27.940 --> 00:35:33.880 Ja, die ist dann bestimmt schöner als meine, ich hab's grad wirklich nur schnell in CodePen reingehackt, sogar mit als Inline-Style, ganz, ganz böse. 00:35:33.880 --> 00:35:35.600 Jo. 00:35:37.160 --> 00:35:40.960 Gut, das war's zu den Properties und dann hab ich noch was, wenn du dazu nichts mehr hast. 00:35:41.040 --> 00:35:41.660 Das geht noch weiter. 00:35:41.660 --> 00:35:43.600 Ja, ja, ja, zu den Units. 00:35:43.600 --> 00:35:50.840 Ja, deswegen, also das war eigentlich ursprünglich beides Bestandteil noch letztes Mal vom Font Special, aber da wären wir ja zeitlich arm geworden. 00:35:52.360 --> 00:35:52.980 Units, genau. 00:35:52.980 --> 00:35:55.040 Nicht alle Units, nicht alles, was es gibt. 00:35:55.040 --> 00:35:58.920 Also man kann ja theoretisch sogar Zentimeter und Millimeter setzen im CSS. 00:35:58.920 --> 00:35:59.720 Ja, lass ich ganz kurz. 00:35:59.720 --> 00:36:00.200 Ja. 00:36:00.200 --> 00:36:05.740 Zentimeter hab ich mal eingesetzt und zwar bei meinem Accessibility-Cheat-Sheet, einfach nur, weil ich's mal ausprobieren wollte. 00:36:06.740 --> 00:36:10.340 Und was hat das gemacht? Wird das richtig umgerechnet? Sind dann zwei Zentimeter auf deinem Bildschirm? 00:36:10.340 --> 00:36:14.940 Das hab ich tatsächlich nicht getestet. Ob das wirklich stimmt, hab ich nicht ausprobiert. 00:36:14.940 --> 00:36:20.520 Mir ging's darum, ich hab das Ganze so im DIN A4-Design, also DIN A4-Style gemacht, also wirklich wie so ein Blatt. 00:36:20.520 --> 00:36:27.040 Und da dachte ich mir, naja, wenn das Ganze irgendwie auf DIN A4 basiert, dann kann ich da auch irgendwie mit Zentimeter und Millimetern theoretisch arbeiten. 00:36:27.040 --> 00:36:29.040 Wollte es einfach mal ausprobieren. 00:36:29.040 --> 00:36:34.460 Das ist die einzige Stelle im Internet, die ich kenne, wo Zentimeter als Unit verwendet wurden. 00:36:35.440 --> 00:36:41.580 Schreibt mal in die Kommentare, falls ihr noch was anderes kennt, außer mein Accessibility-Cheat-Sheet, wo Zentimeter als CSS-Unit verwendet wurde. 00:36:41.580 --> 00:36:44.620 Das müsste man jetzt tatsächlich mal mit Lineal nachmessen und ausdrucken. 00:36:44.620 --> 00:36:49.200 Das würde mich interessieren. Internet ausdrucken. 00:36:49.200 --> 00:37:04.540 Ja, es könnte aber sein, dass es dann am Ende um Faktor 1, so und so viel vergrößert ist, weil das war nämlich mein Hack, um das für größere Monitore vergrößert darzustellen, ist, dass ich das Ding einfach nur scale. 00:37:04.540 --> 00:37:06.720 Und dann würde es auch nicht mehr stimmen auf dem Monitor. 00:37:06.720 --> 00:37:10.640 Das heißt, müsste die kleine Variante davon sein, da müsste es dann aber vielleicht stimmen. 00:37:10.640 --> 00:37:13.820 Keine Ahnung, könnte ich auf meinem 4K-Monitor mal ausprobieren, ob es da auch noch stimmt. 00:37:14.180 --> 00:37:25.580 Also es gibt hier einen Tweet von Julia Evans mit so einem kleinen Cheat-Sheet für CSS-Units und da steht auch Inch, Zentimeter, Millimeter, Great for Print-Style-Sheets, not so good for Web. 00:37:26.020 --> 00:37:34.380 Aber es ist wohl tatsächlich so, also in speziellen Print-Style-Sheets kann ich das wohl einsetzen und hab dann hoffentlich am Ende auch tatsächlich dann zwei Zentimeter. 00:37:34.380 --> 00:37:36.800 Ich glaub, es hackt super für Web. 00:37:37.840 --> 00:37:41.380 Der Moritz baut jetzt alle Seiten nur noch in Millimetern und Zentimetern. 00:37:41.380 --> 00:37:47.500 Relative Units sind viel zu kompliziert, es gibt ab sofort nur noch absolute Units, nur noch in Millimeter und Millimeter. 00:37:47.500 --> 00:37:51.160 Gut, aber kommen wir doch mal zu den Units, um die es jetzt eigentlich gehen soll. 00:37:51.160 --> 00:37:54.220 Aber wie gesagt, über die wollte ich eigentlich gar nicht reden. 00:37:55.820 --> 00:37:57.800 Genau, fangen wir mal an mit EM. 00:37:57.800 --> 00:38:01.520 Also EM, das ist einfach relativ zur Font-Size. 00:38:01.520 --> 00:38:02.780 Oder hast du noch was? 00:38:02.780 --> 00:38:03.740 Du machst da irgendwas mit Pupp? 00:38:03.740 --> 00:38:04.860 Achso, du misst gerade nach. 00:38:04.860 --> 00:38:08.000 Ich hab gerade tatsächlich ein DIN A4-Blatt drüber gelegt. 00:38:08.000 --> 00:38:11.060 Über mein DIN A4-Blatt, es stimmt nicht. 00:38:11.060 --> 00:38:11.360 Okay. 00:38:11.360 --> 00:38:13.060 Es ist kleiner. 00:38:13.060 --> 00:38:18.480 Genau, also EM relativ zur Font-Size, das heißt, das ist einfach die Fonthöhe. 00:38:18.480 --> 00:38:22.900 Und zwar entweder des direkten oder des nächstgelegenen Parent-Elements. 00:38:23.780 --> 00:38:33.160 Und da kann ich eben dann, wenn ich sag, Font-Height, also Line-Height, 1.2 EM, dann hab ich eben das 1,2-fache der eigentlichen Font-Höhe als Line-Height. 00:38:33.160 --> 00:38:38.780 Und dann gibt's REM, das ist relativ zur Font-Size des Root-Elements, also HTML. 00:38:38.780 --> 00:38:51.060 Das heißt, je nachdem, was da gesetzt ist oder was aus dem Browser-Stylesheet oder dem User-Stylesheet kommt, da wieder Referenz zu unserer Sendung, wo wir über CSS-Spezifität sprechen. 00:38:51.060 --> 00:38:53.380 Und ich hab's jetzt auch tatsächlich richtig ausgesprochen. 00:38:53.780 --> 00:38:56.100 Spezifität, nicht Spezifizität. 00:38:56.100 --> 00:39:03.080 Und dann gibt's eine Unit, ich weiß nicht, die hab ich jetzt zum ersten Mal gehört, das wusste ich nicht, dass es gibt. 00:39:03.080 --> 00:39:03.460 EX. 00:39:03.460 --> 00:39:05.240 Kennst du? 00:39:05.240 --> 00:39:07.160 Boah, gelesen hab ich die mal, aber... 00:39:07.160 --> 00:39:10.080 EX ist relativ zur X-Höhe der Schriftart. 00:39:10.660 --> 00:39:18.100 Also X-Höhe ist ja wirklich der Kleinbuchstabe X und dann meistens aller Kleinbuchstaben, je nachdem, wie die Font gestaltet ist. 00:39:18.100 --> 00:39:20.140 Aber da kann man sich auch dran orientieren. 00:39:20.140 --> 00:39:26.400 Fällt jetzt kein Beispiel ein, mit dem man das irgendwie, wo man das gebrauchen könnte. 00:39:26.400 --> 00:39:29.640 Ich weiß nicht, ich glaub, relativ häufig wird das auch nicht eingesetzt. 00:39:31.120 --> 00:39:36.200 Ja, vielleicht, wenn jemand ein Beispiel hat, wo er EX verwendet hat, schreibt's in die Kommentare. 00:39:36.200 --> 00:39:40.460 Oder auf Twitter oder per E-Mail auch von mir aus. 00:39:40.460 --> 00:39:42.000 Und bei YouTube einen Daumen hoch, bitte. 00:39:42.000 --> 00:39:42.400 Genau. 00:39:42.400 --> 00:39:43.980 Wir haben zwar keinen YouTube-Kanal dabei. 00:39:43.980 --> 00:39:46.540 Drückt irgendwo auf den Daumen hoch bei YouTube. 00:39:46.540 --> 00:39:47.440 Drückt einfach. 00:39:47.580 --> 00:39:48.740 Kommentiert irgendwo drunter. 00:39:48.740 --> 00:39:51.520 Unter irgendeinem YouTube-Video. 00:39:51.520 --> 00:39:52.960 Beim Retzo zum Beispiel. 00:39:52.960 --> 00:39:54.160 Beim Retzo. 00:39:54.160 --> 00:39:58.260 Also einfach drunter schreiben, hey, ich hab EX eingesetzt. Punkt. 00:39:58.260 --> 00:40:02.000 Aber schickt uns den Link dann dazu. 00:40:02.000 --> 00:40:02.240 Genau. 00:40:02.240 --> 00:40:10.760 Dann kriegt, wenn ihr das macht, beim Rezo irgendwo unter irgendeinem Video das kommentieren und uns den Link schickt, dann kriegt ihr Sticker geschickt von uns. 00:40:10.760 --> 00:40:12.720 Sehr gut. 00:40:12.720 --> 00:40:16.960 Gut, nächste und letzte Einheit CH. 00:40:17.580 --> 00:40:19.020 Hast du das schon mal eingesetzt? 00:40:19.020 --> 00:40:20.680 Auch nicht. 00:40:20.680 --> 00:40:21.220 Ich auch nicht. 00:40:21.220 --> 00:40:23.120 Also auch mal gelesen. 00:40:23.120 --> 00:40:26.540 Es entspricht der Breite des Glyphens der Zahl 0. 00:40:26.540 --> 00:40:29.460 Und zwar inklusive dem Weißraum davor und dahinter. 00:40:29.460 --> 00:40:34.100 Also jeder, jedes Zeichen hat ja in einem Font auch einen Weißraum davor oder dahinter definiert. 00:40:34.100 --> 00:40:35.880 Vor der eigentlichen Outline. 00:40:35.880 --> 00:40:38.520 Und diesem Zeichen entspricht das. 00:40:38.520 --> 00:40:42.140 Und also bei Monospace-Fonts dann entsprechend die Breite aller Glyphen. 00:40:42.140 --> 00:40:45.660 Deswegen kann man mit Monospace-Fonts nämlich auch was Tolles machen. 00:40:45.660 --> 00:40:48.440 Das zeige ich gleich noch als Bonus zu diesem Punkt. 00:40:49.380 --> 00:40:52.100 Nur ganz kurz noch Ausnahme IE natürlich. 00:40:52.100 --> 00:40:54.500 Aber den können wir ja inzwischen zum Glück vergessen. 00:40:54.500 --> 00:40:56.340 Aber das war wieder so eine Geschichte. 00:40:56.340 --> 00:40:57.860 Das erinnert ans Box-Model. 00:40:57.860 --> 00:41:02.640 Wer ganz früh angefangen hat mit HTML und CSS. 00:41:03.600 --> 00:41:08.780 Also es war im Endeffekt nicht sinnvoll nutzbar, weil IE hat es halt nicht supportet. 00:41:08.780 --> 00:41:10.260 Was hat der IE gemacht? 00:41:10.260 --> 00:41:13.380 Alle Browser halten sich an den Weißraum, nur der IE nicht. 00:41:13.380 --> 00:41:17.520 Der nimmt nämlich exakt die Breite des Glyphens, also der Outline. 00:41:17.520 --> 00:41:19.620 Sodass dann zum Beispiel drei... 00:41:19.620 --> 00:41:20.700 Da müssen wir uns gar nicht drum kümmern. 00:41:20.700 --> 00:41:25.560 Ja, also drei CH waren dann schmaler als der String 0,0,0 an sich. 00:41:25.560 --> 00:41:28.380 Ja, also damit war das eigentlich hinfällig. 00:41:28.380 --> 00:41:29.580 Also hätte man es auch gleich lassen können. 00:41:29.580 --> 00:41:30.920 Da hätte man es gar nicht implementieren brauchen. 00:41:30.920 --> 00:41:33.080 Aber gut, das war der IE. 00:41:33.080 --> 00:41:35.100 Hast du eine Ahnung, wofür es diese Einheit gibt? 00:41:35.100 --> 00:41:36.480 Weil mir fiel gerade ein... 00:41:36.480 --> 00:41:40.140 Ich habe einen schönen Effekt, den ich jetzt gleich vorstellen will. 00:41:40.140 --> 00:41:41.140 Was wäre denn dein Use Case? 00:41:41.140 --> 00:41:43.860 Mein Use Case wäre... 00:41:43.860 --> 00:41:48.660 Ich habe gerade überlegt, die 0 könnte ja das breiteste Zeichen der ganzen Zahlen sein. 00:41:48.660 --> 00:41:49.620 Also so oder... 00:41:49.620 --> 00:41:50.800 Ja, ja. 00:41:50.800 --> 00:41:56.440 Ich glaube nicht, dass es bei den meisten Schriftarten eine breitere Ziffer gibt als die 0. 00:41:56.440 --> 00:41:59.320 Ja gut, die Raute ist relativ fett manchmal. 00:41:59.320 --> 00:42:01.820 Ja gut, das M, auch ein M kann weiter... 00:42:01.820 --> 00:42:02.740 Ja, Zahlen nicht. 00:42:02.740 --> 00:42:03.420 Okay, Zahlen. 00:42:03.420 --> 00:42:05.320 Ich meine jetzt nur Zahlen. 00:42:05.480 --> 00:42:07.840 Also da ist die 0 wahrscheinlich schon bei den breitesten. 00:42:07.840 --> 00:42:17.200 Und habe dann gedacht, naja, wenn du jetzt keine Monospace-Font hast, aber trotzdem willst, dass die Zahlen untereinander dargestellt werden, 00:42:17.200 --> 00:42:20.200 dann könnte diese Breite vielleicht tatsächlich interessant sein. 00:42:20.200 --> 00:42:25.980 Allerdings gibt es dafür ja mittlerweile in CSS auch eigene Eigenschaften, um Zahlen vernünftig untereinander darzustellen. 00:42:25.980 --> 00:42:27.840 Wenn die Font das unterstützt, ja. 00:42:27.840 --> 00:42:30.240 Das sind ja auch wieder die OpenType-Features, wo wir das letztes Mal drüber hatten. 00:42:30.240 --> 00:42:31.900 Da gibt es ein Feature, das man aktivieren kann. 00:42:31.900 --> 00:42:35.300 Aber das bringt dir ja auch nichts, außer du packst alle Zahlen. 00:42:35.440 --> 00:42:36.700 in ein einzelnes Span. 00:42:36.700 --> 00:42:38.000 Ja, kann ja machen. 00:42:38.000 --> 00:42:38.940 Das kannst du machen. 00:42:38.940 --> 00:42:44.060 Und dann kannst du sagen, die Breite ist ein CH von jedem Span, dann sind die untereinander. 00:42:44.060 --> 00:42:44.980 Ja, das kannst du machen. 00:42:44.980 --> 00:42:46.860 Kannst es aber auch lassen. 00:42:46.860 --> 00:42:51.560 Dann bin ich halt, ja genau, dann habe ich halt aber auch die Breite an, an dem Zeichen, an der Zeichengröße. 00:42:51.560 --> 00:42:59.540 Außerdem kommen wir dann, dann schlagen wir damit schon den Bogen zum Hauptthema, nämlich, dann kommen wir nämlich zum Thema Semantik, ja, und irgendwie jede einzelne Zahl in ein Span zu packen. 00:43:01.420 --> 00:43:04.380 Das muss nicht, das muss nicht unsemantisch sein, aber es ist auf jeden Fall scheiße für Accessibility. 00:43:04.380 --> 00:43:09.720 Aber jetzt ganz kurz noch ein Einsatzzweck, für den man das tatsächlich nutzen kann. 00:43:09.720 --> 00:43:11.800 Aber ich glaube, das ist noch das Einzige, was mir einfällt. 00:43:12.880 --> 00:43:15.760 Ist ein Type-Effekt, nur mit CSS. 00:43:15.760 --> 00:43:19.460 Und das verlinke ich natürlich da ein Code-Pen dazu. 00:43:19.460 --> 00:43:26.880 Und zwar mit dem, mit der Timing-Function Steps. 00:43:26.880 --> 00:43:28.420 Kennst du, sagt der die was? 00:43:28.420 --> 00:43:29.100 Kennst du die? 00:43:29.100 --> 00:43:31.120 Boah, ja, auch mal gelesen, aber ... 00:43:31.120 --> 00:43:38.100 Genau, da verlinke ich auch einen Artikel von Lia Veru dazu, wie das funktioniert und entsprechende Demos auch dazu. 00:43:38.100 --> 00:43:40.620 Das ist nicht ganz so trivial zu verstehen. 00:43:40.620 --> 00:43:43.460 Da gibt es zwei Parameter, Number of Steps und Direction. 00:43:43.460 --> 00:43:46.860 Und der Direction, da gibt es dann Start und End. 00:43:46.860 --> 00:43:53.680 Und dann unterscheidet sich das, je nachdem, ob die Animation quasi am Anfang des Schrittes oder am Ende des Schrittes beginnt und aufhört. 00:43:53.680 --> 00:43:56.540 Ich kann es selber nicht wirklich erklären. 00:43:56.540 --> 00:44:00.140 Am besten guckt man sich die Demos an in der zweiten Demo, die Auto-Demo. 00:44:00.960 --> 00:44:02.100 Da sieht man den Unterschied. 00:44:02.100 --> 00:44:05.240 Du kannst auch mal draufklicken, im Trello habe ich die Demos verlinkt. 00:44:05.240 --> 00:44:07.200 Da sieht man, was das für einen Unterschied macht. 00:44:07.200 --> 00:44:09.380 Das fängt dann eben früher oder später an ein bisschen. 00:44:09.380 --> 00:44:12.280 Aber der eigentliche Effekt ist eben so ein Type-Effekt. 00:44:12.280 --> 00:44:17.540 Also wenn man das Code-Pen lädt, dann macht das hier so, tipp, tipp, tipp, tipp, tipp, mit so einem blinkenden Cursor. 00:44:17.540 --> 00:44:19.180 Und this is a Typing-Demo. 00:44:19.180 --> 00:44:24.160 Und die einzelnen Buchstaben erscheinen dann wie mit einer Schreibmaschine, heißt das. 00:44:24.160 --> 00:44:25.500 Genau. 00:44:25.500 --> 00:44:28.280 Für die Älteren unter euch, wenn sie sich erinnern. 00:44:28.280 --> 00:44:29.860 Genau. 00:44:30.800 --> 00:44:38.040 Gelöst ist das Ganze eben, indem diese Einheit CH gesetzt wird auf, wie war denn das? 00:44:38.040 --> 00:44:40.440 Das ist die Menge der Zeichen. 00:44:41.260 --> 00:44:43.060 Das ist halt das Einzige, was man braucht. 00:44:43.060 --> 00:44:46.760 Also die Anzahl der Zeichen, das muss halt vorher klar sein. 00:44:46.760 --> 00:44:52.460 Da gibt man dann, das sind jetzt 22 Zeichen, also die Width auf 22 CH. 00:44:52.960 --> 00:44:58.000 Und dann wird das, äh, wird das quasi, ähm, animiert, aber eben nicht flüssig animiert. 00:44:58.000 --> 00:45:03.460 Also wenn ich diese Steps weglassen würde, dann würde sich das einfach aufziehen, aber halt nicht schrittweise. 00:45:04.100 --> 00:45:10.940 Das heißt, äh, ach so, wichtige Info fehlt noch, wenn man das jetzt nicht sieht, sondern hört, es ist eine Monospace-Font, hab ich glaube ich nicht gesagt, ja, Monospace-Font. 00:45:11.340 --> 00:45:24.620 Ich weiß die Anzahl der Zeichen und ich weiß die Anzahl der Zeichen und ich sage eben, äh, animiere von 0 auf 22 CH und ganz wichtig eben mit dieser Animation-Function Steps und ich sage 22 Steps, da kann ich eben schrittweise die Buchstaben erscheinen lassen. 00:45:25.020 --> 00:45:25.940 Und das fand ich einfach ganz nett. 00:45:25.940 --> 00:45:37.520 Also ich habe das auch, äh, irgendwo aus dem Tweet, den, äh, weiß ich nicht, ob ich den, ob ich den noch finde, ob ich den auch in die, äh, reinposte in die, in die Links, ähm, fand ich aber ganz cool. 00:45:37.520 --> 00:45:43.340 Äh, ich würde gerne mal diese Animation-Zeile da vorlesen, weil das, äh, das ist schon bemerkenswert. 00:45:43.340 --> 00:45:50.980 Also, Animation-Doppelpunkt, Typing, Typing ist in dem Fall die Animation, die als Keyframe-Animation definiert ist. 00:45:51.560 --> 00:46:03.520 Dann 2s, Steps in Klammern 22, Komma, Blink, das ist eine andere Keyframe-Animation, ähm, Punkt 5s, Step-and-Infinite-Alternate. 00:46:03.520 --> 00:46:13.500 Das ist also, ähm, Typing ist tatsächlich, äh, in dem Fall nur der Text und Blink, das ist der Cursor, ähm, der soll halt Infinite und, warum Alternate? 00:46:13.500 --> 00:46:17.120 Das glaube ich, muss das Alternate sein? Ich glaube nicht. Das nehme ich mal kurz weg. 00:46:17.120 --> 00:46:20.220 Ähm, oder was passiert, wenn ich da nicht Alternate habe? 00:46:21.560 --> 00:46:23.680 Oh, irgendwas flackert dann. 00:46:23.680 --> 00:46:29.280 Ah, der blinkt, der blinkt, der blinkt dann schneller, wenn ich nicht Alternate mache, wahrscheinlich wegen dem, äh, wegen der Verzögerung. 00:46:29.280 --> 00:46:34.160 Ja, aber es ist ganz interessant, wenn man die Steps rausnimmt, dann, dann, dann, dann zieht sich das einfach auf und das ist halt flüssig. 00:46:34.160 --> 00:46:37.060 Und das will man ja gerade nicht, sondern man will ja, dass es ruckartig passiert. 00:46:37.060 --> 00:46:43.240 Also, für die Steps könnte ich mir vielleicht noch andere Sachen ausdenken, für die CH bin ich mir echt nicht sicher, was da ein Anwendungsfall ist. 00:46:43.240 --> 00:46:50.360 Also, äh, okay, und Steps, äh, in dem Fall wird die Zeit, die Animation-Time einfach in 22 Schritte unterteilt, nehme ich mal an. 00:46:50.360 --> 00:46:50.740 Genau, genau. 00:46:50.740 --> 00:46:51.260 Ja. 00:46:51.260 --> 00:46:53.020 Ah ja, okay, das kannte ich tatsächlich auch nicht. 00:46:53.020 --> 00:46:56.940 Also, ich könnte theoretisch auch zwei auf einmal wahrscheinlich erstellen lassen, wenn ich halt einfach nur elf nehme. 00:46:56.940 --> 00:46:59.300 Äh, dann habe ich immer zwei Buchstaben auf einmal. 00:46:59.300 --> 00:47:01.000 Ja. 00:47:01.000 --> 00:47:02.260 Genau. 00:47:02.260 --> 00:47:03.920 Also, ja. 00:47:03.920 --> 00:47:07.780 Also, in dieser einen Zeile, finde ich, steckt schon ziemlich viel drin. 00:47:07.780 --> 00:47:08.880 Ja, auf jeden Fall. 00:47:08.880 --> 00:47:12.440 Okay, ja. 00:47:12.440 --> 00:47:19.300 Gut, dann, ähm, ach ja, genau, da habe ich mir noch aufgeschrieben, Fillmode und Iteration Count haben auch Auswirkungen. 00:47:19.300 --> 00:47:19.480 Wir sind jetzt bei knapp 50 Minuten. 00:47:19.480 --> 00:47:20.380 Ja, da geht noch was. 00:47:20.380 --> 00:47:23.540 Ne, nur noch dieser Satz, dann bin ich ruhig für eine Weile. 00:47:23.540 --> 00:47:27.220 Also, Fillmode und Iteration Count haben Auswirkungen auf die Schritte. 00:47:27.220 --> 00:47:33.320 Und ebenfalls auf den Artikel und die Demos verweisen, habe ich mir da hingeschrieben, was ich hiermit tue. 00:47:33.320 --> 00:47:34.040 Viel Spaß. 00:47:34.040 --> 00:47:37.680 Ja, so würde ich das auch machen. 00:47:38.500 --> 00:47:39.460 Viel Spaß damit. 00:47:39.460 --> 00:47:40.440 Gut. 00:47:40.440 --> 00:47:45.540 Dann, kommt, müssen wir jetzt, ich höre wieder aus der Regie, wir müssen ein bisschen Werbung machen. 00:47:45.540 --> 00:47:49.340 Bastele, installiere einfach. 00:47:49.340 --> 00:47:53.880 Maßband mit LED-Display, einfach zu messen. 00:47:53.880 --> 00:47:56.780 Montierst, bastelst du oft? 00:47:56.780 --> 00:48:01.260 Hier ist das digitale Maßband, erleichtert dein Leben. 00:48:01.260 --> 00:48:04.900 Reparierst, renovierst du? 00:48:06.020 --> 00:48:08.660 Mit elektrischem Maßband, sofort gemessen. 00:48:08.660 --> 00:48:10.980 Bitte umlöschen, da eingetragener D-Adresse aus dem Verteiler. 00:48:10.980 --> 00:48:13.120 Verlorst du deine Maßband? 00:48:13.120 --> 00:48:18.200 Das digitale Maßband mit LED-Display plus drei Modus. 00:48:18.200 --> 00:48:22.800 Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator. 00:48:24.940 --> 00:48:29.220 Also ich war ja etwas argwöhnisch, aber der plus drei Modus, der hat mich überzeugt. 00:48:29.220 --> 00:48:38.320 Also ich glaube, das ist, so stellen sich die Verfasser von diesen Spam-Mails das vor, wie die Leute das rezipieren. 00:48:39.120 --> 00:48:44.160 Also so stellen die sich die Wirkung ihrer Spam-Mails vor, so ein Werbespot, der überzeugt. 00:48:44.160 --> 00:48:47.260 Ich glaube nicht, dass sie sich die Wirkung so vorstellen. 00:48:47.260 --> 00:48:49.280 Ich habe mir quasi fast in den Kopf geschossen. 00:48:49.280 --> 00:48:52.180 Wenn ich eine Knarre hier liegen habe, dann hätte ich es gemacht. 00:48:52.180 --> 00:48:54.720 Ich sage ja nicht, dass das die Reaktion der Empfänger ist. 00:48:54.720 --> 00:48:56.060 Ich sage ja, so stellen sie sich das vor. 00:48:56.060 --> 00:48:59.880 Die glauben, dass ihre Werbung so ergreifend ist. 00:48:59.880 --> 00:49:02.500 Vielleicht jetzt labere ich ja schon wieder. 00:49:02.920 --> 00:49:05.240 Aber ganz kurz für die Neuhörerinnen und Hörer. 00:49:05.240 --> 00:49:13.120 Spam-Spots, das sind echte Spam-Mails, die wir verarbeiten zu, meistens ich verarbeite, zu einem Werbespot. 00:49:13.120 --> 00:49:15.440 Und wer mag, darf uns die gerne schicken. 00:49:15.440 --> 00:49:19.180 Der morgens bloggt euch dann vielleicht auf Twitter oder per E-Mail. 00:49:19.180 --> 00:49:20.060 Das kann passieren. 00:49:20.060 --> 00:49:22.820 Aber... 00:49:22.820 --> 00:49:23.820 Ja, das kann passieren. 00:49:23.820 --> 00:49:25.400 Kommen wir doch zum Thema, hm? 00:49:25.400 --> 00:49:26.900 Ja, nee, warte, warte, warte. 00:49:26.900 --> 00:49:31.660 Ich wollte nur sagen, ihr dürft uns natürlich Spam-Mails schicken, 00:49:31.760 --> 00:49:33.600 aber ihr dürft auch den Konstantin buchen als Sprecher. 00:49:33.600 --> 00:49:35.520 Weil er total gut das macht. 00:49:35.520 --> 00:49:37.260 Er sagt dann immer, ja, ist so geil. 00:49:37.260 --> 00:49:39.620 Aber der Konstantin ist ein total geiler Sprecher. 00:49:39.620 --> 00:49:41.720 Der hat doch unser Intro gesprochen, also ihr dürft ihn buchen. 00:49:41.720 --> 00:49:45.240 Ich kann sprechen wie alle deutschen Synchronsprecher sprechen. 00:49:45.240 --> 00:49:47.280 So, gebucht. 00:49:47.280 --> 00:49:48.600 Du hast 100 Euro. 00:49:48.600 --> 00:49:53.000 Dann muss ich nicht mehr arbeiten und dann kann ich mich mehr am Open Source kümmern. 00:49:53.000 --> 00:49:56.280 Konstantin kann euch zum Beispiel euren Mailbox-Text einsprechen. 00:49:56.280 --> 00:50:01.000 Genau, mit der Stefan-Rab-TV-Total-Fake-Stimme. 00:50:01.540 --> 00:50:04.580 Genau, oder, äh, Frank, kennst du Frank Zander? 00:50:04.580 --> 00:50:05.920 Frank Zander. 00:50:05.920 --> 00:50:07.080 War das Frank Zander? 00:50:07.080 --> 00:50:08.400 Ich bin gerade am überlegen. 00:50:08.400 --> 00:50:09.680 Es ist so ein Schlagersänger. 00:50:09.680 --> 00:50:10.500 Ich glaube, das war Frank Zander. 00:50:10.500 --> 00:50:13.000 Ah, hier, ähm, der, der, der, der, der, der, der, der. 00:50:13.000 --> 00:50:13.500 Ich weiß es nicht genau. 00:50:13.500 --> 00:50:14.540 Ich glaube, mehr dürfen wir nicht sagen. 00:50:14.540 --> 00:50:16.760 Ich kenne kein Lied von dem, ich kenne nur den Typen und der hat halt mal, der hat mal 00:50:16.760 --> 00:50:20.020 so CDs, also du konntest dir so ein Geburtstagslied von ihm singen lassen mit deinem Namen. 00:50:20.020 --> 00:50:24.820 Es gibt ja, ah, wie heißt das denn, ähm, cameo.com, ist es das? 00:50:24.820 --> 00:50:26.940 Wahrscheinlich öffne ich jetzt eine Pornoseite. 00:50:27.660 --> 00:50:30.460 Äh, nee, das ist es tatsächlich, ähm, kennst du das? 00:50:30.460 --> 00:50:31.580 Cameo.com? 00:50:31.580 --> 00:50:32.400 Nee. 00:50:32.740 --> 00:50:35.500 Also Cameo nennt man das jetzt fast ein Geilteil, aber das fällt mir jetzt gerade 00:50:35.500 --> 00:50:39.980 ein, äh, cameo ist ein, so ein Gastauftritt, den zum Beispiel Regisseure in ihren eigenen 00:50:39.980 --> 00:50:43.700 Filmen haben, ja, die machen das ja ganz gerne, dass sie dann da selber zu sehen sind oder 00:50:43.700 --> 00:50:48.140 dass, äh, irgendwelche Promis halt in Filmen, als sie sich selbst auftreten im Hintergrund. 00:50:48.140 --> 00:50:56.300 Und es gibt die Seite cameo.com, da kannst du dir von Celebrities Videonachrichten einsprechen 00:50:56.300 --> 00:50:56.580 lassen. 00:50:56.580 --> 00:51:01.100 Zum Beispiel hier, äh, meine Tante ist großer, na gut, also, sind jetzt Englischsprachige, 00:51:01.100 --> 00:51:05.520 äh, hauptsächlich, aber jetzt mal angenommen, Thomas Gottschalk wäre da dabei und deine Tante 00:51:05.520 --> 00:51:09.620 ist irgendwie ganz großer Thomas Gottschalk-Fan, dann kannst du hier sagen, äh, hallo Thomas Gottschalk, 00:51:09.620 --> 00:51:11.280 bitte sprich mir diese Nachricht ein. 00:51:11.280 --> 00:51:15.480 Ach du Scheiße, Snoop Dogg für 828 Euro. 00:51:16.160 --> 00:51:21.200 Ja, also die sind teilweise nicht ganz billig, ja, ähm, und da ist wirklich von Sportlern, 00:51:21.200 --> 00:51:26.400 also hier, NBA, äh, Spieler und was weiß ich was, also. 00:51:26.400 --> 00:51:26.860 Ernsthaft? 00:51:26.860 --> 00:51:31.520 Oh Gott, was ist aus unserer Kreativszene geworden, dass sie das nötig haben, ehrlich? 00:51:31.520 --> 00:51:32.120 Ja. 00:51:32.120 --> 00:51:35.740 Ach du Scheiße, ich hab, ich hab Mitleid. 00:51:35.740 --> 00:51:37.400 Not Tom Cruise, das find ich gut. 00:51:37.400 --> 00:51:41.820 Ja, es gibt auch ganz viele Double, also es gibt Double, die dann für dich so tun, als 00:51:41.820 --> 00:51:47.240 ob, ähm, ja, ist mir jetzt nur gerade eingefallen, aber wir schweifen schon wieder ab und wir haben 00:51:47.240 --> 00:51:50.140 Konstantin, also das ist unser Ziel, dass wir auf dieser Seite mal landen. 00:51:50.140 --> 00:51:51.260 Dass wir da drauf landen, ja. 00:51:51.260 --> 00:51:55.520 Dass wir da, dass wir da für, für 23,70 Euro jemandem irgendwas einsprechen. 00:51:55.520 --> 00:51:57.500 Ja, was für andere? 00:51:57.500 --> 00:52:01.920 Oh Gott, das ist ja, das ist ja schrecklich, aber das ist ja, das ist ja echt, also das 00:52:01.920 --> 00:52:06.620 ist ja so die letzte, die letzte Stufe der, also das ist kurz vor Onlyfans, bevor du dann 00:52:06.620 --> 00:52:10.360 irgendwie Nacktbilder verkaufst, äh, von dir, da machst, versuchst du noch das, wenn 00:52:10.360 --> 00:52:14.020 das nicht klappt, dann landest du wahrscheinlich bei Onlyfans und verkaufst Nacktbildern. 00:52:14.020 --> 00:52:19.240 Meine Fresse, aber wirklich Snoop Dogg ist so ziemlich der einzige richtige Star, den 00:52:19.240 --> 00:52:21.180 ich da gesehen hab, also von denen, die ich kenne. 00:52:21.180 --> 00:52:24.560 Nee, also es gibt schon, schon auch bekannte Schauspieler und so, also von denen, die ich 00:52:24.560 --> 00:52:27.820 jetzt gesehen hab, kenn ich auch irgendwie keinen einzigen, aber, ähm, es gibt da schon 00:52:27.820 --> 00:52:28.420 auch, ähm. 00:52:28.420 --> 00:52:32.080 Aber das ist doch, aber das ist doch wirklich, äh, das ist doch Selbsterniedrigung. 00:52:32.080 --> 00:52:34.160 Wie für, für, für 350 Euro. 00:52:34.160 --> 00:52:38.300 Weißt du, wenn's Fans gibt, die das, die das wollen und darauf abfahren? 00:52:38.900 --> 00:52:45.340 Äh, äh, ja, aber, aber ich seh das aus Sicht des Schauspielers oder, oder des, das, das, 00:52:45.340 --> 00:52:46.300 das, das, das, das, das macht man das. 00:52:46.300 --> 00:52:48.880 Ja, ich glaub, weißt du, was meinst du, wie oft du angesprochen wirst von Fans? 00:52:48.880 --> 00:52:50.140 Äh, kannst du mir schnell einsprechen? 00:52:50.140 --> 00:52:52.840 Dann kannst du als Schauspieler sagen, jo, kann ich machen. 00:52:52.840 --> 00:52:53.760 Gehst du auf Camillo? 00:52:53.760 --> 00:52:54.580 Kost halt. 00:52:54.580 --> 00:52:56.780 Weil du irgendwann keinen Bock mehr hast. 00:52:56.780 --> 00:52:59.320 Irgendwie kostenlos hier mit deiner Stimme und deinem Äußeren. 00:52:59.320 --> 00:53:01.700 Äh, nein, fick dich, geh in meinen Kinofilm. 00:53:02.440 --> 00:53:03.400 Ja, kann man auch. 00:53:03.400 --> 00:53:06.780 Ich find, das ist ne, das ist, warte mal, Jayjack, oh Gott. 00:53:06.780 --> 00:53:08.260 Ich lese mich hier grad durch. 00:53:08.260 --> 00:53:09.060 Flavor Flav. 00:53:09.060 --> 00:53:13.300 Für 230 Euro kriegst du was von Flavor Flav. 00:53:13.300 --> 00:53:16.560 Also bevor du, bevor du in diesem Rabbit Hole verschwindest. 00:53:16.560 --> 00:53:18.080 Nein, nein, nein, nein, da geh ich jetzt rein. 00:53:18.080 --> 00:53:20.200 Du hast keine, da bist du jetzt schuld dran. 00:53:20.200 --> 00:53:21.380 Ich spiel jetzt das Jingle. 00:53:21.380 --> 00:53:25.820 Hier ist WWS IV mit dem Tagesthema. 00:53:25.820 --> 00:53:32.900 So, hier, Konzentration. 00:53:32.900 --> 00:53:35.500 Nein, nein, nein, nein, das ist zu gut. 00:53:35.500 --> 00:53:36.820 Das ist einfach zu gut. 00:53:36.820 --> 00:53:38.700 Hier, Flavor Flav, 230 Euro. 00:53:38.700 --> 00:53:52.620 Also bitte, falls ihr spendet und unter Buy Me A Coffee, ihr findet den Link auch im Feed, also in der Folgenbeschreibung und auch auf unserer Homepage oben bei Buy Me A Beer oder Spendi Ein Bier. 00:53:52.620 --> 00:54:00.660 Spendiert Geld, damit ich mir von Flavor Flav eine personalisierte Nachricht schicken lassen kann. 00:54:00.660 --> 00:54:02.640 Ja, super, jetzt spendet erst recht keiner. 00:54:02.640 --> 00:54:04.980 Nein, wir verbraten euer Geld nicht für solche Unwichtigen. 00:54:04.980 --> 00:54:06.720 Die Leute spenden für den verrücktesten Scheiß. 00:54:08.700 --> 00:54:16.740 Ich meine, es gibt Twitch-Leute, die leben vom, da sitzen und in die Kamera gucken und dumm rumlabern, also dafür spenden die Leute Geld. 00:54:16.740 --> 00:54:17.980 Also, egal. 00:54:17.980 --> 00:54:21.540 Jetzt muss ich ja wieder sauer werden, weil ich war gerade gut gelaunt. 00:54:21.540 --> 00:54:23.340 Ja, schade, schade aber auch. 00:54:23.340 --> 00:54:28.400 Das ist schlecht, das ist schlecht für das Thema, unser Thema, wir haben es noch gar nicht so richtig gesagt, ne? 00:54:28.400 --> 00:54:31.360 Weil normalerweise sagen wir es manchmal vor, ich habe nur gesagt, wir müssen reden. 00:54:31.360 --> 00:54:32.080 Stimmt, ja. 00:54:32.080 --> 00:54:35.940 Also, ich fange mal so an, ich bin echt angepisst. 00:54:35.940 --> 00:54:38.340 Ich bin wirklich, wirklich angepisst. 00:54:38.700 --> 00:54:42.640 Ähm, bei dem, bei dem Thema, über das wir heute reden, nämlich HTML-Semantik. 00:54:42.640 --> 00:54:45.300 Ähm, warum bin ich angepisst? 00:54:45.300 --> 00:54:48.420 Weil ich das Gefühl habe, es interessiert keine Sau. 00:54:48.420 --> 00:54:53.380 Es ist meiner Meinung nach irgendwie das, das, das Handwerk im Web, wie es, wie es sein sollte, 00:54:53.380 --> 00:55:00.600 ähm, dass man irgendwie sich ein bisschen Mühe macht und das richtige HTML-Element raussucht für, ähm, für den richtigen, für den Anwendungsfall. 00:55:00.600 --> 00:55:02.860 Und es interessiert keine Sau. 00:55:02.860 --> 00:55:04.580 Diff, diff your life. 00:55:04.580 --> 00:55:05.780 Diff-Suppe. 00:55:05.780 --> 00:55:07.740 Äh, full, full-sack-Developer. 00:55:07.740 --> 00:55:10.220 Äh, ja, keine Ahnung. 00:55:10.220 --> 00:55:13.640 Also, Diffs mit Klickhändlern sehe ich irgendwie, Diffs mit Überschriften drin. 00:55:13.640 --> 00:55:17.280 Hauptsache, Diff, ich verstehe gar nicht, warum, warum erfindet ihr wenigstens nicht eure eigenen Elemente? 00:55:17.320 --> 00:55:22.820 Das wäre wenigstens noch kreativ, irgendwie so, äh, ein Penis- und ein Vagina-Element fände ich deutlich besser als Diff. 00:55:22.820 --> 00:55:25.180 Ich kann einfach kein Diff mehr sehen. 00:55:25.180 --> 00:55:27.120 Ich habe Divitis nochmal nachgeschlagen. 00:55:27.120 --> 00:55:29.420 Vielleicht kennt das, äh, der ein oder andere das Wort. 00:55:29.420 --> 00:55:30.700 Konstantin, kennst du Divitis? 00:55:30.700 --> 00:55:31.320 Sag dir das was? 00:55:31.320 --> 00:55:33.920 Das über, der übermäßige Gebrauch von Div-Tags. 00:55:33.920 --> 00:55:35.460 Genau. 00:55:35.460 --> 00:55:37.180 Und ich habe es nochmal gegoogelt. 00:55:37.180 --> 00:55:45.060 Und zu meinem Erstaunen bin ich nicht nur auf irgendwelchen Nerd-Blog-Artikeln gelandet, sondern im englischen Victionary. 00:55:45.700 --> 00:55:54.760 Das Wort ist im englischen Victionary drin und da steht genau, äh, Web-Design, äh, usually derogatory, das habe ich auch gerade erst gelernt, das Wort. 00:55:54.760 --> 00:55:55.240 Derogativ. 00:55:55.240 --> 00:56:00.580 The practice of authoring Webpage-Code with many Div-Elements in place of meaningful semantic HTML-Elements. 00:56:00.580 --> 00:56:03.100 Also sogar im Victionary, nicht auf Wikipedia. 00:56:03.100 --> 00:56:06.820 Es ist witzig, dass du auch die Bedeutung von was nachgeschlagen hast. 00:56:06.820 --> 00:56:11.980 Ich habe nämlich auch so als Einstieg, ähm, mal nachgeschlagen auf Duden, was heißt denn Semantik? 00:56:12.920 --> 00:56:20.280 Und, äh, das heißt, es ist, äh, definiert als Teilgebiet der Linguistik, das sich mit den Bedeutungen sprachlicher Zeichen und Zeichenfolgen befasst. 00:56:20.280 --> 00:56:24.140 Oder zweitens als Bedeutung Inhalt eines Wortes, Satzes oder Textes. 00:56:24.680 --> 00:56:25.960 Das ist eigentlich ganz gut erklärt. 00:56:25.960 --> 00:56:33.000 Ich meine, Linguistik ist natürlich jetzt auf Sprachwissenschaft im eigentlichen Sinne bezogen, aber HTML ist auch eine Sprache und eigentlich ist das, äh... 00:56:33.000 --> 00:56:50.680 Lass mich doch noch ein bisschen die Leute beleidigen, ich war noch gar nicht, äh, ich wollte nämlich gerade sagen, ähm, es, es hören ja vielleicht auch Entwickler zu, die relativ neu sind, Quereinsteiger, vielleicht auch einfach noch recht jung, gerade in der Ausbildung zum, äh, Medienverunstalter oder was weiß ich, ähm, ähm, und... 00:56:50.680 --> 00:56:52.300 Nee, Fully Stuck Developer. 00:56:52.300 --> 00:56:53.340 Fully Stuck Developer. 00:56:53.340 --> 00:56:54.320 Das ist die neue Ausbildung. 00:56:54.320 --> 00:57:01.540 Ähm, und vielleicht, also manchen Leuten sagt das vielleicht einfach gar nicht, die wissen gar nicht, dass sie was falsch machen. Ich glaube nicht mal, dass das Boshaftigkeit ist. 00:57:01.540 --> 00:57:09.480 Vielleicht ist es manchmal einfach Faulheit, aber ich glaube, es ist auch ganz viel Unwissen und ich meine, da sind wir ja hier, um unseren Bildungsauftrag zu erfüllen. 00:57:09.480 --> 00:57:09.680 Nee. 00:57:10.020 --> 00:57:16.000 Ähm, und nicht einfach nur, um zu rage. Also ich glaube, wir machen jetzt ein bisschen guter Cop, böser Cop. Du bist ja böse Cop, ich bin der gute Cop. 00:57:16.000 --> 00:57:22.440 Das habe ich gerade auch gedacht, aber es ist mir egal, wenn du, wenn du an der Stelle guter Cop sein willst, dann sei es so, aber das habt ihr gar nicht verdient, dass es einen guten Cop gibt. 00:57:22.440 --> 00:57:33.840 Eigentlich habt ihr, habt ihr hier zwei Sensenmänner verdient, die hinter euch herrennen mit einer Peitsche und, äh, einer Knarre und einem Baseballschläger mit Stacheldraht drumherum. 00:57:34.360 --> 00:57:34.760 Brennend. 00:57:34.760 --> 00:57:35.940 Brennend. 00:57:35.940 --> 00:57:37.520 Also das bin ich gerade. 00:57:37.520 --> 00:57:37.900 Aha. 00:57:37.900 --> 00:57:50.460 Weil seit 15 Jahren erzählen wir euch dieselbe Scheiße. Seit 15 Jahren sagen wir euch, benutzt vernünftige HTML-Texts, benutzt das, was im Standard vorgesehen ist und was nehmt ihr Diffs? 00:57:50.460 --> 00:57:54.440 Also wir im Sinne von diesem Podcast, den es noch nicht mal ein Jahr gibt, oder? 00:57:54.440 --> 00:58:04.180 Dieser Podcast, ja, seit 15 Jahren erzählen wir euch das. Wir haben nämlich die Zeitmaschine erfunden. Morgen haben wir die erfunden. Und da erzählen wir euch das. 00:58:04.360 --> 00:58:14.640 Ne, die, die ganze, die ganze, die, also, oh Gott, jetzt muss ich aufpassen, was ich sag. Die ganzen Devalopper, die was auf sich halten. Aus meiner Sicht. 00:58:14.640 --> 00:58:18.680 Ach, der Bobby von, ich bin immer noch hier auf Cameo, Entschuldigung. 00:58:19.260 --> 00:58:33.080 Der, der Bobby, der Bobby von, ähm, von, wie heißt, wie heißt, wie heißt diese Sendung nochmal? Äh, diese, ach, diese, diese, diese, diese fünf, diese fünf Schwulen, die irgendwie den Leuten dieses Haus umdekorieren und, und dir neuen Bart, Bartfrisur verpassen. 00:58:33.080 --> 00:58:34.480 Weißt du, wie, weißt du, wen ich meine? 00:58:34.480 --> 00:58:34.880 Äh, nee. 00:58:35.640 --> 00:58:39.280 So eine Netflix-Serie. Der Bobby von denen, der kann's für 184 Euro. 00:58:39.280 --> 00:58:42.480 Egal. 00:58:42.480 --> 00:58:43.900 Mach mal das Tab zu jetzt. 00:58:43.900 --> 00:58:45.460 Ich hab's jetzt, ich hab's jetzt, ich hab's jetzt zugemacht. 00:58:45.460 --> 00:58:45.760 Okay. 00:58:45.760 --> 00:58:57.020 Also, seit 15 Jahren erzählen wir dieselbe Scheiße und ich will, ich will, dass das aufhört. Ähm, wir, wir sagen euch auch noch ein bisschen was Konkreteres dazu. Ich hab jetzt viel rumgeraged, ihr Full-Suck-Developer. Äh. 00:58:58.020 --> 00:59:03.880 Mir fallen keine dummen Namen mehr ein. Ich hab's schon überlegt, ob wir die Sendung, äh, nennen sollen, warum ihr alle blöde Hurensöhne seid. 00:59:03.880 --> 00:59:04.700 Nein. 00:59:04.700 --> 00:59:05.540 Egal. 00:59:05.540 --> 00:59:10.340 Ganz ruhig. Einmal tief durchatmen, nimm mal einen Schluck Bier. 00:59:10.340 --> 00:59:11.880 Ich hab kein Bier mehr. 00:59:11.880 --> 00:59:12.460 Ach, verdammt. 00:59:12.460 --> 00:59:15.520 Ich muss, ich kann mir noch eins holen, aber dann musst du kurz reden. 00:59:15.520 --> 00:59:20.240 Ich hab aber gar nichts zu sagen. Also, nee, zum, also, zum Thema hab ich jetzt gar nichts zu erzählen. 00:59:20.240 --> 00:59:23.680 Du könntest, ähm, du könntest in der Zeit, ähm. 00:59:23.680 --> 00:59:26.340 Wir machen einfach, du gehst holen, wir machen so lang Feuerwerk. 00:59:27.060 --> 00:59:28.860 Okay, wir machen so lang Feuerwerk. Bis gleich. 00:59:28.860 --> 00:59:51.140 So, Zeitzähnen voll genutzt, würde ich sagen. 00:59:51.140 --> 00:59:52.780 Oh, Mann. 00:59:52.780 --> 00:59:54.060 So. 00:59:56.100 --> 01:00:00.080 Also, ich hab grad schon gesagt, Diffs mit Klickhändlern gehen mir auf den Sack. 01:00:00.080 --> 01:00:02.880 Ähm, nee, wir fangen mal, fangen wir mal von vorne an. 01:00:02.880 --> 01:00:09.520 Also, ich hab grad die Tage, ähm, da kam das jetzt auch nochmal her, wo ich mich ein bisschen damit beschäftigt hab, ähm, einen kleinen Vortrag, äh, zu dem Thema gehalten. 01:00:09.520 --> 01:00:11.960 Der wurde dann auch, ähm, noch vertwittert. 01:00:11.960 --> 01:00:15.040 Ich hab da zum ersten Mal, ähm, Entschuldigung. 01:00:15.040 --> 01:00:16.160 Huch. 01:00:16.160 --> 01:00:19.100 Boah, ihr wisst jetzt, wie ich drauf bin. So, das kommt auch rein, das wird nicht rausgeschnitten. 01:00:19.640 --> 01:00:26.740 Ähm, also, ich hab mal Twitter als Medium genutzt, um einen kleinen Artikel zu schreiben. Ähm, das fanden nicht alle witzig. 01:00:26.840 --> 01:00:32.400 Ich glaub, Konstantin, du hast das auch gesehen, dass da, ähm, dass da jemand gesagt hat, ey, mach doch einen Blogartikel. 01:00:32.580 --> 01:00:37.080 Und ich so, nee, ich mach jetzt mal hier, ich versuch jetzt mal ein Fett zu schreiben bei Twitter, ich mach jetzt mal keinen Blogartikel. 01:00:37.080 --> 01:00:39.940 Ähm, das ist einfach, das ist so, so alt. 01:00:39.940 --> 01:00:43.480 Also, wenn, dann würde ich ein TikTok machen oder ein, ich glaub, Snapchat ist auch schon wieder alt, oder? 01:00:43.480 --> 01:00:46.140 Wenn, dann, wenn, dann würde ich ein TikTok machen, dann muss das in eine Minute passen. 01:00:46.140 --> 01:00:50.440 Nee, Like für Teil zwei, glaub ich, sagt man bei TikTok. 01:00:50.440 --> 01:00:51.100 Ach. 01:00:51.100 --> 01:00:54.520 Und dann muss man mit so einem krassen, mit so einem krassen Cliffhanger-Muster enden. 01:00:54.520 --> 01:00:57.800 Und dann sagst du, Like für Teil zwei oder, genau, mach das. 01:00:57.800 --> 01:01:01.160 Und dann passiert aber nie was. Also, den Teil zwei, den gibt's dann einfach nie. 01:01:01.460 --> 01:01:02.880 Genau, Teil zwei gibt's einfach nie. 01:01:02.880 --> 01:01:06.640 Ähm, egal, so, das ist das, da hangele ich mich jetzt auch ein bisschen durch. 01:01:06.640 --> 01:01:11.480 Äh, der, der Link zu dem kleinen Thread, ähm, der kommt auf jeden Fall in die Shownotes. 01:01:11.480 --> 01:01:14.860 Genau, also, wo fang ich an? 01:01:14.860 --> 01:01:19.180 Es gibt ungefähr 100 HTML-Elemente. 01:01:19.180 --> 01:01:22.800 Und ich hab mir vorher noch überlegt, ob wir noch ein kleines Spiel spielen sollen, 01:01:22.800 --> 01:01:26.180 ob wir zufällig über welche reden sollen, ähm, ohne dass wir vorher wissen, welche. 01:01:26.180 --> 01:01:28.060 Das können wir vielleicht später noch machen. 01:01:28.060 --> 01:01:31.340 Ähm, also zum Beispiel, ähm, 01:01:31.340 --> 01:01:35.360 Ich nenne jetzt mal ein paar HTML-Elemente, die nicht so verbreitet sind oder die nicht unbedingt jeder kennt. 01:01:35.360 --> 01:01:42.060 Zum Beispiel das Dell-Element oder das Meta-Element oder Progress oder Figure. 01:01:42.060 --> 01:01:44.580 Mittlerweile gibt's, glaub ich, auch das Picture-Element. 01:01:44.580 --> 01:01:49.480 Ähm, einfach mal so als Beispiel für Elemente, die, die man vielleicht noch nicht benutzt hat. 01:01:49.600 --> 01:01:50.980 Hast du was davon schon mal benutzt? 01:01:50.980 --> 01:01:58.140 Ähm, ich glaube, Dell mal in einem Blog-Beitrag, ähm, Figure tatsächlich im Zusammenhang mit Bildunterschriften. 01:01:58.140 --> 01:02:01.320 Ähm, was war das andere, was du noch gesagt hast, Dell? 01:02:01.320 --> 01:02:03.040 Ähm, Meter und Progress. 01:02:04.240 --> 01:02:06.460 Meter? Also, Meter-Tag. 01:02:06.460 --> 01:02:08.260 Nee, M-E-T-A-G-E-R. 01:02:08.260 --> 01:02:08.260 M-E-T-A-G-E-R. 01:02:08.260 --> 01:02:08.820 M-E-T-A-G-E-R. 01:02:08.820 --> 01:02:10.960 Ach, M-E-T-A-G-E-R. 01:02:10.960 --> 01:02:15.460 Ach so, äh, hier so, so Progress, äh, nee, ist auch wieder was anderes, oder? 01:02:15.460 --> 01:02:16.960 Nee, also ich glaub, ich glaub nicht. 01:02:16.960 --> 01:02:17.860 Ja, Progress und Meter, gibt's beide. 01:02:17.860 --> 01:02:20.100 Okay, Meter, nee, das hat mir jetzt tatsächlich gar nix. 01:02:21.840 --> 01:02:24.920 Aha, äh, Wolfscraft, das Helle. 01:02:24.920 --> 01:02:28.700 Kann mir jetzt Geld überweisen, weil ich jetzt grad Werbung dafür gemacht hab. 01:02:28.700 --> 01:02:40.900 Ähm, also, ich, wir haben auch, äh, den Link in den Shownotes, ähm, zu der, zu dem MTN, äh, zu der MTN HTML Elements Reference, wo die ganzen HTML Elemente aufgelistet sind. 01:02:40.900 --> 01:02:47.160 Da sind auch, äh, aufpassen, da gibt's einen Bereich Obsolid und Deprecated Elements, die solltet ihr nicht mehr verwenden. 01:02:47.160 --> 01:02:51.300 Ähm, das, das sind die, die mittlerweile rausgeflogen sind aus dem Standard. 01:02:51.840 --> 01:02:58.500 Da sind ganz interessante Sachen drin, die man einfach, warte mal, ist da, eins verwenden wir bei uns auf der Homepage, glaub ich, nämlich Marquis. 01:02:58.500 --> 01:03:01.100 Das ist in der Liste drin. 01:03:01.100 --> 01:03:09.620 Ähm, für die, die es nicht wissen, das Marquis-Element, das macht so einen Lauftext auf der Seite, ähm, tatsächlich komplett ohne JavaScript und ohne CSS-Animation. 01:03:09.620 --> 01:03:11.020 Man braucht einfach nur das Marquis-Tag. 01:03:11.020 --> 01:03:15.280 Ähm, das funktioniert tatsächlich auch, äh, in Chrome und in Firefox immer noch, komischerweise. 01:03:15.280 --> 01:03:19.760 Ähm, ja, ich will gar nicht so sehr auf die Elemente eingehen, die es nicht mehr gibt. 01:03:19.760 --> 01:03:21.580 Ähm, vielleicht, äh, vielleicht. 01:03:21.840 --> 01:03:26.500 Ähm, noch sowas wie Framesets gibt's nicht mehr, falls ihr das noch kennt, ähm, von früher, äh, ist nicht mehr. 01:03:26.500 --> 01:03:29.280 Werde die auch nicht mehr unter, äh, supported, kann ich gar nicht mehr bauen, oder? 01:03:29.280 --> 01:03:31.880 Ja, doch, die werden, glaub ich, schon, die werden schon noch supported, aber die sind ... 01:03:31.880 --> 01:03:32.660 Warum sollte ich das tun? 01:03:32.660 --> 01:03:34.260 ... eigentlich aus, die sind Deprecated. 01:03:34.260 --> 01:03:39.280 Äh, ja, was auch interessant ist, Akronymen zum Beispiel gibt's nicht mehr. 01:03:39.280 --> 01:03:43.200 Ich kann mich noch erinnern, dass ich das mal eine Zeit lang noch aktiv genutzt hab, aber Akronymen gibt's nicht mehr. 01:03:43.280 --> 01:03:46.720 Man nutzt jetzt nur noch A-B-B-R für Abbreviation, also für Abkürzung. 01:03:46.720 --> 01:03:57.620 Aber egal. Ähm, wir bleiben mal, wir bleiben mal erst ein bisschen, ähm, bei, bei Sachen, die man tatsächlich irgendwie, äh, so im Alltag braucht. 01:03:57.740 --> 01:04:01.420 Ich mein, es gibt sehr, sehr viele spezielle Elemente, aber wir bleiben mal so beim Alltag. 01:04:01.420 --> 01:04:08.560 Und, äh, als, äh, wie der, also danke für den, äh, an den Konstantin noch mal kurz für vorhin die kurze Definition, weil die wär jetzt auch gekommen. 01:04:08.560 --> 01:04:09.040 Ach, sorry. 01:04:09.040 --> 01:04:10.300 Ich kann's auch noch mal kurz sagen. 01:04:10.300 --> 01:04:23.260 Also, die Kurzdefinition in der englischen Wikipedia, ähm, ist halt, ähm, ja, Semantics ist the study of meaning, also die, die, äh, die Wissenschaft, keine Ahnung, ist es vielleicht ein bisschen übertrieben, der Bedeutung. 01:04:23.880 --> 01:04:34.920 Also, es geht um die Bedeutung von, äh, von Wörtern oder von Sätzen oder, äh, Larger Units haben sie es noch genannt, also komplette, äh, längere Texte oder, ja, Bedeutung. 01:04:34.920 --> 01:04:43.040 Ähm, und Diff, weil ich mich vorhin so viel über Diffs ausgelassen habe, ist das Element, das in HTML überhaupt gar keine Bedeutung hat. 01:04:43.040 --> 01:04:48.420 Ähm, das bedeutet einfach nur, dies ist ein, das ist einfach nur ein Container. 01:04:48.580 --> 01:04:54.020 Das sagt überhaupt nichts über den Inhalt, über die, über die Funktion Diff, Division, einfach nur ein Container. 01:04:54.020 --> 01:05:11.560 Deswegen, wenn ihr es vermeiden könnt, ein Diff zu verwenden, es gibt, es gibt gute Anwendungsfälle dafür, wenn ihr, wenn ihr einfach wirklich tatsächlich nur ein Container braucht, der sonst gar nichts ausdrücken soll, also irgendwie so ein, ähm, man braucht irgendwie noch einen Wrapper innerhalb von einem Element, um irgendwas anzuzeigen. 01:05:11.700 --> 01:05:18.200 Oft halt, oft braucht man es irgendwie für CSS. Ähm, dann ist ein Diff das richtige Element, aber in den meisten Fällen, in den meisten anderen Fällen einfach nicht. 01:05:18.200 --> 01:05:31.780 Ähm, warum sollte man sich eigentlich darum kümmern? Ich meine, man kann ja sagen, warum mache ich nicht Diff? Das ist doch schön einfach. Äh, Diff hat irgendwie auch wenig Basis-Styling im Browser, was man irgendwie überschreiben will. 01:05:31.980 --> 01:05:40.140 Warum soll ich denn jetzt eigentlich eine Liste nehmen? Also ein UL mit LI-Element oder sowas. Ich kann es doch auch mit Diffs bauen, da habe ich irgendwie keinen Ärger, kann alles irgendwie schön stylen. 01:05:40.140 --> 01:05:49.780 Naja, Lesbarkeit ist mein Hauptargument, ähm, für semantisches HTML. Und zwar Lesbarkeit in ganz vielen verschiedenen Richtungen. 01:05:50.040 --> 01:05:59.120 Also, es ist sowohl für den Developer, der den Code vielleicht nicht selbst geschrieben hat, oder für euch, äh, in zwei Monaten, weil in zwei Monaten hat man vergessen, was man vor zwei Monaten geschrieben hat. 01:05:59.120 --> 01:06:03.540 Also bei mir ist das zumindest so. Frage ich mich oft so, wer hat denn die Scheiße geschrieben? Und dann gucke ich, dann war ich selbst. 01:06:03.540 --> 01:06:04.060 Ach, das war ich. 01:06:04.060 --> 01:06:14.620 Ach, das war, Konstantin, ich glaube, bei dir ist das nicht so das Problem. Ähm, ich, ihr seid ja nur zu zweit bei euch. Äh, da stellt sich die Frage nicht so, wer hat's geschrieben? 01:06:15.120 --> 01:06:17.740 Das sieht man dann in der Regel am Code-Style schon irgendwie so. 01:06:17.740 --> 01:06:23.940 Ah, ja, okay, also dann ist es, dann ist es ja noch einfacher. Das heißt, du brauchst gar nicht in Git zu gucken, ähm, wer's committed hat. 01:06:23.940 --> 01:06:36.720 Ja, doch, wir haben schon auch, äh, haben wir ja auch in der Folge, jetzt muss ich, äh, gucken, in unserer Vergleichsfolge hier, ähm, große Firma versus Dingens, äh, kleine Klitsche, Folge 9 war das. 01:06:36.720 --> 01:06:43.240 Ähm, wir haben schon auch Versioning, also ich sehe das dann schon, aber meistens steht da halt mein Name in der kompletten History. 01:06:44.000 --> 01:06:45.380 Und dann ist es recht eindeutig. 01:06:45.380 --> 01:06:57.080 Ja, genau. Also, ich war bei Lesbarkeit. Lesbarkeit für dich selbst. Also, du gibst dem Ganzen viel mehr Struktur. Einfach nur beim ersten Blick drauf kannst du viel besser verstehen, was soll denn eigentlich was sein. 01:06:57.080 --> 01:07:02.580 Das ist für dich gut. Das ist aber auch für deine Kollegen gut, weil die das auch dann schneller, äh, und besser verstehen können. 01:07:02.620 --> 01:07:18.840 Was aber noch viel wichtiger ist, ähm, sind, ist Lesbarkeit, ähm, für Maschinen, ähm, im weitesten Sinne. Also, das Thema SEO ist da ganz groß, ähm, und lasst euch nicht von irgendwelchen, äh, dunklen SEO-Priestern irgendeine komische Sache, äh, aufschwätzen. 01:07:18.900 --> 01:07:26.160 Guckt lieber vorher mal nach, ob das auch vernünftiges HTML ist, weil im SEO, da gibt's eine Menge merkwürdiger Leute mit sehr merkwürdigen Ansichten schon immer. 01:07:26.160 --> 01:07:32.000 Ähm, das, das, das hat angefangen mit, äh, in Metatext Coca-Cola reinzuschreiben früher. 01:07:32.060 --> 01:07:34.180 Ganz, ganz früher. 01:07:34.180 --> 01:07:34.600 Nee. 01:07:34.600 --> 01:07:49.480 Doch, doch, da war das so populäre, populäre Begriffe in die Metatext reinschreiben. Ich weiß nicht genau, ob das überhaupt jemals was gebracht hat, aber das gab's als Tipps. Das ist schon sehr, sehr lange her. Das war so in der Zeit, als ich angefangen hab. Egal, das ist ausgeschweift. 01:07:49.480 --> 01:07:53.980 Vergesst, was ich gesagt hab. Macht das auch, macht das nicht Coca-Cola in, äh, in die Metatext reinschreiben. 01:07:54.860 --> 01:08:21.580 Ähm, Lesbarkeit für Maschinen. Also SEO, also Suchmaschinen logischerweise, die erkennen viel besser, ähm, die Struktur von eurem Content und können verstehen, was ist wichtig, was ist nicht wichtig. Ähm, dafür ist es, dafür ist echt wichtig. Ähm, aber auch zum Beispiel für Screenreader, also da sind wir wieder bei Accessibility, also alles, alles, was versucht, das HTML zu lesen, der tut sich viel, viel leichter, wenn das die Struktur kennt. 01:08:21.580 --> 01:08:40.160 Also beim Screenreader, der kann zum Beispiel von Überschrift zu Überschrift springen oder von Liste zu Liste oder, äh, von, ähm, von Section zu Section. Da gibt's Shortcuts in den Screenreadern, dass die von, von, äh, dass die da durch die einzelnen Elemente durchspringen können. Da kann der Screenreader Nutzer viel schneller navigieren. Hast du noch ein Beispiel? 01:08:40.160 --> 01:09:06.040 Ja, die halt auch vorlesen, äh, das ist ein Navigationselement und das enthält Links, ja, und nicht einfach, das ist ein DÜV und das enthält Spans. Ähm, und das wird entsprechend dann halt auch vorgelesen, wenn man's nicht sehen kann. Äh, was mir noch einfällt, äh, das geht, es gehört schon zu SEO auch, geht aber ein bisschen drüber hinaus, diese, diese Snippets in den Suchergebnissen, wo dir dann, ähm, FAQ-mäßig zum Beispiel häufige Fragen und Antworten, äh, zu irgendwas, was du suchst, gegeben werden. 01:09:06.040 --> 01:09:28.140 Oder Sprachassistenten, die beziehen sich auch, also gerade Google Home nutzt natürlich die, die Suchergebnisse von Google auch. Ähm, ich denke mal, dass, dass, äh, Alexa das ähnlich macht von, von Amazon. Ähm, weiß nicht, was die da als Datengrundlage haben. Ähm, und das ist halt auch, wenn das entsprechend ausgezeichnet ist als FAQ, dann weiß Google, das ist eine FAQ, da gehört die Frage dazu und das ist die Antwort dazu. 01:09:28.140 --> 01:09:38.420 Also, das heißt, wenn ich sage, okay, Google, äh, wie hoch, wie groß ist die Einwohnerzahl von Uruguay zum Beispiel, dann kann Google anhand der Tags das sich zusammenbasteln, was wohl die richtige Antwort ist. 01:09:38.420 --> 01:09:45.620 Ja, sehr praktisch. Ähm, da sind wir quasi schon mit, äh, ganz am Ende von dem, was ich sagen wollte, aber das ist gut. 01:09:45.620 --> 01:09:46.400 Gut, dann hören wir jetzt auf. 01:09:46.400 --> 01:10:14.700 Nein, das ist super. Ähm, dann als nächstes, ich meine, ich habe, ich habe ja bis jetzt nur über Struktur gesprochen. Ähm, ähm, der, der nächste Block wären interaktive Elemente. Äh, da, da mache ich jetzt nur mal einen kurzen Abriss, da kommen später noch Beispiele. Ähm, interaktive Elemente, da ist das noch viel, viel, viel wichtiger, dass man jetzt nicht zum Beispiel den Diff nimmt mit einem Klicklistener oder irgendeinen Text vor ein Inputfeld schreibt, der, der den Inhalt von dem Inputfeld beschreiben soll. 01:10:14.700 --> 01:10:42.460 Ähm, äh, ja, gut, ja, genau, Diff, Diff mit Klickhändler habe ich gerade gesagt, ähm, sondern es ist da schon wichtig, dass man, dass man das richtige Element dafür nimmt, weil, äh, das Inputfeld beispielsweise im Screenreader nur dann richtig beschrieben werden kann, wenn ein Label-Element verwendet wird, ähm, und nicht, wenn ich irgendwie ein Diff davor schreibe, dann kann man es vielleicht irgendwie erraten, aber viele Screenreader, die gehen, wenn man in ein Formular rein, äh, tappt, in so einen sogenannten Formular-Modus rein. 01:10:43.000 --> 01:10:50.780 Und, äh, und die lesen dann nur noch vor, was zu dem Formular gehört. Und, äh, wenn ich da jetzt irgendwie einen anderen Text zwischen reinschreibe, dann kann das sein, dass der da komplett untergeht. 01:10:51.200 --> 01:11:03.380 Also, Level-Elemente und dann, äh, bei interaktiven Elementen, da gehe ich gleich noch ein bisschen näher drauf ein, ähm, aber jetzt erst mal ein, ein kleines Beispiel. Ich weiß jetzt, das wird jetzt schwierig. Ich glaube, ohne was, ohne dass man es sehen kann, wird es, glaube ich, schwer zu verstehen. 01:11:04.200 --> 01:11:11.600 Ähm, deswegen versuche ich es oberflächlich zu erklären und ihr könnt euch die Links dann später in der, äh, in der Folgenbeschreibung, in den Shownotes, äh, angucken. 01:11:12.000 --> 01:11:19.780 Ähm, was ich da für, in diesem Vortrag für ein kleines Beispiel gehabt habe, war, ähm, der Kommentarbereich, äh, unserer Seite. Da könnt ihr auch gerne mal reingucken in das HTML. 01:11:19.780 --> 01:11:28.040 Ähm, und da habe ich, äh, äh, bei CodePen mal ein kleines Beispiel gebaut. Einmal alles mit Diffs, soweit es geht. 01:11:28.560 --> 01:11:36.020 Äh, und dann unten drunter mal so mit semantischem HTML, so wie wir es bei uns auch auf der Seite haben. Also, das, ich, ich lese, ich lese mal ganz grob vor. 01:11:36.020 --> 01:11:42.360 Diff, Diff, Diff, Diff, Image, Diff, Diff, Diff, Slash, Diff, Slash, Diff, Diff, P, Diff. 01:11:42.360 --> 01:11:45.060 So, äh, was verstanden? Nö. 01:11:45.060 --> 01:11:48.060 Und jetzt lese ich mal das andere vor, genauso oberflächlich. 01:11:48.060 --> 01:11:51.660 Section, H2, also Headline 2. 01:11:51.660 --> 01:11:57.420 Artikel, Header, Image, H3, P, Span, Time. 01:11:58.560 --> 01:11:59.680 Und dann gehen welche wieder zu. 01:11:59.680 --> 01:12:05.260 Section, P, Footer, Artikel, und so weiter. 01:12:05.260 --> 01:12:09.140 Das ist schon ein, das ist schon viel besser verständlich. 01:12:09.140 --> 01:12:11.680 Ja, also, da kann man sich eben schon besser drunter vorstellen. 01:12:11.680 --> 01:12:14.880 Also, da könnte man sich, ja, Footer und Time, also, da wird irgendwas aufgelistet, äh, 01:12:14.880 --> 01:12:19.840 entweder ist es ein Blogpost, der eine Zeitangabe hat, oder irgendwelche Events, die einen Zeitstempel haben. 01:12:19.840 --> 01:12:21.740 Also, das ist schon deutlicher. 01:12:21.740 --> 01:12:25.700 Ja, also, würde ich auch sagen, ähm, auf jeden Fall mal angucken. 01:12:25.820 --> 01:12:30.160 Ich glaube, wenn man es, wenn man es sieht, ist es auf jeden Fall noch ein bisschen, bisschen eindeutiger. 01:12:30.160 --> 01:12:38.240 Ähm, bei den interaktiven, aber Moment, jetzt muss ich gerade gucken, nicht, dass ich, äh, ich muss in meinem Skript hier verrutschen. 01:12:38.240 --> 01:12:42.560 Ähm, generell, zu interaktiv kommen wir gleich. 01:12:42.900 --> 01:12:52.280 Generell sollte man sich immer die Frage stellen, wenn man HTML schreibt, bei, bei jedem Element eigentlich, ähm, was ist es, was tut's, und was meint es denn im Kontext? 01:12:52.280 --> 01:13:00.620 Ähm, und danach kann man dann, wenn, wenn man die Fragen für sich beantwortet hat, und vielleicht tut's ja gar nichts, ähm, dann, dann kann ich schon einige HTML-Elemente ausschließen. 01:13:02.080 --> 01:13:08.080 Dann kann ich in meine Liste gehen mit den HTML-Elementen bei MDN und mal gucken, was passt denn da drauf jetzt gut. 01:13:08.080 --> 01:13:11.540 Die sind auch relativ gut strukturiert, ähm, in einzelne Unterkategorien. 01:13:11.540 --> 01:13:16.180 Das heißt, ich muss nicht alle, alle 100 von oben nach unten, oh Gott, das Bier, das hätte ich vielleicht nicht trinken sollen. 01:13:16.180 --> 01:13:21.880 Ähm, ähm, von oben nach unten durchlesen, sondern man, äh, man kann durch die Kategorien sich so ein bisschen navigieren. 01:13:22.000 --> 01:13:30.880 Also es gibt Document-Meta-Data, Sectioning-Root, Content-Sectioning, da sind so Sachen drin wie Article-Assight-Footer-Header, Main-Nav und so weiter. 01:13:30.880 --> 01:13:46.340 Text-Content, da sind so was drin wie, äh, Listen, ähm, P für Paragraph, Blockquote und so, ähm, Inline-Semantics und so, ja, zum Beispiel, äh, ABBR, was wir vorhin schon angesprochen haben, äh, das Link-Element A. 01:13:46.340 --> 01:13:56.360 Ähm, Q für Quote, ähm, Small, äh, Strong, Sub, Sub, Time und so was, also Inline-Elemente und so weiter. 01:13:56.360 --> 01:14:00.840 Gibt es natürlich noch viele, viele weitere Kategorien, das nur mal so als, als Beispiel. 01:14:00.840 --> 01:14:12.300 Ähm, und wenn man es noch weiter treiben will, äh, dann das, was der Konstantin gesagt hat, wenn man noch mehr braucht als das, weil ich meine, manchmal kommt man an den Punkt, dass man, äh, sagt, ja, ich hab jetzt hier genau das, 01:14:13.140 --> 01:14:23.100 dafür gibt's aber kein HTML-Element, dann hilft man sich aus eigentlich immer mit Microdata, also sowas wie Microformates, ähm, da hab ich jetzt vor kurzem festgestellt, ist offenbar immer noch nicht tot, 01:14:23.100 --> 01:14:32.460 da ist nämlich der letzte Blogartikel tatsächlich aus diesem Jahr, microformates.org oder, äh, schema.org oder schema.org, ich weiß nicht genau, wie man's ausspricht. 01:14:32.860 --> 01:14:37.000 Ich glaub, das haben wir auch bei uns eingesetzt, so ein bisschen, ich weiß gar nicht mehr genau, für was auf der Podcast. 01:14:37.000 --> 01:14:46.020 Ähm, um tatsächlich die Folgen als Folgen zu definieren, also dass man wirklich sagen kann, das ist ein Podcast, der hat Folgen, das hier ist eine Folge, die Folge hat diesen Titel und so weiter und so fort, ja. 01:14:46.020 --> 01:14:57.380 Genau, und wenn ihr uns googelt, also ich weiß nicht, ob das jetzt von, von, ähm, von Google Podcasts kommt oder ob das durch Microdata kommt, aber dann kann man tatsächlich durch die einzelnen Folgen durchnavigieren, hast du das schon mal gesehen? 01:14:57.380 --> 01:14:59.160 Ja, das ist mir vor kurzem zum ersten Mal aufgefallen. 01:14:59.160 --> 01:15:04.820 Also bei Google, wo wir das vorne eingeben und dann, äh, kommt man da, sieht man direkt die Folgen präsentiert, ja, das ist ganz cool. 01:15:04.820 --> 01:15:13.600 Ja, wie gesagt, ich weiß jetzt nicht, ob das tatsächlich durch unser Microdata kommt oder durch, durch Google Podcasts, was da auch gefunden wird, eventuell, aber bestimmt Microdata. 01:15:13.600 --> 01:15:15.620 Behaupten wir jetzt einfach mal. 01:15:15.620 --> 01:15:30.220 Nein, ich hab's tatsächlich, äh, festgestellt, ähm, bei unseren Suchergebnissen von unserer Seite, also 48design.com oder .de, äh, die News tauchen in Google dann wirklich als News auf, das heißt, ich sehe auch ein Datum an der Seite. 01:15:31.080 --> 01:15:37.780 Was nicht der Fall ist, wenn ich nicht entsprechend einen Date-Tag setze oder diese Item-Props mit Microdata, also das macht tatsächlich einen Unterschied. 01:15:37.780 --> 01:15:45.280 Das hab ich nämlich beim Relaunch erst vergessen gehabt und dann war, war das nicht mehr da, was vorher ausgezeichnet war und dann hab ich das wieder eingefügt und irgendwie zwei Wochen später war's wieder drin. 01:15:45.280 --> 01:15:48.740 Also man sieht da wirklich noch einen Unterschied in der, in der Auflistung. 01:15:48.740 --> 01:15:53.640 Und ich mein, alles, was mich irgendwie von den anderen Suchtreffern unterscheidet, ist erst mal gut. 01:15:53.640 --> 01:15:55.460 Ja. 01:15:55.460 --> 01:15:56.680 So als Eyecatcher. 01:15:56.680 --> 01:15:57.400 Auf jeden Fall, ja. 01:15:57.400 --> 01:16:16.100 Ähm, ja, ich glaub, das nächste Beispiel, was ich da hab, das, das schaut ihr euch am besten an, das ist sonst wirklich schwer zu verstehen, da hab ich so ein bisschen, ähm, beziehungsweise das Beispiel hab gar nicht ich gebaut, sondern das ist von, äh, von den Edge-Developern, glaub ich, ähm, die so ein bisschen Grid, CSS Grid gezeigt haben, 01:16:16.100 --> 01:16:43.180 aber in, in diesem Beispiel sind eine Menge Sectioning-Elements drin, also Header, Nav, äh, ich hab da noch ein UL reingepackt, Main, ähm, Site und Footer, ähm, das sind so die, die groben Elemente, mit denen man eine Seite grob strukturiert, das Beispiel einfach mal angucken vielleicht, äh, das ist, da, da sieht man dann mal so grob, wie man, wie man eine Seite heutzutage mit semantischen HTML-Elementen aufbaut, ähm, und da ist, ähm, oh Wunder, kein einziges Diff-Element drin in dem Beispiel, das braucht man nämlich eigentlich. 01:16:43.180 --> 01:17:07.940 Ich hätte ja noch einen kleinen Nachtrag zu dem, zu dem Microdata-Zeug, wer damit mal rumspielen will und das einfach mal ausprobieren will oder auch wirklich auf seiner Seite implementieren will, es gibt, äh, von Google das Test-Tool für strukturierte Daten, da kann man links einfach Markup reinhauen oder ich glaub, man kann auch eine UL angeben, ähm, und dann kriegt man das tatsächlich ausgewertet, wie Google das analysiert und auswertet, und, äh, auf der Basis hab ich mit bisschen Trial und Error das auch bei uns umgesetzt. 01:17:08.800 --> 01:17:11.840 Das ist ganz hilfreich, verlinke ich auch in den Shownotes auf jeden Fall. 01:17:11.840 --> 01:17:18.300 Und, äh, schaut mal, oder sucht mal danach und dann werdet ihr sehen, was ihr findet. Wer sucht, der findet, oder so. 01:17:18.300 --> 01:17:22.700 Das sind wir ganz oben. Wer nach dem Firmennamen sucht, findet uns ganz oben. 01:17:22.700 --> 01:17:25.160 Ja, ist doch super, ihr habt super SEO gemacht. 01:17:25.160 --> 01:17:31.620 Ja, ich hab tatsächlich auch so ein paar SEO-Experimente gemacht, die funktionieren auch, aber mehr will ich, äh, will ich da auch gar nicht verraten, weil sonst, äh. 01:17:31.620 --> 01:17:42.320 Okay, ich mach mal weiter. Also, wie gesagt, das, äh, Sectioning-Content-Beispiel, das schaut ihr euch am besten einfach mal an, das ist schwer zu beschreiben. 01:17:42.320 --> 01:17:46.160 Ähm, was mir wirklich sehr, sehr am Herzen liegt. 01:17:46.160 --> 01:18:00.220 Sehr, sehr, sehr, sehr, weil ich grad heute wieder ein Beispiel hatte, wo ich ein bisschen was getestet hab und wo das einfach so kolossal falsch gemacht wurde, ähm, dass, dass im Prinzip die ganze Seite unbenutzbar wurde für jemanden, der jetzt nicht die Maus benutzen kann. 01:18:00.220 --> 01:18:24.820 ähm, aus welchen Gründen auch immer, interaktive Elemente, ähm, also wenn's jetzt kein Formular ist, sondern etwas, ich klicke irgendwo drauf und dann passiert irgendwas, nehmt dafür keine Diffs mit Klickhändlern oder sowas, oder irgendwelche anderen Elemente mit Klickhändlern, da raste ich echt aus, wenn ich das seh, ähm, wenn das jemand macht, schick den zu mir, ich mach den zur Sau, das gibt's einfach nicht. 01:18:24.820 --> 01:18:30.580 Ich kann es mit den entsprechenden ARIA-Attributen ausstatten und dann wird's, dann sieht das schon wieder anders aus. 01:18:30.580 --> 01:18:32.120 Ja, aber sollte man auch nicht. 01:18:32.120 --> 01:18:35.880 Sollte man das tun, wenn man's auch einfach richtig machen könnte, semantisch, das ist die Sache. 01:18:35.880 --> 01:18:49.220 Genau, ARIA-Attribute, da geh ich eigentlich gar nicht drauf ein, jetzt, wollte ich gar nicht drauf eingehen, das ist nur das allerletzte, wenn du gar keinen weiteren Einfluss auf die HTML-Elemente nehmen kannst, aus irgendwelchen Gründen, dann darfst du ARIA-Attribute verwenden. 01:18:49.300 --> 01:18:53.080 Und wenn ich gar keinen Einfluss nehmen kann, dann kann ich die auch nicht nutzen, die Attribute. 01:18:53.080 --> 01:18:55.060 Ja, richtig, also im Zweifelsfall nimm einfach das richtige Element. 01:18:55.060 --> 01:19:00.000 Also wenn ich dazu komme, ein ARIA-Attribut einzutragen, dann kann ich auch gleich das richtige Element dafür verwenden. 01:19:00.000 --> 01:19:14.160 Ja, ich glaube, oft werden, äh, werden die richtigen Elemente, und ich sag gleich, welche da die richtigen sind, werden nicht verwendet, aufgrund, äh, von ihrem Basis-Styling im Browser, weil dann einer sagt, naja, aber wenn ich jetzt hier ein Span nehme, statt ein Button-Element. 01:19:14.600 --> 01:19:17.520 Dann muss ich ja Display-Blog setzen, oder Inline-Blog, wie schlimm. 01:19:17.520 --> 01:19:23.260 Dann muss ich ja hier, dann kann ich ja hier so und so stylen, und dann geht es ja ganz einfach um, beim Button muss ich ja diese ganzen Styles, die da schon drauf sind, wieder wegnehmen. 01:19:23.260 --> 01:19:24.040 Nimm ihn trotzdem. 01:19:24.040 --> 01:19:24.680 Ja. 01:19:24.680 --> 01:19:43.760 Es ist nämlich verdammt schwer, auch wenn, auch wenn du dir vorkommst wie der geilste Developer der Welt, es ist echt schwer, für jeden Browser das Standardverhalten nachzuimplementieren mit irgendwelchem JavaScript, auf so einem Stand, so, auf so einem Standard-Element, äh, wie Button oder A für Link. 01:19:44.180 --> 01:19:48.460 Also, wenn ihr ein interaktives Element habt, also eins, ich klicke drauf und es passiert was. 01:19:48.460 --> 01:19:54.420 Wenn es irgendwo hingeht, dann nimm ein A-Element, weil dann ist es einfach ein Link. 01:19:54.420 --> 01:20:04.240 Und, ähm, das muss ja nicht mal sein, dass der, dass der Link-Klick ausgelöst wird, im Sinne von, der geht jetzt auf eine andere Seite, sondern es kann ja auch sein, dass das alles mit Angular oder so gemacht wird, ja. 01:20:04.520 --> 01:20:09.240 Dann ist das ja quasi nur so ein Fake, aber nimm trotzdem ein A-Element, weil es einfach das Richtige ist dafür. 01:20:09.240 --> 01:20:17.820 Wenn es irgendwas anderes tut, nicht die Seite verlässt, ein Dropdown öffnet oder sonst irgendwas, dann nimm ein Button-Element. 01:20:17.820 --> 01:20:23.460 Richtig, und style das notfalls dann so, dass es aussieht wie ein normaler Link oder so, ja. 01:20:23.460 --> 01:20:30.980 Style es wie ein Link, das gibt's ja sogar, also wer Bootstrap verwendet, bei dem ist das ganz einfach, hab ich nämlich jetzt gerade die Tage wieder gehabt, den Fall. 01:20:31.280 --> 01:20:37.360 Es ist ganz einfach, da gibt's nämlich eine Klasse btn-link und damit hast du genau das schon erreicht. 01:20:37.360 --> 01:20:38.200 Perfekt. 01:20:38.200 --> 01:20:41.060 Also es ist in diversen Frameworks schon fest mit eingebaut. 01:20:41.060 --> 01:20:43.880 Das Styling hat nämlich nichts zu tun mit der Funktion. 01:20:43.880 --> 01:20:48.060 Die Funktion muss mit der Funktion übereinstimmen und nicht, nicht der Style. 01:20:48.060 --> 01:20:49.760 Den Style kannst du immer ändern. 01:20:49.760 --> 01:20:56.720 Also bei so gut wie jedem interaktiven Element nehmen wir jetzt mal Select, Select nehmen wir jetzt mal aus. 01:20:56.720 --> 01:21:00.620 Select ist immer noch so ein, so ein ungeliebtes Kind von den Browser-Herstellern. 01:21:01.160 --> 01:21:05.560 Ähm, aber ansonsten kannst du eigentlich alles vernünftig umstylen. 01:21:05.560 --> 01:21:06.920 Nimm das richtige Element. 01:21:06.920 --> 01:21:07.820 Warum eigentlich? 01:21:07.820 --> 01:21:10.720 Das wäre wieder was für unsere hier CSS-Wunschliste. 01:21:10.720 --> 01:21:14.760 Äh, das war Folge Nummer, äh, elf. 01:21:14.760 --> 01:21:17.000 Jäger der verlorenen CSS-Features. 01:21:17.000 --> 01:21:21.900 Das ist eigentlich, ich versteh's nicht, warum das nicht schon längst irgendwie stylbar ist, so ein Select. 01:21:21.900 --> 01:21:26.380 Ja, ähm, falls ihr jemanden kennt, der das weiß, oder falls ihr das selbst wisst. 01:21:26.380 --> 01:21:30.100 Oder der verantwortlich ist für solche Produktentscheidungen bei großen Browser-Herstellern. 01:21:30.100 --> 01:21:30.840 Sagt, schickt uns die Adresse. 01:21:31.040 --> 01:21:33.580 Schickt uns die Adresse, wir, wir schicken ein Geschenk. 01:21:33.580 --> 01:21:35.060 Den schicken wir was anderes als Sticker. 01:21:35.060 --> 01:21:36.660 Wir schicken ein Geschenk. 01:21:39.300 --> 01:21:54.300 Nein, nein, nein, nein, nein, nein, wir sind nett, äh, ich würde gerne mal diskutieren, ich würde gerne mal diskutieren darüber, über das Thema, so wie viele andere auch, aber ich glaube in unserer, in unserer CSS-Feature-Folge haben wir auch schon drüber diskutiert, dass da schon irgendwie, da sind Dinge passiert in den letzten Jahren. 01:21:55.160 --> 01:22:04.160 Das waren übrigens zwei, wir hatten das ja, das war ja zwei Teile, also Folge 10 und 11, wer das nachhören will, wo wir Wünsch dir was spielen und über Missing Features sprechen. 01:22:05.580 --> 01:22:22.900 Genau, ähm, mir wäre noch wichtig zu sagen an dieser Stelle, nachdem wir interaktive Elemente jetzt, glaube ich, abgehandelt haben, ich sage es nochmal, A für Elemente, die irgendwo, für einen Klick, der irgendwo hingeht und Button für ein Element, für einen Klick, der irgendwas tut und nicht wohin geht. 01:22:24.120 --> 01:22:39.100 Viele, wenn sie semantisches HTML hören, sagen dann, also, alterlernt das Wissen, außer wenn ihr jetzt in den letzten sieben Jahren oder so angefangen habt, HTML zu schreiben, habt ihr das wahrscheinlich nicht gehört, davor war das oft so, keine Tabellen verwenden, ähm, das stimmt aber nicht. 01:22:39.100 --> 01:22:45.980 Man kann immer noch HTML-Tabellarische Aufstellung ist, dann nehme ich natürlich eine Tabelle, weil das ist das einzig semantisch Richtige in dem Fall. 01:22:46.500 --> 01:22:55.940 Korrekt, ganz genau, und dazu gibt es auch einen schönen Bereich in dem MDN mit den ganzen Elementen für Tabellen, das scrolle ich jetzt gerade nochmal hin. 01:22:55.940 --> 01:23:04.520 Also, da habe ich auch schon Geschichten gesehen, ja, wo das dann, wo genau das Tabellenverhalten nachgebaut wurde mit irgendwie Grid oder Flexbox oder so, wo ich mir dann denke, warum? 01:23:05.800 --> 01:23:16.840 Ja, und ich habe, ich habe auch in letzter Zeit immer mal wieder gesehen, Listen verschiedenster Art, die sogar List wirklich als Klassenname drinstehen haben, List und List-Element, aber mit Diffs nachgebaut. 01:23:16.840 --> 01:23:18.380 Warum, Leute? Warum? 01:23:18.380 --> 01:23:25.960 Ja, weil dann muss ich die Bullets überschreiben, wenn ich die nicht haben will, dann muss ich ja List-Style-Type-Nan setzen und so, und das ist ja viel Arbeit. 01:23:25.960 --> 01:23:35.500 Zu den Tabellen noch ganz kurz, ähm, da würde ich, wollte ich noch gerne ein kurzes Ratespiel mit dir spielen, beziehungsweise einfach mal, ähm, nee, ist kein Ratespiel. 01:23:35.500 --> 01:23:37.900 Ihr dürft auch mitraten zu Hause. 01:23:37.900 --> 01:23:52.160 Ihr dürft auch mitraten, ihr dürft mitmachen, ähm, weil bei den Tabellen, da gibt es ein paar Elemente, die sind eher unüblich, die werden sehr selten verwendet, ähm, und ich wollte jetzt einfach mal fragen, hast du schon mal verwendet Caption? 01:23:52.160 --> 01:24:04.720 Ähm, tatsächlich habe ich das schon mal verwendet, ich kann dir jetzt aber nicht mal mehr sagen, was das genau tut, aber ich habe es schon mal eingebaut irgendwo, ähm, ich weiß aber nicht jetzt, wo es angezeigt wird oder so, nee. 01:24:05.200 --> 01:24:17.300 Caption ist, äh, die Caption oder, wie dieses Element schon sagt, oder der Titel, die Überschrift für die Tabelle und ist tatsächlich, wenn ich es richtig weiß, ist das sogar innerhalb des Table Tags, wird das, glaube ich, sogar reingeschrieben. 01:24:17.400 --> 01:24:19.260 Ja, genau, das wird innerhalb vom Table Tag verwendet. 01:24:19.260 --> 01:24:21.500 Steht dann aber oben drüber, oder wie wird das ausgegeben? 01:24:21.600 --> 01:24:40.900 Es wird, es steht oben drüber, ähm, beziehungsweise, warte mal, in dem Beispiel, das ich hier habe, steht es sogar unten drunter, ich glaube, dafür gibt es sogar extra CSS-Eigenschaften, warte mal, ja genau, Caption-Side ist eine CSS-Eigenschaft, Caption, Caption-Side und da steht Bottom und da kann ich, äh, Top oder Bottom, glaube ich, vergeben, das ist ja interessant, das habe ich, das wusste ich jetzt auch nicht mehr, habe ich gerade eben erst, äh, gesehen. 01:24:41.440 --> 01:25:01.040 Ähm, das einzige Mal, dass ich das eingesetzt habe, das ist schon wirklich lange her, ähm, und da habe ich es dann, glaube ich, am Ende wieder ausgebaut, weil, ähm, da gab es damals Styling-Probleme, das war nicht so einfach zu stylen und das hat nicht alles das machen können, was ich damals wollte und dann habe ich halt doch wieder eine normale Überschrift drüber gepackt, aber das ist wirklich sehr altes Wissen, es kann sein, dass das mittlerweile total gut geht. 01:25:01.040 --> 01:25:05.500 Und könnte ich vielleicht auch ein Figure-Element benutzen oder ist das wirklich nur für Bilder? 01:25:05.500 --> 01:25:10.400 Boah, das ist eine wirklich gute Frage, das weiß ich nicht. 01:25:10.400 --> 01:25:25.460 Ja, das ist mir gerade so spontan eingefallen, weil ich dachte, das ist ja eigentlich das Gleiche und also man, ich denke jetzt gerade wieder an den Print-Bereich oder an wissenschaftliche Abhandlungen, wo man dann oft in dem Fließtext dann, äh, Tabellen eben hat oder Bilder, die was beschreiben, wo da steht, äh, Sie, Figure, so und so viel. 01:25:25.460 --> 01:25:26.240 Also im Zweifel muss es dann ... 01:25:26.240 --> 01:25:32.000 Und dann würde ich mir denken, das ist ja eigentlich das Gleiche, ob das jetzt ein Bild ist oder eine Tabelle, es ist was Ergänzendes, wo ich eine Beschreibung drunter packe. 01:25:32.000 --> 01:25:38.600 Ja, im Zweifel muss es aber dann so aufgebaut sein, dass du Figure um die ganze Tabelle drum packst und deine Überschrift ist Fick Caption. 01:25:38.600 --> 01:25:39.720 Fick Caption, ja, mhm. 01:25:40.400 --> 01:25:45.840 Also so würde ich das, so fände ich das semantisch dann auch korrekt, weil es gibt ja sicher das Fick Caption. 01:25:45.840 --> 01:25:54.580 Vielleicht an der Stelle, also das passt ganz gut zu was, was ich mir, Go Figure, ähm, was ich mir aufgeschrieben hab, also es gibt manchmal kein richtig oder falsch. 01:25:55.120 --> 01:26:03.920 Oder zumindest gibt's mehrere Möglichkeiten ans Ziel zu kommen und es ist so, dass auch gestandene Senior-Entwickler, sag ich jetzt mal, ähm, auch nachfragen und das zur Diskussion stellen. 01:26:04.060 --> 01:26:12.480 Also ich hatte letztens, hab ich einen Tweet in der Timeline gehabt von, von jemandem, wo ich, wo ich dachte, ah, schau mal an, der, der weiß auch nicht alles oder sagt einfach, ja, so gehört es. 01:26:12.800 --> 01:26:19.000 Sondern der hat da zur Debatte gestellt, wie würdet ihr denn, das und das, ich weiß gar nicht mehr, um was das genau ging, wie würdet ihr das dann umsetzen? 01:26:19.000 --> 01:26:23.900 Hat einen Vorschlag gemacht, ähm, ich würde die und die Elemente nehmen und drumrum setzen, äh, was meint ihr denn? 01:26:24.560 --> 01:26:26.600 War das, äh, Wes Boss? 01:26:26.600 --> 01:26:26.920 Ja. 01:26:26.920 --> 01:26:29.540 Der hat nämlich gleich kurz um sowas mal geschrieben, ja. 01:26:29.540 --> 01:26:38.000 Ähm, ja, absolut, ich mein, der ist ja echt, der ist ja sogar super bekannt in der Szene, hat einen Podcast, der wahrscheinlich ungefähr 400.000 Hörer hat, mehr, äh, mehr Hörer hat als unserer, also. 01:26:38.000 --> 01:26:39.540 Ja, also zehn. 01:26:39.540 --> 01:26:42.200 Mindestens. 01:26:42.200 --> 01:26:47.500 Ähm, genau, also 800.000 Hörer. 01:26:47.500 --> 01:26:54.540 Äh, ja, nee, ähm, ich find das absolut berechtigt, das, das wollte ich eigentlich auch nur sagen. 01:26:54.560 --> 01:27:10.400 Das ist nicht einfach, also HTML-Semantik, genauso wenig wie Programmierung in der Programmierung, bei JavaScript, keine Ahnung, was für eine Sprache du programmierst, ähm, gibt's ja auch oft viele verschiedene Wege, um ans Ziel zu kommen und oftmals kristallisiert sich so eine Best-Practice raus, die ist aber vielleicht auch nicht immer für alles das, das Perfekte. 01:27:10.400 --> 01:27:24.460 Und es ist überhaupt gar keine Schande, äh, wenn man, wenn man nicht weiter weiß, einfach mal nachzufragen, einfach mal mit anderen zu sprechen, ähm, oftmals hat man sich, merkt man dann, dass man sich sogar schon mehr Gedanken drüber gemacht hat als andere, aber im besten Falle findet man jemanden, der sagt, 01:27:24.460 --> 01:27:27.480 Hey, du, genau das Problem hatte ich auch schon mal, probier mal so. 01:27:27.480 --> 01:27:38.860 Ja, und vor allem, also, bevor es wieder ein Diff wird, dann nimm lieber was, was, was an sich Sinn macht, von der Definition des Tags her, was Sinn macht und nicht einfach wieder ein Diff, weil bin ich mir jetzt grad nicht sicher. 01:27:38.860 --> 01:27:45.600 Also, wenn's, wenn's nicht komplett falsch klingt, das an der Stelle einzusetzen, dann doch lieber das als ein Diff, würde ich jetzt mal sagen. 01:27:46.140 --> 01:27:53.900 Ja, und oftmals landet man, also, äh, ich, wenn ich über Semantik nachdenke, das dauert dann oft lange, bei so komplizierten Sachen, bis ich da ans Ziel komme. 01:27:53.900 --> 01:28:01.600 Und dann meistens lande ich dann bei einer Verschachtelung von verschiedenen semantischen Elementen, um, äh, mit dem Versuch, das auszudrücken. 01:28:01.720 --> 01:28:23.420 Also, ihr habt's jetzt vorhin ja gehört, ähm, dieses Beispiel von den Kommentaren, das ist ja jetzt auch nicht, ich hab jetzt auch nicht ein Comment-Element, ähm, das gibt's halt nicht, sondern es ist eben ein Artikel mit einem Header, wo dann die Metainformationen drin sind, mit einer Section, wo dann der eigentliche Kommentar drin ist, und dann wieder mit einem Footer, ähm, wo nochmal ein Antworten-Link drin ist zu dem Kommentar. 01:28:23.420 --> 01:28:37.060 Also, ich hab mir da quasi mein Kommentar zusammengebaut aus verschiedenen anderen Elementen. Und das ist oft der Weg, den, den man am, den ich am Schluss dann einschlage, ist, aus dem, aus dem, was da ist, mir das bauen, Mensch, das mit dem Bier, das ist ja furchtbar. 01:28:37.060 --> 01:28:40.380 Lass es nochmal, komm, lass es nochmal laut raus. 01:28:40.380 --> 01:28:45.380 Nee, das ist jetzt, das, einmal, einmal hat es gereicht. Meinst du, ich soll, ich, mal gucken. 01:28:45.380 --> 01:28:48.840 Ja, dann ist es besser als dieses, man hat so das Gefühl, du kotzt gleich. 01:28:48.840 --> 01:28:51.580 Ja, wir rutschen in eine komische Ecke gerade, so. 01:28:52.180 --> 01:28:55.340 So. 01:28:55.340 --> 01:28:58.700 Ach, wo war ich? Ich war bei Tabellen. 01:28:58.700 --> 01:29:00.140 Genau. 01:29:00.140 --> 01:29:05.700 Ähm, jetzt, jetzt wäre der Teil in meinem kleinen Vortrag gekommen mit dem Quiz. 01:29:05.700 --> 01:29:08.180 Und ich weiß nicht, ob wir es spielen können. 01:29:08.180 --> 01:29:10.600 Ähm, wir können es aber versuchen. 01:29:10.600 --> 01:29:13.240 Kann ich dir einen Link schicken? 01:29:13.240 --> 01:29:14.720 Probier's. 01:29:14.720 --> 01:29:17.960 Kannst du den auch, kannst du den auch, kannst du den auch mal dann, äh, aufmachen? 01:29:17.960 --> 01:29:18.360 Nee. 01:29:18.360 --> 01:29:20.220 Nee, okay, gut. 01:29:20.940 --> 01:29:23.940 Ich schick dir, ich schick dir, ich schick dir mal einen Link. 01:29:23.940 --> 01:29:31.820 Ähm, und meine Aufgabe an dich ist jetzt erstmal, versuch mal, ähm, nicht auf die Titel zu gucken von den einzelnen Demos, die du da sagst. 01:29:31.820 --> 01:29:32.020 Okay. 01:29:32.620 --> 01:29:35.520 Das ist schwer, versuch mal nur die Bilder anzugucken. 01:29:35.520 --> 01:29:42.080 Ähm, und dann, ähm, vielleicht, vielleicht soll ich dir direkt ein konkretes Beispiel schicken. 01:29:42.080 --> 01:29:47.080 Ja, das sind jetzt, ich seh jetzt mehrere. Ich weiß nicht, ob ich jetzt auf der gleichen Seite schon bin, die du meinst. 01:29:47.080 --> 01:29:50.220 Ich nehm mal, ich nehm mal, ich nehm mal, ich nehm mal, ich nehm mal ein konkretes Beispiel, wir spielen das jetzt mal. 01:29:50.220 --> 01:29:56.360 Ähm, das ist jetzt Beispiel eins und das kommt dann auch, ähm, das kommt dann auch so in die Shownotes als Beispiel eins. 01:29:56.360 --> 01:29:56.560 Mhm. 01:29:56.560 --> 01:29:58.240 Ich notier das gleich mal. 01:29:58.240 --> 01:30:04.920 Ähm, und du sagst mir jetzt mal, ohne hinzugucken auch in den Code, diese gelben Dinger da. 01:30:04.920 --> 01:30:05.140 Mhm. 01:30:05.920 --> 01:30:07.600 Was für ein Element könnte das sein? 01:30:07.600 --> 01:30:08.060 Mark. 01:30:08.060 --> 01:30:12.280 Mensch, du bist zu gut. Hast du's, du hast es gesehen, oder? 01:30:12.280 --> 01:30:14.220 Nein, ich, nein, wirklich nicht. Also, nee. 01:30:14.220 --> 01:30:24.240 Ha! Super. Also, was haben wir hier vor uns? Wir haben so einen Text, der sieht aus wie manche, manche Elemente davon oder manche, manche Worte davon sind so, äh, gelb hinterlegt, wie mit dem Textmarker hinten dran geschrieben. 01:30:24.240 --> 01:30:30.840 Und das ist tatsächlich das Mark-Element und zwar in seinem Standard-Styling. Äh, ich weiß nicht, ob's den, du hast den Chrome offen wahrscheinlich. 01:30:30.840 --> 01:30:31.320 Äh, Firefox. 01:30:31.320 --> 01:30:35.900 Firefox, okay, genau. In Firefox ist das Standard-Styling, ähm, nimm, mach einfach ein Geld. 01:30:35.920 --> 01:30:43.480 Und das ist das Mark-Element tatsächlich genau für, für Elemente, die jetzt hervorgehoben sind an einer bestimmten Stelle, die ich markieren möchte. 01:30:43.480 --> 01:30:58.380 Ähm, ich hätte da dafür auch ein Beispiel, wo, wo wir das mal eingesetzt haben, nämlich, ähm, in den Suchvorschlägen, äh, von, von einer Suchfunktion, wo ich den Bereich, der schon eingetippt wurde, hervorgehoben habe. 01:30:58.380 --> 01:31:05.900 Da, da haben wir mal Mark verwendet. Also, es gibt nicht so, also, ich weiß nicht, wie oft man einen Text hat, der aus, aussehen soll, wie mit dem Text. 01:31:05.920 --> 01:31:15.180 Also, ich hab's, äh, ich hab's bei einem Blog mal implementiert, damals, als es noch ging, als man von Google tatsächlich noch die, die Suchbegriffe mitbekommen hat, vom Referrer. 01:31:15.480 --> 01:31:23.720 Das geht ja inzwischen gar nicht mehr. Ähm, da wurden dann wirklich die Begriffe, nach denen man gesucht hat, in dem Blog-Beitrag, wenn man über Google gekommen ist, auch, äh, entsprechend markiert. 01:31:25.320 --> 01:31:27.480 So, warte mal, wir machen immer noch ein Beispiel. 01:31:27.480 --> 01:31:28.120 Mhm. 01:31:28.120 --> 01:31:31.020 Äh, ich schick dir noch einen Link, Moment, zack. 01:31:31.020 --> 01:31:35.900 Und den schaust du dir mal an und du versuchst ... 01:31:35.900 --> 01:31:37.060 Puh, Star-Rating. 01:31:37.060 --> 01:31:45.340 Star-Rating, genau, also, das ist so der Klassiker, du hast Sterne und kannst, äh, von eins bis fünf Sternen vergeben und draufklicken. 01:31:46.420 --> 01:31:49.600 Und jetzt ist es natürlich sehr schwer, nur auf die Demo zu gucken und nicht auf die Überschrift. 01:31:49.600 --> 01:31:50.620 Ich hab damals, äh ... 01:31:50.620 --> 01:31:52.640 Ich guck aber nicht in den Code-Links. 01:31:52.640 --> 01:32:01.320 Ähm, also, ich hab sowas schon mal gebastelt gesehen mit, äh, mit Radio-Buttons, aber das ist, glaub ich, nicht so semantisch an der Stelle. 01:32:01.320 --> 01:32:02.640 Ding, ding, ding, ding, doch. 01:32:02.640 --> 01:32:04.140 Ist doch, sind doch Radio-Buttons? 01:32:04.260 --> 01:32:13.100 Es sind, es sind Radio-Buttons und das ist meiner Meinung nach die semantische Variante, sowas zu machen, weil du hast, du hast was, was nicht einzeln angeklickt werden kann. 01:32:13.100 --> 01:32:14.700 Du hast fünf verschiedene Zustände. 01:32:14.700 --> 01:32:15.960 Entweder, entweder, oder. 01:32:15.960 --> 01:32:33.820 Da ist eigentlich der Radio-Button genau das Richtige und diese Demo, die könnt ihr, wie gesagt, in den Shownotes, äh, euch noch angucken, ist mit Radio-Buttons gebaut und zwar komplett eigentlich, also bis auf eine Mini-Funktionalität, dass da eine Zahl noch unten drunter angezeigt wird, komplett mit, äh, HTML und CSS, ganz ohne Jahreskript. 01:32:33.820 --> 01:32:35.540 Kann man komplett mit Radio-Buttons bauen. 01:32:35.540 --> 01:32:41.440 Wobei man ja auch, das, hätte man das nicht auch irgendwie mit Attribute und Content, naja, weiß nicht. 01:32:41.440 --> 01:32:50.400 Wobei, ähm, ich sehe da gerade ein Accessibility-Problem in diesem Beispiel, das müsste man anders machen, ähm, nämlich die Input-Elemente haben Display-None. 01:32:50.400 --> 01:32:56.000 Wenn ich das jetzt versuchen würde, mit dem Screenreader zu bedienen, wäre das Input-Feld weg, das würde nicht, das würde nicht erkannt werden. 01:32:56.000 --> 01:33:02.220 Ja, richtig, das heißt, ich muss das, äh, Visibility ist, glaub ich, auch nicht gut, Visibility-Hidden ist, glaub ich, das gleiche Problem, oder? 01:33:02.220 --> 01:33:08.400 Auch, auch, ja, ich glaube, Position-Absolute und dann, äh, aus dem, aus dem sichtbaren Bereich schieben, ich glaub, das ist immer noch ... 01:33:08.400 --> 01:33:15.980 Zum Beispiel, genau. Also, oder, ähm, naja, gut. Ja, Position-Absolute aus dem sichtbaren Bereich schieben ist eigentlich das, was ich meistens mach an so einer Stelle, genau. 01:33:16.940 --> 01:33:40.540 Ja, ich dachte, mein, mein erster Impuls war gleich schon das mit den Radio-Buttons, dann dachte ich, das ist bestimmt eine Fangfrage, äh, weil, wie gesagt, ich hab das so schon gesehen, ich hab das, glaub ich, sogar so schon mal gebaut, so ein Element, und dann dachte ich, na, da gibt's doch bestimmt jetzt was Semantischeres, Cooles, was man einsetzt, weil auch ich kenn nicht immer die Semantisch-Korrekten, äh, ich bin da selber schuldig, dass ich nicht, nicht immer das kenne und auch nicht immer vielleicht nachschaue und es dann einfach mit dem Radio-Button gemacht hätte. 01:33:41.060 --> 01:34:03.860 Ich auch, ich auch, das muss ich, muss ich ganz ehrlich zugeben, ich denk auch nicht immer dran, ich bin, mein Semantik-Hirn ist nicht immer angeschaltet, und ich denk da manchmal hinterher, was hast du denn da für eine Krütze gemacht, das wär doch eigentlich so viel besser gewesen, man kommt auch nicht oft immer sofort auf die perfekte Lösung, also, äh, ist auch nicht schlimm, aber für Diffs mit Klickhändlern gibt's keine, gibt's keine Ausrede, sorry. 01:34:03.860 --> 01:34:05.160 Das stimmt. 01:34:05.160 --> 01:34:07.700 Wir machen noch ein drittes Beispiel, es gibt noch einige mehr. 01:34:07.700 --> 01:34:26.680 Ja, ganz kurz, wegen Radio-Buttons und Checkboxen, jetzt hab ich, äh, was gesehen, wie war das nochmal, ähm, ich weiß nicht mehr, wie rum es war, aber irgendwie wurden Checkboxen vergewaltigt, um Radio-Buttons zu sein, das heißt, es war eine Checkbox optisch, aber wurde dann, wenn man eine aktiviert hat, wurde die andere automatisch deaktiviert, ich glaub, so rum war's, ja. 01:34:26.680 --> 01:34:51.680 Oder du kannst mehrere Radio-Buttons anklicken, dafür gibt's, dafür gibt's aber, dafür gibt's aber tatsächlich einen Anwendungsfall, ähm, das hatte ich auch schon, weil manchmal sind, ich weiß nicht, man könnte natürlich drüber nachdenken, ob man das komplette Konzept, ob das komplette Konzept vielleicht, äh, blöd ist, oder falsch ist, aber ich hab schon auf jeden Fall Formulare gesehen, ähm, wo bestimmte Optionen bei Checkboxen sich ausschließen. 01:34:51.680 --> 01:34:53.480 Ja, ja, gut, das schon. 01:34:53.480 --> 01:34:54.240 Aber du kannst generell, das schon. 01:34:54.240 --> 01:34:57.680 Du kannst generell mehrere wählen, aber du kannst zum Beispiel nur füllen. 01:34:57.680 --> 01:35:06.740 Ja, aber das meine ich nicht, also das war wirklich, das war wirklich eine Auswahl einfach, ähm, keine Ahnung, äh, was willst du als Soße dazu, Mayo, Senf oder Ketchup, ja? 01:35:06.740 --> 01:35:16.260 Und du konntest halt nur eins auswählen und es waren drei nebeneinander und egal, was du angeklickt hast, die anderen, äh, waren weg und dann macht's halt einfach keinen Sinn, wenn ich eh nur eins wählen kann. 01:35:17.080 --> 01:35:23.960 Ja. Okay, so, wir machen nur ein drittes Beispiel, ganz kurz, also Beispiel Nummer drei, ähm, haben wir hier. 01:35:27.340 --> 01:35:46.900 So, man sieht, ich sag mal kurz, was man darauf sieht, man sieht, ähm, einen Text und da unten drunter ein Eingabefeld und wenn man jetzt in das, es ist ein Passworteingabefeld und wenn man in das Passworteingabefeld was tippt, dann hat man unten drunter so einen Balken in verschiedenen Farben, je nachdem wie lang das Passwort ist, der länger wird und dann auch die Farbe ändert. 01:35:47.020 --> 01:35:55.300 Also, er fängt an mit Rot, da steht dann Strength Bad unten drunter, ähm, und der wird dann irgendwann gelb und irgendwann wird er dann grün. 01:35:57.880 --> 01:36:04.820 Genau, und es geht mir tatsächlich um dieses Element, das die Farbe ändert, unter dem Passworteingabefeld. 01:36:04.820 --> 01:36:12.100 Brr, also da muss ich sagen, das hätte ich jetzt wahrscheinlich tatsächlich irgendwie mit, äh, mit einem Span gelöst. 01:36:12.800 --> 01:36:20.460 Na, ja, weil ich nicht im Bilde bin, was es da anderes gibt und ich, äh, ich rate jetzt einfach mal, dass das das Meta ist, was du vorhin angesprochen hast. 01:36:20.460 --> 01:36:22.340 Ding, ding, ding, ding, du bist einfach zu gut. 01:36:22.340 --> 01:36:30.560 Aber das war, aber nee, aber das war ja jetzt wirklich, das war jetzt wirklich geraten aus dem Kontext, also, äh, ich hab das Meta so nicht gekannt und, äh, hätte auch nicht auf die Idee gekommen, das da einzusetzen. 01:36:30.560 --> 01:36:35.380 Deswegen bin ich sehr gespannt, äh, dass du es gleich erklärst, was es dann macht und was es ist. 01:36:36.460 --> 01:36:39.820 Ja, das Meta-Element, das zeigt so eine Art Füllstand an. 01:36:39.820 --> 01:36:48.560 Also, äh, und zwar aber normalerweise jetzt nicht sich bewegender Füllstand, also nicht Progress, was quasi sich gerade bewegt, sondern aktueller Füllstand. 01:36:48.560 --> 01:36:58.360 Ähm, dass das jetzt, dass das sich in dem Fall jetzt bewegen kann, ist diesem Beispiel geschuldet, aber das, äh, ich weiß nicht, ob das jetzt, das darf schon auch, das darf, das darf sich schon auch bewegen. 01:36:58.360 --> 01:37:06.440 Ähm, genau, in dem Fall muss ich sagen, zu diesem Beispiel, äh, das ist jetzt schon mit, da ist schon mit JavaScript auch dran rumgegangen. 01:37:06.460 --> 01:37:18.520 gebaut worden und auch, ähm, mit CSS quasi die Standard, das Standardaussehen von diesem Meta-Element weggenommen worden mit Appearance None, weil es sieht normalerweise relativ hässlich aus, der Standard-Style davon. 01:37:18.520 --> 01:37:24.060 Äh, jetzt muss ich gerade überlegen, kann ich zu dem Meta-Element sonst noch was sagen, außer, außer Füllstand? 01:37:24.060 --> 01:37:24.880 Ähm. 01:37:24.880 --> 01:37:26.460 Ich mach mal die Appearance weg, das interessiert mich jetzt. 01:37:26.460 --> 01:37:38.180 Ich sag mal, also, in der, in der, in der Definition steht, äh, das ist repräsentiert, äh, either a scalar value within the known range or fractional value, also wie ich gesagt hab, also einzelne Schritte. 01:37:38.180 --> 01:37:44.460 Und das ist aber, aber nur zur Ausgabe, also ich kann da nix, nix, nix ein, also wie so ein Regler oder so kann ich da nicht, äh. 01:37:45.040 --> 01:37:46.260 Das ist nur zur Ausgabe. 01:37:46.260 --> 01:37:46.440 Okay. 01:37:46.440 --> 01:37:48.420 Genau, das ist nur zur Ausgabe. 01:37:48.420 --> 01:37:59.420 Ähm, es gibt da noch verschiedene Attribute, die man dem geben kann, ähm, nämlich, äh, min für den Minimalwert und max für den Maximalwert. 01:37:59.420 --> 01:38:05.880 Äh, und jetzt tatsächlich, da steige jetzt aus, weil das hab ich tatsächlich in der Form noch nicht verwendet, ich sehe noch low als Attribut. 01:38:05.880 --> 01:38:08.320 Äh, das ist der Minimalwert. 01:38:08.580 --> 01:38:10.700 Ach, wo unterscheidet sich das denn jetzt von Min? 01:38:10.700 --> 01:38:13.300 Ui, ui, ui, jetzt strauchle ich aber auch schon. 01:38:13.300 --> 01:38:15.240 Also, wenn ich's mal einsetze, lese ich mir das genauer durch. 01:38:15.240 --> 01:38:18.500 Es gibt low und high, äh, und optimum. 01:38:18.500 --> 01:38:23.840 Also, scheinbar gibt es, äh, kann man, kann man das dann als Styling dann nochmal verwenden. 01:38:23.840 --> 01:38:36.860 Ähm, wenn das dann einen bestimmten Wert erreicht, ich weiß nicht genau, ob das dann pseudoklassenmäßig ansprechbar ist, das müsste ich mir nochmal genauer anschauen, aber Meter auf jeden Fall, falls ihr mal so einen Füllstand für irgendwas braucht. 01:38:36.940 --> 01:38:40.720 In dem Fall finde ich Füllstand beim, beim Passwort, äh, eigentlich ganz passend. 01:38:40.720 --> 01:38:43.920 Unsere Spendenhöhe, die könnten wir mit dem Füllstand, wir setzen uns ein Ziel. 01:38:43.920 --> 01:38:56.240 Also, finde ich in dem Fall, auf jeden Fall, also ist auf jeden Fall passender als Progress, weil Progress ist zwar, ist zwar auch, äh, eine Art Füllstand, aber Progress bewegt sich ja, du, das sagen wir mal so, das geht ja von A nach B immer. 01:38:56.240 --> 01:39:00.560 Und das ist ja bei Füllstand nicht unbedingt, das kann ja auch, das kann ja auch irgendwie zurückgehen. 01:39:00.560 --> 01:39:03.660 Progress geht ja normal von 0 auf 100 oder von 0 auf keine Ahnung wohin. 01:39:04.180 --> 01:39:07.000 Ähm, und das ist ja bei Meta, ähm, eher nicht gegeben. 01:39:07.000 --> 01:39:09.540 Also, interessantes HTML-Element auf jeden Fall. 01:39:09.540 --> 01:39:17.000 So, ja, in, in meinen, meinen Demos sind noch einige Beispiele mehr, wenn ihr noch mitspielen, ihr könnt da auch noch mitspielen. 01:39:17.140 --> 01:39:35.800 Ich, äh, verlinke auch die, die Liste nochmal, die komplette Liste, das ist eine, eine CodePen-Collection, ähm, kommen auch in die Shownotes, ähm, wo ihr, ihr müsst halt versuchen, nicht auf das HTML zu gucken und auch nicht auf den Titel der Demos, das ist manchmal gar nicht so einfach, weil sonst, da steht's oft schon drin, was für ein Element verwendet wurde. 01:39:35.800 --> 01:39:45.280 Ähm, genau, aber ihr könnt einfach versuchen, mal mitzuspielen, ähm, ihr könnt natürlich auch, das ist ja zu, ich sag ich jetzt natürlich zu spät, ihr hättet vorhin auch mitspielen können, ihr habt bestimmt alle mitgespielt. 01:39:45.280 --> 01:39:46.660 Ich hab ja gesagt, ihr könnt mitspielen, ja. 01:39:47.140 --> 01:39:47.380 Genau. 01:39:47.380 --> 01:39:51.800 So, über Microformats und, äh, schema.org haben wir schon geredet. 01:39:51.800 --> 01:39:52.540 Haben wir schon gesprochen, ja. 01:39:52.540 --> 01:40:17.120 Ähm, an der Stelle sei, äh, nochmal mein Accessibility-Cheat-Sheet erwähnt, ähm, das wir noch vielleicht nochmal verlinken können, ähm, wo semantisches HTML nur ein kleiner Teil davon ist, aber einfach nur nochmal so, ähm, dass, wenn man jetzt Accessible eine Seite machen will, da ist semantisches HTML ein kleiner Teil davon, ähm, aber noch viel mehr, man muss eigentlich sich noch viel mehr angucken, ähm, das einfach nur noch mal so. 01:40:17.120 --> 01:40:20.060 Also nochmal als kleine Werbung an der Stelle. 01:40:20.060 --> 01:40:24.520 Ähm, ich hätte noch auf Rock, hätte ich, hätte ich, hätte ich noch auf Rock. 01:40:24.600 --> 01:40:40.780 Und zwar, ähm, kannst du was zu Agegroup sagen, zum Agegroup-Element, weil ich glaub, das ist ne Sache, der ich mich schon sehr oft schuldig gemacht hab, die Überschriften, Verschachtelungen, wenn man sich das Ganze mal wirklich als Dokument vorstellt. 01:40:42.540 --> 01:40:46.400 Das kannte ich nämlich nicht, da bin ich vorhin auch in der Vorbereitung zur Sendung drauf gestoßen. 01:40:47.840 --> 01:40:51.760 Also, ähm, soweit ich weiß, gibt's das nicht mehr. 01:40:51.760 --> 01:40:52.620 Ach, echt? 01:40:52.620 --> 01:40:59.240 Ähm, also ich hab, was ich mitgekriegt hab, also Agegroup mal ganz kurz, ist zur Gruppierung von Überschriften gedacht. 01:40:59.240 --> 01:41:04.980 Also wenn ich jetzt zum Beispiel zwei Überschriften, die unterschiedliche Ordnung haben, also H1 und H2 zum Beispiel, direkt nacheinander hab. 01:41:04.980 --> 01:41:14.000 Genau, weil das eine Unterüberschrift sein soll, aber es ist keine H2 vom eigentlichen Dokument, das nachfolgt, äh, und würde somit die Struktur von der Seite kaputt machen eigentlich, ja. 01:41:14.000 --> 01:41:28.660 Genau, also, äh, ich hab da so ein bisschen, ich lese so ein bisschen mit auf der, auf so ne Accessibility-Mailing-Liste, wo da auch immer mal wieder drüber diskutiert wurde, und darüber hab ich, meine ich, gelesen zu haben, dass das deprecated wird, also, dass das removed ist. 01:41:28.660 --> 01:41:33.400 Und jetzt hab, ich hab grad noch mal in der Spezifikation draufgeklickt, weil da hast du mich auf dem linken Fuß erwischt. 01:41:33.400 --> 01:41:36.520 Ich hätte jetzt, äh, so vom Gefühl her gesagt, benutze es nicht. 01:41:36.520 --> 01:41:36.960 Mhm. 01:41:36.960 --> 01:41:39.880 Benutze es nicht, hätte ich jetzt vom Gefühl her gesagt. 01:41:39.880 --> 01:41:42.840 Has been removed from the HTML-Specification. 01:41:42.840 --> 01:41:43.020 Genau. 01:41:43.020 --> 01:41:45.800 Äh, but is still, ne? 01:41:45.800 --> 01:41:49.700 Is still in the Web-Hypertext-Dingster-Working-Group. 01:41:49.700 --> 01:41:54.000 Also, offenbar, in dem einen Standard ist es drin, in dem anderen nicht. 01:41:54.000 --> 01:41:58.220 Es gibt ja die zwei Standards, es gibt den W3C-HTML5-Standard, und dann gibt es den von dieser, 01:41:58.660 --> 01:42:13.140 ich vergesse immer, wie man, was da genau die Bezeichnung ist, äh, what, WG, ähm, diese andere HTML-Working-Group, wo die Browser-Hersteller alle drin sind, ähm, und es ist partially implemented, steht hier. 01:42:13.140 --> 01:42:15.320 Ich würde deswegen auch nicht entfernt werden, wahrscheinlich. 01:42:15.320 --> 01:42:29.320 Was ich interessant finde, es gibt, ähm, es gibt da eine Spezifikation für so einen HTML, für so einen Outline-Algorithmus, der mir eben dann die Dokumentstruktur liefert, von diesen verschiedenen verschachtelten Überschriften-Ebenen, äh, der ist aber in keinem einzigen Browser implementiert. 01:42:29.320 --> 01:42:30.340 Ja, super. 01:42:30.660 --> 01:42:39.080 Und, ähm, aber trotzdem macht das ja schon, also gerade auch wieder für, für SEO und für maschinelle Auswertung, macht das ja vielleicht schon Sinn, was wohin gehört. 01:42:39.080 --> 01:42:43.000 Und da frage ich mich halt, wenn das jetzt rausgenommen wurde, was ist denn die Alternative dazu? 01:42:44.080 --> 01:42:49.220 Weil das ist ja tatsächlich ein Problem, ja, dass das falsch, falsch zugeordnet wird von der Logik her. 01:42:49.220 --> 01:42:52.380 Tja, ein, ein Mysterium. 01:42:52.380 --> 01:43:00.760 Ja, an der Stelle, äh, wenn wir bei Überschriften sind, sei auch gesagt, ähm, Styling hat nichts mit Überschriften-Ebene zu tun. 01:43:00.760 --> 01:43:06.820 Das wird, es werden nämlich oft, äh, oder sehr, sehr gerne Überschriften-Ebenen genommen, weil man gerade die richtige Textgröße haben will. 01:43:06.820 --> 01:43:08.080 Das sollte man nicht tun. 01:43:08.080 --> 01:43:14.540 Ähm, ich sehe aber auch das Problem, dass es oft nicht anders möglich ist, an irgendwas Bestimmtes zu kommen. 01:43:14.540 --> 01:43:22.860 Also, ähm, ich weiß da auch noch nicht so die richtige Lösung dafür, wie man gewährleistet, dass die Überschriften-Hierarchien immer korrekt sind. 01:43:22.860 --> 01:43:26.080 Also, dass immer, dass nicht auf eine H1 eine H4 folgt. 01:43:26.080 --> 01:43:34.540 Ähm, ich, ich bin der Meinung, eventuell müssten die Browser da was einbauen, dass das dann, dass dann zumindest SEO und Accessibility. 01:43:34.540 --> 01:43:38.200 Ja, irgendwie quasi H, H next oder so und dann H, H equal. 01:43:38.200 --> 01:43:45.180 Genau, dass die das fixen intern, wenn die das finden, dass die das fixen intern und sagen, naja, wahrscheinlich ist das nicht so. 01:43:45.180 --> 01:43:50.820 Aber dann würdest du natürlich wieder wegnehmen, dass jemand vielleicht das wirklich so gemeint hat, aus welchen Gründen auch immer. 01:43:50.820 --> 01:43:55.260 Gut, aber das könnte man ja nicht zwangsweise machen, sondern halt irgendwie, man kann das nutzen, muss aber nicht. 01:43:55.460 --> 01:44:01.880 Also, das Problem hast du halt immer, wenn du Inhalte dynamisch zusammenstellst, aus verschiedenen Datenquellen vielleicht noch oder selbst aus der gleichen Datenquelle. 01:44:01.880 --> 01:44:09.860 Aber du hast nicht immer an der Stelle eine H3 und dann kommt das nächste rein und müsste dann eine H4 sein, aber die H3 fehlt, also müsste das eigentlich H3 werden. 01:44:09.860 --> 01:44:14.300 Dann musst du, kommst du vielleicht auf die Idee, das dann auch irgendwie per Rack-Ex zu ersetzen oder so. 01:44:15.260 --> 01:44:17.840 Also, ja, da gibt's einfach manchmal keine Lösung dafür. 01:44:17.840 --> 01:44:23.940 Und du kannst den Leuten auf jeden Fall auch nicht abgewöhnen, das aus Styling-Gründen zu verwenden. 01:44:23.940 --> 01:44:32.340 Ja, weil zum Beispiel der Klassiker ist, also da, wo ich viel dran arbeite, ist so ein Tool, wo Markdown reingeschrieben wird, User-Generated Content. 01:44:33.040 --> 01:44:42.060 Und da möchten die Leute einfach vielleicht nicht diese riesige H1 haben als erste Überschrift, sondern vielleicht wollen sie was Kleineres haben, einfach weil es dann an der Stelle besser aussieht. 01:44:42.060 --> 01:44:47.380 So, ich fang dann mit einer H4 irgendwie an oder mit einer H3, wo eigentlich eine H1 hin müsste. 01:44:47.380 --> 01:44:52.020 Und ich kann das total nachvollziehen, dass man das macht, aber dafür muss es irgendwie eine Lösung geben. 01:44:52.020 --> 01:44:52.940 Also, da weiß ich auch nicht. 01:44:52.940 --> 01:44:54.680 Ja, keine Ahnung. 01:44:54.680 --> 01:44:57.600 Also, mir ist keine vernünftige Lösung bekannt für das Problem. 01:44:57.600 --> 01:45:01.860 So, drehen wir schon viel zu lange. 01:45:01.860 --> 01:45:02.280 Ja. 01:45:03.040 --> 01:45:05.900 Aber der Moritz hat sich wieder abreagiert. 01:45:05.900 --> 01:45:07.640 So ein bisschen. 01:45:07.640 --> 01:45:10.760 Nee, ihr Diffster. 01:45:10.760 --> 01:45:12.180 Diffster. 01:45:12.180 --> 01:45:13.220 Diffster. 01:45:13.220 --> 01:45:15.700 So nenn ich die Leute ab sofort nur noch. 01:45:15.700 --> 01:45:17.600 Keine Hipsters, sondern Diffster. 01:45:17.600 --> 01:45:18.700 Nee, Diffster. 01:45:18.700 --> 01:45:21.440 Die Leute, die nur Diffs verwenden, sind die Diffster. 01:45:21.440 --> 01:45:32.720 So, ja, also, wenn man mal mit Jugendwörtern das abschließen wollen wollte, ähm, wenn ihr nur Diffs verwendet, dann seid ihr voll cringe. 01:45:34.040 --> 01:45:40.320 Und wenn ihr Lid sein wollt, dann nehmt ihr sie manchmal, das ist HTML. 01:45:40.760 --> 01:45:41.120 Yeah. 01:45:41.120 --> 01:45:41.920 Und dann kommt ihr auch. 01:45:41.920 --> 01:45:43.480 Total fly, oder? 01:45:43.480 --> 01:45:50.900 Ihr kommt auch total super fly und dann kommt ihr auch total gut an bei den Girls und Boys. 01:45:51.140 --> 01:45:52.420 Ja, dann kriegt ihr Kommentare drunter. 01:45:52.420 --> 01:45:52.960 Beste. 01:45:52.960 --> 01:45:54.840 Oder ist das auch schon wieder? 01:45:54.840 --> 01:45:56.640 Genau, beste Leben. 01:45:56.820 --> 01:45:57.640 Gönn dir, Alter. 01:45:57.640 --> 01:46:00.520 Wahrscheinlich, wenn uns jetzt wirklich jüngere Leute zuhören, die lachen sich wahrscheinlich. 01:46:00.520 --> 01:46:05.340 Wahrscheinlich sind wir schon, wir sind schon wieder so, wie alte Leute sich Jugendsprache vorstellen. 01:46:05.340 --> 01:46:05.860 Genau. 01:46:05.860 --> 01:46:07.480 Ja, Diggi, gönn dir, Diggi. 01:46:07.480 --> 01:46:08.060 Gönn dir, Diggi. 01:46:11.060 --> 01:46:11.660 Oh je. 01:46:11.660 --> 01:46:14.300 So, das reicht jetzt. 01:46:14.300 --> 01:46:14.860 Das reicht. 01:46:14.860 --> 01:46:16.180 Reicht, ist fertig. 01:46:16.180 --> 01:46:21.040 Also, ich würde mich sehr freuen, wenn ihr noch Fragen habt, weil auch ich bin nicht der perfekte Semantiker. 01:46:21.040 --> 01:46:24.120 Ich gebe mir nur Mühe und schaue drauf. 01:46:24.400 --> 01:46:34.020 Und wenn ihr Fragen habt, so als Pro-Tip, dann müsst ihr Kontakt zu uns aufnehmen, auf dem einen oder anderen Kanal, per Twitter oder so. 01:46:34.020 --> 01:46:36.380 Ihr müsst dann mit uns kommunizieren. 01:46:36.380 --> 01:46:37.740 Kommunizieren. 01:46:37.740 --> 01:46:38.720 Kommunizieren. 01:46:38.720 --> 01:46:44.820 So, fertig? 01:46:44.820 --> 01:46:46.460 Ja, fertig. 01:46:46.460 --> 01:46:47.440 Thema ist fertig. 01:46:47.440 --> 01:46:48.980 Das ist geil-Zeit. 01:46:48.980 --> 01:46:52.260 Geil-Zeit. 01:46:52.260 --> 01:46:54.000 Wow. 01:46:54.400 --> 01:46:56.500 Wir haben zwei Geil-Teile. 01:46:56.500 --> 01:46:57.460 Wir haben jeder eins. 01:46:57.460 --> 01:47:01.560 Dann mache ich vielleicht mal den Anfang, nachdem du jetzt den großen Teil hattest. 01:47:01.560 --> 01:47:06.540 Und ja, wir hatten heute ja mal wieder seit längerer Zeit einen Spam-Spot. 01:47:06.540 --> 01:47:13.100 Hatten wir jetzt, glaube ich, schon ein paar Folgen nicht mehr, weil irgendwie einfach zwischendrin Material ausgegangen ist und sich nichts angeboten hat. 01:47:13.100 --> 01:47:17.620 Und es geht jetzt auch weiter mit Spam, beziehungsweise eigentlich eher gesagt Scam. 01:47:17.620 --> 01:47:22.520 Und so Scamming, das ist hauptsächlich im englischsprachigen Raum verbreitet. 01:47:23.120 --> 01:47:27.160 Hier kennt man so die klassischen Spam-Mails, die wir da eben auch verwurschten zu den Spam-Spots. 01:47:27.740 --> 01:47:34.000 Also den nigerianischen Prinzen, den kennt ja wahrscheinlich fast jeder, der dir irgendwie vier Millionen überweisen will. 01:47:34.000 --> 01:47:38.560 Und du musst ihm aber was vorschießen, für welche Bankgebühren oder so, ist klar. 01:47:39.700 --> 01:47:49.440 Und bei so Scam-Sachen, da ist die Masche oft so, es werden irgendwelche Fake-Blue-Screens im Browser angezeigt oder irgendwelche Fehlermeldungen, dass ein Virus auf deinem Rechner gefunden wurde oder was weiß ich. 01:47:49.440 --> 01:47:51.920 Oder Microsoft will dir Geld zurückerstatten. 01:47:51.920 --> 01:47:54.880 Das ist auch so eine Art von dieser Scam-Masche. 01:47:54.880 --> 01:47:56.920 Und dann ist da eine Hotline-Nummer angegeben. 01:47:57.640 --> 01:48:01.960 Und wenn du die anrufst, dann landest du eben in einem Call-Center von Betrügern. 01:48:02.720 --> 01:48:11.260 Und es gibt einen YouTube-Kanal, auf den ich gestoßen bin, um nicht zu sagen, ich bin in einen YouTube-Rabbit-Hole gefallen vor einer Weile. 01:48:11.700 --> 01:48:15.780 Und habe diesen Kanal entdeckt, Jim Browning nennt sich der Gute, Engländer ist er, glaube ich. 01:48:15.780 --> 01:48:18.520 Und der dreht den Spieß um. 01:48:18.520 --> 01:48:29.500 Das heißt, der lässt da, also das funktioniert dann so, die geben sich dann aus als Microsoft-Support-Mitarbeiter und sagen dann, ja, sie müssen sich irgendwie auf deinen Computer schalten. 01:48:29.500 --> 01:48:34.180 Dann wird das per TeamViewer oder über andere solche Remote-Software gemacht. 01:48:34.620 --> 01:48:44.320 Schalten sich dann drauf und dann zeigen sie dir, dann gehen sie in den System-Log und jeder, der da mal reingeschaut hat, der weiß, dass da tausende Meldungen drin sind, die also auch ganz normal sind, dass sie da drin stehen. 01:48:44.320 --> 01:48:56.660 Oder sie geben irgendwelche Codes in der Command-Line ein, die dann die Ordnerstruktur irgendwo auslesen oder halt einfach irgendwelche Debug-Informationen ausgeben und dann sagen sie dir ganz genau, oh, das darf alles gar nicht da sein. 01:48:56.660 --> 01:49:01.460 Oder der Klassiker, sie öffnen die Services und zeigen dann, oh, die Services sind gestoppt. 01:49:01.640 --> 01:49:05.640 Und es ist ganz normal, dass viele von den Services, die da aufgelistet sind, halt einfach gestoppt sind. 01:49:05.640 --> 01:49:08.480 Ja, die müssen alle laufen und sowas erzählen die da dann. 01:49:08.480 --> 01:49:12.720 Und sobald die merken, dass du ein bisschen Ahnung hast, ist der Spuk auch schon wieder vorbei. 01:49:12.720 --> 01:49:18.600 Aber wenn die halt merken, aha, ältere Person oder jemand, der sich wirklich halt nicht auskennt und so, dann geht es erst richtig los. 01:49:18.600 --> 01:49:20.740 Und da verlangen die natürlich dann Kohle dafür. 01:49:20.740 --> 01:49:22.920 Das sind die sogenannten Support-Scams. 01:49:23.400 --> 01:49:33.080 Dann gibt es aber auch noch eben diese, na wie heißt das denn, auf Deutsch, dass du halt Geld zurückbekommst, der Erstattungs-Scams. 01:49:33.080 --> 01:49:37.400 Das heißt, du musst dann dich in dein Online-Banking einloggen. 01:49:37.960 --> 01:49:44.820 Als technischer Fahrer, da denkt man jetzt gleich, ja, wer macht dann sowas, aber es gibt halt leider Omas und so, die das dann halt tatsächlich tun. 01:49:44.820 --> 01:49:52.400 Und dann wird, im Hintergrund, die machen dann den Bildschirm schwarz und dann ändern sie im Browser-Dev-Dings, ändern sie dann irgendwelche Einträge und sagen, 01:49:52.840 --> 01:50:00.740 Ah, da ist jetzt irgendwie, da sind jetzt 1000-Euro-Flöten gegangen und du musst dann irgendwie, die haben dir zu viel überwiesen und du musst es dann rücküberweisen. 01:50:00.740 --> 01:50:01.780 So funktioniert dann der Scam. 01:50:01.780 --> 01:50:03.620 Jedenfalls dreht der den Spieß um. 01:50:03.620 --> 01:50:10.480 Der hat irgendwie die Möglichkeit, er verrät natürlich nicht, wie er das macht, aber es kann eigentlich nur eine Sicherheitslücke in TeamViewer sein. 01:50:10.480 --> 01:50:19.820 Der schaltet sich auf deren Rechner, ja, und dann macht er so Sachen wie deren Dateien löschen, ja, die Callcenter ausspionieren. 01:50:19.820 --> 01:50:27.460 Und zwar wirklich inklusive Überwachungskameras anzapfen und Webcams anzapfen und dann konfrontiert er die Scammer mit ihren persönlichen Daten. 01:50:27.460 --> 01:50:40.940 Hochzeitsfotos, die er dann da gefunden hat, Realnamen, Klarnamen, Adressen, ja, sagt dann so, ah, du bist doch gar nicht, ähm, du bist doch gar nicht Mike, du bist doch eigentlich Rajesh und du wohnst doch eigentlich in, in Bangladesch in der Sonsou-Straße. 01:50:40.940 --> 01:50:48.160 Und dann geht denen aber richtig der Arsch auf Grundeis, ja, ähm, er lässt sich dann auch teilweise von denen durchführen, wie ihr Scam genau funktioniert und so. 01:50:48.600 --> 01:50:56.280 Und die, die werden da richtig klein laut. Manche fangen auch an zu heulen und so. Also es ist, es ist schon teilweise ethisch auch fragwürdig, ja, ganz ehrlich. 01:50:56.780 --> 01:51:16.040 Aber das Mitleid hält sich halt schon irgendwie in Grenzen, ja, weil das halt schon Betrüger im großen Stil sind. Ich meine, man darf nicht vergessen, weil ich jetzt Rajesh gesagt habe, das sollte jetzt gar nicht irgendwie, ähm, hier, haha, geschehender rassistisch sein, sondern es ist ganz einfach so, dass das ein großer Prozentteil dieser Callcenter in Indien sitzt. 01:51:16.400 --> 01:51:23.820 Sogar in, in, es lässt sich zurückverfolgen über die IP-Adressen, die dann ausfindig macht, in zwei, drei größeren Städten lässt sich das genau zurückverführen. 01:51:23.820 --> 01:51:25.700 Ich kenne jemanden, der mal auf sowas reingefallen ist. 01:51:25.700 --> 01:51:26.420 Äh, ja, tatsächlich? 01:51:26.420 --> 01:51:27.820 Ja, tatsächlich. 01:51:27.820 --> 01:51:29.360 Jemand Jüngeres oder jemand Älteres? 01:51:29.360 --> 01:51:31.500 Soll ich, äh, jemand Jüngeres tatsächlich? 01:51:31.500 --> 01:51:32.000 Oh, okay. 01:51:32.000 --> 01:51:39.280 Jünger als ich, äh, kurzer Einschub. Ähm, ich wurde dann hinterher, ähm, kontaktiert, so von wegen, oh, ich glaube, ich hab da was Blödes gemacht. 01:51:39.480 --> 01:51:51.940 Und dann hab ich mir die Geschichte erzählen lassen und es war halt tatsächlich so dieses, dieses klassische, ähm, ich hab da auf meinem PC irgendwie was gesehen, da stand irgendwie, dass ich irgendwelche, äh, äh, Viren bei mir auf dem Rechner hab. 01:51:51.940 --> 01:52:03.140 Ähm, und ich soll jetzt irgendwie diese Nummer da anrufen, damit die weggehen. Ähm, und halt, ich glaube, das war, ich hab's leider nicht gesehen, es gibt keinen Screenshot davon, ich glaube, es war am Ende tatsächlich nur eine Meldung im Browser. 01:52:03.140 --> 01:52:05.240 Es war nicht mal der PC infiziert. 01:52:05.240 --> 01:52:06.860 Aber auf Deutsch oder auf Englisch? 01:52:07.860 --> 01:52:08.720 Ähm, auf Englisch. 01:52:08.720 --> 01:52:11.460 Okay, weil auf Deutsch ist mir tatsächlich sowas noch nicht untergekommen bisher. 01:52:11.460 --> 01:52:37.600 Und, äh, die Person hat dann tatsächlich da angerufen und hat gesagt, ja, was soll ich machen? Und dann haben die tatsächlich, äh, irgendwie auch genau das, was du gerade geschildert hast, dann irgendwelche Sachen auf, oh, das ist ganz schlimm, da müssen wir irgendwie dies und dann haben sie das, äh, hat sie gesagt, ja, ähm, da wurde dann halt irgendwie was installiert und, und keine Ahnung und jetzt hier bitte, ähm, überweis mal so und so viel, was weiß ich, 100 Euro irgendwo hin, weil so, 01:52:37.600 --> 01:52:41.540 für die Dienstleistungen, die wir jetzt gerade erbracht haben, so, und das hat die dann auch gemacht. 01:52:42.480 --> 01:52:42.780 Krass. 01:52:42.780 --> 01:52:47.180 So, und, ähm, jetzt wird's interessant. 01:52:47.180 --> 01:52:54.820 Danach, erst nachdem das passiert ist, so, ah, ich glaube, da war was Doofes und ich bin mir nicht so sicher. Und dann ist so, ah ja, das ist typische, typische Geschichte, Scammer. 01:52:55.420 --> 01:52:59.660 Ähm, ja, die haben aber gesagt, dass, äh, dass man das Geld zurückkriegen kann. 01:53:00.620 --> 01:53:05.140 Und dann habe ich gesagt, ähm, du kannst es versuchen, aber ich glaube nicht dran, dass es passiert. 01:53:05.140 --> 01:53:11.280 Und die hat dann da angerufen, nochmal, und hat gesagt, ich bin nicht zufrieden, ich hätte gerne mein Geld zurück und hat's bekommen. 01:53:11.280 --> 01:53:12.640 Ach, tatsächlich, okay. 01:53:12.880 --> 01:53:16.580 Ja, das ist, sonst hätte ich die Geschichte gar nicht erzählt, weil das fand ich wirklich verrückt. 01:53:16.780 --> 01:53:24.100 Es ist, es ist so, dass ich mich manchmal frage, ob denen, die dort arbeiten, tatsächlich das bewusst ist, was sie da tun. 01:53:24.100 --> 01:53:32.480 Oder ob die nicht auch, ich meine, das sind natürlich die, die da arbeiten, es ist wie immer, wie auch bei, bei, bei normalen Callcentern, sage ich mal, die, die da sitzen, das sind die armen Würstchen. 01:53:32.480 --> 01:53:43.440 Die, die die Strippen ziehen, die die Kohle verdienen, das sind die oben drüber, ja, die sich die Maschen ausdenken, da gibt's dann auch Videos von, von Treffen von den, äh, Chefs dort, äh, die dann sagen, ah, wir, wir machen jetzt eine neue Masche, was weiß ich. 01:53:43.600 --> 01:53:49.280 Das heißt, die, die da sitzen, ich bin mir gar nicht sicher, ob die sich immer so im Klaren drüber sind, dass sie gar keinen wirklichen Support anbieten. 01:53:49.280 --> 01:53:59.300 Die bekommen halt einfach ein Sheet, da steht drauf, ne, äh, die und die Fragen abarbeiten, die und die Commands ausführen und wenn da was drinsteht, dann ist es schlimm und dann musst du das denen sagen. 01:53:59.300 --> 01:54:05.180 Also, ich kann mir schon vorstellen, dass die teilweise sich gar nicht bewusst sind, dass das nur eine Masche ist. 01:54:05.180 --> 01:54:09.720 Vielleicht sind sie aber auch einfach wirklich skrupellos oder wahrscheinlich gibt es solche und solche. 01:54:09.980 --> 01:54:21.980 Das ist, glaube ich, echt unterschiedlich und vor allem, was ich gerade dabei war zu erzählen, ähm, das sind oft arme Länder, wie gesagt, meistens ist es tatsächlich Indien oder es ist, äh, sind die Philippinen. 01:54:22.540 --> 01:54:24.340 Ähm, bist du noch da, Moritz? 01:54:24.340 --> 01:54:38.960 Ah, ich hatte gerade, ich hatte gerade Standbild, okay, sorry, ähm, das sind die Philippinen, also, ich sehe dich wieder, ja, es war gerade nur, äh, also, das sind halt auch wirklich arme Würstchen und vielleicht ist es deren einzige Möglichkeit, tatsächlich irgendwie Geld zu verdienen. 01:54:38.960 --> 01:54:58.240 Aber trotzdem möchte ich sie nicht in Schutz nehmen, weil, wie gesagt, da werden speziell gezielt, äh, alte, hilflose, äh, Leute ausgebeutet und teilweise halt wirklich auch große Summkrabbe, die sind, ähm, ein bisschen Rückerstattungscams, da geht's dann halt wirklich um, um nicht nur 100 Euro oder 80 Euro, da geht's halt wirklich um Tausende auch teilweise. 01:54:59.040 --> 01:55:02.460 Und, äh, ja, dementsprechend hält sich das Mitleid in Grenzen. 01:55:02.460 --> 01:55:12.560 Also, seit ich, seit ich viel Videochats mache, ganz kurz, noch nur einen Satz, ähm, hab ich geübt, sehr stillzuhalten, damit man denkt, das Bild wäre eingefroren und nichts mehr sagt. 01:55:12.560 --> 01:55:15.840 Und dann kannst du auf, auf Beenden klicken und kannst sagen, ach, sorry, ich bin irgendwie rausgeflogen. 01:55:15.840 --> 01:55:16.660 Genau. 01:55:16.660 --> 01:55:18.420 Nein, Spaß. 01:55:18.420 --> 01:55:20.140 Aber wäre eine gute Taktik, ne? 01:55:20.140 --> 01:55:24.380 Oder du machst dir diesen Auf, äh, äh, äh, äh, ne, ne, und bewegst dich ganz ruhig ab. 01:55:24.380 --> 01:55:28.600 Äh, okay, jedenfalls, äh, ja, Jim Browning, ähm, also, der hilft auch, 01:55:28.880 --> 01:55:57.000 Den Opfern, teilweise ist er wirklich live dabei, während gerade jemand, äh, überfallen wird, sag ich jetzt mal, äh, online-mäßig, ähm, kontaktiert dann die Opfer entweder im Nachgang, wenn er Daten findet, also teilweise sind da wirklich Opferlisten, da stehen dann auch so Sachen wie dabei, wie, äh, Achtung, die hat einen Sohn, der kennt sich aus, oder, ah, Mann ist gerade verstorben, ja, also wirklich, die machen sich dann auch Notizen, so, wie kann man denn vielleicht auch noch im Nachgang, äh, da noch mehr rausholen, oder so, oder halt auf eine persönliche Schiene fahren, oder sowas, ja. 01:55:57.620 --> 01:56:13.660 Ähm, und der manipuliert eben auch direkt live dann Betrugsversuche zum Teil, indem er dann, wenn er eine Handynummer findet von dem Opfer, weil er ja dann auch, kann dann auch irgendwie auf die, auf die Rechner von den Opfern auch schauen, weil er ja quasi remote auf dem Opfer, äh, auf dem, vom Täter ist, und dann sieht er wieder den Remote-Bildschirm vom Opfer. 01:56:13.900 --> 01:56:22.260 Und wenn er da Handynummern findet, also, was ruft er teilweise auch live die Leute an, sagt, sie telefonieren gerade mit einem, das ist kein echter Support-Mitarbeiter, legen sie sofort auf, geben sie denen kein Geld, und sowas, ja. 01:56:22.640 --> 01:56:34.000 Also, das ist schon echt krass. Und er ist auch nicht alleine, also, es gibt wirklich Leute, die das als Hobby betreiben, oder vielleicht nicht als Hobby, aber zumindest als Art freiwillige Arbeit, so gute Samariter, ähm, um eben Scammer auch zu beschäftigen. 01:56:34.080 --> 01:56:46.500 Also, die geben sich teilweise auch als Opfer aus, und dann irgendwie, ah, warte mal einen Moment, äh, ich, jetzt ist gerade jemand an der Tür, und so, also, die, die nehmen denen einfach Zeit weg, ja, weil, damit kannst du die beschäftigen, und in der Zeit können sie kein echtes Opfer finden. 01:56:46.500 --> 01:56:50.660 Das klingt doch auch nach einer Exit-Strategie, Leuten helfen. 01:56:50.660 --> 01:56:54.420 Exit-Strategie zum Leuten helfen, ja, okay. 01:56:54.420 --> 01:57:00.280 Ja, wir hatten es, wir hatten es im Vorgespräch so ein bisschen davon, was machen wir denn, nachdem die Web-Bubble geplatzt ist. 01:57:00.280 --> 01:57:13.320 Und der Konstantin hat mal vorgeschlagen, Löffelschnitzen im Wald, das fand ich eigentlich schon ziemlich gut, aber so, äh, irgendwie, tatsächlich noch was Sinnvolles machen, irgendwie Leuten helfen, so, in der Form, so, mit dem Know-how, was man hat. 01:57:13.320 --> 01:57:21.800 Ja, also, Open-Source, oder Leuten helfen. Wisst man schon, was wir in unserer Rente, äh, tun, in 70 Jahren, wenn wir da noch leben. 01:57:21.800 --> 01:57:22.940 Nee, nee, übermorgen. 01:57:22.940 --> 01:57:30.040 Ja, wenn denn fleißig gespendet wird, an dieser Stelle bitte End-Jingle einfügen. 01:57:30.280 --> 01:57:35.280 Das dicke Ende. 01:57:35.280 --> 01:57:43.640 Es bleibt einfach unser Running-Gag, es wird niemals ein End-Jingle geben. 01:57:43.640 --> 01:57:44.480 Es wird ihn nie geben, nee. 01:57:44.480 --> 01:57:48.240 Es kommt aber auch noch kein End-Jingle, weißt du auch warum? 01:57:48.240 --> 01:57:48.520 Warum? 01:57:48.520 --> 01:57:50.520 Weil nämlich von mir noch ein Geilteil kommt. 01:57:50.520 --> 01:58:05.820 Und ich wollte jetzt gerade noch ganz kurz sagen, äh, wie bei Scrubs damals, Neil Flynn, der Schauspieler, der den, der den, der den Hausmeister gespielt hat, der hat ja gesagt, ähm, in der Folge, wenn, wenn in einer Folge sein echter Name verraten wird, von dem Hausmeister, weil er immer nur als Hausmeister, äh, bekannt war, dann wisst ihr, das ist die letzte Folge. 01:58:05.820 --> 01:58:06.580 Ja. 01:58:07.140 --> 01:58:10.500 Also, wenn ihr mal einen End-Jingle hört, dann wisst ihr, das ist die letzte Folge. 01:58:10.500 --> 01:58:12.660 Oh Gott, jetzt dürfen wir keinen produzieren. 01:58:12.660 --> 01:58:13.600 Okay. 01:58:13.600 --> 01:58:16.260 Ach, was kümmert mich mein Geschwätz von gestern, ne? 01:58:16.540 --> 01:58:22.360 Richtig, genau, ich mein, äh, es gab ja von Meatloaf auch, äh, zwei Touren nach der letzten Tour, glaub ich. 01:58:22.360 --> 01:58:26.760 Und von, von, äh, hier Phil Collins, the first final farewell tour. 01:58:26.760 --> 01:58:41.720 Das find ich aber, das find ich aber cool, weil das kannst du so lang fortführen, wie du willst, aber wenn du sagst, wenn du wirklich die Leute dazu bringst, Konzertticket zu kaufen, weil es heißt, es ist jetzt das letzte Mal, und dann siehst du, dann, danach gibt's noch zwei, dann, da fühlst du dich schon ein bisschen verarscht. 01:58:41.720 --> 01:58:45.540 Also, ich hab mich verarscht gefühlt, ich war da wirklich. Last World Tour hieß die, glaub ich. 01:58:45.540 --> 01:58:51.240 Und dann, äh, gut, kann man natürlich sagen, was ist eine World Tour, kann man natürlich umdefinieren, aber so ein bisschen komisch war ich schon. 01:58:51.240 --> 01:58:54.360 Egal, mein Geil-Teil, mach doch nochmal den Jingle, komm. 01:58:54.360 --> 01:58:58.100 Das Geil-Teil. 01:58:58.100 --> 01:58:59.140 Nummer zwei. 01:58:59.140 --> 01:59:01.180 Geil-Teil. 01:59:01.180 --> 01:59:02.900 Ach, zwei. 01:59:02.900 --> 01:59:11.500 Also, mein Geil-Teil, äh, ich wollte eigentlich gar keins, äh, gar keins heute reinpacken, aber, 01:59:11.720 --> 01:59:13.900 dann bin ich in meiner Geil-Teil-Liste. 01:59:13.900 --> 01:59:16.680 Als du gesehen hast, dass wir erst zwei Stunden vorher haben, hast du gedacht, komm. 01:59:16.680 --> 01:59:20.380 Hab ich, nee, hab ich, hab ich gesehen, nein, nein, das war schon tatsächlich im Vorfeld, äh, geplant. 01:59:20.380 --> 01:59:23.680 Hab ich gesehen, dass es eins gibt, das besonders gut zu heute passt. 01:59:23.680 --> 01:59:25.920 Nämlich HTML, 01:59:25.920 --> 01:59:28.900 nee, falsch, ich hab schon falsch ausgerufen. 01:59:28.900 --> 01:59:30.080 HTML 01:59:30.080 --> 01:59:31.880 .dev 01:59:31.880 --> 01:59:33.680 HTML 01:59:33.680 --> 01:59:37.820 .dev, ich pack's auch, äh, wir packen's in die Shownotes. 01:59:39.000 --> 01:59:47.580 Naja, das sind genauso Beispiele, wie ich sie gerade vorhin beim semantischen HTML, äh, erwähnt hab, von komischer HTML-Verwendung. 01:59:47.580 --> 01:59:57.480 Also, das allererste Beispiel auf der Seite ist zum Beispiel, ähm, ein Button-Roll-Link mit einem Image drin. 01:59:58.480 --> 02:00:06.280 So, ich mein, gut, ich mein, wenn, das, ja, genau, das Image hat immerhin ein Alt-Attribut, das heißt, da würde tatsächlich was vorgelesen werden an der Stelle. 02:00:06.280 --> 02:00:08.580 Aber der Button hat auch noch einen Tab-Index 0. 02:00:08.580 --> 02:00:10.260 So, was ist da dran jetzt Käse? 02:00:10.260 --> 02:00:14.840 Also, ich mein, ein Button mit der Roll-Link, warum sollte ein Button Roll-Link sein, warum nimmt man dann nicht einfach einen Link? 02:00:15.180 --> 02:00:21.480 Naja, es ist in dem Fall kein Link, weil er nirgendwo hin zeigt, äh, also zumindest ist innen drin kein Link. 02:00:21.480 --> 02:00:26.760 Und ich weiß natürlich jetzt nicht, was mit JavaScript da noch gemacht wurde, falls das wirklich ein Link ist, naja, warum nicht ein A-Element verwenden? 02:00:26.760 --> 02:00:35.800 Und dann Tab-Index 0 auf dem Button ist auch totaler Quatsch, weil, also mit Tab-Index 0, äh, mach ich ein Element fokussierbar, aber der Button ist standardmäßig fokussierbar. 02:00:35.940 --> 02:00:47.240 Aber dass sich jemand echt die Mühe macht, also wirklich auch noch ein Roll-Attribut zu setzen, das finde ich ja schon irgendwie wieder, also, da hat sich jemand was beigedacht, also, irgendjemand hat was gedacht, die Frage ist nur, was? 02:00:47.240 --> 02:00:52.100 Ja, in den meisten Fällen wird ARIA einfach falsch verwendet. 02:00:52.100 --> 02:00:59.940 Oder in den meisten Fällen sollte man es nicht verwenden, haben wir ja vorhin schon drüber gesprochen, weil man einfach vernünftige, semantische HTML-Elemente verwenden kann. 02:01:00.640 --> 02:01:07.520 Und es wird dann halt irgendein Quatsch damit gemacht, den eigentlich kein Mensch braucht. In ganz vielen Frameworks und Libraries findet man sowas. 02:01:07.520 --> 02:01:10.280 Nämlich nenne ich jetzt mal keine Namen. 02:01:10.280 --> 02:01:19.180 So, das war jetzt, ich wollte noch mal ein Beispiel sagen von der Seite, das HTML ist im Prinzip so eine kleine Sammlung an solchen Beispielen. 02:01:19.180 --> 02:01:23.580 Ich weiß nicht, wie aktuell das ist, ich muss mal gucken, es gibt 22, glaube ich, 22 kleine Plätze. 02:01:23.580 --> 02:01:25.320 Äh, Oktober 14, 2020. 02:01:25.320 --> 02:01:28.260 Ah ja, ja, guck mal. 02:01:28.260 --> 02:01:34.940 Man kann da auch was submitten. Also, man kann da, man kann da selbst Beispiele mit einreichen. Tatsächlich, du hast recht, das ist sehr aktuell. 02:01:34.940 --> 02:01:36.040 Aber das letzte davor war im Juli. 02:01:36.040 --> 02:01:37.280 Oktober 17, 19 war der erste. 02:01:37.280 --> 02:01:38.500 Genau. 02:01:38.500 --> 02:01:49.600 Äh, ist eine ganz coole Liste. Also, wenn ihr wissen wollt, ich mag das ja auch manchmal so Anti-Patterns, wenn ihr wissen wollt, was ihr nicht machen sollt, dann guckt mal auf htmhell.dev vorbei. 02:01:49.840 --> 02:01:55.920 Genau, damit mein Geilteils abgegeilt oder so. 02:01:55.920 --> 02:01:58.740 Gut, dann nochmal den End-Jingle vorstellen an der Stelle. 02:01:58.740 --> 02:02:00.980 Nochmal der End-Jingle. Warte mal. 02:02:00.980 --> 02:02:04.260 Das dicke Ende. 02:02:06.620 --> 02:02:08.140 Oh je. 02:02:08.140 --> 02:02:11.660 Deswegen haben wir keinen, weil der sonst in die Richtung ging. 02:02:11.660 --> 02:02:13.880 Ähm, ok, ja, in Verabschiedung. 02:02:13.880 --> 02:02:15.360 Äh, Feedback. 02:02:15.360 --> 02:02:16.420 Mal wieder. 02:02:16.420 --> 02:02:18.280 Bitte, bitte, bitte, bitte. 02:02:18.280 --> 02:02:26.120 Ähm, wir haben es ja jetzt schon mehrfach gesagt, auch während der Sendung oder auch während der letzten 14 Sendungen, gebt uns Feedback. 02:02:26.640 --> 02:02:32.340 Wir können nur besser werden, wenn wir auch wissen, was wir falsch machen. Oder vielleicht machen wir alles gut, aber dann würden wir das auch gerne wissen. 02:02:32.340 --> 02:02:37.400 Wir müssen mal eine Sendung machen, wo wir nur Quatsch erzählen. Und zwar so, als ob das tot ernst meinen. 02:02:37.400 --> 02:02:39.580 Das steht ja schon auf unserem Backlog. 02:02:39.580 --> 02:02:45.100 Und ich darf dann auch nicht mehr, so wie bei der letzten Sendung, Dinge rausschneiden oder umschneiden, wo ich gemerkt habe, dass ich Quatsch erzählt habe. 02:02:45.100 --> 02:02:47.200 Nee, da wird dann einfach richtig Käse erzählt, ja. 02:02:47.200 --> 02:02:54.000 Kann ich, kann ich ganz ehrlich, kann ich ganz ehrlich sagen, äh, ich habe beim Durchhören gemerkt, dass es Quatsch war, was ich erzählt habe. 02:02:54.060 --> 02:02:57.480 Und habe es dann nochmal teilweise neu aufgenommen und geschnitten, damit es gestimmt hat. 02:02:57.480 --> 02:03:01.800 Der Gerrit hat es bestimmt gemerkt und hat, hat öffentlich aber nichts gesagt. Das fand ich sehr nett. 02:03:01.800 --> 02:03:09.080 Ja, und das ist übrigens der Mann, der am Anfang gesagt hat, schon bei der Planung zu dieser, zu diesem Format, wir schneiden aber nichts. 02:03:09.080 --> 02:03:15.440 Und als ich dann in der ersten Folge auch was Peinliches erzählt habe, äh, irgendeinen Quatsch, da hieß es dann, da willst du es jetzt wirklich schneiden. 02:03:15.440 --> 02:03:18.260 Ich, ich bekenne mich schuldig. 02:03:18.260 --> 02:03:20.880 Aber das Entwickler-Ego war da angekratzt. 02:03:20.880 --> 02:03:23.840 Irgendwann, ja, ich meine, wenn ich, ja, ja. 02:03:24.060 --> 02:03:30.080 Ja, manchmal, manchmal ist, ist mein Ego auch angekratzt, aber ich bin immerhin groß genug, das jetzt zuzugeben. 02:03:30.080 --> 02:03:36.180 Und wenn ihr, äh, wenn ihr genaueres wissen wollt, müsst ihr die letzte Folge, also die Folge, äh, 14. 02:03:36.180 --> 02:03:38.020 14, 14, 14, 14? 02:03:38.020 --> 02:03:38.500 14. 02:03:38.500 --> 02:03:39.240 14. 02:03:39.240 --> 02:03:43.680 Mal hören und, äh, dann sagt ihr mir mal, wo ich genau geschnitten habe, vielleicht findet ihr das ja raus. 02:03:43.680 --> 02:03:46.780 Und ihr postet das wieder unter Rezos-Comments. 02:03:46.780 --> 02:03:53.320 Ihr postet das wieder unter Rezos-Videos, ganz random, und schickt uns den Link und dafür kriegt ihr natürlich wieder ein Paket-Sticker. 02:03:53.320 --> 02:03:53.980 Ja! 02:03:54.480 --> 02:04:00.500 Also, äh, kostenlos, ihr müsst uns nur eure Adresse dann schicken, ähm, und dann, äh, dann ab die, ab die Post, ab die Luzi. 02:04:00.500 --> 02:04:17.520 Und, äh, also ganz ohne, ganz ohne Spaß nochmal, also, wenn ihr schon nicht auf Twitter reagiert, ähm, weil ihr keine Lust habt oder weil wir doof sind, dann teilt uns doch bitte, oder weil Twitter doof ist vielleicht auch, teilt uns doch mal mit, gerne auch per E-Mail an social.at, wo wir sind, ist vorne.show. 02:04:17.520 --> 02:04:19.620 Unter welchem Kontakt kann man euch denn erreichen? 02:04:19.620 --> 02:04:24.580 Vielleicht sind wir ja gar nicht mehr am Zahn der Zeit, vielleicht müssen wir wirklich auf TikTok oder, oder, äh, was weiß ich. 02:04:24.580 --> 02:04:32.060 Also, viele kommen tatsächlich auch aus LinkedIn und Xing, sehe ich in den Statistiken, also, da kommt recht viel drüber, äh, vielleicht müssen wir da mehr kommunizieren. 02:04:32.060 --> 02:04:34.320 Ja, oder Twitch. 02:04:34.320 --> 02:04:35.380 Ja. 02:04:35.380 --> 02:04:38.980 Aber dann müssen wir ja wirklich jetzt, äh, dann hier Video streamen, äh. 02:04:38.980 --> 02:04:45.080 Nee, wir, wir, wir machen bei Twitch einfach so ein Dauerscheife von, von, von, von Penisbildern von uns, oder was? 02:04:45.080 --> 02:04:54.560 Also, äh, also, äh, genau, also meldet euch mal bei uns irgendwie, lasst uns mal Feedback dafür, also, ich hab ja schon zwischendrin so die, 02:04:54.580 --> 02:05:03.020 Befürchtung, wir haben gar keine Hörer, das sind alles wirklich nur Bot-Downloads, ähm, und, und außer so zwei, drei Leute, die uns regelmäßig mal irgendwie Feedback geben. 02:05:03.020 --> 02:05:07.880 Stimmt, aber als ich die letzten, als ich die Leute mal als Bots beschimpft hab, da kamen dann ein paar Kommentare. 02:05:07.880 --> 02:05:08.980 So, also ihr Bots. 02:05:08.980 --> 02:05:13.220 Oder, oder, oder direkt ansprechen, das haben wir auch mal gemacht, also ganz nah ans Mikrofon. 02:05:13.220 --> 02:05:20.500 Und dann, hallo, liebe Entwicklerinnen und lieber Entwickler, die uns, die, oder der uns gerade zuhört, fühle dich direkt angesprochen. 02:05:20.500 --> 02:05:21.100 Hi. 02:05:21.100 --> 02:05:21.640 Mach mit. 02:05:21.640 --> 02:05:22.420 Hi. 02:05:22.420 --> 02:05:23.020 Mach mit. 02:05:23.020 --> 02:05:24.140 Na, na du. 02:05:24.580 --> 02:05:25.300 Na? 02:05:25.300 --> 02:05:25.860 Hi, na? 02:05:25.860 --> 02:05:27.720 Hi, na? 02:05:27.720 --> 02:05:29.180 Nicht Hi, na. 02:05:29.180 --> 02:05:30.140 Hi, na? 02:05:30.140 --> 02:05:33.660 Hast du schon gesagt, wollen wir jetzt alle Vornamen durchgehen? 02:05:33.660 --> 02:05:35.760 Alle, die uns einfallen, ne? 02:05:35.760 --> 02:05:45.160 Okay, ihr merkt schon, wir haben die zwei Stunden Grenze gerissen, wir haben zu viel konsumiert und, ähm, es reicht jetzt vielleicht. 02:05:46.620 --> 02:05:49.540 Aber wenn ihr uns nix schreibt, dann wird das nie ein Ende nehmen. 02:05:49.540 --> 02:05:50.220 Mhm. 02:05:50.220 --> 02:05:51.940 Das ist ne Drohung. 02:05:51.940 --> 02:05:56.980 Und mit dieser Drohung beenden wir die Sendung. 02:05:56.980 --> 02:05:59.360 Macht's gut. 02:05:59.360 --> 02:06:01.560 Ich hab's dir ein bisschen falsch draufgeguckt. 02:06:01.560 --> 02:06:03.340 Komm, komm. 02:06:03.340 --> 02:06:05.100 So weit ist es schon, es ist schon. 02:06:05.100 --> 02:06:06.360 Ich treff den richtigen Kopf. 02:06:06.360 --> 02:06:07.400 Nee, ich drück, ich drück. 02:06:07.400 --> 02:06:08.300 Ach, zu spät. 02:06:08.300 --> 02:06:08.920 Zu spät. 02:06:09.480 --> 02:06:10.440 Also, macht's gut. 02:06:10.440 --> 02:06:11.020 Macht's gut. 02:06:11.020 --> 02:06:11.820 Bis zum nächsten Mal. 02:06:11.820 --> 02:06:11.820 Macht's gut. 02:06:11.820 --> 02:06:11.880 Macht's gut. 02:06:11.880 --> 02:06:40.340 Macht's gut.