Wo wir sind, ist vorne, Folge 15, wir müssen reden.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend-Fakten-Frotzeleien.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann
und JavaScript-Jungleur Konstantin Groß.
Ja, hi. Normalerweise käme jetzt eine freundliche Begrüßung.
Heute ist sie nicht freundlich, weil wir müssen reden.
Oh, oh, oh.
Das verspricht nichts Gutes.
Was da jetzt los ist, das kommt dann gleich beim Thema,
aber ich bin ein bisschen aufgepeitscht.
Und ich finde, es muss auch nicht alles immer nur nett und freundlich sein.
Vielleicht ist Rage ja auch gut für Klicks hier bei Podcasts.
Heute gibt es mal ein bisschen Rage.
Und hoffentlich noch kein Rage-Quit, weil sonst ist der Podcast halt vorbei.
Dann müsst ihr mir alleine zuhören.
Wir sind heute sowieso nur noch zu zweit.
Letztes Mal waren wir ja ausnahmsweise mal zu dritt.
Muss ich sagen, hat Spaß gemacht.
Machen wir mit Sicherheit auch mal wieder demnächst,
wenn wir einen geeigneten Gast finden.
Ja, dann, warte mal jetzt.
Hä?
Unsere Reihenfolge.
Ich blick's gerade nicht mehr.
So, egal.
Bier.
Ja, ihr merkt schon, ihr merkt schon, es ist was, es liegt was im Argen.
Jetzt fangen wir einfach mal an mit Bier,
weil das Bier macht mir vielleicht ein bisschen bessere Laune.
Ja, ich hab heute einen, ich will die Marke mal nicht nennen,
aber ich hab einen Himbeerradler.
Aha.
Also ihr merkt schon.
Zeig mal, zeig mal in die Kamera.
Alles, äh, huch.
In der Dose.
Alles ist ein bisschen komisch heute.
Aber sieht gut aus.
Und heute gibt's Himbeerradler zur Feier des Tages.
Neben meinem Energydrink Kokosblaubier.
Ja, den muss ich mir auch mal holen, den musst du mir auch mal zeigen.
Ja, ich hab auch was Koffeinhaltiges, einen Clubmate-Eistee
und ein Craft-Bier, das ich im Supermarkt entdeckt habe.
Das hat hier auch so, ich muss das erstmal hier, siehst du das?
Eine Par-Bier-Verpackung außenrum.
Ja, ich wollte gerade sagen, was ist das denn nicht?
Das ist tatsächlich mit so Papier eingewickelt.
Kannst du das noch mal, kannst du ein bisschen weiter halten?
Also gut, ihr könnt das jetzt auch alles sehen.
Das nennt sich, wir müssen doch noch anfangen zu streamen mit Video.
Ja, wir müssen noch anfangen zu streamen.
Also wir haben, es ist ein Baltic Double.
Und ich bin sehr gespannt, also es steht drauf, seltenes Bier.
Inselbrauerei.
Four Times World's Best Beer.
In den London World Beer Awards.
Also ich bin gespannt, was das ist.
Na dann, also komm dann, ich mach mal hier.
Ganz facile in der Dose.
Ja, natürlich.
Ja dann, zum Wohl.
Zum Wohl.
Dann müssen wir auch mal erstmal hier.
Hm.
Also geschmert.
Ja.
Übrigens, ich glaube, wir müssen ein bisschen, wir müssen ein bisschen mehr essen und trinken
während dem Podcast.
Schmatzen und Kauen.
Es hat sich noch nie jemand drüber beschwert, dass wir irgendwie zu viel essen, trinken, schmatzen
oder kauen oder irgendwie komische, eklige Geräusche machen.
Ich weiß, dass es Leute gibt, die da richtige Phobien davor haben und richtig durchdrehen.
Ja, ich, hier, Kau-Kau-Geräusche.
Ganz, oh, ganz schlimm.
Also auch bei Fernsehsendungen, wenn da jemand kaut und isst oder in Serien oder Filmen.
Puh.
Na da ist ja gut, dass sie bei Big Bang Theory immer nur so tun, als würden sie essen.
Da musst du mal drauf achten.
Das ist so witzig.
Die haben, die haben wirklich das dumm gucken und währenddessen im Essen rumstochern, aber
nix essen, das haben die perfektioniert.
Das ist so gut.
Also das kann ich jedem nur empfehlen, der gern essen riecht, aber nix davon essen will.
Guckt euch das mal an und macht mal nach.
Wisst ihr, wie es geht?
Also das ist übrigens ein dunkles Bier, merke ich jetzt gerade.
Also das war mir voll, ich wusste nicht, was ein Double ist oder Double ist.
Das ist wohl eine belgische Bierart und das ist ein dunkles Bier.
Mag ich auch manchmal sehr gerne.
Ich glaube, meins ist auch dunkler, also wenn ich in die Dose reingucke.
Da ist auch dunkel drin.
Okay.
Ja, gut, dann legen wir los.
Ja.
BW SIV präsentiert die Retrospektive.
Ja, jetzt wäre es vielleicht auch an der Zeit für die Hörerinnen und Hörer, sich auch
was zu trinken, zu holen oder was zu essen.
Die Retro fällt heute etwas länger aus.
Oh nein.
Ach, Moritz legt sich jetzt eine Runde hin.
Nee, aber es sind ja immerhin drei Wochen und ich habe tatsächlich sehr viel zu arbeiten
gehabt in den letzten drei Wochen, was unter anderem der Grund ist, warum wir jetzt auch
eine Woche später als gewohnt sind.
Wenn ihr das verhindern wollt, dann müsst ihr Geld in die Spendenkasse werfen.
Damit wir nicht mehr arbeiten müssen.
Und ich starte aber erstmal mit einem Follow-up zu dem Color-Font, liebe Heide, über den wir es in unserem letzten Font-Spezial hatten.
Ich zitiere Gerrit.
Falls ihr das noch nicht gehört habt.
Oh.
Hm.
Das war Gerrits Reaktion auf den Font.
Ach ja, genau.
Also unbedingt anhören, die letzte Folge wäre wirklich lohnenswert.
Nicht zu viel Spoilen, aber wer Gerrit mal erregt hören will.
Nein, das ist jetzt übertrieben.
Entschuldigung, Gerrit.
Ja, genau.
Also Color-Font.
Und ich habe mir den dann mal im Nachgang erst so ein bisschen genauer angeschaut und gesehen,
das ist ein Bitmap-Font.
Ich glaube, der Gerrit hat das auch in der Sendung erwähnt.
Und das heißt, erstens ist der nicht unendlich skalierbar, weil eben Bitmap und kein Vektor-Font.
Und außerdem ist die Farbe nicht änderbar.
Also in diesen Beispielen, der ist halt wirklich blau, weil die Bitmaps da drin blau eingefärbt sind.
Und dann habe ich mal ein bisschen rumgespielt in den DevTools und gedacht, irgendwie muss das doch aber möglich sein.
Und man kann, weil ich gelesen hatte, in Photoshop kann man per Filter halt dann die Farbe ändern.
Und man kann das Ganze aber auch mit CSS machen, weil ich gedacht habe, Moment, CSS hat ja auch Filter.
Und wenn ich da den, also wer das machen mag, ich verlinke es auch nochmal, die Demo-Seite von der Font.
Einfach mal reingehen, Textelement von der Vorschau auswählen.
Und dann Filter-Property mit U-Rotate in Klammern 125-Dec wie Degree.
Und dann wird der Font rot.
Also falls jemand die Notwendigkeit hat, einen Bitmap-Font rot einzufärben.
Moment mal, du rotatest den Font, um ihn einzufärben?
Nee, nee, nee, U-Rotate.
Ach, U, ah.
Also die Farbe wird einfach rotiert, dieser Farbstirkel, und dann hat man den Font in Rot.
Aber, ja, die Sache ist halt, Web-Font, schön und gut, aber der hat halt 4 MB, also mehr als 4 MB im Woff-Format.
Ich weiß nicht, warum man dann nicht gleich auf Woff 2 gesetzt hat, weil die Brotli-Komprimierung da natürlich auch nochmal ordentlich was rausholt.
Aber selbst wenn das jetzt die Hälfte schafft von der Komprimierung her, dann hätte man immer noch 2 MB, finde ich jetzt für einen Font schon relativ viel.
Dann spart man sich vielleicht halt das 1 MB große Hero-Bild, dann hat man es wieder drin.
Aber ich dachte, ich probiere das einfach mal aus, vielleicht gibt es ja auch kleinere Bitmap-Fonts, und natürlich gibt es Color-Fonts, also das ist nicht gebunden an Bitmap, sondern das können natürlich auch SVG-Fonts sein.
Was kostet die Welt? Einfach mal schön Bandbreite rumballern.
Richtig. Am besten auch nicht crashen, schön bei jedem Aufruf nochmal neu laden.
Bei TikTok habe ich gelesen, 6G ist total sinnlos. Keiner weiß bislang, was 6G ist, aber einer wusste es schon ganz genau, aber es wird auf jeden Fall alles sehr, sehr schnell, und mit 5G sind wir dann eh gerettet, oder man weiß es nicht so genau.
Schauen wir mal. Und ich habe letztes Mal, es geht auch noch weiter mit Fonts, ich habe ja letztes Mal dann spontan ein Geilteil angebracht, ohne es wirklich ausprobiert zu haben, dieses Plugin namens Font Self für Illustrator und Photoshop, das gibt es einzeln zu kaufen oder als Bundle für beides, und damit kann man wirklich relativ einfach und schnell zur eigenen Schriftart gelangen.
Das heißt, man kann die Vektorisierungsfunktion von Illustrator nutzen oder einfach tatsächlich Vektorformen erstellen und kann dann damit sogar Color-Fonts selber generieren.
Oder mit dem Photoshop-Plugin eben Bitmap-Fonts.
Und das habe ich jetzt heute mal ausprobiert und das ist tatsächlich, es macht echt Spaß. Also es geht relativ schnell, dass man da dann ein Font hat und auch die Autospacing- und Kerning-Funktion ist tatsächlich brauchbar.
Also es gibt schon ganz gute Ergebnisse, auf denen man dann aufbauen kann und dann noch ein bisschen selber manuell Hand anlegen kann. Also sehr gut als Einstieg, als Basis und weiterarbeiten mit einer richtigen Fontsoftware, sage ich mal mit einer teureren, die jetzt nicht nur 60 Euro kostet, kann man dann immer noch.
Genau, also nur um tatsächlich das, was ich angepriesen habe, auch nochmal mit fundiertem eigenem Hintergrundwissen zu füttern.
Gut, dann mein nächster Punkt. Ich werde hier zum Alleinunterhalter. Letztes Mal vergessen zu sagen, ich als, hast du denn noch was? Hast du mehrere Punkte?
Ja, gerne. Ja, wenn du mehrere Punkte hast, dann sag du mal was.
Äh, ja, ich hab, ja, ja, ja, ja, irgendwie schon. Also mein, mein erster Punkt ist Firefox oder Chrome zum Entwickeln. Ich habe jetzt sehr, sehr, sehr lange Firefox benutzt. Davor habe ich Chrome benutzt zum Entwickeln. Die Chrome DevTools waren halt eine Zeit lang mal irgendwie besser als Firebug damals noch.
Dann irgendwann, als Firefox Quantum kam und da groß mit Speed angepriesen wurde, habe ich dann nochmal zurückgewechselt auf Firefox und habe dann gemerkt, naja, und die waren auch relativ weit vorne dabei, da irgendwie mit Grid Tools und so, da waren sie auch irgendwie vorne und haben dann auch so langsam irgendwie alles nachgerüstet, was mir in Chrome gefehlt hat.
Und jetzt so in den letzten Tagen habe ich immer mal wieder so ein bisschen rumgespielt. Ich habe jetzt einen neuen Laptop und dann fiel mir auf, dass die Frame Rate in Firefox oft echt sehr, sehr schlecht ist.
Also sowohl unter Linux als auch unter Windows. Und ich konnte das nicht so richtig nachvollziehen, wo das jetzt irgendwie herkommt. Ich hatte so den Eindruck, je nachdem, auf welchem Screen ich den geöffnet habe, ist Hardware Acceleration an oder nicht.
Und das war irgendwie alles sehr, sehr strange. Also gerade bei uns auf der, wo wir sind, ist vorne.show-Seite, da geht ja so ein bisschen was ab.
Genau, da ist es mir letztens auch aufgefallen, ja, Firefox ruckel, ruckel und Chrome flüssig.
Genau, genau. Aber es kommt tatsächlich, also ich habe Firefox auch schon total flüssig da gesehen, auf dem gleichen Rechner. Je nachdem, also es ist irgendwie mir nicht so klar, was jetzt die Hardware Acceleration da irgendwie triggert.
Also im gleichen Browser, auf der gleichen Seite. Also ich kenne die CSS-Eigenschaften, die Hardware Acceleration triggern, die haben wir teilweise auch verwendet.
Aber das macht es nicht aus. Es ist bei mir irgendwas auf dem System, wo unter bestimmten Umständen die angeht und unter bestimmten Umständen nicht.
Und das Problem hatte ich jetzt mit Chrome oder Edge tatsächlich noch nie. Das war immer, das war immer alles flauschig und die Animation irgendwie sauber und gut.
Ja, also das bewegt mich jetzt so ein bisschen. Irgendwie Chrome vielleicht, beziehungsweise eigentlich fast lieber Edge nochmal auszuprobieren.
Tatsächlich.
Ist im Prinzip dieselbe Engine dahinter. Ja, keine Ahnung. Unter Windows ist Edge halt besser integriert. Ich habe die gleiche Engine. Es spricht eigentlich ...
Schreibt es mal in die Kommentare, falls irgendwas, wenn man jetzt eh schon Chrome verwenden würde, ob irgendwas gegen Edge sprechen würde.
Weil ich sehe momentan nichts. Das ist gut in Windows integriert, wenn man Windows benutzt und dann fluppt das. Startet sehr schnell. Hat genau die gleichen Dev-Tools, hat genau die gleiche Edge.
Ja gut, weil es im Hintergrund nicht so viele Daten an Google schicken muss.
Edge muss im Hintergrund nicht so viele Daten an Google schicken. Ja, halt nur an Microsoft.
Ja, dafür an Microsoft natürlich, ja.
Ja, keine Ahnung. Ach, was weiß ich. Also, ja, schreibt es mal in die Kommentare, was ihr benutzt. Also macht es wirklich.
Weil wir müssen auch noch ein bisschen schimpfen.
Ja, da müssen wir. Ich glaube, wir schimpfen dann zur Verabschiedung. Wir wollen ja jetzt nicht gleich am Anfang.
Ja, also freut euch auf eine schimpfende Verabschiedung. Nee, wir schimpfen häufig viel mehr. Aber genau. Also das war so mein erstes Retro-Thema.
Ja, dann wechseln wir mal zurück zu mir. Ich habe letztes Mal vergessen zu sagen, dass Vue 3.0 rausgekommen ist. Damals irgendwie zwei Tage, glaube ich, vor der Sendung.
Und ich als alter Vue-Fanboy habe das vergessen zu sagen. Es würde jetzt aber auch zu weit führen, da jetzt irgendwie groß drauf einzugehen, was da sich getan hat.
Es hat sich jedenfalls einiges getan. Und ich verlinke einfach mal drei Artikel zu dem Thema, zum Launch.
Ich habe ja schon in der ersten Folge, glaube ich, in der Folge 0 schon angekündigt, irgendwann mache ich mal eine Folge über Vue.
Und da können wir dann mal ausführlich drüber reden. Aber das ging jetzt in der Retro zu weit.
Die Folge über Vue kommt, wenn wir bei den Spenden 400.000 Euro ergeben.
Und sobald wir einen End-Jingle haben, dann kommt die Vue-Folge.
Das war jetzt nur ein kurzer Punkt. Ich mache mal noch weiter. Ich habe einen Bug in InDesign gefunden. Ich mache ja ab und zu auch Print. Ich bin ja eigentlich gar kein Designer, eher der Techniker.
Aber so ein bisschen Print mache ich. Und ich habe da eine Broschüre angelegt. Und da soll jedes Kapitel eigene Farbgebung haben. Aber ich wollte nicht irgendwie 24 Swatches anlegen oder so.
Das heißt, ich habe mir ein Master-Template gemacht und habe dann die Book-Funktion genutzt von InDesign. Ich weiß nicht, ob die Leute, die mit InDesign arbeiten, überhaupt kennen großartig.
Damit kann man eben verschiedene InDesign-Dateien zusammenfassen zu einem Buch. Wo dann dateiübergreifend auch die Seitenzahlen gesetzt werden und man Inhaltsverzeichnungen erstellen kann und so weiter.
Und das funktioniert. Aber ich habe irgendwie so, nachdem ich dann ein Drittel fertig hatte, gedacht, boah, das mache ich nie wieder.
Weil dann doch irgendwie manche Sachen doch nicht so toll waren. Unter anderem möchte man ja vielleicht zwischendrin mal dem Kunden ein Preview schicken.
Und das sollte dann nach Möglichkeit natürlich so aussehen, wie die aufgeschlagene Broschüre.
Also ich will dann nicht irgendwie ein PDF und jede Seite ist einzeln und dann ist die Seitenzahl mal links und mal rechts.
Sondern am besten habe ich ja natürlich dann das so, als hätte der Kunde das aufgeschlagen vor sich liegen.
Das lässt sich auch, wenn man eine InDesign-Datei hat, super machen.
Da gibt es dann Einstellungen, wo dann wirklich beides als eine PDF-Seite gesetzt wird und trotzdem stimmen dann die Seitenzahlen noch und so weiter.
Ja, wenn ich das mit der Book-Funktion exportiere, dann kann es passieren, dass ich mittendrin einzelne Seiten habe.
Also wenn das eine Kapitel jetzt irgendwie links endet und das nächste eigentlich rechts weitergehen sollte,
dann habe ich halt die linke Seite vom vorherigen Kapitel als eine Seite und die rechte Seite vom nächsten Kapitel auch als Einzelseite.
Zwar richtig links und rechts angeordnet, aber eben nicht auf einem Spread heißt das ja, wenn es so nebeneinander liegt.
Ich habe schon lange kein InDesign mehr offen gehabt, also du könntest mir alles erzählen, ich würde dir alles glauben.
Also es ist so und es ist vor allem, es ist seit 2009 so.
Und für mich gibt es da auch keine Diskussion, dass das irgendwie gewollt sein kann, sondern für mich ist das ganz klar, dass die Funktionalität einfach kaputt ist.
Weil warum sollte ich das wollen, dass mein Kapitel da links und dann rechts, wenn ich doch schon extra sage, ich möchte die Datei mit Spreads ausdrucken.
Also es macht einfach keinen Sinn und es gibt auch keine einfache Möglichkeit, das dann irgendwie zusammenzufügen per Acrobat oder so.
Also es ist einfach, es ist kaputt und ich habe dann gegoogelt und ich habe Forenbeiträge gefunden, wie gesagt der älteste von 2009, sogar im Adobe Support Community Forum und zwei Einträge auf User Voice, was offiziell von Adobe als Feedback Einholtool genutzt wird.
Also nicht irgendwas, wo die eh nicht drauf gucken, sondern das ist von denen das Feedback Tool und da sind zwei Einträge von 2019 und von offizieller Seite hat sich da noch niemand gemeldet und hat sich nichts getan.
Und dann habe ich das gemacht, was man in solchen Situationen macht.
Diese High-Edge-Case ist Konstantin.
Ja, es war mir klar, dass das wieder kommt, ja, der Konstantin hat halt die Sonderfälle, aber nee, das ist doch einfach, da ist eine Funktionalität und die funktioniert nicht, wie sie soll, ganz einfach.
Und dann bin ich auf Twitter und habe das Social-Media-Team da von Adobe, wie auch immer, angetweetet und habe tatsächlich umgehend auch eine Reaktion erhalten.
Also das ging relativ schnell und das lohnt sich also immer, diese Kanäle auch auf Social Media zu nutzen, das geht oft viel schneller.
Also haben sie gesagt, melde dich doch per DM und dann geh sterben?
Nee, nee, nicht mal. Also das ist ja tatsächlich das, was dann ganz oft kommt, so von wegen, ja, wir wollen jetzt gar nicht öffentlich breittreten, nachher kommt noch jemand auf die Idee, das weiter zu verfolgen, ja.
Sondern tatsächlich, die haben wirklich auf meine Nachrichten geantwortet, haben weitere Informationen erbeten.
Ich habe dann Screenshots angehängt, genau was ich gemacht habe, was ich vorhabe und das Endergebnis und wie es eigentlich sein sollte.
Und dann kam tatsächlich, ja, wurde weitergeleitet.
Also erstmal kam natürlich, ja, sie erbitten sich ein bisschen Geduld, da habe ich schon gedacht, jo, da wird nie wieder was passieren.
Und hatte mir schon vorgenommen, ich hake da nochmal nach, weil, kennt man ja, dann verläuft das im Sande und dann ist der Kunde, ist dann ruhig.
Und an dem Tag, als ich dann nochmal schreiben wollte, kam tatsächlich auch eine Antwort, sie haben es weitergegeben an das Product-Team und die schauen sich das an.
Und sie haben keinen ETA für irgendwelche Fixes, aber das Team arbeitet hart daran, das zu testen und die Changes zu finalisieren.
Das heißt, es klingt für mich schon wirklich nach einem Eingeständnis, da wird was gemacht, ja.
Bevor das ausgerollt ist und bei dir ankommt, würde ich kein Wort glauben.
Da vergehen noch zwei Jahre.
Nee, würde ich einfach kein Wort glauben.
Aber es klingt zumindest schon mal besser, als das bei anderen.
Das ist ein ganz, ganz nett formuliertes Halt-die-Schnauze.
Ah, ich wäre mir nicht so sicher.
Also ich habe auch geschrieben, ich nerv euch damit noch ein bisschen.
Und ich hatte eine andere Supporterfahrung mit Google zum Beispiel letztens, wegen einem Feature auf Google Home.
Und da war das so, wie man sich es vorstellt.
Ja, erstmal hier, schau dir doch den Support-Artikel an.
Und ich habe schon so geschrieben, ja komm, lass das sein, seid eh nicht an der richtigen Problemlösung interessiert.
Und dann kam halt nochmal zurück, ja, wie können wir dir denn weiterhelfen?
Und dann habe ich halt gesagt, naja, hier sind fünf Vorbeiträge, die das Problem schildern und es gibt keine offizielle Reaktion, also viel Spaß damit.
Also es geht auch anders.
Ich bin echt mal gespannt, was da draus wird.
Also ich werde das weiterverfolgen auf jeden Fall.
Gut, hast du noch einen Retro-Punkt?
Ich habe noch Sticker.
Sticker, ja.
Ich habe eine Menge und das ist tatsächlich, ich habe wirklich Sticker.
Ich habe nicht mehr ganz tausend Sticker hier rumliegen.
Ja, da können wir vielleicht doch schon ein bisschen schimpfen.
Wenn wir das schon aufgreifen.
Vielleicht müssen wir ein bisschen schimpfen.
Ja, wir haben eine kleine Aktion gestartet, dass wir Sticker verschenken.
Also erstmal haben wir es nur auf Twitter geschrieben und es gibt auch einen Link dazu auf unserer Homepage, in unserem schönen Marquis-Tag ganz oben.
Man muss einfach nur den Tweet retweeten oder unter einem bestimmten Hashtag, der da drin steht, was twittern über unseren Podcast und dann kriegt ihr kostenlos Sticker von uns geschickt.
Und die Leute, die vielleicht dann Angst haben, ja, was ist da mit dem Porto, das schenken wir euch auch.
Ihr kriegt sie einfach so.
Ihr müsst uns einfach nur, ihr müsst einfach nur da mitmachen und dann später fragen wir euch nach der Adresse und dann kriegt ihr die einfach so geschickt.
Und ihr müsst euch da auch melden.
Ihr müsst das jetzt auch machen.
Es gibt was umsonst, hallo?
Das sagen doch sonst immer alle hier.
Wir sollten vielleicht noch sagen, dass es vielleicht bei jedem siebten eine geheime Zutat mitgeschickt wird.
Ich hab gesagt, vielleicht.
Okay.
Man muss ja die Leute ein bisschen triggern.
Ja, wir müssen ja erstmal sieben zusammenkriegen.
Was? Nein.
Also maximal 500.
Maximal 500.
Eigentlich war der Termin dafür Sonntag, also wenn die Folge rauskommt.
18.10., ja.
Aber da die Leute, die das jetzt hören, dann keine Chance mehr haben mitzumachen, würde ich das jetzt aber nur für die Zuhörer, nicht für die, die es bei Twitter gelesen haben, nur für die Zuhörer, noch um, wie lange wollen wir es noch verlängern?
Bis Mittwoch oder noch eine ganze Woche?
Nehmen wir mal eine Woche, vielleicht kommen die Leute erst am Wochenende dann dazu, das zu hören.
Sagen wir mal 25. abends.
25. abends.
Warte mal, jetzt muss ich gerade mal kurz auf den Kalender gucken.
Okay, das ist dann der nächste Sonntag.
Okay, 25. abends, aber geheime Verlängerungen bei Twitter werden wir das nicht ankündigen.
Wir sagen das, also ihr erfahrt das jetzt nur hier und könnt dann auch mitmachen.
Den Tweet werden wir in den Shownotes verlinken.
Genau.
Einfach mitmachen, dann kriegt ihr von uns kostenlose, wo wir sind, ist vorne Sticker, die sehr hübsch sind.
Und wenn ihr auf eure Laptop-Deckel kleben könnt oder eure Oma schenken.
Ja, und auf Schiefkästen, eure Oma schenken, natürlich auf Spielplätzen verteilen, an Straßenlaternen.
Das ist ja, darf man nicht.
Ja, das ist aber nicht unsere.
Nee, das dürft ihr auf keinen Fall machen.
Das dürft ihr nicht machen.
Ihr dürft ihr auch auf keinen Fall an befreundete Entwickler verschenken.
Genau.
Also ich habe mich da tatsächlich mal informiert, als ich mal meine erste große Sticker-Bestellung gemacht habe,
wie das denn rechtlich ist, ob ich als derjenige, der die Sticker bestellt oder in Auftrag gibt,
irgendwie rechtlich belangt werden kann dafür, wenn jemand die irgendwo hinklebt, wo sie nicht hingehören.
Nee, natürlich nicht.
Naja, aber wenn du öffentlich dazu aufforderst schon.
Okay, ich nehme es zurück.
Ich nehme es zurück und sage, der Konstantin hat euch dazu aufgefordert.
Ach so, üble Nachrede also auch noch.
Ach, alles, was ihr wollt. Heute alles, was ihr wollt.
Das volle Programm gibt es heute von mir.
Ja, ich bin schon wieder viel zu nett geworden.
Es wird Zeit, dass wir zum Thema kommen.
Ja, ich habe noch einen Retro-Punkt.
Du hast noch Retro, oder?
Ich habe noch einen Punkt, was mich beschäftigt hat, wo ich jetzt gerade dran saß.
Ich muss ja auch manchmal mit WordPress zu tun haben.
Und das macht nicht immer Spaß.
Ja, es waren turbulente drei Wochen seit der letzten Sendung, kann ich dir sagen.
Jedenfalls habe ich was gebraucht, um eine verschachtelte Shortcode-Struktur irgendwie zu manipulieren.
Und da das mit RegEx natürlich nicht sehr schön ist, habe ich dann geschaut.
Und es gibt eine Klasse WP-Shortcode-Tree, heißt die.
Also WP-Shortcode-Tree.
Und die macht genau das, die Past-Shortcodes auch verschachtelt, gibt die in der Baumstruktur aus, also als Array mit Objekten.
Und die kann ich dann manipulieren und am Ende wieder serialisieren und kann dann so lustige Dinge machen wie, also wenn ich jetzt mit so einem visuellen Editor bastle, der da irgendwie tausend Tags reinbaut und dann Container erzeugt und was weiß ich, dann kann ich mir halt bestimmte Inhalte aus einem Post herausfiltern und anzeigen.
Also irgendwie sagen, ich möchte nur, also es gibt bei dem Film, mit dem wir da arbeiten, gibt's Tab-Container und ich möchte an einer Stelle, möchte ich nur das erste Tab, nur den Inhalt des ersten Tabs von jedem Post ausgeben.
Und das kann ich zum Beispiel damit machen.
Und dann habe ich das gefunden und habe festgestellt, okay, in manchen Edge-Cases von mir funktioniert das natürlich wieder nicht.
Und da wären natürlich Tests ganz schön, dann habe ich angefangen, mir so ein paar Test-Cases zu schreiben, also einfach nur zu ausprobieren, funktioniert denn das?
Dann habe ich gesagt, nee, komm, jetzt machst du das richtig, habe das dann geforkt, habe tatsächlich Unit-Tests implementiert und Code-Coverage und die dann gleich noch auf 100% geprügelt und ein Pull-Request gestellt und das ist tatsächlich drin.
Und ich bin da jetzt sogar zum allerersten Mal in meiner Geschichte als Entwickler, auch als offizieller Collaborator mit Schreibrechten auf diesem Repo.
Ja, das war jetzt für mich ein Novum und bin mal gespannt, was ich da beisteuere.
Deswegen sage ich es nicht, ich sage es, um die Leute zu animieren, macht mit bei Open-Source-Projekten.
Also es macht tatsächlich Spaß und wenn ich könnte, dann würde ich einfach mal ein halbes Jahr mit einer Auszeit nehmen und nur beisteuern, Code bei Open-Source-Projekten.
Sachs-Fixen-Issues durcharbeiten, so wie bei diesem PDF-Gedöns, was ich da in der letzten Folge erwähnt habe.
Das macht einfach echt Spaß, also auch mit anderen Entwicklern, gerade jetzt, wenn man halt selbstständig ist und nicht so oft den Austausch hat mit anderen Kollegen und sowas,
dann ist das echt eine Abwechslung, da mal Feedback auch zu bekommen zum Code, zur Vorgehensweise und einfach mit anderen und auch zu sehen,
das Feedback von den Leuten, die die Issues eingestellt haben, die sich total freuen und sagen, oh cool, jetzt funktioniert das.
Also das ist echt super.
Also falls ihr wollt, dass der Konstantin das macht, dann jetzt mal eben kurz applaudieren.
Und ganz viel spenden.
Ja, aber guck, guck, es gibt schon ein paar Leute, die es wollen.
Es ist ja auch passend, es ist ja das Hacktoberfest, hast du das mitbekommen, das Schlamassel ums Hacktoberfest.
Ach, ich hab's ignoriert, ich hab irgendwas auf Twitter gelesen und dann Twitter wieder zugemacht.
Twitter auf, scheiße, Twitter zu.
Twitter auf, Mist, Twitter wieder zu.
Jetzt müssen wir es noch kurz erläutern, Hacktoberfest, das ist irgendwie seit einigen Jahren, wie heißt das, Digital Ocean, die Firma, die dahinter steckt.
Ich weiß es nicht, ich will ja auch gar keine Werbung jetzt für die so arg machen.
Die machen an sich eine gute Sache, ja, immer jedes Jahr im Oktober gibt's das Hacktoberfest und wenn man da vier Pull-Requests gemacht hat bei Open-Source-Projekten, bei öffentlichen Repositories, dann kann man T-Shirts gewinnen.
Und die sind wohl anscheinend auch qualitativ und auch designtechnisch echt ganz schlecht.
Also ich glaub, man kriegt die dann einfach, oder?
Genau, die kriegt man geschenkt.
Genau, das ist nicht nur gewinnen.
Also man verknüpft das mit seinem Git-Account und dann sehen die automatisch alle Pull-Requests, die man macht und dann, wenn man genug zusammen hat, ich glaub, das ist limitiert auf 70.000 oder so, aber das ist ja schon eine Menge, dann kriegt man das und ansonsten kriegt man als Drohspreis Sticker, solange der Vorrat reicht.
Also das ist einfach so ein bisschen, ne, Open-Source-Community anheizen und die lassen sich das ja auch was kosten.
Also ich mein, 70.000 T-Shirts, selbst wenn man die jetzt mit Mengenrabatt günstig, also schon, lassen da schon was springen.
Ist ja an sich eine gute Sache.
Jetzt hat aber irgendein indischer Entwickler ein YouTube-Video gemacht, wo er dazu aufgerufen hat oder quasi Tipps gezeigt hat, wie man denn möglichst schnell diese vier Pull-Requests zusammenbekommt.
Und dann haben reihenweise, sind die Leute, die die Owner nicht mehr hinterhergekommen, Issues zu bearbeiten, die dann solche Sachen waren, wie irgendwo ein Komma entfernt oder einfach den Satz eingefügt, this is an awesome project, in die Readme, ja, solche Sachen, werden wirklich geflutet davon, was jetzt zur Folge hatte, dass jetzt nur noch Repositories teilnehmen, die explizit ein Label gesetzt haben mit Hacktoberfest.
Ja, Menschen. Ja, Menschen. Also, this is why we can't have nice things. Irgendjemand muss das immer kaputt machen.
Ja, vor allem, es geht um ein T-Shirt.
Es geht um ein T-Shirt, ja, es geht um ein scheiß T-Shirt.
Also, was haben die vor? Dann damit wollen die das dann hinterher irgendwie bei Ebay verkaufen?
Vielleicht denken sie, das ist ihre Eintrittskarte, weil sie mit diesem T-Shirt dann zeigen können, wie toll sie in der Open-Source-Community mitmachen und beim nächsten Vorstellungsgespräch tragen sie das und werden dann auf jeden Fall eingestellt. Keine Ahnung.
Aber Arctic Code Vault Contributor klingt einfach so viel geiler als Hacktoberfest.
Ja, auf jeden Fall.
Wollte ich nur nochmal sagen.
Auf mein GitHub-Profil hinweisen, github.com slash Moritz Gießmann, wenn ihr das sehen wollt, Arctic Code Vault Contributor.
Und dank Moritz weiß ich, dass das bei mir auch steht, ich hätte es nämlich sonst gar nicht mitbekommen.
Ich weiß gar nicht, ist auch egal. Sendung weiß ich nicht, Nummer 37.
Ach, müsste ich auch gucken. Weiß ich auch nicht mehr.
Ich weiß, nein, es gibt noch gar keine 37 Folgen, aber egal.
Ja, gut. Das war Hacktoberfest.
Und damit, nee, damit kommt jetzt...
Moment, aber da irgendwie...
Habe ich da noch was reingeschrieben, was ich...
Irgendwie steht da noch was, ähm, was mit Units.
Ja, das ist dann bei der Property der Woche.
Ach, Entschuldigung.
Weil ich nämlich noch nicht genug gesprochen habe, äh, mach ich nämlich jetzt weiter mit...
Die Property der Woche.
Mit die Property der Woche, genau.
Oh Gott, du sagst dann später beim Thema nichts mehr, oder?
Ich sag später nichts mehr, nee.
Ich bin dann einfach mal ruhig.
Nee, ich hab, ich, äh, werde schon versuchen, irgendwie mich auch noch ein bisschen einzubringen, aber, ähm, ich bin dann erstmal ruhig.
Nein.
Also, es geht...
Nein, du musst meinen Rage teilen.
Ich werde mit dir, mit dir zusammen ragen, auf jeden Fall.
Ähm, es gibt eine Fortsetzung vom Fontspezial, äh, von letzter Sendung, also das Fontspezial Teil 2.
Und da habe ich heute noch ein paar Properties im Petto, äh, die sich auf Text in irgendeiner Form beziehen.
Und ich fange mal an mit, äh, Text Decoration.
Text Decoration Style, Text Decoration Color, Text Decoration Thickness und Text Decoration Skip Ink.
Und dann gibt's noch Text Decoration Underline Offset.
Ähm, ich wollte da eigentlich noch eine schöne Demo dazu basteln.
Das hab ich jetzt zeitlich nicht mehr geschafft, aber vielleicht schaff ich's ja, bis wir die Sendung live stellen.
Ansonsten hab ich noch ein anderes Code Pen, das, äh, das auch zeigt.
Ich würd einfach mal irgendeinen Code Pen suchen, musst du bestimmt nicht sehen.
Ja, ich hab, ich hab schon eins im, also als, als Fallback verlinke ich das. Mal gucken.
Ja, mach das einfach.
Genau. Also, ähm, Text Decoration Style Wavy fange ich mal mit an.
Und, äh, das ist jetzt natürlich nix lebenswichtiges.
Und man kann das auch, wenn man das übertreibt, dann kann man damit viel Scheiße bauen, ja.
Aber, ähm, es ist einfach mal ein bisschen was anderes, so zum, zum Aufhübschen.
Und ich hab da mal eine Seite gesehen, ich glaube sogar, die kommt irgendwo in den Shownotes von einer unserer alten Folgen vor, aber ich hab sie jetzt leider nicht mehr gefunden.
Da war das echt, äh, stilistisch schön eingearbeitet. Das sah einfach gut aus.
Also, wenn man das in Verbindung mit Typografie, wenn die Schriftart einfach auch gut aussieht und so als verspieltes Element für Zwischenreihen, ähm, das sah, sah richtig gut aus.
Oder Rechtschreibprüfung, oder?
Für die Rechtschreibung, ja genau, das kennt man so klassischerweise, Rechtschreibprüfung, ähm, mit diesen roten Unterkringeln.
Genauso sieht das auch im Endeffekt aus.
Aber man kann ja durch die Text-Decoration-Thickness und mit der Text-Decoration-Color kann man das natürlich auch schön einfärben.
Das heißt, ich hab, äh, einen großen lila Text und setze da eine 5-Pixel-dicke Wellenlinie in Pink drunter zum Beispiel.
Ähm, und das mit der Text-Decoration-Color und mit der Thickness, das konnte man früher so ein bisschen faken mit Box-Shadow, dass man das im iE 9 Plus zumindest hatte.
Aber das ist ja jetzt sowieso Geschichte.
Äh, oder man hat halt ein zusätzliches Rapper-Element, äh, mit Underline-Farbe als Color und dann Text-Decoration-Property, ähm, im Element selbst, dann die Text-Farbe mit Color gesetzt.
Also, äh, äh, das gab schon immer Versuche, das irgendwie unterschiedlich einzufärben und das geht jetzt ganz offiziell.
So, gibt's ja auch Short-Code? Ich tippe gerade, weil ich grad versucht, das auszuprobieren.
Das, äh, ist eine gute Frage, kann ich jetzt nicht beantworten. Ja, ob's Text-Decoration-Doppelpunkt einfach nur gibt und dann kann man da ...
Also, Text-Decoration-Doppelpunkt gibt's ja auf jeden Fall.
Ich glaub, man kann Wavy-Red, äh, 5-Pixel oder sowas, das müsste eigentlich, glaub ich, gehen.
Ja, das hab ich grade versucht, aber da, äh, äh, hast du Browser-Informationen? Sollte das in Firefox funktionieren?
Äh, das sollte eigentlich überall in allen Everglied-Browsern funktionieren.
Dann geht's, glaub ich, äh, ich guck mal, äh, Can I Use, verlinke ich natürlich auch wieder, 93 Prozent.
Also, genau das, äh, hab ich gerade Wavy-Red, 2-Pixel geschrieben.
Vielleicht ist die Reihenfolge irgendwie spezifisch, ich weiß es nicht.
Also, es sollte auf jeden Fall funktionieren, Firefox seit Version 6, äh, mit Text-Decoration-Color.
Style-Wavy seit Version 6 auch, ähm.
Ah, okay, dann, ich mach's mal einzeln. Ich glaub, es könnte sein, dass das vielleicht aus, aus Backboards-Compatibility-Gründen ...
Also, nur Wavy, hab ich, hab ich irgendeinen Fehler hier? Ich glaub, ich hab einen Fehler.
Also, vielleicht gibt's auch keinen Shortcode, weil, weil das ja erst später dazugekommen ist, und, äh, vielleicht wegen Backboards-Compatibility, keine Ahnung.
Ja, genau, das denk ich mir auch.
Na, ist auch egal, müssen wir jetzt auch nicht, äh, durchdeklinieren bis zum Ende, aber sind auf jeden Fall coole, äh, coole Eigenschaften.
Ich kannte die schon, ähm, ist, ist cool, einfach mal, einfach mal bisschen rumspielen.
Wem Underline zu langweilig ist, aber wolltest du eigentlich noch mehr?
Ich hab noch, äh, noch die letzten beiden, ja, von denen, also Text-Decoration-Skipping, ähm, das ist, ich glaub, das war, ich kann sein, dass ich jetzt was Falsches erzähle, aber ich glaube, das war eine Zeit lang in manchen Browsern implementiert, aber nicht als Property, das man verändern konnte, sondern manche Browser haben das einfach standardmäßig so gemacht, wenn ich eine, eine Link-Underline hatte, oder generell eine Text-Underline, und da war zum Beispiel ein J oder ein G oder irgendwas mit Unterlängen, dass dann der Strich automatisch an den Buchstaben unterbrochen wurde.
Und, äh, jetzt gibt's das auch als, als Property tatsächlich zum selber verändern, und, ähm, sodass es in allen Browsern einheitlich ist.
Ich glaube, das ist teilweise in bestimmten Browsern mittlerweile sogar Standard.
Genau, genau, also, äh, Firefox macht das zum Beispiel automatisch, soweit ich weiß, Chrome weiß ich jetzt gar nicht, müsste man mal ausprobieren, äh, vielleicht mach ich das auch irgendwie in der Demo, ähm, genau, und da kann man das jetzt einstellen, ob man, also es gibt None, Otto und All als, als Werte dafür, und None heißt eben, es geht durch die Buchstaben durch, Otto heißt, es macht das automatisch an den Buchstaben, und dann gibt's noch dieses All, das ist im Endeffekt nur hilfreich für chinesisch-japanisch-koreanische Schriftzeichen.
Weil da Otto wohl manchmal nicht so den gewünschten Effekt bringt, äh, und mit All kann man das dann irgendwie erzwingen, dass das funktioniert.
Und dann gibt's noch eins, das hab ich tatsächlich erst heute nochmal beim So-Nachschauen, äh, entdeckt, das kannte ich auch noch nicht, Text-Decoration-Underline-Offset.
Damit kann ich die, die Underline, äh, verschieben.
Und, dann hab ich beim Ausprobieren rausgefunden, dass das zusammenspielt mit Text-Decoration-Skipping.
Das heißt, wenn ich jetzt zum Beispiel irgendwo ein Wort hab, das mit Bindestrich getrennt ist, und ich schieb die, die, das Underline-Offset so weit nach oben, dann hab ich unter dem Bindestrich, hab ich den, seh ich die Linie noch, aber unter den anderen Buchstaben nicht.
Also, das ist relativ intelligent, was das angeht, das erkennt wirklich, wo ist Buchstabe, wo ist kein Buchstabe, und anhand dessen wird das dann unterbrochen.
Also, das fand ich nett, dass dann solche Details auch gedacht wurde bei der Implementierung.
Ah, es gibt doch ein Shortcode, ich hab's nur falsch, ich hab's nur falsch interpretiert.
Man muss erst sagen, also, was ich vergessen hab, ist, also, ich hab gedacht, Wavy reicht, aber du musst auch Underline hinschreiben, damit das Underline überhaupt da ist.
Ja, sonst weiß er ja nicht, ob Underline oder Overline stimmt.
Genau, also kann ich schreiben, Text-Decoration-Underline-Wavy, äh,
Red, 5 Pixel.
4 Pixel, Red.
Und wahrscheinlich sogar noch das Offset, noch mit minus 3 oder so.
Äh, oh, das ist aber, das ist verrückt, was ich grad gebaut hab.
Äh, so, was, äh, Offset, warte mal, dann müssen wir mal gucken, was minus ...
Ja, wahrscheinlich noch einen zweiten Pixelwert und dann irgendwie minus 3 Pixel oder so.
Okay, das war vielleicht zu viel, minus 1, irgendwas, ich muss mal ein bisschen kleiner machen, Moment, also, ich seh das jetzt leider nicht, was ich hier gerade mache, aber ...
Ah, das mit dem zweiten Pixelwert, irgendwie, das geht, glaub ich, nicht.
Okay, na gut, dann ist das wohl nicht implementiert, ja.
Auf jeden Fall in dem Shortcode, ich weiß nicht, soll ich die Demo, die ich jetzt grad gebaut hab?
Nee, es lohnt sich fast, oder?
Ich, vielleicht bastel ich dir noch eines.
Ja, die ist dann bestimmt schöner als meine, ich hab's grad wirklich nur schnell in CodePen reingehackt, sogar mit als Inline-Style, ganz, ganz böse.
Jo.
Gut, das war's zu den Properties und dann hab ich noch was, wenn du dazu nichts mehr hast.
Das geht noch weiter.
Ja, ja, ja, zu den Units.
Ja, deswegen, also das war eigentlich ursprünglich beides Bestandteil noch letztes Mal vom Font Special, aber da wären wir ja zeitlich arm geworden.
Units, genau.
Nicht alle Units, nicht alles, was es gibt.
Also man kann ja theoretisch sogar Zentimeter und Millimeter setzen im CSS.
Ja, lass ich ganz kurz.
Ja.
Zentimeter hab ich mal eingesetzt und zwar bei meinem Accessibility-Cheat-Sheet, einfach nur, weil ich's mal ausprobieren wollte.
Und was hat das gemacht? Wird das richtig umgerechnet? Sind dann zwei Zentimeter auf deinem Bildschirm?
Das hab ich tatsächlich nicht getestet. Ob das wirklich stimmt, hab ich nicht ausprobiert.
Mir ging's darum, ich hab das Ganze so im DIN A4-Design, also DIN A4-Style gemacht, also wirklich wie so ein Blatt.
Und da dachte ich mir, naja, wenn das Ganze irgendwie auf DIN A4 basiert, dann kann ich da auch irgendwie mit Zentimeter und Millimetern theoretisch arbeiten.
Wollte es einfach mal ausprobieren.
Das ist die einzige Stelle im Internet, die ich kenne, wo Zentimeter als Unit verwendet wurden.
Schreibt mal in die Kommentare, falls ihr noch was anderes kennt, außer mein Accessibility-Cheat-Sheet, wo Zentimeter als CSS-Unit verwendet wurde.
Das müsste man jetzt tatsächlich mal mit Lineal nachmessen und ausdrucken.
Das würde mich interessieren. Internet ausdrucken.
Ja, es könnte aber sein, dass es dann am Ende um Faktor 1, so und so viel vergrößert ist, weil das war nämlich mein Hack, um das für größere Monitore vergrößert darzustellen, ist, dass ich das Ding einfach nur scale.
Und dann würde es auch nicht mehr stimmen auf dem Monitor.
Das heißt, müsste die kleine Variante davon sein, da müsste es dann aber vielleicht stimmen.
Keine Ahnung, könnte ich auf meinem 4K-Monitor mal ausprobieren, ob es da auch noch stimmt.
Also es gibt hier einen Tweet von Julia Evans mit so einem kleinen Cheat-Sheet für CSS-Units und da steht auch Inch, Zentimeter, Millimeter, Great for Print-Style-Sheets, not so good for Web.
Aber es ist wohl tatsächlich so, also in speziellen Print-Style-Sheets kann ich das wohl einsetzen und hab dann hoffentlich am Ende auch tatsächlich dann zwei Zentimeter.
Ich glaub, es hackt super für Web.
Der Moritz baut jetzt alle Seiten nur noch in Millimetern und Zentimetern.
Relative Units sind viel zu kompliziert, es gibt ab sofort nur noch absolute Units, nur noch in Millimeter und Millimeter.
Gut, aber kommen wir doch mal zu den Units, um die es jetzt eigentlich gehen soll.
Aber wie gesagt, über die wollte ich eigentlich gar nicht reden.
Genau, fangen wir mal an mit EM.
Also EM, das ist einfach relativ zur Font-Size.
Oder hast du noch was?
Du machst da irgendwas mit Pupp?
Achso, du misst gerade nach.
Ich hab gerade tatsächlich ein DIN A4-Blatt drüber gelegt.
Über mein DIN A4-Blatt, es stimmt nicht.
Okay.
Es ist kleiner.
Genau, also EM relativ zur Font-Size, das heißt, das ist einfach die Fonthöhe.
Und zwar entweder des direkten oder des nächstgelegenen Parent-Elements.
Und da kann ich eben dann, wenn ich sag, Font-Height, also Line-Height, 1.2 EM, dann hab ich eben das 1,2-fache der eigentlichen Font-Höhe als Line-Height.
Und dann gibt's REM, das ist relativ zur Font-Size des Root-Elements, also HTML.
Das heißt, je nachdem, was da gesetzt ist oder was aus dem Browser-Stylesheet oder dem User-Stylesheet kommt, da wieder Referenz zu unserer Sendung, wo wir über CSS-Spezifität sprechen.
Und ich hab's jetzt auch tatsächlich richtig ausgesprochen.
Spezifität, nicht Spezifizität.
Und dann gibt's eine Unit, ich weiß nicht, die hab ich jetzt zum ersten Mal gehört, das wusste ich nicht, dass es gibt.
EX.
Kennst du?
Boah, gelesen hab ich die mal, aber...
EX ist relativ zur X-Höhe der Schriftart.
Also X-Höhe ist ja wirklich der Kleinbuchstabe X und dann meistens aller Kleinbuchstaben, je nachdem, wie die Font gestaltet ist.
Aber da kann man sich auch dran orientieren.
Fällt jetzt kein Beispiel ein, mit dem man das irgendwie, wo man das gebrauchen könnte.
Ich weiß nicht, ich glaub, relativ häufig wird das auch nicht eingesetzt.
Ja, vielleicht, wenn jemand ein Beispiel hat, wo er EX verwendet hat, schreibt's in die Kommentare.
Oder auf Twitter oder per E-Mail auch von mir aus.
Und bei YouTube einen Daumen hoch, bitte.
Genau.
Wir haben zwar keinen YouTube-Kanal dabei.
Drückt irgendwo auf den Daumen hoch bei YouTube.
Drückt einfach.
Kommentiert irgendwo drunter.
Unter irgendeinem YouTube-Video.
Beim Retzo zum Beispiel.
Beim Retzo.
Also einfach drunter schreiben, hey, ich hab EX eingesetzt. Punkt.
Aber schickt uns den Link dann dazu.
Genau.
Dann kriegt, wenn ihr das macht, beim Rezo irgendwo unter irgendeinem Video das kommentieren und uns den Link schickt, dann kriegt ihr Sticker geschickt von uns.
Sehr gut.
Gut, nächste und letzte Einheit CH.
Hast du das schon mal eingesetzt?
Auch nicht.
Ich auch nicht.
Also auch mal gelesen.
Es entspricht der Breite des Glyphens der Zahl 0.
Und zwar inklusive dem Weißraum davor und dahinter.
Also jeder, jedes Zeichen hat ja in einem Font auch einen Weißraum davor oder dahinter definiert.
Vor der eigentlichen Outline.
Und diesem Zeichen entspricht das.
Und also bei Monospace-Fonts dann entsprechend die Breite aller Glyphen.
Deswegen kann man mit Monospace-Fonts nämlich auch was Tolles machen.
Das zeige ich gleich noch als Bonus zu diesem Punkt.
Nur ganz kurz noch Ausnahme IE natürlich.
Aber den können wir ja inzwischen zum Glück vergessen.
Aber das war wieder so eine Geschichte.
Das erinnert ans Box-Model.
Wer ganz früh angefangen hat mit HTML und CSS.
Also es war im Endeffekt nicht sinnvoll nutzbar, weil IE hat es halt nicht supportet.
Was hat der IE gemacht?
Alle Browser halten sich an den Weißraum, nur der IE nicht.
Der nimmt nämlich exakt die Breite des Glyphens, also der Outline.
Sodass dann zum Beispiel drei...
Da müssen wir uns gar nicht drum kümmern.
Ja, also drei CH waren dann schmaler als der String 0,0,0 an sich.
Ja, also damit war das eigentlich hinfällig.
Also hätte man es auch gleich lassen können.
Da hätte man es gar nicht implementieren brauchen.
Aber gut, das war der IE.
Hast du eine Ahnung, wofür es diese Einheit gibt?
Weil mir fiel gerade ein...
Ich habe einen schönen Effekt, den ich jetzt gleich vorstellen will.
Was wäre denn dein Use Case?
Mein Use Case wäre...
Ich habe gerade überlegt, die 0 könnte ja das breiteste Zeichen der ganzen Zahlen sein.
Also so oder...
Ja, ja.
Ich glaube nicht, dass es bei den meisten Schriftarten eine breitere Ziffer gibt als die 0.
Ja gut, die Raute ist relativ fett manchmal.
Ja gut, das M, auch ein M kann weiter...
Ja, Zahlen nicht.
Okay, Zahlen.
Ich meine jetzt nur Zahlen.
Also da ist die 0 wahrscheinlich schon bei den breitesten.
Und habe dann gedacht, naja, wenn du jetzt keine Monospace-Font hast, aber trotzdem willst, dass die Zahlen untereinander dargestellt werden,
dann könnte diese Breite vielleicht tatsächlich interessant sein.
Allerdings gibt es dafür ja mittlerweile in CSS auch eigene Eigenschaften, um Zahlen vernünftig untereinander darzustellen.
Wenn die Font das unterstützt, ja.
Das sind ja auch wieder die OpenType-Features, wo wir das letztes Mal drüber hatten.
Da gibt es ein Feature, das man aktivieren kann.
Aber das bringt dir ja auch nichts, außer du packst alle Zahlen.
in ein einzelnes Span.
Ja, kann ja machen.
Das kannst du machen.
Und dann kannst du sagen, die Breite ist ein CH von jedem Span, dann sind die untereinander.
Ja, das kannst du machen.
Kannst es aber auch lassen.
Dann bin ich halt, ja genau, dann habe ich halt aber auch die Breite an, an dem Zeichen, an der Zeichengröße.
Außerdem kommen wir dann, dann schlagen wir damit schon den Bogen zum Hauptthema, nämlich, dann kommen wir nämlich zum Thema Semantik, ja, und irgendwie jede einzelne Zahl in ein Span zu packen.
Das muss nicht, das muss nicht unsemantisch sein, aber es ist auf jeden Fall scheiße für Accessibility.
Aber jetzt ganz kurz noch ein Einsatzzweck, für den man das tatsächlich nutzen kann.
Aber ich glaube, das ist noch das Einzige, was mir einfällt.
Ist ein Type-Effekt, nur mit CSS.
Und das verlinke ich natürlich da ein Code-Pen dazu.
Und zwar mit dem, mit der Timing-Function Steps.
Kennst du, sagt der die was?
Kennst du die?
Boah, ja, auch mal gelesen, aber ...
Genau, da verlinke ich auch einen Artikel von Lia Veru dazu, wie das funktioniert und entsprechende Demos auch dazu.
Das ist nicht ganz so trivial zu verstehen.
Da gibt es zwei Parameter, Number of Steps und Direction.
Und der Direction, da gibt es dann Start und End.
Und dann unterscheidet sich das, je nachdem, ob die Animation quasi am Anfang des Schrittes oder am Ende des Schrittes beginnt und aufhört.
Ich kann es selber nicht wirklich erklären.
Am besten guckt man sich die Demos an in der zweiten Demo, die Auto-Demo.
Da sieht man den Unterschied.
Du kannst auch mal draufklicken, im Trello habe ich die Demos verlinkt.
Da sieht man, was das für einen Unterschied macht.
Das fängt dann eben früher oder später an ein bisschen.
Aber der eigentliche Effekt ist eben so ein Type-Effekt.
Also wenn man das Code-Pen lädt, dann macht das hier so, tipp, tipp, tipp, tipp, tipp, mit so einem blinkenden Cursor.
Und this is a Typing-Demo.
Und die einzelnen Buchstaben erscheinen dann wie mit einer Schreibmaschine, heißt das.
Genau.
Für die Älteren unter euch, wenn sie sich erinnern.
Genau.
Gelöst ist das Ganze eben, indem diese Einheit CH gesetzt wird auf, wie war denn das?
Das ist die Menge der Zeichen.
Das ist halt das Einzige, was man braucht.
Also die Anzahl der Zeichen, das muss halt vorher klar sein.
Da gibt man dann, das sind jetzt 22 Zeichen, also die Width auf 22 CH.
Und dann wird das, äh, wird das quasi, ähm, animiert, aber eben nicht flüssig animiert.
Also wenn ich diese Steps weglassen würde, dann würde sich das einfach aufziehen, aber halt nicht schrittweise.
Das heißt, äh, ach so, wichtige Info fehlt noch, wenn man das jetzt nicht sieht, sondern hört, es ist eine Monospace-Font, hab ich glaube ich nicht gesagt, ja, Monospace-Font.
Ich weiß die Anzahl der Zeichen und ich weiß die Anzahl der Zeichen und ich sage eben, äh, animiere von 0 auf 22 CH und ganz wichtig eben mit dieser Animation-Function Steps und ich sage 22 Steps, da kann ich eben schrittweise die Buchstaben erscheinen lassen.
Und das fand ich einfach ganz nett.
Also ich habe das auch, äh, irgendwo aus dem Tweet, den, äh, weiß ich nicht, ob ich den, ob ich den noch finde, ob ich den auch in die, äh, reinposte in die, in die Links, ähm, fand ich aber ganz cool.
Äh, ich würde gerne mal diese Animation-Zeile da vorlesen, weil das, äh, das ist schon bemerkenswert.
Also, Animation-Doppelpunkt, Typing, Typing ist in dem Fall die Animation, die als Keyframe-Animation definiert ist.
Dann 2s, Steps in Klammern 22, Komma, Blink, das ist eine andere Keyframe-Animation, ähm, Punkt 5s, Step-and-Infinite-Alternate.
Das ist also, ähm, Typing ist tatsächlich, äh, in dem Fall nur der Text und Blink, das ist der Cursor, ähm, der soll halt Infinite und, warum Alternate?
Das glaube ich, muss das Alternate sein? Ich glaube nicht. Das nehme ich mal kurz weg.
Ähm, oder was passiert, wenn ich da nicht Alternate habe?
Oh, irgendwas flackert dann.
Ah, der blinkt, der blinkt, der blinkt dann schneller, wenn ich nicht Alternate mache, wahrscheinlich wegen dem, äh, wegen der Verzögerung.
Ja, aber es ist ganz interessant, wenn man die Steps rausnimmt, dann, dann, dann, dann zieht sich das einfach auf und das ist halt flüssig.
Und das will man ja gerade nicht, sondern man will ja, dass es ruckartig passiert.
Also, für die Steps könnte ich mir vielleicht noch andere Sachen ausdenken, für die CH bin ich mir echt nicht sicher, was da ein Anwendungsfall ist.
Also, äh, okay, und Steps, äh, in dem Fall wird die Zeit, die Animation-Time einfach in 22 Schritte unterteilt, nehme ich mal an.
Genau, genau.
Ja.
Ah ja, okay, das kannte ich tatsächlich auch nicht.
Also, ich könnte theoretisch auch zwei auf einmal wahrscheinlich erstellen lassen, wenn ich halt einfach nur elf nehme.
Äh, dann habe ich immer zwei Buchstaben auf einmal.
Ja.
Genau.
Also, ja.
Also, in dieser einen Zeile, finde ich, steckt schon ziemlich viel drin.
Ja, auf jeden Fall.
Okay, ja.
Gut, dann, ähm, ach ja, genau, da habe ich mir noch aufgeschrieben, Fillmode und Iteration Count haben auch Auswirkungen.
Wir sind jetzt bei knapp 50 Minuten.
Ja, da geht noch was.
Ne, nur noch dieser Satz, dann bin ich ruhig für eine Weile.
Also, Fillmode und Iteration Count haben Auswirkungen auf die Schritte.
Und ebenfalls auf den Artikel und die Demos verweisen, habe ich mir da hingeschrieben, was ich hiermit tue.
Viel Spaß.
Ja, so würde ich das auch machen.
Viel Spaß damit.
Gut.
Dann, kommt, müssen wir jetzt, ich höre wieder aus der Regie, wir müssen ein bisschen Werbung machen.
Bastele, installiere einfach.
Maßband mit LED-Display, einfach zu messen.
Montierst, bastelst du oft?
Hier ist das digitale Maßband, erleichtert dein Leben.
Reparierst, renovierst du?
Mit elektrischem Maßband, sofort gemessen.
Bitte umlöschen, da eingetragener D-Adresse aus dem Verteiler.
Verlorst du deine Maßband?
Das digitale Maßband mit LED-Display plus drei Modus.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Also ich war ja etwas argwöhnisch, aber der plus drei Modus, der hat mich überzeugt.
Also ich glaube, das ist, so stellen sich die Verfasser von diesen Spam-Mails das vor, wie die Leute das rezipieren.
Also so stellen die sich die Wirkung ihrer Spam-Mails vor, so ein Werbespot, der überzeugt.
Ich glaube nicht, dass sie sich die Wirkung so vorstellen.
Ich habe mir quasi fast in den Kopf geschossen.
Wenn ich eine Knarre hier liegen habe, dann hätte ich es gemacht.
Ich sage ja nicht, dass das die Reaktion der Empfänger ist.
Ich sage ja, so stellen sie sich das vor.
Die glauben, dass ihre Werbung so ergreifend ist.
Vielleicht jetzt labere ich ja schon wieder.
Aber ganz kurz für die Neuhörerinnen und Hörer.
Spam-Spots, das sind echte Spam-Mails, die wir verarbeiten zu, meistens ich verarbeite, zu einem Werbespot.
Und wer mag, darf uns die gerne schicken.
Der morgens bloggt euch dann vielleicht auf Twitter oder per E-Mail.
Das kann passieren.
Aber...
Ja, das kann passieren.
Kommen wir doch zum Thema, hm?
Ja, nee, warte, warte, warte.
Ich wollte nur sagen, ihr dürft uns natürlich Spam-Mails schicken,
aber ihr dürft auch den Konstantin buchen als Sprecher.
Weil er total gut das macht.
Er sagt dann immer, ja, ist so geil.
Aber der Konstantin ist ein total geiler Sprecher.
Der hat doch unser Intro gesprochen, also ihr dürft ihn buchen.
Ich kann sprechen wie alle deutschen Synchronsprecher sprechen.
So, gebucht.
Du hast 100 Euro.
Dann muss ich nicht mehr arbeiten und dann kann ich mich mehr am Open Source kümmern.
Konstantin kann euch zum Beispiel euren Mailbox-Text einsprechen.
Genau, mit der Stefan-Rab-TV-Total-Fake-Stimme.
Genau, oder, äh, Frank, kennst du Frank Zander?
Frank Zander.
War das Frank Zander?
Ich bin gerade am überlegen.
Es ist so ein Schlagersänger.
Ich glaube, das war Frank Zander.
Ah, hier, ähm, der, der, der, der, der, der, der, der.
Ich weiß es nicht genau.
Ich glaube, mehr dürfen wir nicht sagen.
Ich kenne kein Lied von dem, ich kenne nur den Typen und der hat halt mal, der hat mal
so CDs, also du konntest dir so ein Geburtstagslied von ihm singen lassen mit deinem Namen.
Es gibt ja, ah, wie heißt das denn, ähm, cameo.com, ist es das?
Wahrscheinlich öffne ich jetzt eine Pornoseite.
Äh, nee, das ist es tatsächlich, ähm, kennst du das?
Cameo.com?
Nee.
Also Cameo nennt man das jetzt fast ein Geilteil, aber das fällt mir jetzt gerade
ein, äh, cameo ist ein, so ein Gastauftritt, den zum Beispiel Regisseure in ihren eigenen
Filmen haben, ja, die machen das ja ganz gerne, dass sie dann da selber zu sehen sind oder
dass, äh, irgendwelche Promis halt in Filmen, als sie sich selbst auftreten im Hintergrund.
Und es gibt die Seite cameo.com, da kannst du dir von Celebrities Videonachrichten einsprechen
lassen.
Zum Beispiel hier, äh, meine Tante ist großer, na gut, also, sind jetzt Englischsprachige,
äh, hauptsächlich, aber jetzt mal angenommen, Thomas Gottschalk wäre da dabei und deine Tante
ist irgendwie ganz großer Thomas Gottschalk-Fan, dann kannst du hier sagen, äh, hallo Thomas Gottschalk,
bitte sprich mir diese Nachricht ein.
Ach du Scheiße, Snoop Dogg für 828 Euro.
Ja, also die sind teilweise nicht ganz billig, ja, ähm, und da ist wirklich von Sportlern,
also hier, NBA, äh, Spieler und was weiß ich was, also.
Ernsthaft?
Oh Gott, was ist aus unserer Kreativszene geworden, dass sie das nötig haben, ehrlich?
Ja.
Ach du Scheiße, ich hab, ich hab Mitleid.
Not Tom Cruise, das find ich gut.
Ja, es gibt auch ganz viele Double, also es gibt Double, die dann für dich so tun, als
ob, ähm, ja, ist mir jetzt nur gerade eingefallen, aber wir schweifen schon wieder ab und wir haben
Konstantin, also das ist unser Ziel, dass wir auf dieser Seite mal landen.
Dass wir da drauf landen, ja.
Dass wir da, dass wir da für, für 23,70 Euro jemandem irgendwas einsprechen.
Ja, was für andere?
Oh Gott, das ist ja, das ist ja schrecklich, aber das ist ja, das ist ja echt, also das
ist ja so die letzte, die letzte Stufe der, also das ist kurz vor Onlyfans, bevor du dann
irgendwie Nacktbilder verkaufst, äh, von dir, da machst, versuchst du noch das, wenn
das nicht klappt, dann landest du wahrscheinlich bei Onlyfans und verkaufst Nacktbildern.
Meine Fresse, aber wirklich Snoop Dogg ist so ziemlich der einzige richtige Star, den
ich da gesehen hab, also von denen, die ich kenne.
Nee, also es gibt schon, schon auch bekannte Schauspieler und so, also von denen, die ich
jetzt gesehen hab, kenn ich auch irgendwie keinen einzigen, aber, ähm, es gibt da schon
auch, ähm.
Aber das ist doch, aber das ist doch wirklich, äh, das ist doch Selbsterniedrigung.
Wie für, für, für 350 Euro.
Weißt du, wenn's Fans gibt, die das, die das wollen und darauf abfahren?
Äh, äh, ja, aber, aber ich seh das aus Sicht des Schauspielers oder, oder des, das, das,
das, das, das, das, das macht man das.
Ja, ich glaub, weißt du, was meinst du, wie oft du angesprochen wirst von Fans?
Äh, kannst du mir schnell einsprechen?
Dann kannst du als Schauspieler sagen, jo, kann ich machen.
Gehst du auf Camillo?
Kost halt.
Weil du irgendwann keinen Bock mehr hast.
Irgendwie kostenlos hier mit deiner Stimme und deinem Äußeren.
Äh, nein, fick dich, geh in meinen Kinofilm.
Ja, kann man auch.
Ich find, das ist ne, das ist, warte mal, Jayjack, oh Gott.
Ich lese mich hier grad durch.
Flavor Flav.
Für 230 Euro kriegst du was von Flavor Flav.
Also bevor du, bevor du in diesem Rabbit Hole verschwindest.
Nein, nein, nein, nein, da geh ich jetzt rein.
Du hast keine, da bist du jetzt schuld dran.
Ich spiel jetzt das Jingle.
Hier ist WWS IV mit dem Tagesthema.
So, hier, Konzentration.
Nein, nein, nein, nein, das ist zu gut.
Das ist einfach zu gut.
Hier, Flavor Flav, 230 Euro.
Also bitte, falls ihr spendet und unter Buy Me A Coffee, ihr findet den Link auch im Feed, also in der Folgenbeschreibung und auch auf unserer Homepage oben bei Buy Me A Beer oder Spendi Ein Bier.
Spendiert Geld, damit ich mir von Flavor Flav eine personalisierte Nachricht schicken lassen kann.
Ja, super, jetzt spendet erst recht keiner.
Nein, wir verbraten euer Geld nicht für solche Unwichtigen.
Die Leute spenden für den verrücktesten Scheiß.
Ich meine, es gibt Twitch-Leute, die leben vom, da sitzen und in die Kamera gucken und dumm rumlabern, also dafür spenden die Leute Geld.
Also, egal.
Jetzt muss ich ja wieder sauer werden, weil ich war gerade gut gelaunt.
Ja, schade, schade aber auch.
Das ist schlecht, das ist schlecht für das Thema, unser Thema, wir haben es noch gar nicht so richtig gesagt, ne?
Weil normalerweise sagen wir es manchmal vor, ich habe nur gesagt, wir müssen reden.
Stimmt, ja.
Also, ich fange mal so an, ich bin echt angepisst.
Ich bin wirklich, wirklich angepisst.
Ähm, bei dem, bei dem Thema, über das wir heute reden, nämlich HTML-Semantik.
Ähm, warum bin ich angepisst?
Weil ich das Gefühl habe, es interessiert keine Sau.
Es ist meiner Meinung nach irgendwie das, das, das Handwerk im Web, wie es, wie es sein sollte,
ähm, dass man irgendwie sich ein bisschen Mühe macht und das richtige HTML-Element raussucht für, ähm, für den richtigen, für den Anwendungsfall.
Und es interessiert keine Sau.
Diff, diff your life.
Diff-Suppe.
Äh, full, full-sack-Developer.
Äh, ja, keine Ahnung.
Also, Diffs mit Klickhändlern sehe ich irgendwie, Diffs mit Überschriften drin.
Hauptsache, Diff, ich verstehe gar nicht, warum, warum erfindet ihr wenigstens nicht eure eigenen Elemente?
Das wäre wenigstens noch kreativ, irgendwie so, äh, ein Penis- und ein Vagina-Element fände ich deutlich besser als Diff.
Ich kann einfach kein Diff mehr sehen.
Ich habe Divitis nochmal nachgeschlagen.
Vielleicht kennt das, äh, der ein oder andere das Wort.
Konstantin, kennst du Divitis?
Sag dir das was?
Das über, der übermäßige Gebrauch von Div-Tags.
Genau.
Und ich habe es nochmal gegoogelt.
Und zu meinem Erstaunen bin ich nicht nur auf irgendwelchen Nerd-Blog-Artikeln gelandet, sondern im englischen Victionary.
Das Wort ist im englischen Victionary drin und da steht genau, äh, Web-Design, äh, usually derogatory, das habe ich auch gerade erst gelernt, das Wort.
Derogativ.
The practice of authoring Webpage-Code with many Div-Elements in place of meaningful semantic HTML-Elements.
Also sogar im Victionary, nicht auf Wikipedia.
Es ist witzig, dass du auch die Bedeutung von was nachgeschlagen hast.
Ich habe nämlich auch so als Einstieg, ähm, mal nachgeschlagen auf Duden, was heißt denn Semantik?
Und, äh, das heißt, es ist, äh, definiert als Teilgebiet der Linguistik, das sich mit den Bedeutungen sprachlicher Zeichen und Zeichenfolgen befasst.
Oder zweitens als Bedeutung Inhalt eines Wortes, Satzes oder Textes.
Das ist eigentlich ganz gut erklärt.
Ich meine, Linguistik ist natürlich jetzt auf Sprachwissenschaft im eigentlichen Sinne bezogen, aber HTML ist auch eine Sprache und eigentlich ist das, äh...
Lass mich doch noch ein bisschen die Leute beleidigen, ich war noch gar nicht, äh, ich wollte nämlich gerade sagen, ähm, es, es hören ja vielleicht auch Entwickler zu, die relativ neu sind, Quereinsteiger, vielleicht auch einfach noch recht jung, gerade in der Ausbildung zum, äh, Medienverunstalter oder was weiß ich, ähm, ähm, und...
Nee, Fully Stuck Developer.
Fully Stuck Developer.
Das ist die neue Ausbildung.
Ähm, und vielleicht, also manchen Leuten sagt das vielleicht einfach gar nicht, die wissen gar nicht, dass sie was falsch machen. Ich glaube nicht mal, dass das Boshaftigkeit ist.
Vielleicht ist es manchmal einfach Faulheit, aber ich glaube, es ist auch ganz viel Unwissen und ich meine, da sind wir ja hier, um unseren Bildungsauftrag zu erfüllen.
Nee.
Ähm, und nicht einfach nur, um zu rage. Also ich glaube, wir machen jetzt ein bisschen guter Cop, böser Cop. Du bist ja böse Cop, ich bin der gute Cop.
Das habe ich gerade auch gedacht, aber es ist mir egal, wenn du, wenn du an der Stelle guter Cop sein willst, dann sei es so, aber das habt ihr gar nicht verdient, dass es einen guten Cop gibt.
Eigentlich habt ihr, habt ihr hier zwei Sensenmänner verdient, die hinter euch herrennen mit einer Peitsche und, äh, einer Knarre und einem Baseballschläger mit Stacheldraht drumherum.
Brennend.
Also das bin ich gerade.
Aha.
Weil seit 15 Jahren erzählen wir euch dieselbe Scheiße. Seit 15 Jahren sagen wir euch, benutzt vernünftige HTML-Texts, benutzt das, was im Standard vorgesehen ist und was nehmt ihr Diffs?
Also wir im Sinne von diesem Podcast, den es noch nicht mal ein Jahr gibt, oder?
Dieser Podcast, ja, seit 15 Jahren erzählen wir euch das. Wir haben nämlich die Zeitmaschine erfunden. Morgen haben wir die erfunden. Und da erzählen wir euch das.
Ne, die, die ganze, die ganze, die, also, oh Gott, jetzt muss ich aufpassen, was ich sag. Die ganzen Devalopper, die was auf sich halten. Aus meiner Sicht.
Ach, der Bobby von, ich bin immer noch hier auf Cameo, Entschuldigung.
Der, der Bobby, der Bobby von, ähm, von, wie heißt, wie heißt, wie heißt diese Sendung nochmal? Äh, diese, ach, diese, diese, diese, diese fünf, diese fünf Schwulen, die irgendwie den Leuten dieses Haus umdekorieren und, und dir neuen Bart, Bartfrisur verpassen.
Weißt du, wie, weißt du, wen ich meine?
Äh, nee.
So eine Netflix-Serie. Der Bobby von denen, der kann's für 184 Euro.
Egal.
Mach mal das Tab zu jetzt.
Ich hab's jetzt, ich hab's jetzt, ich hab's jetzt zugemacht.
Okay.
Also, seit 15 Jahren erzählen wir dieselbe Scheiße und ich will, ich will, dass das aufhört. Ähm, wir, wir sagen euch auch noch ein bisschen was Konkreteres dazu. Ich hab jetzt viel rumgeraged, ihr Full-Suck-Developer. Äh.
Mir fallen keine dummen Namen mehr ein. Ich hab's schon überlegt, ob wir die Sendung, äh, nennen sollen, warum ihr alle blöde Hurensöhne seid.
Nein.
Egal.
Ganz ruhig. Einmal tief durchatmen, nimm mal einen Schluck Bier.
Ich hab kein Bier mehr.
Ach, verdammt.
Ich muss, ich kann mir noch eins holen, aber dann musst du kurz reden.
Ich hab aber gar nichts zu sagen. Also, nee, zum, also, zum Thema hab ich jetzt gar nichts zu erzählen.
Du könntest, ähm, du könntest in der Zeit, ähm.
Wir machen einfach, du gehst holen, wir machen so lang Feuerwerk.
Okay, wir machen so lang Feuerwerk. Bis gleich.
So, Zeitzähnen voll genutzt, würde ich sagen.
Oh, Mann.
So.
Also, ich hab grad schon gesagt, Diffs mit Klickhändlern gehen mir auf den Sack.
Ähm, nee, wir fangen mal, fangen wir mal von vorne an.
Also, ich hab grad die Tage, ähm, da kam das jetzt auch nochmal her, wo ich mich ein bisschen damit beschäftigt hab, ähm, einen kleinen Vortrag, äh, zu dem Thema gehalten.
Der wurde dann auch, ähm, noch vertwittert.
Ich hab da zum ersten Mal, ähm, Entschuldigung.
Huch.
Boah, ihr wisst jetzt, wie ich drauf bin. So, das kommt auch rein, das wird nicht rausgeschnitten.
Ähm, also, ich hab mal Twitter als Medium genutzt, um einen kleinen Artikel zu schreiben. Ähm, das fanden nicht alle witzig.
Ich glaub, Konstantin, du hast das auch gesehen, dass da, ähm, dass da jemand gesagt hat, ey, mach doch einen Blogartikel.
Und ich so, nee, ich mach jetzt mal hier, ich versuch jetzt mal ein Fett zu schreiben bei Twitter, ich mach jetzt mal keinen Blogartikel.
Ähm, das ist einfach, das ist so, so alt.
Also, wenn, dann würde ich ein TikTok machen oder ein, ich glaub, Snapchat ist auch schon wieder alt, oder?
Wenn, dann, wenn, dann würde ich ein TikTok machen, dann muss das in eine Minute passen.
Nee, Like für Teil zwei, glaub ich, sagt man bei TikTok.
Ach.
Und dann muss man mit so einem krassen, mit so einem krassen Cliffhanger-Muster enden.
Und dann sagst du, Like für Teil zwei oder, genau, mach das.
Und dann passiert aber nie was. Also, den Teil zwei, den gibt's dann einfach nie.
Genau, Teil zwei gibt's einfach nie.
Ähm, egal, so, das ist das, da hangele ich mich jetzt auch ein bisschen durch.
Äh, der, der Link zu dem kleinen Thread, ähm, der kommt auf jeden Fall in die Shownotes.
Genau, also, wo fang ich an?
Es gibt ungefähr 100 HTML-Elemente.
Und ich hab mir vorher noch überlegt, ob wir noch ein kleines Spiel spielen sollen,
ob wir zufällig über welche reden sollen, ähm, ohne dass wir vorher wissen, welche.
Das können wir vielleicht später noch machen.
Ähm, also zum Beispiel, ähm,
Ich nenne jetzt mal ein paar HTML-Elemente, die nicht so verbreitet sind oder die nicht unbedingt jeder kennt.
Zum Beispiel das Dell-Element oder das Meta-Element oder Progress oder Figure.
Mittlerweile gibt's, glaub ich, auch das Picture-Element.
Ähm, einfach mal so als Beispiel für Elemente, die, die man vielleicht noch nicht benutzt hat.
Hast du was davon schon mal benutzt?
Ähm, ich glaube, Dell mal in einem Blog-Beitrag, ähm, Figure tatsächlich im Zusammenhang mit Bildunterschriften.
Ähm, was war das andere, was du noch gesagt hast, Dell?
Ähm, Meter und Progress.
Meter? Also, Meter-Tag.
Nee, M-E-T-A-G-E-R.
M-E-T-A-G-E-R.
Ach, M-E-T-A-G-E-R.
Ach so, äh, hier so, so Progress, äh, nee, ist auch wieder was anderes, oder?
Nee, also ich glaub, ich glaub nicht.
Ja, Progress und Meter, gibt's beide.
Okay, Meter, nee, das hat mir jetzt tatsächlich gar nix.
Aha, äh, Wolfscraft, das Helle.
Kann mir jetzt Geld überweisen, weil ich jetzt grad Werbung dafür gemacht hab.
Ähm, also, ich, wir haben auch, äh, den Link in den Shownotes, ähm, zu der, zu dem MTN, äh, zu der MTN HTML Elements Reference, wo die ganzen HTML Elemente aufgelistet sind.
Da sind auch, äh, aufpassen, da gibt's einen Bereich Obsolid und Deprecated Elements, die solltet ihr nicht mehr verwenden.
Ähm, das, das sind die, die mittlerweile rausgeflogen sind aus dem Standard.
Da sind ganz interessante Sachen drin, die man einfach, warte mal, ist da, eins verwenden wir bei uns auf der Homepage, glaub ich, nämlich Marquis.
Das ist in der Liste drin.
Ähm, für die, die es nicht wissen, das Marquis-Element, das macht so einen Lauftext auf der Seite, ähm, tatsächlich komplett ohne JavaScript und ohne CSS-Animation.
Man braucht einfach nur das Marquis-Tag.
Ähm, das funktioniert tatsächlich auch, äh, in Chrome und in Firefox immer noch, komischerweise.
Ähm, ja, ich will gar nicht so sehr auf die Elemente eingehen, die es nicht mehr gibt.
Ähm, vielleicht, äh, vielleicht.
Ähm, noch sowas wie Framesets gibt's nicht mehr, falls ihr das noch kennt, ähm, von früher, äh, ist nicht mehr.
Werde die auch nicht mehr unter, äh, supported, kann ich gar nicht mehr bauen, oder?
Ja, doch, die werden, glaub ich, schon, die werden schon noch supported, aber die sind ...
Warum sollte ich das tun?
... eigentlich aus, die sind Deprecated.
Äh, ja, was auch interessant ist, Akronymen zum Beispiel gibt's nicht mehr.
Ich kann mich noch erinnern, dass ich das mal eine Zeit lang noch aktiv genutzt hab, aber Akronymen gibt's nicht mehr.
Man nutzt jetzt nur noch A-B-B-R für Abbreviation, also für Abkürzung.
Aber egal. Ähm, wir bleiben mal, wir bleiben mal erst ein bisschen, ähm, bei, bei Sachen, die man tatsächlich irgendwie, äh, so im Alltag braucht.
Ich mein, es gibt sehr, sehr viele spezielle Elemente, aber wir bleiben mal so beim Alltag.
Und, äh, als, äh, wie der, also danke für den, äh, an den Konstantin noch mal kurz für vorhin die kurze Definition, weil die wär jetzt auch gekommen.
Ach, sorry.
Ich kann's auch noch mal kurz sagen.
Also, die Kurzdefinition in der englischen Wikipedia, ähm, ist halt, ähm, ja, Semantics ist the study of meaning, also die, die, äh, die Wissenschaft, keine Ahnung, ist es vielleicht ein bisschen übertrieben, der Bedeutung.
Also, es geht um die Bedeutung von, äh, von Wörtern oder von Sätzen oder, äh, Larger Units haben sie es noch genannt, also komplette, äh, längere Texte oder, ja, Bedeutung.
Ähm, und Diff, weil ich mich vorhin so viel über Diffs ausgelassen habe, ist das Element, das in HTML überhaupt gar keine Bedeutung hat.
Ähm, das bedeutet einfach nur, dies ist ein, das ist einfach nur ein Container.
Das sagt überhaupt nichts über den Inhalt, über die, über die Funktion Diff, Division, einfach nur ein Container.
Deswegen, wenn ihr es vermeiden könnt, ein Diff zu verwenden, es gibt, es gibt gute Anwendungsfälle dafür, wenn ihr, wenn ihr einfach wirklich tatsächlich nur ein Container braucht, der sonst gar nichts ausdrücken soll, also irgendwie so ein, ähm, man braucht irgendwie noch einen Wrapper innerhalb von einem Element, um irgendwas anzuzeigen.
Oft halt, oft braucht man es irgendwie für CSS. Ähm, dann ist ein Diff das richtige Element, aber in den meisten Fällen, in den meisten anderen Fällen einfach nicht.
Ähm, warum sollte man sich eigentlich darum kümmern? Ich meine, man kann ja sagen, warum mache ich nicht Diff? Das ist doch schön einfach. Äh, Diff hat irgendwie auch wenig Basis-Styling im Browser, was man irgendwie überschreiben will.
Warum soll ich denn jetzt eigentlich eine Liste nehmen? Also ein UL mit LI-Element oder sowas. Ich kann es doch auch mit Diffs bauen, da habe ich irgendwie keinen Ärger, kann alles irgendwie schön stylen.
Naja, Lesbarkeit ist mein Hauptargument, ähm, für semantisches HTML. Und zwar Lesbarkeit in ganz vielen verschiedenen Richtungen.
Also, es ist sowohl für den Developer, der den Code vielleicht nicht selbst geschrieben hat, oder für euch, äh, in zwei Monaten, weil in zwei Monaten hat man vergessen, was man vor zwei Monaten geschrieben hat.
Also bei mir ist das zumindest so. Frage ich mich oft so, wer hat denn die Scheiße geschrieben? Und dann gucke ich, dann war ich selbst.
Ach, das war ich.
Ach, das war, Konstantin, ich glaube, bei dir ist das nicht so das Problem. Ähm, ich, ihr seid ja nur zu zweit bei euch. Äh, da stellt sich die Frage nicht so, wer hat's geschrieben?
Das sieht man dann in der Regel am Code-Style schon irgendwie so.
Ah, ja, okay, also dann ist es, dann ist es ja noch einfacher. Das heißt, du brauchst gar nicht in Git zu gucken, ähm, wer's committed hat.
Ja, doch, wir haben schon auch, äh, haben wir ja auch in der Folge, jetzt muss ich, äh, gucken, in unserer Vergleichsfolge hier, ähm, große Firma versus Dingens, äh, kleine Klitsche, Folge 9 war das.
Ähm, wir haben schon auch Versioning, also ich sehe das dann schon, aber meistens steht da halt mein Name in der kompletten History.
Und dann ist es recht eindeutig.
Ja, genau. Also, ich war bei Lesbarkeit. Lesbarkeit für dich selbst. Also, du gibst dem Ganzen viel mehr Struktur. Einfach nur beim ersten Blick drauf kannst du viel besser verstehen, was soll denn eigentlich was sein.
Das ist für dich gut. Das ist aber auch für deine Kollegen gut, weil die das auch dann schneller, äh, und besser verstehen können.
Was aber noch viel wichtiger ist, ähm, sind, ist Lesbarkeit, ähm, für Maschinen, ähm, im weitesten Sinne. Also, das Thema SEO ist da ganz groß, ähm, und lasst euch nicht von irgendwelchen, äh, dunklen SEO-Priestern irgendeine komische Sache, äh, aufschwätzen.
Guckt lieber vorher mal nach, ob das auch vernünftiges HTML ist, weil im SEO, da gibt's eine Menge merkwürdiger Leute mit sehr merkwürdigen Ansichten schon immer.
Ähm, das, das, das hat angefangen mit, äh, in Metatext Coca-Cola reinzuschreiben früher.
Ganz, ganz früher.
Nee.
Doch, doch, da war das so populäre, populäre Begriffe in die Metatext reinschreiben. Ich weiß nicht genau, ob das überhaupt jemals was gebracht hat, aber das gab's als Tipps. Das ist schon sehr, sehr lange her. Das war so in der Zeit, als ich angefangen hab. Egal, das ist ausgeschweift.
Vergesst, was ich gesagt hab. Macht das auch, macht das nicht Coca-Cola in, äh, in die Metatext reinschreiben.
Ähm, Lesbarkeit für Maschinen. Also SEO, also Suchmaschinen logischerweise, die erkennen viel besser, ähm, die Struktur von eurem Content und können verstehen, was ist wichtig, was ist nicht wichtig. Ähm, dafür ist es, dafür ist echt wichtig. Ähm, aber auch zum Beispiel für Screenreader, also da sind wir wieder bei Accessibility, also alles, alles, was versucht, das HTML zu lesen, der tut sich viel, viel leichter, wenn das die Struktur kennt.
Also beim Screenreader, der kann zum Beispiel von Überschrift zu Überschrift springen oder von Liste zu Liste oder, äh, von, ähm, von Section zu Section. Da gibt's Shortcuts in den Screenreadern, dass die von, von, äh, dass die da durch die einzelnen Elemente durchspringen können. Da kann der Screenreader Nutzer viel schneller navigieren. Hast du noch ein Beispiel?
Ja, die halt auch vorlesen, äh, das ist ein Navigationselement und das enthält Links, ja, und nicht einfach, das ist ein DÜV und das enthält Spans. Ähm, und das wird entsprechend dann halt auch vorgelesen, wenn man's nicht sehen kann. Äh, was mir noch einfällt, äh, das geht, es gehört schon zu SEO auch, geht aber ein bisschen drüber hinaus, diese, diese Snippets in den Suchergebnissen, wo dir dann, ähm, FAQ-mäßig zum Beispiel häufige Fragen und Antworten, äh, zu irgendwas, was du suchst, gegeben werden.
Oder Sprachassistenten, die beziehen sich auch, also gerade Google Home nutzt natürlich die, die Suchergebnisse von Google auch. Ähm, ich denke mal, dass, dass, äh, Alexa das ähnlich macht von, von Amazon. Ähm, weiß nicht, was die da als Datengrundlage haben. Ähm, und das ist halt auch, wenn das entsprechend ausgezeichnet ist als FAQ, dann weiß Google, das ist eine FAQ, da gehört die Frage dazu und das ist die Antwort dazu.
Also, das heißt, wenn ich sage, okay, Google, äh, wie hoch, wie groß ist die Einwohnerzahl von Uruguay zum Beispiel, dann kann Google anhand der Tags das sich zusammenbasteln, was wohl die richtige Antwort ist.
Ja, sehr praktisch. Ähm, da sind wir quasi schon mit, äh, ganz am Ende von dem, was ich sagen wollte, aber das ist gut.
Gut, dann hören wir jetzt auf.
Nein, das ist super. Ähm, dann als nächstes, ich meine, ich habe, ich habe ja bis jetzt nur über Struktur gesprochen. Ähm, ähm, der, der nächste Block wären interaktive Elemente. Äh, da, da mache ich jetzt nur mal einen kurzen Abriss, da kommen später noch Beispiele. Ähm, interaktive Elemente, da ist das noch viel, viel, viel wichtiger, dass man jetzt nicht zum Beispiel den Diff nimmt mit einem Klicklistener oder irgendeinen Text vor ein Inputfeld schreibt, der, der den Inhalt von dem Inputfeld beschreiben soll.
Ähm, äh, ja, gut, ja, genau, Diff, Diff mit Klickhändler habe ich gerade gesagt, ähm, sondern es ist da schon wichtig, dass man, dass man das richtige Element dafür nimmt, weil, äh, das Inputfeld beispielsweise im Screenreader nur dann richtig beschrieben werden kann, wenn ein Label-Element verwendet wird, ähm, und nicht, wenn ich irgendwie ein Diff davor schreibe, dann kann man es vielleicht irgendwie erraten, aber viele Screenreader, die gehen, wenn man in ein Formular rein, äh, tappt, in so einen sogenannten Formular-Modus rein.
Und, äh, und die lesen dann nur noch vor, was zu dem Formular gehört. Und, äh, wenn ich da jetzt irgendwie einen anderen Text zwischen reinschreibe, dann kann das sein, dass der da komplett untergeht.
Also, Level-Elemente und dann, äh, bei interaktiven Elementen, da gehe ich gleich noch ein bisschen näher drauf ein, ähm, aber jetzt erst mal ein, ein kleines Beispiel. Ich weiß jetzt, das wird jetzt schwierig. Ich glaube, ohne was, ohne dass man es sehen kann, wird es, glaube ich, schwer zu verstehen.
Ähm, deswegen versuche ich es oberflächlich zu erklären und ihr könnt euch die Links dann später in der, äh, in der Folgenbeschreibung, in den Shownotes, äh, angucken.
Ähm, was ich da für, in diesem Vortrag für ein kleines Beispiel gehabt habe, war, ähm, der Kommentarbereich, äh, unserer Seite. Da könnt ihr auch gerne mal reingucken in das HTML.
Ähm, und da habe ich, äh, äh, bei CodePen mal ein kleines Beispiel gebaut. Einmal alles mit Diffs, soweit es geht.
Äh, und dann unten drunter mal so mit semantischem HTML, so wie wir es bei uns auch auf der Seite haben. Also, das, ich, ich lese, ich lese mal ganz grob vor.
Diff, Diff, Diff, Diff, Image, Diff, Diff, Diff, Slash, Diff, Slash, Diff, Diff, P, Diff.
So, äh, was verstanden? Nö.
Und jetzt lese ich mal das andere vor, genauso oberflächlich.
Section, H2, also Headline 2.
Artikel, Header, Image, H3, P, Span, Time.
Und dann gehen welche wieder zu.
Section, P, Footer, Artikel, und so weiter.
Das ist schon ein, das ist schon viel besser verständlich.
Ja, also, da kann man sich eben schon besser drunter vorstellen.
Also, da könnte man sich, ja, Footer und Time, also, da wird irgendwas aufgelistet, äh,
entweder ist es ein Blogpost, der eine Zeitangabe hat, oder irgendwelche Events, die einen Zeitstempel haben.
Also, das ist schon deutlicher.
Ja, also, würde ich auch sagen, ähm, auf jeden Fall mal angucken.
Ich glaube, wenn man es, wenn man es sieht, ist es auf jeden Fall noch ein bisschen, bisschen eindeutiger.
Ähm, bei den interaktiven, aber Moment, jetzt muss ich gerade gucken, nicht, dass ich, äh, ich muss in meinem Skript hier verrutschen.
Ähm, generell, zu interaktiv kommen wir gleich.
Generell sollte man sich immer die Frage stellen, wenn man HTML schreibt, bei, bei jedem Element eigentlich, ähm, was ist es, was tut's, und was meint es denn im Kontext?
Ähm, und danach kann man dann, wenn, wenn man die Fragen für sich beantwortet hat, und vielleicht tut's ja gar nichts, ähm, dann, dann kann ich schon einige HTML-Elemente ausschließen.
Dann kann ich in meine Liste gehen mit den HTML-Elementen bei MDN und mal gucken, was passt denn da drauf jetzt gut.
Die sind auch relativ gut strukturiert, ähm, in einzelne Unterkategorien.
Das heißt, ich muss nicht alle, alle 100 von oben nach unten, oh Gott, das Bier, das hätte ich vielleicht nicht trinken sollen.
Ähm, ähm, von oben nach unten durchlesen, sondern man, äh, man kann durch die Kategorien sich so ein bisschen navigieren.
Also es gibt Document-Meta-Data, Sectioning-Root, Content-Sectioning, da sind so Sachen drin wie Article-Assight-Footer-Header, Main-Nav und so weiter.
Text-Content, da sind so was drin wie, äh, Listen, ähm, P für Paragraph, Blockquote und so, ähm, Inline-Semantics und so, ja, zum Beispiel, äh, ABBR, was wir vorhin schon angesprochen haben, äh, das Link-Element A.
Ähm, Q für Quote, ähm, Small, äh, Strong, Sub, Sub, Time und so was, also Inline-Elemente und so weiter.
Gibt es natürlich noch viele, viele weitere Kategorien, das nur mal so als, als Beispiel.
Ähm, und wenn man es noch weiter treiben will, äh, dann das, was der Konstantin gesagt hat, wenn man noch mehr braucht als das, weil ich meine, manchmal kommt man an den Punkt, dass man, äh, sagt, ja, ich hab jetzt hier genau das,
dafür gibt's aber kein HTML-Element, dann hilft man sich aus eigentlich immer mit Microdata, also sowas wie Microformates, ähm, da hab ich jetzt vor kurzem festgestellt, ist offenbar immer noch nicht tot,
da ist nämlich der letzte Blogartikel tatsächlich aus diesem Jahr, microformates.org oder, äh, schema.org oder schema.org, ich weiß nicht genau, wie man's ausspricht.
Ich glaub, das haben wir auch bei uns eingesetzt, so ein bisschen, ich weiß gar nicht mehr genau, für was auf der Podcast.
Ähm, um tatsächlich die Folgen als Folgen zu definieren, also dass man wirklich sagen kann, das ist ein Podcast, der hat Folgen, das hier ist eine Folge, die Folge hat diesen Titel und so weiter und so fort, ja.
Genau, und wenn ihr uns googelt, also ich weiß nicht, ob das jetzt von, von, ähm, von Google Podcasts kommt oder ob das durch Microdata kommt, aber dann kann man tatsächlich durch die einzelnen Folgen durchnavigieren, hast du das schon mal gesehen?
Ja, das ist mir vor kurzem zum ersten Mal aufgefallen.
Also bei Google, wo wir das vorne eingeben und dann, äh, kommt man da, sieht man direkt die Folgen präsentiert, ja, das ist ganz cool.
Ja, wie gesagt, ich weiß jetzt nicht, ob das tatsächlich durch unser Microdata kommt oder durch, durch Google Podcasts, was da auch gefunden wird, eventuell, aber bestimmt Microdata.
Behaupten wir jetzt einfach mal.
Nein, ich hab's tatsächlich, äh, festgestellt, ähm, bei unseren Suchergebnissen von unserer Seite, also 48design.com oder .de, äh, die News tauchen in Google dann wirklich als News auf, das heißt, ich sehe auch ein Datum an der Seite.
Was nicht der Fall ist, wenn ich nicht entsprechend einen Date-Tag setze oder diese Item-Props mit Microdata, also das macht tatsächlich einen Unterschied.
Das hab ich nämlich beim Relaunch erst vergessen gehabt und dann war, war das nicht mehr da, was vorher ausgezeichnet war und dann hab ich das wieder eingefügt und irgendwie zwei Wochen später war's wieder drin.
Also man sieht da wirklich noch einen Unterschied in der, in der Auflistung.
Und ich mein, alles, was mich irgendwie von den anderen Suchtreffern unterscheidet, ist erst mal gut.
Ja.
So als Eyecatcher.
Auf jeden Fall, ja.
Ähm, ja, ich glaub, das nächste Beispiel, was ich da hab, das, das schaut ihr euch am besten an, das ist sonst wirklich schwer zu verstehen, da hab ich so ein bisschen, ähm, beziehungsweise das Beispiel hab gar nicht ich gebaut, sondern das ist von, äh, von den Edge-Developern, glaub ich, ähm, die so ein bisschen Grid, CSS Grid gezeigt haben,
aber in, in diesem Beispiel sind eine Menge Sectioning-Elements drin, also Header, Nav, äh, ich hab da noch ein UL reingepackt, Main, ähm, Site und Footer, ähm, das sind so die, die groben Elemente, mit denen man eine Seite grob strukturiert, das Beispiel einfach mal angucken vielleicht, äh, das ist, da, da sieht man dann mal so grob, wie man, wie man eine Seite heutzutage mit semantischen HTML-Elementen aufbaut, ähm, und da ist, ähm, oh Wunder, kein einziges Diff-Element drin in dem Beispiel, das braucht man nämlich eigentlich.
Ich hätte ja noch einen kleinen Nachtrag zu dem, zu dem Microdata-Zeug, wer damit mal rumspielen will und das einfach mal ausprobieren will oder auch wirklich auf seiner Seite implementieren will, es gibt, äh, von Google das Test-Tool für strukturierte Daten, da kann man links einfach Markup reinhauen oder ich glaub, man kann auch eine UL angeben, ähm, und dann kriegt man das tatsächlich ausgewertet, wie Google das analysiert und auswertet, und, äh, auf der Basis hab ich mit bisschen Trial und Error das auch bei uns umgesetzt.
Das ist ganz hilfreich, verlinke ich auch in den Shownotes auf jeden Fall.
Und, äh, schaut mal, oder sucht mal danach und dann werdet ihr sehen, was ihr findet. Wer sucht, der findet, oder so.
Das sind wir ganz oben. Wer nach dem Firmennamen sucht, findet uns ganz oben.
Ja, ist doch super, ihr habt super SEO gemacht.
Ja, ich hab tatsächlich auch so ein paar SEO-Experimente gemacht, die funktionieren auch, aber mehr will ich, äh, will ich da auch gar nicht verraten, weil sonst, äh.
Okay, ich mach mal weiter. Also, wie gesagt, das, äh, Sectioning-Content-Beispiel, das schaut ihr euch am besten einfach mal an, das ist schwer zu beschreiben.
Ähm, was mir wirklich sehr, sehr am Herzen liegt.
Sehr, sehr, sehr, sehr, weil ich grad heute wieder ein Beispiel hatte, wo ich ein bisschen was getestet hab und wo das einfach so kolossal falsch gemacht wurde, ähm, dass, dass im Prinzip die ganze Seite unbenutzbar wurde für jemanden, der jetzt nicht die Maus benutzen kann.
ähm, aus welchen Gründen auch immer, interaktive Elemente, ähm, also wenn's jetzt kein Formular ist, sondern etwas, ich klicke irgendwo drauf und dann passiert irgendwas, nehmt dafür keine Diffs mit Klickhändlern oder sowas, oder irgendwelche anderen Elemente mit Klickhändlern, da raste ich echt aus, wenn ich das seh, ähm, wenn das jemand macht, schick den zu mir, ich mach den zur Sau, das gibt's einfach nicht.
Ich kann es mit den entsprechenden ARIA-Attributen ausstatten und dann wird's, dann sieht das schon wieder anders aus.
Ja, aber sollte man auch nicht.
Sollte man das tun, wenn man's auch einfach richtig machen könnte, semantisch, das ist die Sache.
Genau, ARIA-Attribute, da geh ich eigentlich gar nicht drauf ein, jetzt, wollte ich gar nicht drauf eingehen, das ist nur das allerletzte, wenn du gar keinen weiteren Einfluss auf die HTML-Elemente nehmen kannst, aus irgendwelchen Gründen, dann darfst du ARIA-Attribute verwenden.
Und wenn ich gar keinen Einfluss nehmen kann, dann kann ich die auch nicht nutzen, die Attribute.
Ja, richtig, also im Zweifelsfall nimm einfach das richtige Element.
Also wenn ich dazu komme, ein ARIA-Attribut einzutragen, dann kann ich auch gleich das richtige Element dafür verwenden.
Ja, ich glaube, oft werden, äh, werden die richtigen Elemente, und ich sag gleich, welche da die richtigen sind, werden nicht verwendet, aufgrund, äh, von ihrem Basis-Styling im Browser, weil dann einer sagt, naja, aber wenn ich jetzt hier ein Span nehme, statt ein Button-Element.
Dann muss ich ja Display-Blog setzen, oder Inline-Blog, wie schlimm.
Dann muss ich ja hier, dann kann ich ja hier so und so stylen, und dann geht es ja ganz einfach um, beim Button muss ich ja diese ganzen Styles, die da schon drauf sind, wieder wegnehmen.
Nimm ihn trotzdem.
Ja.
Es ist nämlich verdammt schwer, auch wenn, auch wenn du dir vorkommst wie der geilste Developer der Welt, es ist echt schwer, für jeden Browser das Standardverhalten nachzuimplementieren mit irgendwelchem JavaScript, auf so einem Stand, so, auf so einem Standard-Element, äh, wie Button oder A für Link.
Also, wenn ihr ein interaktives Element habt, also eins, ich klicke drauf und es passiert was.
Wenn es irgendwo hingeht, dann nimm ein A-Element, weil dann ist es einfach ein Link.
Und, ähm, das muss ja nicht mal sein, dass der, dass der Link-Klick ausgelöst wird, im Sinne von, der geht jetzt auf eine andere Seite, sondern es kann ja auch sein, dass das alles mit Angular oder so gemacht wird, ja.
Dann ist das ja quasi nur so ein Fake, aber nimm trotzdem ein A-Element, weil es einfach das Richtige ist dafür.
Wenn es irgendwas anderes tut, nicht die Seite verlässt, ein Dropdown öffnet oder sonst irgendwas, dann nimm ein Button-Element.
Richtig, und style das notfalls dann so, dass es aussieht wie ein normaler Link oder so, ja.
Style es wie ein Link, das gibt's ja sogar, also wer Bootstrap verwendet, bei dem ist das ganz einfach, hab ich nämlich jetzt gerade die Tage wieder gehabt, den Fall.
Es ist ganz einfach, da gibt's nämlich eine Klasse btn-link und damit hast du genau das schon erreicht.
Perfekt.
Also es ist in diversen Frameworks schon fest mit eingebaut.
Das Styling hat nämlich nichts zu tun mit der Funktion.
Die Funktion muss mit der Funktion übereinstimmen und nicht, nicht der Style.
Den Style kannst du immer ändern.
Also bei so gut wie jedem interaktiven Element nehmen wir jetzt mal Select, Select nehmen wir jetzt mal aus.
Select ist immer noch so ein, so ein ungeliebtes Kind von den Browser-Herstellern.
Ähm, aber ansonsten kannst du eigentlich alles vernünftig umstylen.
Nimm das richtige Element.
Warum eigentlich?
Das wäre wieder was für unsere hier CSS-Wunschliste.
Äh, das war Folge Nummer, äh, elf.
Jäger der verlorenen CSS-Features.
Das ist eigentlich, ich versteh's nicht, warum das nicht schon längst irgendwie stylbar ist, so ein Select.
Ja, ähm, falls ihr jemanden kennt, der das weiß, oder falls ihr das selbst wisst.
Oder der verantwortlich ist für solche Produktentscheidungen bei großen Browser-Herstellern.
Sagt, schickt uns die Adresse.
Schickt uns die Adresse, wir, wir schicken ein Geschenk.
Den schicken wir was anderes als Sticker.
Wir schicken ein Geschenk.
Nein, nein, nein, nein, nein, nein, wir sind nett, äh, ich würde gerne mal diskutieren, ich würde gerne mal diskutieren darüber, über das Thema, so wie viele andere auch, aber ich glaube in unserer, in unserer CSS-Feature-Folge haben wir auch schon drüber diskutiert, dass da schon irgendwie, da sind Dinge passiert in den letzten Jahren.
Das waren übrigens zwei, wir hatten das ja, das war ja zwei Teile, also Folge 10 und 11, wer das nachhören will, wo wir Wünsch dir was spielen und über Missing Features sprechen.
Genau, ähm, mir wäre noch wichtig zu sagen an dieser Stelle, nachdem wir interaktive Elemente jetzt, glaube ich, abgehandelt haben, ich sage es nochmal, A für Elemente, die irgendwo, für einen Klick, der irgendwo hingeht und Button für ein Element, für einen Klick, der irgendwas tut und nicht wohin geht.
Viele, wenn sie semantisches HTML hören, sagen dann, also, alterlernt das Wissen, außer wenn ihr jetzt in den letzten sieben Jahren oder so angefangen habt, HTML zu schreiben, habt ihr das wahrscheinlich nicht gehört, davor war das oft so, keine Tabellen verwenden, ähm, das stimmt aber nicht.
Man kann immer noch HTML-Tabellarische Aufstellung ist, dann nehme ich natürlich eine Tabelle, weil das ist das einzig semantisch Richtige in dem Fall.
Korrekt, ganz genau, und dazu gibt es auch einen schönen Bereich in dem MDN mit den ganzen Elementen für Tabellen, das scrolle ich jetzt gerade nochmal hin.
Also, da habe ich auch schon Geschichten gesehen, ja, wo das dann, wo genau das Tabellenverhalten nachgebaut wurde mit irgendwie Grid oder Flexbox oder so, wo ich mir dann denke, warum?
Ja, und ich habe, ich habe auch in letzter Zeit immer mal wieder gesehen, Listen verschiedenster Art, die sogar List wirklich als Klassenname drinstehen haben, List und List-Element, aber mit Diffs nachgebaut.
Warum, Leute? Warum?
Ja, weil dann muss ich die Bullets überschreiben, wenn ich die nicht haben will, dann muss ich ja List-Style-Type-Nan setzen und so, und das ist ja viel Arbeit.
Zu den Tabellen noch ganz kurz, ähm, da würde ich, wollte ich noch gerne ein kurzes Ratespiel mit dir spielen, beziehungsweise einfach mal, ähm, nee, ist kein Ratespiel.
Ihr dürft auch mitraten zu Hause.
Ihr dürft auch mitraten, ihr dürft mitmachen, ähm, weil bei den Tabellen, da gibt es ein paar Elemente, die sind eher unüblich, die werden sehr selten verwendet, ähm, und ich wollte jetzt einfach mal fragen, hast du schon mal verwendet Caption?
Ähm, tatsächlich habe ich das schon mal verwendet, ich kann dir jetzt aber nicht mal mehr sagen, was das genau tut, aber ich habe es schon mal eingebaut irgendwo, ähm, ich weiß aber nicht jetzt, wo es angezeigt wird oder so, nee.
Caption ist, äh, die Caption oder, wie dieses Element schon sagt, oder der Titel, die Überschrift für die Tabelle und ist tatsächlich, wenn ich es richtig weiß, ist das sogar innerhalb des Table Tags, wird das, glaube ich, sogar reingeschrieben.
Ja, genau, das wird innerhalb vom Table Tag verwendet.
Steht dann aber oben drüber, oder wie wird das ausgegeben?
Es wird, es steht oben drüber, ähm, beziehungsweise, warte mal, in dem Beispiel, das ich hier habe, steht es sogar unten drunter, ich glaube, dafür gibt es sogar extra CSS-Eigenschaften, warte mal, ja genau, Caption-Side ist eine CSS-Eigenschaft, Caption, Caption-Side und da steht Bottom und da kann ich, äh, Top oder Bottom, glaube ich, vergeben, das ist ja interessant, das habe ich, das wusste ich jetzt auch nicht mehr, habe ich gerade eben erst, äh, gesehen.
Ähm, das einzige Mal, dass ich das eingesetzt habe, das ist schon wirklich lange her, ähm, und da habe ich es dann, glaube ich, am Ende wieder ausgebaut, weil, ähm, da gab es damals Styling-Probleme, das war nicht so einfach zu stylen und das hat nicht alles das machen können, was ich damals wollte und dann habe ich halt doch wieder eine normale Überschrift drüber gepackt, aber das ist wirklich sehr altes Wissen, es kann sein, dass das mittlerweile total gut geht.
Und könnte ich vielleicht auch ein Figure-Element benutzen oder ist das wirklich nur für Bilder?
Boah, das ist eine wirklich gute Frage, das weiß ich nicht.
Ja, das ist mir gerade so spontan eingefallen, weil ich dachte, das ist ja eigentlich das Gleiche und also man, ich denke jetzt gerade wieder an den Print-Bereich oder an wissenschaftliche Abhandlungen, wo man dann oft in dem Fließtext dann, äh, Tabellen eben hat oder Bilder, die was beschreiben, wo da steht, äh, Sie, Figure, so und so viel.
Also im Zweifel muss es dann ...
Und dann würde ich mir denken, das ist ja eigentlich das Gleiche, ob das jetzt ein Bild ist oder eine Tabelle, es ist was Ergänzendes, wo ich eine Beschreibung drunter packe.
Ja, im Zweifel muss es aber dann so aufgebaut sein, dass du Figure um die ganze Tabelle drum packst und deine Überschrift ist Fick Caption.
Fick Caption, ja, mhm.
Also so würde ich das, so fände ich das semantisch dann auch korrekt, weil es gibt ja sicher das Fick Caption.
Vielleicht an der Stelle, also das passt ganz gut zu was, was ich mir, Go Figure, ähm, was ich mir aufgeschrieben hab, also es gibt manchmal kein richtig oder falsch.
Oder zumindest gibt's mehrere Möglichkeiten ans Ziel zu kommen und es ist so, dass auch gestandene Senior-Entwickler, sag ich jetzt mal, ähm, auch nachfragen und das zur Diskussion stellen.
Also ich hatte letztens, hab ich einen Tweet in der Timeline gehabt von, von jemandem, wo ich, wo ich dachte, ah, schau mal an, der, der weiß auch nicht alles oder sagt einfach, ja, so gehört es.
Sondern der hat da zur Debatte gestellt, wie würdet ihr denn, das und das, ich weiß gar nicht mehr, um was das genau ging, wie würdet ihr das dann umsetzen?
Hat einen Vorschlag gemacht, ähm, ich würde die und die Elemente nehmen und drumrum setzen, äh, was meint ihr denn?
War das, äh, Wes Boss?
Ja.
Der hat nämlich gleich kurz um sowas mal geschrieben, ja.
Ähm, ja, absolut, ich mein, der ist ja echt, der ist ja sogar super bekannt in der Szene, hat einen Podcast, der wahrscheinlich ungefähr 400.000 Hörer hat, mehr, äh, mehr Hörer hat als unserer, also.
Ja, also zehn.
Mindestens.
Ähm, genau, also 800.000 Hörer.
Äh, ja, nee, ähm, ich find das absolut berechtigt, das, das wollte ich eigentlich auch nur sagen.
Das ist nicht einfach, also HTML-Semantik, genauso wenig wie Programmierung in der Programmierung, bei JavaScript, keine Ahnung, was für eine Sprache du programmierst, ähm, gibt's ja auch oft viele verschiedene Wege, um ans Ziel zu kommen und oftmals kristallisiert sich so eine Best-Practice raus, die ist aber vielleicht auch nicht immer für alles das, das Perfekte.
Und es ist überhaupt gar keine Schande, äh, wenn man, wenn man nicht weiter weiß, einfach mal nachzufragen, einfach mal mit anderen zu sprechen, ähm, oftmals hat man sich, merkt man dann, dass man sich sogar schon mehr Gedanken drüber gemacht hat als andere, aber im besten Falle findet man jemanden, der sagt,
Hey, du, genau das Problem hatte ich auch schon mal, probier mal so.
Ja, und vor allem, also, bevor es wieder ein Diff wird, dann nimm lieber was, was, was an sich Sinn macht, von der Definition des Tags her, was Sinn macht und nicht einfach wieder ein Diff, weil bin ich mir jetzt grad nicht sicher.
Also, wenn's, wenn's nicht komplett falsch klingt, das an der Stelle einzusetzen, dann doch lieber das als ein Diff, würde ich jetzt mal sagen.
Ja, und oftmals landet man, also, äh, ich, wenn ich über Semantik nachdenke, das dauert dann oft lange, bei so komplizierten Sachen, bis ich da ans Ziel komme.
Und dann meistens lande ich dann bei einer Verschachtelung von verschiedenen semantischen Elementen, um, äh, mit dem Versuch, das auszudrücken.
Also, ihr habt's jetzt vorhin ja gehört, ähm, dieses Beispiel von den Kommentaren, das ist ja jetzt auch nicht, ich hab jetzt auch nicht ein Comment-Element, ähm, das gibt's halt nicht, sondern es ist eben ein Artikel mit einem Header, wo dann die Metainformationen drin sind, mit einer Section, wo dann der eigentliche Kommentar drin ist, und dann wieder mit einem Footer, ähm, wo nochmal ein Antworten-Link drin ist zu dem Kommentar.
Also, ich hab mir da quasi mein Kommentar zusammengebaut aus verschiedenen anderen Elementen. Und das ist oft der Weg, den, den man am, den ich am Schluss dann einschlage, ist, aus dem, aus dem, was da ist, mir das bauen, Mensch, das mit dem Bier, das ist ja furchtbar.
Lass es nochmal, komm, lass es nochmal laut raus.
Nee, das ist jetzt, das, einmal, einmal hat es gereicht. Meinst du, ich soll, ich, mal gucken.
Ja, dann ist es besser als dieses, man hat so das Gefühl, du kotzt gleich.
Ja, wir rutschen in eine komische Ecke gerade, so.
So.
Ach, wo war ich? Ich war bei Tabellen.
Genau.
Ähm, jetzt, jetzt wäre der Teil in meinem kleinen Vortrag gekommen mit dem Quiz.
Und ich weiß nicht, ob wir es spielen können.
Ähm, wir können es aber versuchen.
Kann ich dir einen Link schicken?
Probier's.
Kannst du den auch, kannst du den auch, kannst du den auch mal dann, äh, aufmachen?
Nee.
Nee, okay, gut.
Ich schick dir, ich schick dir, ich schick dir mal einen Link.
Ähm, und meine Aufgabe an dich ist jetzt erstmal, versuch mal, ähm, nicht auf die Titel zu gucken von den einzelnen Demos, die du da sagst.
Okay.
Das ist schwer, versuch mal nur die Bilder anzugucken.
Ähm, und dann, ähm, vielleicht, vielleicht soll ich dir direkt ein konkretes Beispiel schicken.
Ja, das sind jetzt, ich seh jetzt mehrere. Ich weiß nicht, ob ich jetzt auf der gleichen Seite schon bin, die du meinst.
Ich nehm mal, ich nehm mal, ich nehm mal, ich nehm mal, ich nehm mal ein konkretes Beispiel, wir spielen das jetzt mal.
Ähm, das ist jetzt Beispiel eins und das kommt dann auch, ähm, das kommt dann auch so in die Shownotes als Beispiel eins.
Mhm.
Ich notier das gleich mal.
Ähm, und du sagst mir jetzt mal, ohne hinzugucken auch in den Code, diese gelben Dinger da.
Mhm.
Was für ein Element könnte das sein?
Mark.
Mensch, du bist zu gut. Hast du's, du hast es gesehen, oder?
Nein, ich, nein, wirklich nicht. Also, nee.
Ha! Super. Also, was haben wir hier vor uns? Wir haben so einen Text, der sieht aus wie manche, manche Elemente davon oder manche, manche Worte davon sind so, äh, gelb hinterlegt, wie mit dem Textmarker hinten dran geschrieben.
Und das ist tatsächlich das Mark-Element und zwar in seinem Standard-Styling. Äh, ich weiß nicht, ob's den, du hast den Chrome offen wahrscheinlich.
Äh, Firefox.
Firefox, okay, genau. In Firefox ist das Standard-Styling, ähm, nimm, mach einfach ein Geld.
Und das ist das Mark-Element tatsächlich genau für, für Elemente, die jetzt hervorgehoben sind an einer bestimmten Stelle, die ich markieren möchte.
Ähm, ich hätte da dafür auch ein Beispiel, wo, wo wir das mal eingesetzt haben, nämlich, ähm, in den Suchvorschlägen, äh, von, von einer Suchfunktion, wo ich den Bereich, der schon eingetippt wurde, hervorgehoben habe.
Da, da haben wir mal Mark verwendet. Also, es gibt nicht so, also, ich weiß nicht, wie oft man einen Text hat, der aus, aussehen soll, wie mit dem Text.
Also, ich hab's, äh, ich hab's bei einem Blog mal implementiert, damals, als es noch ging, als man von Google tatsächlich noch die, die Suchbegriffe mitbekommen hat, vom Referrer.
Das geht ja inzwischen gar nicht mehr. Ähm, da wurden dann wirklich die Begriffe, nach denen man gesucht hat, in dem Blog-Beitrag, wenn man über Google gekommen ist, auch, äh, entsprechend markiert.
So, warte mal, wir machen immer noch ein Beispiel.
Mhm.
Äh, ich schick dir noch einen Link, Moment, zack.
Und den schaust du dir mal an und du versuchst ...
Puh, Star-Rating.
Star-Rating, genau, also, das ist so der Klassiker, du hast Sterne und kannst, äh, von eins bis fünf Sternen vergeben und draufklicken.
Und jetzt ist es natürlich sehr schwer, nur auf die Demo zu gucken und nicht auf die Überschrift.
Ich hab damals, äh ...
Ich guck aber nicht in den Code-Links.
Ähm, also, ich hab sowas schon mal gebastelt gesehen mit, äh, mit Radio-Buttons, aber das ist, glaub ich, nicht so semantisch an der Stelle.
Ding, ding, ding, ding, doch.
Ist doch, sind doch Radio-Buttons?
Es sind, es sind Radio-Buttons und das ist meiner Meinung nach die semantische Variante, sowas zu machen, weil du hast, du hast was, was nicht einzeln angeklickt werden kann.
Du hast fünf verschiedene Zustände.
Entweder, entweder, oder.
Da ist eigentlich der Radio-Button genau das Richtige und diese Demo, die könnt ihr, wie gesagt, in den Shownotes, äh, euch noch angucken, ist mit Radio-Buttons gebaut und zwar komplett eigentlich, also bis auf eine Mini-Funktionalität, dass da eine Zahl noch unten drunter angezeigt wird, komplett mit, äh, HTML und CSS, ganz ohne Jahreskript.
Kann man komplett mit Radio-Buttons bauen.
Wobei man ja auch, das, hätte man das nicht auch irgendwie mit Attribute und Content, naja, weiß nicht.
Wobei, ähm, ich sehe da gerade ein Accessibility-Problem in diesem Beispiel, das müsste man anders machen, ähm, nämlich die Input-Elemente haben Display-None.
Wenn ich das jetzt versuchen würde, mit dem Screenreader zu bedienen, wäre das Input-Feld weg, das würde nicht, das würde nicht erkannt werden.
Ja, richtig, das heißt, ich muss das, äh, Visibility ist, glaub ich, auch nicht gut, Visibility-Hidden ist, glaub ich, das gleiche Problem, oder?
Auch, auch, ja, ich glaube, Position-Absolute und dann, äh, aus dem, aus dem sichtbaren Bereich schieben, ich glaub, das ist immer noch ...
Zum Beispiel, genau. Also, oder, ähm, naja, gut. Ja, Position-Absolute aus dem sichtbaren Bereich schieben ist eigentlich das, was ich meistens mach an so einer Stelle, genau.
Ja, ich dachte, mein, mein erster Impuls war gleich schon das mit den Radio-Buttons, dann dachte ich, das ist bestimmt eine Fangfrage, äh, weil, wie gesagt, ich hab das so schon gesehen, ich hab das, glaub ich, sogar so schon mal gebaut, so ein Element, und dann dachte ich, na, da gibt's doch bestimmt jetzt was Semantischeres, Cooles, was man einsetzt, weil auch ich kenn nicht immer die Semantisch-Korrekten, äh, ich bin da selber schuldig, dass ich nicht, nicht immer das kenne und auch nicht immer vielleicht nachschaue und es dann einfach mit dem Radio-Button gemacht hätte.
Ich auch, ich auch, das muss ich, muss ich ganz ehrlich zugeben, ich denk auch nicht immer dran, ich bin, mein Semantik-Hirn ist nicht immer angeschaltet, und ich denk da manchmal hinterher, was hast du denn da für eine Krütze gemacht, das wär doch eigentlich so viel besser gewesen, man kommt auch nicht oft immer sofort auf die perfekte Lösung, also, äh, ist auch nicht schlimm, aber für Diffs mit Klickhändlern gibt's keine, gibt's keine Ausrede, sorry.
Das stimmt.
Wir machen noch ein drittes Beispiel, es gibt noch einige mehr.
Ja, ganz kurz, wegen Radio-Buttons und Checkboxen, jetzt hab ich, äh, was gesehen, wie war das nochmal, ähm, ich weiß nicht mehr, wie rum es war, aber irgendwie wurden Checkboxen vergewaltigt, um Radio-Buttons zu sein, das heißt, es war eine Checkbox optisch, aber wurde dann, wenn man eine aktiviert hat, wurde die andere automatisch deaktiviert, ich glaub, so rum war's, ja.
Oder du kannst mehrere Radio-Buttons anklicken, dafür gibt's, dafür gibt's aber, dafür gibt's aber tatsächlich einen Anwendungsfall, ähm, das hatte ich auch schon, weil manchmal sind, ich weiß nicht, man könnte natürlich drüber nachdenken, ob man das komplette Konzept, ob das komplette Konzept vielleicht, äh, blöd ist, oder falsch ist, aber ich hab schon auf jeden Fall Formulare gesehen, ähm, wo bestimmte Optionen bei Checkboxen sich ausschließen.
Ja, ja, gut, das schon.
Aber du kannst generell, das schon.
Du kannst generell mehrere wählen, aber du kannst zum Beispiel nur füllen.
Ja, aber das meine ich nicht, also das war wirklich, das war wirklich eine Auswahl einfach, ähm, keine Ahnung, äh, was willst du als Soße dazu, Mayo, Senf oder Ketchup, ja?
Und du konntest halt nur eins auswählen und es waren drei nebeneinander und egal, was du angeklickt hast, die anderen, äh, waren weg und dann macht's halt einfach keinen Sinn, wenn ich eh nur eins wählen kann.
Ja. Okay, so, wir machen nur ein drittes Beispiel, ganz kurz, also Beispiel Nummer drei, ähm, haben wir hier.
So, man sieht, ich sag mal kurz, was man darauf sieht, man sieht, ähm, einen Text und da unten drunter ein Eingabefeld und wenn man jetzt in das, es ist ein Passworteingabefeld und wenn man in das Passworteingabefeld was tippt, dann hat man unten drunter so einen Balken in verschiedenen Farben, je nachdem wie lang das Passwort ist, der länger wird und dann auch die Farbe ändert.
Also, er fängt an mit Rot, da steht dann Strength Bad unten drunter, ähm, und der wird dann irgendwann gelb und irgendwann wird er dann grün.
Genau, und es geht mir tatsächlich um dieses Element, das die Farbe ändert, unter dem Passworteingabefeld.
Brr, also da muss ich sagen, das hätte ich jetzt wahrscheinlich tatsächlich irgendwie mit, äh, mit einem Span gelöst.
Na, ja, weil ich nicht im Bilde bin, was es da anderes gibt und ich, äh, ich rate jetzt einfach mal, dass das das Meta ist, was du vorhin angesprochen hast.
Ding, ding, ding, ding, du bist einfach zu gut.
Aber das war, aber nee, aber das war ja jetzt wirklich, das war jetzt wirklich geraten aus dem Kontext, also, äh, ich hab das Meta so nicht gekannt und, äh, hätte auch nicht auf die Idee gekommen, das da einzusetzen.
Deswegen bin ich sehr gespannt, äh, dass du es gleich erklärst, was es dann macht und was es ist.
Ja, das Meta-Element, das zeigt so eine Art Füllstand an.
Also, äh, und zwar aber normalerweise jetzt nicht sich bewegender Füllstand, also nicht Progress, was quasi sich gerade bewegt, sondern aktueller Füllstand.
Ähm, dass das jetzt, dass das sich in dem Fall jetzt bewegen kann, ist diesem Beispiel geschuldet, aber das, äh, ich weiß nicht, ob das jetzt, das darf schon auch, das darf, das darf sich schon auch bewegen.
Ähm, genau, in dem Fall muss ich sagen, zu diesem Beispiel, äh, das ist jetzt schon mit, da ist schon mit JavaScript auch dran rumgegangen.
gebaut worden und auch, ähm, mit CSS quasi die Standard, das Standardaussehen von diesem Meta-Element weggenommen worden mit Appearance None, weil es sieht normalerweise relativ hässlich aus, der Standard-Style davon.
Äh, jetzt muss ich gerade überlegen, kann ich zu dem Meta-Element sonst noch was sagen, außer, außer Füllstand?
Ähm.
Ich mach mal die Appearance weg, das interessiert mich jetzt.
Ich sag mal, also, in der, in der, in der Definition steht, äh, das ist repräsentiert, äh, either a scalar value within the known range or fractional value, also wie ich gesagt hab, also einzelne Schritte.
Und das ist aber, aber nur zur Ausgabe, also ich kann da nix, nix, nix ein, also wie so ein Regler oder so kann ich da nicht, äh.
Das ist nur zur Ausgabe.
Okay.
Genau, das ist nur zur Ausgabe.
Ähm, es gibt da noch verschiedene Attribute, die man dem geben kann, ähm, nämlich, äh, min für den Minimalwert und max für den Maximalwert.
Äh, und jetzt tatsächlich, da steige jetzt aus, weil das hab ich tatsächlich in der Form noch nicht verwendet, ich sehe noch low als Attribut.
Äh, das ist der Minimalwert.
Ach, wo unterscheidet sich das denn jetzt von Min?
Ui, ui, ui, jetzt strauchle ich aber auch schon.
Also, wenn ich's mal einsetze, lese ich mir das genauer durch.
Es gibt low und high, äh, und optimum.
Also, scheinbar gibt es, äh, kann man, kann man das dann als Styling dann nochmal verwenden.
Ähm, wenn das dann einen bestimmten Wert erreicht, ich weiß nicht genau, ob das dann pseudoklassenmäßig ansprechbar ist, das müsste ich mir nochmal genauer anschauen, aber Meter auf jeden Fall, falls ihr mal so einen Füllstand für irgendwas braucht.
In dem Fall finde ich Füllstand beim, beim Passwort, äh, eigentlich ganz passend.
Unsere Spendenhöhe, die könnten wir mit dem Füllstand, wir setzen uns ein Ziel.
Also, finde ich in dem Fall, auf jeden Fall, also ist auf jeden Fall passender als Progress, weil Progress ist zwar, ist zwar auch, äh, eine Art Füllstand, aber Progress bewegt sich ja, du, das sagen wir mal so, das geht ja von A nach B immer.
Und das ist ja bei Füllstand nicht unbedingt, das kann ja auch, das kann ja auch irgendwie zurückgehen.
Progress geht ja normal von 0 auf 100 oder von 0 auf keine Ahnung wohin.
Ähm, und das ist ja bei Meta, ähm, eher nicht gegeben.
Also, interessantes HTML-Element auf jeden Fall.
So, ja, in, in meinen, meinen Demos sind noch einige Beispiele mehr, wenn ihr noch mitspielen, ihr könnt da auch noch mitspielen.
Ich, äh, verlinke auch die, die Liste nochmal, die komplette Liste, das ist eine, eine CodePen-Collection, ähm, kommen auch in die Shownotes, ähm, wo ihr, ihr müsst halt versuchen, nicht auf das HTML zu gucken und auch nicht auf den Titel der Demos, das ist manchmal gar nicht so einfach, weil sonst, da steht's oft schon drin, was für ein Element verwendet wurde.
Ähm, genau, aber ihr könnt einfach versuchen, mal mitzuspielen, ähm, ihr könnt natürlich auch, das ist ja zu, ich sag ich jetzt natürlich zu spät, ihr hättet vorhin auch mitspielen können, ihr habt bestimmt alle mitgespielt.
Ich hab ja gesagt, ihr könnt mitspielen, ja.
Genau.
So, über Microformats und, äh, schema.org haben wir schon geredet.
Haben wir schon gesprochen, ja.
Ähm, an der Stelle sei, äh, nochmal mein Accessibility-Cheat-Sheet erwähnt, ähm, das wir noch vielleicht nochmal verlinken können, ähm, wo semantisches HTML nur ein kleiner Teil davon ist, aber einfach nur nochmal so, ähm, dass, wenn man jetzt Accessible eine Seite machen will, da ist semantisches HTML ein kleiner Teil davon, ähm, aber noch viel mehr, man muss eigentlich sich noch viel mehr angucken, ähm, das einfach nur noch mal so.
Also nochmal als kleine Werbung an der Stelle.
Ähm, ich hätte noch auf Rock, hätte ich, hätte ich, hätte ich noch auf Rock.
Und zwar, ähm, kannst du was zu Agegroup sagen, zum Agegroup-Element, weil ich glaub, das ist ne Sache, der ich mich schon sehr oft schuldig gemacht hab, die Überschriften, Verschachtelungen, wenn man sich das Ganze mal wirklich als Dokument vorstellt.
Das kannte ich nämlich nicht, da bin ich vorhin auch in der Vorbereitung zur Sendung drauf gestoßen.
Also, ähm, soweit ich weiß, gibt's das nicht mehr.
Ach, echt?
Ähm, also ich hab, was ich mitgekriegt hab, also Agegroup mal ganz kurz, ist zur Gruppierung von Überschriften gedacht.
Also wenn ich jetzt zum Beispiel zwei Überschriften, die unterschiedliche Ordnung haben, also H1 und H2 zum Beispiel, direkt nacheinander hab.
Genau, weil das eine Unterüberschrift sein soll, aber es ist keine H2 vom eigentlichen Dokument, das nachfolgt, äh, und würde somit die Struktur von der Seite kaputt machen eigentlich, ja.
Genau, also, äh, ich hab da so ein bisschen, ich lese so ein bisschen mit auf der, auf so ne Accessibility-Mailing-Liste, wo da auch immer mal wieder drüber diskutiert wurde, und darüber hab ich, meine ich, gelesen zu haben, dass das deprecated wird, also, dass das removed ist.
Und jetzt hab, ich hab grad noch mal in der Spezifikation draufgeklickt, weil da hast du mich auf dem linken Fuß erwischt.
Ich hätte jetzt, äh, so vom Gefühl her gesagt, benutze es nicht.
Mhm.
Benutze es nicht, hätte ich jetzt vom Gefühl her gesagt.
Has been removed from the HTML-Specification.
Genau.
Äh, but is still, ne?
Is still in the Web-Hypertext-Dingster-Working-Group.
Also, offenbar, in dem einen Standard ist es drin, in dem anderen nicht.
Es gibt ja die zwei Standards, es gibt den W3C-HTML5-Standard, und dann gibt es den von dieser,
ich vergesse immer, wie man, was da genau die Bezeichnung ist, äh, what, WG, ähm, diese andere HTML-Working-Group, wo die Browser-Hersteller alle drin sind, ähm, und es ist partially implemented, steht hier.
Ich würde deswegen auch nicht entfernt werden, wahrscheinlich.
Was ich interessant finde, es gibt, ähm, es gibt da eine Spezifikation für so einen HTML, für so einen Outline-Algorithmus, der mir eben dann die Dokumentstruktur liefert, von diesen verschiedenen verschachtelten Überschriften-Ebenen, äh, der ist aber in keinem einzigen Browser implementiert.
Ja, super.
Und, ähm, aber trotzdem macht das ja schon, also gerade auch wieder für, für SEO und für maschinelle Auswertung, macht das ja vielleicht schon Sinn, was wohin gehört.
Und da frage ich mich halt, wenn das jetzt rausgenommen wurde, was ist denn die Alternative dazu?
Weil das ist ja tatsächlich ein Problem, ja, dass das falsch, falsch zugeordnet wird von der Logik her.
Tja, ein, ein Mysterium.
Ja, an der Stelle, äh, wenn wir bei Überschriften sind, sei auch gesagt, ähm, Styling hat nichts mit Überschriften-Ebene zu tun.
Das wird, es werden nämlich oft, äh, oder sehr, sehr gerne Überschriften-Ebenen genommen, weil man gerade die richtige Textgröße haben will.
Das sollte man nicht tun.
Ähm, ich sehe aber auch das Problem, dass es oft nicht anders möglich ist, an irgendwas Bestimmtes zu kommen.
Also, ähm, ich weiß da auch noch nicht so die richtige Lösung dafür, wie man gewährleistet, dass die Überschriften-Hierarchien immer korrekt sind.
Also, dass immer, dass nicht auf eine H1 eine H4 folgt.
Ähm, ich, ich bin der Meinung, eventuell müssten die Browser da was einbauen, dass das dann, dass dann zumindest SEO und Accessibility.
Ja, irgendwie quasi H, H next oder so und dann H, H equal.
Genau, dass die das fixen intern, wenn die das finden, dass die das fixen intern und sagen, naja, wahrscheinlich ist das nicht so.
Aber dann würdest du natürlich wieder wegnehmen, dass jemand vielleicht das wirklich so gemeint hat, aus welchen Gründen auch immer.
Gut, aber das könnte man ja nicht zwangsweise machen, sondern halt irgendwie, man kann das nutzen, muss aber nicht.
Also, das Problem hast du halt immer, wenn du Inhalte dynamisch zusammenstellst, aus verschiedenen Datenquellen vielleicht noch oder selbst aus der gleichen Datenquelle.
Aber du hast nicht immer an der Stelle eine H3 und dann kommt das nächste rein und müsste dann eine H4 sein, aber die H3 fehlt, also müsste das eigentlich H3 werden.
Dann musst du, kommst du vielleicht auf die Idee, das dann auch irgendwie per Rack-Ex zu ersetzen oder so.
Also, ja, da gibt's einfach manchmal keine Lösung dafür.
Und du kannst den Leuten auf jeden Fall auch nicht abgewöhnen, das aus Styling-Gründen zu verwenden.
Ja, weil zum Beispiel der Klassiker ist, also da, wo ich viel dran arbeite, ist so ein Tool, wo Markdown reingeschrieben wird, User-Generated Content.
Und da möchten die Leute einfach vielleicht nicht diese riesige H1 haben als erste Überschrift, sondern vielleicht wollen sie was Kleineres haben, einfach weil es dann an der Stelle besser aussieht.
So, ich fang dann mit einer H4 irgendwie an oder mit einer H3, wo eigentlich eine H1 hin müsste.
Und ich kann das total nachvollziehen, dass man das macht, aber dafür muss es irgendwie eine Lösung geben.
Also, da weiß ich auch nicht.
Ja, keine Ahnung.
Also, mir ist keine vernünftige Lösung bekannt für das Problem.
So, drehen wir schon viel zu lange.
Ja.
Aber der Moritz hat sich wieder abreagiert.
So ein bisschen.
Nee, ihr Diffster.
Diffster.
So nenn ich die Leute ab sofort nur noch.
Keine Hipsters, sondern Diffster.
Nee, Diffster.
Die Leute, die nur Diffs verwenden, sind die Diffster.
So, ja, also, wenn man mal mit Jugendwörtern das abschließen wollen wollte, ähm, wenn ihr nur Diffs verwendet, dann seid ihr voll cringe.
Und wenn ihr Lid sein wollt, dann nehmt ihr sie manchmal, das ist HTML.
Yeah.
Und dann kommt ihr auch.
Total fly, oder?
Ihr kommt auch total super fly und dann kommt ihr auch total gut an bei den Girls und Boys.
Ja, dann kriegt ihr Kommentare drunter.
Beste.
Oder ist das auch schon wieder?
Genau, beste Leben.
Gönn dir, Alter.
Wahrscheinlich, wenn uns jetzt wirklich jüngere Leute zuhören, die lachen sich wahrscheinlich.
Wahrscheinlich sind wir schon, wir sind schon wieder so, wie alte Leute sich Jugendsprache vorstellen.
Genau.
Ja, Diggi, gönn dir, Diggi.
Gönn dir, Diggi.
Oh je.
So, das reicht jetzt.
Das reicht.
Reicht, ist fertig.
Also, ich würde mich sehr freuen, wenn ihr noch Fragen habt, weil auch ich bin nicht der perfekte Semantiker.
Ich gebe mir nur Mühe und schaue drauf.
Und wenn ihr Fragen habt, so als Pro-Tip, dann müsst ihr Kontakt zu uns aufnehmen, auf dem einen oder anderen Kanal, per Twitter oder so.
Ihr müsst dann mit uns kommunizieren.
Kommunizieren.
So, fertig?
Ja, fertig.
Thema ist fertig.
Das ist geil-Zeit.
Geil-Zeit.
Wow.
Wir haben zwei Geil-Teile.
Wir haben jeder eins.
Dann mache ich vielleicht mal den Anfang, nachdem du jetzt den großen Teil hattest.
Und ja, wir hatten heute ja mal wieder seit längerer Zeit einen Spam-Spot.
Hatten wir jetzt, glaube ich, schon ein paar Folgen nicht mehr, weil irgendwie einfach zwischendrin Material ausgegangen ist und sich nichts angeboten hat.
Und es geht jetzt auch weiter mit Spam, beziehungsweise eigentlich eher gesagt Scam.
Und so Scamming, das ist hauptsächlich im englischsprachigen Raum verbreitet.
Hier kennt man so die klassischen Spam-Mails, die wir da eben auch verwurschten zu den Spam-Spots.
Also den nigerianischen Prinzen, den kennt ja wahrscheinlich fast jeder, der dir irgendwie vier Millionen überweisen will.
Und du musst ihm aber was vorschießen, für welche Bankgebühren oder so, ist klar.
Und bei so Scam-Sachen, da ist die Masche oft so, es werden irgendwelche Fake-Blue-Screens im Browser angezeigt oder irgendwelche Fehlermeldungen, dass ein Virus auf deinem Rechner gefunden wurde oder was weiß ich.
Oder Microsoft will dir Geld zurückerstatten.
Das ist auch so eine Art von dieser Scam-Masche.
Und dann ist da eine Hotline-Nummer angegeben.
Und wenn du die anrufst, dann landest du eben in einem Call-Center von Betrügern.
Und es gibt einen YouTube-Kanal, auf den ich gestoßen bin, um nicht zu sagen, ich bin in einen YouTube-Rabbit-Hole gefallen vor einer Weile.
Und habe diesen Kanal entdeckt, Jim Browning nennt sich der Gute, Engländer ist er, glaube ich.
Und der dreht den Spieß um.
Das heißt, der lässt da, also das funktioniert dann so, die geben sich dann aus als Microsoft-Support-Mitarbeiter und sagen dann, ja, sie müssen sich irgendwie auf deinen Computer schalten.
Dann wird das per TeamViewer oder über andere solche Remote-Software gemacht.
Schalten sich dann drauf und dann zeigen sie dir, dann gehen sie in den System-Log und jeder, der da mal reingeschaut hat, der weiß, dass da tausende Meldungen drin sind, die also auch ganz normal sind, dass sie da drin stehen.
Oder sie geben irgendwelche Codes in der Command-Line ein, die dann die Ordnerstruktur irgendwo auslesen oder halt einfach irgendwelche Debug-Informationen ausgeben und dann sagen sie dir ganz genau, oh, das darf alles gar nicht da sein.
Oder der Klassiker, sie öffnen die Services und zeigen dann, oh, die Services sind gestoppt.
Und es ist ganz normal, dass viele von den Services, die da aufgelistet sind, halt einfach gestoppt sind.
Ja, die müssen alle laufen und sowas erzählen die da dann.
Und sobald die merken, dass du ein bisschen Ahnung hast, ist der Spuk auch schon wieder vorbei.
Aber wenn die halt merken, aha, ältere Person oder jemand, der sich wirklich halt nicht auskennt und so, dann geht es erst richtig los.
Und da verlangen die natürlich dann Kohle dafür.
Das sind die sogenannten Support-Scams.
Dann gibt es aber auch noch eben diese, na wie heißt das denn, auf Deutsch, dass du halt Geld zurückbekommst, der Erstattungs-Scams.
Das heißt, du musst dann dich in dein Online-Banking einloggen.
Als technischer Fahrer, da denkt man jetzt gleich, ja, wer macht dann sowas, aber es gibt halt leider Omas und so, die das dann halt tatsächlich tun.
Und dann wird, im Hintergrund, die machen dann den Bildschirm schwarz und dann ändern sie im Browser-Dev-Dings, ändern sie dann irgendwelche Einträge und sagen,
Ah, da ist jetzt irgendwie, da sind jetzt 1000-Euro-Flöten gegangen und du musst dann irgendwie, die haben dir zu viel überwiesen und du musst es dann rücküberweisen.
So funktioniert dann der Scam.
Jedenfalls dreht der den Spieß um.
Der hat irgendwie die Möglichkeit, er verrät natürlich nicht, wie er das macht, aber es kann eigentlich nur eine Sicherheitslücke in TeamViewer sein.
Der schaltet sich auf deren Rechner, ja, und dann macht er so Sachen wie deren Dateien löschen, ja, die Callcenter ausspionieren.
Und zwar wirklich inklusive Überwachungskameras anzapfen und Webcams anzapfen und dann konfrontiert er die Scammer mit ihren persönlichen Daten.
Hochzeitsfotos, die er dann da gefunden hat, Realnamen, Klarnamen, Adressen, ja, sagt dann so, ah, du bist doch gar nicht, ähm, du bist doch gar nicht Mike, du bist doch eigentlich Rajesh und du wohnst doch eigentlich in, in Bangladesch in der Sonsou-Straße.
Und dann geht denen aber richtig der Arsch auf Grundeis, ja, ähm, er lässt sich dann auch teilweise von denen durchführen, wie ihr Scam genau funktioniert und so.
Und die, die werden da richtig klein laut. Manche fangen auch an zu heulen und so. Also es ist, es ist schon teilweise ethisch auch fragwürdig, ja, ganz ehrlich.
Aber das Mitleid hält sich halt schon irgendwie in Grenzen, ja, weil das halt schon Betrüger im großen Stil sind. Ich meine, man darf nicht vergessen, weil ich jetzt Rajesh gesagt habe, das sollte jetzt gar nicht irgendwie, ähm, hier, haha, geschehender rassistisch sein, sondern es ist ganz einfach so, dass das ein großer Prozentteil dieser Callcenter in Indien sitzt.
Sogar in, in, es lässt sich zurückverfolgen über die IP-Adressen, die dann ausfindig macht, in zwei, drei größeren Städten lässt sich das genau zurückverführen.
Ich kenne jemanden, der mal auf sowas reingefallen ist.
Äh, ja, tatsächlich?
Ja, tatsächlich.
Jemand Jüngeres oder jemand Älteres?
Soll ich, äh, jemand Jüngeres tatsächlich?
Oh, okay.
Jünger als ich, äh, kurzer Einschub. Ähm, ich wurde dann hinterher, ähm, kontaktiert, so von wegen, oh, ich glaube, ich hab da was Blödes gemacht.
Und dann hab ich mir die Geschichte erzählen lassen und es war halt tatsächlich so dieses, dieses klassische, ähm, ich hab da auf meinem PC irgendwie was gesehen, da stand irgendwie, dass ich irgendwelche, äh, äh, Viren bei mir auf dem Rechner hab.
Ähm, und ich soll jetzt irgendwie diese Nummer da anrufen, damit die weggehen. Ähm, und halt, ich glaube, das war, ich hab's leider nicht gesehen, es gibt keinen Screenshot davon, ich glaube, es war am Ende tatsächlich nur eine Meldung im Browser.
Es war nicht mal der PC infiziert.
Aber auf Deutsch oder auf Englisch?
Ähm, auf Englisch.
Okay, weil auf Deutsch ist mir tatsächlich sowas noch nicht untergekommen bisher.
Und, äh, die Person hat dann tatsächlich da angerufen und hat gesagt, ja, was soll ich machen? Und dann haben die tatsächlich, äh, irgendwie auch genau das, was du gerade geschildert hast, dann irgendwelche Sachen auf, oh, das ist ganz schlimm, da müssen wir irgendwie dies und dann haben sie das, äh, hat sie gesagt, ja, ähm, da wurde dann halt irgendwie was installiert und, und keine Ahnung und jetzt hier bitte, ähm, überweis mal so und so viel, was weiß ich, 100 Euro irgendwo hin, weil so,
für die Dienstleistungen, die wir jetzt gerade erbracht haben, so, und das hat die dann auch gemacht.
Krass.
So, und, ähm, jetzt wird's interessant.
Danach, erst nachdem das passiert ist, so, ah, ich glaube, da war was Doofes und ich bin mir nicht so sicher. Und dann ist so, ah ja, das ist typische, typische Geschichte, Scammer.
Ähm, ja, die haben aber gesagt, dass, äh, dass man das Geld zurückkriegen kann.
Und dann habe ich gesagt, ähm, du kannst es versuchen, aber ich glaube nicht dran, dass es passiert.
Und die hat dann da angerufen, nochmal, und hat gesagt, ich bin nicht zufrieden, ich hätte gerne mein Geld zurück und hat's bekommen.
Ach, tatsächlich, okay.
Ja, das ist, sonst hätte ich die Geschichte gar nicht erzählt, weil das fand ich wirklich verrückt.
Es ist, es ist so, dass ich mich manchmal frage, ob denen, die dort arbeiten, tatsächlich das bewusst ist, was sie da tun.
Oder ob die nicht auch, ich meine, das sind natürlich die, die da arbeiten, es ist wie immer, wie auch bei, bei, bei normalen Callcentern, sage ich mal, die, die da sitzen, das sind die armen Würstchen.
Die, die die Strippen ziehen, die die Kohle verdienen, das sind die oben drüber, ja, die sich die Maschen ausdenken, da gibt's dann auch Videos von, von Treffen von den, äh, Chefs dort, äh, die dann sagen, ah, wir, wir machen jetzt eine neue Masche, was weiß ich.
Das heißt, die, die da sitzen, ich bin mir gar nicht sicher, ob die sich immer so im Klaren drüber sind, dass sie gar keinen wirklichen Support anbieten.
Die bekommen halt einfach ein Sheet, da steht drauf, ne, äh, die und die Fragen abarbeiten, die und die Commands ausführen und wenn da was drinsteht, dann ist es schlimm und dann musst du das denen sagen.
Also, ich kann mir schon vorstellen, dass die teilweise sich gar nicht bewusst sind, dass das nur eine Masche ist.
Vielleicht sind sie aber auch einfach wirklich skrupellos oder wahrscheinlich gibt es solche und solche.
Das ist, glaube ich, echt unterschiedlich und vor allem, was ich gerade dabei war zu erzählen, ähm, das sind oft arme Länder, wie gesagt, meistens ist es tatsächlich Indien oder es ist, äh, sind die Philippinen.
Ähm, bist du noch da, Moritz?
Ah, ich hatte gerade, ich hatte gerade Standbild, okay, sorry, ähm, das sind die Philippinen, also, ich sehe dich wieder, ja, es war gerade nur, äh, also, das sind halt auch wirklich arme Würstchen und vielleicht ist es deren einzige Möglichkeit, tatsächlich irgendwie Geld zu verdienen.
Aber trotzdem möchte ich sie nicht in Schutz nehmen, weil, wie gesagt, da werden speziell gezielt, äh, alte, hilflose, äh, Leute ausgebeutet und teilweise halt wirklich auch große Summkrabbe, die sind, ähm, ein bisschen Rückerstattungscams, da geht's dann halt wirklich um, um nicht nur 100 Euro oder 80 Euro, da geht's halt wirklich um Tausende auch teilweise.
Und, äh, ja, dementsprechend hält sich das Mitleid in Grenzen.
Also, seit ich, seit ich viel Videochats mache, ganz kurz, noch nur einen Satz, ähm, hab ich geübt, sehr stillzuhalten, damit man denkt, das Bild wäre eingefroren und nichts mehr sagt.
Und dann kannst du auf, auf Beenden klicken und kannst sagen, ach, sorry, ich bin irgendwie rausgeflogen.
Genau.
Nein, Spaß.
Aber wäre eine gute Taktik, ne?
Oder du machst dir diesen Auf, äh, äh, äh, äh, ne, ne, und bewegst dich ganz ruhig ab.
Äh, okay, jedenfalls, äh, ja, Jim Browning, ähm, also, der hilft auch,
Den Opfern, teilweise ist er wirklich live dabei, während gerade jemand, äh, überfallen wird, sag ich jetzt mal, äh, online-mäßig, ähm, kontaktiert dann die Opfer entweder im Nachgang, wenn er Daten findet, also teilweise sind da wirklich Opferlisten, da stehen dann auch so Sachen wie dabei, wie, äh, Achtung, die hat einen Sohn, der kennt sich aus, oder, ah, Mann ist gerade verstorben, ja, also wirklich, die machen sich dann auch Notizen, so, wie kann man denn vielleicht auch noch im Nachgang, äh, da noch mehr rausholen, oder so, oder halt auf eine persönliche Schiene fahren, oder sowas, ja.
Ähm, und der manipuliert eben auch direkt live dann Betrugsversuche zum Teil, indem er dann, wenn er eine Handynummer findet von dem Opfer, weil er ja dann auch, kann dann auch irgendwie auf die, auf die Rechner von den Opfern auch schauen, weil er ja quasi remote auf dem Opfer, äh, auf dem, vom Täter ist, und dann sieht er wieder den Remote-Bildschirm vom Opfer.
Und wenn er da Handynummern findet, also, was ruft er teilweise auch live die Leute an, sagt, sie telefonieren gerade mit einem, das ist kein echter Support-Mitarbeiter, legen sie sofort auf, geben sie denen kein Geld, und sowas, ja.
Also, das ist schon echt krass. Und er ist auch nicht alleine, also, es gibt wirklich Leute, die das als Hobby betreiben, oder vielleicht nicht als Hobby, aber zumindest als Art freiwillige Arbeit, so gute Samariter, ähm, um eben Scammer auch zu beschäftigen.
Also, die geben sich teilweise auch als Opfer aus, und dann irgendwie, ah, warte mal einen Moment, äh, ich, jetzt ist gerade jemand an der Tür, und so, also, die, die nehmen denen einfach Zeit weg, ja, weil, damit kannst du die beschäftigen, und in der Zeit können sie kein echtes Opfer finden.
Das klingt doch auch nach einer Exit-Strategie, Leuten helfen.
Exit-Strategie zum Leuten helfen, ja, okay.
Ja, wir hatten es, wir hatten es im Vorgespräch so ein bisschen davon, was machen wir denn, nachdem die Web-Bubble geplatzt ist.
Und der Konstantin hat mal vorgeschlagen, Löffelschnitzen im Wald, das fand ich eigentlich schon ziemlich gut, aber so, äh, irgendwie, tatsächlich noch was Sinnvolles machen, irgendwie Leuten helfen, so, in der Form, so, mit dem Know-how, was man hat.
Ja, also, Open-Source, oder Leuten helfen. Wisst man schon, was wir in unserer Rente, äh, tun, in 70 Jahren, wenn wir da noch leben.
Nee, nee, übermorgen.
Ja, wenn denn fleißig gespendet wird, an dieser Stelle bitte End-Jingle einfügen.
Das dicke Ende.
Es bleibt einfach unser Running-Gag, es wird niemals ein End-Jingle geben.
Es wird ihn nie geben, nee.
Es kommt aber auch noch kein End-Jingle, weißt du auch warum?
Warum?
Weil nämlich von mir noch ein Geilteil kommt.
Und ich wollte jetzt gerade noch ganz kurz sagen, äh, wie bei Scrubs damals, Neil Flynn, der Schauspieler, der den, der den, der den Hausmeister gespielt hat, der hat ja gesagt, ähm, in der Folge, wenn, wenn in einer Folge sein echter Name verraten wird, von dem Hausmeister, weil er immer nur als Hausmeister, äh, bekannt war, dann wisst ihr, das ist die letzte Folge.
Ja.
Also, wenn ihr mal einen End-Jingle hört, dann wisst ihr, das ist die letzte Folge.
Oh Gott, jetzt dürfen wir keinen produzieren.
Okay.
Ach, was kümmert mich mein Geschwätz von gestern, ne?
Richtig, genau, ich mein, äh, es gab ja von Meatloaf auch, äh, zwei Touren nach der letzten Tour, glaub ich.
Und von, von, äh, hier Phil Collins, the first final farewell tour.
Das find ich aber, das find ich aber cool, weil das kannst du so lang fortführen, wie du willst, aber wenn du sagst, wenn du wirklich die Leute dazu bringst, Konzertticket zu kaufen, weil es heißt, es ist jetzt das letzte Mal, und dann siehst du, dann, danach gibt's noch zwei, dann, da fühlst du dich schon ein bisschen verarscht.
Also, ich hab mich verarscht gefühlt, ich war da wirklich. Last World Tour hieß die, glaub ich.
Und dann, äh, gut, kann man natürlich sagen, was ist eine World Tour, kann man natürlich umdefinieren, aber so ein bisschen komisch war ich schon.
Egal, mein Geil-Teil, mach doch nochmal den Jingle, komm.
Das Geil-Teil.
Nummer zwei.
Geil-Teil.
Ach, zwei.
Also, mein Geil-Teil, äh, ich wollte eigentlich gar keins, äh, gar keins heute reinpacken, aber,
dann bin ich in meiner Geil-Teil-Liste.
Als du gesehen hast, dass wir erst zwei Stunden vorher haben, hast du gedacht, komm.
Hab ich, nee, hab ich, hab ich gesehen, nein, nein, das war schon tatsächlich im Vorfeld, äh, geplant.
Hab ich gesehen, dass es eins gibt, das besonders gut zu heute passt.
Nämlich HTML,
nee, falsch, ich hab schon falsch ausgerufen.
HTML
.dev
HTML
.dev, ich pack's auch, äh, wir packen's in die Shownotes.
Naja, das sind genauso Beispiele, wie ich sie gerade vorhin beim semantischen HTML, äh, erwähnt hab, von komischer HTML-Verwendung.
Also, das allererste Beispiel auf der Seite ist zum Beispiel, ähm, ein Button-Roll-Link mit einem Image drin.
So, ich mein, gut, ich mein, wenn, das, ja, genau, das Image hat immerhin ein Alt-Attribut, das heißt, da würde tatsächlich was vorgelesen werden an der Stelle.
Aber der Button hat auch noch einen Tab-Index 0.
So, was ist da dran jetzt Käse?
Also, ich mein, ein Button mit der Roll-Link, warum sollte ein Button Roll-Link sein, warum nimmt man dann nicht einfach einen Link?
Naja, es ist in dem Fall kein Link, weil er nirgendwo hin zeigt, äh, also zumindest ist innen drin kein Link.
Und ich weiß natürlich jetzt nicht, was mit JavaScript da noch gemacht wurde, falls das wirklich ein Link ist, naja, warum nicht ein A-Element verwenden?
Und dann Tab-Index 0 auf dem Button ist auch totaler Quatsch, weil, also mit Tab-Index 0, äh, mach ich ein Element fokussierbar, aber der Button ist standardmäßig fokussierbar.
Aber dass sich jemand echt die Mühe macht, also wirklich auch noch ein Roll-Attribut zu setzen, das finde ich ja schon irgendwie wieder, also, da hat sich jemand was beigedacht, also, irgendjemand hat was gedacht, die Frage ist nur, was?
Ja, in den meisten Fällen wird ARIA einfach falsch verwendet.
Oder in den meisten Fällen sollte man es nicht verwenden, haben wir ja vorhin schon drüber gesprochen, weil man einfach vernünftige, semantische HTML-Elemente verwenden kann.
Und es wird dann halt irgendein Quatsch damit gemacht, den eigentlich kein Mensch braucht. In ganz vielen Frameworks und Libraries findet man sowas.
Nämlich nenne ich jetzt mal keine Namen.
So, das war jetzt, ich wollte noch mal ein Beispiel sagen von der Seite, das HTML ist im Prinzip so eine kleine Sammlung an solchen Beispielen.
Ich weiß nicht, wie aktuell das ist, ich muss mal gucken, es gibt 22, glaube ich, 22 kleine Plätze.
Äh, Oktober 14, 2020.
Ah ja, ja, guck mal.
Man kann da auch was submitten. Also, man kann da, man kann da selbst Beispiele mit einreichen. Tatsächlich, du hast recht, das ist sehr aktuell.
Aber das letzte davor war im Juli.
Oktober 17, 19 war der erste.
Genau.
Äh, ist eine ganz coole Liste. Also, wenn ihr wissen wollt, ich mag das ja auch manchmal so Anti-Patterns, wenn ihr wissen wollt, was ihr nicht machen sollt, dann guckt mal auf htmhell.dev vorbei.
Genau, damit mein Geilteils abgegeilt oder so.
Gut, dann nochmal den End-Jingle vorstellen an der Stelle.
Nochmal der End-Jingle. Warte mal.
Das dicke Ende.
Oh je.
Deswegen haben wir keinen, weil der sonst in die Richtung ging.
Ähm, ok, ja, in Verabschiedung.
Äh, Feedback.
Mal wieder.
Bitte, bitte, bitte, bitte.
Ähm, wir haben es ja jetzt schon mehrfach gesagt, auch während der Sendung oder auch während der letzten 14 Sendungen, gebt uns Feedback.
Wir können nur besser werden, wenn wir auch wissen, was wir falsch machen. Oder vielleicht machen wir alles gut, aber dann würden wir das auch gerne wissen.
Wir müssen mal eine Sendung machen, wo wir nur Quatsch erzählen. Und zwar so, als ob das tot ernst meinen.
Das steht ja schon auf unserem Backlog.
Und ich darf dann auch nicht mehr, so wie bei der letzten Sendung, Dinge rausschneiden oder umschneiden, wo ich gemerkt habe, dass ich Quatsch erzählt habe.
Nee, da wird dann einfach richtig Käse erzählt, ja.
Kann ich, kann ich ganz ehrlich, kann ich ganz ehrlich sagen, äh, ich habe beim Durchhören gemerkt, dass es Quatsch war, was ich erzählt habe.
Und habe es dann nochmal teilweise neu aufgenommen und geschnitten, damit es gestimmt hat.
Der Gerrit hat es bestimmt gemerkt und hat, hat öffentlich aber nichts gesagt. Das fand ich sehr nett.
Ja, und das ist übrigens der Mann, der am Anfang gesagt hat, schon bei der Planung zu dieser, zu diesem Format, wir schneiden aber nichts.
Und als ich dann in der ersten Folge auch was Peinliches erzählt habe, äh, irgendeinen Quatsch, da hieß es dann, da willst du es jetzt wirklich schneiden.
Ich, ich bekenne mich schuldig.
Aber das Entwickler-Ego war da angekratzt.
Irgendwann, ja, ich meine, wenn ich, ja, ja.
Ja, manchmal, manchmal ist, ist mein Ego auch angekratzt, aber ich bin immerhin groß genug, das jetzt zuzugeben.
Und wenn ihr, äh, wenn ihr genaueres wissen wollt, müsst ihr die letzte Folge, also die Folge, äh, 14.
14, 14, 14, 14?
14.
Mal hören und, äh, dann sagt ihr mir mal, wo ich genau geschnitten habe, vielleicht findet ihr das ja raus.
Und ihr postet das wieder unter Rezos-Comments.
Ihr postet das wieder unter Rezos-Videos, ganz random, und schickt uns den Link und dafür kriegt ihr natürlich wieder ein Paket-Sticker.
Ja!
Also, äh, kostenlos, ihr müsst uns nur eure Adresse dann schicken, ähm, und dann, äh, dann ab die, ab die Post, ab die Luzi.
Und, äh, also ganz ohne, ganz ohne Spaß nochmal, also, wenn ihr schon nicht auf Twitter reagiert, ähm, weil ihr keine Lust habt oder weil wir doof sind, dann teilt uns doch bitte, oder weil Twitter doof ist vielleicht auch, teilt uns doch mal mit, gerne auch per E-Mail an social.at, wo wir sind, ist vorne.show.
Unter welchem Kontakt kann man euch denn erreichen?
Vielleicht sind wir ja gar nicht mehr am Zahn der Zeit, vielleicht müssen wir wirklich auf TikTok oder, oder, äh, was weiß ich.
Also, viele kommen tatsächlich auch aus LinkedIn und Xing, sehe ich in den Statistiken, also, da kommt recht viel drüber, äh, vielleicht müssen wir da mehr kommunizieren.
Ja, oder Twitch.
Ja.
Aber dann müssen wir ja wirklich jetzt, äh, dann hier Video streamen, äh.
Nee, wir, wir, wir machen bei Twitch einfach so ein Dauerscheife von, von, von, von Penisbildern von uns, oder was?
Also, äh, also, äh, genau, also meldet euch mal bei uns irgendwie, lasst uns mal Feedback dafür, also, ich hab ja schon zwischendrin so die,
Befürchtung, wir haben gar keine Hörer, das sind alles wirklich nur Bot-Downloads, ähm, und, und außer so zwei, drei Leute, die uns regelmäßig mal irgendwie Feedback geben.
Stimmt, aber als ich die letzten, als ich die Leute mal als Bots beschimpft hab, da kamen dann ein paar Kommentare.
So, also ihr Bots.
Oder, oder, oder direkt ansprechen, das haben wir auch mal gemacht, also ganz nah ans Mikrofon.
Und dann, hallo, liebe Entwicklerinnen und lieber Entwickler, die uns, die, oder der uns gerade zuhört, fühle dich direkt angesprochen.
Hi.
Mach mit.
Hi.
Mach mit.
Na, na du.
Na?
Hi, na?
Nicht Hi, na.
Hi, na?
Hast du schon gesagt, wollen wir jetzt alle Vornamen durchgehen?
Alle, die uns einfallen, ne?
Okay, ihr merkt schon, wir haben die zwei Stunden Grenze gerissen, wir haben zu viel konsumiert und, ähm, es reicht jetzt vielleicht.
Aber wenn ihr uns nix schreibt, dann wird das nie ein Ende nehmen.
Mhm.
Das ist ne Drohung.
Und mit dieser Drohung beenden wir die Sendung.
Macht's gut.
Ich hab's dir ein bisschen falsch draufgeguckt.
Komm, komm.
So weit ist es schon, es ist schon.
Ich treff den richtigen Kopf.
Nee, ich drück, ich drück.
Ach, zu spät.
Zu spät.
Also, macht's gut.
Macht's gut.
Bis zum nächsten Mal.
Macht's gut.