HTML VON A BIS Z-Z X: SVG & Math

Wo wir sind ist vorne, Folge 74. Heute geht's um Mathematik, Mathematik, überall Mathematik und SVG. Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Glanz und JavaScript-Jongleurin Sarah Groß. Hallihallo. Hallo Moritz. Hallöchen. So. Weiter geht's. Ja, wir sind am Start. Ja, laut, ganz nach Plan, wie wir es uns vorgenommen hatten. Sehr schön. Ja, ihr kennt nur unseren Plan nicht, aber unser Plan ist …

Stimmt. Ich war zwischendrin halt zwei Wochen im Urlaub, da war nix mit Podcast, aber wir haben uns den Freitag jetzt hier, also den Freitagsauf, notiert und wir sind auch tatsächlich am Aufnehmen, ohne dass irgendjemand was verschieben musste. Finde ich gut. Wahnsinn. Wir haben es bald geschafft, wir Schluris. Ja, ich habe heute gar nix zu trinken, ich habe sogar vergessen, mir noch irgendwie ein Wasser hinzustellen, also ich werde heute vertrocknen im Laufe der Sendung.

Okay, gut, das ist ein guter Plan, dafür gibt es bei mir Verschiedenes, aber vor allem trinke ich heute mal wieder ein Gläschen Whisky von meinem Glenn Murray und ich habe auch schon was vorbereitet und hoffe, dass vielleicht man den Eiswürfel noch knacken hört, wenn ich jetzt was trinke.

Ich hoffe das. Moment. Ne, er war schon zu lange im Glas. Er war schon zu lange im Glas. Macht nichts, also zum Hintergrund, es ist ein sehr, sehr großer, runder Eiswürfel, also der hat so fünf Zentimeter Durchmesser oder so und normalerweise, wenn er frisch rauskommt und man dann was drüber schüttet, dann knackt der so schön. Ja, in der letzten Folge hat es funktioniert, da hat man es gehört. Also, letzte Folge nachhören, nur für das Eiswürfelknacken. Der Rest war nicht so wichtig.

Ja, sehr gut. Ja, dann müssen wir noch erklären, was das mit dem Intro auf sich hat. Ach so, ja stimmt, das wollten wir noch kurz, weiß nicht, ob man die Referenz verstanden hat, die Älteren unter euch werden sich erinnern. Wann war denn das? Steht da was dabei? Ist das das Original-Video? Das ist, glaube ich, das Original, das ist vor 14 Jahren, ja. Ja, Wahnsinn, 14 Jahre. Also das war das allererste Video, was aufgetaucht ist von Teddy, Ted LeBran.

Und wir hatten es gerade schon kurz drüber, man wusste damals nicht, ist das echt? Ist das gespielt? Weil es einfach wirklich gut gemacht war. Ich finde heute bei Social Media ist es teilweise so viel schlechte Schauspielerei dabei und dann merkst du das einfach, dass das gespielt ist. Aber da war das wirklich so, haben die da echt jemanden gefunden, der so ist? Und inzwischen kennt man ihn und weiß, dass das eine seiner Rollen ist.

Aber ich finde, das zeigt einfach auch, wie genial er ist und das macht, also in diese Rolle schlüpft und man es ihm einfach wirklich abnimmt. Wir verlinken es auch in den Shownotes. Wer es tatsächlich noch nicht kennt, der sollte es mal anschauen. Es ist sehr sehenswert, eine YouTube-Perle von vor 14 Jahren, die wir gerade rausgefunden haben. Verrückter. Ich habe heute viele Sachen rausgefunden bei der Vorbereitung. Können wir nachher noch darüber sprechen.

Dann würde ich sagen, gehen wir jetzt zur Retro. Ich habe nämlich auch, was mein Setup angeht, so ein bisschen was rausgefunden. Na dann, Jingle ab. Jingle ab. Und zwar hatten die letzten Male ja immer so ein bisschen Probleme mit Aussetzern von meiner Seite aus. Und da hatte ich schon den Verdacht geäußert, dass das irgendwie mit meinem DNS-Setup zusammenhängen könnte. Weil ich ja dieses AdGuard unter Home Assistant OS auf einem Raspberry Pi laufen hatte als DNS hier im lokalen Netzwerk.

Und natürlich dann sämtliche DNS-Anfragen darüber gelaufen sind. Und ich hatte schon den Eindruck, erstens, dass dadurch das Home Assistant nicht mehr so wirklich stabil läuft, weil das halt wirklich einfach den Raspberry sehr beansprucht. Und ich hatte den Eindruck, dass teilweise dadurch Verzögerungen zustande kommen, also dass es lange dauert, bis eine Domain dann aufgelöst wird und so.

Und dann hab ich mir gedacht, ja, dann verzichte ich lieber auf dieses Adblocking, beziehungsweise kann das ja auch über einen anderen öffentlichen DNS zumindest teilweise und halt nicht so konfigurierbar umsetzen. Und versuch mal, ob dafür jetzt mein Internet und so wieder hier stabiler läuft. Und ich hab schon den Eindruck, muss ich sagen, dass es jetzt nicht mehr so häufig irgendwie abbricht, soweit ich das jetzt erkennen kann. Und wir auch keine Knackser haben bisher.

Also vielleicht hat es tatsächlich schon da was gemacht. Ich meine, die Daten sind zwar nicht da drüber gelaufen, sondern wirklich nur der DNS. Aber wer weiß, ob dann nicht zwischendrin dann irgendwie, ja, wenn dann wieder versucht wurde, was aufzulösen, das halt doch länger gedauert hat und dadurch Pakete dann verloren gegangen sind oder zu spät zugestellt wurden.

Und dann hatten wir noch das Problem, dass ich zeitverzögert war letztes Mal und irgendwie mein Bild nicht zum Ton gepasst hat bei dir. Und ich auch gemerkt habe dann beim Schneiden, dass wir unglaublich Versatz drin hatten. Also ich habe letztes Mal sehr viel bearbeiten müssen und mich wieder hinschieben, dass das irgendwie passt. Weil man ständig das Gefühl hatte, sonst beim Hören, dass wir uns dauernd ins Wort fallen und uns gegenseitig unterbrechen.

Und deswegen wollte ich jetzt diesmal gucken, wie kann ich das mit dem Audio Setup noch ein bisschen besser hinkriegen. Und ich habe halt wirklich auch gesehen, beim Aufnehmen, ich sage was und erst irgendwie 3-4 Sekunden später sehe ich dann den Peak in meiner Spur. Also da war definitiv schon auf meiner Seite hardware-technisch was verschoben.

Und dann habe ich geguckt, Linux Low Latency und dann habe ich extra den Low Latency Kernel installiert und dachte vielleicht hat sich das damit schon erledigt, aber das hat überhaupt nichts an Besserung gebracht. Und dann habe ich ein bisschen, ich habe JGBT natürlich dazu befragt und das hat mir dann verschiedene Lösungsansätze gegeben, das eine war statt Puls Audio zu nutzen, was wohl halt relativ stabil läuft, aber halt nicht sehr latenzarm unter Linux.

Was so das Default Audio Interface ist, Software-seitig quasi. Und jetzt benutze ich, ich muss mal nachgucken, ich benutze Jack in den Einstellungen von Ultraschall oder Reaper und das läuft aber irgendwie dann über, wie heißt das nochmal?

Pipewire, genau, über Pipewire und das kann dann irgendwie das Ganze eben latenzfreier machen, weil ich hatte vorher das Problem, ich konnte zwar umstellen auf eine latenzfreiere Schnittstelle, dann hatte ich aber zum Beispiel keinen Browser-Ton mehr, also ich hatte dann ganz exklusiv nur Reaper fürs Aufnehmen,

aber wir haben ja schon öfter mal den Fall, dass wir zwischendurch uns auch Videos irgendwie schicken und dann kurz wo reinhören und wahrscheinlich hätte ich auch über Discord dich dann überhaupt nicht hören können.

Aber jetzt funktioniert's, ich muss jetzt Reaper irgendwie über so einen anderen Parameter starten, damit das dann auch wirklich über die Schnittstelle reinläuft und da zusammengemischt wird, aber du hast gesagt, bisher ist alles latenzfrei und ich seh mich auch direkt hier reinlaufen in die Spur, also hoffen wir mal, dass das jetzt alles dann besser ist und vielleicht lagen auch die Knackser da mit. Hattest du jetzt in dem Augenblick, wo du Knackser sagst, hattest du gerade einen Knackser?

Aber zumindest nicht bei mir, weil es war ja vorher teilweise so, dass ich die Knackser selber gehört habe. Also in dem Live-Monitoring von meinem Audio-Interface habe ich selber gehört, dass ich jetzt gerade geknackst habe und das ist jetzt nicht mehr und das ist schon mal gut.

Das heißt, in meine Spur läuft es ohne Knackser rein. Wahrscheinlich hört man den Knackser gar nicht, den du gerade gemeint hast. Und von dir höre ich auch keine Knackser, also ich bin gerade optimistisch, dass das alles gut läuft. Ich habe die Fritz-Box auch neu gestartet, also vielleicht haben wir echt jetzt das Problem wieder gelöst, was ich da verursacht habe vor einer Weile.

Ja, so zum Thema, weil du Linux benutzt. Ich habe jetzt gerade noch mal was verschoben und vorhin noch was kurz mit reingenommen. Vielleicht mal so ein kleiner Linux-Fakt am Rande, was jetzt mit uns als Podcast gar nichts zu tun hat und auch mit unserem Thema nicht, aber ich fand es irgendwie spannend.

Ich habe gerade vorhin noch mal nachgeschaut, der zehntgrößte YouTuber der Welt, PewDiePie, mit 110 Millionen Subscribern ist unter die Linuxer gegangen und hat auch ein relativ langes Linux-Video gemacht, wo er zeigt, wie er Linux installiert und wie er das konfiguriert hat und er hat tatsächlich, wenn ich es richtig weiß, Arch-Linux verwendet und dann so richtig sich das mit Hyperlens zurecht gebastelt.

Ich habe gelernt, das nennt man Rising, den Begriff kannte ich auch noch nicht und das ist ziemlich, vielleicht ist dieses Jahr wirklich das Jahr des Linux-Desktops, normalerweise sagt man immer, das ist nächstes Jahr. Seit 20 Jahren sagt man das schon, aber das fände ich doch jetzt irgendwie schon abgefahren und da sind jetzt echt einige Leute, könnte ich mir vorstellen, kommen jetzt auf den Geschmack.

Also wirklich, ich finde es immer wieder verrückt, wenn man sieht, PewDiePie hat 110 Millionen Abonnenten auf seinem Account, das muss man sich nicht mal vorstellen, das sind mehr Leute, haben ihn abonniert als in Deutschland. Ja krass, das kann schon echt einen Impact haben und ich glaube so generell, viele Leute sind von Windows 11 ziemlich abgeschreckt. Oh, total genervt auch.

Oder haben keinen Bock, auch ihre Hardware irgendwie jetzt, das war ja bei mir auch mit ein Faktor, dass ich gesagt habe, okay, jetzt beenden die einen Support und die wollen mich unbedingt auf Windows 11 schubsen und klar, mit Tricks kann man das auch irgendwie umgehen, dass man diese Hardwarechecks. Aber wenn man die Tricks drauf hat, dann kann man auch gleich Linux verwenden.

Ja, richtig. Und ich glaube schon, dass das spürbar sein wird. Also, dass mehr Menschen auf Linux wechseln. Ich bin auch in so einem Subreddit zu Linux Mint und da kommen immer wieder Neulinge, die irgendwie sagen, ich hatte jetzt die Schnauze voll und ich bin total begeistert und so.

Also, ich könnte mir schon vorstellen, dass das, ja, dass das einen Impact haben wird. Und wenn gerade dann solche Leute noch aufspringen, die eine große Reichweite haben, das kann schon zu einer Veränderung führen. Und jetzt kam auch gerade diese Woche irgendwas, dass AMD jetzt sämtliche Treiberpakete auf Open Source umgestellt hat.

Also, die hatten schon einen Teil wohl vor einigen Jahren eigentlich schon umgestellt, aber es war noch nicht alles davon war Open Source und das haben sie jetzt irgendwie geändert. Und Nvidia setzt ja auch jetzt vermehrt auf wirklich Open Source. Und wer weiß, vielleicht wird sich auch die ganze Gaming-Sache auf Linux wieder dadurch ein bisschen ändern, weil es jetzt einfach interessanter wird und weil der Markt größer wird. Das hat sich ja schon krass geändert.

Hat sich schon krass geändert, ja klar, im Vergleich zu vor noch zehn Jahren oder so. Das hat sich ja durch das Steam Deck brutal verändert, Gaming auf Linux. Also, da geht ja jetzt extrem viel, weil da Valve auch, glaube ich, ziemlich viel in die Weiterentwicklung von diesen Kompatibilitätslayern reingesteckt hat, wenn ich das richtig mitbekommen habe. Ich weiß jetzt nicht, ob man jetzt Linux ein Gaming-Betriebssystem nennen kann, aber ... Nee, aber auf dem Weg dahin vielleicht.

Auf jeden Fall. Also, wie gesagt, vor zehn Jahren sah das noch ganz anders aus, vor 20 sowieso, aber ich könnte mir schon vorstellen, dass das so längerfristig vielleicht wirklich Windows im Heimgebrauch, naja, ablöst vielleicht nicht, aber zumindest einen sehr viel größeren Teil davon haben wird als bisher. Die, die das schon machen wollen, die können da mal super TuxCard installieren. Ich kenn das nicht.

Du fährst halt als der Pinguin auf so Strecken rum, das ist uraltes Spiel, das gibt es schon relativ lange. Ja, also ich finde sowieso, Abtutipa, ich hatte den nie abonniert, ich habe immer mal so ein bisschen am Rande mitbekommen, was der so macht, aber ich habe das Gefühl, der ist jetzt ein ganz entspannter Typ geworden. Im Prinzip ist der ja schon in Rente, kann man sagen. Der ist ja irgendwann weggezogen aus seiner Heimat und nach Japan vor ein oder zwei Jahren oder so mit Frau und Kind.

Ich weiß nicht, ob das Kind damals schon auf der Welt war. Und der macht jetzt ganz so wholesome Familienvideos teilweise. Und offenbar muss er trotzdem irgendwas tun und die Zeit totschlagen, weil ich meine, ich glaube, seine Schäfchen, die hat er 27 Mal im Trockenen.

Und er hat jetzt halt, er hat damit nicht aufgehört mit dem Linux-Video, sondern der hat halt noch ein anderes Video, wo er jetzt mit irgendwelchen Raspberry-Pi-Sachen rumspielt und sich da irgendwelche Gadgets baut und 3D druckt und sowas. Das ist der neue PewDiePie, das finde ich irgendwie schon faszinierend. Das wollte ich halt nun mal noch mit einwerfen bei deiner Linux-Geschichte.

Aber mein eigentlicher Retro-Punkt, der jetzt kommen sollte, ist, ich habe auch ein bisschen rumgespielt wieder mit Code. Und zwar, was habe ich gemacht? Ich habe ja schon seit Ewigkeiten, also ich habe nochmal geguckt, seit mindestens 10 Jahren, gibt es meinen QR-Code-Generator, 2QR.info. Und mit dem habe ich ein bisschen rumgespielt, weil ich mir gedacht habe, es wäre vielleicht mal Zeit für neue Features.

Ich wurde gefragt, kannst du mal irgendwie für WLAN und Visitenkarte und so, kannst du das mal einbauen? Dachte ich so, ja, weiß nicht, kein Bock. Lange gedacht, weiß nicht, kein Bock. Und dann gedacht, ja komm, jetzt machst du es halt mal. Und so Vibe-Coding-mäßig mit AI-Unterstützung geht es dann auch relativ flott. Und da habe ich jetzt tatsächlich eingebaut, also neben ein paar UX-Verbesserungen, dass es jetzt so kleine Wizards gibt für QR-Code, für Wi-Fi-Codes und für Visitenkarten.

Das heißt, da gibt es jetzt so eine Option, da geht so ein kleines Fensterle auf, ein Dialog-Element und da kannst du dann die Daten eingeben und dann kriegst du den generiert, den Wi-Fi-QR-Code so für zu Hause aufzuhängen oder halt Visitenkarte, wenn man einen QR-Code haben will und seine Visitenkartendaten weitergeben will. Ja, das so am Rande und da ist einiges tatsächlich passiert.

