WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: 4 eher unbekannte Properties
Publishing Date: 2023-02-26T14:19:17+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/4-eher-unbekannte-properties/

00:00:00.000 --> 00:00:06.620
 Wo wir sind, ist vorne, Folge 52. Die blutige Kante hat angerufen und möchte aus dem Smallland abgeholt werden.

00:00:06.620 --> 00:00:25.740
 Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzeleien.

00:00:25.740 --> 00:00:29.780
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

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

00:00:56.160 --> 00:00:59.880
 Herzlich willkommen, liebe Frontend-FreundInnen.

00:00:59.880 --> 00:01:03.580
 Das hat man schon lange nicht mehr. Das war ein Wortspiel, was du mal erfunden hast.

00:01:03.580 --> 00:01:07.820
 Aber ich habe mir gedacht, es ist vielleicht mal wieder Zeit dafür.

00:01:07.820 --> 00:01:12.200
 Ich muss hier gerade an meinem Audio noch etwas ändern, was ich vorhin nicht gemerkt habe.

00:01:12.200 --> 00:01:15.660
 Ich höre mich nämlich selbst zu laut und nicht zu leise, aber das können wir ändern.

00:01:16.200 --> 00:01:17.620
 Perfekt. So, jetzt, das ist super.

00:01:17.620 --> 00:01:19.540
 Gut. Ja.

00:01:19.540 --> 00:01:19.880
 Ja.

00:01:19.880 --> 00:01:21.380
 Ja.

00:01:21.380 --> 00:01:22.980
 Da sind wir.

00:01:22.980 --> 00:01:24.160
 Da sind wir.

00:01:24.160 --> 00:01:29.680
 Und ihr wundert euch vielleicht am Folgentitel schon, dass es nicht weitergeht mit unserer HTML-Serie.

00:01:29.680 --> 00:01:31.420
 Nee, HTML ist abgeschafft.

00:01:31.420 --> 00:01:31.840
 Genau.

00:01:31.840 --> 00:01:33.100
 Ne, brauchen wir nicht.

00:01:33.100 --> 00:01:36.340
 Aber wir machen eine kleine Verschnauf-Pause.

00:01:37.340 --> 00:01:40.920
 Ja, wir haben gedacht, das ist eine Verschnauf-Pause.

00:01:40.920 --> 00:01:43.900
 Und dann haben wir gedacht, das ist jetzt irgendwie weniger vorzubereiten.

00:01:43.900 --> 00:01:45.380
 Und dann haben wir gemerkt, oh, doch nicht.

00:01:45.380 --> 00:01:50.540
 Ja, nee, ich habe, ja, wenn man sich verkünstelt mit irgendwelchen Demos, aber na gut.

00:01:50.540 --> 00:01:54.900
 Ja, ihr werdet sehen oder hören oder, genau.

00:01:54.900 --> 00:01:56.480
 Wer nicht sehen will, muss hören.

00:01:56.480 --> 00:02:00.220
 Ja, wir haben den ganzen Leib erfahren, was wir mit der blutigen Kante meinen.

00:02:00.220 --> 00:02:04.380
 Ja, aber eigentlich ein gutes Motto für Podcasts.

00:02:04.380 --> 00:02:05.900
 Eigentlich, wer nicht sehen will, muss hören.

00:02:05.900 --> 00:02:07.140
 Ja, genau.

00:02:07.140 --> 00:02:12.040
 Das passt auch zu den Leuten, die sich standhaft weigern, unseren Stream anzugucken.

00:02:12.040 --> 00:02:13.460
 Wer nicht sehen will, der muss halt hören.

00:02:13.460 --> 00:02:14.200
 Genau.

00:02:14.200 --> 00:02:18.760
 Da machen wir mal T-Shirts mit.

00:02:18.760 --> 00:02:19.960
 Ja, das ist gut.

00:02:19.960 --> 00:02:20.840
 Das ist echt gut.

00:02:20.840 --> 00:02:22.140
 Schreib mal gleich auf die Liste.

00:02:22.140 --> 00:02:23.820
 Ja, nicht sehen.

00:02:23.820 --> 00:02:25.720
 Wir haben heute kein Bier.

00:02:26.320 --> 00:02:28.420
 Das haben wir nämlich noch gar nicht erzählt, auch noch im Stream nicht.

00:02:28.420 --> 00:02:34.260
 Wir haben nämlich so eine kleine Abmachung so getroffen, was miteinander ausgemacht, dass

00:02:34.260 --> 00:02:40.480
 wir bis zur Sommerpause, wenn man auch immer die sein möge, keinen Alkohol trinken.

00:02:40.480 --> 00:02:42.700
 Ach echt, haben wir schon ein Datum ausgemacht?

00:02:42.700 --> 00:02:43.380
 Das wusste ich gar nicht.

00:02:43.380 --> 00:02:44.600
 Wir hatten gesagt, bis zur Sommerpause.

00:02:44.600 --> 00:02:45.660
 Bis zur Sommerpause.

00:02:45.660 --> 00:02:50.880
 Also ich habe, ich cheate so ein bisschen, weil es ist Bier, aber es ist alkoholfreies Bier.

00:02:50.880 --> 00:02:54.040
 Wir haben ja nicht gesagt kein Bier, wir haben nur gesagt kein Alkohol.

00:02:54.040 --> 00:02:55.000
 Kein Alkohol, genau.

00:02:55.000 --> 00:02:55.260
 Genau.

00:02:56.160 --> 00:02:58.320
 Und deswegen können wir auch trotzdem anstoßen hier.

00:02:58.320 --> 00:03:00.780
 Ja, also ich habe leider kein so gutes Geräusch heute.

00:03:00.780 --> 00:03:05.500
 Ich trinke heute, wie es sich für gute Nerds gehört, Club Mate, spätabends.

00:03:05.500 --> 00:03:06.540
 Das ist immer eine super Idee.

00:03:06.540 --> 00:03:08.020
 Ja, das ist super, ja.

00:03:08.020 --> 00:03:09.320
 Also wird heute eine lange Sendung.

00:03:09.320 --> 00:03:10.720
 Wir nehmen ja auch spät auf gerade.

00:03:10.720 --> 00:03:13.060
 Dann hältst du wenigstens lange durch.

00:03:13.120 --> 00:03:18.640
 Wir sind für unsere Verhältnisse spät dran, ich würde sogar fast sagen, über eine Stunde später als sonst.

00:03:18.640 --> 00:03:19.260
 Ja, definitiv.

00:03:19.260 --> 00:03:21.460
 Das lag vor allem an mir, ja.

00:03:21.460 --> 00:03:22.660
 So, dann lasst du es mal.

00:03:22.660 --> 00:03:23.660
 Ich stoße mal an durchs Portal.

00:03:23.660 --> 00:03:26.060
 Sehr gut.

00:03:26.060 --> 00:03:30.620
 Schmeckt total verrückt.

00:03:30.620 --> 00:03:31.900
 Ganz ohne Hopfen.

00:03:31.900 --> 00:03:32.640
 Bisschen Zucker.

00:03:32.640 --> 00:03:34.140
 Bisschen Mate-Tee.

00:03:34.140 --> 00:03:35.920
 Bisschen wie Aschenbecher.

00:03:37.260 --> 00:03:38.780
 Und, ähm, kalter Kaffee.

00:03:38.780 --> 00:03:39.440
 So.

00:03:39.440 --> 00:03:42.900
 So beschreiben es ja die Leute, die es nicht mögen.

00:03:42.900 --> 00:03:47.740
 Ähm, ja, bei mir ist es, es schmeckt eigentlich wie immer, aber ist, ähm, bisschen süßer.

00:03:47.740 --> 00:03:52.720
 Und, äh, wahrscheinlich macht es mich nicht ganz so müde gegen Ende der Sendung wie, wie sonst.

00:03:52.720 --> 00:03:53.440
 Hoffe ich mal.

00:03:53.440 --> 00:03:56.140
 Ja, es ist, ich habe aber vorhin auch schon noch einen Kaffee getrunken.

00:03:56.140 --> 00:04:01.480
 Es ist einfach heute, es ist, äh, heute, heute wird's, heute wird's heiß.

00:04:01.480 --> 00:04:04.120
 Heute wird's heiß.

00:04:04.120 --> 00:04:06.820
 Ja, oder vielleicht lang, keine Ahnung, vielleicht spielen wir ja später noch.

00:04:06.980 --> 00:04:08.240
 Vielleicht zocken wir ja später noch eine Runde.

00:04:08.240 --> 00:04:10.520
 Live im, im, äh, im Podcast.

00:04:10.520 --> 00:04:12.640
 Das wäre super.

00:04:12.640 --> 00:04:16.520
 Ich glaube, das wird noch langweiliger für die Zuhörenden wie, äh,

00:04:16.520 --> 00:04:20.620
 das, äh, die Idee finde ich, die Idee finde ich gar nicht so schlecht.

00:04:20.620 --> 00:04:22.520
 Muss ich sagen.

00:04:22.520 --> 00:04:26.660
 Okay, gut, ähm, ja, wollen wir direkt, direkt starten.

00:04:26.660 --> 00:04:27.560
 Starten wir.

00:04:27.560 --> 00:04:28.160
 Gut.

00:04:28.160 --> 00:04:35.940
 BWSIV präsentiert die Retrospektive.

00:04:36.700 --> 00:04:45.940
 Die Retrospektive beginnen wir tatsächlich mit einer Sache, die sehr gut, sehr gut zu diesem Jingle passt.

00:04:45.940 --> 00:04:46.420
 Ja.

00:04:46.420 --> 00:04:49.880
 Also, also auch, man fühlt sich so ein bisschen zurückversetzt in der Zeit.

00:04:49.880 --> 00:04:56.520
 Wir haben, ähm, aus Spaß eigentlich vor kurzem mal überlegt, wie wär's denn, wenn WWSIV eine eigene Faxnummer hätte.

00:04:58.520 --> 00:04:59.520
 fragt nicht, warum einfach wirklich nur ...

00:04:59.520 --> 00:05:03.020
 Und wie das so ist, wenn wir so einen Blödsinn überlegen, dann dauert's nicht lange.

00:05:03.020 --> 00:05:03.960
 Dann dauert's nicht lange.

00:05:03.960 --> 00:05:05.160
 Und jetzt haben wir eine Faxnummer.

00:05:05.160 --> 00:05:10.360
 Ähm, und, äh, wir haben tatsächlich, also wir hatten das damals im Stream, äh, angekündigt zum ersten Mal.

00:05:10.760 --> 00:05:14.800
 Und, äh, und, äh, da kamen auch direkt ein paar Fax rein, also tatsächlich auch so ein bisschen kreativer.

00:05:14.800 --> 00:05:18.820
 Nicht nur Text, sondern tatsächlich auch ein Foto, ein Faxform.

00:05:18.820 --> 00:05:21.540
 Ihr könnt euch das vielleicht vorstellen, so in Schwarz-Weiß-Raster.

00:05:21.540 --> 00:05:22.240
 Dann war echt gut.

00:05:22.240 --> 00:05:29.220
 Ähm, und falls ihr uns einen Fax schicken wollt, ähm, also Fax ist quasi jetzt die neue, der neue Feedback-Kanal, äh, den ihr, den ihr verwenden könnt.

00:05:29.280 --> 00:05:35.620
 Ihr müsst allerdings, ähm, damit rechnen, dass euer Fax dann aber auch mal irgendwie gezeigt wird oder gepostet wird, wenn ihr uns eins schickt.

00:05:35.620 --> 00:05:38.500
 Genau, also im, im Stream oder, oder erwähnt, äh, zumindest hier.

00:05:38.500 --> 00:05:41.320
 Das ist der, der Disclaimer, den wir hier noch raushauen müssen.

00:05:41.320 --> 00:05:47.820
 Dann wird es eventuell im Stream gezeigt oder vielleicht auch vertweetet oder vertu-tet auf Mastodon.

00:05:47.820 --> 00:05:56.040
 Ähm, aber unsere Faxnummer, äh, lautet 0721 470 46 487.

00:05:56.040 --> 00:05:58.900
 Ich wiederhole, 0721.

00:05:59.280 --> 00:06:02.780
 0721 470 46 487.

00:06:02.780 --> 00:06:04.700
 Schickt uns ein Fax.

00:06:04.700 --> 00:06:07.800
 Kosten natürlich zu eurem, äh, ganz normalen, äh, Telefon-Torif.

00:06:07.800 --> 00:06:08.420
 Ach so.

00:06:08.420 --> 00:06:11.720
 Weiß nicht, muss man das, muss man in das Klima.

00:06:11.720 --> 00:06:14.120
 Und wir brauchen, wir müssen das als Jingle irgendwann machen.

00:06:14.120 --> 00:06:19.220
 Das haben wir im Stream auch schon mal gesagt, irgendwie so 0721 470 46 487.

00:06:19.220 --> 00:06:20.220
 Oder irgendwie sowas, ne?

00:06:20.220 --> 00:06:22.400
 Die faxigste Nummer Deutschlands.

00:06:22.400 --> 00:06:26.300
 Frontend-Faxen, äh, Frotzelein.

00:06:26.300 --> 00:06:28.580
 So genau, wir haben ja überlegt, ob wir uns umbenennen.

00:06:28.720 --> 00:06:33.080
 Frontend-Faxen-Frotzelein, dann wäre es wenigstens ehrlich, weil Fakten gibt es ja eher selten bei uns.

00:06:33.080 --> 00:06:34.440
 Aber Faxen gibt es öfter.

00:06:34.440 --> 00:06:39.420
 Ja, die Faxen, äh, haben wir, äh, dicke, wir haben die Faxen faustdicke hinter den Ohren.

00:06:39.420 --> 00:06:40.400
 Oder wie war das?

00:06:40.400 --> 00:06:41.560
 Okay.

00:06:41.560 --> 00:06:43.780
 Brauchen wir gar kein Bier, geht alles auch so.

00:06:43.780 --> 00:06:47.420
 Bevor es noch blöder wird, ähm, äh, fange ich mal an.

00:06:47.420 --> 00:06:48.300
 Ähm.

00:06:48.300 --> 00:06:50.900
 Was ist los?

00:06:50.900 --> 00:06:51.960
 Was heißt denn das jetzt?

00:06:51.960 --> 00:06:52.300
 Ach so?

00:06:52.300 --> 00:06:52.860
 Nein.

00:06:52.860 --> 00:06:55.920
 Ja, also, nee, also ich meine, mach ich mal weiter.

00:06:55.920 --> 00:06:56.680
 Fangen wir mal an.

00:06:56.680 --> 00:06:58.900
 Fangen wir mal an, bevor es noch blöder wird.

00:06:58.900 --> 00:07:05.020
 Äh, und zwar hab ich, äh, diese Woche, nee, war es diese Woche oder war es letzte Woche?

00:07:05.400 --> 00:07:20.180
 Jedenfalls seit der letzten Podcast-Folge, ähm, mit einem neuen Tool gearbeitet, äh, und das hatte der Michael, unser Micha van Engelshoven in der Folge, oh geht, oh Gott, Folge 25, ähm, auch mal kurz angesprochen.

00:07:21.100 --> 00:07:35.700
 Und das kam jetzt bei mir zum Einsatz, weil ich für ein, äh, jetzt überlege ich, hol ich soweit aus, äh, oder, ich wollte Dinge automatisieren, möglichst bevor ich, äh, sie in das Repository committe.

00:07:35.700 --> 00:07:49.600
 Ähm, und ich hätte das mit Git-Actions machen können, dann halt schon im Repository, aber ich wollte das halt, wie gesagt, möglichst schon abfrühstücken, während es noch bei mir lokal ist und dann überhaupt gar keinen Commit erst erstellen, wenn irgendwas nicht, nicht, nicht passt.

00:07:50.340 --> 00:08:19.580
 Und, äh, und dann hab ich kurz gegoogelt und bin direkt gestoßen auf Husky und das ist ein NPM-Package, das man installieren kann und dann kann man sich für, für jeden Git-Hook, ähm, so ein, so ein, äh, File anlegen einfach nur, also das konfiguriert sich alles da von, von selbst mit, mit Git zusammen und, ähm, dann kann man da drin beliebige Skripte ausführen, also irgendwie sagen, before commit oder before push, ähm, wird dann irgendwas ausgeführt, in dem Fall wollte ich eine Versionsnummer bumpen,

00:08:19.580 --> 00:08:40.200
 ähm, und, äh, und noch irgendwas anderes machen und, genau, das hab ich jetzt mal ausprobiert und das find ich ziemlich cool, also da kann man so ein bisschen noch mehr automatisieren, ohne dass man jetzt irgendwie, äh, da online dieses Bildzeugs konfigurieren muss und dann vielleicht noch zahlen muss, wenn man da diese freien Minuten überschreitet und, ähm, ja, fand ich ganz cool.

00:08:41.580 --> 00:08:43.620
 Cool. Einfach mal angucken.

00:08:43.620 --> 00:08:44.640
 Genau.

00:08:44.640 --> 00:08:57.840
 Ähm, ja, mein nächster Retro-Punkt, äh, ist Feedback, Podcast-Feedback haben wir bekommen, ähm, wahrscheinlich kriegen wir das häufiger als, als wir denken, wir, wir schauen immer nur auf bestimmten Plattformen nach,

00:08:57.920 --> 00:09:10.420
 also falls ihr uns irgendwo mal Feedback geschrieben habt, äh, was nicht Apple Podcasts ist, dann haben wir es wahrscheinlich noch nicht gelesen, also dann, äh, sagt uns mal Bescheid, wo ihr das geschrieben habt, ähm,

00:09:10.420 --> 00:09:39.500
 Ich mein jetzt so die Feedback-Funktion von, äh, von Podcast-Programmen und bei Apple Podcasts kann man ja Feedback schreiben und, äh, wir sind immer noch ein Fünf-Sterne-Podcast da, also wir haben bisher immer noch Fünf-Sterne-Bewertungen bekommen, aber es waren auch ein paar, äh, ein paar nette Texte jetzt dabei, die ich jetzt zum ersten Mal gelesen hab und es, äh, es reicht ein bisschen weiter in die Vergangenheit tatsächlich zurück, ähm, das, ich trau mich die kaum vorzulesen, eigentlich, also schaut mal selbst nach bei Apple Podcasts, äh, wo wir sind, ist vorne, ähm, und schreibt uns natürlich auch Feedback.

00:09:39.500 --> 00:09:41.400
 Also, äh, wir würden uns sehr freuen.

00:09:41.400 --> 00:09:43.880
 Wir haben uns auch sehr gefreut schon über das, was da kam.

00:09:43.880 --> 00:09:56.540
 Also extrem gefreut, wie gesagt, es gibt so Sachen, die sagt man über sich selbst nicht, die sind einfach zu nett, die kann ich jetzt nicht hier vorlesen, im Stream hab ich mich das getraut, hier mach ich das lieber nicht, äh, nee, das, äh, genau, könnt ihr ja mal reingucken.

00:09:56.540 --> 00:10:01.180
 Das ist nicht schlimm, aber es ist so sehr beweihräuchernd und das ist, da fühlt man sich dann irgendwie, ja, genau.

00:10:01.180 --> 00:10:09.400
 Es ist zu nett, dass man sowas über sich selbst sagen würde, aber es hat uns extrem gefreut, das können wir auf jeden Fall schon mal sagen und da war einiges dabei, ähm, und,

00:10:09.500 --> 00:10:33.640
 äh, wir würden uns sehr freuen, wenn auch ihr, falls ihr es noch nicht gemacht habt, uns auch Feedback schicken würdet, äh, gerne über Podcast-Apps und falls es nicht Apple Podcasts ist, dann gerne mal auch irgendwie uns über Twitter oder Mastodon mal anschreiben und sagen, hey, guck mal, ich hab hier Feedback gegeben, weil dann gucken wir da dann auch mal regelmäßig, weil es gibt so viele Plattformen, ähm, so, so viele kleinere, wo wir das gar nicht mitkriegen, weil wir nicht darüber notifiziert werden, wenn da Feedback geschrieben wird.

00:10:33.640 --> 00:10:37.180
 Also bei Apple Podcasts werden wir darüber auch nicht notifiziert, aber da gucke ich halt ab und zu mal rein.

00:10:37.180 --> 00:10:47.640
 Und wie bin ich überhaupt da drauf gekommen, ähm, dass da Feedback ist, ähm, oder dass da neues Feedback ist, äh, über ein Feature, was ich, äh, entdeckt habe, was, was ich,

