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.
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.