Ich habe auch die Library, die da hinten dransteckt, die den QR-Code generiert, ausgetauscht durch eine, die jetzt mehr Features hat. Und das Ganze ist jetzt auch eine Progressive-Web-App, die offline funktioniert, die man sich auf dem Phone installieren kann oder auch auf dem Desktop, wenn man möchte. Und tatsächlich cached das dann alles und das sollte dann komplett offline funktionieren. Das finde ich ziemlich cool, weil es ist jetzt quasi eine echte App, wenn man so will.

Cool. Ich habe es letztens tatsächlich genutzt, dein Tool. Und zwar hatte ich irgendwie einen QR-Code, der als Rastergrafik mir dargestellt wurde. Ich glaube, von irgendeiner App oder es ging um irgendwas verknüpfen. Und das war so schlecht aufgelöst, dass das dann nicht gescannt werden konnte. Und dann habe ich einfach den Inhalt, wusste ich aber, und dann habe ich einfach einen neuen QR-Code generiert mit deinem Tool und, genau, habe das dann scannen können.

Cool. Ja. Es hatte auch ein paar Bugs zwischendurch. Es tut mir leid. Die wurden mir dann auch reported aus dem privaten Umfeld. Weil, ja, so Use-Cases sind, die ich einfach nicht gedacht habe. Tatsächlich. Das sind so Dinge, die eigentlich auf der Hand liegen. So was wie Copy-Paste hatte ich tatsächlich, da dieser Code wirklich sehr alt ist. Und ich glaube, dass damals das Input-Event noch relativ neu war. Ich hatte tatsächlich sowas wie KeyUp als Event-Listener auf dem Input-Feld liegen.

Und habe dadurch halt kein Paste-Event mitgekriegt, zum Beispiel. Also so Kleinigkeiten waren da noch am Start. Genau, aber das könnt ihr mal ausprobieren. Der Link kommt in die Shownotes. Ich diktiere nochmal 2qr.info. Es ist cool. Es ist kein Tracking drauf, so wie bei anderen QR-Code-Tools. Ich muss sagen, ich war ein bisschen angefressen, weil ich einen Post auf Mastodon gesehen habe, wo jemand einen QR-Code-Generator, der ähnliches Feature-Set hat wie meiner, gepostet hat.

Und so, hey, ich habe jetzt hier QR-Code-Generatoren sind doch scheiße, weil die bauen irgendwie immer Tracking ein und dann gehen die Links irgendwann kaputt. Ich habe jetzt hier das total geile neue Tool gebaut und es hat im Prinzip das selbe Feature-Set. Und dieser Post hat 2.000 Reposts bekommen und ich habe gedacht, das gibt es ja gar nicht. Ich habe das Ding schon seit zehn Jahren und es interessiert keine Sau. Ich bin schlecht im Marketing, offenbar.

Ja, ich wollte gerade sagen, du musst halt mehr Werbung machen. Aber das ist halt die Frage, wenn du halt entsprechend viele Follower schon hast, dann kriegst du halt so viele Reposts. Das war eine Person, die gar nicht so viele Follower hatte. Und keine Ahnung, hat halt einfach richtige Zeit, richtiger Ort oder die richtige Person hat es repostet oder so. Genau, ich bin nicht so gut im Marketing, aber ihr dürft gern auch mein Tool nutzen.

Das ist genauso, da gibt es auch kein Tracking, da wird nichts erfasst. Das passiert alles im Client und auch offline, wenn ihr wollt. Ja, genau. Also doch, nee, das stimmt nicht ganz. Ich will nicht die Wahrheit verschweigen. Also die Seite generell, da ist schon mein eigenes Matomo eingebunden. Aber was ihr da reintippt oder so, das ist alles nur auf der Seite und nur in eurem Browser und sonst nirgends.

Weil es gibt ja tatsächlich fiese QR-Code-Generatoren, die dann gar nicht einen Link, zum Beispiel bei einem Link, gar nicht den echten Link nehmen, sondern einen Umleitungslink, damit sie es mittracken können. Die können dir das Ding dann theoretisch auch irgendwann abschalten und sagen, wir wollen Geld haben oder was weiß ich. Oder auf eine andere Seite leiten, die irgendwie Phishing betreibt oder sowas.

Bullshit. Also sowas machen wir nicht. Wir wollen coole, kleine Tools haben, die einfach ihren Zweck tun und da will ich auch kein Geld für haben oder sowas. Ich habe da so einen kleinen Sponsor-Link drauf, den noch nie jemand benutzt hat, so mit meinem PayPal. Seit 100.000 Jahren ist es schon da drauf. Ja, kann man ja machen, falls es einem hilft oder auch nicht und einfach benutzen.

Und ich bin ja froh, wenn ich irgendwie sowas providen kann. Und ich muss auch sagen, ich habe auch die QR-Code-Library auch nicht selbst geschrieben. Also ich habe mich da bedient am Internet und im Prinzip nur ein Frontend dafür gebaut, was ich halt kann. Was wir halt so können hier, Frontend-Leute. Genau, das dazu. Gut, dann habe ich noch einen Retro-Punkt. Einfach so ein bisschen Laberei, wie so oft.

Ich war ja jetzt zwei Wochen im Urlaub und das war so der erste längere Urlaub jetzt, seit ich nicht mehr selbstständig bin. Und das war irgendwie ganz krass. Also der Unterschied zu vorher mit der Selbstständigkeit, wo man doch irgendwie im Kopf immer bei der Arbeit ist und doch Mails checkt und sich Gedanken macht und eigentlich ein schlechtes Gewissen irgendwie hat.

Kann ich das mir jetzt gerade überhaupt leisten, jetzt einen Urlaub zu machen? Oder sollte ich nicht eigentlich jetzt daheim sitzen und was arbeiten? Das ist jetzt halt einfach komplett weg. Und wenn ich frei hab, hab ich einfach frei. Und ich bin jetzt gerade im Kindergarten da als Zusatzkraft. Und meine Frau ist ja Lehrerin, die hat jetzt also Schulferien. Und der Kindergarten hat auch die kompletten Pfingstferien zu. Das heißt, wir haben einfach mal jetzt zwei Wochen beide frei.

Und das ist irgendwie so krass, ohne dass ich mir jetzt irgendwie Urlaub dafür nehmen muss und irgendwie auch nur Gedanken an die Arbeit verschwenden muss, wenn ich das nicht will. Und das ist irgendwie ein ganz neues Freiheitsmittel, muss ich sagen. Echt? Krass. Ich bedauere, dass du das nicht schon vorher kanntest.

Ich auch. Aber ja, also ich meine, ich konnte schon abschalten im Urlaub, aber trotzdem war halt immer, alle zwei, drei Tage habe ich halt trotzdem in die Mails geguckt oder mit meinem Bruder irgendwie geschrieben, weil halt doch irgendwie eine Rückfrage war oder so. Oder ja, das müssen wir nach deinem Urlaub mal in Angriff nehmen oder so. Jetzt ist halt wirklich einfach, wenn ich Urlaub habe, habe ich Urlaub.

Das ist so interessant. Ich kann das jetzt viel besser nachvollziehen, dieses Gefühl, weil ich ja jetzt auch ein bisschen Freelance gemacht habe und bei dem einen Kunden mehrere Projekte, wo auch immer mal wieder kam, ja, wir haben jetzt hier noch das, dafür bräuchte man noch ein Angebot und wir haben noch das und dafür bräuchte man noch ein Angebot.

Und das war am Ende nicht viel Aufwand, aber da musste ich sehr diszipliniert sein, auch so an Tagen, wo ich eigentlich nix machen wollte, zu sagen, naja, die haben jetzt aber noch ein Angebot gefragt, komm, ich mache es jetzt schnell, so.

Das waren dann Dinge, zu denen ich mich dann auch immer durchgerungen habe, weil ich irgendwann mal die Regel, habe ich irgendwann mal online gelesen, das fand ich eigentlich ganz gut, habe mir irgendwann mal die Regel aufgestellt, wenn eine Sache weniger als fünf Minuten dauert, dann versuche ich sie sofort zu machen und nicht zu verschieben. Ja, ist natürlich auch gut gegen Prokrastination.

Und damit konnte man das ganz gut, ja, aber Prokrastination, also, reden wir später mal noch, ich habe da noch ein Thema, was ich aber jetzt nicht im Podcast, ja, genau, aber das, ich verstehe jetzt aber auch diese ganze Motivationssache, wenn du selbstständig bist, dass du gewisse Dinge selbst entscheiden kannst oder komplett eigentlich deinen Tagesablauf weitestgehend selbst bestimmen kannst,

das ist mit, ja, damit kommt halt auch große Verantwortung, so, und man muss dann halt auch alleine es schaffen, was zu machen, ohne eine Struktur von außen, das ist auch nicht ohne. Aber ich möchte nicht meckern, also Freelancing ist auch schon ziemlich cool, also die ganzen Freiheiten, die man dabei hat.

Ja klar, ja ich meine die Kehrseite sehe ich natürlich jetzt auch, die zwei Wochen Urlaub habe ich jetzt, weil der Kindergarten halt eh zu hat über die zwei Wochen, aber so in Zukunft mit der Ausbildung auch, da wird es halt eh der Fall sein, dass meine Frau Schulferien hat und ich aber ausgerechnet in den Schulferien natürlich gebraucht werde für Kinder- und Jugendbetreuung. Und da wird das in Zukunft nicht mehr so, ja, mit den Urlauben funktionieren wie bisher.

Ist das so? Aber das ist ja eigentlich interessant, weil du bist ja dann nicht im Staatsdienst, das heißt, aber die Ferienzeiten gibt es im Kindergarten eventuell trotzdem genauso, aber du hast weniger Urlaub als diese Ferienzeiten, richtig?

Genau, genau. Und ich bin ja für die Ausbildung dann nicht mehr im Kindergarten, sondern im Jugendzentrum und da ist halt schon öfter mal so, dass die dann gerade während der Ferien auch Betreuungsangebote haben, weil die Kinder halt nicht in die Schule gehen und die Eltern aber halt trotzdem berufstätig sind. Und dein Urlaub würde ja auch gar nicht reichen, um die ganzen Ferien abzudecken, ziemlich sicher.

Nein, genau, auf keinen Fall. Also ich kriege da auch die normalen gesetzlichen 30 Tage, wobei ich auch nicht in Vollzeit die Ausbildung mache, sondern… Also gesetzt ist tatsächlich weniger. Ja, so 28 sind es, glaube ich. Ich glaube es sind aber nur 23 oder 24. Ja, echt? So wenig? Also ich meine, dass es dort 30 sind eigentlich, aber wie gesagt, mit Teilzeit haben wir da ein bisschen weniger. Also ich kriege die Ferien nicht überbrückt.

Und gut, ich habe, muss ich aber auch sagen, in der Selbstständigkeit keine 30 Tage im Jahr genommen. Also da bin ich eh nicht drauf gekommen. Oh krass, da kommst du nicht drauf. Es sind sogar nur 20 in Deutschland verpflichtend. Oh echt? Ich dachte nicht, das wären so Richtung 30. Aber ich meine, die meisten Firmen bieten ja wirklich diese 30 Tage an. Ja, das kann ich bestätigen. Ja, eine andere Sache noch, auch weil es mit Urlaub zu tun hat, aber gar nichts mit Arbeiten.

Ich war immer eine große Verfechterin von Unisex-Toiletten und ich war jetzt ja zwei Wochen campen und auf manchen Campingplätzen war es halt nicht so schlecht. Gab es halt Gruppensextoiletten? Entschuldigung. Aber da gab es Unisex-Toiletten und ich muss echt sagen, ich war dann froh, wenn ich wieder auf Frauentoiletten war, weil die sind durchschnittlich echt deutlich sauberer.

Das ist spannend, das ist ein total spannendes Thema, weil das habe ich schon in alle Richtungen gehört, dieses Argument. Und ich habe auch schon genau das Gegenteil gehört, was interessanterweise Frauen selbst gesagt haben, dass die Frauentoiletten, also dass sie, wenn sie auf die Männertoilette gehen, keine Ahnung, weil halt vor der Frauentoilette eine Riesenschlange ist, dass sie dann oft erstaunt sind, wie sauber das da ist. Echt? Ich kenne das in alle Richtungen.

Und ich habe das auch schon ganz oft gehört und dass ganz viele Frauen mir gesagt haben, ja, aber die Frauentoiletten, die sehe ich ja teilweise auch echt. Aber ich meine, ich war jetzt wirklich viel auf öffentlichen Toiletten unterwegs in den zwei Wochen, an Raststätten und Cafés oder so. Welche Ländersache ist das? Wo warst du dann? Ich war in Spanien, Frankreich, Andorra. Weiß nicht, ob die da unbedingt jetzt mehr auf Sauberkeit aus sind.

Aber auch hier in Deutschland, also egal, ob ich in einem Café bin oder hier an einer Raststätte, also ich muss diese extrem schmutzigen, verfleckten Frauentoiletten erst noch finden. Und ich weiß halt aus eigener Erfahrung Herrentoiletten oder die Toiletten, die unisex sind und von Männern mitbenutzt werden, also da ist die Ausnahme, dass es nicht nach Urin stinkt und auf dem Boden verklebt ist. Ist leider echt so. Und nicht nur vor den Pissoirs, sondern wirklich auch auf den Sitztoiletten.

Ich frage mich gerade, ob das ein technisches Problem ist. Aber das können wir woanders mal erörtern. So physisch, physikalisch meinst du? Ja, also anders ein Problem, das man technisch lösen kann. Ich will nicht sagen, es ist ein technisches Problem, sondern es ist ein Problem, das man technisch lösen könnte. Da hilft kein Schütteln und kein Klopfen, in die Hose geht der letzte Tropfen. Oder halt eben vor die Toilettenschüssel.

Ich will es nicht weiter vertiefen, aber da habe ich vielleicht später noch einen Tipp für dich. Den ich auch so im Podcast habe, by the way. Aber egal, wollen wir jetzt nicht. Nee, jetzt machen wir noch die Rätung fertig und dann kommen wir mal zum Thema. Genau, also was noch passiert ist, so Code-mäßig, ist, ich habe immer mal wieder gedacht, so Apple Shortcuts, da habe ich auch schon öfter drüber geredet.

Ich habe auch schon mal so gescherzt, so von wegen, ja, ich werde in meinem nächsten Developerleben Apple Shortcuts Developer. Weil ich das sehr cool finde, wie man da Dinge automatisieren kann und wie mächtig das ist und wie schön man sich das so zurecht klicken kann, ganz ohne Code zu schreiben. Natürlich hat es seine Einschränkungen, aber man kann mit so einem Shortcut auch einfach ein Bash-Skript aufrufen und dann kann man alles machen, was man will.

Und ich habe jetzt halt mal damit angefangen, Shortcuts, die ich gebaut habe, wo ich der Meinung bin, dass man die generell verwenden kann. Also, dass die jetzt nicht nur für mich speziell sind, sondern dass die für andere vielleicht auch nützlich sind, mal zu teilen. Weil das kann man nämlich, es gibt so ein Shortcut-Share-Ding, dann kriegt man so einen iCloud-Link und dann kann man die mit der Welt teilen.

Und ich habe dann erst überlegt, was mache ich? Also jetzt gibt es diesen iCloud-Link, was mache ich denn damit? Dann habe ich gedacht, naja, vielleicht mache ich das einfach in meine Projekte auf meiner Webseite. Und dann habe ich gemerkt, naja, aber dann wird das irgendwie unübersichtlich, diese Liste. Und ich möchte ja vielleicht auch direkt dahin verlinken und dann muss ich auf meiner Webseite gleich noch ein neues Feature einbauen.

Nämlich, dass es bei meinen Projekten jetzt Filter gibt, die auch über den Link funktionieren. Also mit Fragezeichen Filter kann ich jetzt die einzelnen Bereiche ansteuern. Es ist nicht so, dass ich so extrem viele Sachen da hätte, aber ich fand es dann irgendwie cool, auch dieses Feature einzubauen. Und habe zwei Shortcuts, die ich gebaut habe, mal veröffentlicht. Und zwar der eine ist eher simpel. Das ist einfach nur ein Toggle für Dark und Light Theme.