00:10:48.040 --> 00:11:17.860
 was wahrscheinlich irgendwie alle schon kannten, aber was ich jetzt erst vor kurzem entdeckt habe, nämlich, äh, kann man über ein Meta-Tag auf der Seite, äh, sich auf, äh, Apple Podcasts fähigen Geräten, nee, das ist eigentlich falsch, ich würde sagen, iOS-Geräte, wahrscheinlich auch iPadOS, da bin ich mir jetzt nicht sicher, ähm, auf solchen Geräten, wenn man Meta-Tag in die Seite einfügt, äh, wo die, ähm, App-ID, Schrägstrich Podcast-ID hinterlegt ist, also das Meta-Name Apple iTunes App heißt das,

00:11:17.860 --> 00:11:47.680
 äh, und, äh, Content App-ID und dann kommt eine Nummer, ähm, kann man sich so ein Podcast-Banner einblenden lassen auf der Seite, man kennt das auch von anderen Seiten für Apps, also gibt's, äh, es gibt auch so App-Banner, aber das gibt's auch für Podcasts, äh, und, äh, das hab ich bei uns eingebaut und bin darüber dann auf die Apple Podcasts-Seite unseres Podcasts gekommen und hab dann da gesehen, ah, das ist ja neues Feedback da, was ich noch gar nicht kannte, aber das ist vielleicht so ein kleiner Tipp für die, äh, Podcastenden unter euch, ähm, das könntet ihr euch mal anschauen, wenn das, wenn ihr das noch nicht auf eurer Seite habt, das ist eine

00:11:47.680 --> 00:11:59.320
 eine Zeile da einzubauen, man muss nur irgendwie seine ID mal rausfinden, die hängt man dann da hinten dran und dann, äh, kriegt jeder, der mit dem iPhone da vorbeisurft, direkt so einen schönen Banner angezeigt und kann dann direkt das, äh, den Podcast in der Podcasts-App öffnen

00:11:59.320 --> 00:12:09.000
 Und, äh, das find ich mal wieder ein sehr cooles Feature, also das ist so einfach so, man droppt das da rein und das sieht aber halt gleich irgendwie cool aus und, äh, ja, schöne Sache

00:12:09.000 --> 00:12:10.540
 Genau

00:12:10.540 --> 00:12:15.120
 Dann komm jetzt, kommt dein Punkt, dein nächster

00:12:15.120 --> 00:12:22.180
 Genau, äh, und zwar hatten wir es vor einer Weile mal, wir beide drüber, erinnerst du dich vielleicht über, ähm, if-Statements

00:12:22.180 --> 00:12:33.300
 Ähm, und da drin dann, also wenn ich jetzt irgendwie, ich überprüfe eine Variable, äh, auf ihren Inhalt halt, also, ähm, und mach aber nicht, äh, if-Variable

00:12:33.300 --> 00:13:03.280
 Äh, ist gleich, gleich, äh, true, sondern ich mach true gleich gleich gleich Variable oder eben, äh, String gleich gleich Variable und dass man das häufig im PHP-Kontext, ähm, äh, sieht, dass das so ein Coding-Style ist und dass sich darüber so ein bisschen die Geister scheiden, dass ich aber durchaus das Positive auch sehen kann, weil man halt das, was wichtig ist, wenn ich was überprüfen will, gleich am Anfang sieht und dann irgendwie in, in, in, wenn man so mehrere If-Else-Geschichten hat, ähm,

00:13:03.280 --> 00:13:24.260
 Dann halt gleich am Anfang sieht, ohne jetzt die ganze Zeile zu erfassen, was da überprüft wird und, ähm, möchte jetzt aber nicht sagen, mach das oder lass das, aber ich wusste nicht, dass es einen eigenen Namen hat und jetzt bin ich letztens, äh, durch einen Linter, ähm, in einem Projekt drauf gestoßen, der dann gesagt hat, äh, ja, Anne, laut Yoda-Condition

00:13:24.260 --> 00:13:39.340
 Ich dachte, Yoda-Condition und dann war mir gleich klar, ja, ja, natürlich ist das mit gemeint, ne, weil Satzstellung, Satzstellung umgedreht und deswegen, ähm, ja, man nennt diese Dinge Yoda-Conditions, also, äh, jetzt wissen wir das auch

00:13:39.340 --> 00:13:42.580
 Also, was, was, was für ein, äh, kannst du mal ein Beispiel geben?

00:13:42.580 --> 00:13:50.500
 Naja, eben, also, dass ich nicht, nicht sag, if, ähm, do this gleich true, sondern eben if true gleich do this.

00:13:50.500 --> 00:13:51.340
 Ja.

00:13:51.340 --> 00:13:57.700
 Dann, äh, genau, das ist eine Yoda-Condition, also, wenn ich das, äh, den Wert an den Anfang stelle und dann die Variable.

00:13:57.820 --> 00:14:02.640
 Ja, sehr gut. Ähm, was, weißt du noch, was für ein Linter das war? Das würde mich mal interessieren.

00:14:02.640 --> 00:14:06.880
 Ähm, hm, das war entweder, warte mal, das kann ich dir sagen.

00:14:06.880 --> 00:14:08.540
 Ich kannte das Wort nämlich noch nicht.

00:14:08.540 --> 00:14:21.460
 Es war, äh, wo ist es denn? Hier. Entweder war es, äh, JSHINT oder es war JSCS. JSCS.

00:14:21.460 --> 00:14:24.420
 Eins von beidem.

00:14:26.420 --> 00:14:31.060
 All right. Gut, nee, ist auch nicht so wichtig, war jetzt nur so, war jetzt so reine, reine Neugierde.

00:14:31.060 --> 00:14:33.800
 Ja, cool, jetzt wissen wir das auch.

00:14:33.800 --> 00:14:35.800
 Yoda-Conditions.

00:14:35.800 --> 00:14:36.320
 Yoda-Conditions.

00:14:36.320 --> 00:14:44.260
 Ich hab, ich hab gefragt, weil es klang so ein bisschen nach, nach was, was, äh, Sonar Cube sagen würde, für, äh, für die, die das kennen.

00:14:44.260 --> 00:14:52.200
 Weil das ist oft sehr pingelig bei ganz vielen Sachen, ähm, und sagt dann irgendwie auch sowas wie, ja, das ist irgendwie clumsy.

00:14:52.200 --> 00:14:53.160
 Clumsy.

00:14:53.160 --> 00:15:00.460
 Es gibt tatsächlich eine, eine, eine, eine Fehlerkategorie, die nennt sich clumsy, äh, bei, bei Sonar Cube. Das ist, äh, das ist ganz witzig.

00:15:00.460 --> 00:15:19.320
 Ähm, die, die definieren zum Beispiel auch, ähm, Komplexität, Brain, Brain Overload heißt es dann, glaube ich, Komplexitätswert von Funktionen, wenn die zu tief sich verschachteln, dann sagen die, ey, äh, du hast aber doch irgendwie festgelegt, der Komplexitätswert von dieser Funktion, der darf nur maximal so und so viel sein.

00:15:19.420 --> 00:15:20.500
 Das wird irgendwie zusammengerechnet, der wird irgendwie zusammengerechnet.

00:15:20.500 --> 00:15:20.700
 Okay.

00:15:20.700 --> 00:15:21.920
 Ja, aber ist nicht schlecht.

00:15:21.920 --> 00:15:22.560
 Wie tief, also.

00:15:22.560 --> 00:15:32.780
 Es ist super, es ist tatsächlich super. Es ist pingelig, aber es hat halt meistens recht. Äh, okay, haben wir Yoda Conditions gelernt, äh, bist du damit, dann damit fertig?

00:15:32.780 --> 00:15:33.400
 Genau, ja.

00:15:34.200 --> 00:16:03.440
 Gut. Ähm, ich hatte, äh, nachdem ich ein bisschen frustriert war, ein gutes Erlebnis mit Solarstrom jetzt. Wir hatten ja schon mal drüber gesprochen, ähm, dass ich mir ja mal so ein, äh, so ein 100 Watt Solarpanel, äh, gekauft hab und hab versucht, damit irgendwie Powerbanks zu laden und, äh, war damit so, jetzt im Winter so, äh, gut, wir hab ja schon mal gesagt, irgendwie, äh, Erdgeschoss, ähm, Häuser drumherum, wenig Sonnen, direkte Sonneneinstrahlung und dann auch noch hinter einer Fensterscheibe.

00:16:03.440 --> 00:16:20.720
 Äh, ist natürlich, ist natürlich sehr schlechte Bedingungen und, äh, ich hatte lange Zeit so den Eindruck, diese Powerbank, die ich da hinten dran hängen habe, das ist eine relativ große, irgendwie 28.000, äh, 26.800 Milliampere, ähm, ähm, die, da lädt sich gar nichts.

00:16:20.720 --> 00:16:31.560
 Ich hab dann auch mal irgendwie nach, nach ein, zwei Tagen die da weggenommen und hab gedacht, so, jetzt guck ich mal, wie viel drin ist und dann halt noch fünf Minuten, äh, hat mein iPhone gesagt, ah ja, äh, ich bin jetzt fertig mit Laden, es kommt jetzt nichts mehr.

00:16:32.680 --> 00:16:34.220
 Gar nicht, da kommt ja gar nichts an.

00:16:34.220 --> 00:16:40.100
 Und jetzt die letzten Tage war öfter mal ein bisschen Sonne und das war doch erstaunlich, jetzt war die plötzlich voll.

00:16:40.100 --> 00:16:55.060
 Ich weiß jetzt nicht, über wie viele Tage, über wie viele Tage das jetzt gedauert hat, aber jetzt war sie plötzlich voll und ich hab dann noch mal gemerkt, was für eine krasse Kapazität die hat, ähm, weil ich nämlich dann mein iPhone einmal komplett vollgeladen hab, also von, von, äh, von 25 Prozent oder so vollgeladen.

00:16:55.840 --> 00:16:57.700
 Und dann hatte die immer noch vier von vier Strichen.

00:16:57.700 --> 00:16:58.480
 Ja, cool.

00:16:58.480 --> 00:17:01.660
 So, und dann hab ich gedacht, okay, da hat's jetzt doch ordentlich Solarpower rein, reingepumpt.

00:17:01.660 --> 00:17:04.700
 Und die war komplett leer und ist dann von der Sonne aufgeladen worden?

00:17:04.700 --> 00:17:07.460
 Die war komplett leer und ist von der Sonne ganz aufgeladen worden.

00:17:07.460 --> 00:17:07.880
 In welchem Zeitraum?

00:17:07.880 --> 00:17:09.940
 Das weiß ich halt nicht genau.

00:17:09.940 --> 00:17:13.740
 Ich hab, ich hab, war frustriert, hab aufgegeben, hab nicht mehr geguckt für eine Zeit.

00:17:13.740 --> 00:17:15.300
 Aber die hingen einfach jetzt die ganze Zeit da.

00:17:15.300 --> 00:17:16.840
 Hingen einfach jetzt die ganze Zeit da dran.

00:17:16.840 --> 00:17:20.640
 Ich weiß jetzt tatsächlich nicht, das möchte ich jetzt aber mal genauer beobachten.

00:17:20.640 --> 00:17:22.120
 Dafür muss ich sie aber noch mal leer machen.

00:17:22.120 --> 00:17:29.100
 Ähm, ich will jetzt aber erst mal, äh, meinen ganzen Solarstrom verladen, weil mich das total freut, dass ich den jetzt da habe.

00:17:29.100 --> 00:17:30.840
 Ähm, genau.

00:17:30.840 --> 00:17:31.980
 Von der Natur geschenkt.

00:17:31.980 --> 00:17:39.180
 Von der Natur geschenkt und, und mit, also ich hab ja, wie gesagt, ich hab ja gar nichts Baulicht da jetzt irgendwie verändert oder irgendwie,

00:17:39.720 --> 00:17:44.780
 die hängt jetzt wirklich einfach nur an, an der Innenseite von einem Fenster hängt dieses eine Panel.

00:17:44.780 --> 00:17:50.880
 Und es ist nicht mal komplett, äh, also der, der Sonne ausgesetzt, weil es ein bisschen zu hoch ist.

00:17:50.880 --> 00:17:54.320
 Das heißt, es ist auch ein Stück hinter dem, hinter dem Kunststoffrahmen vom Fenster.

00:17:54.320 --> 00:17:57.600
 Aber das wollte ich einfach nur mal erzählen, weil es irgendwie dann doch ein ganz gutes Erlebnis war.

00:17:57.600 --> 00:17:59.500
 Dachte erst schon, das war, ist jetzt irgendwie so ein Reinfall.

00:17:59.500 --> 00:18:07.560
 Ähm, oder so nach dem Motto, das Ding funktioniert nur dann, wenn man es tatsächlich in die pralle Sonne ohne irgendwas dazwischen und im perfekten Winkel.

00:18:07.560 --> 00:18:16.020
 Ja, aber wenn es tatsächlich jetzt schon in dieser dunkleren Jahreszeit so funktioniert, also dann, dann scheint es, muss das ja im Sommer erst recht richtig gut zu laden sein.

00:18:16.020 --> 00:18:23.600
 Das war, das war, das hat mich gefreut und dachte ich, da wir hier schon mal drüber gesprochen haben, greife ich das jetzt nochmal auf und sage, hey, ich hatte jetzt so ein kleines Erfolgserlebnis.

00:18:23.600 --> 00:18:29.360
 Allerdings muss ich jetzt tatsächlich mal die Parameter genauer festzonen und dann gucken, wie lange dauert es denn jetzt wirklich.

00:18:29.360 --> 00:18:31.900
 Und dann vielleicht nochmal so ein Messgerät zwischen reinhängen.

00:18:31.900 --> 00:18:40.600
 Ich habe mir mal so ein USB-Messgerät, ich glaube, das habe ich auch mal gezeigt, so ein USB-Strom-Durchfluss-Messgerät gekauft und dann mal gucken, wie viel denn da jetzt wirklich reinkommt.

00:18:40.600 --> 00:18:41.280
 Cool.

00:18:41.280 --> 00:18:43.700
 Jo, das zum Solarstrom.

00:18:44.960 --> 00:18:48.140
 Gut, dann habe ich noch eine Kleinigkeit zum Aufgreifen.

00:18:48.140 --> 00:18:53.900
 Wir haben vor einer Weile mal uns gefragt, wie lange es wohl noch dauert, bis IE11 bei Canary Use rausfliegt.

00:18:53.900 --> 00:19:04.780
 Und jetzt habe ich gerade vorhin beim Vorbereiten für die Sendung gesehen, dass jetzt bei IE11 auf Canary Use, wenn man irgendwo drauf geht, so ein Ausrufezeichen-Icon ist.

00:19:05.520 --> 00:19:06.700
 Das habe ich vorhin auch gesehen, ja.

00:19:06.700 --> 00:19:16.360
 Und da steht dann, wenn man drüber havert, dass die Support-Daten für Internet Explorer nicht mehr aktualisiert werden und eventuell nicht mehr korrekt sein können.

00:19:16.360 --> 00:19:22.320
 Genau, das heißt, das ist jetzt schon deprecated und wird vermutlich irgendwann mal rausfliegen.

00:19:22.320 --> 00:19:25.700
 Genau.

00:19:26.160 --> 00:19:29.360
 Was hatten wir vor kurzem, dass man ihn nicht mal mehr runterladen kann?

00:19:29.360 --> 00:19:32.300
 Das war jetzt der aktuelle Schritt von Microsoft, ne?

00:19:32.300 --> 00:19:39.440
 Genau, und dann hatten wir es drüber halt, ob der jetzt überhaupt noch relevant ist, weil der in Statistiken da halt immer noch auftaucht und aber eigentlich weg kann.

00:19:39.440 --> 00:19:45.540
 Weil aber jedes Mal, wenn wir halt irgendwie was sagen, so, wenn wir ein Feature-Forscher sagen, wir sagen, elefant.

00:19:45.540 --> 00:19:47.980
 Oh Gott, jetzt habe ich nicht erfunden.

00:19:47.980 --> 00:19:49.500
 Ein wichtiger Elefant ist relevant.

00:19:49.500 --> 00:19:52.000
 Nein, nein, aber das kommt von Böhmermann.

00:19:52.000 --> 00:19:52.500
 Okay.

00:19:52.500 --> 00:19:53.820
 Ist das eigentlich noch relevant?

00:19:55.800 --> 00:19:56.360
 Eventuell.

00:19:56.360 --> 00:19:57.860
 Eventuell.

00:19:57.860 --> 00:20:01.260
 Jawohl.

00:20:01.260 --> 00:20:03.180
 Du merkst, wir brauchen überhaupt gar kein Bier.

00:20:03.180 --> 00:20:04.920
 Das klappt auch so.

00:20:04.920 --> 00:20:05.820
 Wir reden einfach immer so komisch.

00:20:05.820 --> 00:20:06.320
 Das geht auch so.

00:20:06.320 --> 00:20:07.160
 Ganz nüchtern.

00:20:07.160 --> 00:20:08.660
 Ganz nüchtern betrachtet.

00:20:08.660 --> 00:20:16.800
 Wenn wir keiner Jus irgendwas sagen, so ein Feature vorstellen, dann sagen wir halt immer so, ja, geht überall inzwischen, naja, außer IE, aber das ist eigentlich, kann man sich sparen.

00:20:16.800 --> 00:20:21.060
 Ich glaube, wir reden jetzt einfach, wir machen jetzt aus, wir reden nicht mehr über den IE.

00:20:21.060 --> 00:20:22.040
 Spart's euch einfach.

00:20:22.040 --> 00:20:27.480
 Also, wir sagen jetzt in dem Fall, auch wenn die Spalte knallrot ist, es geht in allen Browsern, wenn sie überall grün ist.

00:20:27.820 --> 00:20:36.620
 Und ich würde auch sagen, ich würde noch ein Disclaimer hinten dranhängen, der alte Edge vor Chromium Edge zählt für mich auch nicht mehr.

00:20:36.620 --> 00:20:40.660
 Der ist für mich auch, den gibt's nicht mehr in meinem Kopf.

00:20:40.660 --> 00:20:43.120
 Hat sich aber auch automatisch aktualisiert eh, oder?

00:20:43.120 --> 00:20:46.380
 Also, da gibt's den jetzt theoretisch noch.

00:20:46.580 --> 00:20:51.960
 Ich hab schon lang, ich hab ehrlich gesagt schon lang keine internationalen Browser-Statistiken mehr angeguckt, um sowas zu sehen.

00:20:51.960 --> 00:20:54.480
 Wenn ihr's wisst, schreibt's in die Kommentare.

00:20:54.480 --> 00:20:58.960
 Ja, schreibt's in die Kommentare und drückt die Glocke, ihr wisst ja, und so.

00:20:58.960 --> 00:20:59.900
 Gut.

00:21:01.180 --> 00:21:06.560
 Okay, dann bleibt zu Retro nur noch ein Punkt, nämlich, ich wollte noch mal Danke sagen.

00:21:06.560 --> 00:21:11.580
 Danke, ich hab ja vorhin schon Danke gesagt für das schöne Feedback und jetzt noch mal Danke für Spenden.

00:21:11.580 --> 00:21:13.700
 In letzter Zeit sind auch noch mal ein paar Spenden reingekommen.

00:21:13.700 --> 00:21:23.600
 Hat uns sehr gefreut und unterstützt uns in dem, was wir hier machen und organisiert uns Domain-Name, Hardware und so weiter.

00:21:23.680 --> 00:21:25.980
 Was man so braucht zum Podcasten.

00:21:25.980 --> 00:21:33.280
 Ja, finde ich, ist mal der sehr kurze, aber sehr intensiver Applaus.

00:21:33.280 --> 00:21:40.900
 Okay, dann passend dazu kommt jetzt Werbung.

00:21:40.900 --> 00:21:43.940
 Achso, dann muss ich aufs Knöpfen dran.

00:21:43.940 --> 00:21:44.580
 So, ich kann.

00:21:44.580 --> 00:21:46.380
 Warte mal, warte mal, ich hab's.

00:21:47.680 --> 00:21:51.460
 Hey, hey du, schön, dass du da bist.

00:21:51.460 --> 00:21:53.880
 Na, öfter hier?

00:21:53.880 --> 00:22:01.440
 Dir gefällt, was du hörst und du magst es am liebsten werbefrei und unabhängig?

