Wo wir sind, ist vorne, Folge 60, ich hab da mal nichts vorbereitet oder The State of HTML.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend Fakten Frotzelein, der Late Night Frontend Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Ja, hello, hello, hello zurück. Herzlich willkommen nach einer sehr langen Sommer- inklusive Herbstpause.
Da sind wir wieder.
Ja, da sind wir wieder.
Podcast wieder gestartet jetzt oder startet jetzt wieder. Wir hatten jetzt schon zweimal wieder Stream.
Ich weiß, ihr mögt es im Podcast nicht so, wenn wir über den Stream reden, aber wir reden gerne über den Stream, weil der Stream ist gut.
Und da sind immer sehr, sehr gute Leute auch da. Da könnt ihr auch mal dabei sein. Also auf diverse Social Media kriegt ihr das dann auch mit.
Genau.
So.
Vielleicht müssen wir noch mal sagen, du bist gerade im Sabbatical, deswegen sind die Podcast-Folgen, werden vielleicht ein bisschen unregelmäßiger sein als gewohnt.
Genau.
Die Regel kommt einfach jetzt ein bisschen unregelmäßig bei uns im Podcast.
Und Stream kommt vielleicht ein bisschen öfter. Keine Ahnung, müssen wir mal gucken.
Schauen wir mal.
Genau, also ich bin viel unterwegs. Ich werde jetzt auch demnächst ein bisschen reisen gehen.
Deswegen haben wir jetzt aber gesagt, es muss jetzt dann doch irgendwie noch mal eine Podcast-Folge kommen.
Und genau, deswegen sind wir jetzt hier.
Und trinken Bier.
Und trinken Bier, genau. Ich habe wieder, ich habe was, was ich schon oft hatte, aber das hat sich, glaube ich, auch bei anderen Podcasts, die Bier trinken, ist auch so eingependelt, dass dann manche Leute …
Dass man bei einem landet.
Dass man dann bei einem landet und ich habe jetzt, wir dürfen ja jetzt wieder, wir haben ja, glaube ich, ich glaube, in der letzten Folge, die letzte Folge war noch alkoholfrei, weil wir mal gesagt haben, bis zur Sommerpause trinken wir nichts mehr.
Ich glaube, im letzten Stream haben wir dann eine Ausnahme gemacht, vor der Sommerpause. Genau, wir sind jetzt wieder zum Podcast Alkoholismus zurückgekehrt.
Ja, ich nur so halb.
Du nur so halb, nur so halb.
Aber erzähl jetzt mal, was du hast.
Ich vollkommen. Ich trinke mal wieder ein Augustiner, ein helles Vollbier, weil halb Bier bringt es einfach nicht.
Eine halbe Sache gibt es nicht bei dir.
Ich hatte ja die letzten beiden Streams, das leckere Hosenbier vom Schep, das haben wir im Podcast noch gar nicht erwähnt, weil wir uns irgendwie nicht mehr gesehen haben.
Und wir haben es nicht geschafft, das nochmal auszutauschen. Aber das hatte ich jetzt zumindest im Stream. Aber heute, weil wir ja ausnahmsweise mal unter der Woche den Podcast aufnehmen und ich kein Sabbatical habe und morgen früh raus muss, habe ich wieder einen Null-Nuller-Radler ganz langweilig.
Also bei mir gibt es Vollbier, die gibt es Null. Also alles, wieso sie sein muss.
So gut, dann stoßen wir mal durchs Portal an.
Oh, sehr laut.
Das war ein bisschen laut, gell? Entschuldigung.
Das muss hinterher der Limiter raus limitieren.
Ja, damit kommen wir dann schon zur ersten Rubrik, oder?
Ja, fangen wir an.
Ich fange mit zwei Sachen an, die ich auch schon im Stream vorgestellt habe, aber macht ja nichts, doppelt hält besser.
Und zwar hatte ich kürzlich, wollte ich meinen lokalen Entwicklungsserver, der auf Laragon läuft, also unter Windows, auf PHP 8.2 updaten, beziehungsweise PHP 8.2 hinzufügen.
Das kann man ja recht einfach umswitchen, die verschiedenen Versionen.
Und da hat es mir dann die APCU-Extension um die Ohren gehauen, oder APCU, ist eine Caching-Extension für PHP, wo man also dann Daten im Memory ablegen kann, damit die einfach schneller parat sind und nicht jedes Mal neu berechnet werden müssen.
Und so die PHP-Anwendung ein bisschen flotter machen.
Und da kam dann plötzlich ein Fehler mit, ja, dass das irgendwie gegen die falsche API-Version kompiliert worden wäre.
Also ich habe einfach die DLL halt rüber kopiert von der alten PHP-Version und dachte mir, das wird schon laufen.
Und dann habe ich angefangen ein bisschen zu googeln.
Wie immer.
Und habe dann festgestellt, okay, auf der offiziellen Download-Seite von dieser PECL-Extension, da gibt es keine Windows-DLLs.
Die fehlen da irgendwie.
Also bei allen anderen Versionen waren die vorhanden, aber da nicht.
Und habe dann einen Stack-Overflow-Post dazu gefunden, wo Leute gesagt haben, ich finde da nichts.
Da verlinkt war ein Git-Issue beim Plugin, bei der Extension, wo dann auch Leute geschrieben haben, ja, ich finde nirgends die DLLs.
Oder es gab mehrere Issues sogar.
Und dann gab es zwischendrin mal ein paar Neubilds von so einer, also von der nächsten Dev-Version quasi, also so ein Zwischenstand, wo dann solche Artefakte von dem Bildsystem rausgehauen wurden, deren Links aber dann schon wieder abgelaufen waren nach ein paar Monaten.
Das heißt, es gab wieder nirgends diese DLL zu finden.
Und dann habe ich kurzerhand das ausgecheckt, habe zurückgewechselt auf die entsprechende Stable-Version, habe mit meinem Fork dann diese Artefakte rausrennen lassen und habe jetzt bei uns auf unserer Firmenseite alle PHP-Windows-DLLs zum Download mal angeboten.
Weil die anscheinend gebraucht werden, wie man auch sieht an den Download-Zahlen und an den vielen Issues.
Also es werden tatsächlich aus aller Welt, ich müsste jetzt reingucken in die Statistiken, aber es sind schon jeden Tag mehrere Downloads auch aus unterschiedlichen Ländern.
Ist signifikant, okay.
Also jetzt nicht hunderte und tausende pro Tag, aber schon so, dass man merkt, okay, ich war nicht der Einzige, der das Problem hatte.
Offenbar sucht auch jemand danach und landet dann bei dir, ja.
Ja, und dann habe ich gedacht, mal ein bisschen was für die Dev-Community tun und verlinke ich natürlich auch in den Shownotes.
Oh Mann, warte jetzt, jetzt war ich zu spät, weil eigentlich verdient das, nein, es funktioniert nicht.
Oh, dein Soundboard geht nicht?
Ja, oh, ich habe den Applaus gedrückt.
Ah.
Mein Soundboard geht aber irgendwie nicht.
Ich mache es.
Ich wollte eigentlich den, du hast den anderen verdient, den, genau.
Danke.
Du hast was für die Dev-Community.
Wieso geht mein Soundboard nicht?
Oh nein.
Ah, das hätte man vorher testen müssen, ne?
So ist das halt, wenn man das schon monatelang nicht mehr gemacht hat.
Das war echt ungewohnt, mal wieder hier das Podcast abzustarten.
So, ich versuche es nochmal abzudaten und ich würde jetzt mal kurz.
Ja.
Sehr gut.
Das geht auf jeden Fall.
Ja, ich weiß jetzt nicht, ob der Applaus geht, aber der kommt halt nur, wenn er kommt.
Der kommt nur, wenn er verdient ist.
Deswegen kann ich ihn jetzt nicht einfach nochmal machen, ne?
So.
Genau, soviel dazu.
Ja, cool.
Gute Sache.
Ähm, ich, äh, ich weiß nicht.
Wir haben vorhin über eine Folge gesprochen, die nicht so mein Glanzpunkt war.
Da war ich ein bisschen sauer.
Und ich bin jetzt gerade auch ein bisschen sauer.
Ähm, und zwar habe ich, äh, versucht jemandem zu helfen, der gerade Dinge digitiert,
digitalisieren möchte.
Ähm, ähm, und zwar halt, äh, in Form von, äh, es gibt ganz viel Papier und das soll
jetzt, äh, gescannt werden.
Und dann habe ich mir diesen Workflow mal angeschaut und hab dann gemerkt, ähm, da gibt's so gerade
im Hinblick auf Zukunftssicherheit noch so ein bisschen, äh, Optimierungsbedarf oder,
oder Möglichkeit, weil, äh, Dinge als JPEG aufbewahren ist jetzt nicht so unbedingt, also
ist nicht so gut durchsuchbar, sag ich mal.
Wenn man, ich meine, letzten Endes, da hat man das Bild.
Wenn man es gut benannt, das, das Pfeil, dann ist das auch irgendwie okay.
Aber, ähm, es sollte ja vielleicht auch durchsuchbar sein.
Und man möchte vielleicht auch, ähm, mehrere Seiten zusammengruppieren.
Und man möchte nicht ein riesiges JPEG haben, äh, sondern man möchte ja vielleicht,
also eigentlich ist ja das Dateiformat für sowas, was sich anbietet, ein PDF.
Ja.
Tut mir leid, es gibt tatsächlich Anwendungsfälle für PDF außer Druck.
Ähm, ich find's eigentlich auch nicht so gut.
Ich find Webseiten immer besser, aber dafür ist, glaube ich, PDF ganz okay.
Und vor allem, weil PDF ja auch einem die Möglichkeit bietet, ähm, Text noch über dem gescannten
Bild mit drin zu haben.
Und es gibt ja auch die, mittlerweile diverse Möglichkeiten, ähm, auf PDF oder auf Scans OCR zu machen,
also Optical Character Recognition, Texterkennung, sodass, ähm, der Text dann quasi in dem PDF
auch noch mit drin ist und dann von, wenn, äh, wenn ich, äh, in meiner Pfeilsuche suche,
auch diesen Text mit durchsuchen kann und auch nach Stichworten, die in dem Pfeil drin sind, ähm,
etwas finden kann.
So möchte man das ja eigentlich haben, wenn man viele Daten ablegt, man möchte sie auch
schnell wieder finden können und nicht, äh, nicht, weil ich den kompletten Inhalt in den
Dateinamen geschrieben hab, sondern auch irgendwie anders so.
Und dann hab ich, äh, mal geguckt und, ähm, der, der aktuelle Workflow sah halt so aus,
tatsächlich dieses Windows-Fax und Scan, dieser, dieses, also das sieht aus wie ein Fenster
in langen Zeiten.
Das sieht noch genauso aus wie bei Windows XP gefühlt, ja.
Es ist wirklich, ich mein, es funktioniert, aber das kann zum Beispiel schon mal kein
PDF abspeichern, sondern nur irgendwie TIFF und keine Ahnung, JPEG, irgendwelche Bildformate.
Naja, EPS, glaub ich noch.
Ähm, und dann dachte ich so, naja, das kann, das, also, es muss doch irgendwie einen Weg geben,
um diese, diese Features, die ich jetzt grad gesagt hab, also sowas wie, ich möchte ein
PDF raus, äh, haben, ich möchte mehrere Seiten in einem PDF gruppieren können und ich möchte
OCR machen.
Das muss doch irgendwie was geben, was das kann.
Und, ich hätte jetzt bei einem sophisticated Betriebssystem wie Microsoft Windows in der
Version 11 erwartet, dass das irgendwie das mit eingebaut ist.
Auf Windows 11 sogar, okay.
Windows 11, ja.
Habe ich immer noch nicht getestet und abgedatet, weil meine Hardware nicht.
Jetzt gibt es ein, und ich mag das ja, dass Microsoft irgendwann angefangen hat, sowas
zu machen, eine sehr minimalistische Scan-App im Microsoft Store von Microsoft selbst.
So, die ist aber so minimalistisch, dass ich zumindest nicht gefunden habe, dass man mehrere
Seiten in, in ein PDF hinzufügen kann oder irgendwie OCR.
Man kann aber immerhin einen PDF da draus scannen.
Immerhin.
So, ist ja, ist ja schon mal ganz gut.
Äh, und ich habe viel, viel rumprobiert und dann auch überlegt, ja, kann man es vielleicht
auch irgendwie mit dem Handy machen oder, äh, wie, was ist die richtige Software dafür?
Weil es gibt ja auch ganz gute Handyscanner-Apps, muss ich sagen, die eben genau das alles können.
Die laden dir das dann auch gleich, gleich noch irgendwie in einen Cloud-Ordner und so.
Aber da gab es nichts, wo ich jetzt gesagt habe, das ist jetzt finanziell, wollte man sich
jetzt auch nicht irgendwie in Unkosten stürzen.
Ja, also habe ich mir gedacht, naja, das ist, ähm, und außerdem, ähm, ist so Handyscan
auch immer sehr stark abhängig davon, ähm, wie die Lichtverhältnisse sind.
Mhm.
Ähm, und du kannst halt, und wenn du es, wenn du es, ja, die können irgendwie die Seite auch
gerade drücken, so, wenn du es jetzt nicht perfekt die Kamera drüber hältst.
Aber das ist dann alles von der Qualität der ...
Auch, äh, Schattenwurf und dann irgendwie, ja.
Genau. Wenn man einen Scanner hat, dann kriegt man, das dauert zwar länger, aber dann kriegt
man damit auf jeden Fall die bessere Qualität, das ist keine Frage.
Der Scanner war da, kein Problem.
Also viel, viel, viel rumprobiert, ähm, und am Ende tatsächlich eine App gefunden, ähm,
die heißt, äh, warte mal, das packe ich noch in die Show Notes hier mit rein, das hatte ich vorher noch gar nicht, die heißt, äh, NAPS 2, not another PDF-Scanner, ähm, ist Open Source und, äh, auf GitHub auch irgendwie verfügbar, der Code, und hat tatsächlich genau alles das da drin. Ähm, kostet nix, kann man tatsächlich einfach verwenden.
Das war, war aber, ich sag's mal so, die übliche Google-Suche, äh, die, die ich angestrengt hab, die hat mich nicht sofort auf dieses Ergebnis, äh, verwiesen, sonst wär's ja einfach gewesen.
Deswegen gibt's hier den Tipp, also falls ihr das unter Windows machen wollt, sowas, halbwegs vernünftig scannen und ist auch ein UI, das irgendwie, äh, korrekt aussieht für Windows-Verhältnisse, sag ich mal, ähm, funktioniert super und macht genau das.
So, ähm, ist jetzt dann auch schon im Einsatz und hat sich jetzt auch schon bewährt, genau dafür.
Und dann bin ich mal hingegangen und hab mir gedacht, so, ich mecker ja immer viel über Windows und über Microsoft und, äh, sag immer, Apple ist so toll, jetzt muss ich natürlich auch mal gucken, wie das jetzt bei Apple ist.
Ist da die Situation genauso scheiße? Müsste man, also, üblicherweise könnten wir jetzt annehmen, oh, da musst du bei Apple, musst du bestimmt so eine, so eine 100-Dollar-Software musst du dann irgendwie kaufen.
Das wär jetzt so ein üblicher Weg für so Standard-Use-Cases bei Apple. Ist ja manchmal tatsächlich so, dass so ganz simple Sachen irgendwie nicht gehen.
Turns out, der Standard-Scan-Dialog auf dem Mac, wenn man ihn mal gefunden hat, ich benutze sowas normalerweise nicht, weil ich bin ziemlich paperless unterwegs, wenn's geht,
enthält alle diese Optionen. Einfach so ganz unaufgeregt.
Für OCR muss ich einfach nur ein Häkchen anklicken, äh, PDF lasse ich einfach raus, indem ich sag, File-Type PDF.
Also, es ist wirklich das minimalste UI, mit dem man sowas hätte abbilden können, aber es sind einfach alle Funktionen einfach so mit drin.
Und, äh, wenn ich einfach zwei Sachen nacheinander einscanne und dann speichern drücke, dann sind's einfach zwei Seiten in dem PDF.
Also, das hat, das fand ich dann schon irgendwie irgendwie krass.
Ja, da muss man, da muss man schon sagen, äh, da behandelt Microsoft einige Dinge sehr stiefmütterlich und macht dafür andere Dinge, wo man sich denkt, naja, gut, okay, hätte das jetzt sein müssen.
Man hat so generell den Eindruck, ähm, dass irgendwie so Windows auf dem absteigenden Ast ist, also vor, äh, kürzlich haben sie ja, äh, diese kostenlose Upgrade-Geschichte von Windows 7 und 8 auf Windows 10, äh, eingestellt und haben dafür eine, eine Anleitung, äh, veröffentlicht, wie man Linux installiert.
Ähm, ja, damit dann alte Systeme wenigstens ein aktuelles Betriebssystem bekommen.
Wenn die Geschichte mit, dass das halt Windows 11 auf Hardware, ich mein, ich hab jetzt keine Schrottkiste hier stehen, auch wenn sie schon einige, die ja schon auf dem Buckel hat, aber dass die dann keine, dass die das nicht laufen lassen kann wegen diesem Kryptomodul, das ist irgendwie auch so ein, so ein Schuss ins Knie.
Ähm, ja, und dafür dann irgendwie so einfache Sachen, OCR und sowas und, also ich geb dir da schon recht, bei allem Hass, den ich ja sonst oft, ja, es ist ja nicht mal Hass, aber es ist einfach, naja, haben wir schon oft genug drüber geredet, aber ich geb dir schon recht, das sind einfach viele Dinge, die funktionieren einfach out of the box, wie man sie haben möchte, ja.
Und, und es ist so, es ist halt so, also wie gesagt, ich hab's nicht sofort gefunden, das ist, das ist, glaube ich, das größte Problem gewesen, ich hab so ein bisschen in den Einstellungen rumsuchen müssen.
Ähm, es ist auch keine App, wie man's jetzt, wie man's jetzt vielleicht annehmen würde, sondern es ist tatsächlich Teil der Einstellung.
Ähm, und dann geht da aber so ein Dialog auf und der ist wirklich super minimalistisch, aber enthält in diesem Minimalistischen einfach alles, alles, was man haben will.
Zumindest alles, was ich in dem Augenblick haben wollte.
Gottes Willen.
Ich hab gerade dieses Windows-Faxen-Scans mal aufgemacht.
Das Geilste ist schon und sehr bezeichnend, da ist, auf dem Startbildschirm ist eine Anleitung und das ist eigentlich nur Text mit so einem hässlichen Schwarz-Weiß-Logo oben drüber und das ist aber nicht mal irgendwie richtiger Text, sondern das ist eine Pixelgrafik, die entsprechend auf dem 4K-Monitor, aber selbst auf dem HD-Monitor, einfach völlig hoch skaliert und völlig verpixelt ist.
Das ist schon sehr aussagekräftig, glaub ich, oder? Also, wenn die Scans so aussehen danach, dann ist mir alles klar.
Die Scans waren tatsächlich an sich ganz okay, aber das ist ja auch Teil vom Scanner.
Oh Gott, das ist ja auch noch was.
Diese Toolbar mit dem Verlauf, du hast recht.
Es ist wirklich, ja, und es ist wirklich, es sieht aus wie ein Fenster in eine andere Zeit.
Was ich auch noch probiert hab an der Stelle ist, ich hab mir so gedacht, ja, das ist jetzt so ein HP-Scan-Druck-Kombi, ja.
Da gibt's doch bestimmt eine eigene Software, die das alles kann.
Ja, die gibt es.
Wenn du dich bei HP dann einloggst und HP-Plus oder irgendwie sowas abonnierst, dann darfst du das verwenden.
Geil.
Ist also OCR offenbar nicht im Gerät eingebaut.
Manche Geräte machen das ja von, bei denen ist das ja mit drin.
Das heißt, es läuft dann über deren Cloud wahrscheinlich, ne?
Irgendwie über, ja, irgendwie über deren Cloud, keine Ahnung, völliger Irrsinn.
Aber ich mein, das ist, HP, die haben ja auch, die lassen ja auch nichts aus, dir anzuzeigen, wenn du nachgefüllte Tintenpatronen drin hast.
Die zeigen an allen Stellen, du hast gefälschte Tinte, du hast gefälschte Tinte, du hast gefälschte Tinte.
Ich mein, immerhin sind sie, glaube ich, mittlerweile gesetzlich, ist es ihnen verboten worden, den Drucker dann den Betrieb zu verweigern.
Das haben sie ja teilweise, glaube ich, auch gemacht, wenn sie gefälschte Patronen erkannt haben.
Dann haben sie ja teilweise, ja, auch mal eine Zeit lang dann irgendwie gesagt, nee, dann druckt das Ding gar nicht.
Und ich denke, ey, Leute, ihr habt mir das Ding verkauft, jetzt gehört es mir.
Tja, ist nicht.
Aber das ist no more, hat man so das Gefühl.
Nee, das ist das Gerät, die die Hardware recht günstig an und verdient dann halt über die Patronen.
Also es ist ja zum Beispiel auch, ich kann nicht mal mehr schwarz-weiß drucken, wenn eine meiner Farbpatronen leer ist.
Also keine Ahnung, die pinke Patrone ist leer, ja, dann sagt der Drucker, nee, ich druck nicht mehr.
Was ihr gerade nicht gesehen habt im Podcast, war der Triple Face Palm auf meinem Gesicht.
Also ich habe, damit man sich das auch mal vorstellen kann, als jemand, der jetzt vielleicht nicht unter Windows nachgucken will,
wie das aussieht, dieses Windows-Faxen-Scan, habe ich jetzt auch mal nur einen Link für die Shownotes beigepackt,
wo ein Screenshot drin ist und wo auch eine Seite von Giga, wo erklärt wird, wie man diesen Dialog benutzt.
Das ist auch sehr bezeichnend, finde ich.
Weil, wie gesagt, auf dem Mac habe ich halt einfach einen Scan-Dialog.
Da sind die drei Optionen drauf, die man haben will.
Und dann war es das.
Das ist wirklich ein, das Fenster ist so, das ist winzig klein.
Und das ist einfach, warte mal, vielleicht, vielleicht finde ich davon auch noch einen Screenshot.
Scan-Dialog.
Ähm, genau, da findet sich doch bestimmt auch noch ein Bild davon.
Äh, nee, ich finde jetzt, nee, das sieht alles nicht so aus wie das, was ich gesehen habe, sondern viel komplizierter.
Das hat sich ja auch verändert jetzt mit dem letzten MacOS, wo die Einstellungen, nee, mit dem vorletzten, wo die Einstellungen abgedatet wurden.
Aber egal.
Ähm, nicht so wichtig.
Gut, also, äh, ich bin da aber auch für Tipps noch froh, wenn da noch jemand was hat und sagt, äh, ey, aber du musst auf Windows, das geht doch ganz einfach, mach doch so.
Oder hier, diese Software ist doch, ist doch saugeil.
Also, gerne in die Kommentare schreiben.
Äh, würde ich mich sehr drüber freuen.
Äh, vielleicht gibt's ja noch eine Möglichkeit, die noch besser ist als diese Snaps 2.
Wobei das eigentlich jetzt für das, was, äh, was ich jetzt hier vorher hatte, schon ziemlich gut funktioniert.
Und ich dachte mir, das hau ich als Tipp nochmal raus, weil, wie gesagt, die Suche danach war, ich hab's nicht sofort gefunden und, ähm, vielleicht hilft's ja auch euch, falls ihr Windows verwendet.
Gudi, ähm, ich hab so ein kleines Tool gebastelt und diesmal tatsächlich auch, äh, veröffentlicht.
Ich hab ja schon öfter so irgendwelche Ideen gehabt und irgendwelche Sachen gebastelt und, ah, man müsste mal und dann irgendwie doch nicht veröffentlicht.
Aber ich hab, ähm, ich war vor einer Weile im Europapark und ich hab den noch nie so voll erlebt.
Also, das war echt, äh, fast schon traumatisierend, ja.
Ähm, es war einfach brechend voll und irgendwie über eine Stunde anstehen für einmal fahren und so.
Und dann dachte ich danach, okay, nie wieder geh ich, äh, an einem Wochenende, auch wenn's außerhalb der, der Ferienzeiten war, sondern immer unter der Woche lieber mal irgendwie einen Tag freinehmen und dann dahin gehen.
Und dann dachte ich so, man müsste doch rausfinden können, wann ist eigentlich der beste Tag, um dahin zu gehen.
Also, wann haben möglichst wenig Bundesländer gleichzeitig Ferien oder im besten Fall gar keine.
Und dann hab ich gesehen, okay, es gibt auch so, es gibt tatsächlich Feriendichte-Kalender im Internet, wo man genau das machen kann.
Hier sagen kann, alle Bundesländer und dann wird das schön so color-coded dargestellt.
Und dann dachte ich, naja, interessant wär ja aber auch noch, das ist ja auch ein Anlaufspunkt für, für viele ausländische, äh, Gäste, also Frankreich, ähm, Österreich, Schweiz, Italien, so.
Und das wär interessant.
Aber das, es gibt diese Feriendichte-Kalender nur für die einzelnen Länder, wenn überhaupt, aber nichts, wo man irgendwie sagen kann, so das und das Land und dann zahlt man das mal an.
Und dann hab ich ein bisschen recherchiert und hab gesehen, okay, es gibt sogar eine, eine internationale Ferien-API, die man nutzen kann, auch offen, äh, kann man auch so beitragen.
Und dann hab ich, ähm, die mal angezapft und hab so ein bisschen mit Vue so einen Kalender gebaut und, äh, bin relativ schnell zum Ziel gekommen, innerhalb von, von eigentlich so zwei Tagen oder so.
Und hab dann gedacht, ja, warum eigentlich nur für mich, äh, ist ja für andere vielleicht auch interessant und ich stell das einfach mal live.
Und natürlich hab ich dann wieder so ein bisschen, ja, aber dann könnte man das noch machen und das noch machen und das wär cool und ein bisschen SEO und, ähm, und hab dann aber auch so ein bisschen mit KI mal rumgespielt, also mal die Chat-GPT-API auch angezapft.
Und was ich dann gemacht hab, ist, ich, es gibt so einzelne Landingpages eben für den Europapark, äh, Phantasialand, ähm, keine Ahnung, ähm, kann ich mir noch welche überlegen.
Und dann dachte ich, naja, cool wär das, wenn ich da möglichst gar nicht viel pflegen müsste, sondern wenn mir eben die KI, äh, da Texte schreibt.
Und das hab ich dann auch hinbekommen, dass, dass die Texte, die da rauskommen, relativ, äh, gut passen.
Und dann dachte ich, ähm, ja, Mehrsprachigkeit wär auch cool, krieg ich denn Chat-GPT dazu, auch die Texte zu übersetzen?
Und dann hab ich eben, ne, entsprechend in den Anweisungen geschrieben, hier antworte nur mit den Übersetzungen, nicht mit irgendwelchem Geplänkel außenrum, äh, und übersetze den und den Text.
Und hab das dann noch ein bisschen immer wieder ausprobiert, ein bisschen in Form geschliffen, noch ein paar Sachen unterbunden und ein paar Sachen gesagt, ja, lass es nicht so maschinenübersetzt klingen, zum Beispiel, ja.
Ähm, und jetzt hab ich tatsächlich hier so eine Seite mit 21 europäischen Sprachen, die sich komplett selbst mit Inhalt befüllt und, äh, selbst übersetzt auch noch.
Also ich hab natürlich schon, ich jag das nicht einfach live und lass es dann da machen, sondern ich lass das lokal generieren, guck nochmal drüber, mach eine Rückübersetzung nochmal oder bei den Sprachen, die ich verstehe, guck ich nochmal direkt an.
Ähm, und dann geht das erst und eben unter anderem mit diesem APCU-Cache, ähm, geht das dann live.
Und, äh, ja, das war irgendwie mal ganz cool zu gucken, was, was da schon so möglich ist.
Und das ist halt wirklich, also, hätte ich das alles per Hand machen wollen, erstens spreche ich gar nicht so viele Sprachen, ähm, und auch die Texte zu schreiben, das wäre viel zu viel Aufwand.
Und jetzt hab ich unter, äh, ich verlinke es natürlich auch, bestdayfinder.com, äh, so eine kleine Seite, wo man so einen Kalender hat und man kann nicht alle europäischen Länder, aber schon die einige, einige davon, äh, ankreuzen und dann sieht man so ein colorgecodetes, äh, Kalender, äh, Übersichtsding und, äh, genau.
Ja, für eigentlich für ein ganzes Jahr, ne?
Ja, 18, 18 Monate sind es, glaube ich.
Oder 18 Monate, im Voraus kann man sehen.
Ähm, und da kann man, wie ist denn das, ähm, wie finde ich denn von der Startseite?
Aus auf die einzelnen Parks.
Noch gar nicht.
Und deswegen indiziert die Google auch nicht.
Ich dachte, na, braucht man ja gar nicht, da soll man ja nur per Google drauf landen, aber das hat Google leider gecheckt.
Also, ich muss noch irgendwo so einen Link machen, so hier die häufigsten Orte oder so.
Also, du kannst Europapark.
So was für Park, wie eine Navigation.
Ja, genau so was.
Aber das sollte ja ganz simpel sein.
Ich brauch das ja wirklich nur für SEO eigentlich, genau.
Einfach Slash Europapark, dann leitet es dich automatisch nach Browsersprache weiter auf die, auf die entsprechende Sprachseite.
So, pack das mal noch mit in die Shownotes, das wäre nämlich cool, wenn man das, äh, also auch die Dending-Page
für ein spezielles, für ein spezielles Ort.
Nee, bloß nicht, nicht nutzen nicht.
Dann seid ihr, dann ist ja wieder voll, wenn ich da hingehe.
Wie, dann ist ja wieder voll.
Nein, dafür habe ich es ja gemacht.
Jetzt, pass auf, die nächste Stufe davon ist, dass du, ähm, bei jedem Park oder bei jeder Attraktion, die das Potenzial hat, so voll zu sein, irgendwo noch so ein, ähm, so ein, äh, Wi-Fi-Arduino-Dings platzierst, das dann, das dann, das dann, das dann schaut, wie viele, wie viele, wie viele Leute da rumjumpen, wie viele, wie viele Wi-Fi-Geräte da gerade so sind.
Also, für Freizeitparks gibt's das tatsächlich schon so Seiten.
Anhand dessen machst du eine Abschätzung dann, wie viele Leute da sind.
Ja, das wäre natürlich cool, ja, darf man natürlich nicht einfach so, muss halt verstecken.
Das ist natürlich illegal, aber das, aber das macht's ja auch nicht du, sondern das macht irgendjemand hier aus der Community.
Es gibt für Freizeitparks gibt's schon so Seiten, die tatsächlich sich, ich weiß nicht, woher die das genau beziehen, wahrscheinlich zapfen die auch die APIs von den Parks an und so, ähm, die tatsächlich auch je Attraktion die Wartezeiten, die aktuell veröffentlichen und so.
Also, das bietet ja auch der Europapark in seiner App an und andere Parks wahrscheinlich auch, ähm, und das zapfen die wahrscheinlich an.
Also, in der App aktuelle Wartezeiten.
Ja.
Ja, okay, gut, dann, ähm, dann braucht man das nicht, aber man weiß trotzdem nicht, wie viele Leute da sind.
Genau, also, könnte, ja, genau.
Also, das, diese, diese Idee ist nicht neu.
Vor allem weiß ich das ja erst am Tag dann, also, du siehst ja erst am Tag, wie hoch ist die Wartezeit, ne, und so siehst du halt, okay, welches ist der wahrscheinlichste Tag, dass da möglichst wenig Leute sind.
Diese technische Idee, die ist, äh, mal geboren worden aus dem Gedanken, ähm, wie viele Leute sind denn eigentlich gerade in der Kantine?
Ähm, es ist nie umgesetzt worden, auch aus, aus, ähm, ja, Privacy-Bedenken.
Aber letzten Endes kann man das machen und ich hab das, äh, hab das immer mal wieder getestet, ich hab auch die entsprechende Hardware hier rumliegen.
So, das wäre schon cool, ne?
Man kann so ein, ähm, so ein ISP, äh, Mikrochip, äh, Controller, kann man, ähm, in den sogenannten Promiscuous-Mode versetzen, das Wi-Fi, sodass, ähm, dass die ganzen Packages empfängt von Geräten, die sagen, ich würde mich gern mit einem WLAN verbinden.
Aha.
Ähm, das geht sogar so weit, und das finde ich dann da echt ein bisschen bedenklich, aber das, ja, wie soll es auch anders funktionieren, dass du auch empfangen kannst, und da gab es mal eine Installation dazu im ZKM,
ähm, mit welchen Wi-Fis, mit welchen SS-IDs das Gerät sich gerne verbinden würde, die es schon kennt.
Mhm.
Also da gab es mal so eine Installation dazu, es war einfach letzten Endes nur ein großer Monitor im ZKM, ähm, der dann gesagt hat, ah, übrigens, hier ist jetzt in so ein Grid ist jetzt so ein neues Gerät reingekommen,
Ah, und es möchte sich gerne mit diesen 27 SS-IDs verbinden, mit so Knoten, das ist so, ah, das ist so ein Hotel-Wi-Fi, habe ich sofort gesehen, womit ich mal verbunden habe.
Und dann habe ich gesagt, hä, das bin ja ich jetzt hier, was ist los?
Okay, das ist schon, schon großartig.
Das geht, das geht nach wie vor, diese Installation, die ist aus dieser Open-Codes-Ausstellung gewesen, die ist ja schon einige Jahre her, aber das geht technisch immer noch.
Ja, klar.
Ähm, also gibt's auch fertigen Code dafür, äh, im Internet, das nur so als kleiner Mini-Ausschweifungspunkt für, äh, wie könnte man das noch weiter treiben, um rauszufinden, wie viele Leute da sind.
Aber wenn's, wenn's so Wartezeiten gibt, ähm, aus den, aus den Apps, äh, dann braucht man das eigentlich nicht mehr, weil dann könnte man auch die irgendwie zusammenwerfen und dann sagen, okay, gut, da ist heute viel los oder sehr wenig.
Cool.
Gut, hast du noch was?
Ich hab, äh, sonst nix mehr für die Retro.
Dann hab ich nur noch was Kleines, und zwar hatten wir, haben wir das jetzt schon irgendwie die letzten, keine Ahnung wie lang, schon zwei, drei Jahre wahrscheinlich, das ist eigentlich fast schon seit wir das, seit wir den, äh, Podcast haben, ähm, haben wir so ein Bug-Ticket verfolgt zu CSS-Subgrid.
Das haben wir jetzt schon mehrfach hier, hab ich so ein bisschen geupdatet, wenn mal zwischendurch was Neues war, und jetzt ist es tatsächlich soweit seit Chrome 117, das ist jetzt fast schon alte News, äh, Anfang September, aber da haben wir halt nicht gepodcastet, äh, ist ja released worden, Chrome 117, und es ist tatsächlich jetzt,
Subgrid in Chrome vorhanden, und damit jetzt in, genau, und damit jetzt aber in, in allen Evergreen-Browsern, also Firefox hatte das ja jetzt auch schon länger, Safari.
Sogar in KaiOS.
KaiOS.
Das ist der letzte, das ist der ganz rechts bei KaiOS.
Ähm, ja, und das ist jetzt, also wir können Subgrid jetzt eigentlich, ähm, gut, okay, es ist trotzdem nur 60%, weil irgendwie Opera, Mini, Samsung, Internet, bla, ähm, aber so, also Desktop, äh, die großen Browser, die machen das jetzt, und man kann das ja mit dem Support, äh, Gedöns, kann man das ja auch abfragen, ob man's nutzen kann, denke ich, und, äh, ja, dann kann man da so mit Graceful Fallback, zumindest, kann man seine, seine Kachel-Layouts schöner machen.
Weil wir haben ja nach wie vor keine, keine andere, keinen anderen Anwendungsfall irgendwie so, außer diesen, diesen Kacheln, aber gut, aber wir haben's, und wir können's nutzen, und es gibt mit Sicherheit noch andere Fälle, so wie für CSS-Spalten.
Du meinst Multi-Column und CSS?
Ja.
Ja, das heißt, ja, gut, das ist auch so ein wiederkehrendes, wiederkehrendes Thema hier bei uns, ähm, okay, gut.
Dann überspringen wir die Property, weil es gibt heute quasi nur Properties, ne, äh, und kommen direkt zum Tagesthema.
Oder, oder zur Werbung.
Oder, ach so, Werbung, äh, wir können auch kurz, äh.
Wollen wir doch kurz Werbung machen.
Hey, hey du, schön, dass du da bist.
Na, öfter hier?
Dir gefällt, was du hörst, und du magst es am liebsten werbefrei und unabhängig?
Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter wwsev.de slash spende.
Auf wwsev.de slash unterstützen findest du noch circa 69 weitere Wege, uns zu supporten.
Wir danken dir.
Wie die letzten zehn Male, nachdem wir das, äh, eingespielt haben, sage ich.
Es gibt da noch weitere Ideen, die noch nicht fertig sind, aber fast.
Kommt noch, irgendwann, TM.
Ja, das ist wirklich, es ist was wirklich auf halber Strecke, nee, auf dreiviertel Strecke hängen geblieben.
Ähm, ich hatte dir da mal den Text zugeschickt und hab, ähm, vor langer Zeit und hab mal nach Feedback gefragt.
Echt?
Vielleicht, äh, vielleicht, äh, vielleicht, äh, vielleicht finden wir das nochmal, vielleicht, weil, weil, weil ich glaube, wenn ich mit dem Text, wenn der Text fertig wäre, dann könnte ich es vielleicht, könnte ich es vielleicht fertig machen.
Schauen wir mal drüber, ja.
Genau.
Gut, weiter geht's.
Hier ist WWS IV mit dem Tagesthema.
Das ist so ernst, da muss ich mal noch einen lustigeren Jingle machen, das ist ja nix.
Ja, ähm, nachdem wir schon mal Folgen gemacht haben über State of CSS und State of JS, ich glaube, darüber haben wir auch mal eine Folge gemacht, oder?
Wir haben schon mehrere Folgen, ja, also State of CSS auf jeden Fall schon zweimal, äh, State of JS, glaube ich, auch schon einmal, wenn nicht auch zweimal, genau, einfach mal suchen auf unserer Seite.
Es gibt ja jetzt eine Suchfunktion.
Es gibt jetzt eine Suchfunktion.
Äh, genau, einfach mal danach.
Ah, wir haben, genau, Folge Nummer 38, JavaScript und andere Zustände.
Ne, war das die?
Doch, das kann sein, und, äh, also State of CSS auf jeden Fall haben wir auch schon.
Mehrfach, genau, und jetzt?
Das war die Folge 45 zum Beispiel.
Vielleicht muss man nochmal kurz erklären, äh, was das ist.
Ähm, also es gibt jetzt neben State of CSS und State of JS jetzt auch eine State of HTML-Umfrage.
Das bedeutet, ähm, da werden, ähm, Features, ähm, die sind ja auch eine State of HTML-Umfrage.
Und, äh, die sind ja auch Features und ich glaube eher so Features, von denen man annimmt, dass sie nicht so super bekannt sind, ähm, abgefragt, ob man schon mal davon gehört hat, ob man's vielleicht sogar, äh, ob man's kennt oder ob man's vielleicht sogar schon verwendet hat.
Ähm, und das gab's, ähm, und das gab's wie gesagt in den vergangenen Jahren mehrfach für JavaScript und CSS und das gibt es jetzt zum ersten Mal auch für HTML.
Und ich befürchte, dass, wenn die Folge erscheint, man nicht mehr teilnehmen kann, weil ich glaube, das geht, also wir nehmen, das close jetzt mal, wir nehmen heute auf am 17. Oktober und ich glaube, sie läuft bis morgen, den 18. Oktober.
Das bedeutet, äh, wenn die Folge rauskommt, ist wahrscheinlich schon geschlossen, aber ich glaube, wenn ich's richtig, äh, weiß, gibt es ein GitHub, ähm, dazu.
Äh, und das, das suche ich vielleicht mal nochmal raus, vielleicht, vielleicht finde ich das, ähm, dann, dann könnte man nämlich zumindest auf den Inhalt nochmal referenzieren.
Ähm, muss ich mal gucken, ob ich das, ob ich das noch finde. Ähm, ach, ich seh hier gerade, da gab's mal so ne, da gab's mal ne Umfrage zu den Features.
Dann könnte man zumindest diese, ja, diese Feature-Liste, die packe ich auf jeden Fall mal hier mit rein.
So, äh, also wie gesagt, da wird abgefragt, wie, welche Features bekannt sind. Ähm, ich muss jetzt bei der Liste jetzt, wir sind's ja schon mal durchgegangen, äh, noch dazu sagen, es ist nicht nur wirklich reines HTML, es sind auch so, so DOM-ARPs, äh, viel, viel mit drin.
Ähm, also, und teilweise auch JavaScript-ARPs eigentlich, ne, die, die gar nicht nur ...
Internationalization später zum Beispiel, genau, das ist, wo ich wirklich dachte so, okay, was hat das jetzt noch genau mit HTML zu tun, aber ...
Genau, und was wir jetzt heute machen wollen, ist, wir wollen die jetzt nicht komplett einmal von oben nach unten durchgehen, das ist nämlich ein bisschen zu viel jetzt für die Podcast-Folge, das haben die Leute bei Working Draft auch schon gemerkt, die haben nämlich drei Folgen, äh, dazu gemacht.
Allerdings schon bevor die Umfrage rauskam, äh, haben die, glaube ich, damit aufgenommen, äh, ich glaube, anhand dieser GitHub-Liste.
Ähm, genau, und wir wollen jetzt uns so ein paar Sachen rauspicken, beziehungsweise so, aus so ein paar sind dann doch relativ viele geworden, unsere Liste ist sehr lang.
Sehr lang, mal gucken, ja.
Ähm, wir werden nicht zu allem, wir werden nicht bei allem ausführlich in die Tiefe gehen, ähm, sondern manchmal werden wir auch auf eine alte Folge von uns verweisen, wir haben schon gesehen, es gibt schon einige Sachen, zu denen haben wir schon mal eine Folge gemacht oder das ist relativ tief besprochen in der Folge.
Ähm, es gibt auch Sachen, die wir ganz rauslassen, ähm, über die wir, über die wir gar nichts sagen.
Weil wir schon irgendwie zigmal drüber gesprochen haben, uns einfach schon so alt ist mittlerweile gefühlt, dass irgendwie sich nicht lohnt.
Und, ähm, es sind jetzt hauptsächlich Sachen, die zumindest mal einer von uns noch nicht kannte, wenn nicht sogar beide nicht, ne?
Genau, oder, und aber auch, also sie müssen erst, äh, müssen erstens, ähm, eher unbekannt sein oder, äh, cool und interessant und, äh, kann man doch mal ausprobieren.
Oder manche Sachen sind sogar noch, noch gar nicht so weit, dass man sie ausprobieren kann. Ähm, genau. Also wir werden, es ist, das ist jetzt nicht die vollständige Liste. Falls ihr die sehen wollt, dann, äh, müsst ihr, müsst ihr die Liste, äh, in den Shownotes, äh, euch angucken.
Dann könnt ihr da, könnt ihr da, äh, euch die Infos holen. Wir nehmen jetzt nur uns die Sachen vor, die wir irgendwie interessant und, äh, spannend fanden. Genau. Und dann fangen wir einfach mal an, oder?
Genau. Äh, Forms ist der erste große Teil. Ähm, da ist, zum Beispiel Autocomplete ist so ein Ding, äh, das haben wir in Folge 29, äh, schon vorgestellt in, in, in, in der Property der Woche. Da gerne mal reinhören, wenn ihr das nicht, äh, kennt.
Also es geht um das Autocomplete-Attribut auf, äh, Formen, Elementen in dem Fall.
Welche so, wo man, wo man meistens so welche, wo man Text reinschreiben kann. Sollen wir da noch was zu sagen?
Nö, braucht man nicht. Verweis mal auf die Folge, äh, einfach mal.
Genau. Perfekt. Das ist super. Fängt, fängt ja schon super an. Wir sagen einfach nichts.
Ähm, dann, äh, HTML-Media-Capture. Ähm, was das bedeutet, ist, dass ich bei einem, äh, Upload, beim File-Upload, ähm, die Möglichkeit habe, explizit zu sagen, ähm,
Nimm doch jetzt mal die Kamera von dem Endgerät. Ähm, mir war schon bewusst, dass man, glaube ich, mit einem File-Upload auf mobilen Geräten, dass man das quasi als Option hat.
Ich erinnere mich an diverse System-Dialoge, die einem, die einen dann fragen, sag mal, was willst du, also ich weiß nicht, das war früher auf Android, glaube ich so, dass das einen dann fragt, sag mal, willst du jetzt eigentlich in den File-Picker oder willst du ein Foto machen?
Genau, aber ist halt eben vom User, äh, vom OS-UI quasi. Ähm.
So eine Funktion, aber hat, ist jetzt nichts, was man steuern könnte, sondern das bieten die halt an, wenn man, äh, auf so einen File-Picker klickt.
Genau, und, ähm, Media Capture funktioniert so, dass ich, ähm, Input-Type-File hab und dann, äh, bei Accept ein Mime-Type, äh, angeben kann, wenn ich das richtig verstehe, und ein Capture, das ist so, warte mal, so steht's in der, in der ...
Genau, also Accept-Video-Sternchen und als Capture, äh, Capture als leeres Attribut quasi.
Zum Beispiel Video oder Audio oder ...
Ähm, beziehungsweise, ähm, es gibt auch zwei Werte, die man da setzen kann, dann kann man nämlich explizit beeinflussen, Capture gleich User oder Capture gleich Environment, ob's eben die Front- oder die Rückkamera nimmt.
Und das ist schon irgendwie ganz cool, ne, dass man das so vorauswählen kann.
Genau, also ich denke, ähm, man sollte in dem Fall natürlich, ähm, die User drauf vorbereiten, was da jetzt gleich kommt, das sollte man nicht jetzt so out of context machen, aber wenn das jetzt eine entsprechende App ist, die, äh, wo klar ist, ich möchte jetzt eigentlich hier, keine Ahnung, ich mach jetzt eine Social-Media-App wie BeReal oder sowas, ja, wo ja quasi, äh, Foto von vorne und von hinten gemacht wird, von, von, von, von beiden Seiten, dann ist ja klar in dem Augenblick, da wird jetzt ein Foto gemacht, also, äh, ich würde das jetzt nicht out of the blue.
Lou machen, aber wenn, wenn, wenn aus dem App-Kontext ja klar ist, äh, was jetzt passiert, äh, finde ich, das ist eine total coole Sache, weil es nimmt dir dann, äh, einfach schon irgendwie nochmal eine Entscheidung ab, sondern, ähm, kann einfach sagen, direkt hier, gib mir bitte, was die Kamera tut.
Genau, und anhand des Accept, ähm, Mime-Types, äh, kann eben auch dann das UI entscheiden, was es vorauswählt, also, ob es mir jetzt die Fotofunktion öffnet oder eben die Videofunktion oder ob ich vielleicht beides machen möchte, also, wenn ich jetzt irgendwie, äh, Video slash Sternchen, Komma, äh, Image, äh,
Slash-Sternchen, äh, mache, dann, dann könnte ich theoretisch beides aufnehmen, kommt halt auch wahrscheinlich drauf an, was, äh, wie der Browser das unterstützt.
Ganz genau.
Also, cooles, kleines Feature.
Ähm, dann als nächstes hätten wir Input-Show-Picker.
Genau, da hab ich sogar eine kleine Demo gebastelt, die musste ich, äh, als HTML-Seite auf unserem Server ablegen, weil das ging im Code-Pen nicht.
Haben wir im Stream rausgefunden, weil dann die Meldung kam, dass das irgendwie in einem Cross-Resource-I-Frame, dass das nicht funktioniert.
Ähm, und was das, was das macht, also Input-Show-Picker, äh, kann ich aufrufen auf einem Input-Element, das einen entweder Date oder Time oder was auch immer was Picker hat.
Und was wir nämlich dann ausprobieren wollten, weshalb wir dann die Demo gebastelt haben, war, ob das auch funktioniert, wenn ich einen Input mit einer Data-List hab, also List-Attribut, äh, und einer Data-List mit vorgegebenen Einträgen.
Und tatsächlich, wenn's nicht in irgendeinem I-Frame läuft, dann funktioniert auch das.
Also ich klicke auf den Button, der macht, äh, triggert das, ähm, Show-Picker auf dem Input, und dann krieg ich eben diese Vorauswahlliste mit, mit Vorschlägen oder mit, mit Vorauswahl, was ich in dieses Feld eintragen kann.
Genau.
Genau, jetzt könnte man sagen, äh, wozu braucht man das eigentlich?
Naja, wenn man's programmatisch halt triggern will und nicht irgendwie nur durchs System-UI, was, äh, schon da ist.
Oder ich könnte theoretisch das Input verstecken, aber dann mit einem Button-Klick, äh, das auswählbar machen, sodass ich's im Input nicht bearbeiten kann, aber dann halt dieses Overlay nur sehe.
Hm, ja, stimmt.
Also zum Beispiel vielleicht gerade bei einem File-Picker, vielleicht macht das Sinn.
Weil, ja, okay, gut, ja. Aber, aber der File-Picker, der hat ja, hat der, hat der einen, der hat doch gar keinen Picker, der geht ja in einem eigenen Fenster auf.
Äh, äh, was, das teste ich jetzt grad mal live.
Ja, können wir, probieren wir's einfach schnell aus.
Machst du's in der Demo, die?
Ja, funktioniert, aber ist genau das, also öffnet dann halt einfach den, den File-Picker-Dialog, ja.
Ah, krass, tatsächlich.
Okay, das ist cool.
Das hat man früher so gemacht mit, ich leg was drüber und mach dann irgendwie, äh, Visibility-Hidden und so, ne, sodass man das dann, äh.
Ja, das kann natürlich auch, das kann natürlich auch ein bisschen böse verwendet werden, weil dafür brauchst du dann jetzt nicht mal mehr einen Klick, theoretisch.
Ich weiß nicht, ob das, es gibt ja so, es gibt ja so APIs, die dann sagen, naja, wenn ich jetzt hier keinen echten Klick hab, dann mach ich auch nix.
Ähm.
Das hab ich jetzt, äh, das könnte sein, dass das dann auch noch so geschützt ist, weil es ist ja schon, wenn du jetzt irgendwie eine böse Seite hast, dass du dann einfach direkt ohne irgendeine Interaktion einfach schon mal einen File-Upload, äh, aufmachst, könnte ich mir durchaus vorstellen.
Können wir mal gucken, ob das geht, weil das sollte meiner Meinung nach nicht gehen dürfen.
Aber das ist ja mittlerweile, ähm, das ist ja auch bei, bei, beim Öffnen von Pop-Ups oder so, da ist das ja, wird das ja unterbunden, ähm, wenn da kein Klick da ist.
Also, tatsächlich kann ich's aus der Konsole raus nicht machen, ich weiß jetzt nicht, ob das daran liegt, dass ich eben den Fokus nicht im Browserfenster hab, müsste man mal in der Tiefe ausprobieren.
Ja.
Aber es ist ein cooles, äh, kleines Feature.
Ja.
Dann haben wir die Formdata-API, ähm, die hat das, glaub ich, du noch nicht gekannt.
Genau.
Wenn ich mich richtig erinnere.
Genau, und da hab ich auch ne kleine Demo dazu gebastelt, äh, einfach so ein Dummy-Formular, das man ausfüllen kann oder auch nicht, und dann mal auf Submitteln,
klicken und dann sieht man, äh, was man damit alles machen kann.
Also, man kann das Formdata, was man da bekommt, also, als an Formdata übergebe ich ein Form-Element, ähm, und das saugt sich dann aus dem Formular automatisch die Daten so, wie sie an den Server übertragen werden würden, wenn ich jetzt das einfach ohne JavaScript, äh, abschicke.
Abschicke, ne, also wenn ich es einfach abschicke, wird es ja an, als, je nachdem, was ich, was ich bei den Formen noch angebe, als Form-Multipart oder, oder eben als, äh, URL-Parameter, äh, übergeben, wenn es ein Get-Request wäre.
Ähm, und da kriege ich die Daten eben einfach in JavaScript-verwertbarer Form, und das kann ich einfach beim Fetch-Request, also damals schon bei, bei XML-HTTP-Request ging das, ähm, aber natürlich jetzt auch bei Fetch kann ich das als Body übergeben,
und das wird dann alles entsprechend kodiert, oder, ähm, was man bei der Demo auch sieht, ich kann es als, äh, URL-Search-Params, ähm, mir zurückgeben lassen, dann wird es gleich schon richtig kodiert mit, mit, mit den Sonderzeichen, mit Prozent und, äh, mit Pluszeichen statt Leerzeichen.
Oder ich kann es mir halt auch als, als JSON zum Beispiel formatieren lassen, ähm, und kann es dann irgendwie weiterverwenden.
Vielen Dank dafür, weil, äh, das hatten wir jetzt, im Stream hatte ich nur gesagt, ah, das kannte ich ja so noch gar nicht, und, äh, danke für die Demo, das ist wirklich sehr schön, äh,
Genau, dann haben wir noch, ähm, Select-List, ähm, da will ich gar nicht so riesig drauf eingehen, nur, ähm, es hieß mal Select-Menu, ähm, und war ein Vorschlag, äh, von Open UI, der auch, äh, tatsächlich mal in Chrome-Browsern implementiert war, hinter einem Flag, glaube ich, mit den Experimental Web-Plattform-Features, konnte man das ausprobieren.
Was es letzten Endes ist, ist, äh, dass man den Inhalt von Select, äh, also Select-artigen Elementen customizen kann, also, ja, wirklich alles Mögliche da reinpacken kann.
Das hat jetzt den Namen geändert, aber dazu haben wir tatsächlich schon auch schon eine eigene Folge gemacht.
Folge 39 war das?
Genau, Folge 39, Select-Stern-From-Menu, ähm, da gerne mal reinhören, wenn ihr darüber mehr wissen wollt.
Dann, äh, dann haben wir als nächstes Content-Editable gleich Plain-Text-Only, also Content-Editable kennt man vielleicht schon, damit kann ich quasi jedem beliebigen Element, äh, sagen, du bist editierbar, und, äh, da kann man aber aktuell halt auch HTML drin verwenden.
Und das Content-Editable Plain-Text-Only, äh, ja, sorgt eben dafür, dass ich tatsächlich nur Plain-Text da editieren kann.
Genau, das ist eigentlich schon die, das, das große Ganze, aber, ähm, es ist eigentlich ganz cool, ne, und irgendwie komisch, dass das jetzt erst kommt.
Also vorher konnte man da halt wirklich HTML irgendwo rauskopieren und dann da reinkopieren oder irgendwie aus Word-formatierten Dokumenten was reinkopieren und dann, dann wurde das so formatiert.
Aber vielleicht möchte ich ja tatsächlich nur, dass, dass da Text bearbeitbar ist.
Wobei dann natürlich die Frage ist, warum, äh, ja, nehm ich dann nicht einfach eine Text-Area zum Beispiel, ähm, aber gibt, gibt mit Sicherheit Gründe, gerade im Kontext von, von, äh, what you see is what you get, Editoren, wo man das tatsächlich verhindern will, dass da HTML reinkommt.
Genau, also Kleinigkeit, aber, ne, da hatten wir schon mal drüber, ähm, es kommen halt jetzt immer wieder so, das große Ganze ist irgendwie so Fertiggefühl, was Layout angeht und so.
Jetzt kommen halt so Kleinigkeiten, die so nice to have wären in Browsern, äh, und die jetzt umgesetzt werden, die jetzt vielleicht nicht jeder jeden Tag braucht, aber die durchaus ihre Daseinsberechtigung haben.
Ich finde es, also, ich finde es gerade im Hinblick auf, äh, ich möchte eine Seite, also, ich frage, ich frage mich ja, warum nicht viel mehr Seiten, ähm, als CMS irgendwie so funktionieren, dass einfach nur Content Editable gemacht wird auf den, äh, Bereichen.
Ja.
Und gerade da möchtest du nämlich ziemlich sicher, äh, nicht, dass nochmal, dass jemand noch HTML reinpacken kann, sondern ich möchte eigentlich, dass, dass die vorhandene Formatierung, möchte ich, dass die beibehalten bleibt.
Äh, also, an manchen Stellen möchte ich vielleicht HTML erlauben, aber an vielen Stellen möchte ich es vielleicht nicht erlauben.
Also, zum Beispiel, äh, wenn ich jetzt in der Überschrift bin und die editieren möchte, äh, in der Seite, die, wo ich die Seite, also, wirklich, what you see is what you get, äh, ähm, ähm, da möchte ich vielleicht verhindern, dass irgendjemand da HTML reinpacken kann.
Eine Liste innerhalb von einem, von einer Überschrift oder sowas.
Genau, was weiß ich, irgendein Case, was, da geht ja gar nicht so viel, aber das würde, glaube ich, zum Beispiel gehen, ähm, oder halt, vielleicht will ich, die ist halt schon so formatiert, wie sie sein soll, die Überschrift.
Ich will da jetzt nicht, dass da jemand jetzt noch bold machen kann oder whatever, ne? Ähm, finde ich absolut cool für sowas und ich finde, ähm, ich sehe viel zu selten Beispiele von Content editable in the wild.
Ähm, ich habe so das Gefühl, irgendwie, und erklärt mir bitte, ob das, erklärt mir oder erklär du mir, weil sowas weiß, ob das einen Grund hat.
Ähm, wird immer abstrahiert auf irgendwelche Formelemente und der Bearbeitungsansicht sieht immer irgendwie komplett anders aus als die eigentliche Seite und ich verstehe nicht so richtig, warum, weil ich, meiner Meinung nach, sind die Werkzeuge doch da.
Ich könnte mir schon vorstellen, dass das tatsächlich ein Grund ist, dass man es bisher halt zu wenig einschränken konnte, ne?
Dass ich halt nicht will, dass jeder alles irgendwie einfügen kann und wenn ich natürlich so ein What-You-See-Is-What-You-Get-Editor habe, der konfigurierbar ist, dann kann ich da natürlich viel mehr beeinflussen, was darf da rein am Ende, ne?
Also klar, man muss das so oder so nochmal selberseitig validieren und nicht einfach blind vertrauen, dass das schon passen wird, aber, äh, natürlich ist man da viel flexibler.
Vielleicht kommt jetzt mit dem Plaintext-Only, vielleicht sieht man das ja häufiger.
Das ist auch so, schon lange so meine, oder unsere Idee, ähm, so einen gescheiten Editor zu haben, der eben so What-You-See-Is-What-You-Get macht, weil auch diese ganzen, ähm, ja, diese ganzen Baukastensysteme, die es so gibt, die versprechen dann oft so What-You-See-Is-What-You-Get, aber eigentlich ist es halt doch nicht.
Eigentlich ist es halt, es sind doch wieder irgendwelche Kästchen, die du rumschiebst, die so grob schon dem Layout entsprechen und da drin dann vielleicht die Überschrift so aussieht, wie es am Ende aussieht, aber so insgesamt das Layout ist nicht What-You-See-Is-What-You-Get.
Es gab, es gab vor langer, vor langer, langer Zeit, ist mindestens zehn Jahre her, mal so eine, so eine kleine Welle an so, wie soll ich das sagen, PHP-basierten, glaube, ich glaube, PHP-basierten, PHP- und JavaScript-basierten, ähm, Mini-CMS, ich wollte gerade sagen CMS-Systeme.
Mini-CMS-E, die tatsächlich darauf basiert haben, dass du auf einer Seite eigentlich nur, wenn du dich, wenn du diese bearbeiten willst, ähm, ein Slash-Login irgendwie an, an die URL dranhängst, dich dann einloggst und dann wieder auf der Seite landest und dann so einen Bearbeiten-Knopf hast, der dann da ist.
Wenn du, solange du eingeloggt bist und dann konntest du einfach irgendwo, das war, die waren super unpopulär oder super unbekannt, fast niemand hat die verwendet, zumindest so, ich habe sie selten irgendwie mitbekommen, dass jemand das verwendet hat.
Und dann konntest du einfach auf der Seite rumklicken und Texte verändern und wenn, der hat dann auch erkannt, ah, du hast da was verändert, dann hattest du einen Speicher-Button, hast es abgespeichert, fertig.
Und du konntest halt auch irgendwie sagen, ja, nee, ich will da jetzt halt irgendwie, du hattest schon noch so Controls mit, ich kann da jetzt auch noch Bilder einfügen oder sowas.
Ich verstehe nicht, warum sich dieser Ansatz nicht komplett überall durchgesetzt hat.
Also irgendwie muss es große Probleme damit geben, weil das ist eigentlich doch, das wäre, man kann doch, man könnte im Web doch wirklich echtes What-You-See-Is-What-You-Get machen.
Und ich glaube, mit gar nicht so viel Aufwand, warum macht das keiner?
Ja, es ist halt, wir haben ja, haben da auch schon so ein bisschen in die Richtung versucht und es ist halt, ne, du musst ja trotzdem Sachen irgendwo hinziehen können und musst dann sehen, wo landet es am Schluss genau und so.
Und so einfach ist es leider nicht.
Also du musst halt bei Hover zumindest mal, solltest du irgendwie sehen, wo ist, was gehört jetzt wo dazu und wo ziehe ich das jetzt gerade rein, was ich da reinziehen will und so.
Also es gibt da schon ein paar Herausforderungen, dass es am Schluss auch noch ein UI ist, was man einigermaßen intuitiv versteht.
Aber wenn es jetzt nur darum geht, dass man Text verändert irgendwo oder, keine Ahnung, man braucht vielleicht noch was für sowas wie einen Artikel hinzufügen, aber dann am Ende auf der Seite, naja, ich glaube, vielleicht habe ich in meinem Kopf auch zu statische Seiten im Vergleich zu heute.
Weil wenn du einfach eine fertige statische Seite hast, die könntest du somit ja super pflegen.
Allerdings kommt dann halt auch nicht wirklich was dazu.
Ja, du hast aber, ne, dann will ich da vielleicht, will ich so ein Kausell und da will ich dann hier noch ein Akkordion mit FAQs und so, ne, und das ist halt, ne, ja, wird es halt komplexer, ja.
Ja, das stimmt, sobald du interaktive Elemente hast.
Aber klar, innerhalb von diesen Blöcken, also das eine ist ja, ne, wie stelle ich die Blöcke zusammen und wie mache ich das, kriege, ne, hat das ein tolles UI.
Und das andere ist aber so, wie, wie bearbeite ich das.
Und da ist halt ganz oft, okay, ich sehe diese drei Spalten mit irgendwie, äh, Überschrift und Text, aber dann klicke ich da drauf und dann habe ich wieder so ein hässliches, dann ist ein Overlay und da habe ich dann einfach Text Areas, wo ich das drin schreibe.
Und das ist halt tatsächlich ja eigentlich Quatsch. Also eigentlich möchte ich dann wirklich auf diese Überschriften klicken können, einfach rein den Text ändern, unten die Paragraphs, äh, anklicken und was da ändern und dann möchte ich das speichern, ne.
So stellt man sich's eigentlich vor.
Ja, genau.
Okay, dann hätten wir noch, äh, Input Set Custom Validity. Das ist auch was, was ich nicht kannte.
Genau, Form Validation war da der größte Überbegriff.
Form Validation, also HTML5, äh, Native Form Validation, also nicht irgendwas selbstgekrabbeltes.
Genau, vielleicht sagen wir mal, was es dann noch so gibt, was wir aber schon kannten, also dass man generell abfragen kann, ob ein Feld valide ist oder nicht und dass man auch per CSS mit, äh, Pseudoselektor,
ähm, ähm, die Pseudoclasses, ne, äh, dass man markieren kann, ob die invalid oder valid sind und dementsprechend dann, dann anders darstellen.
Genau, das war, war uns bekannt.
Genau, oder das Required Attribut, wo man entfällt.
Genau, Set Custom Validity hatte ich auch schon mal eingesetzt, für dich war's neu und das war so ein Punkt, glaube ich, warum du bisher so, äh, Form Validation, HTML, HTML, HTML5, äh, Form Validation nicht benutzt hast, weil du
dachtest, man kann da gar keine eigenen Nachrichten, ne, oder, äh, also Fehlermeldungen hinterlegen.
Ich habe gesehen davon, dass man keinen Einfluss auf den Style hat, äh, das ist aber vielleicht noch verkraftbar, äh, dachte ich tatsächlich, man kann keine Custom-Texte dahinterlegen in bestimmten Fällen, aber das geht offensichtlich und das wusste ich die ganze Zeit nicht, dass man Custom-Texte hinterlegen kann, weil das ändert alles aus meiner Sicht, weil ich möchte vielleicht nicht, die Texte, die Standard-Browser-Texte, manchmal passen sie vielleicht nicht direkt, ich finde sie auch akrobotisch manchmal.
Ich möchte vielleicht auch einfach selbst bestimmen können, was da steht. Vielleicht habe ich ja in meinem Kontext noch einen speziellen Tipp, den ich geben möchte an der Stelle.
Genau.
So was, was der Browser ja gar nicht wissen kann, dass das jetzt irgendwie an dieser Stelle relevant ist. Und dass das geht, äh, das war für mich ein Augenöffner. Wahrscheinlich ist das Ur-Käse-Alt, aber vielleicht wusste das außer mir auch noch jemand nicht und dann hat's jetzt schon was gebracht.
Weiß ich gar nicht sehr, wann das, äh, guck mal noch schnell, Custom-Validity.
Wann findet man das raus?
Ja, das, aber gibt's schon, also Chrome 4, also 2010.
Da war ich wirklich.
Konnte Chrome und Safari auch, 2010.
Firefox 2011.
Ja.
Also das gibt's schon ein bisschen, ja.
Oh Gott, oh Gott.
Oh je.
Aber da kommt später auch nochmal irgendwas, wo ich dann auch gesehen hab, so krass, okay, das gibt's schon zehn Jahre und ich hab's irgendwie auch noch nicht benutzt.
Ja, okay, gut, dann gehen wir zum nächsten.
Interactivity war das, der nächste große Punkt.
Also genau, da gibt's, äh, vielleicht kurz, ähm, für die, die es die Umfrage nicht gesehen haben, es, die ist so aufgeteilt in so mehrere große Blöcke.
Der erste ist der Forms-Block, jetzt kommt der Interactivity-Block.
Dann gibt's noch Content, äh, Web-Components, Accessibility und Native-Like-Web-Apps.
Wir gehen nicht alles durch, wie gesagt.
So, genau, und da haben wir, ich glaube, du warst durch die Umfrage da drauf gekommen, ne, weil wir im ersten Stream nach der Pause hatten wir das, hast du das schon mal vorgestellt.
Und zwar, äh, Details und Summary mit einem, also als Exclusive-Akkordeon.
Das heißt, wenn ich eines aufmache, ne, Detail-Summary ist, ich hab ne Headline und da ist ein versteckter Content und wenn ich dann draufklicke, dann fährt das aus.
Ähm, und um so einen richtigen Akkordeon-Effekt zu haben, ist halt, wenn ich eins ausklappe in so einer Gruppe von Detail-Summary-Elementen, dass dann alle anderen zuklappen.
Und das soll in Zukunft möglich sein, aber geht, glaube ich, aktuell nur in den Tag-Previews, ne, also Chrome 118.
Ja.
Und, äh, Safari-Tag-Preview, ne?
Genau.
Also, und das wird, äh, gemacht, indem man das im Prinzip ähnlich macht wie bei Radio-Buttons, die kann man ja auch gruppieren, dass sie zusammengehören.
Ähm, einfach mit dem Name-Attribut und, äh, alle Details, äh, Elemente, die das gleiche Name-Attribut haben, gehören dann zusammen und, äh, kriegen dadurch einfach diese Funktion, ganz ohne JavaScript oder irgendwie sonstiges Gedöns.
Ähm, ja, finde ich ziemlich coole Sache.
Das heißt, es ist mal wieder so ein, so ein User-Pattern oder so ein Interaction-Pattern, dass man sich immer bisher, äh, selbst zusammengeklöppelt hat, äh, in die, in die Web-Standards geflossen.
Allerdings, wie gesagt, das ist nur Experimental, aber, äh, da erhoffe ich mir viel davon.
Ich könnte mir vorstellen, dass, das ist so ein No-Brainer, das ist auch irgendwie, ich hätte es genau so umgesetzt, wenn ich Standardschreiber gewesen wäre, es ist so, es liegt so auf der Hand, wie es funktioniert, einfach nur, wenn man drauf guckt.
Ja.
Das muss es einfach werden, da gibt es für mich keine Alternative, das ist einfach, das ist für mich fertig so.
Genauso wie Lazy-Loading, äh, so einfach funktioniert, ähm, ist so, genauso, weil auch einfach ein Pattern noch verwendet wird, das es an anderer Stelle schon gibt, das an anderer Stelle schon bekannt ist, finde ich.
Genau, warum das Rad neu erfinden, ja.
Genau, so müssen neue Standards aussehen.
Also in der Demo, die du verlinkt hast, die funktioniert jetzt halt mit, mit einem JavaScript-Polyfill, ähm, da wurde das zum Beispiel verwendet, um aus Detail-Summary-Tabs zu bauen, ne?
Also es ist immer nur eins offen, und ich kann die halt wechseln.
Genau.
Aber wie gesagt, das, das funktioniert überall wegen dem Polyfill, ähm, aber wer sich den, äh, den Polyfill genauer anschaut, der sieht das da eigentlich, ähm, da wird das keine große Magie, die da gemacht wird.
Also wenn man es schon einfach so einsetzen möchte.
Hat auch in der jetzigen Version, glaube ich, Probleme mit Accessibility, weil die Tab-Reihenfolge irgendwie komisch ist, wenn man da.
Das steht da noch dabei.
Ja, ist interessant, ob das in Zukunft weiter ein Problem sein könnte, oder ob das irgendwie automatisch dann, ja, muss man mal schauen.
Ja, da gibt's noch, da gibt's noch mehr Probleme mit dem ganzen Detail-Summary, ähm, ich weiß gar nicht, ob das mittlerweile jetzt gelöst ist, dass, äh, Text, der zugeklappt ist, nicht durchsuchbar ist, auf der Seite.
Ähm, ich glaube, da gab's aber auch irgendwie, äh, da haben wir vielleicht auch schon mal drüber gesprochen, da gab's auf jeden Fall auch irgendwie den Ansatz, wie das gelöst werden kann, dass irgendwie, wenn man sucht, dass die alle ausgeklappt werden oder so.
Ja, okay, dann kommen wir zu was, was wir auch im Stream, nee, was wir im Podcast auch schon mal hatten, gell?
Genau, Folge 56 haben wir, äh, das schon mal angesprochen.
Und da hast du hier noch eine Demo dazu reingehängt, die verlinken wir auch.
Ja, die ist letztendlich.
Ich glaube, dann müssen wir da gar nicht so viel mehr drüber verlieren, oder?
Im Endeffekt, ja, es ist wie Tooltips, ne, nur dass ich sie steuern kann, so.
Eine Art Tooltip, was ich auf Klick, naja, es ist kein Tooltip, ist ja meistens bei Mouse-Over, es ist halt wirklich wie das Bootstrap-Pop-Over, ähm, aber tatsächlich nur mit reinem HTML, das heißt, ich klicke irgendwo drauf, äh, und dann öffnet sich ein anderes Ding.
Und ich sag das mal so ganz abstrakt, man kann auf Klick ein anderes Dings öffnen und auf Klick wieder schließen.
Ähm, und dann gibt's auch noch Positionierung und keine Ahnung was alles, was da angedacht ist dafür, ähm, aber das nur mit HTML, finde ich wahnsinnig mächtig, weil das, wie, wie viel, wie viel JavaScript-Logik in einer Webseite beschäftigt sich denn bitte genau damit?
Ich klicke irgendwo drauf und dann wird was anderes angezeigt.
Wenn du das, wenn du das dir alles schenken kannst und das einfach nur mit HTML ein bisschen, mit ein bisschen HTML machen kannst, das ist ja fantastisch.
Also, da bin ich auch sehr gespannt. Das ist aber auch in einem sehr frühen Stadium.
Ähm, warte mal, hab ich gar nicht, darf ich gar nicht ...
Ich hatte in der Folge 56 da schon mal eine Demo verlinkt, wo es dann genau um diese Positionierung ging mit irgendwie Add Position Fallback und Add Try und Anchor und was weiß ich.
Und das hatte damals schon nicht richtig funktioniert. Das war dann irgendwo sonst wo gelandet. Und das ist immer noch nicht so ganz, immer noch nicht gefixt.
Ähm, also es ist noch sehr, sehr früh, ne?
Aber es ist schon relativ weit. Ich sehe hier gerade bei Can I Use, dass es eigentlich in den, in den Chrome-basierten Browsern ist es quasi schon drin. Und bei Firefox ist es schon hinter einem Flag.
Genau, aber diese Positionierungsgeschichte, die ist halt noch ...
Ja, aber das ist ja, für mich ist das auch Schritt zwei. Aber ja, ähm, aber cool. Das ist wirklich, das ging jetzt.
Irgendwie sehr schnell. Irgendwie ging das lange, offenbar lange an mir vorbei. Oder es war plötzlich da. Äh, finde ich, finde ich fantastisch. Fantastische Sache. Bin ich sehr gespannt, was die Leute damit so bauen werden.
Okay.
Dann haben wir als nächstes das Inert-Attribute. Das ich, glaube ich, auf so ziemlich jedes HTML-Element setzen kann, wenn ich das richtig gesehen habe. Also ich kann theoretisch den kompletten Body auf Inert setzen.
Und was das macht, ich dachte zuerst, das ist so ein bisschen wie, als ob ich einfach auf das Element Pointer None setze per CSS. Aber es ist noch mehr. Also das würde dafür sorgen, dass ich es zwar nicht mehr anklicken kann, aber ich kann zum Beispiel noch reintappen in Input-Elemente, die da drin vorhanden sind.
Und mit diesem Inert, das deaktiviert wirklich den Inhalt komplett. Kein Antappen, kein Markieren, kein, äh, Reinklicken, nichts. Ähm, und ist im Endeffekt wie, äh, ARIA hidden.
Nur, dass ich halt eben auch als Nicht-Screenreader-User diesen Content wirklich komplett deaktiviert habe. Also er ist, wenn ich ihn nicht ausblende zusätzlich, ist er zwar da, aber kann halt wirklich nicht mehr bedient werden.
Und, ähm, das ist zum Beispiel für, gut, jetzt gibt's, Dialog gibt's jetzt auch schon eine Weile, äh, aber für sowas wäre das klassisch gewesen. Also, dass ich ein, ein Overlay habe und ich möchte den restlichen Content dahinter zum Beispiel komplett deaktivieren.
Das heißt, dass ich, äh, auch eine Focus-Trap habe eben innerhalb von so einem Model. Also dafür wäre das zum Beispiel gewesen. Aber gibt's sicher auch noch andere Anwendungsfälle, wo das Sinn macht, äh, Content zu deaktivieren.
Ich hab ja noch gedacht, äh, im, im Stream, ähm, da kam dann auch gleich Widerspruch, so von wegen, oh, das ist ja vielleicht gefährlich und ein Anti-Pattern. Aber ich könnte mir vorstellen, ähm, dass wenn man so eine richtige Web-App-App hat, also keine Ahnung, so ein Photoshop im Browser, das, was es ja mittlerweile gibt, ne?
Also so eine richtige App, die Dinge tut, die nicht einfach eine Webseite ist mit, mit ein paar Airframes oder so. Ähm, dass man da zum Beispiel in einem Ladezustand, ähm, die Seite komplett deaktiviert, bis es fertig geladen ist, weil damit's keine komischen Seiteneffekte irgendwie passieren können.
Könnte ich mir vorstellen, dass man das auch für sowas braucht. Äh, für weitere, äh, Anwendungsfälle, äh, gerne in die Kommentare bin ich auch sehr interessiert. Ähm, ich denke, das sind aber auf jeden Fall schon Sachen, also es gibt immer mal wieder einen Grund, warum ich irgendwie was deaktivieren will, zwischenzeitlich. Äh, da darfst du jetzt grad nix machen, sonst wird das irgendwie komisch oder so.
Oder, was mir jetzt grad auch noch einfällt ist, ähm, man könnte damit zum Beispiel, wenn man jetzt so ein interaktives Formular hat, dass Bereiche ein- und ausblendet, je nachdem, wie der Status vorher ist.
Da möchte ich vielleicht nicht, dass man vorher schon mit der Tastatur oder mit dem Screenreader irgendwie reinkommen kann. Ähm, äh, aber die Bereiche sind vielleicht nur visuell ausgeblendet am Anfang.
Könnte ich mir vorstellen, dann sagst du halt auch da, ähm, das ist wirklich, so lange wirklich weg, weg, dass, dass du auf keinen Weg irgendwie reinkommen kannst.
Ja, ich hab schon an diversen Stellen, da hab ich's halt dann gelöst, dass erstmal alles disabled ist zum Beispiel. Alle Inputs werden disabled, solange wieder die Tabelle noch fertig am Laden ist, weil Inhalte irgendwie per Ajax nachgeladen werden.
Und solange macht zum Beispiel halt Filtern oder sowas keinen Sinn, ähm, dass ich das dann disabled hab und erst danach wieder, äh, aktiviere.
Aber das ist halt, wenn man nicht optisch auch diese Kennzeichnung braucht, und selbst das könnte man ja machen, indem man den ganzen Bereich dann ausgraut oder irgendwie ein Loader drüber anzeigt oder wie auch immer, ähm, dann ist das schon, schon praktisch, ja.
Ist sehr praktisch, weil du halt einfach nur ein HTML-Attribut hast und alles, was innerhalb ist, äh, dann automatisch deaktiviert wird.
Du musst nicht einzelne Elemente auf disabled setzen oder sowas, sondern das ist einfach alles, was drin ist.
Ich glaube, ich hatte da auch mal wirklich einen Fall, wo es zu einem Bug kam, wenn man irgendwie schon vorher was eingetippt hat oder so, äh, weil es dann natürlich versucht hat, irgendwas zu filtern oder so.
Weil sowas gar nicht da war und dann gab es irgendwie einen Fehler.
Und das ist, äh, das ist cool.
Also es gibt schon, glaube ich, einige Anwendungsfälle dafür.
So, jetzt kommen, jetzt kommen Sachen für dich.
Für mich.
Für mich allein.
Äh, DOM-Attribute-Related-Methods.
Ähm, da war eigentlich nur eine dabei, die wir, glaube ich, auch beide noch nicht kannten.
Get-Attribute-Names.
Also wenn ich einfach nur eine Liste aller Attribute wähle, also nur der Attribut-Namen, äh, die ein Element hat und, äh, das gibt's, glaube ich, auch noch nicht so lang, also in, in, in, in Web-Speak gibt's schon ewig lang.
Aber so 2017, 2018, ne, jetzt mittlerweile auch schon irgendwie fünf Jahre, sechs Jahre, aber, ähm, ja, hab ich irgendwie trotzdem nie genutzt.
Man hat das halt vorher gemacht, indem man dann irgendwie, äh, Get-Attributes oder einfach Punkt-Attributes und dann hat man sich halt, äh, alle Keys von diesem Objekt zurückgeben lassen, ne.
Und dann hatte man auch quasi eine Liste aller, äh, aller Attribute.
Aber es gibt eine eigene Funktion, da krieg ich einfach nur ein Area zurück und da drin sind alle Attribute, die das Element gesetzt hat.
Und, ähm, ja, sicherlich auch nicht unpraktisch.
Ich glaube, ich bin jetzt gerade ein bisschen, äh, ich glaube, die Liste ist noch nicht gut genug aufgeräumt, weil ich glaube, da lösch ich mal gerade noch zwei Sachen raus.
Ähm, genau, das gibt's nämlich in der, äh, ich sag mal kurz, was es jetzt gerade ging, ähm, in der Umfrage gibt es so Bereiche, wo, wo großflächig abgefragt wird, ähm, zum Beispiel, ähm, welche Element-Moving-Dom-Methods man schon verwendet hat, also, äh, Methoden, um Elemente rumzuschieben.
Ähm, und dann ist da eine ganze Liste mit, mit einzelnen Sachen, die wir jetzt aber nicht alle durchgehen wollen, ähm, das könnt ihr euch einfach direkt in der Umfrage mal anschauen.
Genau, also wir haben die Sachen rausgepickt, die halt, äh, die wir halt selber noch nicht kannten.
Genau, da war jetzt gerade noch was in unserer Liste drin, ähm, okay.
Genau, was, was eigentlich schon halt auch noch ein bisschen kürzen, genau.
Ähm, das nächste ist Replace Children, das kannte ich auch nicht und das gibt's jetzt, das war, glaube ich, das, was ich vorhin meinte, ja, äh, wobei, nee, 2020, ja gut, das sind drei Jahre, aber, äh, trotzdem, ich kannte es nicht und hab's auch nicht genutzt.
Replace Children, was ich da vorher gemacht hab, wenn ich jetzt wirklich in dem Element alles austauschen wollte, dann hab ich halt irgendwie, äh,
in HTML auf, auf einen Leerstring gesetzt, dann war's erstmal leer und dann hab ich, äh, die neuen, äh, Children eingehängt, ne, aber mit Replace Children kann ich halt einfach alles auf, in einem Rutsch ersetzen.
Cool.
Also einfach wieder so kleine Helferlein, ja, äh, die jetzt nicht so vermisst wurden, aber halt einfach Dinge wieder einfacher machen und so und, äh, übersichtlicher vielleicht auch machen.
Genau, dann kommen wir zum Bereich Content in der Umfrage, äh, und als erstes kommt da direkt, äh, unser Lieblingsattribut loading gleich lazy, ähm, und auch dazu werden wir jetzt nicht so viele Worte verlieren, sondern, äh, tatsächlich auf unsere Folge Nummer zwei verweisen, wo wir uns damals schon gefragt haben, warum wird denn das so wenig verwendet?
Äh, ich muss jetzt grad noch mal gucken, äh, die Folge zwei ist, damit wir mal in den Kontext kriegen, ist veröffentlicht am 1.3.2020.
Krass.
Ähm, das ist ja quasi schon graue Vorzeit.
Ja, Wahnsinn.
Ähm, da gehen wir jetzt auch nicht weiter drauf ein, äh, falls ihr was dazu hören wollt, dann hört euch unsere Folge Nummer zwei an, die heißt Corona, Cloud und Chaos.
Dann haben wir Source Set und Size Attributes. Ich glaub, da gehen wir auch nicht zu sehr in die Tiefe. Ähm, das ist im Zusammenspiel mit, äh, Picture Element und Source Elementen, wo ich verschiedene Größen des gleichen Bildes, äh, angeben kann.
Und das klingt erstmal toll und klingt danach so, ach cool, ich geb irgendwie verschiedene Größen an und der Browser sucht sich dann das Beste raus, was in dem Zustand und mit der Pixeldichte am besten passt.
Aber ganz so einfach ist es leider trotzdem nicht, sondern ich muss, ähm, in diesen, äh, Angaben quasi das CSS, die CSS Breakpoints wiederholen, die ich im CSS eh schon drin habe und muss dann wie so eine Art, äh, ja, CSS auch schreiben, wo ich eben den Bereich angebe, bis zu dem dieses Bild angezeigt werden soll und bis zu dem das nächste angezeigt werden soll.
Ähm, vermutlich aus dem Grund, weil theoretisch ja das CSS noch nicht geladen sein könnte, aber der Browser schon wissen muss, äh, in welcher Größe er dieses Bild darstellen soll.
Aber es ist halt ein bisschen lästig, das irgendwie, ja, doppelt machen zu müssen. Ähm, gut, am besten macht man sowas sowieso mit einem CMS, das am Schluss automatisch die entsprechenden Größen raushaut.
Aber das muss halt auch genau wissen, in welcher Breite bin ich und in welcher Breite, äh, ne, soll das am besten so und so dargestellt werden.
Also wir haben das zum Beispiel bei uns auf der Seite, ähm, so eine Galerie mit, mit Projekten, wo einfach nur so Vorschaubilder nebeneinander sind.
Und die sind halt, manchmal gehen die über die volle Spalte, manchmal sind sie zweispaltig, dreispaltig oder vierspaltig, je nachdem, wie viel Platz ich zur Verfügung hab, aber auch je nachdem, wie viele Projekte ich hab und ob das aufgeht.
Das heißt, äh, wenn's halt ne ungerade Zahl ist irgendwie, dann geht halt am Schluss nochmal eins irgendwie vollbreit drüber oder die werden dann auf vier, vier, vier, vier aufgeteilt, äh, statt auf irgendwie zwei, oder zwei Dreier und so weiter.
Ähm, und das macht's ein bisschen tricky, da halt genau zu wissen, in welcher Konstellation brauche ich jetzt eigentlich welche Breite.
Und, äh, ja, das hat mich schon so ein bisschen zur Verzweiflung gebracht.
Ja, es sieht auch irgendwie hässlich aus, muss ich ehrlich sagen.
Äh, und, ja, ja.
Ja, hast du dir mal angeguckt, die Syntax, wie man das dann, ne, in Klammern dann, und, also es ist echt nicht, die Idee ist schön und es wäre cool, einfach den Browser hinwerfen zu können,
hey, die, die und die Breiten hast du zur Verfügung, guck selber, was jetzt grad am besten passt, aber so ist es schon wieder irgendwie nervig.
Also ich hab mal, ähm, ne, ne Minimalimplement, das ist auch schon wieder viele, viele Jahre ja, als ich noch im Agenturgeschäft war, ähm, ne Minimalimplementierung gesehen von, äh, ich habe einen Server, der mir die passende Bildgröße zurückgibt, irgendwie oft mit PHP gebaut, ganz simpel.
Ähm, und das Einzige, was man da noch gemacht hat, ist, man hat mit JavaScript die Seitenbreite ausgelesen.
Die ist nicht unbedingt immer aussagekräftig, weil, äh, das heißt ja nicht, wenn jetzt die Seite tausend, wenn ich tausend Pixel in der Breite habe, dass das Bild auch tausend Pixel breit sein soll.
Ne, das kommt ja immer total auf den Kontext an, aber so ganz krude für, für schmale Breiten, ähm, da hast du einfach bei JavaScript noch die, die, die Breite ausgelesen und dann das noch mit dahin geschickt und dann hat er automatisch das richtige Bild, äh, zurückgeschickt.
Ganz, ganz simpel, also sowas.
Dann hast du halt immer schon das Problem, ja, es ist halt blöd, sowas mit JavaScript machen zu müssen, also, das wäre das Problem, der Browser hat schon die ursprüngliche URL schon angefangen zu laden und dann änderst du die nochmal, weil du nochmal die Breite übergibst und dann lädt er das nochmal und so.
Ja, also, klar, kann man machen, ne, funktioniert, aber, also, schöner wäre es für mich einfach, der Browser würde das selber machen, aber da gibt's halt wieder diese Constraints mit, äh, ja, weiß ich denn überhaupt schon beim Rendern?
Ich möchte ja auch möglichst keine Repaints haben und so, ne, also, daran, daran liegt das so ein bisschen, warum man das mit angeben muss.
Jetzt, jetzt, jetzt, jetzt komm ich mit einer ganz uralten Idee um die Ecke. Wäre dafür Progressive JPEG nicht genau das Richtige?
Also, dass du im Prinzip, weißt du, wie ich meine, also, dass, dass man das irgendwie, dass der Browser das kombiniert, dass er quasi so die, die Megalow-Variante quasi als erstes lädt, das geht ja, mit Progressive JPEG, erinnerst du dich?
Ich erinnere dich an die frühen Zeiten des Internets. Vielleicht muss ich für die, für die Jüngeren hier, die zuhören, nochmal kurz erklären, was das ist.
Also, es gab eine Zeit, da war das Internet sehr, sehr langsam, überall, ja, und, äh, wenn man ein Bild geladen hat, dann war man froh, wenn man nicht fünf Minuten warten muss, bis es da ist.
Pornoseiten. Und, äh, da gab es, es gibt halt die Technologie Progressive JPEG, also, und dann, dann kann der Browser, ähm, eine sehr, sehr niedrig aufgelöste Variante des Bildes laden.
Jetzt, damit fängt der an, und dann sieht man schon mal was, es ist zwar nur sehr, sehr blurry, und dann geht der Schritt für Schritt, wird das Bild immer schärfer.
Damals halt so in, alle, alle zehn Sekunden wird's eins schärfer, oder teilweise hat man das sogar gesehen, so zeilenweise, von oben nach oben wird's dann schärfer.
Ähm, porno schärfer.
Aber, ähm, das, das heißt, du müsstest dem Browser quasi irgendwann sagen können, ah ja, okay, das ist, das ist genug, weiter brauchst du es nicht streamen.
Genau, das ist genug, weil ich meine, wenn du das Bild, wenn du ein großes Bild hast, das du eh in klein darstellst, dann brauchst du ja auch nicht so viel Detail, weil die Pixel, wenn die nicht zusammenschoben, ganz genau, ganz genau.
Gut, wobei auf dem Mobile hast du dann wieder Retina, da hast du dann eh meistens fast schon wieder eine größere Bildauflösung als auf dem Desktop, aber nee, also der Browser sollte das eigentlich selber entscheiden können, aber ich verstehe schon, dass das dann wieder andere Probleme mit sich bringt, weil ich halt eben dann das Bild vielleicht, also weil ich da nochmal ein Paint machen muss.
Ja, ja, lassen wir es, weg damit, genauso weg damit, Content Security Policy, Folge 48 anhören, da haben wir das ausführlich beschrieben.
Ja, und für alle, die, Moment, da muss ich aber noch kurz drauf eingehen, für alle, die nicht verstehen, was das für ein komischer Folgentitel ist, hört mal, hört mal eine der größten Hits von Fanta 4, dann versteht ihr, worauf es anspielt, und zwar Policy, HTXS und HTTP, XSS, CSS.
Ich wollte es jetzt nur noch mal so betonen, dass man auch verstehen kann, wo es herkommt.
Für die Jüngeren unter euch.
Ja, genau, aber auch für die Älteren, ich glaube, das hat vielleicht nicht jeder, die Anspielung hat vielleicht nicht jeder verstanden.
Ja, so, jetzt haben wir das, alles klar, weiter.
Fetch Priority, da waren wir, da wussten wir irgendwie so gar nichts groß mit anzufangen, genauso wie bei dem Nächsten, was gleich noch danach kommt.
Warum das notwendig sein könnte.
Und das ist so ein bisschen, da wird es halt schon sehr, sehr fein technisch.
Also ich kann mit Fetch Priority, kann ich Elementen, also zum Beispiel Image Elementen, aber soweit ich weiß auch Link Elementen und Source Elementen, also alles, was irgendwie externe Dateien anzieht.
Kann ich mitgeben, mit welcher Priorität der Browser die eben abholen soll.
Dann kann ich sagen High, Low oder Auto, was der Default Modus ist.
Und das ist so ein bisschen, also dazu muss ich ja wirklich auch auf der Seite alles im Griff und alles im Blick haben, um zu entscheiden, was da wichtig ist und was nicht.
Und von der Ladereihenfolge her geht der Browser ja eh so vor, von oben nach unten, wenn er das mag, abpasst.
Und das dann halt ein Bild, das oben ist, dass ich das als erstes brauche im Vergleich zu einem Bild, das irgendwo ganz unten ist, ist ja eigentlich klar.
Also natürlich gibt es da bestimmt irgendwelche Gründe, das zu tun, wahrscheinlich dann eher auch in Web-Apps oder so.
Also High dann vielleicht nicht, aber Low möchtest du vielleicht reinschreiben.
Das vielleicht schon eher, ja.
Dass ich tatsächlich, weil es ist ja so, wenn ich jetzt überall High reinklatsche, ist am Ende auch nichts gewonnen, ja.
Weil er lädt es ja sowieso in dem Augenblick, wo das HTML, also ein Bild wäre ja in dem Fall, wenn er es nicht Loading Lazy hat, ist es ja Render Blocking, wenn ich es richtig weiß.
Das heißt, er lädt es sowieso in dem Augenblick, wo er das Image-Tag findet. Oder liege ich da jetzt falsch? Nö, das ist doch, glaube ich, so.
Ein Bild ist nicht Render Blocking, oder?
Oje, jetzt haben wir uns.
Eieiei, jetzt kommt die Internet-Polizei.
Dann Platzhalter und entsprechend hast du ja eh meistens, ja, kannst das ja PCSS, also wenn du jetzt tausende Bilder hast, die Seite liegt trotzdem, die liegt halt die Bilder erst danach.
Ja, jedenfalls kannst du das halt beeinflussen und ja, vielleicht hat da jemand irgendwie noch in den Kommentaren was, warum das irgendwie ganz, ganz wichtig ist.
Also hier ist jetzt ein Beispiel, wenn ein Bild, also auf der MDN-Seite, wenn ein Bild dynamisch eingefügt wird, also New Image und dann Fetch-Priority High und dann der Source gesetzt wird.
Vielleicht macht das irgendwie, bitte das Vorteile, wenn ich jetzt ganz viele Bilder in die Seite reinsetze, aber auch da wäre ja die Reihenfolge maßgeblich.
Naja, ich weiß es nicht. Also da kann ich tatsächlich bei dem Nächsten, was wir haben, wahrscheinlich, wahrscheinlich, das wird es sein.
Da kann ich tatsächlich bei Blocking gleich Render, was jetzt als nächstes kommt, da kann ich jetzt ein bisschen mehr dazu sagen, weil das war auch sowas, wo wir erstmal gedacht haben, äh, warum, warum wollte, sollte ich absichtlich das, das Rendern blockieren wollen?
Und da bin ich gestoßen auf die, auf ein GitHub-Issue, ähm, bei der Watch, Watch WG, HTML, Repository, ähm, quasi so das, das Issue, das das vorgeschlagen hat, das doch zu machen.
Und da sind so ein paar Use Cases, ähm, vorgestellt worden. Ähm, zum Beispiel könnte ich, also der Hauptgrund, warum man das machen wollen würde, und warum sollte man das überhaupt machen, ja?
Vielleicht sag ich nochmal kurz, äh, vielleicht wie der Code aussieht dazu, damit man auch weiß, um was es da geht. Also in dem Fall ist es ein Script-Tag, das hat das Blocking gleich Render-Attribut und das Async-Attribut und dann noch Source.
Das war das, was uns am meisten verwirrt hat. Genau, also wir haben halt gedacht, naja, wenn ich doch Async hab und dann aber Render-Blocking mache, wieso, äh, dann heb ich das ja quasi, also, es widerspricht sich irgendwie.
Genau, aber pass auf. Also, was man damit erreichen möchte und warum Browser das auch machen, ähm, ist, dass man diesen Flash of Unstyled Contents, diesen Folk, äh, dass man das verhindert, ne?
Also, dass man zuerst irgendwie komischen Text sieht und dann macht's erst plöpp und dann, äh, wird das erst richtig dargestellt.
Und deswegen, und wer das genau wissen will, das war nämlich auch in dem Git, äh, verlinkt, ein, ein GIST, glaub ich, oder zumindest ein, ja, so eine MD-Datei, wo genau drin beschrieben steht, welche Render-Engine
wie vorgeht, um das zu machen. Also, es gibt wohl bei den meisten irgendwie auch so einen internen Timeout, glaub ich, ähm, nachdem das dann passiert, wenn, wenn, äh, ja, wenn, wenn vorher nicht genug Content da ist, der, der das nicht blockiert.
Ähm, und man kann damit eben beeinflussen, dass man sagt, okay, dieses Element, darauf musst du auf jeden Fall warten, bevor du so diesen ersten Paint machst.
Und, äh, als Beispiel war da zum Beispiel angegeben, ich lade ne Webfont per link rel gleich preload und wenn ich diesem Link-Element dann eben das Blocking gleich render mitgebe, dann soll der Browser drauf warten, bis das geladen ist.
Und damit hast du halt diesen, diesen Flash, dass zuerst die Standardschrift oder die Vollbergschrift geladen wird und dann die Webfont, äh, den vermeidest du halt damit.
Und in der Regel sollte das ja hoffentlich so schnell gehen, dass du diese Verzögerung gar nicht groß mitbekommst, ähm, und dass es auffälliger wäre, es würde komisch rumflackern, als wenn du tatsächlich auf die Webfont wartest.
Hm. Okay. Ich glaub, da muss ich noch mal drüber nachdenken.
Das andere, andere Beispiel, genau jetzt mit dem, mit dem Script und dem Async, ähm, da ist es so, wenn ich das kombiniere, dann, dann wird das Parsing nicht blockiert, also der Browser kann schon mal weitermachen, die Seite zu parsen, aber das, das, äh, Rendern wird eben so lange blockiert, bis tatsächlich das Skript geladen ist.
Okay, da geht's um Millisekunden, oder?
Da geht's um Millisekunden, aber das ist wahrscheinlich bei, bei irgendwelchen großen Web-Anwendungen, die, äh, ja, keine Ahnung was alles laden, macht das wahrscheinlich einen Unterschied.
Ich finde, es ist auch, es ist wieder so ein, so ein, so eine technische Feinheit, äh, die man sich jetzt halt erlauben kann zu implementieren in die HTML-Spezifikationen.
Irgendjemand, irgendjemand hat da, hat da, äh, äh, einen Test gemacht, einen Performance-Test und hat festgestellt, ja, das ist ja kacke, das kann man ja gar nicht, wie, man könnte diese, diese vier Millisekunden, die könnte man doch eigentlich nutzen für, und dann könnte das vier Millisekunden schneller sein.
Nein, in dem Fall geht's ja fast sogar gegen Performance, das ist ja tatsächlich eher so eine optische Geschichte, das Rendering zu blocken.
Also was, äh, was da noch genannt war, war zum Beispiel, wenn ich, ähm, wenn ich Skripte über ein Loader-Skript einfüge, dass ich da dem dann das irgendwie mitteile, dass es darauf warten soll, weil anders würde der Browser eventuell gar nicht mitkriegen, äh, dass da was nachgeladen wird, was, was er blockieren soll.
Also, na gut.
Und als letztes mal hier noch mit Request-Animation-Frame, ähm, dass man irgendwie so lange wartet, also, solange der Browser blockiert ist, wird auch kein Request-Animation-Frame ausgeführt.
Und damit kann ich dann quasi so lange, äh, blockieren und warten, dass ich vor dem ersten Paint nochmal irgendwelche Dinge ausführe, die, die, ja, die Darstellung positiv beeinflussen.
Also, es sind echt so Feinheiten und, ähm, ich bin mir nicht sicher, ob ich das jemals brauchen werde.
Es gibt bestimmt jemanden in den Kommentaren, der uns erklärt, warum wir alle Vollidioten sind.
Bestimmt.
Und, äh, wieso das das Allerwichtigste der Welt ist.
Aber haben ist besser als brauchen.
Haben ist besser als brauchen, hat ein weiser Mensch mal gesagt.
Grüße raus an Olli.
Grüße gehen raus an den Bodensee.
Genau.
Ähm, okay, dann kommen wir, wenn ich es richtig sehe, zum Model-Element.
Also tatsächlich ein vorgeschlagenes neues HTML-Element.
Was ich hier jetzt gerade offen habe, ist der Draft Community Group Report vom 5. Juni 2023.
Das dampft noch, äh, dampft noch fast.
Ähm, genau.
Und das, was das tun soll, ist, das ist ein Element tatsächlich für 3D-Content, den ich dann quasi wie ein Bild oder ein Video für, äh, das Image oder das Video-Tag habe oder Audio.
Da kann ich direkt, äh, zumindest ist die Idee, direkt 3D-Content in einer Webseite einbinden, die dann ebenso, genauso wie, äh, Video und Audio auch Controls bekommt.
Zum Beispiel, ähm, zum, zum, ich kann das 3D-Modell drehen in bestimmten Achsen oder vielleicht auch in allen Achsen.
Und das fanden wir ziemlich cool.
Oder vielleicht auch nur programmatisch drehen lassen, wenn ich das möchte.
Oder programmatisch drehen lassen oder wie auch immer.
Also, es soll aber, glaube ich, wenn ich es richtig verstanden habe, die Möglichkeit geben, dass es Standard-Browser-Controls dann einfach schon mitbringt.
Ähm, finde ich eine sehr coole Sache.
Und, ähm, ich habe das gesehen im Stream und habe gesagt, ey, das hat 100% Apple vorgeschlagen.
Ähm, weil nämlich jetzt Apple mit den, mit den letzten, äh, größeren Betriebssystem-Updates in seine ganzen, äh, früher iWork, äh, keine Ahnung, wie es jetzt heißt, in seine ganze Office, äh, Suite, nenne ich das jetzt mal, also irgendwie, ähm,
Keynote und Pages und Numbers, also die, die, äh, Pendants zu Word, äh, Excel und PowerPoint, ähm, eben diese Funktionalität hinzugefügt hat, dass man 3D-Modelle in bestimmten Formaten da einfügen kann.
Und dann habe ich gesagt, ja, das kann ja jetzt kein Zufall sein, dass das jetzt irgendwie auftaucht.
Und, äh, gerade hat Apple das irgendwie eingebaut.
Und siehe da, äh, der Editor von diesem Draft Community Group Report ist tatsächlich jemand von Apple.
Also, ich hatte da tatsächlich recht, habe ich, äh, richtig geschossen ins Dunkle.
Ähm, genau, weil nämlich, und da kam, glaube ich, auch drin vor, was für ein, äh, also gibt es noch einige Attribute, die da, die da drauf kommen, äh, können und so weiter.
Und, ähm, auch die Formate, ähm, jetzt habe ich wieder vergessen, wie dieses Format heißt.
Ich muss jetzt gerade mal gucken, ob ich es nochmal, ob ich es nochmal sehen kann.
Weil dieses Format, was Apple jetzt hier vorschlägt, warte mal, USZ, USA, USA.
Äh, Format, es war irgendwas mit US, ach, ich finde es gerade nicht.
Wie heißt es denn?
So, nochmal, 3D-Format, ich bin hier, hier googelt der Chef noch selbst.
USZD?
Äh, USDZ.
USDZ, oder?
USDZ, USDZ klingt gut.
O?
Nee, U, USDZ.
U, USDZ, ja.
Ja, genau, das ist es.
Also, zum Beispiel, das, ähm, soll dann nativ einfach, äh, in den Browser eingefügt werden können.
Das heißt, das verlinkst du in dem, äh, in dem Model-Element einfach mit Source, genau wie du ein Bild verlinken würdest.
Und dann hast du es einfach in der Seite drin, so die Idee.
Ähm, so, jetzt gucken wir nochmal.
Universal Scene Description.
Mhm.
Ähm, ist das Format, was da dahinter steckt.
Und das Z ist bestimmt irgendwie so ein GZ, Z, oder sowas.
Ach so, wahrscheinlich, ja, USD und USDZ, ja.
Genau, also tatsächlich das Paket-Datei-Format, da ist das dann, das ist dann eher ein gezipptes, äh, USD.
Warum man da nicht mittlerweile schon Brodli dann auch einsetzt, was ja besser ist als GZip.
USD Brodli.
USD-B.
USD-B, genau.
Wird bestimmt noch jemand auf die Idee kommen, aber das ist, glaube ich, noch sehr, sehr am Anfang.
Aber die Idee finde ich, ich verstehe gar nicht, wieso es das nicht schon längst gibt.
Das dürfte auch meinem Bruder freuen, wenn dann endlich 3D direkt ins Werk.
Es liegt total auf der Hand, dass man sowas haben will, weil bislang war man, glaube ich, bei sowas darauf angewiesen, dass man ein Canvas verwendet und darin irgendwelche Dinge macht mit JavaScript.
Wenn ich aber einfach tatsächlich nur ein 3D-Modell anzeigen möchte, dass ich vielleicht programmatisch, das ist ja so typisch Apple-Produkt-Präsentation und deswegen passt es auch wieder, dass ich programmatisch irgendwie drehen oder zoomen oder sowas möchte.
Genau, du scrollst und dann dreht sich das einfach mit.
Genau, das bleibt stehen beim Scrollen, aber es dreht sich dann oder es zoomt oder sonst irgendwas.
Vielleicht, weißt du gar nicht, können so 3D-Modelle auch unterschiedliche Zustände innen drin annehmen?
Also sowas wie so ein Explosions-Dings?
Gibt's das?
Es kommt drauf an, ob das Format das unterstützt. Also wenn du in dem Format quasi irgendwie Keyframes anlegen kannst und die ansteuern kannst, dann wird das schon möglich.
Ja, ja, für so Apple-Produkte teilweise noch. Genau. Ja, keine Ahnung. Ich glaube, es sollen auch verschiedene Formate gehen.
Ja, also je nachdem, wie das Format konstruiert ist, kannst du ja wahrscheinlich einfach statt eine Datei da fixen anzugeben, das auch über einen Blob machen, den du halt zur Laufzeit quasi konstruierst.
Also du hast dann dieses Format, wenn es jetzt aufgebaut ist wie XML oder sowas, ja. Weiß ich nicht, müsst du halt mal reingucken. Dann könntest du das ja theoretisch dynamisch verändern, ja. Und sagen, hier, okay, schieb den Bauteil noch nach rechts und lass den rausfahren und was weiß ich.
Und das könntest du natürlich dann per Blob-URL dann irgendwie einbauen.
Okay, gut, das würde natürlich auch gehen. Ja, keine Ahnung, da können ja die 3D-Experten sich mal melden und Bescheid sagen, ob das gehen würde. Aber ich finde, das ist schon interessant. Ich habe hinterher gedacht, wieso gibt es das nicht schon längst?
Das ist sowas, wo ich sage, da könnte das Web nochmal deutlich profitieren, weil das ist auch wieder sowas, wo man eine Menge JavaScript loswerden könnte, wenn man einfach nativ 3D-Objekte im Web einbinden könnte.
Ja, also das finde ich, wie ihr seht, ich bin potenziell Fan davon, aber wir sind, glaube ich, noch eine Weile davon weg. Ich muss gerade mal gucken, ob es das bei Can I Use schon gibt.
Das Model-Element. Ich glaube nicht. Das ist noch zu frisch. Nein, das gibt es noch nicht. Ja, wahrscheinlich ist es auch noch nirgends unterstützt, wenn, dann wahrscheinlich irgendwie ein Safari-Tech-Preview, was weiß ich was.
Genau. Und ebenso, was sich auf interaktive Inhalte bezieht, kommt das Nächste, was wir beide, glaube ich, auch nicht kannten, wenn ich es richtig erinnere.
Genau, Controls-List.
Das Controls-List-Attribut. Ich glaube, es ist auch noch nicht so arg verbreitet. Also in Safari und in Firefox gibt es das noch nicht. Und was das macht, ist, ich kann für ein Video, ich glaube aber auch für Audio, weiß ich gar nicht genau, für ein Video auf jeden Fall kann ich angeben, welche Controls denn ich im Standard-Video-Player sehen möchte.
Also sowas wie, ich möchte nicht, dass die Lautstärke verstellt werden kann, dann lasse ich das weg. Oder ich sage, ich kann es explizit angeben, welche Liste ich haben will.
So, muss ich mal gerade noch gucken.
Also No-Download kann ich zum Beispiel setzen, dass dieses Standardmäßige, man kann das runterladen bei Audiodateien oder Videos, dass das nicht angezeigt wird.
Oder No-Fullscreen bei Videos und No-Remote-Playback. Das ist wahrscheinlich dann irgendwie, dass ich es casten kann auf andere Geräte, würde ich mir so vorstellen.
Jetzt ist leider nicht, nicht genau dabei.
Ich hatte auch wieder so noch eine Liste.
So ein kleines Ding.
Man merkt halt, dass es wirklich so, das große Ganze ist gesetzt und jetzt kommen so Kleinigkeiten, die aber halt doch nützlich sein können.
Ich finde es ganz schön.
Ich glaube, Aquimär gibt es dazu auch nicht zu sagen.
Es wandert immer mehr, was ich auch vorhin schon gesagt habe, es wandert immer mehr in die etablierten Standards oder in die stabilen Standards und weg von, man muss alles selbst klöppeln.
Und das finde ich immer gut.
Dann gibt es hier noch ein paar Sachen zusammengefasst unter Internationalization Features.
Also das ist die Internationalization API, also Intel Punkt.
Und dann gibt es da ganz viele verschiedene Sachen.
Und die haben wir auch schon in zwei Folgen mal besprochen.
Jeweils verschiedene Aspekte davon, Folge 4 sogar schon.
Und Folge 52, die verlinken wir in den Shownotes.
Da sind so Sachen wie übersetz mir Monatsnamen und so weiter automatisch.
Das habe ich zum Beispiel auch bei diesem Best Day Finder eingesetzt, dass ich da nicht irgendwie Übersetzungs-Strings machen muss, sondern das bringt der Browser schon mit.
Oder irgendwelche Listen zusammensetzen und dabei das Wort und automatisch übersetzen und so weiter.
So Geschichten sind das.
Und ja, da einfach mal reinhören.
Tja, das ist eine reine Crosslink-Folge hier heute.
Ihr merkt es schon.
Nein, nein, ein bisschen Content ist ja schon dabei.
Außer der nächste große Abschnitt.
Ja, das nächste große eigene Themenfeld war Web Components.
Aber dem möchten wir mal eine komplett eigene Folge widmen.
Und zwar am Ende unserer ja immer noch laufenden HTML von A bis ZZ-Serie.
Und genau dieses ZZ steht nämlich dann für die Web Components am Schluss.
Ganz genau.
Jetzt haben wir quasi auf eine Folge verlinkt, die es noch nicht gibt.
Die es noch nicht gibt.
Wir machen es uns heute sehr leicht.
Genau.
Dann würde nämlich schon der Themenblock Accessibility kommen.
Da sind ein paar Sachen drin.
Wir haben uns auch nur zwei rausgepickt.
Oder ich habe zwei rausgepickt.
Die ich interessant finde oder die für mich auch tatsächlich neu waren.
Und zwar das erste ist das Focus Group Attribut.
Das ist, und ich glaube, das haben wir im Stream gar nicht so richtig besprochen.
Da sind wir relativ schnell drüber weg.
Ich habe mir jetzt nochmal angeguckt, was das denn eigentlich wirklich, wofür es das eigentlich wirklich ist.
Und zwar ist das für, wenn ich, wie soll ich sagen, ich habe interaktive Elemente, die ich vielleicht auch per Tastatur steuerbar haben möchte.
Und ich möchte, dass die innerhalb einer bestimmten Gruppe auch mit den Pfeiltasten steuerbar sind.
Ein Beispiel, wo das jetzt schon geht mit nativen Elementen, wäre zum Beispiel ein Radio Button.
Wenn ich Radio Buttons miteinander gruppiere, dann kann ich mit den Pfeiltasten innerhalb der Radio Group hin und her schalten, aber ich kann da nicht raus.
Genau. Oder in einem Select, wenn ich ein Select aufklicke, kann ich mit den Pfeiltasten innerhalb des Selects navigieren, aber ich kann mit den Pfeiltasten nicht raus.
Genau für solche Bereiche, wo ich mit den Pfeiltasten was machen kann, innerhalb von einer kleinen Gruppe, aber nicht, aber wenn ich mit Tab reingehe, dann komme ich ja in das Select und dann aber auch wieder raus.
Das heißt, wenn ich so ein Element habe, wo ich innerhalb was machen können sollte und das selbst bauen möchte, so habe ich das zumindest verstanden, das Focus Group Attribut.
Dann würde ich das dem umgebenden Element geben und sagen, wenn da jetzt irgendwas mit Pfeiltasten passiert, dann bleibt bitte da innen drin.
So, dann passieren die einzelnen Elemente da innen drin.
Da gibt es dann noch, genau, Artikel zu, auch ein neues Wort, was ich da gelernt habe, oder eine neue Formulierung, Roving Tab Index, wo genau das erklärt wird.
Also, das ist von Stefan Judis ein Artikel, den werden wir auch dann in Shownotes verlinken, wo genau dieses Konzept erklärt wird, dass man sich innerhalb eines Bereiches bewegt mit den Pfeiltasten, aber wenn man tappt, dann kommt man auch da wieder raus.
Genau, vielleicht mal da angucken. Finde ich eine interessante Geschichte. Ich bin der Meinung, man sollte nur in Notfällen so interaktive Elemente selbst basteln.
Man sollte möglichst sich auf die nativen Elemente beschränken und die verwenden, so wie sie gedacht sind.
Es kann aber natürlich Anwendungsfälle geben, wo das wichtig ist. Also, es gibt einfach noch nicht alles, was man an Interaktivitäts-Widgets oder so haben will in Nativ.
Keine Ahnung, ich möchte jetzt in einer interaktiven Tabelle irgendwie was editieren können oder so. Fällt mir jetzt gerade so als Beispiel ein.
Oder in einem File-Tree. Wie bilde ich denn den ab? Keine Ahnung, wenn ich jetzt irgendwie sowas Explorer-haftes im Browser habe.
Also kann ich mir sehr gut vorstellen, dass es dafür gute Anwendungsfälle gibt und je mehr irgendwie da in Standards wandert, habe ich jetzt heute schon ein paar Mal gesagt.
In dem Fall ist es ja ein echtes HTML-Attribut. Umso besser. Also cool, dass es das gibt. Ich weiß nicht, ich hoffe, dass ich es nie brauchen werde, aber ich werde es im Hinterkopf behalten.
Wenn ich das richtig sehe, dann ist das in Chrome drin, aber hinter einem Flag. Aber es gibt es noch nicht mal auf Kenner-Use. Also das ist noch sehr dev-trial-ig.
Genau. Ja, es ist noch sehr früh und ja. Gut, dann kommen wir aber noch zu einem weiteren, was ich auf unserer Podcast-Seite schon eingebaut habe, nämlich es gibt noch ein weiteres neues HTML-Element, was vorgeschlagen wurde.
Nämlich das Search-Element, Generic Search-Element. Das ist dafür gedacht, dass es um alles gelegt wird als Container, was zum Auslösen einer Suche verwendet wird.
Also nicht Suchergebnisse, sondern das, was ich, da, wo ich die Suche abfeuere. Also es wäre ein klassischer Container für, ich habe ein Input-Feld, vielleicht Input-Type-Search und dann noch ein Submit zum Abschicken zum Beispiel.
Dass quasi das semantisch, einen echten semantischen Ort bekommt auf der Seite. Das ist dann theoretisch ein …
Genau, das ist wirklich nur rein semantisch, ne? Das ist rein semantisch, soweit ich es verstehe. Es gibt auch schon die Role-Search, soweit ich weiß, gab es die schon die ganze Zeit.
Aber es ist ja auch immer cool, wenn man ein eigenes Element hat für sowas, dass man eben sich nicht diese ganzen Role-Attribute merken muss, was es da alles gibt, sondern dass man sagen kann, hey, ich nehme einfach das Element.
Das Problem, was es momentan noch gibt, ist, das wird in der Semantik von den Browsern derzeit, soweit ich es verstanden habe, noch nicht unterstützt.
Das heißt, wenn man es jetzt momentan einsetzen möchte, sodass es auch wirklich einen Mehrwert bringt, dann sollte man die Role-Search trotzdem noch mit draufsetzen.
Das ist ein bisschen hässlich, Search, Role-Search.
Aber sicher ist sicher.
Aber sicher ist sicher und für die Zukunft, irgendwann kann man dann das Role-Search rausnehmen und dann hat man das ganz simples, schönes, neues, kleines HTML-Element,
was ich bei uns einfach schon mal eingebaut habe, war ja auch ganz easy, kann auch ziemlich sicher nichts kaputt gehen.
Genau, jetzt habe ich natürlich noch versprochen, dass ich den letzten Blog noch mache, gell?
Ja, genau.
Also, sagen wir mal kurz, was es ist.
Also, es geht um Native-Like-Web-Apps, also sprich PWAs, wie man sie auch nennt.
Und ich hatte eigentlich gesagt, ja, komm, lass uns das auch in was Eigenes packen und hatte so die Idee, wir könnten vielleicht mal eine zusammenbauen im Stream und dann im Podcast drüber sprechen.
Also, dass wir so alle Features, die es gibt, da mal einfach benutzen.
Muss gar nicht groß irgendwie sinnvoll sein, aber du kamst auch gleich schon mit Ideen, wo man tatsächlich was Sinnvolles auch von dir, Tools umsetzen könnte.
Also, können wir gerne mal schauen, ob wir das machen in Zukunft.
Aber du meintest dann, Anna, komm, lass uns, ich spreche nochmal an, was das da alles ist.
Ja, genau.
Ich reibe da jetzt einmal schnell drüber.
Da gehen wir jetzt nicht groß in die Tiefe.
Wir werden auch ein paar Links noch in die Shownotes packen zu den einzelnen Sachen, aber da werde ich jetzt wirklich nicht extrem viel dazu sagen.
Also, wie gesagt, der Themenblock ist Native-Like-Web-Apps und dann gibt es zum Beispiel die File-System-Access-API, die macht genau das oder soll genau das machen, wie sie heißt.
Das heißt nämlich, man hat Zugriff auf das File-System. Das heißt, ich kann auch theoretisch nicht nur Dateien laden, sondern auch Dateien abspeichern.
Aber soweit ich weiß, ist das doch quasi gesandboxed. Also, ich habe dann nur auf einen bestimmten Bereich, der für diese App ist, Zugriff, oder?
Das ist nicht irgendwie, ich kann alles …
Eigentlich so sein, ja. Also, ich bin mir relativ sicher, dass die Chrome-Dev-Tools das zum Beispiel schon verwenden, weil da kann man ja zum Beispiel aufs File-System Dateien ab …
Gut, das könnte natürlich auch eine eigene API von Chrome sein, aber da kann ich ja zum Beispiel auch Files, irgendwie veränderte CSS-Files irgendwie auf dem File-System ablegen.
Ob ich das quasi theoretisch das ganze File-System freigeben kann, weiß ich tatsächlich nicht. Aber wir wollten auch nicht so viel drüber sprechen.
Ja, okay, Entschuldigung, ist mir gerade nur so gekommen. Ja, ich bin ruhig.
Ja, ist gut, wir können ja, ne? Ich weiß es nicht. Wie gesagt, ich ratter hier nur runter und sage, was es generell tut.
Okay.
Ich habe die alle noch nicht ausprobiert.
Das machen wir einfach mal.
Ich glaube, genau, das werden wir demnächst mal tun im Stream. Dann gibt es die Badging-API.
Mit der kann ich zum Beispiel jetzt im Doc vom Mac ein Batch an eine Web-App dransetzen.
Also sowas wie, ich schreibe da eine kleine 1, 2, 3, 5 rein.
Sowas soll dann da gehen.
Dann gibt es die Web-Share-API.
Die gibt es eigentlich auch schon eine ganze Weile.
Die zapft auf mobilen Geräten den Standard-Share-Dialog des Betriebssystems an.
Das heißt, ihr kennt wahrscheinlich Share-Funktionen von eurem Android-Gerät oder von eurem iPhone.
Das heißt, ihr wollt was teilen und dann kriegt man schon irgendwie seine WhatsApp-Kontakte oder sowas vorgeschlagen, mit denen man zuletzt geschrieben hat.
Aber, keine Anwendung, nicht nur mobil, sondern zum Beispiel unter Windows sehe ich auch hier im Desktop-Browser, also in Edge zumindest.
Gibt es das mittlerweile?
Das ist keine eigene Edge-Funktion, sondern ist wirklich auch in Chrome.
Da kriege ich halt auch so ein Share-Overlay, das Windows irgendwie mitbringt.
Das kenne ich gar nicht.
Wo ich das an Kontakte teilen kann oder in bestimmte Apps.
Also so wie man es auch von Mobile kennt.
Dann gibt es das mittlerweile auch für andere.
Man kann da quasi hin und sagen, hey, wo willst du das hinsharen?
Und dann kriegst du den System-Dialog, was eine coole Sache ist.
Wie gesagt, der Bereich ist ja Native-Like-Web-Apps, also es gibt ja immer mehr APIs, die einen in eine Web-App so tief ins System integrieren lassen, dass man alles Mögliche tun kann, ohne irgendwelche komischen Rapper, die es früher gebraucht hat.
Sowas wie Cordoba oder sowas gab es ja früher oder ich weiß gar nicht mehr, wie die alle hießen, die Dinger.
Dann gibt es mittlerweile ja Electron ist ja eigentlich so the way to go für sowas.
Also wenn man eine Web-App haben will, die aber mit dem System redet.
So, dann gibt es die File-Handling-RP.
Die lässt einen tatsächlich eine Web-App und dazu, ich glaube, wenn ich es richtig verstanden habe, eine installierte Web-App.
Das geht nicht einfach eine Webseite, sondern eine installierte Web-App.
Also etwas, was ich als PWA richtig installiert habe, über Chrome zum Beispiel geht es, dass man dann quasi eine echte App hat.
Da wird auch irgendwo was abgelegt.
Keine Ahnung, Security gibt es da irgendwie auch noch.
Kann dann File-Typen entgegennehmen und sagen, ich bin jetzt die Standard-App für einen bestimmten File-Typ.
Das ist cool.
Mir ist jetzt zum Beispiel eingefallen, es gibt ja jetzt, und das würde ich tatsächlich gerne mal ausprobieren, es gibt ja jetzt ein Online-Photoshop.
Das könnte dann theoretisch mit der File-Handling-API sagen, PSD-Dateien bitte zu mir.
Und wenn ich im Betriebssystem eine PSD-Datei öffne, könnte die standardmäßig in einer Web-App geöffnet werden.
Ist eigentlich klar, dass das dann nur mit installierten Apps geht.
Ich fände es ein bisschen wild, wenn das Innen-Browser-Tab gehen könnte, der dann nur noch zu öffnen wäre.
Deswegen finde ich, das kann ich irgendwie verstehen, dass das nur für installierte ist.
Genau.
So, und dann gibt es noch als letztes die Window-Controls-Overlay-RP.
Wo ich mir noch nicht so sicher bin, wie ich das finde.
Aber die ist dafür da, da muss man sich eigentlich, und das habe ich jetzt auch gerade nochmal aufgemacht, den MDN-Bereich dazu anschauen, um zu verstehen, was damit gemeint ist.
Also es ist so, bei einer App auf einem Betriebssystem gibt es ja eine Titelleiste, nenne ich die jetzt mal.
Wo auf Windows, glaube ich, ganz gerne der App, ich habe es schon so lange nicht mehr gesehen, der Name der App drin steht.
Und dann hast du irgendwo noch so Controls für Fullscreen und Minimieren und Schließen.
Und irgendwo gibt es bei PWAs, gibt es ja noch so ein PWA-Button.
Also irgendwie so was, womit ich dann doch nochmal irgendwie zu irgendwelchen Browsersachen zurückkommen kann oder Infos über diese Web-App kriegen kann.
Und auf dem Mac jetzt zum Beispiel, davon sind die Screenshots jetzt hier, wären diese Window-Control-Buttons links und der PWA-Button rechts.
Und unter Windows wird es wahrscheinlich irgendwie anders aufgeteilt sein.
Vielleicht sind die dann nebeneinander oder so.
Jetzt gibt es einen Bereich dazwischen und den kann ich dann theoretisch für meine App nutzen mit der Window-Controls-Overlay-RP.
Weil standardmäßig würde der Application-Name da oben stehen an der Stelle, wenn ich gar nichts mache.
Jetzt gibt es mit dieser API dann aber die Möglichkeit, dass man da auch Content der App darstellen kann, wenn man das möchte.
Das heißt, der App-Content geht einfach bis ganz oben und diese System-Buttons sind dann da drüber gelegt.
Die sind dann links und rechts in dem Fall und zwischendrin kann ich auch noch App-Content reinmachen.
Was weiß ich, eine Suchzeile zum Beispiel, habe ich überlegt, das wäre irgendwie, wenn man wirklich Platz sparen will, könnte man zum Beispiel eine Suchzeile da reinmachen.
Genau, aber auch wie gesagt, das habe ich auch, das ist auch Experimental und Browser-Compatibility ist auch eher so, nur irgendwelche Chrome-Edge, aber nur auf dem Desktop und so.
Klar, weil Mobile, glaube ich, hat man ja solche Leisten nicht.
Ja, keine Ahnung, nicht ausprobiert, aber das ist ja Vollständigkeit halber nochmal erwähnt, weil ich das schon interessant finde, aber bisher noch nie sowas gebaut habe.
So, und dann haben wir es tatsächlich relativ schnell durchgekommen.
Wir waren auch schon schnell unterwegs, also ich meine im Sinne von, ich glaube, wir haben großen Wortausstoß gehabt hier.
Und einiges auch ausgelassen.
Das wäre auch noch so was, was ich gerne mal, was eine AI gerne mal Statistik machen könnte, die Words Per Second oder Words Per Minute, die wäre so, und unterscheidet sich das von dir zu mir, wer redet schneller und so.
Ja, wäre interessant.
Erstmal brauchen wir Transkripte, das wäre schon mal ein Anfang.
Erstmal brauchen wir Transkripte, die mit SprecherInnen-Erkennung.
Richtig, ja.
Das wäre, das wäre was.
Aber ich meine, generell Transkript wäre nicht schwer, das geht ja mit Whisper ganz gut oder mit auf dem Mac, mit Ico, was ja Whisper verwendet.
Aber ich glaube, SprecherInnen-Erkennung wäre auch noch schon richtig gut und derzeit haben wir noch nicht so viel.
Und das gibt es ja auch schon, aber es darf nichts kosten.
Das ist ja ein bisschen geizig, ne?
Ja, wir sind, ja.
Ich hätte gerne was Open-Sourciges, was das macht.
Ich glaube, du musst einfach, vielleicht gibt es mittlerweile auch was.
Also das letzte Mal, dass ich da in dem Bereich recherchiert habe, ist auch schon wieder ein halbes Jahr her.
Also in der Zeit, momentan, da verändert sich ja die halbe Welt innerhalb von einem halben Jahr.
Ja, absolut.
Also ich glaube, das gibt es auf jeden Fall in diesem Podcast-Tool, das habe ich schon wieder vergessen, wie es heißt, für die Leute, die schlechte Mikrofone haben.
Ja, ich weiß genau, was du meinst, aber ich weiß auch den Namen nicht mehr. Wir haben es sogar mal so ein bisschen ausprobiert auch schon mal, ne?
Es ist in den Podlove-Plugins irgendwie mit drin, ich habe es vergessen.
Es gibt so ein Tool, das Audio-Optimierung macht und ich habe vergessen, wie es heißt.
Auphonic, nee, doch.
Was ist Auphonic?
Ja, Auphonic.
Es ist, glaube ich, UAI Sound Engineer for Podcast.
Oh Gott, die haben ja eine krasse neue Seite.
Genau, und die haben das schon eine Weile mit drin und die haben auch eine API und so, da kannst du einfach deinen Pfeil hinwerfen.
Ja, egal, da habe ich das auf jeden Fall schon mal gesehen, das geht schon eine ganze Weile.
Die binden dann wiederum so Dritt-Services an, für die man dann Geld bezahlt.
Ich habe das jetzt auch ein bisschen böse gesagt, das mit dem Auphonic ist für Leute, die keine guten Mikrofone haben.
Wir haben sowas nicht, wir haben nur den, vielleicht ganz schnell nochmal gesagt, wir haben nur den Ultraschall, die Ultraschall-Plugins am Start, was da halt so fertig mit drin ist.
Und ich glaube, wir haben das irgendwann einmal eingestellt und seitdem benutzen wir das so und wir lassen da sonst nichts drüber laufen.
Das passt.
Und dann ist es so, wie es ist und ich hoffe, dass es gut genug ist.
Weil ich höre mir die eigenen Podcasts nicht so viel an.
Du hörst es mir an, du weißt es besser.
Beim Kapitel-Magen-Sätzen, ja.
Da höre ich immer drüber.
Ich glaube, das passt.
Gut.
Okay, dann sind wir tatsächlich mit dem Thema fertig und es kommt jetzt noch.
Das Geil-Teil.
Geil-Teil.
Und korrekte Grammatik mit Chilis.
Yes, das haben wir auch nicht so oft.
Das Geil-Teil heute ist etwas, was uns im Stream, in unserem ersten Stream nach der Sommerpause, glaube ich mal, empfohlen wurde.
Da haben wir uns das angeguckt und da habe ich lange drauf rumgeklickt und ich habe mich jetzt nochmal daran erinnert und dachte so, da war doch sowas.
Das habe ich irgendwie die ganze Zeit angeguckt und hin und her gedreht und das war irgendwie cool.
Da dachte ich mir, ja, das stimmt, das ist schon, das ist geil teilwürdig.
Und zwar heißt die Seite satellite-map.space und was man da sieht, man sieht einen Erdball, den man drehen kann und dann je nachdem, was man auswählt, standardmäßig ist Starlink ausgewählt, sieht man die aktuellen, oder eigentlich schon live in Echtzeit, die Satellitenpositionen von, in dem Fall den Starlink-Satelliten.
Also Starlink ist ja so ein Satellitennetzwerk, das einem überall Internet hinbringen soll auf der Erde.
Es gibt aber auch noch OneWeb, wo ich tatsächlich nicht genau weiß, ob das irgendwie schon live ist oder es ist wahrscheinlich was ähnliches.
Das sind deutlich weniger Satelliten und wir haben auch damals schon, also Starlink ist quasi das einmal komplett um die Erde rum, es sind Tausende, extrem viele.
Und wenn man näher ranzoomt, dann sieht man auch, dass die sich wirklich bewegen.
Also das sind so Punkte um den Erdball rum, die sich bewegen.
Also so im Nordpolar- und Südpolarregion wird es ein bisschen dünner und drumherum ist extrem viel.
Und die sind relativ nah an der Erde auch dran.
Die OneWeb-Satelliten, die sehen aus, als ob sie ein bisschen weiter weg sind von der Erde und das ist so ein bisschen koordinierter, mehr so Linien von Nord nach Süd.
Und die gehen tatsächlich aber auch bis zu Nord- und Südpol.
Also irgendwie haben die da eine andere Strategie verfolgt.
Und dann gibt es auch noch zum Vergleich GPS.
Und dann merkt man mal, oh GPS ist viel weiter draußen als die anderen.
Aber was lustig ist, wenn du bei GPS mal ein bisschen näher ranzoomst, dann siehst du ganz viele Satelliten, die anscheinend näher dran sind an der Erde.
Aber die sind alle bezeichnet, also überall steht ja normalerweise, wie viele Kilometer von der Erde die entfernt sind.
Da steht überall Nun-Kum, also Not-A-Number-Kilometer.
Also irgendwas ist da, ist da bei manchen kaputt, die senden irgendwie nichts, sind abgestürzt oder so.
Ja, aber das ist auf jeden Fall, das ist sehr, sehr, sehr geil, coole Web-App.
Und ein schönes Beispiel, was man im Web so alles an schönen Visualisierungen machen kann.
Und hat mich damals sehr gefangen, ich fange jetzt auch schon wieder an, da wild drauf rumzuklicken und rumzuzoomen und zu gucken.
Und welcher ist denn jetzt gerade hier? Und wie heißt der denn? Und die zoomen da ran.
Ich sehe halt, bei Elon Musk ist alles so ein bisschen wild und durcheinander.
Und bei OneWeb ist es irgendwie ein bisschen strukturierter.
Aber bei Starlink kann man übrigens auch noch sehen, ist auch noch eingezeichnet in so Wabenform.
Wo das derzeit freigeschaltet ist, glaube ich, das sind die Bereiche.
Weil man sieht irgendwie so, Westeuropa sind da auch so grüne Waben drüber.
Dann die USA und dann noch so ein bisschen, ich würde sagen, Chile oder so.
Ganz Süd, der südlichste Punkt von Südamerika.
Und dann wird es auch schon dünn.
Dann ist irgendwie noch was im Pazifik.
Also Hawaii.
Hawaii ist nochmal.
Ja, genau.
Übrigens, wenn jemand in die Kommentare jetzt direkt ohne zu recherchieren, ist natürlich schwer zu überprüfen, schreiben kann, woher das Zitat Hawaii kommt, dann, keine Ahnung, dann gebe ich euch beim nächsten HörerInnen-Treffen.
Ich rate einfach mal Helge Schneider.
Weil wenn du so komisch Sprüche bringst, ist oft Helge Schneider.
Nein, das ist so exotisch, das ist so exotisch, dass ich behaupte, das kennt fast niemand.
Okay.
Ich bin mal gespannt.
Ich kann dir im Anschluss sagen, wo es herkommt, aber das kann ich jetzt nicht mehr.
Okay.
Das verraten wir jetzt nicht.
Ja, cool.
Ey, dann haben wir schon wieder eine Folge im Kasten.
Mensch.
Was heißt schon wieder?
Mal wieder.
Endlich.
Dann, bevor wir jetzt einfach ins Blaue reden, kommt natürlich jetzt noch der Jingle.
Das Ende.
Und wir sind noch unter zwei Stunden.
Wir sind noch unter zwei Stunden.
Ich hatte echt schon Befürchtungen, dass wir das wieder in Grund und Boden regeln.
Das machen wir nicht, aber wir fordern euch jetzt noch mal auf, schickt uns doch mal eine schöne Bewertung bei Apple Podcasts oder anderen Podcastportalen und sagt uns auch gerne Bescheid, wenn ihr bewertet habt, dass wir die auch sehen können, weil nicht, also wenn es nicht Apple Podcasts ist, dann sagt uns mal Bescheid und schickt uns einen Link oder so, weil wir auch nicht alle Podcastportale monitoren die ganze Zeit.
Folgt uns auf Twitch, auf Mastodon, ihr könnt uns gerne ein Twitch Prime Abo geben, wenn ihr Amazon Prime habt, dann könnt ihr uns quasi ein bisschen geldmäßig unterstützen, ohne dass euch das was kostet, indem ihr euer Amazon Konto mit Twitch verbindet und euch uns dann auf Twitch euer Twitch Prime Abo gebt.
Das muss man leider jeden Monat aufs Neue machen, aber das kostet euch gar nichts und uns bringt es ein paar Euros.
Das, ich glaube so zwei Euro pro Abo oder sowas oder 1,50 oder so.
Bis wir was packen.
Euch kostet es ein paar Klicks und wir kriegen ein bisschen Geld und können hier diesen Podcast und auch den Stream weiter aufrechterhalten und mit neuer Hardware versorgen.
Ihr könnt auch über unseren Amazon Affiliate Link einkaufen.
Ihr dürft natürlich auch gern was spenden oder unser Merch kaufen.
Übrigens, es wurde tatsächlich ja jetzt was gekauft.
Ach ja, wo, hier Front, Front und End.
Genau, vielleicht noch das noch kurz erzählt.
Der Shep hatte einen Post rausgehauen.
Er war auf der Smashing Conf in Holland, irgendwo, Antwerpen, glaube ich, und hat ein Foto von seinem T-Shirt gepostet und hat gemeint, das ist das meist fotografierte T-Shirt der Konferenz.
Und das war das T-Shirt, das er von uns bekommen hat, Front und End, WWS TV T-Shirt.
Das hat uns sehr gefreut und falls ihr auch so eins haben möchtet, dann gerne mal bei unserem Merch reinschauen.
Derzeit findet ihr den Merch auf unserer Unterstützenseite, die kommt jetzt auch nochmal in die Shownotes.
Da findet ihr auch alle weiteren Links zu allen Möglichkeiten, uns zu unterstützen.
Alles, was ich jetzt hier gesagt habe, gibt es da auch mit Link.
Genau, ihr könnt euch uns auch ein ganz reguläres Twitch-Abo schenken oder was von unseren Wunschlisten besorgen.
Das gibt es auch noch.
Wir reden da so selten drüber.
Ja, deswegen habe ich mir gedacht, könnte man, ja genau, es gibt viele Möglichkeiten.
Es gibt welche, wo ihr uns finanziell unterstützen könnt, direkt oder auch, wie gesagt, indirekt gerade mit Twitch Prime.
Oder auch einfach nur eine Bewertung ist auch schon was, was uns hilft.
Von daher würden wir uns da extrem drüber freuen, wenn wir da ein bisschen Unterstützung von euch bekommen.
Jo, dann sagen wir, oh, funktioniert nicht.
Ich wollte gerade so ein Soundboard-Ding einspielen.
Funktioniert nicht.
Dankeschön und bis bald wäre jetzt gekommen.
Warte.
Dann sage ich es einfach selbst.
So, warte.
Dankeschön.
Und?
Warte.
Und?
Bis bald.
Vielen Dank, dass ihr wieder zugehört habt.
Und bis zum nächsten Mal.
Es war mal wieder.
Macht's gut, bis dann.
Ciao.