Einfach nur, weil dieser Toggle im Betriebssystem mir zu tief in den Einstellungen versteckt ist. Und deswegen habe ich dafür mal eingebaut. Und das andere ist ein bisschen cooler und mächtiger. Und zwar ist das ein Shortcut, mit dem ich quasi einen Screenshot mache und zwar so eine Area aufziehe. Und alles, was in dieser Area ist, ich kriege dann den Text davon. Ach was. Es gibt da auch Apps für und so, aber ich habe da nochmal überlegt und habe dann gesehen, nee, man braucht dafür keine App.

Ich kann es einfach mit einem Apple Shortcut machen, weil nämlich unter macOS, das ist halt einer, der ziemlich sicher nur auf macOS funktioniert, diese ganze Funktionalität schon vorhanden ist. Man muss ihn nur clever miteinander verknüpfen in Form von einem Shortcut. Das heißt, du klickst auf das Ding dann drauf und dann ziehst du deine Area auf und dann kriegst du den Text, der da drin ist, einfach ins Clipboard kopieren. Dann kannst du irgendwo anders einfügen.

Ziemlich nützlich, wenn man so im Bildungsbereich unterwegs ist, wo es so komische DRM-geschützte Sachen gibt, man die aber verändern möchte. Ich sage es mal so, wo man nichts kopieren darf offiziell. Ich meine, es gibt immer Wege und das ist zum Beispiel einer, der relativ nett ist. Ich nutze das auch bei mir auf dem Handy. Unter Pixel gibt es das ja auch, dass du Google Lens da quasi öffnen kannst und dir dann auch Text übersetzen lassen kannst oder halt den Text auch einfach markieren kannst.

Und genau für solche Sachen von Text von einem Bild oder von irgendeiner Seite, die die Markierung deaktiviert hat und so. Genau, aber was jetzt hier, der Schritt, der jetzt hier gespart wird, ist, du könntest natürlich, auf dem Mac gibt es diese Funktionalität auch mit einem Bild. Ja, das ist kein Problem. Der Schritt, der jetzt hier aber gespart wird, ist, den Screenshot musst du einfach nicht machen.

Du musst nicht ein Bild irgendwie machen und dann den Text da rauskopieren, sondern das wird sofort für dich gemacht, ohne dass du diesen Zwischenschritt mit Screenshot und dann irgendwo nochmal Öffnung und Text rauskopieren kannst. Du hast halt den Zwischenschritt nicht und das finde ich ziemlich cool, muss ich sagen. Also diverse Screenshot-Apps haben das auch mit eingebaut und es gibt auch diverse Apps, die genau diese Funktionalität haben.

Aber ihr könnt es kostenlos haben, indem ihr meinen Shortcut verwendet. Also Link kommt in die Shownotes zu meinen Projects, wo das dann auch mit drin ist, diese zwei Shortcuts. Vielleicht gibt es irgendwann noch weitere. Ich habe auch noch viele, viele andere, aber die meisten sind so customised für mich. Die bringen, glaube ich, der Welt nichts. Wenn ich jetzt hier meine Podcast-Automatisierung veröffentlichen würde, würde das niemandem was bringen.

Aber es macht Spaß, damit rumzuspielen. Und weil du vorhin noch Reddit angesprochen hast, ich hänge jetzt auch viel auf Reddit rum und lese viel da. Und da gibt es auch einen Apple Shortcuts Subreddit, wo viele interessante Sachen gepostet werden. Also das kann ich nur empfehlen. Das mit Shortcuts rumspielen auf dem Mac, das macht einfach Spaß. Und die gehen ja teilweise auch fürs iPhone, für die Watch und so weiter, also je nachdem.

Ich habe zum Beispiel auch einen Shortcut, mit dem ich jeden Tag um dieselbe Zeit an dieselbe Person eine WhatsApp-Nachricht verschicke. Okay. Sowas geht auch. Also es geht alles Mögliche. Ja. Kommt immer so ein bisschen drauf an, auch wenn man jetzt Fremd-Apps verwendet oder Drittanbieter-Apps, inwieweit die App als Schnittstelle für die Shortcuts zur Verfügung stellen. Aber wie gesagt, eine WhatsApp-Nachricht schicken geht ganz easy. Ja, cool.

Ja, genau. Kann man viele spannende Sachen mitmachen. Genau. Und zum Podcast noch ganz kurz, dann sind wir mit der Retro auch schon durch. Ich habe jetzt angefangen, weil es mich genervt hat, dass wir es noch nicht haben, für alle Folgen Transkripte bei uns einzubauen. Mit was? Lüfter erstellen? Weil ich die lokal generiere, dauert das so ein bisschen und mein Rechner wird dann heiß. Könnt ihr euch vorstellen, der hat ja auch keinen Lüfter und so.

Ich mache dann immer so Lüfter nebendran und dann immer nur so vier, fünf hintereinander. Das ist dann aber auch schon viel. Mache ich mit Whisper. Aha. Genau. Und habe jetzt angefangen am Anfang so ein bisschen random. Also die letzten, die neuesten fünf Folgen oder so haben es sowieso, da habe ich es immer direkt schon mitgemacht. Und ich habe jetzt nochmal angefangen bei Folge 0 und bin jetzt, glaube ich, bei 30 oder so angelangt. Also doch schon recht weit.

Genau. Also momentan sieht man die Transkripte noch nur in dem Hotlove-Player auf der Webseite. Da gibt es einen Transkriptereiter, wenn die Transkripte da sind. Diese haben auch keine Speaker Recognition, das ist dann einfach nur der Text. Aber ich finde das okay. Ich finde das reicht. Das ist schon mal besser als nix, auch so seotechnisch vielleicht. Ja, seotechnisch bringt es halt noch nix, meiner Meinung nach, weil ich nicht weiß, inwiefern die Suchmaschine da reingeht.

Also ich glaube, die werden aber in dem Feed verlinkt. In dem Feed werden sie verlinkt zumindest als WebVTT-File. Und das wäre jetzt noch meine Frage gewesen. Ich habe das bei anderen Podcasts gesehen, es gibt unterschiedliche Ansätze, was man damit noch machen kann. Ich kenne zum Beispiel einen Podcast, der hat das auf der Webseite bei der einzelnen Folge noch als Element zum Aufklappen.

Hier ist so das Transkript noch als HTML bei der Folge dabei, aber teilweise gibt es das auch als Download, als HTML-Download-File oder so. Falls ihr jemand seid, der sowas benutzt, nur dann möchte ich eigentlich eine Antwort von euch haben. Jemand, der wirklich Transkripte auch benutzt, aktiv. Warum auch immer. Dann würde ich gerne mal wissen, was für ein Format für euch gut ist oder wie ihr euch das am liebsten wünscht. Im Feed sind sie schon quasi mit drin.

Das heißt, wenn ein Podcatcher das unterstützt, die auszulesen, sollte das TM funktionieren. Apple Podcasts macht, glaube ich, mittlerweile schon selbst Transkripte. Die transkribieren die Folgen mit was Eigenem. Aber mich würde interessieren, was wäre denn da für euch nützlich? Das kann ich jetzt schon mal vorweg spoilern. Ich werde nicht alle Feature-Wünsche einbauen, aber so ein Ding, so von wegen, ja, auf der Folgenseite mit zum Aufklappen, das wäre doch irgendwie noch ganz gut.

Oder eh als Download, als HTML oder so, das wäre noch ganz gut. Ein so Ding können wir noch mit einbauen. Weil ich der Meinung bin, momentan nur innerhalb dieses Players ist das nicht so zugänglich für alle. Und auch Suchmaschinen wären es da. Wahrscheinlich, weiß ich nicht, ob sie es finden, wahrscheinlich eher nicht. Brauchen noch irgendwo einen anderen Ort, genau. Möchte aber, also rein technisch gesehen,

dass das WebVTT, also das .vtt-File, das soll die Wahrheit bleiben und das Transkript wird daraus, das HTML oder so was wird daraus gebaut. Sollte aber kein so großer Aufwand sein. Genau, das wollte ich noch sagen, dass es das jetzt gibt. Cool. Dann kommen wir jetzt schon, nach einer halben Stunde, zum Thema. Und jetzt muss ich wieder hier kurz wechseln. Achso, was ist mit Werbung? Achso, ja, dann spiel doch noch was ab, such dir was aus. Ich, warte mal, jetzt muss ich hier.

Was nehmen wir denn da? Ach Gott, ich habe den Überblick verloren bei uns. Ah, hier, da sind sie mit Werbung, genau. Wir nehmen einfach mal das. Der Gast gefällt, er spendet Geld. Das hatten wir schon länger nicht mehr. Ja, und das ist schon so lange her, dass wir das aufgenommen haben. Ihr habt es gehört. Eine kleine Spende hilft uns. Es schadet nie. Property haben wir nicht, wir gehen direkt zum Tagesthema. Hier ist WWSIV mit dem Tagesthema.

Wir haben noch gar nicht gesagt, um was es in der Folge heute geht. Nee, nur so kryptisch. Wir machen mit unserer HTML-Serie weiter. Tatsächlich, oh Wunder, oh Überraschung. Nachdem wir uns in der letzten HTML-Serienfolge darum gekümmert haben, um Embedded Content, also Dinge, die man in HTML mit reinpflanzt, die aber eigentlich kein HTML sind, kümmern wir uns um was Ähnliches.

Auch Dinge, die in HTML reingepflanzt werden, die kein HTML sind, aber trotzdem im HTML geschrieben werden und nicht als Extradatei irgendwo liegen müssen. Können teilweise, aber nicht müssen. Und zwar geht es heute um die Elemente SVG und Math. Und da das zwei komplett eigene Sprachen eigentlich sind, die nicht HTML sind, aber XML-konform, kann man die auch in HTML direkt schreiben. Ja, und dann würde ich sagen, können wir ja mit SVG schon mal anfangen.

Genau. Und da das so ist, dass das eigentlich eigene Sprachen sind, werden wir jetzt auch nicht komplett das auseinandernehmen jeweils. Weil ich glaube, für SVG könnte man schon drei Folgen füllen und für MathML wahrscheinlich auch. Das hast du dir eher angeschaut. Deswegen haben wir uns so ein bisschen rausgepickt, was so das Wichtigste ist.

Oder im Fall von SVG habe ich mir das rausgepickt, was ich selber noch nicht kannte oder mit was ich jetzt das erste Mal rumgespielt habe jetzt für die Vorbereitung. Aber Sarah, was ist denn eigentlich SVG? Das heißt scalable vector graphics, also skalierbare Vektorgrafiken. Oh, das klingt ja toll. Wofür setzt man das denn ein? Ich glaube, ich muss mehr an den Kopf fassen. Ja, ich frage jetzt mal ernsthaft. Ich meine, das weiß ja vielleicht nicht jeder, der hier zuhört.

Genau, also skalierbare Vektorgrafiken im Gegensatz zu Pixelgrafiken. Aber ich glaube, dass wir darüber auch schon gesprochen haben. Also Folge 24, Editor, IDE und CMD. Aber zwei Sätze. SVG, oje, Mini. Nee, wir haben da auch sogar was als Property gehabt, was ich vorhin dachte so, oh cool, das kenne ich nicht, da muss ich drüber sprechen. Aber wir haben es schon besprochen. Genau, Vektorgrafiken.

Und da hatten wir es auch schon mal in der Folge, wo wir über krasse Bildschirme, wo du über Vektorbildschirme gesprochen hast. Einmal drüber, was das eigentlich ist. Also klar, Pixelgrafiken, da weiß man, die Grafik hat irgendwie von mir aus 16x16 Pixel. Und der Pixel in Spalte 3 von der zweiten Zeile, der ist rot. Und dann kann ich die natürlich nicht unendlich skalieren, weil dann muss da berechnet werden, wenn ich das jetzt doppelt so groß mache, wo ist dann auch noch rot und so.

Also man hat einen Qualitätsverlust. Und skalierbare Vektorgrafiken, die arbeiten eben mit mathematischen Vektoren. Deswegen passt das eigentlich auch zu MathML ganz gut und zu Mathematik. Das heißt, Vektoren beschreiben einfach, das geht von dem Punkt aus so lange in die Richtung, zum Beispiel, wenn ich jetzt eine Linie habe. Oder wenn ich so ein virtuelles, internes XY-Koordinatensystem habe, dann geht es halt von Punkt 0 bis Punkt 100.

Also 0, 0 bis 100, 100. Dann habe ich eine Diagonale, wenn es jetzt 100 mal 100 groß ist. Aber ich kann es eben auch skalieren. Und dann wird das eben berechnet, bis wohin muss es dann gehen. Und dann kann ich das eben unendlich skalieren, ohne dass ich einen Qualitätsverlust habe. Im Prinzip wird mit Code die Form beschrieben. Und dann, der Browser zeichnet das dann im Prinzip für einen. Das wird natürlich für die Darstellung auf dem Bildschirm am Ende wieder gerastert.

Aber davon kriegt man als User natürlich nicht viel mit, weil ich kann da reinzoomen, wie ich möchte. Es bleibt immer scharf. Und man sieht, es ist jetzt schon so alt. Das war zum Beispiel auch was, SVG. Wann war der initial draft? War, glaube ich, 1999, wenn ich mich recht erinnere. Ich finde es jetzt nur auf die Stelle nicht. 12. August 1999. Und das fand ich echt krass, weil ich mit SVG erst viel, viel später in Berührung gekommen bin. Wahrscheinlich 2010 und später, würde ich sagen.

Ich weiß, in unserer Ausbildung hatten wir das. Da war das schon, und ganz viele haben es noch nicht benutzt. Und ich habe mich immer gefragt, warum benutzt das eigentlich keiner? Und dass das aber schon so alt ist, die Idee dahinter, das hat mich dann doch überrascht. Ich würde mal gerne gucken, keine IUs. Ich erinnere mich nämlich, dass ich bei einem Projekt als Freelancerin, da wurde noch so eine Technik eingebaut, wo quasi abgefragt wurde, ja, werden denn SVG-Grafiken überhaupt unterstützt?

Wenn ja, dann nimm das Sprite, und wenn nicht, dann nimm ein anderes. Jetzt gucken wir mal, du weißt vielleicht, von was ich spreche. Jetzt gucken wir mal, wann das ... Firefox 2 hatte schon partial Support dafür. Also ich weiß gar nicht, warum ... Ach, genau, der Internet Explorer war so das Problem, weil damals war noch IE8 verbreitet, und der konnte es gar nicht. Und erst ab 9 wurde das dann so wirklich unterstützt. Also das war mal wieder der gute alte IE, der da zurückgehalten hat.

Aber die anderen Browser haben das eigentlich schon relativ früh adoptiert. Genau, also das war einfach schon das Erste, was mich gewundert hat. Krass, so alt ist SVG schon. Und ja, so ganz kurz zu den geometrischen Formen. Aber da werden wir jetzt nicht alle Properties und wie die genau aufgebaut sind machen. Also es gibt Circle, ein Element für Kreise. Es gibt Ellipse, also da ist dann wirklich nur der Kreis sitzt dort und dort, da sitzt die Mitte. Und der Radius ist so und so.

Und dann kann ich das füllen, oder ich kann auch einen Stroke außenrum setzen. Wenn ich eine Ellipse will, dann muss ich natürlich, dann habe ich ja andere Werte für den Radius nach oben und unten. Andere für rechts und links quasi. Dann brauche ich ein eigenes Element, das heißt Ellipse. Huch, jetzt ist mir hier Trello gesprungen. Ah, das war ich, Entschuldigung. Ah, das warst du? Ich habe noch was hochgeschoben. Ah, hast du doch jetzt umgetauscht? Ne, ich habe nichts getauscht.

Ich habe nur in dem Moment eins nach oben geschoben. Genau, dann gibt es das Line Element, was ich vorhin schon gesagt habe. Da gebe ich den Startpunkt, den Endpunkt an. Für Path kann dann eben auch so richtig mit Vektoren und man kennt das, wenn man mit Inkscape oder mit Illustrator arbeitet, dass man diese Anfasser an den Kurven hat, wo ich dann optisch sagen kann, wie ist die Verteilung quasi auf der Kurve und dadurch dann die Formen verändern kann.

Polygon ist im Endeffekt einfach ein Vieleck, das am Ende geschlossen ist und Polyline ist dagegen einfach mehrere Linien aneinander, die aber nicht zwingend wieder am Schluss geschlossen werden. Und Rect ist einfach ein Rechteck. Das sind so die grundgeometrischen Formen, die ich machen kann und damit gerade mit den Freeform-Sachen, also Polyline, Polygon, da kann ich natürlich alle Formen erzeugen, die ich möchte.