00:22:01.440 --> 00:22:10.520
 Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter www.siv.de

00:22:10.520 --> 00:22:21.680
 slash Spende auf www.siv.de slash unterstützen findest du noch ca. 69 weitere Wege, uns zu supporten.

00:22:21.680 --> 00:22:23.460
 Wir danken dir.

00:22:23.460 --> 00:22:34.840
 Ja, einfach mal machen, was der nette Herr euch gesagt hat.

00:22:34.840 --> 00:22:43.300
 Gut, dann geht's jetzt weiter und wir kommen direkt zu, ah, okay, nee, das passt jetzt wieder so nicht.

00:22:43.300 --> 00:22:45.180
 Wer ist denn da?

00:22:45.180 --> 00:22:49.680
 Hier ist www.siv.de mit dem Tagesthema.

00:22:49.680 --> 00:22:56.400
 Der war jetzt sehr nüchtern im Vergleich zu dem anderen da.

00:22:56.400 --> 00:22:57.420
 Nüchtern?

00:22:57.420 --> 00:23:01.360
 Dieser Herr, der da jetzt gerade gesprochen hat, der war so nüchtern wie wir.

00:23:02.040 --> 00:23:16.820
 Ja, weil, also ihr hättet jetzt vielleicht die Property der Woche erwartet, aber heute machen wir mal wieder Properties als Thema, aber dafür gibt es heute ganze vier Stück hintereinander weg.

00:23:16.820 --> 00:23:22.060
 Etwas kleinere und etwas größere und deswegen kommt jetzt auch noch der andere Jingle.

00:23:22.060 --> 00:23:26.080
 Die Property der Woche.

00:23:26.080 --> 00:23:28.460
 Teil 1.

00:23:28.460 --> 00:23:31.360
 Ah, sehr gut.

00:23:32.040 --> 00:23:35.120
 Fängst du an?

00:23:35.120 --> 00:23:36.580
 Ja, ich fang an.

00:23:36.580 --> 00:23:46.420
 Und zwar hab ich, ich arbeite zur Zeit so nebenher ein bisschen an OpenType.js, das hab ich glaube ich auch schon erwähnt, dass ich da jetzt so mit Maintainer bin.

00:23:47.180 --> 00:23:58.920
 Und da stoße ich auch immer wieder im Code oder durch andere, die da mitmachen, deswegen auch nochmal Shoutout an die OpenSource Community, weil das auch wirklich die Mitarbeiter einem selber auch als EntwicklerIn hilft.

00:23:59.920 --> 00:24:03.160
 Da stößt man immer wieder auf interessante Dinge, die man so noch nicht gesehen hat.

00:24:03.160 --> 00:24:14.460
 Und jetzt hat vor ein paar Tagen jemand, das war nicht mal jetzt in der Codebase, wo das aufgekommen ist, sondern das hat jemand ein Issue erstellt, so, ja, kann OpenType.js denn die Systemstandard-Fonts anzapfen?

00:24:15.400 --> 00:24:21.620
 Mein erster Impuls war gleich irgendwie so, ja, gleich mal schließen und sagen, nee, das geht nicht im Browser, der Browser kann das nicht.

00:24:21.620 --> 00:24:24.400
 Da dachte ich, bevor ich das mache, google ich aber doch nochmal.

00:24:25.140 --> 00:24:28.900
 Und hab rausgefunden, es gibt tatsächlich eine Local Font Access API.

00:24:28.900 --> 00:24:33.800
 Und das fand ich ziemlich verrückt, dass es das gibt.

00:24:33.800 --> 00:24:41.760
 Weil eigentlich ist der Zugriff auf die Systemfonts aus gutem Grund eingeschränkt, also dass man die auch nicht querien kann.

00:24:41.760 --> 00:24:48.500
 Das wurde früher ganz gerne mal mit Flash gemacht, weil mit Flash konnte man sich auch irgendwie die Systemfonts anzapfen.

00:24:49.280 --> 00:24:58.140
 Und das ist insofern gefährlich, dass man diese Liste installierter Fonts als Angriffsvektor nutzen kann.

00:24:58.140 --> 00:24:59.660
 Oder zum Fingerprinting.

00:24:59.660 --> 00:25:11.340
 Also Fingerprinting deswegen, weil die Konstellation an Fonts, die in einem System installiert sind, wenn es jetzt nicht gerade komplett jungfräulich ist, doch sehr individuell ist.

00:25:11.340 --> 00:25:24.200
 Also da kann man schon mit einer relativ großen Wahrscheinlichkeit dann hinterher rausschließen, ist das die gleiche Person, wenn man das nochmal hat, also Fingerprint.

00:25:24.740 --> 00:25:31.740
 Was man aber auch machen kann, und das habe ich in einem interessanten Artikel zu dieser API gelesen, auf dem Chrome Developers Blog, verlinke ich natürlich auch.

00:25:31.740 --> 00:25:42.720
 Man kann zum Beispiel gucken, oder könnte das gucken, über CSS zum Beispiel, kann man ja auch mit dem Local Keyword Fonts anzapfen vom System.

00:25:42.860 --> 00:25:52.140
 Und dann könnte man daraus schließen, wie groß ist ein Element und hat das wahrscheinlich die Font installiert.

00:25:52.140 --> 00:25:59.020
 Beziehungsweise, wenn ich es direkt anzapfen könnte, kann ich natürlich wirklich auslesen, ist diese Schrift auf dem System installiert.

00:25:59.360 --> 00:26:04.420
 Und es gibt ja gewisse sogenannte Hausschriften, die nur firmenintern eigentlich genutzt werden.

00:26:04.420 --> 00:26:10.420
 Also Google hat irgendwie seine eigene, Google Suns, IBM hat glaube ich eine eigene.

00:26:10.420 --> 00:26:17.220
 Also ganz viele Firmen lassen sich wirklich von Frontdesignern eine eigene Hausschrift machen, die sie dann im Schriftverkehr benutzen oder für Werbung.

00:26:17.220 --> 00:26:20.740
 Ikea hatte bis vor einer Weile auch eine, ist inzwischen glaube ich auf Notruhe umgestiegen.

00:26:20.740 --> 00:26:28.460
 Aber das ist nur am Rande, also man kann daraus vielleicht sogar schließen, wo arbeitet die Person, die das gerade aufruft.

00:26:28.460 --> 00:26:35.480
 Und kann dann halt gezielt targeten, so ich will bei Google irgendwie rein oder ich will bei Meta rein und ich gucke dann aufgrund der Hausfond,

00:26:35.480 --> 00:26:44.960
 sodass ich einfach den Personenkreis einenge und meine Energie nicht darauf verschwende, irgendwie Spam-Mails oder Social Engineering irgendwie bei 10.000 Menschen anzuwenden,

00:26:45.340 --> 00:26:52.240
 wo dann irgendwie nur eine davon bei der Firma arbeitet, die ich hacken will, sondern kann dann darüber die Leute wirklich ausfindig machen.

00:26:52.240 --> 00:27:02.500
 Aber es gibt tatsächlich, und zwar hinter einer Permission versteckt, eine API wie gesagt, mit der ich diese Fonts anzapfen kann.

00:27:02.500 --> 00:27:14.360
 Warum sollte ich das wollen? Ich will zum Beispiel irgendwelche interaktiven Grafiken machen mit WebGL oder ich will auf dem Canvas was zeichnen.

00:27:14.520 --> 00:27:24.120
 Ich kann zum Beispiel mit Web-Fonts, wie waren das, also lokal eingebundene Fonts, kann ich glaube ich nicht in dem Canvas verwenden.

00:27:24.120 --> 00:27:30.920
 Eben genau aus dem Grund, dass ich nicht dann irgendwie versuchen kann, dann anhand der Pixel rauszufinden, ob diese Fonts anzapfen sind.

00:27:30.920 --> 00:27:42.520
 Ich habe noch einen Use Case für dich, wo ich gerade sofort dran denken musste und jetzt habe ich kurz gegoogelt und habe tatsächlich gefunden, dass es sogar dazu zu der Local Font Access API in Eintrag gibt.

00:27:42.520 --> 00:27:54.920
 Und zwar habe ich hier auch schon mal erwähnt, ich benutze Boxy SVG als SVG-Editierprogramm oder so als Design-Tool für mich, um SVGs zu bauen.

00:27:54.920 --> 00:27:57.820
 Also irgendwie Logos und Kram, alles was Vektorgrafik ist.

00:27:58.820 --> 00:28:05.400
 Und das gibt es sowohl als Electron-App zum Installieren als auch als Web-App im Browser.

00:28:05.400 --> 00:28:11.360
 Und ich habe jetzt gerade mal geguckt und das möchte natürlich Fonts, da möchtest du natürlich die Fonts, die du auf deinem System hast, benutzen können.

00:28:11.880 --> 00:28:20.440
 Und das funktioniert so lala, also selbst in der Electron-App funktioniert das mal, wer findet mal die Fonts, mal findet er sie nicht.

00:28:20.440 --> 00:28:31.520
 Das ist so ein bisschen flaky, aber es gibt tatsächlich hier in der Doku dazu einen Eintrag, der sagt, wie ich das einstellen kann, dass es funktioniert, auch wenn ich die Web-App verwende.

00:28:31.520 --> 00:28:39.540
 Und da wird genau das gesagt, ich soll die Web-Local-Font-Axis-AP einschalten.

00:28:39.540 --> 00:28:46.980
 Vielleicht packe ich das auch mal in die Shownotes, diesen Link, weil das finde ich tatsächlich interessant, weil das genau so ein Anwendungsfall ist.

00:28:46.980 --> 00:28:51.580
 Ich habe hier eine App, mit der möchte ich Grafiken erstellen, da möchte ich natürlich meine Fonts verwenden.

00:28:51.580 --> 00:28:56.780
 Daran habe ich auch gedacht, dass man das in der Electron-App dann tatsächlich anzapfen kann.

00:28:56.780 --> 00:28:59.020
 Wahrscheinlich muss man da nicht mal die Permission bestätigen.

00:28:59.680 --> 00:29:06.240
 Das weiß ich nicht, vielleicht müsste ich da mal gucken, weil bei mir geht es nämlich nie, das mit den lokalen Fonts.

00:29:06.240 --> 00:29:07.740
 Und das würde jetzt erklären, warum.

00:29:07.740 --> 00:29:11.540
 Vielleicht ist da irgendeine Einschränkung, die man irgendwie umgehen muss.

00:29:11.540 --> 00:29:23.020
 Es steht aber eigentlich, wenn man die App-Store-App nimmt, steht hier, sollte das funktionieren, aber es funktioniert trotzdem oft nicht.

00:29:23.020 --> 00:29:28.740
 Vielleicht, da bin ich mal gespannt, ob meine Demo bei dir funktioniert, die ich gleich noch zeige.

00:29:29.280 --> 00:29:42.220
 Genau, also das mit diesem Tracking zu verhindern, das geht sogar so weit, dass WebKit das eingebaut hat, dass man über local, über diese CSS-Funktion, nur die Fonts einbinden kann, die mit dem Betriebssystem kommen.

00:29:42.980 --> 00:29:53.920
 Also alles, was ich zusätzlich installiere, wird da nicht angezeigt, sondern nur die, die tatsächlich mit dem System kommen und dadurch wird eben verhindert, dass man da irgendwie Schindel mit treiben kann.

00:29:55.680 --> 00:30:04.100
 Umso interessanter wird in dem Fall natürlich dann diese API, wenn sie dann unterstützt wird, weil aktuell funktioniert das nur in Chromium-Browsern und dort auch nur auf Desktop.

00:30:06.560 --> 00:30:19.980
 Genau, und ich habe jetzt eine Demo gebaut, die hat in CodePen nicht funktioniert, weil da aufgrund von CSP-Sicherheitsgedöns, das, wo wir ja auch darüber schon mal gesprochen haben,

00:30:20.540 --> 00:30:26.100
 vielleicht verlinke ich auch noch die Folge, wenn wir da, wir haben es jetzt schon öfter mal immer wieder genannt, dieses Keyword CSP.

00:30:26.100 --> 00:30:31.700
 Gucken wir mal hier, Policy, das war die Folge 48, die kommt dann auch noch in die Shownotes.

00:30:33.760 --> 00:30:47.440
 Dementsprechend musst du jetzt eine Demo bauen, die ich bei uns jetzt auf dem Server gehostet habe, aber ihr dürft mir da vertrauen und ihr dürft einfach mal, trust me, bro, ja, draufklicken und das bestätigen.

00:30:47.440 --> 00:30:49.060
 Das hat sich jetzt sogar gemerkt.

00:30:49.060 --> 00:30:51.620
 Ich bin mal gespannt, was du siehst, wenn du draufgehst.

00:30:51.620 --> 00:30:56.960
 Du hast den, ah, du hast die, okay, das ist die Demo, die bei uns auf der Seite, okay.

00:30:56.960 --> 00:31:02.220
 Also entweder geht in die Shownotes oder wo wir sind, vorne.show slash demo slash ...

00:31:02.220 --> 00:31:07.100
 Die Schriftarten auf deinem Computer, bla, bla, bla, damit ich, ja, und jetzt lass ich mal zu.

00:31:07.100 --> 00:31:15.200
 Und, ah ja, und jetzt krieg ich 1326 Fonds, hab ich installiert.

00:31:15.200 --> 00:31:16.360
 Ah, 1403 sticht.

00:31:16.360 --> 00:31:19.640
 Comic Sans is one of them.

00:31:19.640 --> 00:31:22.440
 Ah, okay, sehr gut. Die wird ja auch in Comic Sans angezeigt, ne?

00:31:22.440 --> 00:31:27.060
 Ja, die wird mir auch in Comic Sans angezeigt, äh, und so weiter. Ah ja, cool.

00:31:27.060 --> 00:31:31.780
 Ja, und dann lese ich hier aus, ich hab ja noch gar nicht drüber gesprochen, was die eigentlich, ne, was ich genau damit machen kann.

00:31:32.220 --> 00:31:37.400
 Aber ich, einfach mal die Demo und dann, dann, dann, dann, äh, kannst du ja vorlesen, was da steht und dann erklär ich was.

00:31:37.400 --> 00:31:42.840
 Genau. Did you know that it was designed by Vincent, äh, Connare? Keine Ahnung.

00:31:42.840 --> 00:31:45.640
 It consists of 587 Glyphs.

00:31:45.640 --> 00:31:47.100
 Ach, bei mir sind's 1106.

00:31:47.100 --> 00:31:50.160
 Dann hab ich eine bessere Version, weil ich einen Microsoft-Computer hab.

00:31:53.040 --> 00:31:54.460
 Willst du dieses Thema jetzt starten?

00:31:54.460 --> 00:31:56.800
 Wahrscheinlich hab ich tolle Ligaturen bei Comic Sans.

00:31:56.800 --> 00:31:58.220
 Ja, wir haben uns im letzten Stream gezoffen.

00:31:58.220 --> 00:32:00.880
 Wir haben uns im letzten Stream schon schlimm, schlimm gefetzt, deswegen.

00:32:00.880 --> 00:32:03.360
 Das will ich gar nicht, wollte ich gar nicht triggern.

00:32:03.360 --> 00:32:03.700
 Nee, nee.

00:32:03.700 --> 00:32:04.360
 Ich glaube, diese Straße ...

00:32:04.360 --> 00:32:08.960
 Aber es ist interessant, also es scheint wirklich, das Font-File, dass ich hab, ich könnte jetzt noch die Versionsnummer einblenden.

00:32:08.960 --> 00:32:15.640
 Ich habe keine Comic Sans selbst installiert, ich habe die, also ich glaube, das muss nur vorinstalliert sein, ich glaube nicht, dass ich die installiert hab bei mir.

00:32:15.640 --> 00:32:18.200
 Also, offenbar hast du eine andere Version tatsächlich.

00:32:18.200 --> 00:32:21.180
 Oder es wird anders gezählt bei mir, das kann auch sein.

00:32:21.180 --> 00:32:24.020
 Dürfte eigentlich nicht, weil es wird nämlich mit OpenType.js gepasst.

00:32:24.020 --> 00:32:31.460
 Anyway, anyway, the first font I found on your device is called Academy Engraved LetPlane 1.0.

00:32:31.460 --> 00:32:34.960
 Hier ist der Text, wo wir sind, ist vorne, in that font SNSVG.

00:32:34.960 --> 00:32:37.060
 Und dann sehe ich da tatsächlich eine ...

00:32:37.060 --> 00:32:43.340
 Gut, ich hätte jetzt nicht sagen können, dass es die Schrift ist, aber so vom Aussehen her könnte man annehmen, dass das so eine ...

00:32:43.340 --> 00:32:47.600
 Es ist halt so eine schöne Serifenschrift, das ergibt schon irgendwie Sinn.

00:32:47.600 --> 00:32:49.400
 But why? Stop at that.

00:32:49.400 --> 00:32:51.500
 Here is it, äh ...

00:32:51.500 --> 00:32:52.900
 Here it ...

00:32:52.900 --> 00:32:55.780
 Ah, schön, dass du Schreibfehler gefunden hast.

00:32:55.780 --> 00:32:57.560
 Okay, gleich nochmal ein bisschen QS gemacht.

00:32:57.560 --> 00:33:00.560
 Here it is fully editable text, enjoy.

00:33:00.560 --> 00:33:08.160
 Okay, und da kann ich jetzt reinklicken und rumtippern und dann krieg ich tatsächlich Buchstaben in dieser Schriftart angezeigt.

00:33:08.160 --> 00:33:08.640
 Okay, cool.

00:33:08.640 --> 00:33:11.780
 This does not come from a font face.

00:33:13.340 --> 00:33:18.440
 But it is actually loaded dynamically directly from the binary code of the font file on your device.

00:33:18.440 --> 00:33:20.000
 Okay.

00:33:20.000 --> 00:33:23.180
 Genau, also, ich kann mit dieser API ...

00:33:23.180 --> 00:33:24.340
 Ah, das ist ein Content Editor, ne?

00:33:24.340 --> 00:33:24.960
 Genau.

00:33:24.960 --> 00:33:27.680
 Kann ich ...

00:33:27.680 --> 00:33:30.680
 Jetzt muss ich gerade hier selber nochmal aufmachen, weil ich es natürlich nicht auswendig weiß.

00:33:30.680 --> 00:33:32.300
 Ist das die verkünstelte Demo?

00:33:32.680 --> 00:33:34.700
 Genau, da hab ich, da hab ich vorhin noch drüber gebaut.

00:33:34.700 --> 00:33:40.440
 Ähm, da kann ich window.queryLocalFonts ausführen.

00:33:40.440 --> 00:33:41.540
 Dann krieg ich ein Promise zurück.

00:33:41.540 --> 00:33:47.040
 Ähm, und in dem Promise krieg ich dann ein Array von FontData-Objekten zurück.

00:33:47.040 --> 00:33:54.220
 Ähm, also ein spezielles, äh, ja, Objekt, ein globales Objekt, FontData oder ein Objekttyp, ähm, nur dafür.

00:33:55.020 --> 00:34:01.180
 Und, äh, da gibt's dann Properties wie Family, Fullname, Postscriptname und Style, die ich abfragen kann.

00:34:01.180 --> 00:34:06.500
 Ähm, das heißt, damit hab ich dann dieses, äh, die erste Schriftart ist die und die.

00:34:06.500 --> 00:34:16.480
 Ähm, aber wie hab ich das gemacht mit dem, äh, mit dem Grüfenzählen oder dass ich bei, äh, ComicSuns schreibe, wer der Designer ist, das kann ich dann wirklich aus den Binärdaten auslesen.

00:34:16.540 --> 00:34:25.520
 Also, ähm, wenn ich mir eine Library wie OpenType.js, das ist natürlich nicht die einzige, die OpenType-Schriften lesen kann und auswerten kann, ähm, aber da ich da mitarbeite, hab ich die genommen, äh, kann ich dann die reinladen.

00:34:25.520 --> 00:34:30.740
 Also, das ist ein, äh, die kann ich mir als, dieses Font-Objekt kann ich mir dann auch als, als Blob, äh, zurückgeben lassen.

00:34:30.740 --> 00:34:34.380
 Das lade ich in Array-Buffer und mit dem Array-Buffer fütter ich dann eben OpenType.js.

00:34:34.380 --> 00:34:37.840
 Und dann hab ich wirklich Zugriff auf diese Tabellen, die in den Font-Files drin sind.