Und dann bin ich als erstes vorhin auf etwas gestoßen und das ist eben aus dieser Folge 24, wo wir da schon mal drüber gesprochen haben, das war Foreign Object, da kann ich HTML direkt in SVG nutzen. Also ich kann ein SVG in eine HTML-Seite einbinden und in dem SVG dann wiederum HTML benutzen, wenn ich das möchte.

Und tatsächlich ist es gar nicht mal so unnützlich, weil Text fließen lassen in SVGs, das ist so ein bisschen pain in the ass, weil man, also ich hatte das mal in einem Projekt, wo wir so dynamisch Content ausgetauscht haben und Animationen und da musste dann wirklich der Text umgebrochen werden, so dass man guckt, ist das jetzt breiter als das Parent-Element und dann setzt den T-Span, T-Span ist auch wieder für unter, also in einem Text-Element für Untertexte,

die ich dann under-style oder positionieren kann. Und dann mussten wir wirklich diese Zeilen-Umbrüche manuell machen, weil das sonst nicht funktioniert hatte. Und dann habe ich mir das heute so gedacht, also da wäre ja eigentlich Foreign-Element, wenn ich da einfach ein Diff reingepackt hätte, das dann die volle Breite einnimmt, wäre vielleicht die Lösung gewesen. Also wie gesagt, nochmal in Folge 24 nachhören, da haben wir da schon drüber gesprochen.

Ich möchte auch noch an der Stelle Folge Nummer 22 einfügen, weil da haben wir tatsächlich über SVG-Sprites, also ich finde den Folgentitel immer noch grandios, SVG-Sprites und andere Icon-Artigkeiten. Ja, da bin ich vorhin auch drauf gestoßen. Genau, da ging es genau um dieses Thema, wie kann man eigentlich, und das ist jetzt wirklich schon, ich frage mich schon, ob das sehr veraltetes Wissen ist, weil ich mich schon länger nicht mehr mit der Thematik beschäftigt habe.

Das ist jetzt echt schon eine Folge, die ist jetzt schon vier Jahre alt. Also vom 28.02.2021, da haben wir drüber gesprochen, wie man SVGs sinnvollerweise für Icons einsetzen kann auf Webseiten und wie man da möglichst wenig neue Requests hat, wie man da zum Beispiel Sprites bauen kann, aber ohne dass irgendwie alles, trotzdem dass man einzelne Files vielleicht noch irgendwo liegen hat oder zumindest extern und so. Da gibt es verschiedene Techniken.

Und mich würde echt mal interessieren, ob es da mittlerweile was Neueres gibt. Gibt es mittlerweile und vielleicht an diejenigen, die sich auskennen oder das in letzter Zeit mal gemacht haben, würde ich echt mal gerne die Frage stellen. Bitte in die Kommentare vielleicht dann mal antworten. Gibt es mittlerweile was Schlaueres als so ein SVG-Sprite mit Ahref, wo man die einzelnen Bereiche per ID referenziert und dann anzieht oder ist das immer noch state of the art?

Das würde mich echt mal interessieren. Da habe ich jetzt auch was dazu. Deswegen habe ich das jetzt gerade auch noch ein bisschen umgeschoben in den Notizen, weil wir hatten nämlich, ich weiß nicht, ob diese Demo mit dem SVG-Sprite auch dieser Folge entsprungen ist, weil ich finde da den Link dazu nicht. Mal gucken, CodePen. Aber das ist meine Demo, die ich da gebaut hatte. Bei irgendwas anderem hatten wir nämlich mal eine Demo gebaut und die verlinke ich auch noch, die alte Demo.

Und da haben wir das eben genauso gemacht, dass wir Elemente wiederverwenden per Symbol und Use. Und wenn du auch drauf gehst, dann kannst du gucken, so der Unterschied, wenn ich es als Image einbinde oder als Inline-SVG mit Use und dass man dann auch über CSS-Variablen die Farbe ändern kann. Und da haben wir das eben, also die einzelnen Elemente haben IDs und per Use kann ich dann eben das SVG anzapfen und als Hash hintendran die ID von dem Element, von dem Symbol quasi direkt ansprechen.

Und dann wird nur das auch tatsächlich eingebunden. Und ich bin jetzt vorhin noch auf etwas anderes gestoßen, und zwar das View-Element, also das Kind-Element View. Das muss ich auch noch hochschieben. Und da habe ich nämlich auch eine Demo dazu noch gebastelt. Und zwar kann man quasi vorgegebene Views in dem SVG festlegen. Das heißt, ich verschiebe den Viewport, beziehungsweise ich habe dieses Viewbox-Attribut, was eben dieses Koordinatensystem festlegt, das Interne für dieses SVG-File.

Und ich kann dann mit einem Viewport, also den kann ich benennen und kann dann sagen, auch über ein Hash in der URL, das referenzierbar machen. Und ich glaube, ich habe den Link zu meiner Demo, den habe ich da gar nicht rein, warte mal. CodePen, CodePen, da. Der muss natürlich auch noch rein, damit du den auch angucken kannst. Zack. Genau, da habe ich, jetzt muss ich wieder blöd rumscrollen.

Genau, da habe ich eine CodePen-Demo, View and Preserve Aspect Ratio, da wird auch noch das eine Attribut beleuchtet. Und das ist also, vielleicht kannst du auch dir das Bild selbst in einem anderen Tab mal aufmachen und in den Quellcode reingucken. Da siehst du dann in Devs, also das Devs-Tag ist für Sachen, die nicht gerendert werden sollen.

Also da kann ich Farbverläufe darin definieren oder eben so Symbole, die nicht direkt erscheinen sollen, sondern die ich nur an anderer Stelle referenzieren können möchte. Die kann ich da reinpacken. Und da kann ich eben View ID ist gleich, zum Beispiel View 1 und kann damit halt wirklich einen Ausschnitt aus dem Bild wählen, der dann dargestellt werden soll, wenn ich diesen Hash angebe.

Und damit könnte man halt auch sagen, ich habe ganz viele verschiedene Icons und ich sehe die auch sichtbar in einem Raster, wenn ich die Datei selbst aufrufe. Aber wenn ich die anspreche über diese View ID, dann verschiebt sich eben der gewählte Ausschnitt und ich sehe wirklich nur das

eine Icon. Und das hat den Vorteil, dass ich es halt nicht als Inline-SVG mit Views machen muss, sondern ich kann wirklich Image Source ist gleich und dann in dem Fall ist es Views.svg, also liegt halt auf unserem Server und dann Hashtag View 2 auswählen und natürlich heißt es dann nicht View 2, sondern irgendwie Icon. Das ging aber mit dem Views auch, dass man es extern hinlegt. Bist du sicher?

Dass die Datei extern liegt, ja, aber du musst es einbinden musstest du es in dem du svg Tag nimmst und in dem dann Views Tag verwendest und dann die externe URL angibst. Und das brauchst du halt nicht, also du sparst dir halt das svg rumgewrappe und Views Tag, sondern du kannst es wirklich einfach als Bild einbinden und per Hash dann den Ausschnitt angeben, der dann benutzt werden soll. Das ist smart.

Ich glaube, dass mit dem Use wollte man aber auch deswegen machen, weil man es dann von außen noch stylen konnte und ich weiß nicht, ob das auf diese Weise noch geht. Genau, das geht natürlich per Image nicht. Nee, genau. Das sind halt zwei verschiedene Anwendungsfälle. Wenn ich das nicht brauche, dann ist es für mich vielleicht einfacher, ich kann einfach ein Image Tag reinknallen.

Wenn ich es halt stylen möchte und Farben, also irgendwie Custom Properties da übergeben möchte, klar, dann muss ich es in das svg einbinden. Aber auch das geht halt dann, indem ich das svg einbinde mit diesem Hash hinten dran für den View. Genau. Ja, das war das. Spannend. Ich habe auch gar nicht mehr so viel. Ich habe noch dieses, genau, Preserve Aspect Ratio, das sieht man auch in der Demo. Also wenn man das svg selbst reinguckt, da gibt es den gleichen

View quasi zweimal. Nur einmal habe ich das Attribut gesetzt mit der Aspect Ratio

und einmal nicht. Und dann sieht man halt das muss ich selber nochmal reingucken genau, also wenn ich da Meet nehme, dann nimmt es halt wirklich den Ausschnitt, der da angegeben ist und ich sehe halt bei einer anderen Aspect Ratio werden dann Sachen abgeschnitten und wenn ich jetzt x mit y mit und slice als Keybind angebe für Preserve Aspect Ratio dann habe ich quasi diesen ja wie heißt das, Fit Object oder Object Fit simuliert, das heißt es wird dann eben dieser Bereich skaliert

und trotz der anderen Auflösung wird es halt dann oben und unten abgeschnitten, statt dass es eingepasst wird, was so der Default-File von SVG ist. Ich hoffe du weißt was ich meine. Ich bin mir nicht sicher. Also bei den, ne, oben ist das normale SVG und dann sind diese Views ähm, da habe ich die Aspect-Ratio geändert und dann ist das halt rechts und links abgeschnitten und bei den anderen geht es über die volle Breite. Ja, ja.

Ja. Genau, dann habe ich noch Text-Path mir angeschaut, weil da war was, was ein bisschen verwirrend war. Ich dachte nämlich zuerst, man kann das sowohl über ein Href-Attribut, also Text-Path generell heißt, ich habe einen Pfad und auf dem kann ich Text positionieren, sodass der dann eben dieser, dieser Kurve, diesem Pfad folgt.

Und zuerst sah das für mich so aus nach der MDN, dass es entweder ein Href-Attribut gibt, das verwendet wird, wo ich dann eben einen Pfad referenzieren kann, oder dass ich auch direkt ein Path-Attribut auf das Text-Path-Element setzen kann. Und das habe ich ausprobiert und es hat aber nicht funktioniert. Und dann habe ich festgestellt, dass nur Firefox dieses Path-Attribut überhaupt implementiert hat.

Und da die MDN halt von Mozilla ist und Firefox auch, haben die das aufgeführt, als wäre es einfach ein normales Attribut, aber es hat kein anderer Browser hat das

implementiert. Das heißt, man nimmt eben auch wieder so ein in diesem Devs-Element, was man meistens am Anfang vom Dokument dann setzt, vom SVG-Dokument, da definiere ich den Path und dann referenziere ich den im Text-Path per href, dann auch wieder über Hash und dann die ID und dann kann ich da drauf tippen und ich habe da auch wieder eine Codepen-Demo gebastelt. Oder habe ich irgendwas kaputt gemacht, glaube ich. Kann das sein? Warum habe ich da zweimal das Bild, das will ich gar nicht.

Muss ich noch fixen, bevor ich es bevor ich es dann veröffentliche. Und da sieht man, wenn man es im Firefox öffnen würde, würde man rechts in dem Bild auch noch was sehen im SVG, weil ich da den Path einfach direkt als Attribut gesetzt habe, aber in anderen Browsern geht das nicht. Also Path einfach vergessen, auch wenn man das vielleicht mal sieht, auch in der Demo, sondern stattdessen einfach den href benutzen.

Genau, und das sind so Sachen, da habe ich mich halt mit dem Code, mit dem SVG-Code noch nie mit beschäftigt. Ich habe mit Inkscape halt das gebastelt und am Ende kam da halt SVG raus.

Aber das mal wirklich zu gucken, so Pfade generell, das habe ich schon eher mal gemacht, weil man da vielleicht mit irgendwas experimentiert, wo man die Werte von dem Pfad dann ändern können soll oder so, aber jetzt so Textpfade, wie das überhaupt funktioniert und so, das war mal ganz interessant, da wirklich reinzugucken, was da eigentlich intern so passiert und dann spart man sich am Schluss vielleicht sogar sowas wie Inkscape oder Illustrator, sondern baut das einfach selbst.

Und es gibt ja auch tolle Online-Editoren, haben wir auch schon diverse Male verlinkt. Das geht dann, wenn man in einem sehr kleinen Team ist oder alleine an etwas arbeitet und sobald Menschen mit reinkommen, die sich hauptsächlich um grafische Belange kümmern, geht dieser Workflow leider kaputt.

Aber ich glaube tatsächlich, dass dieser Workflow, den ich kenne, dass Menschen da sind, die sich hauptsächlich ums Visuelle kümmern und das dann weitergegeben wird an andere Abteilungen und die dann da irgendwas daraus macht, irgendwie Frontend und dann gibt es noch Backend und keine Ahnung. Ich glaube, das ist gar nicht so üblich.

Ich kriege immer wieder mit, dass Leute sagen, ach ja, das ist doch kein Problem, dann nutze halt das Tool und dann machst du hier so mit den Farben das und dann sagst du, ey, ich würde die Hölle heiß gemacht bekommen, weil da jemand sagt, ey, das passt doch gar nicht ins Corporate Design, du kannst doch jetzt einfach eine neue Farbe erfinden. Aber ich glaube, das ist vielleicht nur in bestimmten Firmen oder in Projekten ab einer bestimmten Größe ist das überhaupt so.

Es gibt ganz viele, ganz viel Kleinkram, das meine ich nicht böse, ganz viel Sachen, wo tatsächlich, oder ganz viele Projekte, Webseiten, wo tatsächlich ein, zwei Personen dran sitzen und die das einfach dann tatsächlich entscheiden können. Und wahrscheinlich ist dieses, diese Welt, in der alles so ganz genau festgelegt ist und das alles so kompliziert ist, gar nicht so groß und das sind halt nur die großen Player, von denen es natürlich schon ein paar gibt, mit ein paar Seiten.

Aber es gibt wahrscheinlich sehr viel mehr Zeug, das tatsächlich so gebaut wird und dann kann man sowas natürlich machen und diese Online-Tools für SVG, die finde ich auch ziemlich cool. Ich liebe es auch, sowas von Hand zu optimieren, weil man dann sehr viel drüber versteht, wie es funktioniert.

Aber ich bin da halt genau an der Stelle schon mal sehr, sehr, wie soll ich sagen, ich will nicht sagen auf die Schnauze gefallen, ich habe mir mal sehr viel Mühe gegeben, mein SVG zu optimieren, weil ich dachte, ey was, da sind so viele kleine Punkte drin, die kann man doch alle klonen, das kann doch alles derselbe Punkt sein und du sagst jetzt, da kommt noch einer an die Koordinate, da kommt noch einer und da kommt noch einer und das SVG war am Ende noch ein Fünftel so groß

wie vorher und ich so, geil, geil und dann kam jemand um die Ecke und hat gesagt, ja und jetzt hätten wir gerne noch dies und ich habe hier bitte die Grafik und ich so, nein, ich muss jetzt wieder von vorne anfangen mit der Optimierung oder ich scheiß einfach auf die so und so viele Kilobyte und sag, okay, dann nehmen wir jetzt halt das, weil da genau das ins Spiel kommt, dann arbeitet eine Person damit, die eben nicht das Original hat, sondern das Original ist im

Spiel mit, irgendwie eingecheckt und er arbeitet aber auf einer anderen Version, die ich halt nicht zurückgespielt habe. Aber trotzdem hat es mal Spaß gemacht, so ein SVG zu optimieren von Hand und es um Faktor 5 kleiner zu machen. Ich kann es nur empfehlen, das mal zu machen, ein SVG mal von Hand anzufassen.

Ich würde gar nicht sagen, baue es selbst von Hand, das kann man natürlich auch machen, aber da kommt man, wenn man sich mit SVG noch nicht beschäftigt hat, kommt man relativ schnell an die Grenzen und ich finde es so, bin ich vielleicht einfach ein anderer Lerntyp, ich finde es so, relativ trocken zu lernen, wenn ich sage, okay, jetzt muss ich mal gucken, wie funktioniert jetzt so ein Kreis und den will ich jetzt da haben, wer soll diesen Verlauf haben, sondern wenn man sich einfach mal

eins anguckt, das ein bisschen komplexer ist und dann mal versucht zu verstehen, was ist denn da jetzt eigentlich was, finde ich, ist deutlich zugänglicher, sich mal den einzelnen Dingen zu nähern und dann kann man sich auch nur ein Ding rausgreifen und sagen, ja, ich will jetzt, wie gesagt, da war es 30 Punkte, ich hätte jetzt gerne mal nur einen, der aber immer wieder geklont werden soll, wie geht denn das?

Und dann nimmt man sich ein so Ding raus und dann hat man das zumindest verstanden, wie das funktioniert. Also, ihr dürft eure SVGs auch einfach mit Grafikkram bauen, da ist

kein Shame. Nein, natürlich nicht. Man, ich, ein Faktor ist halt, dass sowohl Inkscape als auch Illustrator beim Export noch jede Menge Metadaten reinhauen und teilweise wirklich Zeug, die das unendlich aufblähen und auch das, ja, wenn man nicht aufpasst und irgendwie, wenn man zu wenige Nachkommastellen beim Export angibt, dann sehen die Sachen plötzlich ganz anders aus in dem SVG und das ist schon, also, wenn man die Sachen dann, also, es kommt ja auch wieder

auf die Größenordnung an, wenn das Ding halt irgendwie millionenfach am Tag durch den Äther geleitet wird, dann sollte man sich vielleicht schon die Mühe machen, das vorher ein bisschen zu bereinigen, weil das summiert sich natürlich dann schon auf, wenn ich ein Riesenprojekt hab. Falls ihr mal morgens aufsteht und denkt, heute geht es mir viel zu gut, ich bin viel zu gut gelaunt, ich möchte jetzt ein bisschen schlechtere Laune haben, dann habe ich einen Tipp

für euch. Dann nehmt ihr mal aus irgendeinem Projekt von euch ein SVG-Icon, das macht ihr in eurem Text, das macht ihr in eurem SVG-Editor auf und dann zoomt ihr mal ganz nah ran, ganz, ganz, ganz nah und dann werdet ihr höchstwahrscheinlich sehen, dass da irgendwelche unsauberen Ecken sind, wo ihr denkt, hä?

Eigentlich sieht das doch gut aus, aber wenn man so ganz nah ranzoomt, wieso ist dieser Pfad da so komisch und diesen einen Ankerpunkt, den bräuchte man noch gar nicht und dann fangt ihr an, da rum zu optimieren, weil ihr denkt, ja, das kann doch nicht sein und das kommt ziemlich sicher, behaupte ich, von so falschen, kaputten Export-Tools oder von kaputten Optimierungstools, die zwischenrein geschaltet werden, weil ich behaupte, die Grafiker, die sowas gebaut haben,

die wissen schon, was sie tun. Die bauen auch vernünftige Pfade, die nicht irgendwelche komischen, sinnlosen Ankerpunkte haben.

Sowas kommt oft, weil wenn jemand ein Rasterbild automatisch vektorisiert, kommen üblicherweise keine perfekten Bilder dabei raus, oder durch irgendwelche Export-Tools und dann, falls euch euer Tag zu gut ist, damit könnt ihr ihn auf jeden Fall ein bisschen schlechter machen, weil ihr dann denkt, scheiße, wenn man da ranzoomt, das ist doch so unsauber, das kann ich nicht so lassen. Und dann sitzt ihr da und optimiert die SVGs von Hand. Ich sag's euch schon mal voraus.

Also viel Spaß schon mal damit. Ja, man kann damit schon viel Zeit verbringen. Ich hab's auch schon mal, ich weiß gar nicht mehr, in welchem Zusammenhang hab ich auch was geschrieben. Ich glaub, das war auch für dieses Animationsprojekt, was dann am Schluss halt, weil die Dateien waren teilweise schon recht groß.

Ich weiß gar nicht, ob nicht teilweise sogar waren auch Rastergrafiken dann wieder eingebunden und ich hab dann auch quasi ein Build-Script geschrieben, was am Ende die Dateien auch wieder möglichst klein raushaut. Deswegen ich hab diese Erfahrung auch schon gemacht, so wow, jetzt hab ich noch mal was rausgekitzelt und am Schluss ist es nur noch ein Fünftel. Also es kann auch Spaß machen, aber man kann halt auch viel Zeit da rein investieren.

Also hier, ist es auch nicht schlimm, wenn ihr ein paar unsaubere SVGs in eurem Projekt habt? Immerhin lieber SVGs, wo man die Unsauberkeiten gar nicht so sieht, als irgendwelche Rastergrafiken, die dann auch noch irgendwie blöd hochskaliert eingebunden werden. Also gerade so irgendwie auch auf Desktop sieht alles toll aus, aber sobald es irgendwie dann umbricht und volle Breite annimmt, dann wird die Rastergrafik hochskaliert, weil sie nicht eine ausreichende

Auflösung vorlegt. Oder plötzlich auf so einem geilen High-DPI-Display vom Phone oder sowas. Da sieht es dann plötzlich verraschend aus. Es gibt ja diesen tollen Sticker, den ich auch auf meinem Laptop hab, diesen SVG-Sticker, wo das SVG-Logo absichtlich schlecht mit JPEG-Artefakten Das finde ich so super. Weil man es auch auf den ersten Blick sieht man es nicht so genau. Wenn man dann aber guckt, stellt man fest, wie schlecht ist diese Grafik eigentlich. Und es passt so wunderschön.

Ich glaube, das habe ich mitgebracht vom Chaos Communication Congress. Und der Witz ist, ich habe den Witz erst verstanden auf der Rückfahrt, als ich im Zug war. Ich gucke da drauf und denke, ja, SVG, cool. Und dann gucke ich nochmal genauer hin und denke so, warte mal, ich habe diesen Sticker mitgenommen, ohne den Witz zu verstehen. Ja, das ist schon richtig. Das ist schon richtig gut. Also hier, Props gehen raus an die Person, die das sich ausgedacht hat.

Diesen Sticker, das ist wirklich, das ist einer meiner Lieblingssticker. Wir haben auch teilweise für Kunden Sachen vektorisiert, auch wenn es gar nicht gefordert war.

Das wurde gar nicht explizit irgendwie gesagt, aber wenn ich dann sehe, das ist einfach, das ist ein Logo, das wirklich nur aus einer Form besteht und nicht mal mit irgendwie groß Verläufen oder sowas, dann haben wir das teilweise auch vektorisiert und dann geglättet, damit es einfach gut skaliert und schön aussieht, auch gerade auf HighDPI. Das ist einfach, das gehört für mich auch ein bisschen zum Handwerk

dazu. Ich habe vor gar nicht so langer Zeit das Logo von einem Kunden von mir vektorisiert, weil ich es auf meine Webseite packen wollte als Referenz. Ja, zum Beispiel auch für sowas. Das haben wir halt auch oft gemacht und dann haben wir es eh vektorisieren müssen und dann haben wir es halt auch für die Webseite von denen gleich so umgesetzt. Oder wir hatten auch mal Printprojekte schon, wo dann irgendwie, ja hier, das ist unser Logo.

Und das ist halt irgendwie die Grafik quasi, die sie auch in der E-Mail, in der Signatur anhängen, also irgendwie voll schlecht aufgelöst. Und dann fragst du nach, ja gibt es das nicht irgendwie als Vektor, ja wir haben das irgendwo, haben wir es noch größer, kriegst du eine Rasterdatei, die wenigstens ein bisschen

größer ist. Manchmal hat man das Glück, dass sie dann noch den oder die Grafiker ausfindig machen, die das erstellt hat und dann kriegt man es wirklich noch als Vektor und oft heißt es halt, nee das haben wir nicht, wir haben das nur so, auch wenn es mit Sicherheit irgendwo rumliegt, aber keiner weiß es halt mehr.

Und das haben wir dann auch vektorisiert, haben jetzt im Druck wenigstens halbwegs dann sind halt vielleicht ein paar Kurven nicht ganz exakt, weil wir die Mühe dann, die Zeit nicht investiert haben, aber es sieht schon mal tausendfach besser aus als ein hochskaliertes, eine hochskalierte Rastergrafik. Also das wundert mich wirklich oft, dass man auch bei einfachen Grafiken und gerade bei Logos dann immer wieder doch Rastergrafiken sieht, wo man sich fragt, warum?

Das hat doch jemand als Vektor erstellt, warum wird das dann gerastert und eingebunden?

Interessant ist ja auch, dass so ich sag mal Billigdruckereien ganz gerne tatsächlich Rastergrafiken anfordern als für den Druck was mich extrem wundert die wollen teilweise, also so Flyer-Alarm oder sowas die wollen eigentlich gar kein PDF haben, sondern die sagen, gib mir ein JPEG in Größe X das dann groß genug ist sozusagen wahrscheinlich ist das dann wahrscheinlich ist PDF so fehleranfällig, dass du das falsche PDF Format nimmst und dann irgendwie doch was Mistig ist, dass sie sagen

vorstellen oder der Workflow ist zu kompliziert also sagen, ey das verwirrt wahrscheinlich die Leute noch mehr, wenn da irgendwas mit Vektor steht ja und dann gib mir ein PDF X3 mit bla bla bla und eingebetteter Schrift und was weiß ich, was ich könnte mir vorstellen, das macht wahnsinnig viel Ärger und wenn du so einen super riesigen Durchsatz hast und quasi nicht irgendwelche Agenturen deine Kunden sind sondern Hints und Kunst, die sich Flyer drucken lassen wollen, da

ist das Fehlerpotential bei PDF wahrscheinlich so groß, dass sie sagen, scheiß drauf wir legen ein Grafikformat fest und das ist jetzt in unserem Fall JPEG aber es muss halt mindestens so und so groß sein und dann ist es schon gut genug also ich hab da ja schon öfter Sticker drucken lassen und das kommt dann auch okay raus am Ende, weil die lassen sich dann quasi viermal so groß schicken und trotzdem fragt man sich halt warum dann nicht gleichwertig

ich könnte mir halt, das würde mich echt interessieren falls jemand von Flyeralarm hier zuhört bitte mal Bescheid sagen, aber ob meine Theorie stimmt, weil ich könnte mir echt vorstellen das macht den Workflow von denen so viel einfacher ein Dateiformat gibt es oder zwei und das ist alles Raster und die müssen halt groß genug sein und wenn es dann halt wenn da eine Qualitätsscheiße ist, bist du selbst schuld so ungefähr naja, wie auch immer so, haben wir noch was

zu SRG? Genau, ich hab noch ein paar Sachen hab ich noch, aber die meisten werde ich nur ganz oberflächlich kurz ansprechen, aber zwei Sachen hab ich noch, wo ich drauf gestoßen bin, die ich so nicht kannte und die ich ganz cool fand, das eine ist Switch, da kann ich, also es ist ein bisschen wie so ein Switch-Statement und das dient hauptsächlich dazu ich hab sonst nichts anderes gefunden, weil die Sachen, die da genannt werden, die sind teilweise gar nicht implementiert

da gibt es noch keine Dokumentation dafür für Required Extensions und die Required Features, das ist irgendwie deprecated, also wofür es wohl hauptsächlich genutzt wird, ist Text auszutauschen basierend auf der Systemsprache das heißt, ich kann ein multilinguales SVG machen und und natürlich auch ein Default festlegen, also ich mach das Switch-Tag außenrum und dann kann ich verschiedene Text-Tags reinbauen und die haben dann System Language ist gleich AR für Armenisch, schätze ich mal

oder Arabisch. Ich kann aber auch Komma separiert, zum Beispiel D, Deutsch und Niederländisches, beides Hallo das kann ich Komma separiert machen Hätte ich das gewusst, hätte ich das auch viel einfacher umsetzen können für den Kunden mit diesen Animationen weil die waren nämlich auch übersetzt auf verschiedene

Sprachen. Das ist ja fancy. Und da hab ich dann extra, da wird dann der Text ausgetauscht und so, das hätte ich mir alles sparen können aber wobei, nee, hätte ich nicht das, also bei dem Kunden musste man das auch ändern können, also während, man hat oben so ein Language-Menü gehabt und mit der System Language, die verlässt sich halt wahrscheinlich auf das, was der Browser halt zurückmeldet und ich weiß nicht, ob ich mit das müsste man mal

hab ich jetzt keine Zeit gehabt, das auszuprobieren, aber dass man vielleicht mit dem Lang-Tag das beeinflussen kann. Ich hau das jetzt einfach mal schnell, das interessiert mich jetzt doch in den Code-Pen rein und guck jetzt mal, also wenn ich das standardmäßig, dieses Beispiel anschaue auf meinem Handy hat es mir das auf Deutsch gezeigt wo mein Handy auf Englisch eingestellt ist

interessanterweise. Hier im Browser krieg ich es jetzt auf dem Desktop krieg ich jetzt Howdy ausgegeben, das wäre en us, was mich auch irritiert, weil ich eigentlich en gb eingestellt hab als mein Systemlocale

sehr seltsam. Jetzt mach mal auf das svg mal oben, lang ist gleich de gucken was es dann macht nix macht es dann muss ich vielleicht dem html Element das Außenrum geben, kann ich aber in CodePen nicht dann mach ich mal irgendwie div lang ist gleich de Sehr geehrte Damen und Herren, Sie hören Live-Code in einem zeitverzögert ausgestrahlten Autopodcast, weil Sarah den Stream

vermisst. Ja, ja, ja, da haben wir solche Sachen alles gemacht im Podcast ist natürlich ein bisschen langweilig, aber ich wollte das jetzt einfach mal schnell ausprobieren, ob man irgendwie auf das SVG oder auf das Dokument Außenrum lang Tag, lang Attribut setzen kann und damit dann die Sprache beeinflussen, aber das geht wohl nicht vielleicht gibt es da noch irgendwie Möglichkeiten das da werde ich mal nachforschen, wenn ich was rausfind, gibt es da einen Nachtrag

in der kommenden Folge, aber sonst wäre das nämlich echt ganz interessant aber wenn ich jetzt wirklich einfach nur eine Grafik habe und gar keine Sprachwahl Außenrum, aber ich möchte vielleicht den User wirklich, keine Ahnung, da ist irgendwie ein Maskottchen und das hat eine Sprechblase da wäre es ja vielleicht wirklich ganz cool wenn das deutsche User mit Hallo begrüßt und andere User mit französisch mit Bonjour, also das finde ich ganz cool und ich kannte das einfach nicht, dieses Switch

Element, das war mir komplett neu. Das sorgt potenziell in meinem Kopf für Probleme, weil die brichten das dann um und keine Ahnung was aber theoretisch, ich finde, dass es das geht, finde ich mega fancy.

Genau, das war das Switch Element und eigentlich war das ursprünglich auch mal gedacht um Required Features, also Features die, also kann das Animationen oder kann es Gradients oder nicht dass man darauf basierend dann den Content austauscht, aber das ist irgendwie deprecated und ja und das andere, da gibt es auch keine Beschreibung dazu, Required Extensions was das soll, wahrscheinlich ist das auch wird das gar nicht mehr benutzt, aber so für die Sprache

wechseln, das finde ich eigentlich echt eine coole Sache Dann habe ich als nächstes noch Marker, ich wusste zwar, dass man auf Pfade solche Marker setzen kann, also dass ich dann bei einem am Ende von einer Linie zum Beispiel so ein Pfeil habe, aber was ich nicht wusste ist, dass ich als Marker definieren kann eben eigene Sachen, also dass es nicht ein Pfeil sein muss, sondern dass ich da theoretisch ein Emoji oder so benutzen kann.

Das dann auch wirklich von der Pfeilrichtung her, wenn ich jetzt so eine Wellenkurve habe, dann übereinstimmt mit der Richtung, in die das geht, dass der Pfeil dann nach oben oder nach unten kommt und da kann ich aber wirklich eine eigene Form festlegen, also in dem Fall bei der MDN ist es zwar auch ein Pfeil, also einfach ein Dreieck im Endeffekt, ein schwarzes, aber da könnte ich alles mögliche definieren und dann gebe ich dem wieder eine ID, ID-Arrow in dem Fall

und dann kann ich unten, kann ich dann sagen bei einem Line-Element zum Beispiel Marker-End und dann kann ich eben über URL, Klammer auf Klammer zu und den Hash mit der ID kann ich da dann definieren auf welches wie ein Symbol, wo wir es vorhin schon drüber hatten, was es da benutzen soll was es referenzieren soll und das setzt es dann da ein und dann kann ich das gleiche eben halt für Marker-Start und Marker-Mit auch noch machen und oben bei dem Marker selbst sieht man dann mit dem Orient