00:34:37.840 --> 00:34:46.320
 Also, ähm, zum Beispiel die Name-Tabelle und da stehen dann so Sachen drin, halt wie das Copyright, ähm, wer der Designer ist, äh, Nutzungsbedingungen und so weiter.

00:34:46.540 --> 00:34:56.240
 Und das kann ich dann alles auslesen und kann theoretisch mir die, ähm, die Glyph-Daten halt rausziehen und, äh, die, die eigenen, einzigen, äh, die einzelnen Vektorpunkte und so weiter.

00:34:56.240 --> 00:35:08.640
 Und kann das eben dann in SVG rendern oder, was ich jetzt da gemacht hab, ich lass mir das Ganze wieder als Blob-URL, ähm, oder ich hätt's auch als BS64-encodete URL mir umwandeln lassen können.

00:35:08.640 --> 00:35:12.140
 Und lade das dann wieder dynamisch als, als Font rein und kann damit arbeiten.

00:35:12.140 --> 00:35:14.480
 Ja, genau.

00:35:14.660 --> 00:35:19.520
 Ziemlich coole Demo, muss ich sagen, also, die solltet ihr euch auf jeden Fall mal anschauen und euch von Konstantin tracken lassen.

00:35:19.520 --> 00:35:25.340
 Getrackt wird nichts, das wird nicht an den Server übertragen, wer mit welchen Fonts da drauf zugegriffen hat, das ist alles im Browser.

00:35:25.340 --> 00:35:29.120
 Ich hätt's, wie gesagt, gern auf CodePen gemacht, aber das, das ging nicht.

00:35:29.120 --> 00:35:36.660
 Ähm, auf jeden Fall kann ich jetzt noch mal nach der Experience, die ich jetzt hier gemacht hab, sagen, dass das, was ich vorhin gesagt hab, mit, ähm,

00:35:37.200 --> 00:35:49.720
 dass der Browser, dass der Browser, dass man im Browser das als Feature einschalten kann, das scheint veraltet, was ich grad vorhin gesagt hab, sondern, man wird tatsächlich gefragt, also, wenn dieser Access, wenn ich nach diesem Access gefragt werde, äh, genau.

00:35:50.020 --> 00:35:56.360
 Ich muss es aber vorher nicht einschalten, ich hab auch in den, äh, Chrome-Flags nichts gefunden, was so heißt, wie angeblich, äh, in dieser Seite.

00:35:56.360 --> 00:36:06.240
 Was ich auch interessant fand, also, man kann das auch, man kann diese, diese Anfrage, ähm, auch nicht von sich aus starten, sondern man muss erst eine User-Interaktion haben.

00:36:06.500 --> 00:36:17.060
 Ah, also, deswegen musste ich diesen Button erst einblenden und erst dann kann ich überhaupt diese Permission anfragen, also, ich kann schon nicht mal die Permission anfragen, bevor der User nicht irgendwie zumindest irgendwo geklickt hat.

00:36:17.060 --> 00:36:24.460
 Da haben wir wieder diese, äh, API, welche ich jetzt schon wieder vergessen hab, wie sie heißt, äh, über die wir im Stream gesprochen haben.

00:36:24.460 --> 00:36:34.140
 Ja, diese Permission, ähm, ja, wo man, wo man sehen kann, welche Permission, äh, angefragt wurde und, und ob die noch in diesem zug, äh, zulässigen Zeitraum liegt, ne, das meinst du, ja?

00:36:34.140 --> 00:36:35.640
 Genau, genau, das mein ich.

00:36:36.500 --> 00:36:38.960
 Ja, liefern wir nach, irgendwann vielleicht auch nicht.

00:36:38.960 --> 00:36:43.480
 Ähm, auf jeden Fall sehr, sehr coole Demo, ähm, gefällt mir sehr gut.

00:36:43.480 --> 00:36:44.800
 Das freut mich.

00:36:44.800 --> 00:36:46.200
 Vor allem wegen Comic Sans, ne?

00:36:46.200 --> 00:36:48.180
 Nur deswegen.

00:36:48.180 --> 00:36:50.860
 Ich find Comic Sans gar nicht so schlecht.

00:36:50.860 --> 00:36:51.380
 Nee, ich auch nicht.

00:36:51.380 --> 00:37:05.480
 Ich, ich muss sagen, es gibt, es gibt so Leute, die führen so, äh, Kreuzzüge gegen bestimmte Typefaces, ganz wichtig, hab ich irgendwie vor kurzem gelernt, ähm, das, das, was wir als Font, äh, bezeichnen oft ist, meistens meint man damit Typeface.

00:37:05.480 --> 00:37:08.780
 Also, Font ist nämlich nur die Datei, Typeface ist nämlich die Schriftart.

00:37:08.780 --> 00:37:19.900
 Ähm, es gibt Leute, die, die Kreuzzüge gegen bestimmte Typefaces fahren, ähm, ganz beliebt ist Comic Sans, Bashing, das hat bestimmt jeder schon mal gehört, dass Comic Sans so böse sein soll.

00:37:20.060 --> 00:37:23.940
 Wobei man natürlich halt schon sagen muss, also für Geschäftskommunikation eignet sich's halt nicht.

00:37:24.000 --> 00:37:41.420
 Das hat ja aber, ja, aber, aber, aber, aber ich find, ich find, sie ist nicht allgemein zu verdammen, ähm, weil sie nämlich zum Beispiel eine Schriftart ist, und das hat, das hat Anwendungsfälle, hatten wir's glaube ich auch schon mal drüber, ähm, die ein normales Schreibschrift A hat, so wie man's schreiben würde, mit der Hand.

00:37:41.960 --> 00:37:46.140
 Das, äh, macht sie geeigneter zum Beispiel für Sachen in Schulen.

00:37:46.420 --> 00:37:51.760
 Genau, okay, alles was mit Kindern zu tun hat, oder wenn ich tatsächlich einen Comic schreibe, warum sollte ich nicht Comic Sans nehmen, ne, also.

00:37:52.100 --> 00:38:04.100
 Genau, deswegen diese Schriftart ist nicht zu verdammen generell, natürlich, wenn jetzt, wenn ich jetzt von einer Bank irgendwie einen Brief, eine E-Mail in Comic Sans krieg oder so, das find ich jetzt schon ein bisschen weird, aber ich glaub, das haben die mittlerweile auch alle verstanden.

00:38:04.100 --> 00:38:21.160
 Ich glaub, dieses Problem, das gibt es gar nicht mehr, das gab es mal, das gibt es aber eigentlich gar nicht mehr, behaupte ich jetzt, aber ich nehm auch natürlich gerne Beispiele entgegen, wenn ihr irgendwas habt, wo ihr irgendwas in der völlig falschen Schriftart irgendwie habt, zum Beispiel ein Wahlplakat von der Linken in der gebrochenen Schrift oder sowas.

00:38:21.160 --> 00:38:29.740
 Ja, das find ich sehr hot. Also irgendwas, wo die völlig falsche Schriftart verwendet wurde für irgendeinen Fall. Bitte, bitte, bitte, da freuen wir uns über Zuschriften.

00:38:29.740 --> 00:38:39.980
 Ich möchte jetzt nicht über Kunden hier herziehen, aber ich schick dir nachher privat mal noch ein Logo, das jemand unbedingt haben möchte und sich nicht umstimmen lässt.

00:38:40.280 --> 00:38:53.960
 Okay, ich bin sehr gespannt. Ich hab da schon lange nichts mehr Schlimmes gesehen. Von daher glaube ich, dass dieser Rant oder dieser Kreuzzug, dass das irgendwie so ein bisschen, so ein Scheinkonflikt ist.

00:38:53.960 --> 00:39:00.980
 Es gibt auch eine Person im Internet, die total die Schriftart Lobster überhaupt nicht leiden kann.

00:39:00.980 --> 00:39:01.720
 Okay, echt.

00:39:01.800 --> 00:39:08.240
 Also nicht nur, es gibt wohl nicht nur eine, es gibt so eine Person, die immer wieder in meinem Feed auftaucht und da hat er ja schon wieder hier Lobster, Lobster.

00:39:08.240 --> 00:39:14.000
 Und ich denk so, ja, natürlich, wenn du, wenn du, wenn du die suchst, die Schriftart, dann wirst du sie auch oft finden.

00:39:14.100 --> 00:39:19.700
 Aber ich find die an sich gar nicht so schlecht. Die ist schon ein bisschen, die ist eigen, ja, aber ich kann verstehen, dass es Menschen gibt, die die gut finden.

00:39:19.700 --> 00:39:27.680
 Es ist halt wirklich die Schreibschrift, so, und es erinnert so an so amerikanische Restaurants oder irgendwie sowas, ne? Also, ja, warum nicht? Mein Gott.

00:39:27.680 --> 00:39:34.280
 Ich find die nicht so schlecht. Also, ja, so, there I said it.

00:39:34.280 --> 00:39:38.980
 Also, wer noch mehr über Webtypographie hören will, der hört sich unsere Folge 14 an.

00:39:38.980 --> 00:39:41.280
 Webtypographie mit Gerrit van Aken.

00:39:42.960 --> 00:39:51.040
 Genau. Das war's dann schon zu diesem Thema. Ich hab gedacht, bei so vielen Links und so vielen Notizen hab ich gedacht, dass das länger dauert.

00:39:51.040 --> 00:39:52.300
 Ich sag doch, das geht ganz schnell.

00:39:52.300 --> 00:39:54.360
 So, jetzt, jetzt geht's noch schneller.

00:39:54.360 --> 00:39:56.980
 Genau, weil jetzt kommt ...

00:39:56.980 --> 00:39:59.400
 Die Property der Woche.

00:39:59.400 --> 00:40:02.760
 Teil 2.

00:40:02.760 --> 00:40:04.880
 Sehr gut.

00:40:04.880 --> 00:40:08.840
 Wer hat das, wo, wer, was, wer hat das gesagt?

00:40:08.840 --> 00:40:10.060
 Vorproduziert natürlich.

00:40:10.060 --> 00:40:11.780
 Selbstverständlich.

00:40:11.820 --> 00:40:13.340
 Wir haben hier Live-Effekte.

00:40:13.340 --> 00:40:18.280
 So, ja, dann müssen wir das eigentlich noch mal machen.

00:40:18.280 --> 00:40:22.560
 Ich hab vorhin noch gesagt, so zum Spaß, ja, das machen wir zweimal, den Jingle, und dann geht er uns auf die Erde.

00:40:22.560 --> 00:40:25.900
 Ich hab eigentlich jetzt, ich hab schon Bock jetzt auf noch ein drittes Mal mindestens.

00:40:25.900 --> 00:40:31.340
 Gut, die nächste Property ist Margin Trim.

00:40:33.280 --> 00:40:36.740
 Und die ist auch relativ schnell abgehandelt.

00:40:36.740 --> 00:40:51.380
 Tut die, sie ist dafür so ein altes Problem, wenn ich Elemente in einer Box habe und zum Beispiel am Ende, also ein klassisches Beispiel wäre eine Liste.

00:40:51.780 --> 00:40:58.560
 Ich hab eine Liste mit lauter List-Items und die kriegen zum Beispiel Margin unten, damit die immer einen gewissen Abstand voneinander haben.

00:40:58.560 --> 00:41:12.360
 Und jetzt ist ja so das klassische Problem, was man mittlerweile mit anderen Mitteln auch lösen kann, aber das klassische Problem ist, dass ich vielleicht trotzdem nicht möchte, dass der letzte Listenpunkt auch den Margin unten hat, weil dann ist das nicht mehr so schön stimmig.

00:41:12.420 --> 00:41:17.380
 Unten möchte man vielleicht irgendwie mit, was anderen bestimmt, wie da der Abstand ist, dann möchte man dieses Margin nicht haben.

00:41:17.380 --> 00:41:20.160
 Es gibt Fälle, wo das okay ist und es gibt Fälle, wo es stört.

00:41:20.160 --> 00:41:27.200
 Und dafür gibt es die Margin Trim Property, beziehungsweise wird es geben vielleicht.

00:41:27.200 --> 00:41:29.920
 Wir sind hier hart an der blutigen Kante unterwegs.

00:41:29.920 --> 00:41:34.020
 Immerhin gibt es dazu schon einen Can-I-Use-Eintrag.

00:41:34.900 --> 00:41:38.540
 Jetzt muss ich, warte mal, ich hab den jetzt, warte mal, da, da, da, da, da, da, da, da, da, da, da, da, da, da.

00:41:38.540 --> 00:41:41.040
 Muss ich nochmal draufdrücken, damit ich ihn auch öffnen kann.

00:41:41.040 --> 00:41:42.980
 Sieht aber noch ziemlich rot aus.

00:41:42.980 --> 00:41:47.880
 Der einzige Browser, der das derzeit unterstützt, ist Safari Technology Preview.

00:41:47.880 --> 00:41:49.140
 Habe ich aber.

00:41:49.140 --> 00:41:50.860
 Und deswegen konnte ich es damit ausprobieren.

00:41:50.860 --> 00:42:00.080
 Deswegen kann es nur, nur Menschen, ich habe auch eine Demo, eine Konto, eine Demo gebaut, nur Menschen, die Safari Technology Preview haben, also nur die mit einem Mac, können es derzeit ausprobieren.

00:42:00.080 --> 00:42:02.820
 Das heißt auch, es ist nicht unbedingt sicher, dass es dann kommt.

00:42:03.260 --> 00:42:08.360
 Aber interessanterweise ist es auf Can-I-Use, ist die Technology Preview noch grau.

00:42:08.360 --> 00:42:10.120
 Die ist noch grau, ja.

00:42:10.120 --> 00:42:11.300
 Super unknown, aber ist drin.

00:42:11.300 --> 00:42:13.620
 Da müsstest du ja fast ein Ticket eröffnen, ne?

00:42:13.620 --> 00:42:16.460
 Ja, ja, es funktioniert.

00:42:16.460 --> 00:42:21.300
 Ich habe aber eine merkwürdige Eigenheit gefunden, wo ich gerne hätte, dass die mir jemand erklärt hat.

00:42:21.300 --> 00:42:22.300
 Das ist vielleicht auch ein Bug.

00:42:22.300 --> 00:42:25.300
 Also, ich habe in meiner Demo, ich versuche sie mal zu beschreiben.

00:42:25.300 --> 00:42:32.560
 In meiner Demo, du kannst sie jetzt leider auch nicht sehen und auch nicht ausprobieren, beziehungsweise du wirst es nicht richtig sehen, ist es so, dass ich, ähm,

00:42:33.160 --> 00:42:45.560
 ich habe immer eine Liste genommen, also ein UL mit drei Listen-Elementen drin, ähm, und die, äh, das UL hat einen roten Rahmen und die Listen-Elemente haben einen gepunkteten gelben Rahmen.

00:42:45.560 --> 00:42:48.300
 Damit man sieht, wo was anfängt und aufhört.

00:42:48.300 --> 00:42:58.580
 Und standardmäßig haben die LI-Elemente darin Margin 1rem, also auf allen Seiten 1rem Margin Abstand.

00:42:59.720 --> 00:43:15.720
 So, und wenn ich jetzt, äh, jetzt kann ich noch sagen, Margin Trim hat verschiedene Werte, ähm, zum Beispiel Margin Trim Block, dann, ähm, wird, werden die Block an den Block Grenzen, wer die, wer, äh, wer Logical, CSS Logical Properties kennt, der weiß, was damit gemeint ist.

00:43:15.740 --> 00:43:25.940
 Da gibt es jetzt kein Top, äh, äh, oder Bottom oder Left oder Right mehr, sondern es gibt Block und Inline, beziehungsweise Block Start, Inline Start, äh, Block End, Inline End.

00:43:26.300 --> 00:43:35.220
 Und in unserem Left to Right Layout, äh, wo nichts irgendwie verschoben oder, oder verändert wurde, ist Block oben und unten und Inline ist links und rechts.

00:43:35.220 --> 00:43:38.740
 Äh, äh, und Block Start ist oben und Block End ist unten.

00:43:38.740 --> 00:43:40.320
 Nur, nur das nochmal zur Erklärung.

00:43:40.320 --> 00:43:46.260
 Das heißt, Margin Trim Block nimmt dann den Margin weg auf oben und unten.

00:43:46.260 --> 00:43:54.660
 Von, also von dem ersten Element innerhalb der Liste wird der Margin oben weg, ab, weggeschnitten und von dem letzten Element unten der Margin.

00:43:54.660 --> 00:44:00.220
 Also, wenn da, wenn da einer vergeben ist, ich ja bei Margin Trim Block angegeben hab, verschwindet dieser Margin.

00:44:00.220 --> 00:44:01.520
 So weit, so gut, das funktioniert.

00:44:01.520 --> 00:44:04.060
 Und Block Start funktioniert, dass es dann nur oben weg ist.

00:44:04.060 --> 00:44:06.040
 Und Block End funktioniert, dass es dann nur unten weg ist.

00:44:06.040 --> 00:44:10.120
 Aber bei Margin Trim Inline, ich weiß nicht, ob ich in meiner Demo einen Fehler hab.

00:44:10.120 --> 00:44:14.480
 Äh, ich glaube nicht, aber bitte gern mal reinschauen, Leute, mit Safari.

00:44:14.480 --> 00:44:15.580
 Kannst du mir einen Screenshot schicken?

00:44:15.580 --> 00:44:17.620
 Ich kann dir einen Screenshot schicken.

00:44:17.620 --> 00:44:19.220
 Warte mal, das kann ich vielleicht sogar auch jetzt machen.

00:44:19.220 --> 00:44:24.640
 Ähm, ich, ich schick dir aber jetzt nur mal den Screenshot von dem, von dem,

00:44:24.660 --> 00:44:25.860
 einen Teil, der merkwürdig ist.

00:44:25.860 --> 00:44:25.980
 Ja.

00:44:25.980 --> 00:44:28.860
 Ähm, und zwar, warte, Moment.

00:44:28.860 --> 00:44:33.580
 Mach ich mal, damit du mitreden kannst.

00:44:33.580 --> 00:44:35.520
 So, hier ist er.

00:44:35.520 --> 00:44:39.060
 Ähm, da passiert was Interessantes.

00:44:39.220 --> 00:44:41.300
 Also, ich hätte jetzt erwartet.

00:44:41.300 --> 00:44:43.100
 Ja, genau.

00:44:43.100 --> 00:44:45.820
 So, ich hätte jetzt erwartet.

00:44:45.820 --> 00:44:48.500
 Warte mal, ich muss es nochmal nach.

00:44:48.500 --> 00:44:50.200
 Also, was, was ich jetzt sehe hier ist.

00:44:50.200 --> 00:44:57.260
 Also, ich hätte jetzt, also, ähm, Margin Trim Inline, ähm, macht ja dann links und rechts.

00:44:58.680 --> 00:44:59.740
 Nee, es stimmt.

00:44:59.740 --> 00:45:00.960
 Es stimmt.

00:45:00.960 --> 00:45:02.040
 Ich bin ja so doof.

00:45:02.040 --> 00:45:03.460
 Es stimmt.

00:45:03.460 --> 00:45:05.100
 Jetzt habe ich es, ich glaube, jetzt habe ich es geblickt.

00:45:05.100 --> 00:45:08.560
 Das nimmt aber nur das, interessanterweise nur das unterste Element.

00:45:08.560 --> 00:45:09.700
 Warum auch immer.

00:45:09.700 --> 00:45:11.220
 Nee, das ist eigentlich nicht richtig, oder?

00:45:11.220 --> 00:45:12.220
 Ist das richtig?

00:45:12.220 --> 00:45:14.400
 Ist das nur das unterste Element?

00:45:14.400 --> 00:45:19.000
 Ja, gut, weil es nicht automatisch erkennt, dass die untereinander angeordnet sind.

00:45:20.140 --> 00:45:24.580
 Weil, wenn die jetzt tatsächlich Inline angeordnet wären, dann wäre es ja richtig.

00:45:24.580 --> 00:45:24.900
 Ah.

00:45:24.900 --> 00:45:30.660
 Also, wenn die jetzt irgendwie quasi floaten würden oder in einem Grid oder so.

00:45:30.660 --> 00:45:32.820
 Vielleicht muss ich noch kurz erklären, was wir sehen.

00:45:32.820 --> 00:45:38.240
 Also, äh, bei dem Element, äh, wo ich der Liste Margin Trim Inline gegeben habe,

00:45:38.240 --> 00:45:43.340
 dass nur das dritte Listen-Element hat links und rechts dann kein Margin mehr, die anderen haben es.