wird dann noch Auto Start Reverse, ist da ein Keyboard zum Beispiel, dass die Pfeile automatisch an beiden Enden Richtung Ende schauen, aber in der Mitte der Kurve weiter folgen und das kann ich eben beeinflussen, dass ich sage, ich möchte aber vom Start ausgehend sollen alle Pfeile in die Laufrichtung von dem Pfad quasi zeigen und so weiter Genau, das war mir auch neu ich weiß gar nicht wie das ist, man kann diese Marker direkt in Inkscape kann man schon quasi anklicken

einfach, ich möchte einen Marker haben und ich möchte den und den Marker, wahrscheinlich baut dann Inkscape auf automatische Weise selber dann so einen Marker in den Devs zusammen oder ich weiß nicht, ob es vielleicht auch da Standards gibt mit dem Arrow, die dann vielleicht den Browsern sogar unterschiedlich gerendert werden oder ob das in der Spec quasi schon festgelegt ist wie die auszusehen haben, keine Ahnung das sind eben so Sachen, da beschäftigt man sich mit nicht mit, wenn man so

Tools benutzt und die hauen dann einfach irgendwas da rein und man weiß gar nicht, wie es am Ende intern funktioniert Dann noch ganz kurz, Pattern da kann ich eben wie der Name vermuten lässt, ein Muster festlegen, wo ich dann sage der Fill oder der Stroke von dem Element, der soll dieses Pattern verwenden und das wird dann immer wieder benutzt und in diesem Pattern Element kann ich einfach dann wieder diese ganzen normalen geometrischen Formen also Polygon, Circle, Rectangle usw.

drin verwenden also auch mehrere Elemente verschachtelt ich könnte also ein Emoji z.B. nehmen das Augen, Nase, Mund hat und ein Pattern außen rum packen und dann kann ich dieses Pattern wiederum verwenden um andere geometrische Formen oder eben den Stroke um die Form damit zu füllen Dann haben wir noch Filter und da gibt es viele Texte die mit FE was wahrscheinlich für Filter-Effekt steht nehm ich an steht da gibt es dann sowas wie Gaussian Blur also ein Blur-Effekt oder

so ein komisches Rauschen also was dann aussieht wie bei Analog-Fernsehen früher wenn der Empfang schlecht war und so weiter, also da gibt es so viele Sachen per Point Light kann ich irgendwie festlegen was dann so ein Spotlight-Effekt erzeugt also da gibt es wirklich krasse Sachen und weil das aber so viel ist und jedes Ding dann wieder seine eigenen Attribute hat wollte ich das jetzt nur ganz am Rand nennen also man kann da echt coole Sachen mitmachen, einfach mal die Demos

anschauen, auch auf der MDN ich glaube halt auch, dass das nix ist was man regelmäßig selber bauen wird, also ich glaube da verlässt man sich halt drauf, dass die Tools mit denen man die SVGs erstellt das für einen machen und dass ich da einfach nur Blur anklicken, dass ich sagen muss, ja ich möchte Blur und dann möchte ich den mit so einem Pixelradius haben generell ist das eben die Sache, wo wir es eben schon drüber hatten ja, kommt man überhaupt in die Situation

dass man so ein SVG selbst baut ich glaube komplett vom Scratch wird man es nicht tun, maximal, dass man vielleicht eben so aus fertigen SVG Icons dann so ein Raster baut, aber auch das würde man wahrscheinlich automatisieren und nicht per Hand bauen und rumschieben, sondern gucken, dass man sich dann ein Skript baut das dann alle Icons ausliest und die alle in so ein Grid haut und entsprechend benannt Ich finde ja Turbulence geil. Turbulence, ja

ist auch cool. Das ist wirklich das ist ja echt verrückt weil das, also was das ich versuche gerade mal zu beschreiben was das macht, also da ist eine Demo drin, da wird ein ganz normaler Kreis genommen, das ist einfach ein schwarzer Kreis, aber das Turbulence hat diverse Attribute zum Beispiel Base Frequency Number, Octaves und so weiter und dann wird der tatsächlich so zerfressen aber asymmetrisch. Das sieht aus wie so ein

Tintenklecks dann am Schluss. Genau, sieht aus wie ein Tintenklecks, aber es ist nicht wirklich man erkennt keinen Pattern irgendwie es wird irgendwie, es gibt eine Art irgendwie random ich mich würde mal interessieren, ob das bei mir genauso aussieht wie bei dir, ob das wirklich deterministisch ist oder ob da irgendwie was randommäßiges reingeht.

Wir können das gleiche reinhauen mal in Firefox und einmal in Brave und dann schon mal gucken, ob das das gleiche ist, aber ich würde mich wundern wenn das nicht in der Spec festgelegt ist, wie dieser Filter genau die Berechnungen durchführt weil man will ja schon am Schluss eigentlich aber vielleicht steht da tatsächlich drin, dass eine random Number irgendwo generiert wird, wer weiß es ist wirklich identisch in Firefox und in

Brave. Interessant ist, dass ich in Firefox gar nichts sehe Oh, okay Bei mir funktioniert es in Firefox Aber vielleicht, ne, ich glaube der Link funktioniert vielleicht einfach nicht, den ich da genommen hab Ja, aber das ist Turbulence ist echt verrückt Interessant ist, dass der Filter selbst, der wird über ein Style Attribut gesetzt also das ist das Circle Element und dann ist Style gleich Filter Doppelpunkt und dann per URL wieder und den Hashwert dann den benannten Filter und Filter

gibt es ja in CSS gab es ja schon vorher, also CSS Filter wo man dann auch irgendwie eben einen Blur machen kann oder so und in SVG kann ich eben diese Filter auch selber definieren und kann sogar also in dem Fall ist es ja sogar eine Displacement Map und diese Turbulence in einem das sieht auch lustig aus, wenn du die Displacement Map mal raus machst das Displacement Map Element dann sieht es nämlich ganz anders aus, die Turbulence selbst ist nämlich

ganz krass, das sieht aus wie so ein Batik Muster so ein bisschen Hippie, ich habe mir LSD eingeworfen, so stelle ich mir das zumindest vor so sieht das aus und dann wird das kombiniert eben mit dieser Displacement Map achja und dann guck mal, da hast du in, also du kannst das Source irgendwie definieren also den Input quasi festlegen was dann da weiter verwendet, verwurschtelt wird also ganz verrückt, deswegen das geht so in die Tiefe und interessant zu wissen

und vielleicht möchte ich mal irgendwas mit Filtern machen, aber das brauchen wir jetzt nicht im Detail also nicht, dass ich es überhaupt beschreiben könnte im Detail, aber deswegen machen wir es einfach nicht. Ich möchte es tatsächlich in meinem Grafikprogramm drin haben, so dass ich das quasi explorativ als Option entdecken kann, ja da klicke ich mal drauf, was passiert eigentlich dann?

Weiß ich gerade gar nicht aus dem Stehgreif wie die Filterimplementierung bei Inkscape ist also so Patterns und sowas kann ich auf jeden Fall festlegen, so die Filter weiß ich jetzt gar nicht, da habe ich auch schon lange nicht mehr mit Inkscape gearbeitet. Also so ein klassischer Drop Shadow oder sowas, das gibt es da auf jeden Fall. Ja, gut das kann man inzwischen ja auch mit CSS machen.

Ja ja, aber das gibt es auf jeden Fall als SVG-Filter, da bin ich mir ganz sicher, das ist aber wahrscheinlich so das Klassischste, das Einfachste ähm ich muss gerade mal gucken in meinem Box hier SVG, was es denn da so gibt boah da gibt es so viel Zeug Egal, müssen wir jetzt nicht zu tief

rein. Ja dann gibt es noch diverse Animate Tags, also einmal Animate selbst und Animate Motion und Animate Transform das ist aber eigentlich inzwischen auch durch CSS abgelöst würde ich sagen also ähm ich meine dass die auch, dass das zusammenhängt mit SMIL, aber da gucke ich nochmal bevor ich jetzt Blödsinn erzähle SVG Animation with SMIL genau das sind auch diese Animate Transforms werden da auch benutzt SMIL ist irgendwie Synchronized Multimedia Integration Language aber

ich meine dass die Unterstützung dafür auch deprecated ist mittlerweile oder zumindest dass das einfach fast jeder auf SVG umgestiegen ist um da irgendwie was zu machen, aber interessant dass es auch ohne CSS vorher möglich war schon SVGs zu animieren und zu sagen Folge diesen Pfad und transition auf irgendwelche Farbwerte oder so das war damit schon möglich und dann zum Schluss noch es gibt sicherlich noch andere interessante Sachen aber es ist einfach man kann da wirklich sehr in die Tiefe

gehen oder man kann es eben auch lassen und deswegen wollte ich nur zu Accessibility noch was sagen so eine Rastergrafik die ist natürlich nicht Accessible gut mit KI inzwischen schon, dass die da Texte auch rauslesen kann und was beschreiben kann aber wir hatten es ja auch schon über automatische Bildbeschreibungsgenerierung und was da dann so rauskommt und SVG ist einfach quasi inherent Accessible wenn man entsprechend die Technik an sich, man muss natürlich auch

was noch dafür tun, aber ich sag mal der Browser kann darauf zugreifen und wenn es zum Beispiel Inline SVG ist ist es automatisch in dem Accessibility Model mit drin im Browser und der kann darauf zugreifen aber klar, ich muss natürlich entsprechende Inhalte auch setzen damit das auch sinnvoll nutzbar ist also es gibt ein Title Tag und es gibt ein Desk Tag für Description Title ist gedacht für einen ganz kurzen Titel und Description nochmal für eine für eine genauere Inhaltsbeschreibung

und das kann ich halt direkt in die Grafik reinsetzen und muss mich dann nicht drauf verlassen, dass der oder diejenige der die Grafik dann einsetzt am Schluss dann ein Alt-Tag zum Beispiel setzt, sondern die der Grafik ist warum passiert mir das immer noch ein alter Attribut setzt, ja Gott, wir haben uns schon so oft drüber lustig gemacht, ich sag's selber genau, also dass der dann niemand ein Attribut setzen muss, sondern der oder die Erstellerin der Grafik kann das schon

festlegen, was da drin stehen wird und dann kann theoretisch der Browser drauf zugreifen zu interessanten Stillblüten führen hatte ich jetzt gerade für Tage weil nämlich der Alternativtext eines Bildes, der sinnvolle Alternativtext eines Bildes sehr stark vom Kontext abhängt und nicht unbedingt also wenn du jetzt ein Bild von einem Haus hast ist es nicht unbedingt sinnvoll, dass da Haus drin steht, das könnte zum Beispiel Homepage sein, was da gefordert ist

dann in diesem Kontext, wenn du jetzt zum Beispiel einen Link hast oder wenn das jetzt ein Kettensymbol ist, könnte vielleicht Link damit gemeint sein oder Papierkorb könnte löschen sein und es kommt halt echt, du kannst es aber auch nicht eindeutig festlegen, wann ist es denn also du musst es von Fall zu Fall unterscheiden Ich muss auch sagen, ich weiß jetzt auch nicht explizit, wie das integriert ist in die Screenreader ob die automatisch bei SVG das immer vorlesen oder

ob ich es überschreiben kann dann mit einem Alt-Attribut oder wie hängt auch mit Sicherheit davon ab, ob ich es per Image-Tag einbinde oder über Object oder über Inline-SVG zum Beispiel, wenn ich jetzt ein SVG per Image-Tag einbinde, weiß ich nicht, ob der Browser dann reinguckt ins SVG und sich da den Titel rauslutscht oder ob man dann doch ein Alt-Tag braucht Alt-Tag, schon wieder gesagt, Alt-Attribut Verdammt! Warum sagst du das?

Ich weiß es nicht, weil ich komplett raus bin aus der Sache, ich bin keine Entwicklerin-Identität mehr Okay, also alles, was Sarah heute gesagt hat, ist Quatsch Nein, also was ich auf jeden Fall sagen kann, ist, wenn das SVG direkt eingebunden ist, das ist eine Sache, da bin ich mir ganz sicher, wenn das SVG direkt eingebunden ist in den Code, also nicht als Image und du das Title das Title-Tag da drin siehst, das wird auf jeden Fall standardmäßig

vorgelesen. Ich weiß allerdings tatsächlich nicht, was gewinnt, wenn ich dem Ding jetzt auch noch ein Alt-Attribut geben würde wer gewinnt dann? Kommen die dann

nacheinander? Da gibt es, das ist je nach Fall sind die Sachen nicht immer ganz eindeutig das weiß ich einfach jetzt gerade nicht müsste ich ausprobieren genau, aber wie gesagt die Idee, den Text damit reinzuschreiben, ist erstmal ganz nett, aber ich hatte schon oft den Fall, dass dann da Quatsch steht, weil das eben das Bild beschreibt, aber ich kontextabhängig was ganz anderes brauche, also bin ich mir gerade unsicher, ob ich der Meinung bin, ob das eine gute

Idee ist, das reinzuschreiben oder nicht weil wenn ich es nicht mache dann, naja, also ich glaube das Ding also hauptsächlich bei Icons ist es wahrscheinlich sehr kontextabhängig, wo führt das jetzt hin wenn ich da drauf klicke aber bei einem Diagramm oder bei einer einfach so einer Schmuckgrafik, da ist ja in der Regel, was da drin ist, irgendwie unser Maskottchen hämmert mit einem Hammer einen Nagel in die Wand oder keine Ahnung Interessantes Maskottchen

Ich weiß nicht, was mir jetzt gerade da so Baumast oder so Der Hammerhans Der Hammerhans hämmert Kohle Kohlenägel Egal, egal, egal Egal, ja Also es ist kompliziert Aber es ist eben, es ist Text basiert und der Browser hat Zugriff auf die einzelnen Elemente und dadurch ist es an sich manchmal einfach technisch mehr accessible als als eine Rastergrafik aber natürlich muss ich entsprechend auch was einbauen, was dann ausgelesen werden kann Ich würde sagen, das kann man so stehen lassen

allerdings möchte ich sagen, in den meisten Fällen ist es eine gute Idee dem Bild einen Alternativtext zu geben und sich nicht drauf zu verlassen, was so drin ist weil das durchaus Quatsch sein kann, der in der Reihenfolge, wie es dann irgendwie vorgelesen werden würde, keinen Sinn ergibt oder dann fehlt was Wichtiges oder so, oder du hast vielleicht nur die Legenden, die dann vorgelesen werden von irgendeiner Grafik oder sowas Ich glaube auch, dass SVGs inline einbinden nicht der Standardfall

ist, also ich glaube, meistens wird es darauf hinauslaufen, das wird halt von der Grafikabteilung abgelegt als SVG und dann wird das eingebunden über ein CMS oder so mit einem ganz normalen Imagetag und dann kannst du sowieso einen Alttext definieren. Ja, aber das CMS könnte das ja auch automatisch mit direkt reinschreiben. Das kann ja

so oder so funktionieren. Also, dass es das ausliest und dann den Alttext vorpopuliert zum Beispiel, aber das ist ja auch schon mal ein Start, dann habe ich was und wenn ich feststelle, in dem Kontext passt das nicht, kann ich es überschreiben, aber dann hätte man zumindest schon mal, wir hatten es da ja auch schon drüber, so, dass Leute beim Einpflegen von Content dann das wieder vergessen, obwohl eigentlich vom System das vorgesehen ist, dass da Texte hinterlegt werden.

Man könnte es nutzen halt, um eine Vereinfachung für den Prozess zu bieten und dazu die Leute, ja, ein bisschen diese Hürde zu nehmen, sich was überlegen zu müssen, sondern wenn sie sehen, da steht was drin, aber es ist nicht passend, dass sie es dann vielleicht eher korrigieren, als wenn sie sich selber was überlegen müssen. Ja, Alternativtexte, da könnte ich in der Doktorarbeit drüber schreiben.

Vor allem über die Frage, wie könnte man Leuten helfen, Alternativtexte zu schreiben, dass sie es machen. Da habe ich immer noch keine eindeutige Antwort drauf, aber es gibt Ansätze. Ja, man muss technisch was tun meistens. Nur mit Awareness ist es nicht getan, mit die Leutewissen, dann machen sie es trotzdem nicht, weil sie zu faul sind. Tut mir leid, ich ein gebranntes Kind spricht hier zu euch.

Vielleicht noch ganz kurz, ich habe vorhin auch schon Gradients angesprochen, da gibt es dann Lineargradient, Radialgradient und dann natürlich auch wieder Text dann drin für Start und Stop, die ich festlegen kann. Es gibt noch Masken, also dass ich Teile maskiere, also wie man es auch aus Photoshop kennt, ich habe dann einen schwarz-weiß-Gradient und leg den dann irgendwie als Maske, definier ich den für irgendein Objekt und dann wird das entsprechend des schwarz-weiß-Verlaufs transparent.

Genauso gibt es auch Clip, mit dem ich dann eben oder Clip Path heißt das Element, mit dem ich dann Sachen ausschneiden kann und das hat auch wieder alles seine eigenen Attribute und ich kann auch wieder den Clip Path dann eben vordefinieren und dann über die ID wieder ansprechen. Also die Möglichkeiten in SVGs sind wirklich schier endlos und man kann da echt cooles Zeug mit machen.

Also bei Clip Path ist die Demo wieder so ein Herz, so ein kleiner roter Punkt und der wächst dann und dann färbt er das Herz rot ein und so Zeug. Das ist schon eine gute Definition von ich steig mich so tief ein. Das wollte ich jetzt einfach nur noch, das gibt es auch noch und ich glaube nämlich dann haben wir wirklich so alles an Grunddingern aber ich spreche jetzt nicht über jedes Element und jedes Attribut.

Da habe ich nämlich auch einen Link im Trello wo es eine Übersicht gibt, den habe ich glaube ich schon abgehakt fälschlicherweise. Ja guck mal, wenn du oben guckst bei SVG SVG Attribute Reference Wenn du da mal drauf klickst. Ach du Scheiße. Da ist halt alles mögliche drin. Oh mein Gott. Halt nicht nur ID und was weiß ich, sondern wirklich alles. Dagegen ist Math

echt ein Witz. Also es gibt halt einfach so viele Kind Elemente und die dann auch wieder jeweils ganz unterschiedliche Attribute haben, weil sie halt einfach also allein schon zwischen einem Circle und einer Linie und einem Polygon ist halt einfach ein Unterschied, was das braucht. Das eine braucht nur einen Startpunkt und einen Radius und das andere braucht halt mehr. Und dementsprechend wenn wir hier alle Attribute durchgehen wollten, also ich glaube drei Folgen sind nicht übertrieben,

die wir dafür brauchen würden. Ne, ne, ne. Ich glaube man könnte noch mehr machen. Also ich sag mal dazu, ich versuch kurz die Seite zu beschreiben, da steht schon SVG Attributes A to Z A to Z und die sind tatsächlich nach einzelnen Buchstabenblöcken aufgeteilt und in A alleine sind eins, zwei, drei, vier, fünf, sechs, sieben. Nur in A sind sieben drin. Und es gibt tatsächlich zu fast jedem Buchstaben auch was.

Also oft ist es ja so bei alphabetischen Aufstellungen, ja bei Y und Z ist dann nix, weil, ne, was fängt da schon mit an? Aber hier gibt es halt wirklich Y, Y1, Y2, weil das natürlich bei so Kurven brauche ich eben diese verschiedenen Ankerpunkte. Bei Z habe ich Zoom und Pan und auch ein Z Attribut. Also es gibt wirklich, ich weiß gar nicht, ob es einen Buchstaben gibt, wo es nix dazu gibt. Q, Q gibt es nicht. Okay. Aber es ist echt viel.

Deswegen, ja, man könnte hier noch viel weiter in die Tiefe gehen, aber das macht einfach keinen Sinn. Und deswegen fangen wir jetzt mit SVG auch auf. Sehr gut. Dann gehen wir jetzt nicht so tief in die Tiefe bei Math, weil es gibt Mathematik. Ich dachte schon, ich habe zu wenig vorbereitet. Von mir kommt jetzt viel weniger. Mathematik, Mathematik, immer nur Mathematik.

Und der Grund auch, warum ich jetzt nicht so tief reingehe, ist auch, ich habe mich damit heute zum allerersten Mal beschäftigt, und ich bin ganz ehrlich, ich weiß nicht, ob ich irgendwo das überhaupt schon mal gesehen habe, außer auf der Wikipedia oder so. Das ist der einzige Ort, der mir einfällt, wo das mir vielleicht schon mal wirklich begegnet ist und dann halt in irgendwelchen Demos. Aber letzten Endes, genau, also, was ist eigentlich MathML? Mathematical Markup Language.

Das ist auch auf XML basiert, genauso wie SVG. Man kann es in HTML direkt reinschreiben. Und ich habe mal geguckt, von wann der erste, der MathML 1.0 ist. Und zwar W3C Recommendation 7. April 1998. Also noch älter als SVG. Und das wundert mich jetzt gar nicht so arg, weil das ganze HTML ja aus dem wissenschaftlichen Kontext überhaupt entstanden ist, ja. Und dass man da was braucht, um dann eben halt auch Formeln in der Physik oder in der Mathematik darzustellen und so,

macht auf jeden Fall Sinn. Und das überrascht mich eher, dass SVG auch schon so frühzeitig da, ja, entwickelt wurde. Ich hab dann auch bei, genau, also es ist da, um Formeln darzustellen. Ich würde sagen beliebig komplex, aber ich bin auch kein Mathematiker. Das heißt, die Mathematiker könnten mir jetzt gerne erklären, was denn damit nicht geht. Es gibt bestimmt irgendetwas, was damit nicht geht, was man damit nicht darstellen kann.

Aber ich fand es ganz spannend, in die, in die By Can I Use reinzuschauen, zu MathML. Und wann ist es denn eigentlich so in Browsern unterstützt gewesen? Und interessant ist, dass es in Chrome in der Version 24 unterstützt ist, By Can I Use, von 25 bis 96 nur so partial. Ach, das ist ja verrückt. Von 97 bis 108 auch wieder partial, aber anders. Und von 109 ab wieder drin. Ich kann mir nicht vorstellen, dass es stimmt. Da geht es bestimmt um einzelne Dinge, die nicht gegangen sind oder so.

Weil das ist so alt. Ja, egal. Also, ich würde jetzt sagen, man kann das benutzen. Das, ja. So, und wenn ich jetzt sage, man kann das benutzen, dann muss ich mal überlegen, was davon kann ich benutzen? Weil wenn man da Speck rumliest, dann merkt man gleich, es gibt da unterschiedliche Standards. MathML an sich ist nämlich viel, viel größer als das, was im Browser unterstützt ist. Im Browser ist nämlich nur unterstützt MathML Core.

Und zwar zur Geschichte, es war ursprünglich gedacht so als Multipurpose-Sprache für alles mögliche. Also zum Beispiel nicht nur für Webseiten, sondern auch EPUB, LaTeX, für Office-Suites und für Browser. Also im Prinzip so fast alles, wo man irgendwie solche mathematische Formeln haben möchte. Und das hat aber irgendwie nicht so geklappt.

Viel wurde nicht implementiert und dann hat man irgendwann sich drauf verständigt, okay, wir wollen aber jetzt trotzdem festlegen, dass irgendwas im Browser zumindest davon funktioniert. Und dann seitdem gibt es MathML Core. Und ich glaube, das ist auch ganz gut unterstützt. Das ist aber immer noch in Editors Draft tatsächlich. Zuletzt aktualisiert vom 23. Mai dieses Jahr. Ja, so. Das zur Geschichte ein bisschen. Wofür ist jetzt Math?

Ich habe es ja schon gesagt. Also es ist eigentlich darum, dafür eine mathematische Formeln und Gleichungen aufschreiben zu können. Und interessanterweise übernimmt der Browser da relativ viel an der Formatierung. Der macht da einige Dinge, die ich teilweise auch gar nicht nachvollziehen konnte, wo ich erwartet hätte, dass ich das irgendwie den Style nachvollziehen kann. Ich konnte aber zum Beispiel die Linie von einem Bruch

nicht nachvollziehen, wo die herkommt. Ich habe da kein Browser-CSS dazu gesehen. Oder die Wurzeln oder so. Und gehen wir mal ein bisschen drauf ein, wie es funktioniert. Ich bin, wie gesagt, nicht so extrem tief eingestiegen, aber ich habe ein schönes Cheatsheet gefunden, das alle möglichen Beispiele hat und daran hangele ich mich mal so ein bisschen durch, weil ich das dann auch noch ein bisschen besser fand als die MDN-Beispiele.

Da anhand dieses Cheatsheets, das auch in die Shownotes kommt, zeigt sich mal wieder, Content is King. Es ist egal, wie was aussieht, wenn der Content gut ist, ist vollkommen egal, ob sich jemand beim Layout viel Mühe gegeben hat. Ist von der Seite cheat-cheats.org, finde ich ganz interessant. Und zwar ist eben das, also es gibt vielleicht noch ganz kurz, es gibt 30 Elemente in MarthML

Core. Das ist deutlich weniger als seine ganzen Attribute zum Beispiel bei SVG, aber ich gehe jetzt auch nicht auf alle ein, sondern nur auf so ein paar davon, dass man mal so ein Gefühl dafür kriegt. Also drumherum gibt es immer das Marth-Element, das theoretisch auch einen XML-Namespace hat, aber den muss man eigentlich im Browser nicht angeben, da das halt unterstützt, da bestimmte Dinge da einfach regelmäßig unterstützt sind.

Und dann gibt es sowas wie das mn-Element, das ist Marth-Number, das sind üblicherweise dann die Zahlen, es gibt mrow, das ist für eine Zeile, also eigentlich eine Gruppierung, zum Beispiel würde man damit was machen, so eine Zeile in einem Bruch, man muss es nicht überall verwenden, aber es bietet sich an, so als Strukturierungselement.

Dann gibt es mi, das ist für Identifier, also Dinge, die eigentlich keine Zahlen sind, sowas wie x, y, p oder sowas, oder cosinus oder so, wobei, ne, cosinus ist vielleicht sogar ein Operator, da bin ich mir jetzt gerade gar nicht sicher. Es gibt dann noch Operator, mo, plus minus mal geteilt und keine Ahnung, was es sonst noch so gibt.

Und dann habe ich mir noch rausgenommen, mtext für text, genau, vielleicht muss ich an der Stelle nochmal ganz kurz an den Anfang zurück von meinen Notizen, damit ich jetzt, damit ich nicht alles vergesse. Es gibt auch ein Guide mit Tutorials in der MDN, den verlinken wir in den Shownotes. Und das Marv-Element selbst hat noch ein Attribut, das sich Display nennt,

fand ich ganz spannend. Ich nehme an, das liegt wahrscheinlich so ein bisschen in der Historie von dem Marv-Element begründet, weil es nämlich eigentlich nichts macht als wie CSS-Display und zwar Block und Inline gibt es als Werte für den Attributen. Das ist genau das, was es macht. Also das Block, ich glaube standardmäßig ist es Inline, und wenn ich dem Block gebe, dann nimmt das Marv einfach dieses Marv-Element den ganzen Block ein, wie man es halt von Block und Inline-Elementen kennt. Genau.

Und man könnte sich jetzt fragen, warum ist das nicht mit CSS, aber wie gesagt, ich glaube, das ist historisch begründet an der Stelle. Es gibt laut Standard auch ein Alttext- Attribut, das heißt wirklich Alttext zusammengeschrieben. Aber das wird jetzt zum Beispiel von VoiceOver auf dem Mac nicht unterstützt. Ich habe es auch in keinem der Beispiele gesehen. Aber im Standard steht es mit drin. So. Ich nehme jetzt mal so einfach ein Beispiel. Ein ganz, ganz einfaches Beispiel.

Ich möchte jetzt zum Beispiel 2 plus 3 gleich 5 schreiben. Also habe ich da das Marv-Element, das ist um alles drum herum. Und in dem Fall in diesem Beispiel von dem Cheat-Sheet habe ich noch das M-Row. Das wäre in dem Fall aber gar nicht unbedingt notwendig, um das zu gruppieren. Weil es gibt halt eigentlich nur eine Gruppe. Also braucht man es nicht unbedingt. Dann habe ich M-N. Also für die Marv-Number 2. Da steht einfach nur die 2 drin. Dann kommt M-O, der Operator.

Da würde das Plus drin stehen. Dann kommt wieder M-N. Dann steht die 3 drin. Dann kommt M-O mit dem Ist-Gleich. Dann kommt M-N mit der 5. Und dann das schließende Marv. So weit, so gut. Das ist ja erstmal relativ easy. Jetzt fangen wir mal an mit was Interessantem. Also da passiert im Prinzip nichts, außer dass der Text dann da steht. Also so weit, so gut. Weil ich, wenn wir auf den Text noch eingehen, die Fonts bei Marv sind entscheidend, weil, gut, Plus, Minus, Mal, Geteilt, Ist-Gleich

und sowas. Und Zahlen, die gibt es jetzt eigentlich in jeder Schriftart drin. Aber sobald du da ein bisschen Interessanter... Das würdest du wahrscheinlich auch nicht Marv nehmen, wenn du nur sowas hast. Aber sobald es interessanter wird, irgendwelche Wurzeln, Klammern, Summenzeichen und sowas, da muss man dann schon aufpassen, dass man eine Schriftart verwendet, die diese ganzen mathematischen Symbole auch unterstützt. Dazu kommt auch ein Link in die

Shownotes. Da gibt es Listen mit Fonts, die dafür gut geeignet sind. So, aber wo es jetzt zum Beispiel schon ein bisschen interessanter wird, wo eigentlich jetzt ein Zeichen mit reinkommt, das nicht standardmäßig, das jetzt nicht quasi mit reingemalt wird, ist zum Beispiel ein Bruch. Und ein Bruch, ich habe wieder Math außenrum, da stimmt übrigens das Cheat-Sheet nicht an der Stelle, das kann ich vielleicht mal noch sagen, weil da nämlich das Math-Element drumherum fehlt für das Beispiel.

Dann hast du nämlich das M-Frac Element, Math-Fraction und da hättest du dann eine Zeile mit M-Row, also du hast das M-Frac-Element und dann hast du M-Row und das wäre dann die erste Zeile und da schreibst du dann zum Beispiel rein Mi wiederum für die, in dem Fall, wieso nehmen die eigentlich da Mi und nicht Mn, eigentlich müssten sie Mn nehmen, plus wieder in Mo für Math Operator, dann wieder die Zahl, dann geht die Row zu und dann kommt die nächste Row und dann

kommt wieder, in dem Fall, ich weiß auch nicht warum sie Mi geschrieben haben, Mn, sag ich jetzt mal, dann kommt Mo mit Minus und dann wieder die 6 in Mn und dann geht die M-Row wieder zu und dann M-Frac, dann hat das quasi verstanden, das ist jetzt ein Bruch, der hat zwei, üblicherweise haben Brüche ja zwei Zeilen und das macht er dann automatisch, den Bruchstrich zieht er dann automatisch für mich dazwischen. Ja, cool.

Das Ganze kann man noch viel weiter treiben, also man kann dann zum Beispiel auch sagen, naja, eine Wurzel hätte ich gerne.

Hätte ich jetzt gerne die Square Root, übrigens ich lese da immer Squirt, M-S-Q-R-T, das ist halt die Square Root und die würde ich dann so schreiben, dass ich dann sage M-S-Q-R-T das Tag und E-M-N und dann wenn ich jetzt die Wurzel aus 4 haben will, wird Square Root drum herum geschrieben und dann wird mir diese Wurzel dahin gemalt tatsächlich, ohne dass ich irgendwo ein Wurzelzeichen habe reinschreiben müssen.

Kann man auch noch weiter treiben, indem ich jetzt sagen möchte, ich hätte aber jetzt nicht die Square Root, sondern ich hätte gerne die siebte Wurzel aus irgendwas anderem, dann kann ich halt M-Root nehmen und mache mir dann meine Row, also ja, ich glaube, es ist tedious. Schaut euch die Beispiele an, wenn ich die jetzt alle vorlese. Ja, ich hab's mir auch kopiert in Codepen, um zu gucken, was da genau passiert.

Aber es gibt da unendlich viele Beispiele und was ich an dem Cheatsheet sehr, sehr geil finde, also da fangen wir irgendwann auch mit Klammern und nicht nur Klammern, die nach links und rechts gehen, sondern auch von oben nach unten und sowas, das geht auch alles.