00:45:43.340 --> 00:45:43.940
 Ja.

00:45:43.940 --> 00:45:48.920
 Ähm, bei Inline Start ist nur links nicht und bei Inline End ist es nur rechts nicht,

00:45:48.920 --> 00:45:50.040
 aber immer nur das dritte Element.

00:45:50.040 --> 00:45:52.200
 Und ich habe mich gefragt, wieso eigentlich nur das dritte Element?

00:45:52.200 --> 00:45:54.780
 Ähm, genau.

00:45:54.780 --> 00:45:58.660
 Das, das, das, das, zu 100 Prozent erschließt sich es mir immer noch nicht.

00:45:58.660 --> 00:46:04.920
 Ähm, aber wenn sie, wenn sie, wenn sie nebeneinander wären, wenn sie nebeneinander wären, dann wäre das.

00:46:04.920 --> 00:46:08.980
 Also, ich sage jetzt floaten, aber ich meine natürlich nicht unbedingt nur float, sondern.

00:46:08.980 --> 00:46:12.840
 Dann wäre aber, dann müsste Start-up aber beim ersten Element sein und nicht beim dritten.

00:46:12.840 --> 00:46:13.840
 Oder?

00:46:13.840 --> 00:46:17.160
 Wenn sie nebeneinander wären.

00:46:18.660 --> 00:46:24.060
 Also, dieses Verhalten, da, da bin ich mir noch nicht so ganz schlüssig, warum das so ist.

00:46:24.060 --> 00:46:26.260
 Das kann mir ja mal jemand erklären.

00:46:26.260 --> 00:46:30.180
 Äh, dieser Podcast soll ja auch, äh, mich weiterbilden, nicht nur euch.

00:46:30.180 --> 00:46:31.300
 So.

00:46:31.540 --> 00:46:32.740
 Da gebe ich dir recht, ja.

00:46:32.740 --> 00:46:36.860
 Also, dass es, dass es bei End das Letzte ist, okay, das macht Sinn.

00:46:39.560 --> 00:46:45.220
 Aber tatsächlich, ja, ja, weiß ich nicht, vielleicht ist da die Speck noch nicht so ganz ausgereift.

00:46:45.220 --> 00:46:51.520
 Vielleicht habe ich auch ein Fehler in meinem Code, ich will es nicht ausschließen, ich habe vorhin noch zwei, dreimal drüber geguckt und dachte so, das ergibt irgendwie keinen Sinn für mich.

00:46:51.740 --> 00:46:53.700
 Ich finde nichts, was jetzt falsch aussieht bei dir.

00:46:53.700 --> 00:46:58.780
 Aber, ähm, ich habe jetzt den Code, äh, genau, du siehst jetzt, ach doch, du hast den Code, ja, ich habe ja über die Demo.

00:46:58.780 --> 00:46:59.800
 Ähm, genau.

00:47:00.300 --> 00:47:05.100
 Auf jeden Fall aber eine interessante Property, äh, das, das war es aber im Prinzip auch schon dazu.

00:47:05.100 --> 00:47:07.860
 Also, viel mehr gibt es da nicht so zu sagen, finde ich, finde ich nett.

00:47:07.860 --> 00:47:13.860
 Ähm, man kann das ganze Problem meistens auch, ähm, per Last Child lösen, ähm, heutzutage.

00:47:13.860 --> 00:47:17.720
 Das heißt, es gibt schon eine Lösung dafür, früher war das ein bisschen nerviger, da musste man dann rumtricksen.

00:47:17.720 --> 00:47:20.700
 Ähm, aber mittlerweile kann man das eigentlich mit Last Child lösen.

00:47:20.700 --> 00:47:25.320
 Ähm, ich frage mich jetzt, warum braucht man das jetzt noch zusätzlich?

00:47:25.320 --> 00:47:27.380
 Gibt es jetzt noch irgendeinen Use Case?

00:47:27.380 --> 00:47:39.640
 Wenn du mit Start und End abgefrühstückt hast, dass das auch Left to Right funktioniert, während du mit, äh, First Child und Last Child ja dann immer selber noch wissen musst, in welchem Kontext du dich bewegst.

00:47:39.640 --> 00:47:44.260
 Und Inline könnte ich damit, nee, doch, könnte ich auch machen, links und rechts, aber nur.

00:47:44.260 --> 00:47:52.580
 Könntest du auch, aber du weißt halt eben nicht, ne, also das ist immer Margin Start und Margin End, Block End, Block Start, ja, das ist ja immer, ne, von der, von der Schreibrichtung abhängig.

00:47:52.800 --> 00:47:57.220
 Während halt First und Last wirklich sagt, das, die Reihenfolge im Dom.

00:47:57.220 --> 00:47:57.920
 Ja, ja.

00:47:57.920 --> 00:48:01.900
 Und dementsprechend macht es vielleicht schon Sinn, das zu machen, ja, das zu haben.

00:48:01.900 --> 00:48:06.660
 Also bin gespannt, ob's kommt und wann, äh, jetzt habt ihr's gehört, dass es das vielleicht geben wird.

00:48:06.660 --> 00:48:16.500
 Aber interessant auch wieder, ne, wir sagen ja oft so, Safari hängt da bei vielem hinten dran, aber so Design-Geschichten, da sind sie halt dann doch oft vorne mit dabei, ne?

00:48:16.500 --> 00:48:22.620
 Ja, und, äh, die sind momentan eh auf der Überholspur unterwegs, muss man sagen.

00:48:22.620 --> 00:48:30.620
 Also, die waren lange, lange, lange hinten dran und, äh, man hatte so das Gefühl, äh, die, die holen das nie wieder auf.

00:48:30.620 --> 00:48:41.340
 Aber ich hab den Eindruck, seit Jen Simmons, äh, da mit dabei ist, äh, bei, äh, bei Apple und, äh, dieses Team da leitet, oder zumindest glaube ich, dass sie das, ein Team da auf jeden Fall leitet.

00:48:41.340 --> 00:48:50.220
 Und die stellt auch immer wieder, äh, Umfragen, äh, ins, äh, in Mastodon oder, oder Twitter, wo sie fragt, hey, äh, wie würdet ihr denn diese Property erwarten oder so?

00:48:50.280 --> 00:49:00.620
 Was ist denn bei euch dabei wichtig und, äh, find ich sehr interessant und seitdem hab ich's Gefühl, die shippen ständig neue Features, also die, die ballern da raus ohne Ende und holen da krass auf gerade.

00:49:00.620 --> 00:49:16.220
 Die haben wahrscheinlich gemerkt, ähm, jetzt, jetzt ist, äh, jetzt ist allerhöchste Eisenbahn, sie müssen jetzt, vor allem auch, wenn jetzt irgendwann, ähm, gesetzlich verabschiedet wird, dass, äh, auf iOS und iPadOS-Plattformen, ähm, nicht mehr nur Safari sein darf, sondern andere Browser-Engines auch sein dürfen.

00:49:16.220 --> 00:49:18.320
 Ist das tatsächlich, soll das kommen?

00:49:18.800 --> 00:49:32.520
 Das ist, das steht so ein bisschen, äh, grade im Raum, ähm, und was ich gehört hab, ist auch, dass Google momentan schon dran arbeitet, äh, ein echt, also ein Browser mit ihrer eigenen Engine, ähm, auf, äh, iPhone und iPad zu bringen.

00:49:32.520 --> 00:49:42.720
 Ja, sehr gut. Ähm, naja, es ist nur gerecht, ne, also Microsoft, äh, also Microsoft, äh, musste ja auch hier mit, mit Standardsuchmaschine und sowas, äh, haben die ja auch eher richtig Ärger bekommen, sondern wenn dann, wenn dann alle, also, äh, ja.

00:49:42.720 --> 00:49:45.660
 Und generelle Auswahl ist immer gut, also ...

00:49:45.660 --> 00:49:48.780
 Ich hab's im Stream schon gesagt, ähm, mein, mein, mein Userherr,

00:49:48.800 --> 00:50:04.760
 Das Developerherz findet das super, das Developerherz sagt, äh, äh, weniger, äh, weniger Möglichkeiten, die man testen muss, ist besser, aber, ähm, aber ich sehe da schon den größeren Zusammenhang und sage, ähm, doch, mehr Engines sind besser an der Stelle, die Wahl sollte man haben.

00:50:04.840 --> 00:50:27.600
 Ja, das ist immer gut. Das ist immer gut. Und, äh, ich glaub, wir sind uns auch einig, äh, so eine neue Browser-Engine, äh, so eine neue Browser-Engine, äh, so eine neue Browser-Engine, äh, so eine neue Browser-Engine, äh, aber inklusive, äh, in, in Rust bitte sehr, sehr schnell und natürlich inklusive Kompatibilität und aller Features, die in Blink drin sind.

00:50:27.840 --> 00:50:31.280
 Ah, da hätt ich fast sogar vielleicht noch quasi jetzt eine, eine Retro.

00:50:31.280 --> 00:50:32.200
 Ja.

00:50:32.840 --> 00:50:51.000
 Zu, zu, zu, zu, oder vielleicht als kleinen Einschub, äh, apropos schnell. Und zwar auch wieder bei OpenType.js, äh, und da auch meine nächste, ähm, Property ist gleich OpenType.js inspiriert. Ähm, und zwar gibt's da jetzt Bestrebungen, das Build-System umzustellen, um alles ein bisschen moderner zu machen mit Modulen und so.

00:50:51.000 --> 00:50:59.280
 Und da wird jetzt nicht mehr, oder soll in Zukunft nicht mehr gesetzt werden auf Roll-Up und Babel, sondern auf, ähm, ES-Build.

00:50:59.280 --> 00:51:17.320
 Und das ist in, jetzt weiß ich gar nicht, ist das in Go oder in Rust geschrieben, eins von beidem. Und es ist halt so anscheinend ein bisschen so gerade der Trend hin, äh, diese ganzen Build-Systeme zu entkoppeln von diesem ganzen, wir machen alles mit JavaScript und alles, äh, sind irgendwie tausend MPM-Pakete mit, mit gegenseitigen Abhängigkeiten.

00:51:17.720 --> 00:51:25.320
 Was ja, wenn man ein Webpack oder sowas mal aktualisieren will, jedes Mal eine Pain in the Ass ist, ne? Da hatten wir's hier, glaub ich, auch schon ein paar Mal drüber.

00:51:25.320 --> 00:51:37.520
 Ähm, und da geht's halt jetzt eher so dahin zu sagen, okay, wir haben das, der Build-Prozess ist ein eigenständiges Ding und das heißt, der kann auch in einer anderen Programmiersprache laufen und der, die Geschwindigkeit ist der Hammer.

00:51:38.060 --> 00:51:47.040
 Also, ich war ja schon von Veed begeistert im Vergleich, äh, zu, ähm, jetzt Webpack. Ähm, und auch Roll-Up ist relativ schnell, aber es sind halt trotzdem noch, ne?

00:51:47.040 --> 00:51:53.800
 So, vier bis zehn Sekunden oder so, oder vielleicht noch länger, wenn das ein richtig umfangreiches Projekt ist, dauert's halt trotzdem.

00:51:54.460 --> 00:52:04.580
 Und bei, ähm, ähm, ES-Build, da sind's bei OpenType.js waren's gleich 24 Millisekunden. Und dann ist das Ding gebundelt. Fertig.

00:52:04.580 --> 00:52:07.840
 Ja, äh, ich weiß jetzt nicht, OpenType.js hat jetzt auch nicht so viele Abhängigkeiten.

00:52:07.840 --> 00:52:08.940
 Ich hab da auch noch ein Beispiel.

00:52:08.940 --> 00:52:15.700
 Aber es ist einfach so ultraschnell und es ist einfach, ja, es fühlt sich, fühlt sich gut an.

00:52:15.700 --> 00:52:21.020
 Ich hab da auch noch ein Beispiel, wenn wir, wenn wir uns da, da auch auf die Ausschweifung jetzt mal einlassen.

00:52:21.020 --> 00:52:30.960
 Ähm, und zwar hab ich vor kurzem, äh, hat sich ein, hat sich ein Kollege beschwert, ja, das, das CSS, das baut so langsam und das ist Sass in unserem Fall, also, äh, CSS-Dateien.

00:52:30.960 --> 00:52:37.300
 Ähm, und ich würde sagen, es ist eigentlich gar nicht so extrem viel oder komplex, da passiert gar nicht so extrem viel.

00:52:37.680 --> 00:52:42.400
 Aber bei ihm hat's halt irgendwie, keine Ahnung, 30 Sekunden gedauert, bis der Scheiß durchgebaut war.

00:52:42.400 --> 00:52:47.040
 Und das ist einfach, jedes Mal, wenn du irgendwo was im CSS erinnerst, 30 Sekunden warten müssen.

00:52:47.040 --> 00:52:47.820
 Ja, nee, das geht gar nicht.

00:52:47.820 --> 00:52:54.200
 So, und dann hab ich geguckt, hm, wie, wie, wie ist denn das, wie ist denn da jetzt grad so der Markt? Was, was kann ich denn da jetzt machen?

00:52:54.200 --> 00:53:00.080
 Und, ähm, dann hab ich was Interessantes rausgefunden.

00:53:00.080 --> 00:53:05.160
 Also, es gibt das NPM-Paket, das Node-SUS heißt.

00:53:06.520 --> 00:53:08.180
 Ähm, das ist aber veraltet.

00:53:08.180 --> 00:53:11.140
 Moment, jetzt muss ich grad noch mal, äh, gucken.

00:53:11.140 --> 00:53:12.980
 Ähm, Node-SUS.

00:53:12.980 --> 00:53:18.180
 Äh, das ist aber veraltet und soll nicht mehr verwendet werden.

00:53:18.180 --> 00:53:31.720
 Ähm, das ist ein Rapper um Lips-SUS drumherum und das wird aber nicht mehr weiterentwickelt, weil da, SUS ja hinten dran jetzt eigentlich in Dart geschrieben ist, glaube ich, von diese komische, genau, Dart-SUS, genau.

00:53:31.820 --> 00:53:34.480
 Das ist die, äh, diese komische Google-Sprache.

00:53:34.480 --> 00:53:45.540
 Ähm, also, Node-SUS, was eigentlich JavaScript, wo man eigentlich JavaScript vermutet, ähm, ist eigentlich nur ein Rapper um dieses Lips-SUS.

00:53:45.600 --> 00:53:50.320
 Und Lips-SUS war, glaube ich, Ruby, bin ich da ganz falsch? Ich weiß es nicht.

00:53:50.380 --> 00:53:53.960
 Auf jeden Fall, das geht relativ schnell, aber das soll man nicht mehr verwenden. Das ist relativ flott.

00:53:55.220 --> 00:54:04.660
 Das Paket, das einfach nur SUS heißt, bei NPM, ist ein JavaScript-Rewrite von Dart-SUS, von dem Eigentlichen.

00:54:04.660 --> 00:54:08.020
 Das ist schweinelangsam, das ist unglaublich lahm.

00:54:08.020 --> 00:54:10.160
 Er hat aber alle neuen Features.

00:54:11.000 --> 00:54:20.980
 Wenn man jetzt allerdings das echte Dart-SUS verwenden will, dann muss man irgendwie diese Dart-Laufzeit-Umgebung haben, irgendwie so ein, so ein virtueller Container, irgendwas.

00:54:20.980 --> 00:54:26.100
 Ich hab's, ich hab ganz kurz mal, ähm, versucht zu installieren bei mir.

00:54:27.080 --> 00:54:35.340
 Ähm, in unseren Bildprozess hab ich nicht integriert, aber die Zeit, das war, also, ich hab ja vorhin gesagt, 30 Sekunden, ähm, mit SUS, mit diesem JavaScript-Rewrite.

00:54:35.340 --> 00:54:42.920
 Ähm, Node-SUS hat irgendwie so, war es so fünf bis zehn Sekunden, je nachdem.

00:54:42.920 --> 00:54:50.260
 Und bei Dart-SUS, bei dem echten Dart-SUS, das hab ich dann mal ausprobiert, da waren's auch nur noch Millisekunden.

00:54:50.260 --> 00:54:52.720
 Und ich hab gedacht, wie kann denn das sein?

00:54:52.720 --> 00:54:55.220
 Ja, weil halt alles direkt über das System läuft.

00:54:56.000 --> 00:54:59.200
 Passbar, es wiegt von 30 Sekunden auf unter eine Sekunde.

00:54:59.200 --> 00:55:00.160
 Boah!

00:55:00.160 --> 00:55:01.780
 Krass.

00:55:01.780 --> 00:55:08.740
 Nur ist es halt, ich frag mich, ob's irgendjemand mal schafft, dieses Dart-SUS irgendwie in ein NPM-Package zu packen, oder?

00:55:08.740 --> 00:55:10.540
 Ja, ja, wollte ich grad sagen.

00:55:10.540 --> 00:55:12.220
 Das ist das Schöne bei AS-Bild.

00:55:12.220 --> 00:55:15.880
 AS-Bild installierst du trotzdem ganz normal als NPM-Package.

00:55:15.880 --> 00:55:19.400
 Und hast entsprechend auch, ne, kannst es updaten, wenn's Updates gibt.

00:55:19.400 --> 00:55:25.220
 Aber es ist halt an sich eine Binary, die halt auf den verschiedenen Systemen, Plattformen begreifend trotzdem läuft.

00:55:25.920 --> 00:55:28.420
 Und dadurch ist es halt einfach überall schnell.

00:55:28.420 --> 00:55:33.240
 Und trotzdem hast du den Vorteil von der Versionsverwaltung, aber du hast nicht diese ganzen krassen Abhängigkeiten.

00:55:33.240 --> 00:55:36.980
 Gut, wahrscheinlich hast du Rust-Abhängigkeiten, aber da musst du dich dann halt nicht drum kümmern.

00:55:37.420 --> 00:55:43.540
 Es scheint gute Gründe zu geben, warum's das nicht gibt, aber ich hab halt gedacht, so Binaries, das geht doch normal immer.

00:55:43.540 --> 00:55:49.780
 Kann man da nicht einfach, also das sag ich jetzt so, äh, so hemmsärmelig, ohne genau zu wissen, was dahinter passiert.

00:55:49.780 --> 00:55:55.480
 Aber kann man da nicht irgendwie so ein Binary rauslassen, das ins NPM-Package packen und dann werfen wir das da dagegen und gut ist?

00:55:56.320 --> 00:55:57.640
 Ähm, müsste doch dann auch flott sein.

00:55:57.640 --> 00:56:00.460
 Aber, äh, das erklärt ihr mir bestimmt in den Kommentaren.

00:56:00.460 --> 00:56:02.460
 Wie gesagt, ich möge den auch hier, um was zu lernen.

00:56:02.460 --> 00:56:07.860
 Erzählt mir, warum, äh, warum gibt es kein schnelles, äh, SaaS-Paket bei NPM?

00:56:08.820 --> 00:56:15.400
 Was man noch sagen muss zu, zu ES-Build, ähm, ist leider, dass Hot-Module-Reloading nicht funktioniert.

00:56:15.400 --> 00:56:27.020
 Das ist für viele sicherlich ein Breaking-Dings, ne, also, ähm, bei OpenType geht's jetzt, weil da haben wir nur so ein kleines, so ein paar Dev-Seiten, wo man so die Fonts reinladen kann.

00:56:27.020 --> 00:56:34.460
 Und da muss man eh immer neu laden, das heißt, ähm, ich brauch kein Hot-Module-Reloading, weil wir jetzt kein, kein React oder View oder sowas benutzen.

00:56:34.460 --> 00:56:37.760
 Und ich da nicht wirklich einen State hab, den ich, den ich übernehmen kann.

00:56:38.440 --> 00:56:53.300
 Ähm, und man kann es über Umwege so ein bisschen, man kann, äh, Watch aktivieren über einen Flag und dann kann man, äh, das Ganze, äh, kann man noch ein Event registrieren und darüber kann man dann zumindest die Seite neu laden lassen, sobald das neu ge, äh, gebildet wird.

00:56:53.300 --> 00:56:58.080
 Ähm, und damit hat man so ein Page-Reloading, zumindest ein automatisches.

00:56:58.080 --> 00:57:08.300
 Aber das ist tatsächlich so ein Punkt, für andere Projekte würde ich es nicht einsetzen wollen aus dem Grund, weil ich möchte mich nicht in der App erst irgendwie durch tausend Zustände klicken müssen, jedes Mal, wenn ich was geändert hab, weil das ist ja gerade der Vorteil.