Und auch Matrizen, das heißt, das ganze Marv, die ganze Marv-Geschichte hat auch sowas wie eine Art Table-Layout, was du dir zusammenbauen kannst, nämlich mit M-Table und dann kannst du halt auch dreidimensionale Dinge darstellen, indem du drei Zahlen untereinander schreibst und die aber immer wieder auf derselben Zeile sind und sowas mit M-Table und dann gibt es MTR, M-Table-Row und so weiter, da kannst du komplette Tabellen zusammenbauen innerhalb von Marv und was ich fantastisch finde ist,

ganz unten in dem Cheatsheet gibt es den MathML Torture-Test und gut, da ist es mit den Tables jetzt glaube ich nicht mit drin, aber ansonsten so ziemlich alles, das ist eine wahnsinnige Formel, ich habe keine Ahnung, ob die irgendeinen Sinn ergibt, aber da hast du so alle möglichen Zeichen hochgestellt, tiefgestellt, istgleich, Brüche, Klammern in allen möglichen Variationen und so weiter.

Ich habe das mal ausprobiert, mir das heute mit VoiceOver vorlesen gelassen, um herauszufinden, kann ich denn, funktioniert das irgendwie halbwegs sinnvoll? Und ich würde sagen, es ist glaube ich schwierig, aber nicht unmöglich. Also was ich interessant fand, zum Beispiel Fakultät hat er mir richtig vorgelesen, also vier Ausrufezeichen, fünf Ausrufezeichen, was da eher weiter rechts

ist bei dem Beispiel. Aber ja, das sind alles mal so kleine Beispiele von, was ist denn da so möglich, wie kommt man denn da so rein und interessant finde ich halt, dass Marv einem tatsächlich bestimmte Dinge hinmalt, ohne dass sie als Zeichen vorkommen. Also teilweise kann das auch Klammern damit setzen und so weiter. Aber wie gesagt, ich kann nicht, ich wollte jetzt auch nicht so extrem tief reingehen, fand's jetzt aber, dass ich, ich fand die Lernkurve relativ gut.

Ich fand, ich fühlte mich als jemand, der sich mit HTML gut auskennt, ganz gut abgeholt und dachte so, ah ja, okay, das ergibt irgendwie Sinn, dass man es so macht und ah ja, das verschachtelt man irgendwie so und dann nimmt man das und dann wird man es so hingemalt. Also ich fand das irgendwie, bin jetzt nicht so unbedingt der Mathematiker, aber ich hab mich da ganz wohl gefühlt in dem Ding und fand das irgendwie alles relativ logisch, soweit ich jetzt da drin gekommen bin.

Genau, und wie gesagt, schaut euch dieses Cheatsheet an, das finde ich eigentlich ganz gut. Wenn man was, Barrierefreiheit... Hast du das verlinkt, das Cheatsheet, weil ich hab's grad nochmal... Das Cheatsheet habe ich verlinkt, ich hab da hingeschrieben, viele MathML-Beispiele heißt das, von einfach bis komplex. Ich hab's gerade abgehakt. Das ist das Cheatsheet. Genau.

Was Accessibility angeht, Math hat eine eigene Role, das Math-Element hat eine eigene Math-Role, das heißt, es wird einem dann auch vorgelesen, jetzt kommt was Mathematisches und dann kommt der ganze Kram hintereinander, hab ich extra ausprobiert auch. Und jetzt am Ende davon habe ich noch zwei Fragen an euch. Und zwar die erste ist, habt ihr es schon mal eingesetzt und wenn ja,

wofür? Und falls nicht, habt ihr außer in der Wikipedia, die lasse ich nicht gelten, weil da habe ich es selbst auch schon gesehen, reale Anwendungsfälle davon gesehen, falls ihr es noch nicht eingesetzt habt. Wo ihr sagt, oh ja, auf der Seite kenne ich das, da benutzen die das relativ intensiv. Ah, genau.

Eine Sache habe ich noch vergessen, und zwar für Leute, die das nicht von Hand schreiben wollen und sich das generieren lassen wollen, habe ich auch nochmal ein bisschen rumgesucht, ob es denn irgendwie dafür so What you see is what you get Editoren gibt, weil vielleicht will man nicht das, also ich kann mir auch vorstellen, jemand der eine mathematische Formel jetzt schreiben will, will jetzt nicht unbedingt MathML dafür lernen, sondern der

will vielleicht einfach sagen, naja, ich klicke mir das jetzt hier irgendwie zusammen, ich weiß, wie die Formel aussehen soll, ich klicke mir das irgendwie zusammen und ich habe tatsächlich was gefunden in der Richtung. Ich habe ein bisschen recherchieren müssen, die ersten Ergebnisse waren alle Leute, die einem irgendwas verkaufen wollen, was man dann installieren muss, aber es gibt tatsächlich auch so ein What you see is what you get Editor im Browser.

Es sieht ein bisschen kryptisch aus, aber ich glaube, es liegt einfach daran, dass solche mathematischen Formeln einfach eher kryptisch sind, da muss man schon wissen, was man tut. Der heißt auf der Seite imatheq.com ein langer Link, irgendwas MathML und so weiter kommt auch in die Shownotes.

Fand ich aber irgendwie noch, ich wollte das sowas noch mit drin haben für Leute, die damit mal rumspielen wollen, die sich quasi eine Formel zusammen klicken und dann sehen wollen, da wird wirklich also Echtzeit, ich klick da drin rum, baue mir mal eine Formel zusammen und sehe dann direkt das Math, den MathML Output, wie er sich zusammen bastelt. Also auch, dass ich mit dem Cursor dann da rum springen kann und da sind dann so blaue Platzhalter und dann kann man genau da rein tippen.

Also das ist schon echt cool gemacht. Das ist ziemlich cool. Es kommt erst mal, wie gesagt, erst mal ein bisschen wild daher, aber wenn man dann versteht, wie komplex das eigentlich ist, was da gemacht wird, ist es dann noch eine ganz gute Abstraktionsebene, um sich mal eine Formel zusammen zu klicken. Allerdings die meisten Zeichen davon, ich habe vergessen, also ein paar habe ich, glaube ich, auch noch nie gesehen. Ja, da bin ich ganz ehrlich.

Ja, genau. Das war es im Prinzip von mir zum Math Element und es war jetzt heute irgendwie sehr erfrischend, also ich habe mir schon ein bisschen Zeit dafür genommen und am Anfang bei sowas denke ich immer so, oh, ja, muss ich jetzt, ja, jetzt muss ich doch mal was vorbereiten und jetzt war sowas ganz neues und sehr abstrakt erst mal gedacht, aber ich muss sagen, damit rumzuspielen, das hat mir richtig Spaß gemacht und dadurch, dass ich diese Cheatsheet-Seite gefunden habe, musste ich

eigentlich auch gar keine eigenen Demos bauen, weil da so für jede Frage, die ich mir gestellt habe, ach, und wie macht man das eigentlich, gab es da irgendwie ein Beispiel, also es sind ganz, ganz viele Beispiele und die sind alle relativ minimal immer, also das ist dann nicht gleich die riesen Megaformel bis auf die ganz unten, sondern immer so, ja, und jetzt guck mal, ah, so geht ein Bruch und hier, so kann ich jetzt hier irgendwie die Zeichen platzieren,

wenn ich irgendwie so ein großes Zeichen nebendran habe, irgendwie so ein Summenzeichen oder sowas, ah, wie geht eigentlich so eine Matrize, ah, cool, okay, so, und also immer so Minimalbeispiele. Sehr, sehr cool gemacht. Ja, die Seite finde ich, die feiere ich echt ab, die ist richtig toll. Wie gesagt, beim Layout nicht erschrecken lassen, das sieht relativ basic aus, aber die Beispiele sind einfach sehr gut. Genau. Cool. Dann haben wir das Thema schon durch.

Ich fand es auch cool, dass wir heute mal wirklich so was, was so fernab von dem, was man eigentlich mit HTML macht und was man auch selber anfasst, mal was jetzt gemacht haben. Ich hoffe, dass es beim Zuhören nicht ganz so abstrakt war und man sich das halbwegs vorstellen kann. Wenn ich hier die Math-Elemente vorgelesen habe, das war bestimmt schon ein bisschen anstrengend. Kann ich mir vorstellen. Aber da empfehle ich euch, falls es euch interessiert, schaut euch einfach wirklich dieses

Cheat-Sheet mal an. Das ist wirklich fantastisch. Und wenn man, da hat man, also ich hab sofort drauf gehuckt und ist so, ah ja, okay, gut. Ah ja, ist ja ganz einfach. So, und das kann ich nur sehr empfehlen, falls das jetzt für den Podcast weniger geeignet war. Ich glaube, so was So was wäre tatsächlich eher für das Streaming. Ja, genau. Vielleicht streamen wir ja irgendwann nochmal, wer weiß. Ja, aber dieses Beispiel, dieses Cheat-Sheet, ich leg's euch

zum 27. Mal jetzt hier ans Herz, weil es einfach gut ist. Sehr schön. Dann hast du jetzt noch ein Geil-Teil und dann war's das schon. Das Geil-Teil. Geil-Teil. Ja, wie fange ich an? Vielleicht muss ich es von hinten nach vorne machen, in meinen Notizen.

Vielleicht kennt der eine oder die andere motherfuckingwebsite.com und zwar ist das so eine Webseite, die ist so simpel wie sie nur sein kann, ist einfach nur HTML, hier so, this is a motherfucking website, it is fucking perfect, seriously, what the fuck else do you want? Und dann hier lädt super schnell und hat gar kein CSS und sonst nix und ist responsive und das wird im Prinzip in einem eher mit Schimpfwörtern gespickten Text ein bisschen erläutert.

Das ist uralt, motherfuckingwebsite, ich kenne das schon ziemlich lange und jetzt hat jemand sich die Mühe gemacht, ich weiß gar nicht, ob das tatsächlich die Inspiration dafür war, im Prinzip sowas noch mal zu machen, allerdings mit noch viel schlimmeren Beleidigungen, aber auch mit sehr viel mehr Inhalt.

Und zwar heißt die Seite justfuckingusehtml.com und ich muss zugeben, ich bin tatsächlich über ein YouTube-Video drauf gekommen und zwar, es gibt einen Twitch-Streamer, der sehr viel über Technik streamt, theprimetime, vielleicht sagt dir das was? Hast du vielleicht schon mal gesehen, so ein Typ mit Schnurrbart, der auch mal bei Netflix gearbeitet hat, ist relativ unterhaltsam tatsächlich, muss ich zugeben.

Und der liest auch manchmal Blogartikel oder Webseiten vor und kommentiert das dann und so bin ich tatsächlich da drauf gestoßen. Also das YouTube-Video, wer die Seite sich nicht durchlesen will, sondern sich's vorlesen lassen will mit Kommentar, dem sei auch das YouTube-Video ans Herz gelegt, kommt auch in die Shownotes. Ja, und auf der Seite, die verfolgt einen sehr ähnlichen Ansatz, nämlich hier, das ist die Plain-HTML-Seite. Ich lese jetzt mal halt so einen Bereich vor.

So you call yourself a Web-Developer? Fucking pathetic! You gotta be kidding me, asshat! Do you even fucking know how to display a button on screen without the current modern fuckery you lean on? Here, little shit, here's your button, and then it's fucking buttons. Einfach nur ein Button-Element. Genau. Tattoo this code on your forehead so that you'll remember when you look at your fat face in the mirror. Und dann ist der Button-Code tatsächlich gespiegelt dargestellt, auch nice. Und so geht

es halt weiter. Also es ist nicht nur Button, sondern Listen, Formatierung von Text, Überschriften, Details und Summary, Popover, Dialog-Element, Formular-Element. Also da wird wirklich quasi so einmal, gibt es einmal so einen kompletten Abriss durch semantisches HTML. Ich will nicht sagen, es ist alles drin, aber schon relativ viel und relativ viele Elemente, von denen ich behaupte, dass sie oft nicht eingesetzt werden oder nicht gekannt werden von Leuten, die sie eigentlich kennen sollten.

Genau. Und wer sich mal richtig schön beschimpfen lassen will und dabei HTML lernen will, dem sei Just Fucking Use HTML ans Herz gelegt, äh .com ans Herz gelegt. Ich hatte eine riesen Freude mit der Seite. Könnte auch von mir sein an meinen schlechteren Tagen. Ob sich das schon mal jemand hat tätowieren lassen? Also vielleicht jetzt nicht unbedingt auf die Stirn, aber generell eigentlich eine coole Idee, sich was spiegelverkehrt irgendwo hin tätowieren zu lassen, wo man es dann im Spiegel sieht.

Irgendwie so so ein Mantra oder ein Spruch? Ja, ich weiß nicht. Vielleicht, aber ich bin da nicht ernst genug dafür. Ich würde mir wahrscheinlich irgendeinen Quatsch, wenn ich mir dann was tätowiere, das wäre dann irgendwie vielleicht so ein Spruch mit Rechtschreibfehler oder so ganz absichtlich. No Regards. No Regards. Oder tatsächlich absichtlich Hühnchensüßsauer in chinesischem Schriftzeichen. Das wäre schon wieder sehr lustig. Ja, ich glaube, dieser eine Sprachyoutuber, wie heißt der?

Ich habe vergessen. Der immer irgendwelche Sprachen lernt und dann zu den Leuten geht und sie dann spricht, überraschenderweise. Der hat glaube ich tatsächlich so ein Tattoo, weil der spricht wohl sehr gut chinesisch.

Und der hat glaube ich wirklich ein Tattoo, auf dem steht Hühnchen süß-sauer oder irgendwie sowas und läuft damit dann halt durch Chinatown und auch durch China und die Leute lachen so über ihn und der spricht die dann halt mit perfektem chinesisch an und sagt, ja, was ist da dran eigentlich so lustig? Ich mag halt Hühnchen süß-sauer. Ja, genau. Wie heißt der? Wie heißt der denn? Youtuber. Ich weiß wahrscheinlich auch nicht, wie man richtig ausspricht.

Egal. Es gibt so einen Youtuber, der lauter Sprachen lernt und lauter Dialekte und das macht. Genau, aber just fucking use HTML. Schaut's euch an. Ich hatte große Freude dabei und wie gesagt, ihr könnt's euch auch vorlesen lassen auf dem Youtube-Kanal The Primetime. Genau. Und damit sind wir schon jetzt am bei vielleicht. Es klappt einfach nicht. Es klappt einfach nicht. Jetzt kommt das Ende. So funktioniert's. Okay. Ich weiß, du warst noch beschäftigt und ich war jetzt zu faul, den Knopf selbst

zu drücken. Das ist schon okay. Deswegen habe ich sehr langsam geredet. Ja. Das war doch mal wieder eine schöne Folge, finde ich.

Und ich habe wieder einiges gelernt und ich habe auch gelernt, ich muss mir SVG irgendwie nochmal anschauen und da gibt es doch noch einige Bereiche, die ich noch nicht kenne und ich hoffe, dass ganz viele Editoren die ganzen Sachen mit einbauen, sodass ich sie vielleicht gar nicht lernen muss und trotzdem empfehle ich euch, schaut euch die SVGs mal an und zoomt mal nah ran und habt einen schlechten Tag dadurch und optimiert und lernt.

Genau. Und natürlich kleiner Werbeblog noch, bewertet uns bei Podcastportalen, das hilft uns. Ihr dürft uns auch gerne mal bespenden, guckt mal auf www.siv.de slash unterstützen, wie man uns helfen kann, dass wir hier weiter diesen Podcast machen können, vielleicht auch irgendwann nochmal den Stream. Mal schauen. Ja. Das war's von meiner Seite. Hast du noch was? Ne, ich hab auch kein großes Schlusswort.

Aber es macht Spaß irgendwie so nicht ganz abgehängt zu werden und immer mal wieder hier mit Sachen in Berührung zu kommen und auch wieder neue Sachen zu lernen, weil mein Ziel ist ja gar nicht, dem Ganzen so komplett in den Rücken zu kehren. Also mir macht's nach wie vor Spaß. Du kannst den Rücken ja einfach abstauben. Statt ihn zu kehren. Achso. Schon wieder Kehrwoche. Ja, ihr merkt schon, jetzt reicht's. Jetzt wird's blöd.

Und bevor es ganz blöd wird, drück ich schon mal aufs Outro-Knöpfchen und sag vielen Dank fürs Zuhören und wir streamen, äh streamen, sag ich, wir podcasten wieder in 2-3 Wochen. Genau. Bis dann. Ciao.