00:57:08.300 --> 00:57:12.680
 Eigentlich von solchen Bildsystemen, dass ich wirklich ein Live-Preview hab und live da dran arbeiten kann, ne.

00:57:12.680 --> 00:57:24.560
 Ähm, so wie du es auch letztens, äh, gesagt hast, ähm, bei, bei diesem, ähm, Mastodon-Client, ähm, wo man diese geile Entwicklungsumgebung hat und halt wirklich direkt Strings ändern kann und zack, alles ist da, sofort.

00:57:25.100 --> 00:57:35.780
 Ähm, und sowas möchte man ja eigentlich haben und es gibt da auch ein Ticket dazu, aber es hieß irgendwie, ja, das ist zu komplex und, äh, Hot-Module-Reloading richtig zu machen ist echt schwer und dann machen wir's lieber gar nicht.

00:57:35.780 --> 00:57:43.460
 Ähm, was ich ja auch irgendwie verstehen kann und es ist halt einfach sehr kompliziert, aber es ist halt ein bisschen schade, ja, dass das, dass das nicht funktioniert.

00:57:44.100 --> 00:57:46.600
 Ähm, aber ansonsten ist das echt ganz cool, ja.

00:57:46.600 --> 00:57:52.020
 Genau, der Mastodon-Client heißt übrigens Elk, falls denn jemand mal sich anschauen will.

00:57:52.020 --> 00:58:02.800
 Der sieht sehr aus wie Twitter. Ähm, und es lohnt sich auch, das GitHub-Projekt dazu mal anzuschauen, ähm, weil man da eben tatsächlich irgendwie so fancy im Browser editieren kann mit so, alles läuft sofort.

00:58:02.800 --> 00:58:06.160
 Ähm, kann ich auf jeden Fall empfehlen, sich mal anzuschauen.

00:58:06.160 --> 00:58:10.160
 Jo, ähm, dein zweites Thema.

00:58:10.160 --> 00:58:11.980
 Dann so, ähm, mit dem, mit dem Einwurf, äh, Ende.

00:58:11.980 --> 00:58:14.700
 Achso, stimmt, wir brauchen jetzt ja mal eine Schiene, ne?

00:58:14.700 --> 00:58:15.800
 Ja, eigentlich bei was ganz anderem.

00:58:15.800 --> 00:58:21.060
 Genau, Einwurf, Ende. Genau, okay, also, dann komm ich nochmal zu einem, äh, Property.

00:58:21.060 --> 00:58:23.020
 Warte, warte, warte, warte, Moment.

00:58:23.020 --> 00:58:25.600
 Achso, äh, ja, ja, ja, ja, ja, ja, ja, nee, klar, ich kann das nicht einfach.

00:58:25.600 --> 00:58:26.680
 Ich kann das nicht einfach, ja.

00:58:26.680 --> 00:58:30.020
 Die Property der Woche.

00:58:32.100 --> 00:58:32.820
 Teil 3.

00:58:32.820 --> 00:58:47.300
 Und, äh, ja, das ist ein, ein Bestandteil von, also, es ist wirklich eine Property von einer globalen, ähm, und zwar die Intel, äh, globale, dieses Intel-Objekt.

00:58:47.300 --> 00:58:59.900
 Da haben wir es auch schon mal, also nicht Intel, also nicht Intel, nein, nein, Intel, wie Internationalization, Intel, da haben wir es in Folge 4 und in Folge 19 auch mal drüber, wer das nachhören möchte.

00:59:01.400 --> 00:59:24.900
 Und, ähm, was, was, wo ich jetzt, äh, draufgeschossen bin bei Intel, ist der Intel-Segmenter, also Segmentierung, Zerteilung, ähm, und bei OpenType.js war das eben auch, hab ich ja gesagt, ähm, und da war ein Ticket irgendwie, ja, ähm, dass man Probleme hat, den Text in, in, in, in Glyphs, äh, zu parsen.

00:59:24.900 --> 00:59:34.060
 Also, die, ähm, die einzelnen, äh, die einzelnen Glyphen, ähm, sich aus dem Text zu suchen, wenn da drin diese kombinierten Multi-Character-Emojis enthalten sind.

00:59:34.460 --> 00:59:45.220
 Also, es gibt ja Emojis, die werden da mit so einem Zero-Width-Nonspacing-Joyner-Things, Z-W-N-J, Zero-Width-Non-Joyner, genau, so.

00:59:45.220 --> 00:59:54.700
 Zero-Width-Non-Joyner, also ein, ein, ein Leerzeichen ohne, ohne Breite quasi, ähm, werden die erstellt.

00:59:54.700 --> 01:00:07.120
 Und da kann ich dann halt so Sachen wie, ja, dieses, dieses Gesicht, aber mit Hautfarbe, äh, schwarz oder mittel, ähm, und in weiblich, so, ne, oder männlich, das kann man ja kombinieren.

01:00:07.120 --> 01:00:15.080
 Und das aufzuteilen, also generell Emojis und einfach ein String in Emojis aufteilen, äh, das ist gar nicht so einfach.

01:00:15.080 --> 01:00:21.700
 Und ich hab da auch eine, eine Demo dazu gebaut, wo ich da verschiedene Möglichkeiten vorstelle und natürlich auch den Segmente an sich vorstelle.

01:00:21.700 --> 01:00:25.320
 Und als erstes könnte man vielleicht denken, naja, String-Split.

01:00:25.320 --> 01:00:38.740
 Aber das Problem ist, da krieg ich dann, äh, lauter, ähm, UTF-8-enkodierte Zeichen zurück, ne, weil so ein, also die, ähm, die Emojis sind ja auch schon Multibyte-Strings.

01:00:38.740 --> 01:00:46.860
 Und dementsprechend, ähm, jetzt krieg ich hier in der Konsole, krieg ich jetzt lauter so Fragezeichen-Kästchen, beziehungsweise beim Herz kriegt man tatsächlich ein Herz zurück.

01:00:46.860 --> 01:00:53.040
 Und das Weiblich-Zeichen ist wirklich so ein ASCII-Weiblich-Zeichen, ähm, aber es sind halt, ähm, eigentlich Multibyte-Strings, okay.

01:00:53.040 --> 01:00:54.880
 Das heißt, mit String-Split komm ich nicht weit.

01:00:54.880 --> 01:00:57.080
 Diese ganzen Familien-Dinger sind da krass.

01:00:57.080 --> 01:00:58.980
 Genau, genau. Da gibt's richtig viele.

01:00:58.980 --> 01:01:08.780
 Also, ne, Frau mit der und der Farbe und Frau mit der und der Farbe und Kind, äh, in männlich, äh, in weiblich und ein Kind in männlich, ne, das kann man so kombinieren.

01:01:08.780 --> 01:01:09.960
 Gibt alle Kombinationen, ja.

01:01:09.960 --> 01:01:17.560
 Genau. Und, ähm, was kann ich noch machen? Ich kann den Spread-Operator nutzen und, äh, also Ziel ist, ein Array zu haben am Schluss.

01:01:17.560 --> 01:01:25.900
 Ich hab hier ein String, da sind vier, äh, Emojis drin. Das vorletzte, der Regenbogen, das ist nur ein normales, das hab ich nur einfach, ähm, um das auch zu zeigen.

01:01:25.900 --> 01:01:29.300
 Ähm, genau. Und die anderen sind alle so ein bisschen komplexer.

01:01:30.160 --> 01:01:37.500
 Und, äh, mit diesem, ähm, also ich mach ein empty Array und da drinnen, äh, Spread-Operator und den String.

01:01:37.500 --> 01:01:41.580
 Und dann hab ich schon mal so ein bisschen was. Also, dann krieg ich tatsächlich die einzelnen Bestandteile.

01:01:41.580 --> 01:01:49.100
 Also, ich seh, äh, ne Frau, ich seh ein Kästchen, ich seh den Zero-Width-Non-Joyner, dann kommt die nächste Frau, Kästchen und so weiter.

01:01:49.100 --> 01:01:55.680
 Dann Kind-Weiblich, Kind-Männlich. Äh, dann hab ich hier das, das, das Herz noch irgendwie.

01:01:55.680 --> 01:02:00.460
 Ähm, dann hab ich hier noch einen, ach, noch einen Mann, seh ich jetzt gerade. Und dann kommt der Regenbogen.

01:02:00.460 --> 01:02:03.220
 Also, keine Ahnung, warum dieser Mann da überhaupt, äh, an der Stelle ist.

01:02:03.220 --> 01:02:09.040
 Weil der dürfte ja eigentlich, äh, naja. Also, irgendwie ist das sehr, sehr komplex, aber es bringt mich auch nicht weiter.

01:02:09.040 --> 01:02:13.680
 Und dann gibt's jetzt eben, relativ neuerdings, ähm, den Segmenter.

01:02:13.680 --> 01:02:22.740
 Und, äh, ne, da ist die, das ist jetzt alles, unsere JavaScript entwickelt sich ja immer so, äh, hin Richtung, ähm, Asynchron-Geschichten.

01:02:22.740 --> 01:02:28.640
 Und, äh, ja, ich krieg dann irgendwie irgendwelche Objekte zurück, die ich dann erst noch parsen muss.

01:02:28.640 --> 01:02:31.000
 Also, es ist dann, ich weiß gar nicht, ob's ein Iterator ist.

01:02:31.000 --> 01:02:35.740
 Nee, ich glaub, es ist wieder ein eigenes, ein eigener, äh, Objekttyp, ähm, was ich da zurückbekomme.

01:02:35.740 --> 01:02:39.660
 Das heißt, ich hab nicht durch den Segmenter dann schon automatisch einfach ein Array, wo die drin sind.

01:02:40.080 --> 01:02:46.900
 Sondern ich muss, äh, muss das dann wieder über Array from und dann mit Reduce kann ich mir das dann zusammenpassen.

01:02:46.900 --> 01:02:50.100
 Das ist alles ein bisschen, ja, es wird alles ein bisschen komplexer dafür.

01:02:50.100 --> 01:02:54.400
 Halt auch, ähm, äh, ja, ein bisschen, äh, ja.

01:02:54.400 --> 01:02:56.440
 Flexibler wahrscheinlich, aber trotzdem.

01:02:56.440 --> 01:03:01.220
 Also, ich kann, ich hab, das, was ich dann sehe, ist dann, ich hab Objekte, also ein Array aus Objekten.

01:03:01.300 --> 01:03:09.180
 Und da drin hab ich dann Segment, Index, also den Index im String, ähm, und nochmal den Input, äh, als, äh, als String.

01:03:09.180 --> 01:03:19.800
 Was ich interessant finde, ist, äh, ein ganz kleiner Einwurf nur, ähm, dass die CodePen-Demo die Konsole in CodePen auf Fullscreen geöffnet hat, also volle Höhe.

01:03:19.800 --> 01:03:24.100
 Das hab ich so, nee, wusste ich gar nicht, dass man das so eins, dass man das irgendwie mit reinpacken kann, dass das geht.

01:03:24.100 --> 01:03:27.180
 Ja, wenn man hinten eine Zwei hat, dann ist die Konsole Fullscreen, dann ist der Vorschaubereich weg.

01:03:27.180 --> 01:03:29.880
 Ja, genau, das fand ich echt, äh, ja, cool.

01:03:30.560 --> 01:03:34.020
 Genau, und wenn ich das mit Reduce mach, dann hab ich tatsächlich am Schluss mein, mein Array.

01:03:34.020 --> 01:03:48.160
 Jetzt ist natürlich, ähm, das ist unwahrscheinlich, dass sowas eingebaut wird, nur um jetzt Emojis irgendwie richtig splitten zu können, äh, sondern das ganze Ding hatte, das, und da deutet ja Intel auch schon, äh, drauf, also nicht Intel, sondern Intel, äh, deutet da schon auch drauf hin.

01:03:48.160 --> 01:03:52.680
 Ähm, es geht eigentlich um Sprachen und, und, äh, Locale-Unterstützung.

01:03:52.820 --> 01:04:03.280
 Deswegen hab ich auch noch der Vollständigkeit halber dann unten noch ein Beispiel mit, äh, chinesischen Schriftzeichen, ähm, um auch zu, zu demonstrieren, was es da noch für, für Optionen gibt, die ich da übergeben kann.

01:04:03.360 --> 01:04:11.360
 Also ich kann so ein, ich erstelle mir so ein Segmenter, äh, so eine Instanz, also New Intel Segmenter, und dann übergebe ich die, das Locale, das ich benutzen will.

01:04:11.620 --> 01:04:22.940
 Das kann ich übrigens mit einer anderen Property, aber das könnt ihr auch dann selber nachlesen im MDL-Artikel, kann ich mir ausgeben lassen, welche Locales unterstützt werden, beziehungsweise übergeben Array an Locales und kann dann gucken, ah, wird das unterstützt.

01:04:22.940 --> 01:04:38.120
 Und dann kann ich als nächstes noch ein Objekt übergeben und da kann ich dann zum Beispiel Granularity und dann kann ich da Word oder Sentence und ich glaub Grapheme gibt's noch für, also Grapheme wäre Buchstabe oder, oder Zeichen, ähm, und dann eben Word oder Sentence kann ich das aufteilen lassen.

01:04:38.120 --> 01:04:49.880
 Jetzt hab ich da auf Chinesisch was getippt und lass das einmal nach Word und einmal nach Sentence aufteilen und dann hab ich halt, äh, solche Zweiergruppierungen an Schriftzeichen, was, was einem Wort entspricht.

01:04:49.880 --> 01:05:05.320
 Es ist nicht ganz, ähm, also, dass man merkt, da steht jetzt nicht irgendwie ein Wörterbuch dahinter und das weiß dann wirklich, was ist ein Wort im Chinesischen, weil es ja tatsächlich, da, ne, gehören ja manche Zeichen zusammen, sondern es gruppiert nach einer bestimmten Logik.

01:05:05.320 --> 01:05:28.160
 Ähm, nach welcher hab ich jetzt noch nicht ganz rausgefunden, also zum Beispiel, äh, bei Nihao Ma, äh, ne, das Ma ist so ein Fragepartikel, da gruppiert's dann Nihao, also die ersten beiden, im nächsten Satz gruppiert's, äh, aber dann War und Henhao, das sind, ja, also War heißt ich und Henhao heißt sehr gut, ja, also, ne, das macht eigentlich auch keinen Sinn, dann das zu, zu gruppieren.

01:05:28.160 --> 01:05:34.300
 Aber da steht, da steht irgendwas dahinter, aber es ist, es sind nicht wirklich die, die Worte im eigentlichen Sinne.

01:05:34.300 --> 01:05:36.180
 Ähm, genau.

01:05:36.180 --> 01:05:38.620
 Aber es wird irgendwie, du könntest mir jetzt alles erzählen.

01:05:38.620 --> 01:05:43.520
 Ja, in dem Fall, äh, könntest du sogar verifizieren, dass es stimmt.

01:05:43.520 --> 01:05:50.100
 Genau, und unten dann als Satz, ne, ich kann einfach jetzt ein String, ähm, da durchjagen und bekomme automatisch das nach Sätzen.

01:05:50.160 --> 01:06:00.580
 Ich muss jetzt nicht mehr eine RegEx irgendwie machen, wo dann drin ist, ah, welche Satzzeichen, Fragezeichen, ähm, dann vergesse ich vielleicht, dass, dass ich, äh, einen Doppelpunkt auch, dass ich dann doch mittrenne oder nicht.

01:06:00.580 --> 01:06:15.840
 Oder eben, also gerade chinesisch oder japanisch ist da auch ein, ähm, äh, ein gutes Beispiel, weil die haben eigene Zeichen für, für, äh, Satzzeichen, ne, man sieht das, dass die, also das ist nicht nur im, äh, nicht nur die Font, sondern das ist wirklich ein eigenes Zeichen.

01:06:15.840 --> 01:06:22.200
 Und du siehst, dass da hinter dem Fragezeichen ein bisschen mehr Space ist hinter dem Ausrufezeichen und dass die auch so ein bisschen, die sehen fast wie Monospace so ein bisschen aus.

01:06:22.200 --> 01:06:31.200
 Aber die, das ist nicht, nicht, dass, äh, dass die Schriftart das nicht anders kann, ähm, sondern die Schriftart kann auch ein ganz normales Ausrufezeichen, sondern das sind wirklich andere Satzzeichen.

01:06:31.200 --> 01:06:35.440
 Und auch, ähm, Anführungszeichen, sowas sind da in den Sprachen ein bisschen, ein bisschen anders.

01:06:35.440 --> 01:06:36.900
 Und das erkennt es also auch.

01:06:36.900 --> 01:06:51.660
 Das heißt, das würde jemand, ne, dieses typische, ich gucke auf Stack Overflow, wie trenne ich, äh, einen Text nach Sätzen, sondern kriege ich eine Regex und, äh, ich würde fast meine Hand dafür ins Feuer legen, dass da dann halt unsere lateinischen Symbole für Satzzeichen drin sind, ne.

01:06:51.660 --> 01:06:56.240
 Also das, was man halt in Nordamerika und Europa vielleicht, ähm, was man da so gebraucht.

01:06:56.500 --> 01:07:01.420
 Und die meisten würden halt wahrscheinlich nicht berücksichtigen, dass es in anderen Sprachen vielleicht andere Zeichen gibt, weil man es einfach gar nicht weiß.

01:07:01.420 --> 01:07:03.240
 Hätte ich jetzt auch nicht gewusst, soll kein Vorwurf sein, ne.

01:07:03.240 --> 01:07:12.100
 Aber dadurch, dass das halt jetzt einfach damit eingebaut ist, die Browserhersteller, die das implementieren, die machen sich da halt natürlich mehr Gedanken und, und berücksichtigen sowas.

01:07:12.100 --> 01:07:18.420
 Gerade wenn es um eine Schnittstelle geht, die für Sprachunterstützung ist, ähm, das heißt, da funktioniert das dann einfach out of the box.

01:07:19.600 --> 01:07:36.020
 Würde mich aber echt mal interessieren, wie viele, ähm, potenzielle Webseitenbetreiber es so gibt, die Portale betreiben oder die Seiten betreiben, die in mehreren Sprachen so übergreifend, äh, angeboten werden.

01:07:36.020 --> 01:07:48.540
 Also, ähm, gibt's, gibt's mit Sicherheit einige, aber habe ich jetzt gar nicht so richtig auf dem Schirm, also keine Ahnung, sowas wie Facebook und Twitter wahrscheinlich, die haben wahrscheinlich auch irgendwie chinesische Varianten und kyrillisch und keine Ahnung was, da wird es dann interessant.

01:07:48.540 --> 01:07:58.080
 Aber so, wenn man jetzt so 0815 Webseiten baut, dann kommt man halt mit hier jetzt mit Deutsch und Englisch eigentlich schon ganz gut hin und dann reicht die RegEx auch, die du gerade angesprochen hast, ne.

01:07:58.080 --> 01:08:05.640
 Also, in der Regel schon, ja, ja, tatsächlich. Also, gerade wenn es jetzt irgendwie um die Unterscheidung geht, asiatisch oder, äh, oder nicht, ne, ja, das schon.

01:08:05.640 --> 01:08:24.140
 Ähm, tatsächlich, wenn wir Plugins machen, äh, WordPress, dann bieten wir die schon auch auf Englisch und Deutsch an und da habe ich auch schon mal bei unserem Corona-Testergebnis-Ding, ähm, habe ich tatsächlich auch die International, Internationalization, äh, Geschichte eingesetzt an der Stelle.

01:08:24.420 --> 01:08:25.960
 Sagst du jetzt nochmal Spezifität?

01:08:25.960 --> 01:08:27.380
 Spezifität.

01:08:27.380 --> 01:08:29.320
 Und jetzt auf Englisch?

01:08:29.320 --> 01:08:30.340
 Specificity.

01:08:30.340 --> 01:08:32.380
 Ah, sehr gut. Ja, auf Englisch geht besser.

01:08:32.380 --> 01:08:47.960
 Genau, und jedenfalls genau Datumsformat war das, glaube ich, ne, was, so Datumsformatierung und sowas, das habe ich dann mit Intel gemacht und, äh, ja, auch dieses List-Feature finde ich eigentlich ganz cool, dass man, dass das automatisch dann Kommata und, und in der entsprechenden Sprache einfügt und so.

01:08:48.440 --> 01:08:55.380
 Also, das ist schon, schon ganz cool, die, klar, die Frage, wer braucht's, wie viele Leute brauchen's, aber danach muss man ja nicht unbedingt gehen.

01:08:55.380 --> 01:09:09.200
 Ne, äh, gerade, gerade bei Browser-Features oder Features, die in Browsern eingebaut werden, äh, da ist mehr immer besser und, äh, im Zweifelsfall, äh, ne, und im Zweifelsfall, äh, ne, es ist ja wichtig, dass es da ist.

01:09:09.320 --> 01:09:15.380
 Ich meine, wenn ich's dann mal brauche, dann ist ja gut, also, dann möchte ich's nicht erst irgendwie selbst implementieren müssen, das ist ja immer gut.

01:09:15.380 --> 01:09:18.020
 Gut.

01:09:18.020 --> 01:09:20.540
 Das war's von mir.

01:09:20.540 --> 01:09:22.920
 Das war's von dir, dann kommt jetzt.

01:09:22.920 --> 01:09:23.900
 Und dementsprechend kommt jetzt die letzte.

01:09:23.900 --> 01:09:27.340
 Die Property der Woche.

01:09:27.340 --> 01:09:30.580
 Teil 4.

01:09:30.580 --> 01:09:32.240
 Die letzte, die.

01:09:32.240 --> 01:09:35.840
 Er weiß, jetzt kommt das Letzte.

01:09:36.860 --> 01:09:48.260
 So, ähm, die letzte, äh, Property der Woche sind eigentlich zwei, hab ich dann gemerkt, weil die eine geht nicht ohne die andere, aber ich will mich eigentlich hauptsächlich mit der einen beschäftigen.

01:09:48.260 --> 01:09:55.100
 Und die ist auch, der Artikel, auf den ich mich jetzt berufe, der ist von Medium und der ist tatsächlich vom 18. August 2020.

01:09:55.100 --> 01:09:59.760
 Man könnte das also eigentlich schon eine Weile kennen oder wissen, aber es ist komplett an mir vorbeigegangen.

01:09:59.760 --> 01:10:05.320
 Es liegt vielleicht aber auch daran, dass es echt noch nirgends, meines Wissens nach, noch nirgends implementiert ist.

01:10:06.200 --> 01:10:11.220
 Trotzdem würde es viele Probleme lösen, die man so in der Vergangenheit hatte.

01:10:11.220 --> 01:10:15.520
 So, jetzt hab ich viel um den heißen Breitraum rumgeredet, jetzt gibt's einen Löffel Brei.

01:10:15.520 --> 01:10:21.520
 Und zwar geht es um Leading Trim, das ist die Hauptproperie, um die es jetzt geht, äh, und Text Edge.

01:10:21.520 --> 01:10:26.300
 Ich konnte jetzt auch keine Demo bauen, weil wie gesagt, ich weiß nicht, ob es überhaupt einen Browser gibt, der das schon eingebaut hat.

01:10:26.300 --> 01:10:29.800
 Ähm, worum geht es?

01:10:29.800 --> 01:10:43.400
 Es geht generell um das Problem, dass, äh, Text oft, also gerade so der klassische Standardfall für sowas ist Text, ähm, hat so seine eigene Leinheit mit eingebaut, so seine eigene Boxhöhe.

01:10:43.520 --> 01:11:01.220
 Wer schon mal einen Button gestylt hat mit CSS und den Text mittig darin ausrichten wollte, sodass er auch mittig aussieht, der hat wahrscheinlich irgendwelche komischen Paddings oben und unten vergeben.

01:11:01.340 --> 01:11:05.220
 Nicht dieselbe Zahl, damit der Text mittig aussah. Das Problem, das kennt man vielleicht.

01:11:05.220 --> 01:11:13.780
 Ähm, und vielleicht noch so ein bisschen, äh, zur, äh, zur Theorie, dass man so ein bisschen versteht, wo es herkommt und wo es hingeht.

01:11:13.780 --> 01:11:30.580
 Ähm, äh, die Leinheit, das kennt man den Begriff, ist bei uns normalerweise, äh, oder, nee, ist historischerweise die Box des Buchstabens, ähm, die kann auch größer sein als der Buchstabe selbst,

01:11:30.580 --> 01:11:37.280
 als zum Großbuchstabe selbst, plus Leading, äh, in Klammern Durchschuss, das kennen vielleicht die Typografen.

01:11:37.280 --> 01:11:46.080
 Der Durchschuss ist, äh, dann so der, der Bereich zwischen den Zeilen, wo gar nichts von, von, äh, Buchstaben, ähm, auftaucht.

01:11:46.080 --> 01:11:54.580
 Genau, das, das ist tatsächlich, äh, früher im Bleisatz, äh, extra hinzugefügt worden in einer bestimmten Höhe.

01:11:54.580 --> 01:11:59.820
 Ähm, genau, so, und jetzt ist die Buchstabenbox tatsächlich aber noch oft geholfen.

01:11:59.820 --> 01:12:06.260
 Die Buchstaben sind aber noch oft größer als der, als der Großbuchstabe, der standardmäßige, zum Beispiel wegen den Punkten über dem Ü.

01:12:06.620 --> 01:12:10.200
 Aber manchmal ist es auch noch höher und ich weiß auch gar nicht immer, warum das so hoch ist.

01:12:10.200 --> 01:12:19.540
 Also, so, so, so, Schriftarten im Web, die haben oft so ihre eigene, so ihre eigene Höhe, ähm, und das ist, das ist von Schriftart zu Schriftart auch unterschiedlich.

01:12:19.620 --> 01:12:25.940
 Das heißt, wenn du irgendwie das schön designt hast in einer Schriftart und tauschst sie dann aus, dann kann es komplett in die Binsen gehen, alles, was du da gemacht hast.

01:12:27.220 --> 01:12:34.380
 Ähm, und in CSS gibt es noch eine Eigenheit, die ich jetzt noch dann gelernt habe, weil ich habe gedacht, ich will es jetzt dann doch irgendwie verstehen, was da passiert und warum man es braucht.

01:12:34.380 --> 01:12:41.880
 Ähm, ich habe vorhin von Leading gesprochen, also von dem Durchschuss, aber in CSS hat man sich irgendwann mal darauf geeinigt, dass es ein sogenanntes Half-Leading gibt.

01:12:42.320 --> 01:12:53.960
 Dass das nämlich aufgeteilt wird, der Standard-Durchschuss, der normalerweise unter der Zeile ist, ja, in einen, in einen Bereich oben drüber und einen Bereich unten drunter wird das aufgeteilt.

01:12:53.960 --> 01:12:58.920
 Ähm, das macht die Textboxen dann irgendwie noch ein bisschen ungleichmäßiger.

01:12:59.580 --> 01:13:15.620
 So, man hat das gemacht, nee, das sollte sie gleichmäßiger machen, aber, ähm, naja, die haben, dadurch, dass die Textboxen selbst irgendwie so und die Positionierung des einzelnen Glyphen darin, äh, immer von Schriftart zu Schriftart ein bisschen unterschiedlich sind, äh, ist es ein komplettes Chaos.

01:13:15.620 --> 01:13:29.420
 Ähm, so, und, Moment, jetzt muss ich gerade mal in meine Notiz nochmal kurz gucken, ähm, genau, Leinheit heutzutage ist also, wenn man es jetzt versucht, sich in dem Bild vorzustellen und ist in dem Artikel, den wir auch verlinken,

01:13:29.420 --> 01:13:35.560
 ähm, also, da, äh, empfehle ich euch, dass ihr den euch nochmal selbst durchlest, das ist jetzt quasi nur so die Management-Zusammenfassung von mir.

01:13:35.560 --> 01:13:57.960
 Da sind sehr, sehr, sehr, sehr gute Bilder drin, die das verdeutlichen, ähm, was da jetzt genau gemeint ist. Ich versuche es trotzdem jetzt, äh, auditiv mal, ähm, zu erklären, also, Leinheit heutzutage ist halt ein Half-Leading oben, ne, also, wenn man von oben nach unten geht, ähm, plus Font-Family-Abstand oben, ähm, das ist quasi die Leinheit, die die Font-Family selbst mitbringt,

01:13:59.260 --> 01:14:16.820
 Exthöhe selbst, plus Unterlänge, plus Half-Leading unten, also, es ist kompliziert, ähm, und wenn man da jetzt sowas, äh, innerhalb, wenn man sowas jetzt vertikal irgendwie zentrieren möchte, beispielsweise in einem Button, ähm, dann, dann kann man sich vorstellen, dass da ein komplettes Chaos entsteht.

01:14:17.020 --> 01:14:26.080
 Jetzt gibt es die neue Leading-Trim-Eigenschaft, die was macht, nämlich oben und unten abschneiden, so lang, so lang, bis man wirklich zum eigentlichen Text kommt.

01:14:27.100 --> 01:14:39.640
 Und zwar, je nachdem, und da kommt jetzt die andere, ähm, die andere Eigenschaft noch mit ins Spiel, Text Edge, da wird nämlich, die bestimmt, an welcher Stelle abgeschnitten werden soll.

01:14:39.640 --> 01:14:49.960
 Ähm, also in dem Beispiel hier zum Beispiel steht da, ähm, Cap-Alphabetic, bei Text Edge als Eigenschaft und bei Cap bedeutet Großbuchstabe.

01:14:50.040 --> 01:14:58.220
 Das bedeutet in dem Fall zum Beispiel, dass die Unterlänge, also der, der untere Teil von einem kleinen G abgeschnitten wird, dass der nicht zu der Höhe hinzugezählt wird.

01:14:58.300 --> 01:15:01.800
 Genau, also nicht abgeschnitten, visuell abgeschnitten, sondern nur, was den Abstand angeht.

01:15:01.800 --> 01:15:07.120
 Genau, genau, nur was den Abstand angeht, von wo die Linie, von der aus der Abstand berechnet wird, dazu.

01:15:07.120 --> 01:15:14.420
 Ähm, visuell bleibt das alles immer trotzdem sichtbar, also wenn du da jetzt irgendwie Overflow-Hitten oder sowas drauf hast, bleibt es trotzdem, bleibt es trotzdem sichtbar.

01:15:14.420 --> 01:15:16.280
 Ähm, zumindest so die Idee.

01:15:16.280 --> 01:15:25.160
 Ähm, genau, und es gibt dann auch noch, man kann auch zum Beispiel an der X-Height abschneiden lassen, das erspare ich euch jetzt allerdings, da könnt ihr euch gerne mal die Spec durchlesen.

01:15:25.160 --> 01:15:31.020
 Es gibt tatsächlich, ähm, Specs, das ist das CSS-Inline-Layout-Module-Level-3, da sind diese beiden Eigenschaften drin.

01:15:31.020 --> 01:15:39.720
 Ähm, genau, das heißt, ich lege erstmal fest, wo wird, äh, abgeschnitten und dann sage ich, dass abgeschnitten wird.

01:15:39.720 --> 01:15:48.200
 Ähm, in dem Fall Leading-Trim-Text-Box, äh, Leading-Trim-Both, man kann auch tatsächlich oben oder unten abschneiden.

01:15:48.200 --> 01:15:50.040
 Ähm, genau.

01:15:50.600 --> 01:16:02.740
 Und dann, äh, wird die Box quasi, an der man sich ausrichtet, vom Text, äh, beschnitten und kleiner gemacht und man kann dann tatsächlich, wenn ich dann oben und unten fünf Pixel Abstand mache, dann sollte das auch vertikal zentriert aussehen.

01:16:04.400 --> 01:16:12.840
 So, genau, das hab ich, das hab ich, das hab ich, äh, das hab ich auch, genau, die Specs hab ich auch, eigentlich bin ich schon durch damit, hast du noch Fragen?

01:16:12.880 --> 01:16:27.500
 Ähm, dieses, äh, dieses eine Beispiel, wo man richtig schön sieht, dass da mehrere Absätze, äh, Überschrift, eine Unterüberschrift und ein Textblock, ähm, und wo man dann genau sieht, so, da sollen dann 32 Pixel, 12 Pixel, 32, 32 sein, und dass das dann eben mit dem Font-Spacing dann nicht mehr passt.

01:16:27.960 --> 01:16:33.980
 Das erinnert mich an eine Zeit, äh, wo ich sehr viele HTML-E-Mails gebaut habe.

01:16:33.980 --> 01:16:34.300
 Oh ja.

01:16:34.440 --> 01:17:02.640
 Und wo ich dann von GrafikerInnen genau eben Screenshots bekommen habe, wo genau eingezeichnet war, ähm, ne, Textabstände da und da, und die haben halt eben dann ganz oft, die haben so Kästchen dann gezogen und da stand dann auch wirklich Pixelwerte drin und das war halt, das sollte alles nach CI-Vorgaben, ne, die haben da wirklich Wert drauf gelegt, ne, da war halt nicht so, naja, muss jetzt nicht pixelgenau sein, sondern das war schon da, also da wurde dann auch dann, wenn dann Abstand zu groß war dann und das wurde zur Abgabe gegeben, äh, zur Abnahme gegeben, dann hieß das dann ja, aber die Textabstände passen noch nicht und so.

01:17:02.640 --> 01:17:32.480
 Und dann musste man wirklich gucken, ähm, also da wurde schon drauf geachtet, dass entsprechend nur Schriftarten verwendet werden, die halt safe sind, ähm, und dann musste man das eben mit einrechnen, dann musste man gucken, okay, dann darf ich aber halt eben nicht zwölf Pixel nehmen, sondern dann muss ich halt ein bisschen was abziehen, damit es dann mit dem Font-Abstand passt und so, ähm, und schwierig wurde es dann, als es dann darum ging, das irgendwie, äh, in ein Design-System zu überführen, äh, wo dann wirklich Module sein sollen und dann war halt irgendwie, du konntest halt nicht sagen, okay, der vorgegebene Abstand ist 32 und da 12

01:17:32.480 --> 01:17:54.660
 und so, sondern du musstest dann halt die Abstände ändern, was dann halt irgendwie wieder blöd war und gerade bei Stellen, wo dann halt vielleicht, äh, ja, die Überlängen dann besonders hervorgestochen sind oder so, also, ja, das ist schon, ne, wenn man richtig schön Grafik, also wenn man einen hohen Anspruch hat und das richtig gut aussehen soll, dann kann das schon den entscheidenden Unterschied machen, weil sonst würde man sich vielleicht denken, naja, braucht man das jetzt wirklich?

01:17:55.040 --> 01:17:58.340
 Aber es ist schon so, ja, wenn ich's richtig haben will und schön haben will.

01:17:58.340 --> 01:18:13.020
 Das wurde in diesem Medium-Artikel auch, äh, da gibt's einen extra, ähm, Absatz dazu, was jetzt da, wo die Motivation herkommt und das geht da halt vor allem, und das wird da sehr, sehr oft erwähnt, um Designer-Developer-Handoff.

01:18:13.160 --> 01:18:24.360
 Also genau das, was du gerade gesagt hast, der Designer denkt sich was aus und möchte das, äh, äh, dem Developer geben und, äh, dann, da, da gibt's dann Missverständnisse, was wie groß jetzt sein soll.

01:18:24.440 --> 01:18:32.500
 Und das ist dann teilweise echt, äh, ich kann ja verstehen, dass man sich das, also, es gibt ja gute Gründe dafür, dass man genau so viel Pixel jetzt Abstand von da nach da macht.

01:18:32.500 --> 01:18:37.380
 Also, ich weiß, äh, do websites need to exactly the same in every Browser?

01:18:37.380 --> 01:18:44.440
 Nein, natürlich nicht und es muss auch nicht alles mal auf dem Pixel perfekt sein, aber es gibt schon gute Gründe, warum da mal noch, also, die, die Designer, die denken sich da was dabei.

01:18:44.440 --> 01:18:45.720
 Das ist nicht irgendwie nur ...

01:18:45.720 --> 01:18:56.860
 Und gerade bei so, bei Badmas, also, das kann ich halt echt verstehen, weil ich bin da auch, ich reagier da allergisch drauf, wenn, wenn Sachen halt dann optisch irgendwie nicht so zentriert aussehen, das ist halt irgendwie so, ah, hätte man das nicht.

01:18:56.860 --> 01:19:08.880
 Und das würde diese Sache deutlich einfacher machen, was in dem Artikel auch noch aufgegriffen wird, wo ich jetzt nicht, nicht tiefer drauf eingehe, ist, ähm, dass man damit dann auch, äh, viel besser irgendwie so ein Spacing-System aufsetzen kann für ein Design-System.

01:19:08.880 --> 01:19:09.040
 Ja.

01:19:09.040 --> 01:19:15.660
 Ähm, wie gesagt, lese den Artikel durch, das lohnt sich echt und was ich jetzt gar nicht wusste, vielleicht noch als kleines Detail,

01:19:15.720 --> 01:19:20.020
 am Rande, man kann sich bei Medium, äh, mittlerweile, äh, Artikel auch vorlesen lassen.

01:19:20.020 --> 01:19:20.300
 Ach.

01:19:20.300 --> 01:19:36.080
 Also, man braucht dafür gar keinen Screenreader oder sowas und ich hab das jetzt heute mal gemacht und das war eine echt gute Stimme und ich hab jetzt auch keine Stelle, trotz dass es jetzt ein technischer Text war, ich hab jetzt keine Stelle gehabt, äh, doch, eine Stelle, äh, Lead wurde einmal Let ausgesprochen.

01:19:36.080 --> 01:19:38.320
 Ach, Englisch, ähm, Mensch.

01:19:38.780 --> 01:19:48.780
 Aber ansonsten war das wirklich, äh, eigentlich so gut wie perfekt aus meiner Sicht, soweit ich jetzt diese Sprache verstehe und, und die Aussprache verstehe, war das wirklich extrem gut vorgelesen.

01:19:48.780 --> 01:19:55.700
 Das ist auch cool gemacht, weil das so highlightet, also das highlightet den ganzen Absatz, wo es gerade ist und dann aber auch jedes einzelne Wort, wo es gerade ist.

01:19:56.000 --> 01:20:05.420
 Es ist so ähnlich wie die, äh, Lautvorlesen-Funktion in Edge, die ist auch ähnlich gut, vielleicht ist das tatsächlich sogar, äh, eine ähnliche technische Basis, weil da passiert genau das.

01:20:05.420 --> 01:20:08.620
 Mich erinnert sich ein bisschen an TikTok-Videos, die einfach Reddit-Threads vorlesen.

01:20:08.620 --> 01:20:09.360
 Ja.

01:20:09.360 --> 01:20:10.580
 Da klingt's genauso.

01:20:11.020 --> 01:20:22.800
 Also wer, wer, äh, wer das, wer das bei sich, bei anderen Seiten auch immer haben will, so eine Experience, äh, in Edge gibt's die Lautvorlesen-Funktion, und da gibt's mittlerweile auch sehr, sehr, sehr gute Stimmen, die fast, äh, Hörbuch-Qualität-artig vorlesen.

01:20:22.800 --> 01:20:25.940
 Und das macht auch genau das, das highlightet das aktuelle Wort.

01:20:25.940 --> 01:20:26.460
 Ja, cool.

01:20:26.460 --> 01:20:36.160
 Und man kann da auch noch so folgen. Also ich find's eine sehr angenehme Art, Artikel zu konsumieren, weil ich's gleichzeitig noch mitlese, dann, äh, dann hab ich's quasi gleich auf zwei Kanälen, äh, irgendwie drin.

01:20:36.160 --> 01:20:37.200
 Also das ist nur so am Rand.

01:20:37.420 --> 01:20:47.200
 Genau, äh, erzählt uns, wofür ihr Leading-Trim verwenden wollt, äh, außer den Sachen, die wir jetzt schon angemerkt haben, würde ich mich, äh, sehr dafür interessieren.

01:20:47.200 --> 01:21:02.920
 Ich bin auch sehr gespannt, wann und ob das kommt, weil das wäre echt schon eine sehr coole Sache, weil ich achte auch immer sehr auf Typografie, ich mag das, wenn's irgendwie schön, ähm, schön pixelgenau designt ist, und, äh, ich würde mich sehr freuen, wenn das irgendwann kommt, aber wie gesagt, da, äh, gibt's noch nicht mal einen Can-I-Use-Eintrag dazu.

01:21:03.520 --> 01:21:14.980
 Da gibt's nur die Spec, ähm, die wir euch verlinken werden in den Shownotes, da könnt ihr auch mal reingucken, ähm, aber das ist, äh, ich weiß auch nicht genau, könnte man in der Spec eigentlich, da müsste doch irgendwie auch stehen, wann, wie weit und so.

01:21:15.300 --> 01:21:31.360
 Also, das ist jetzt der, der, äh, der Stand von dieser Spec ist 14. November 2022 von, von dieser Version, die ich, von der neuesten Version, die ich da gefunden hab, ähm, natürlich ist die Spec auch nicht, äh, irgendwie eine Gesetzgebung, sondern es müssen natürlich die Browser-Hersteller auch noch implementieren.

01:21:31.360 --> 01:21:38.060
 Ich hab jetzt nicht nachgeguckt, ob das irgendwie in diesem Interop, äh, 2023 drin ist, das könnte ich aber noch gucken.

01:21:39.400 --> 01:21:54.160
 Ja, aber schön zu sehen, dass sich alles so ein bisschen, so, so, so, so kleine, feine Stellschrauben, um die wir uns jetzt endlich kümmern können, nachdem die großen Baustellen, äh, im, im CSS-Bereich oder generell im Webdesign, ähm, jetzt eigentlich so, äh, mal langsam durch sind.

01:21:54.280 --> 01:22:03.100
 Und Sachen, wo wir echt lange drauf gewartet haben und die lange irgendwie komisch waren oder unzufriedenstellend und jetzt kann man sich wirklich um so, so Kleinigkeiten, vermeintliche Kleinigkeiten kümmern.

01:22:03.100 --> 01:22:13.440
 Ja, es wird, es wird immer besser und, ähm, ja, wie gesagt, wer weiß, ob das jemals kommt, ähm, weil das ist noch so in so einem Zustand, wo man es nicht, nicht so genau, äh, absehen kann, aber ich würde mich freuen.

01:22:13.440 --> 01:22:13.820
 Ja.

01:22:13.820 --> 01:22:16.340
 Genau, das dazu.

01:22:16.340 --> 01:22:17.020
 Mensch, dann war's das.

01:22:17.020 --> 01:22:18.040
 Dann sind wir fertig mit dem Thema.

01:22:18.040 --> 01:22:19.000
 Gut.

01:22:19.000 --> 01:22:22.280
 Dann kommt jetzt ...

01:22:22.280 --> 01:22:24.160
 Das Geil-Teil.

01:22:24.160 --> 01:22:27.340
 Geil-Teil.

01:22:27.340 --> 01:22:29.700
 Ja, langsam hab ich's drauf.

01:22:29.700 --> 01:22:30.240
 Ja.

01:22:30.240 --> 01:22:32.280
 Hat ja auch nur drei Jahre gedauert.

01:22:32.280 --> 01:22:41.240
 Das Geil-Teil heute ist eine Seite, wo ich vorhin festgestellt hab, das muss es schon seit sechs oder sieben Jahren geben.

01:22:41.240 --> 01:22:43.000
 Oder hab ich sogar gesagt acht?

01:22:43.000 --> 01:22:44.020
 Ich muss nochmal auf so eine Demo rausklicken.

01:22:44.020 --> 01:22:44.800
 Ich glaube acht, ja.

01:22:44.800 --> 01:22:51.220
 Und zwar, Moment, ich guck nochmal, äh, ist das tatsächlich, oh, tatsächlich acht Jahre, tatsächlich acht Jahre alt.

01:22:51.220 --> 01:22:53.280
 Okay, das ist komplett an mir vorbeigegangen.

01:22:53.280 --> 01:22:57.060
 Und zwar heißt die Seite Particle-Love.com.

01:22:57.060 --> 01:22:58.360
 Jetzt darfst du auch mal draufklicken.

01:22:58.360 --> 01:22:59.720
 Ähm.

01:22:59.720 --> 01:23:02.360
 Darf ich auf High klicken oder ist dann der Street dann unsere Aufnahme kaputt?

01:23:02.360 --> 01:23:03.820
 Das weiß ich nicht.

01:23:03.820 --> 01:23:06.200
 Ich hab jetzt zur Sicherheit mal auf Low geklickt.

01:23:06.200 --> 01:23:06.840
 Okay, ich mach auch mal Low.

01:23:06.840 --> 01:23:10.440
 Aber ich glaube, du kannst die einzelnen Parameter später nochmal selbst hochsetzen.

01:23:10.440 --> 01:23:17.160
 Es ist eine Seite, wo so verschiedene Partikel-Systeme, die total fancy aussehen, ja genau, gezeigt werden.

01:23:17.160 --> 01:23:18.600
 Man kann da verschiedene auswählen.

01:23:18.720 --> 01:23:21.340
 Also das Erste, was ich jetzt ausgewählt habe, warte mal, ich muss gerade mal gucken, wie es heißt.

01:23:21.340 --> 01:23:22.960
 The Spirit, das ist auch das Erste.

01:23:22.960 --> 01:23:26.740
 Ähm, das sind, äh, ich versuch's jetzt mal zu beschreiben.

01:23:26.740 --> 01:23:32.940
 Der Maus folgen so ganz viele weiße Blobs, ähm, in so einem wilden Muster.

01:23:32.940 --> 01:23:34.540
 Die sind aber sehr wild animiert drumherum.

01:23:34.540 --> 01:23:37.520
 Und es erinnert sehr stark, ich hab's vorhin schon mal gesagt, es erinnert sehr stark.

01:23:37.800 --> 01:23:48.360
 Und es kommt später noch was, was mich ähnlich stark daran erinnert, an, ähm, äh, fantastische Tierwesen von, äh, J.K. Rowling, diese Filme.

01:23:48.360 --> 01:23:53.800
 Und zwar gibt es da diesen, ich habe vergessen, wie dieses Vieh heißt.

01:23:53.800 --> 01:24:01.520
 Ähm, da gibt's so einen, einen Charakter, um den sich da viel dreht, der dann aber irgendwie so, äh, so eine, so eine besondere Form annehmen kann.

01:24:01.520 --> 01:24:04.240
 Und so morft und so durch die Gegend fliegt und irgendwie durchdreht.

01:24:04.240 --> 01:24:05.540
 Immer dann, wenn er gereizt wird.

01:24:05.540 --> 01:24:06.820
 Das ist irgendwie so ein Junge.

01:24:07.420 --> 01:24:09.440
 Ähm, und das sieht sehr ähnlich danach aus.

01:24:09.440 --> 01:24:11.300
 Also ich würde sagen, die haben sich da inspirieren lassen.

01:24:11.300 --> 01:24:13.820
 Der Film hat sich da inspirieren lassen, weil das gab's ja vor acht Jahren schon.

01:24:13.820 --> 01:24:16.180
 So, also es ist, es sind so Partikel, die rumanimieren.

01:24:16.180 --> 01:24:17.100
 Das sieht sehr abgefahren aus.

01:24:17.100 --> 01:24:19.000
 Folgt jetzt in diesem Fall der Maus, dieses Beispiel.

01:24:19.000 --> 01:24:21.680
 Ähm, es ist tatsächlich doch recht performant.

01:24:21.680 --> 01:24:25.280
 Und dann kann man aber, das ist das Coole daran, also erstens gibt's den Code dazu auf GitHub.

01:24:25.280 --> 01:24:27.440
 Und man kann sich das angucken.

01:24:27.440 --> 01:24:29.380
 Aber man kann die Parameter auch ändern.

01:24:29.380 --> 01:24:34.880
 Rechts oben, ähm, gibt es zu jeder Demo Parameter, die man in dieser einzelnen Demo ändern kann.

01:24:34.880 --> 01:24:37.400
 Also zum Beispiel kann ich jetzt die Menge der Partikel ändern.

01:24:37.420 --> 01:24:39.720
 Ich lass die jetzt mal bei 65.000, muss man sagen.

01:24:39.720 --> 01:24:42.040
 Standard 65.000 Partikel, ja.

01:24:42.040 --> 01:24:43.880
 Die Geschwindigkeit kann ich ändern.

01:24:43.880 --> 01:24:45.460
 Ähm, den Radius kann ich ändern.

01:24:45.460 --> 01:24:47.920
 Und dann sieht das Ding jedes Mal irgendwie ein bisschen anders aus.

01:24:48.040 --> 01:24:52.060
 Attraction, ich nehme an, dass das was mit der Gravitation zu tun hat, wie schnell das wohin fliegt.

01:24:52.060 --> 01:24:54.680
 Follow-Mouse kann ich ein- und ausschalten.

01:24:54.680 --> 01:24:57.640
 Äh, wenn ich's ausschalte, dann fliegt's ganz wild durch die Gegend.

01:24:57.640 --> 01:24:58.480
 Das ist ja echt krass.

01:24:58.480 --> 01:25:02.520
 Also es ist wie so eine Wolke an weißen Partikeln, die der Maus folgen.

01:25:02.520 --> 01:25:03.420
 Das ist ganz abgefahren.

01:25:03.420 --> 01:25:04.600
 Muss man sich angucken unbedingt.

01:25:04.600 --> 01:25:08.100
 Ähm, ich geh mal noch auf eine andere Demo davon.

01:25:08.260 --> 01:25:10.300
 Also du kannst es auch nicht, so wie du das gerade klingst.

01:25:10.300 --> 01:25:11.180
 Ja, ich finde das krass.

01:25:11.180 --> 01:25:12.220
 Deswegen wie so still.

01:25:12.220 --> 01:25:16.220
 Ähm, und das ist, glaube ich, irgendwie mit Canvas gebaut.

01:25:16.220 --> 01:25:17.900
 Können wir gleich mal noch gucken.

01:25:17.900 --> 01:25:19.520
 Ja, ja, das muss Canvas sein.

01:25:19.520 --> 01:25:20.220
 Wahrscheinlich irgendwas.

01:25:20.220 --> 01:25:23.920
 Ähm, dann gibt's hier die Demo, äh, was war die zweite?

01:25:23.920 --> 01:25:25.120
 Icicle Bubbles.

01:25:25.220 --> 01:25:27.460
 Da gibt's auch noch schlimme Spooky-Sound-Effekte dazu.

01:25:27.460 --> 01:25:30.600
 Ähm, das ist dann das Ganze.

01:25:30.600 --> 01:25:33.000
 Das sieht so ein bisschen mehr aus wie eine Flüssigkeit.

01:25:33.000 --> 01:25:36.480
 Äh, aber in, in dunkelgrau bis hell.

01:25:36.480 --> 01:25:38.180
 Das ist ja hier mit der Hand.

01:25:38.180 --> 01:25:38.880
 Ist ja krass.

01:25:38.880 --> 01:25:40.280
 Und das, ja genau.

01:25:40.280 --> 01:25:42.040
 So, gehen wir, gehen wir mal noch weiter.

01:25:42.040 --> 01:25:42.980
 Gehen wir mal noch weiter.

01:25:42.980 --> 01:25:44.860
 Äh, ich hab hier jetzt noch Hypermix.

01:25:44.860 --> 01:25:50.200
 Ähm, das sieht aus wie so Zellen, die sich irgendwie reproduzieren.

01:25:50.200 --> 01:25:53.560
 Das sind auch so, so, so Bälle, aber die sind blau und rot.

01:25:53.560 --> 01:25:56.400
 Und man kann da wohl auch die Farben einstellen und alles.

01:25:56.400 --> 01:25:59.760
 Und, und, es ist, ja, es ist alles sehr, sehr, sehr wild.

01:25:59.760 --> 01:26:04.380
 Ähm, und du hast, äh, Constraint, glaub ich, offen, gell?

01:26:04.380 --> 01:26:06.800
 Nee, Constraint, Constraint ist so ein, äh, ist so wie so eine Art ...

01:26:06.800 --> 01:26:07.860
 Ist eins danach noch.

01:26:07.860 --> 01:26:13.100
 Ist wie so eine Art, äh, Spinnennetz in 3D, was sich bewegt.

01:26:13.100 --> 01:26:13.940
 Ganz verrückt.

01:26:13.940 --> 01:26:17.580
 Also, es ist alles auf jeden Fall Material für Horrorfilme oder Horrorspiele.

01:26:17.580 --> 01:26:21.180
 Ja, genau, Touch with Leap Motion.

01:26:21.520 --> 01:26:24.380
 Da fällt wie so Sand von oben nach unten.

01:26:24.380 --> 01:26:29.600
 Und man kann mit der Maus eine 3D-Hand bewegen, die man da in den Weg tut.

01:26:29.600 --> 01:26:32.600
 Und dann fallen diese Sandkörner anders nach unten.

01:26:32.600 --> 01:26:33.480
 Nämlich über die Hand.

01:26:33.480 --> 01:26:36.100
 Oder manche bleiben halt auf der Hand oder fallen prallen von der Hand wieder ab.

01:26:36.100 --> 01:26:38.940
 Es ist total abgefahren.

01:26:38.940 --> 01:26:42.640
 Ähm, und, äh, ich weiß nicht genau, unter was für einer Lizenz das steht,

01:26:42.640 --> 01:26:45.580
 ob man irgendwie sowas auch auf seiner eigenen Webseite dann irgendwie einbinden kann.

01:26:45.580 --> 01:26:49.480
 Ähm, ich finde ja alleine schon die Startseite davon total faszinierend.

01:26:49.480 --> 01:26:54.600
 Ich wollte gerade sagen, der Auswahlbildschirm, also der sich verändert auch, je nachdem, was ich auswähle.

01:26:54.600 --> 01:26:55.600
 Das fand ich schon geil.

01:26:55.600 --> 01:26:59.120
 Also, ich hätte gar nicht mal erwartet, dass man da noch klicken kann und dann passiert noch was Geileres.

01:26:59.120 --> 01:27:00.120
 Also, das ist ja echt Hammer.

01:27:00.120 --> 01:27:01.840
 Das sieht so Science-Fiction-mäßig aus.

01:27:01.840 --> 01:27:04.140
 Und das ist tatsächlich MIT-License.

01:27:04.140 --> 01:27:07.160
 Du kannst das, äh, benutzen, wenn du's möchtest.

01:27:07.160 --> 01:27:10.320
 Vielleicht noch sagen, von Aaron Kwan würde ich das jetzt mal aussprechen.

01:27:10.320 --> 01:27:12.520
 Ich weiß nicht, ob ich den Namen, wahrscheinlich hab ich ihn falsch gesagt.

01:27:13.160 --> 01:27:17.400
 Ähm, auf jeden Fall weiß ich, dass ich da auch schon Demos gesehen hab bei CodePen.

01:27:17.400 --> 01:27:20.840
 Ähm, die gibt es, also, es gibt auf jeden Fall auch CodePens davon.

01:27:20.840 --> 01:27:26.000
 Ich weiß jetzt nicht, ob die irgendjemand da rauskopiert hat oder ob das die Person, die das selbst erstellt hat, bei CodePen reinhat.

01:27:26.000 --> 01:27:29.840
 Da bin ich nämlich ursprünglich drauf gestoßen und hab dann gedacht, hey, da muss ich jetzt irgendwie nochmal nachgoogeln.

01:27:29.940 --> 01:27:32.400
 Dann hab ich diese Seite gefunden und die ist eigentlich fast noch cooler.

01:27:32.400 --> 01:27:38.020
 Ähm, geil ist halt echt, dass man an diesen Parametern rumspielen kann und das komplett verändern kann, wie es aussieht.

01:27:38.020 --> 01:27:40.140
 Also, es ist echt sehr abgefahren.

01:27:40.140 --> 01:27:44.020
 Äh, geile Sache, die uralt ist offenbar, die komplett an mir vorbeigegangen ist.

01:27:44.020 --> 01:27:44.840
 Äh, sehr hübsch.

01:27:44.840 --> 01:27:50.700
 Und ich glaube, wenn man so ein bisschen über Partikelsysteme, ähm, auf Webseiten was lernen will, dann sollte man sich das mal angucken.

01:27:50.700 --> 01:27:52.000
 Ich glaub, da kann man einiges lernen.

01:27:52.000 --> 01:27:52.460
 Cool.

01:27:52.460 --> 01:27:58.520
 Und ich glaub, damit kann man, wenn man möchte und die Parameter richtig einstellt, seinen Rechner auch richtig schön in die Knie zu gehen oder mal den Lüfter anmachen oder so.

01:27:59.240 --> 01:28:05.800
 Kann man mal gucken, ob die, was die Grafikkarte so drauf hat, wenn du halt mal auf so und so viele Millionen Partikel dann gehst und dann mal schauen, was geht.

01:28:05.800 --> 01:28:08.820
 Jo, das war das Geilteil heute.

01:28:08.820 --> 01:28:10.180
 Cool.

01:28:10.180 --> 01:28:11.800
 Sehr schön.

01:28:11.800 --> 01:28:14.380
 Dann kommt.

01:28:14.380 --> 01:28:18.560
 Das Ende.

01:28:18.560 --> 01:28:22.280
 Schafft.

01:28:22.280 --> 01:28:28.020
 Mensch, ich bin echt nicht so müde wie mit Bier, muss ich sagen.

01:28:28.540 --> 01:28:35.980
 Und wir haben auch jetzt uns tatsächlich trotz vier Properties, äh, sind wir relativ flott jetzt durchgekommen hier durch den ganzen Schlammhersel.

01:28:35.980 --> 01:28:40.760
 Ist ja fast eine kurze Sendung für unsere Verhältnisse, muss ich sagen, ja.

01:28:40.760 --> 01:28:43.460
 Ja, wir hatten schon, es ist nicht die kürzeste, aber.

01:28:43.460 --> 01:28:44.240
 Nee, nee, nee, wir hatten schon.

01:28:44.240 --> 01:28:46.600
 Aber, ja, es ist schon eine der kürzesten.

01:28:46.600 --> 01:28:47.800
 War so ein bisschen zu verschnaufen.

01:28:47.800 --> 01:28:49.660
 Außer wir verplabbern uns jetzt noch.

01:28:49.920 --> 01:28:53.800
 Nee, das machen wir nicht, aber wir, ähm, sagen wir euch nochmal kurz unsere Faxnummer.

01:28:53.800 --> 01:28:57.360
 072147046487.

01:29:00.340 --> 01:29:01.000
 Fax uns.

01:29:01.000 --> 01:29:06.000
 Wo wir sind, ist vorne Frontend-Faxen-Frotzelein.

01:29:06.000 --> 01:29:07.780
 Ihr könnt unseren Merch auch per Fax bestellen.

01:29:08.780 --> 01:29:14.320
 Ach so, unser Merch, genau, wir könnten auf unser Merch, genau, genau, wwwsev.de slash Merch.

01:29:14.320 --> 01:29:19.000
 Da könnt ihr, da könnt ihr T-Shirts und Tassen bestellen oder auch Hoodies und sowas.

01:29:19.000 --> 01:29:22.500
 Ähm, genau, da können wir noch auf ein paar Sachen hinweisen hier.

01:29:22.500 --> 01:29:24.080
 Das ist ja eigentlich gut, schon lange nicht mehr.

01:29:24.380 --> 01:29:27.140
 Da gibt's auch jetzt ja ein neues Motiv, das haben wir ja schon mal gesagt.

01:29:27.140 --> 01:29:33.040
 Ähm, und ihr braucht natürlich, äh, wenn, wenn ihr uns, wenn wir uns irgendwann mal sehen,

01:29:33.040 --> 01:29:37.440
 dann erwarten wir natürlich, dass ihr in einem WWSEV-Hoodie auftaucht.

01:29:37.440 --> 01:29:38.440
 Das geht ja gar nicht anders.

01:29:38.440 --> 01:29:40.420
 Also anders ist eigentlich ja gar nicht erlaubt, ne?

01:29:40.420 --> 01:29:46.060
 So, genau, schaut euch mal unser Merch an, wwwsev.de slash Merch.

01:29:46.060 --> 01:29:47.000
 Okay.

01:29:47.000 --> 01:29:53.300
 Und damit wären wir am Ende, glaube ich, jetzt, das war's jetzt, genau, verabschieden wir uns.

01:29:53.300 --> 01:29:57.260
 Und, äh, ja, vielleicht machen wir nächstes Mal mit den, mit den HTML-Elementen weiter.

01:29:57.260 --> 01:29:58.600
 Und dann danke fürs Zuhören.

01:29:58.600 --> 01:30:00.480
 Und bis zum nächsten Mal.

01:30:00.480 --> 01:30:01.460
 Bis dann.

01:30:22.220 --> 01:30:27.480
 Bis dann.