Wo wir sind, ist vorne, Folge 28. Heute füllen wir unsere Wissenslücken.
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-Jongleur Konstantin Groß.
Hallo, da sind wir wieder. Eine Woche später als üblich.
Aber ich bin wieder gesund. Hi.
Und auch fit.
Ich bin im Stream-Modus irgendwie. Ich habe mich gerade gefragt, wo der Chat eigentlich ist.
Wo ist der Chat? Wo sind die ganzen Leute?
Ja, heute sind wir nur zu zweit.
Heute sind wir nur zu zweit und mal wieder Podcast nach viel Streaming.
Wie gesagt, ich frage mich gerade, ich suchte die ganze Zeit den Chat auf meinem Monitor.
Jetzt fehlt die Rückmeldung.
Ja, war es vielleicht auch mal wieder ganz okay.
Ich meine, so haben wir ja gestartet und macht auch immer noch Spaß.
Auf jeden Fall.
Ja, dann legen wir doch direkt los, oder?
Ich habe jetzt gar nicht mehr so viel zur Begrüßung, nur noch die übliche Bierfrage.
Naja, da kann ich nichts mehr zu sagen.
Aber die ist bei dir ja auch geklärt jetzt noch eine Weile.
Ich habe heute ein Mönchshof-naturtrübes Kellerbier.
Mal gespannt.
Wir haben gelernt im Stream, dass ASMR ganz, ganz groß ist.
Ganz wichtig.
Ihr dürft zuhören.
Dann zum Wohl.
Naja, ich bin ein bisschen dumm hier.
Ich haue hier immer mit so einem Flaschenöffner gegen die Flasche.
Ja, ich habe immer noch eine zweite Flasche nebendran stehen.
Das sollte ich vielleicht auch in Zukunft, ja.
Das klingt besser, aber genau.
Okay, dann lass uns doch direkt anfangen.
Und ich mache jetzt keine grammatikalischen Experimente.
Es kommt jetzt direkt der Jingle.
Und ich fange auch direkt an mit einer News-Meldung.
Ich glaube, gestern ist es gerade gewesen.
Ne, vorgestern sogar schon, 2.06.
Stack Overflow wurde verkauft.
Für sage und schreibe 1,8 Milliarden US-Dollar.
Das sind 1,5 Milliarden Euro.
Also allein schon die Summe.
Wahnsinn, oder?
Also ich bin ja der Meinung, kein einziger Mensch sollte mehr als eine Milliarde Dollar oder Euro besitzen.
Ich meine, das hat vielleicht auch jetzt nicht ein einzelner Mensch bekommen.
Aber ich glaube, da bin ich irgendwie Kommunist.
Tatsächlich, da kann ich mich auch drin finden, ja.
Und gar nicht mal, weil ich denke, naja, das werde ich nie erreichen, sondern das ist einfach, da hört es irgendwie auf, sinnvoll zu sein.
Gut, in dem Fall war es ein Unternehmen und Stack Overflow an sich ist ja auch, glaube ich, keine Einzelperson mehr, sondern auch quasi eine Firma, die ja auch mehr macht als nur diese Question-And-Answer-Geschichte.
Aber trotzdem, also, ja, es hat auch sofort, ich habe nur die Überschrift gelesen und sofort hat es gemacht, oh nein, bitte nicht, bitte nicht auch noch Stack Overflow.
Und es bedeutet einfach selten was Gutes, wenn so eine Übernahme kommt.
Also man hat das jetzt vorhin, wir hatten es vorhin zum Beispiel auch schon über Trello von Atlassian übernommen und, ja, ganz oft sind halt solche Dienste, die eigentlich gut sind und dann, oder was noch, Travis CI war auch so eine ähnliche Geschichte.
Ja, und dann kommt plötzlich, ja gut, diesen Free-Tire, den behalten wir noch bei, aber eigentlich ist er so eingeschränkt dann neuerdings, dass es sich kaum noch lohnt.
Und bei Stack Overflow, ja, bin mal gespannt, was das wird, also, wenn man so eine Summe hinblättert, dann will man in der Regel ja auch was dafür rausholen und nicht einfach nur sagen können, ey, ich besitze Stack Overflow.
Und, äh, es wird auch schon so gescherzt, so von wegen, äh, ja, jetzt Credits aufladen, um die Antwort auf diese Frage zu sehen und sowas und, äh, also nicht seitens Stack Overflow, das machen die natürlich nicht, aber so, so in der Community, die Entwicklern.
Und ich bin echt gespannt, was das bedeutet, weil es ist halt einfach so ein, ja, so ein Backbone, glaube ich, der Entwickler, ähm, und wir hatten es ja in Folge Nummer 1, Folge Nummer 1 hat sich Stack Overflow gewidmet, damit haben wir sogar angefangen hier im Podcast.
Ich hab übrigens, ich hab jetzt, ich muss grad sagen, die 10.000 hab ich immer noch nicht voll. Ich hatte mir da so als Ziel gesetzt, dass ich, äh, zum Jahresende das erreichen will und dann hab ich aber so wenig Zeit gehabt, tatsächlich mich da mit zu beschäftigen, immer mal wieder zwischendrin Fragen beantwortet, wenn ich grad mal irgendwie ein paar Minuten Muse dazu hatte, aber ich bin jetzt knapp über 9.000.
Mal gucken, aber es steigt jetzt so kontinuierlich so im Hintergrund, also je mehr Fragen du da hast, äh, selber oder die du beantwortet hast, umso mehr Leute stolpern da natürlich drüber und es kommen immer mehr Abwurz rein und so, ähm, mal gucken, vielleicht schaff ich's auch noch.
Ich kann auf jeden Fall sicher sagen, ähm, ziemlich sicher sagen, dass mein Wert sich seitdem nicht verändert hat, seit dieser Folge.
Ähm, obwohl das ja im Hintergrund durchaus passieren kann, wenn noch jemand irgendwie was findet und upvotet, aber diese, diese ein, zwei Antworten, die ich da mal gegeben hab, das sind, ich glaub, diese Probleme existieren gar nicht mehr, die hat keiner mehr.
Das gibt's so alle tatsächlich, ja.
Also da ging's um so Internet Explorer-spezifiker an einer Stelle und.
Ja, und andererseits, manchmal hab ich so ein Jackpot, sag ich mal, ja, irgendwas, was tatsächlich noch keiner sonst beantwortet hat, ähm, da hab ich irgendwas zu einer Config von, von, äh, was war's denn, ähm, ähm.
Eine Config.
Webpack, Webpack war's, ja.
Ah.
Und ich hab da irgendwie, ich bin jetzt kein Experte da drin und hab aber halt irgendwie die Antwort gewusst und seitdem klicken da immer wieder Leute drauf und, äh, ja.
Nicht schlecht.
Also jedenfalls die Zukunft wird zeigen, äh, was, was das bringt, so vom ersten Gefühl her würde ich sagen, nix, nix, nix Gutes.
Aber vielleicht wird man ja auch mal überrascht.
Ich würde gerne mal positiv überrascht werden, ähm, aber das hatten wir auch in, äh, in diversen Sendungen schon, ähm, dieses Thema Software, äh, wird irgendwie irgendwann monetarisiert, ob das jetzt, ob sie jetzt übernommen werden oder nicht, aber irgendwann kommt, kommt der große Geldeintreiber und sagt, so, wir müssen unser Venture-Kapital jetzt wiederholen.
Und dann fast niemand schafft es dann gefühlt, ähm, also fast niemand schafft es dann, das so zu monetarisieren, ähm, dass es irgendwie, dass es trotzdem noch gut bleibt, das Produkt.
Meistens wird es dann irgendwie entweder voller Werbung gestopft oder total verstümmelt, äh, irgendwie in der Funktionalität so für die Free-Kunden und, ja.
Ich bin ja mal gespannt, ähm, was jetzt mit Twitter da passiert an der Stelle, weil die haben ja jetzt so ein Bezahlmodell.
In Deutschland kann man es, glaube ich, noch nicht kaufen, irgendwie nur USA und Kanada oder so.
Dieses Twitter-Blue oder wie es heißt, ne?
Genau, ich glaube, die wollen, äh, wenn ich es richtig verstanden habe, kann man dann Tweets endlich editieren, das lassen sie sich dann bezahlen.
Also ich hätte ja schon, ähm, ich hätte ja, also je nachdem, was es kostet, ich hätte ja schon vor zehn Jahren wahrscheinlich für Twitter Geld bezahlt, wenn sie aufgehört hätten, komische neue Features auszurollen und irgendwie die Timeline umzuschiften und, ähm, keine Ahnung, also, äh, irgendwie mir irgendeinen Quatsch in die Timeline zu spülen, den mich gar nicht interessiert.
Wenn ich zum Beispiel ausschalten könnte, dass ich, äh, Likes und Kommentare von anderen sehe oder nur von ganz bestimmten Leuten, das wäre ein Feature, das wäre mir echt was wert.
Und bei Twitter, den hätte ich schon, den hätte ich schon vor zehn Jahren Geld gegeben, wenn sie mir die Möglichkeit dazu gegeben hätten.
Und, äh, naja.
Ja, es war halt vor allem, also, das Editieren ist tatsächlich ja so das meistgewünschte Feature und, äh, dass sie das nicht gemacht haben, aber jeden möglichen anderen Kram und jetzt dann aber tatsächlich sagen, okay, dafür nehmen wir dann aber Geld, das ist schon irgendwie hart.
Ja, aber ich weiß jetzt, ich kenne jetzt den Feature-Umfang davon tatsächlich nicht, aber ich nehme mal an, dass dann auch die Werbung weg ist und das wäre auch was.
Obwohl ich fast keine Werbung sehe, weil ich eine ziemlich intensive, äh, extensive Blocklist da führe.
Ja.
Und immer, wenn ich Werbung in meiner Timeline sehe, oder fast immer, dann blockiere ich den Account einfach sofort.
Das mache ich auch so, ja.
Beziehungsweise ich bin schon, also mein Auge erfasst das sofort, dieses, äh, Sponsored-Post und ich scroll dann da schon drüber, also ich registriere das gar nicht.
Und wenn man browserbasierte Apps von Twitter benutzt, kann man es auch relativ gut, glaube ich, rausfiltern lassen.
Ähm, ich glaube, deswegen sehe ich auch auf meinem Desktop eigentlich nie Twitter-Werbung und nur in der nativen App, auf, äh, Android in dem Fall oder, äh, iOS.
Da lässt sich's, glaube ich, nur schwer rausfiltern.
Gut, dann mach du doch weiter.
Ähm, ja, ich, äh, das, das ist ein Thema, die letzte, die letzte Aufnahme einer Sendung ist schon wieder eine Weile her.
Ähm, deswegen ist das jetzt nicht mehr so ganz, äh, brühwarm und, äh, ich kann jetzt, ähm, auch leider zu diesem Online-Event, was ich jetzt gerade mal empfehlen wollte, ist, gibt's, glaube ich, jetzt gerade keinen aktuellen neuen Termin mehr, gab es damals aber noch, als mir das empfohlen wurde.
Ich, ich empfehle's trotzdem mal. Ähm, und zwar, äh, war ich ein bisschen, äh, im Austausch mit, äh, Christian Schäfer, mit dem Shep, auf Twitter und der hat mich dann aufmerksam gemacht auf das CSS Café. Ähm, eine Veranstaltung, ein Community-Event. Ähm, ich weiß nicht genau, ob das irgendwann mal, äh, tatsächlich ortsgebunden stattgefunden hat.
Also es steht zumindest da Bochum, Deutschland.
Genau, es steht Bochum irgendwie dabei, ähm, aber die letzten Veranstaltungen, die waren alle online, äh, seit November letzten Jahres kann ich da jetzt runterscrollen, vielleicht sind das auch alle?
Das könnte sein, dass das, ne, warte mal, alle, alle Anzeigen, muss ich gerade mal kurz gucken. Ähm, gehen wir mal weiter runter, Online-Event, Online-Event.
Naja, egal. Also das ist ein, äh, ein, äh, ah nee, es hat auch schon mal ein Stuttgart, ne, jetzt bin ich gerade hier irgendwie falsch. Ich, hä, wo bin ich denn?
Also vergangene Events 11 steht da.
Ja, genau. Ich hab, äh, ist, ist auch egal. Ich hab grad versucht runterzuscrollen und dann irgendwie alle Anzeigen, dann war ich aber auf dem falschen, ähm, ähm, äh, hat, glaub ich, also alle, die ich jetzt sehe, haben online stattgefunden.
Ist auch egal. Also das ist, äh, CSS, äh, äh, Community-Event, wo es dann auch immer, wenn ich es richtig verstehe, einen Vortrag gibt, mindestens einen.
Mhm.
Ähm, also es ist jetzt nicht irgendwie Bier trinken und über CSS quatschen, sondern gibt's einen Vortrag und, äh, auch von, von, äh, bekannteren Leuten, die da schon gesprochen haben, also hier, äh, zum Beispiel, äh, ich weiß jetzt nicht genau, ob ich den Namen richtig ausspreche, mal wieder, ist, äh, Stephanie Eccles.
Ähm, ähm, sie liest sich zwar sehr deutsch, aber ich folgte ihr auch auf Twitter, äh, deswegen weiß ich, dass, ähm, dass sie, äh, nicht aus Deutschland ist, glaube ich zumindest, also es ist irgendwie alles englischsprachig.
Ähm, und dann gab's irgendwie mal History of Container Queries, über Houdini wurde schon gesprochen, Accessibility, ähm, CSS-Layouts und, mit DevTools und so weiter und da gab's schon, schon einige interessante Sachen und, äh, wie, wie gesagt, jetzt nicht irgendwie auch, äh, der, der, also schon, schon,
von, von, andersrum gesagt, von größeren Namen auch durchaus mal.
Und das ist, glaube ich, was, was man sich mal, ähm, in den Kalender schreiben kann, soweit ich weiß, kostet das auch nichts.
Ähm, man muss, äh, einfach bei meetup.com, was auch schon so ein bisschen in Verruf geraten ist, ja, die Versuchung, Geld einzutreiben.
Jetzt sind wir wieder beim gleichen Thema. Ähm, Mitglied von der Gruppe werden und dann wird man auch notifiziert über die nächsten Events.
Und wie gesagt, wenn wir jetzt ein bisschen, ähm, früher dran gewesen wären mit der Aufnahme, dann hätten wir das letzte Event auch schon ankündigen können, also das, das, das, äh, das aktuelle, aber das ist jetzt leider schon vorbei.
Das war am 27. Mai. Da ging's um Farben in CSS.
Cool. Muss ich auch mal reinschauen.
Ja, genau. Dann können wir weiter.
Ja, dann hab ich dieses Mal, ja, diese Woche wieder was gehabt. Äh, ich hab's im Stream am Mittwoch schon so ein bisschen, äh, angekratzt und hab da gesagt, ähm, egal wie gut du deine Arbeit machst, das bedeutet nicht, dass die Leute dir dafür Geld geben wollen.
Und, äh, den Ausland, ich hab's dann nicht weiter beleuchtet, so was, was mein Hintergrund da war, aber hier im, äh, Podcast kann ich's mal ein bisschen breiter treten.
Ja, also das beste Beispiel dafür, ähm, für diese Aussage ist eigentlich so Open-Source-Software generell. Ähm, da macht sie, macht sie letztens auf Twitter was die Runde, äh, wo es drum ging, so Open-Source-Software und, und das große Firmen, die nutzen, aber halt nichts zurückgeben an die Community und, dass es fast unmöglich ist, da Leute fulltime zu bezahlen.
Und da war zum Beispiel einer, der meinte, seine Library, irgendeine, ich glaub, State Library oder was es war, State Management, ähm, die wurde in der allerersten Version von WhatsApp-Web benutzt.
Und die Entwickler von WhatsApp haben ihm dann eine Schachtel Pralinen geschickt.
Ja, und das ist halt so irgendwie, das ist so, ja, wow, wir zeigen uns erkenntlich und schicken eine Schachtel, Schachtel Pralinen.
Ich mein, ist ja schon mal eine Schachtel Pralinen, ist ja überhaupt schon mal was.
Oft wird's ja auch einfach verwendet und es kommt halt gar nichts zurück, aber es ist so, da hätte man doch als, als Facebook, ich weiß nicht, ob es damals schon zu Facebook gehört hat, als die WhatsApp-Web hatten, ähm, aber trotzdem hätte man da doch ein bisschen mehr springen lassen können und, ja, generell, dass man halt so, so größere Open-Source-Projekte supportet und dann ja auch mit dem, mit dem Firmen-Logo da genannt wird als Sponsor, das ist doch eigentlich, sollte doch schon drin sein für jetzt ganz große Unternehmen.
Aber so ist es halt. Und bei uns war jetzt so der Auslöser, ähm, man ist es ja von Auftragsarbeiten schon gewohnt und sicherlich auch viele andere Freelancer-frei schaffende Selbstständige, dass es halt manchmal Scherereien gibt mit Kunden, ja, die wollen irgendwie gefühlt alles haben, aber nichts dafür bezahlen.
Und das ist dann irgendwie so, ja, aber es ist doch nur, es ist doch nur eine Kleinigkeit, die aber halt irgendwie so eine komplett selbstgestreckte Custom-Lösung nach sich zieht, weil es halt anders einfach nicht geht.
Und, äh, ja, aber, ja, das ist aber viel zu teuer und das kann ja nicht sein, ja. Und jetzt sind wir so ein bisschen, wir versuchen halt auch mit, mit eigenen Produkten, das machen wir schon seit Jahren im 3D-Bereich, wo wir so ein Plug-in haben und so.
Und, äh, haben jetzt auch im WordPress-Markt, hab ich ja auch schon mal was genannt vor einer Weile, was wir da gebaut haben und versuchen halt so ein bisschen mit eigenen Produkten, äh, Geld zu verdienen, wo man halt nicht an Auftragsarbeiten gebunden ist.
Und man, wir dachten so ein bisschen, dass man davor dann geschützt ist, so vor diesem, der Kunde will alles und so, weil es ist ja, ne, wir bieten was an, das hat einen klar abgegrenzten Funktionsumfang und entweder findet man's cool und man kauft's oder man kauft's halt nicht, ähm, ja, ist halt leider doch nicht so.
Also, ähm, selbst wenn du da schreibst, was du für Features unterstützt, dann kommen halt trotzdem Support-Anfragen wie irgendwie, ähm, ja, das geht ja gar nicht, da fehlt doch die und die Funktion, so ist es ja total unnütz.
Also, weißt du, du hast, du hast schon irgendwie einen Haufen zufriedene Nutzer, die sogar positives Feedback rückmelden und sagen, ey, super, voll die Arbeitserleichterung und das klappt wie am Schnürchen und, oh, total toll, aber es kommt dann trotzdem jemand und sagt irgendwie, also in der Form kannst du das ja total vergessen, ähm, da braucht man's ja gleich gar nicht nutzen, so auf die Art, ja, und dann denkst du so, was, was ist eigentlich bei den Leuten kaputt?
Und, und, ja, du, du beschreibst alles, du machst Erklärungsvideos und es kommen halt trotzdem Anrufe, wo du dann eine Dreiviertelstunde am Telefon nochmal alles lang und breit durchkaust, weil die Person vielleicht lieber am Telefon sich das erklären lässt, statt halt ein bisschen Text zu lesen oder ein Video zu schauen.
Und im Endeffekt genau die Fragen kannst du eigentlich jedes Mal sagen, jo, steht so in der Anleitung, steht so in der Beschreibung, aber es, äh, wird trotzdem angefragt.
Ja, es ist ja auch, es ist ja auch anstrengend, ähm, so ein Manual zu lesen oder so ein Video fertig zu schauen.
Klar, ja gut, ich meine, man kennt das ja als Entwickler selber, ne, irgendwie war das, wer hat das letztens auf Twitter geschrieben, weiß ich mehr, irgendwie so, ähm, äh, mehrere Stunden rumgebastelt, ist, äh, da hat man gleich mehrere Minuten, äh, Anleitungen lesen gespart oder so.
Das war, das war Webfussel, glaube ich.
Ja, ähm, deswegen, ja, man kennt das ja schon selber so, aber, aber wenn ich ein Produkt kaufe, also ich bin generell kein Telefonmensch, ich hasse Telefonieren eigentlich, deswegen rufe ich sowieso nicht irgendwo an und frage danach, da bin ich einfach nicht der Typ dafür, aber es würde mir auch gar nicht erst einfallen, weil ich gucke halt, was kann das, erfüllt das meine Anforderungen und vielleicht schreibe ich mal eine Mail hin.
Aber dieses Anrufen und die Leute für ein Produkt, das vielleicht am Ende irgendwie 100 Euro kostet, 150 Euro, eine Dreiviertelstunde zu verlangen, dass ich da jetzt telefonische Beratung bekomme, also, das ist halt einfach nicht wirtschaftlich.
Und obwohl wir halt eigentlich gerne günstige Preise anbieten würden, weil wir halt sagen, ähm, ja, lieber die breite Masse und jeder kann das nutzen und so und das ist weit verbreitet und man verdient jetzt vielleicht nicht an einer Lizenz so viel, müssen wir trotzdem die Preise deswegen hochsetzen, weil wir einfach so viel Supportaufwand dadurch generieren.
Kannst du sagen, um was es genau geht?
Es geht um dieses Corona-Test-Plugin, was wir da, was ich schon ein paar Mal jetzt angesprochen habe und da ist halt ganz am Anfang waren da noch keine Bescheinigungen drin, das kam jetzt erst in einem Update nach, da kamen natürlich dann am Anfang die Fragen, ja, das kann ja gar keine Bescheinigungen, aber für Ärzte und so, die das gar nicht gebraucht haben, sondern wo es nur darum ging, denen die Arbeitsaufwände zu sparen, dass die hinterher telefonieren müssen, für die war das trotzdem schon super und die haben das genutzt und da kam positives Feedback und dann kamen halt andere, die gemeint haben, ja, ohne die Funktionalität kannst du das ja total vergessen.
Das braucht man gar nicht nutzen. Und dann haben wir jetzt das nachgeschoben, dann kommt, ja, aber was ist denn mit einer Buchungsfunktion? Integrieren in den Buchungskalender und so weiter und so fort.
Also die wollen dann die eierlegende Wollmilchsau, obwohl das an sich schon deutlich Arbeit spart und es ja genug andere Infrastruktur gibt, die man nutzen könnte in Verbindung.
Ganz einfach, ganz einfach. Lass dir die Features bezahlen von dem Anforderer?
Das haben wir dann auch tatsächlich so gemacht. Also wenn dann kam irgendwie so, ich brauche aber ganz dringend jetzt, weil die Pandemie ist ja nicht erst irgendwie schon seit anderthalb Jahren und uns ist jetzt eingefallen, wir brauchen ganz dringend, nächsten Dienstag eröffnen wir ein Testzentrum und wir brauchen jetzt Bescheinigungen.
Kann man das nicht mal eben schnell integrieren?
Dann haben wir halt gesagt, okay, alles klar, wir müssen es vorpriorisieren, wir haben jetzt noch ein paar andere Sachen eigentlich im Backlog.
Überweis uns erstmal Geld, würde ich sagen.
Hier ist ein Angebot, so viel kostet das Features, wenn du das uns zahlst, machen wir das für nächste Woche fertig, gar kein Ding.
Aber das wollen die Leute dann auch wieder nicht bezahlen.
Das ist dann wieder so dieses so, achso, das kostet Geld, achso, das kostet auch gleich noch im vierstelligen Bereich Geld.
Au, oh, nee, nee, also das geht natürlich nicht.
Dann nehmen wir lieber das Feature, was der Praktikant vom Praktikant die Schwester bekommt.
Das ist ja auch das Geile, aber ich meine, das ist jetzt speziell bei einer Open-Software wie WordPress, wo dann die Leute halt sagen, ja, aber dann sagen sie uns doch, an welcher Stelle können wir uns denn da reinklinken und können das selber programmieren.
Und dann denkst du, naja, ich werde jetzt nicht preisgeben, ja, also hier hackt ihr selber Features in unser Kauf-Plugin rein.
Also ich weiß nicht, was die Vorstellungen die Leute manchmal haben.
Das ist uncool.
Und dann kam diese Woche noch so ein Ding, also bei digitalen Gütern macht es ja keinen Sinn, Rechnungskauf anzubieten, ja.
Also du kaufst ja nicht ein MP3, sagst dann, ja, ja, schick mir mal die Rechnung, ich zahl das dann, ja.
Sondern du zahlst und dann kriegst du einen Download, so.
Und selbst sowas Simples, was doch eigentlich jedem einleuchten müsste, ist bei den Leuten nicht verankert.
Also da kam dann eine Bestellung und in der Anmerkung steht, ja, bitte per Rechnung.
Obwohl wir halt keine Rechnungszahlung anbieten, haben wir sogar geschrieben.
Ja, kein Problem, die Rechnung, die kommt dann, wenn das eingegangen ist, über Überweisung, dann gibt es wie gewohnt eine Rechnung.
Und dann kam das so ein bisschen patziger zurück, ja, dass es doch eilig ist und da ist jetzt Brückentag und da kann dann keiner die Zahlung anweisen.
Und es muss ja aber bis dahin getestet werden.
Es ist doch Brückentag.
Und dann weiß man so, da müssen wir uns dann schon überlegen, ob wir das jetzt dann überhaupt noch kaufen wollen.
Da dachte ich so, boah, dann lass es doch bleiben.
Also diese Erwartungshaltung, als ob wir da jetzt irgendwas dafür können, dass das jetzt nach anderthalb Jahren Pandemie, das jetzt ganz plötzlich kommt und das jetzt wegen dem Brückentag da keiner irgendwie die Zahlung anweisen kann.
Also das kann ja überhaupt nicht unser Problem sein.
Und dann so dieses Erpresserische quasi noch, dann kaufen wir es vielleicht gar nicht.
Also es ist schon, die Erwartungshaltung der Leute, es ist manchmal echt frustrierend.
Das macht dann auch wirklich keinen Spaß, sage ich ganz ehrlich, da vergeht es einem manchmal.
Also ehrlich, ich verstehe ja gar nicht, warum es überhaupt einen Markt dafür gibt.
Weil wenn wir ein gutes, wenn wir ein gut ausgestattetes digitales Land wären, mit guten Leuten, auch irgendwie in der Regierung, die da irgendwie was von verstehen und vielleicht auch einem Pool an Softwareentwicklern,
dann wäre doch das Erste, was ich mache, ist Leute auf sowas loslassen, auf dieses Problem und sagen, so, wir machen jetzt mal eine Lösung für alle.
Ja, genau so, genau wie mit dem Contact Tracing, da hat es ja funktioniert, aber so für diese Testinfrastruktur.
Ja, aber also Testinfrastruktur ist ja katastrophal.
Also, oder ich sage mal so, mein Bild, was ich davon habe, wie man jetzt irgendwie so einen, nee, nicht Test, sondern ich meine Impfung irgendwie beantragen, zumindest in Baden-Württemberg.
Also alle, die dieses impfterminservice.de nutzen, das ist katastrophal.
Da verstehe ich überhaupt gar nicht, warum das so gebaut ist, wie es gebaut ist.
Da muss man sich irgendwie so einen Code klicken, aber nur manchmal kannst du so einen Code kriegen und mit so einem Code kannst du auch nur manchmal deinen Impftermin kriegen.
Und auch nur dort, wo du dir dann angefordert hast, also wenn du dann siehst, ah, okay, jetzt gibt es in Stadt XY, gibt es jetzt doch freie Termine, dann musst du dort nochmal einen Code anfordern, wenn es denn gerade welche gibt.
Und dann kriegst du für den zweiten Impftermin, kriegst du nochmal so einen Code und irgendwie brauchst du aber nur einen davon, um dich anzumelten.
Es ist komplett kaputt, dieses System.
Es ist echt seltsam.
Also, ich habe zugespielt bekommen, ich sage es jetzt mal so, da hat jemand mal ein bisschen, jemand, den ich kenne, hat mal ein bisschen genauer reingeguckt in diesen Code von diesem Impftermin.
Und er hat mir dann gesagt, es sieht sehr danach aus, dass das eine Software ist, die eigentlich mal für was anderes gedacht war.
Ach, okay.
Und das, also alles spricht aus meiner Sicht auch dafür, dass das so ist, weil so wie die funktioniert, da hat man nicht das Gefühl, dass da jemand versucht hat, dieses eine Problem zu lösen, sondern da hat jemand versucht, irgendein Problem zu lösen.
Sondern irgendjemand hat gesagt, oh, wir haben doch hier noch Software XY rumliegen, die macht doch sowas ähnliches, lass uns doch das nehmen.
Hast du eine Ahnung, um was es ursprünglich ging vielleicht?
Nein, das weiß ich leider nicht.
Ich habe dann auch nicht weiter nachgefragt.
Aber wie gesagt, vielleicht gucke ich selbst noch mal rein.
Vielleicht frage ich auch noch mal nach, so vielleicht für die nächste Sendung oder so.
Wie gesagt, mir wurde nur gesagt, ich habe da ein bisschen reingeguckt und das sieht, und da gibt es irgendwie Versionsnummern, bla bla bla, und das sieht irgendwie so aus, als ob das schon älter ist.
Ja, das ist gar nicht dafür gedacht gewesen.
Ja, verrückt.
Wie, also es geht jetzt gerade um impfterminservice.de, so dieses Ganze mit, ich weiß nicht, andere Bundesländer, habe ich ja jetzt gehört, machen das ein bisschen besser.
Wobei ich dann auch nicht verstehe, warum jedes Bundesland eine Eigenlösung dafür haben muss.
Das ist auch Quatsch.
Föderalismus.
Also ein Kollege von mir aus Rheinland-Pfalz hat gesagt, und so hätte ich das tatsächlich auch selbst umgesetzt, wenn mich jetzt jemand gefragt hätte, wie machen wir denn das,
dass du dich dort halt anmeldest auf einem Online-Portal mit deinen Daten, in denen dann quasi schon drinsteht, in was für einer Gruppe du wärst, in was für einer Impfgruppe.
Und dann landest du einfach auf einer Liste, die dann abgearbeitet wird.
Und ich verstehe gar nicht, wieso überhaupt jemals jemand auf eine Idee gekommen ist, dass man es anders machen müsste.
Ja, also dieser Aufwand, dass man sich dann da wirklich hinsetzt, guck, gibt es jetzt gerade freie Termine?
Und nach einer halben Stunde nochmal gucken, jetzt gab es keine, oh, jetzt gibt es welche.
Und dann schnell gucken und so.
Also das ist echt, also ich habe auch einen Zeitungsartikel gelesen, dass es da wirklich dann Leute gibt, die haben sich quasi drauf spezialisiert,
dann in ihrem Dorf oder zumindest in ihrem Bekanntenkreis solche Termine zu vermitteln.
Also die haben das, wie so als Hobby quasi, haben die halt dann, wenn sie Zeit hatten, sich hingesetzt, haben immer wieder geguckt, ob es Termine gibt und haben dann schnell zugeschlagen,
haben sich die Codes dann reserviert und haben das dann an ihre Bekannten und so verteilt.
Die natürlich auch wirklich einen Anspruch hatten, weil sonst wirst du ja dort vor Ort sowieso abgelehnt.
Also die waren schon berechtigt, aber dass überhaupt sich dann jemand oder man selbst die Mühe machen muss, da quasi immer wieder zu klicken,
irgendwie wie so eine Ebay-Auktion oder so, ja, dass du da immer wieder gucken musst, ist schon verrückt irgendwie.
Ja, ich habe da, also ich weiß, ich bin mir relativ sicher, dass alle, die dieses Impftermin-Service benutzen müssen, weil sie in diesem Bundesland wohnen,
ich habe so eine Vermutung, dass IT-nahe Leute als erst, die ersten sind, die geimpft werden von, also die nicht in irgendwelchen speziellen Gruppen drin sind.
Weil die sich natürlich jetzt alle schon Bots geschrieben haben und ich habe auch schon mehrere davon gesehen.
Ach, tatsächlich? Echt?
Ja, ja, natürlich, ja klar, ich kenne auch Leute, die es schon benutzt haben.
Gut, das ist natürlich klar, dass es jetzt aktuell schwierig ist, Termine zu bekommen.
Ich kenne sogar jemanden, der einen Bot geschrieben hat.
Okay.
Also, äh.
Es ist halt irgendwie schade, ne, dass man, dass man es quasi dann ausnutzen muss.
Ach, krass.
Der Impf-Bot, also mir sind mindestens zwei bekannt und der Impf-Bot, das ist tatsächlich von jemandem, den ich kenne, ähm, genau.
Also, wenn wir schon am, am Links verteilen sind, dann nenne ich auch noch kurz impfterminübersicht.de.
Ja.
Da hat jemand nämlich auch das, quasi, der crawlt auch die freien Termine in den verschiedenen Bundesländern, die das, die solche Online-Angebote nutzen.
Und dann siehst du da anhand von grün, äh, markiert, wie viele möglichen, oh, es sind tatsächlich sogar relativ viele, sehe ich gerade, ähm, falls jemand einen Termin braucht.
Ähm, und dann kann man da sehen und dann kommt man dann direkt auf die Seite und so, also das ist schon ganz gut mit Benachrichtigungsfunktionen.
Also, da haben echt viele Leute, und das sieht auch besser aus als die offiziellen Seiten, muss man sagen, also, das ist schon, schon erstaunlich irgendwie.
Also, wenn man, wenn man Impftermin-Service, äh, bei GitHub eingibt, dann findet man einiges.
Ähm, und was diese Dinger machen, ist halt dieses, dieses ganze manuelle Geklicke einfach automatisieren, die gucken da regelmäßig auf die Seite drauf und, äh, und am Ende fallen da irgendwie Codes raus.
Und, äh, die, die buchen die, ich weiß nicht, teilweise buchen die, glaube ich, dann sogar auch die Termine.
Also, es ist, und deswegen sage ich, ähm, die IT-nahen Leute, die, die, äh, Leute, die ITler in der Familie haben, das sind die Ersten, die geimpft werden.
Zumindest in diesen Ländern, die diese blöde Seite benutzen müssen, ähm, weil die sich das halt, weil die sich die ganzen Codes botten.
Also, entweder ITler oder Leute mit tatsächlich viel Zeit irgendwie an der Hand, äh, die da immer wieder klicken und sich Termine raussuchen, ne?
Es ist, also, es ist katastrophal, das ist immer, okay, aber, ja, es ist einfach Mist.
Es ist einfach Mist.
Gut, ja, genau, ihr, die Zuhörer und Zuhörerinnen, ihr habt auf jeden Fall, äh, ziemlich sicher die Kenntnisse, dass ihr so ein Bot verwenden könnt und, ähm, ihr seid dann auf jeden Fall früh dran, falls ihr euch impfen lassen wollt.
Genau.
Sollen wir, sollen wir weiter?
Ja.
Gut, jetzt.
Haha, jetzt kommt's.
Nachdem, nachdem wir jetzt viel schlechte Laune verbreitet haben, hier, äh, in der Retro.
Jetzt kommt ein Stimmungsaufheller.
Kommt jetzt der Stimmungsaufheller, Achtung.
Wir haben jetzt Merch.
Yeah.
Ich weiß gar nicht, ob wir es so richtig im Podcast schon gesagt haben, ähm, aber jetzt hier auf jeden Fall nochmal offiziell.
Ihr könnt jetzt ab sofort T-Shirts, Tassen, Hoodies, ähm, in allen möglichen Farben und Formen bestellen.
Unterwäsche wollte ich gerade noch sagen, aber die gibt's noch nicht.
Unterwäsche wollte ich sagen, haben wir leider noch nicht.
Ähm, kommt, kommt aber vielleicht noch.
Genau.
Ähm, könnt ihr bestellen, ähm, auf supergeek.de, slash, de, slash, wo wir sind, ist vorne.
Und es ist auch tatsächlich so, je mehr ihr bestellt, also wenn ihr jetzt fleißig bestellt, dann, dann helft ihr uns dabei, dass wir künftig mehr Motive und Produkte anbieten können.
Genau.
Es ist quasi so ein bisschen so eine Testphase jetzt, äh, wie gut läuft's und, äh, ja, wenn ihr da mehr wollt, auch nicht nur mit unserem Logo vielleicht, sondern auch irgendwelche lustigen, nerdingen Sachen, die wir uns einfallen lassen, dann müsst ihr jetzt fleißig bestellen.
Und Spoiler Alert, wir haben uns schon mehr einfallen lassen. Es gibt schon noch ein paar weitere Motive.
Es gibt diverse Entwürfe, ja.
Aber wir, ähm, wie gesagt, wir müssen uns erst jetzt mal bewähren, dass das läuft. Und ich finde auch unser Logo ganz nett, so zu tragen. Ich hab jetzt hier schon so ein paar, äh, so ein paar, äh, Vorab-Exemplare, mit denen ich, äh, mit denen ich jetzt die ganze Zeit schon rumlaufe und die Leute mich komisch angucken, was ich da für, für pinkes Zeug auf dem Shirt hab.
Aber neben, äh, meinen lackierten Fußnäkeln fällt es dann eigentlich auch kaum auf.
Ja, und unsere ZuschauerInnen haben auch schon fleißig bestellt. Aus dem, aus dem Stream gab's schon Bestellungen.
Genau, aus dem Stream gab's schon Bestellungen, ähm, und falls ihr, natürlich, äh, schaut's euch mal an. Link kommt auf jeden Fall in die Shownotes. Ähm, und falls ihr irgendwie noch Fragen dazu habt oder, oder sagt, hey, das Motiv wär doch irgendwie cool oder so, dann auf jeden Fall irgendwie uns mal schreiben, irgendwie auf Twitter oder gern auch per Mail. Ähm, genau. Würden wir uns drüber freuen. Und sagt uns mal, was ihr darüber denkt. Ähm, schaut's euch mal an. Und wir sind auf jeden Fall sehr interessiert an eurer Meinung.
Das ist jetzt der erste Wurf. Das ist mit Sicherheit nicht der letzte. Ähm, und, äh, wie gesagt, demnächst kommen noch weitere Motive.
Aber, äh, jetzt erst mal das erste und bestellen, bestellen, bestellen, bestellen, bestellen. Und zwar, und jetzt nochmal.
Ich wollte auch gerade, ich hatte den Finger schon auf dem, auf dem Knapfchen.
Genau, ähm, so.
Jo, dann machen wir doch weiter, oder? Wir haben heute keine Property der Woche. Und warum, das erklären wir auch gleich nach dem Jingle.
Hier ist WWS IV mit dem Tagesthema.
Ich kam mir gerade vor wie Armin Maywald aus der Sendung mit der Maus. Und warum? Das zeigen wir euch nach der nächsten Maus.
Ja, und zwar, wir greifen heute, ähm, unsere Folge, was war's denn? Jetzt hab ich's mir vorhin aufgeschrieben und hab's, äh, Folge 16.
Unsere Folge 16, da haben wir diese State of CSS-Umfrage gemacht.
Und, äh, da waren ein paar Punkte dabei, die wir beide nicht gekannt haben.
Alle anderen haben wir dann so ein bisschen abgefrühstückt und ein bisschen was dazu erzählt.
Und dann waren manche, die haben uns aufgeschrieben, da wussten wir beide nichts dazu zu sagen.
Und das kam jetzt auch mehrfach schon, die Rückfrage so auf Twitter und im Stream, ähm, ja, macht doch mal, ihr wolltet doch mal noch eine Folge dazu machen.
Und jetzt haben wir immer wieder die ganze Zeit aufgeschoben, beziehungsweise hatten ja auch, äh, Gäste geplant.
Und jetzt kommen wir endlich dazu und greifen die auf.
Und wir machen's aber nicht in der Reihenfolge von der Umfrage, sondern wir haben's so ein bisschen versucht, thematisch zu gruppieren, ne?
Ja, versucht.
Versucht.
Gut.
Ähm, ähm, magst du anfangen direkt?
Äh, Text-Align-Last ist die erste Property und wir müssen, wir müssen echt, wir haben eine Menge auf der Liste.
Ich glaube, es sind 17 oder so.
Ähm, Text-Align-Last, ähm, wir müssen uns bein.
Also, ich pack's jetzt nicht immer dazu, sondern nur da, wo es irgendwie Auffälligkeiten gibt mit Can I Use.
Äh, aber die, wie immer, die Links zu MDN und zu Can I Use, die kommen in die, in die Shownotes und auch wenn's irgendwelche Videos oder Tutorials gibt oder von Moritz gebastelte Demos, äh, dann kommen die natürlich auch in die Shownotes.
Also, ich bin, ich bin, wie immer, wie immer schlecht vorbereitet, ich hab nicht zu allem was zu sagen, aber das hab ich, glaub ich, noch im Hinterkopf.
Ähm, Text-Align-Last ist, äh, das Alignment der letzten Zeile eines Absatzes oder eines Elements, äh, des Textes.
Ja, genau.
Also, vor, also nach einem, einem automatischen Zeilenumbruch.
Genau, nach, also dem, nach dem letzten, nach dem letzten automatischen Zeilenumbruch.
Das heißt, ich kann zum Beispiel, könnte dann zum Beispiel sagen, also standardmäßig ist ja, zumindest in unserem Kulturkreis links, man könnte aber jetzt sagen, dass der letzte Absatz, äh, rechts-aligned ist.
Genau, warum auch immer man das wollte. Also, ich glaube hauptsächlich, zentriert auch, ja, zentriert und dann aber Text-Align-Last, dann Left, das funktioniert auch, hab ich auch in der Demo gesehen.
Ähm, ich glaub am meisten Sinn macht das tatsächlich bei Justify. Ob du jetzt willst, dass der letzte trotzdem Justify ist oder ob der eben dann links ist, im, im, im, von, äh, links nach rechts Sprachen, äh, oder, beziehungsweise es gibt ja auch die, also wir gehen vielleicht mal die Keywords durch, ne?
Left, Center, Right und Justify und aber auch Start und End. Und das ist eben bei diesen, ähm, also, du kannst ja, dass, dass du nicht, dass, also, wenn du eine RTL-Sprache hast, also, I to Left, Arabisch zum Beispiel, dann, dann kannst du ja nicht, dann müsstest du es dafür auf Right setzen und für, für normale, also, normale, sage ich jetzt, irgendwie, ich spiele halb rassistisch, äh, für, für, äh, links nach rechts Sprachen, wie, wie das Deutsche oder Englische, ähm, müsstest du es auf Left setzen und so kannst du dann einfach sagen, Start ist dann immer,
da, wo der Zeilenanfang ist, in der entsprechenden Sprache, die über das Locale im Dokument gesetzt ist, ja.
Wobei ich Justify, äh, heutzutage auch, meinst du echt, ist das ein Problem in der letzten Zeile? Ist das nicht mittlerweile clever genug, dass das dann nicht riesige Abstände zwischen die Worte macht?
Also, Justify macht automatisch, ähm, eben dieses, also, ich hab mir das aufgeschrieben, letzte Zeile, wie Text-Align-Wert, außer bei Justify, dort ist es dann Start, wenn man das Auto-Value setzt, also das Standard-Value.
Das heißt, bei Justify ist es automatisch Start, aber vielleicht will ich es ja forcieren, weißt du, vielleicht will ich ja, aus welchen Gründen auch immer, designtechnisch, dass bei Justify auch die letzte Zeile gejustified wird.
Und dann kann ich es eben überschreiben mit Text-Align-Last auf Justify.
Ich hab grad, ich hab grad nachgeschaut, ob wir denn, ich hab nämlich, ich dachte mich zu erinnern, dass wir Justify verwenden, ähm, auf unserer Podcast-Seite, auf wo wir sind, ist vorne.show, tun wir aber nicht.
Es wirkt nur so, als ob wir Justify verwenden.
Weil wir, äh, Lime-Pred, also, ähm, na, Wort-Trennung drin haben, ne?
Genau, weil wir Hyphens haben, ähm, das heißt, die Worte werden tatsächlich automatisch getrennt mit, äh, mit Bindestrichen, so wie das halt, äh, wie man das halt macht.
Das funktioniert erstaunlich gut.
Ja.
Aber ich glaube, es ist auch tatsächlich, ich hab schon einen Browser gesehen, wo das dann, wo es nicht funktioniert, wo es nicht geht.
Aber dadurch hast du quasi sowas wie Justify, nur, du hast, ich hab jetzt grad nochmal geschaut, es ist tatsächlich nicht dann komplett auf einer Linie.
Man könnte aber.
Nee, nee, nee, es ist schon so ein bisschen flatter Satz.
Man könnte das aber tatsächlich da noch drauflegen.
Zusätzlich noch Justify machen, ja, das hab ich ja auch grad überlegt, ähm, dass das vielleicht gar nicht so doof aussieht.
Ich mag Justify ja eh.
Es gibt viele, die sagen, ah, Text-Align-Justify, das macht man doch nicht und das sieht scheiße aus.
Aber mit, gerade mit der Silbentrennung, finde ich es eigentlich in Ordnung.
Weißt du, wie das definiert ist, typografisch, weil es sieht grad bei mir komisch aus.
Also, äh, ich frag jetzt mal ganz konkret, ähm, weißt du, ob der Bindestrich dazugehört oder ob der außerhalb wäre?
Äh, wie außerhalb?
Du meinst, dass der dann raussteht und die, die Buchstaben tatsächlich auch, nee, nee, der ist schon mit drin.
Also, wenn du jetzt irgendwie.
Ich find, dass der, genau das ziemlich komisch aussieht.
Es kommt ja aus dem Print und wenn du da, da hast du ja auch nicht den Bindestrich dann rausgucken.
Ich find's sieht komisch aus, weil dann irgendwie, das ist merkwürdig.
Es sind halt sehr viele Bindestriche, das ist halt immer das Problem.
Du müsstest dann wieder bei Justify dann auch anfangen, bei Worten das dann zu unterbinden oder so ein Shy reinsetzen oder so.
Also, ähm, wenn du irgendwie von fünf Zeilen, hab ich jetzt hier das Beispiel, von fünf Zeilen sind vier,
halt mit Bindestrich am Ende.
Und das versuchst du ja eben, wenn du, wenn du Typografie machst, tatsächlich im Print-Layout versuchst du das ja zu vermeiden.
Oh Mann, ich hab grad Justify auf Text-Align-Last. Das sieht so kaputt aus.
Ja, ja, gut, klar, das sind Riesenabstände.
Ja, klar, es muss der Vollständigkeit halber dabei sein, aber ich wüsste nicht, was der Anwendungsfall dafür ist.
Das ist vielleicht tatsächlich für einen Fall, wo du, wo du fast komplett die Zeile voll hast im Letzten und du sagst dann, naja, dann kann ich's auch noch ganz voll machen.
Also wirklich für manuell befüllte Sachen ist es vielleicht eher, wo es zum Tragen kommt.
Hm, ja, aber macht Spaß. Ich spiel grad ein bisschen damit rum.
Auf jeden Fall, das reden wir schon viel zu lange.
Ich wollt grad sagen, wir müssen jetzt echt, wir können nicht bei jedem so lange, aber, ja, gut.
Das geht nicht.
Gut, dann als zweites Initial Letter.
Kann mir das nicht runter, ach so, warte mal, ich bin in meiner, das hab ich irgendwie falsch, ah ja, okay, gut.
Initial Letter, und ich hab, also ich hab das aufgemacht beim MDN und mir angeguckt, was das eigentlich ist und dachte mir so, als erstes,
bevor ich irgendwas gelesen hab, wo, wie unterscheidet sich das zu First Letter?
Ja, das war so mein...
Hä, Initial Letter, wir haben doch schon First Letter, aber, ne, der entscheidende Hint ist, äh, nicht Pseudo-Selektor, sondern Property.
Genau.
Also First Letter ist ein Selektor und Initial Letter ist aber eine Property.
Ganz genau, und das soll, soweit ich weiß, ist das aber gedacht dafür, dass man's mit First Letter verwendet?
Ja, eigentlich, eigentlich schon, wobei du's nicht unbedingt brauchst.
Also du kannst das tatsächlich auch, wenn du jetzt ein P-Element hast und den ersten Letter stylen willst, ähm, kannst du's auch einfach da draufsetzen.
Aber ich würd's wahrscheinlich zusätzlich mit dem, mit dem Pseudo-Selektor machen.
Also Pseudo-Element-Selektor.
Wie ist denn da der Browser-Support, weil ich jetzt gerade...
Äh, nur Safari mit Prefix.
Nur Safari mit Prefix?
Ja, und selbst dort die Umsetzung unvollständig, weil's keine Webfonds unterstützt.
Äh, ah, was?
Ja.
Das ist ja, das ist ja komplett sinnlos.
Tja.
Wo, was, sag mir mal eine Seite, die keine Webfonds benutzt, dass ich das mal ausprobieren kann, Google?
Wikipedia.
Wikipedia benutzt bestimmt keine Webfonds.
So, Wikipedia.
Ich mach das, ich muss das jetzt mal kurz, äh, live ausprobieren, weil...
Ich hab kein Safari zum Testen.
Ja, genau, deswegen, ich dachte aber, ich hab halt ein Safari.
Haben wir jetzt eigentlich schon gesagt, was es macht, genau?
Nee, ne?
Also, es ist, es ist, es ist, dieses, was man aus, aus Büchern kennt, so besonders aus alten Büchern
oder auch so im Print als Stilelement wird's noch benutzt, dass man den, die, die, die, das erste Zeichen
oder den ersten Buchstaben in der Zeile, in der ersten Zeile, ähm, anders formatiert.
Andere Farbe und so, das geht die ganze Zeit schon mit, mit First Letter, ähm, aber da war das Problem immer,
wenn man den größer haben will, dann musste man genau gucken, irgendwie 200%.
Und wie das dann passt mit der Zeilenhöhe.
Und bei Initial Letter kann ich wirklich einfach angeben, die Anzahl der Zeilen, die dieser Buchstabe
überspannen soll.
Und dann kümmert sich der, der Client automatisch darum, das richtig darzustellen.
Und wenn ich dann zwei mach, Initial Letter 2, äh, dann hat zum Beispiel das L von Lorem Ipsum,
nimmt exakt zwei Zeilen in der Höhe ein.
Ja, es funktioniert nicht in meinem Test hier gerade.
Nicht? Okay.
Äh, aber vielleicht hat das dann doch irgendwie Webfonds, ich hab keine Ahnung.
Aber wie gesagt, mit, äh, mit Prefix hast du, ne?
Ja, Webkit Initial Letter hab ich mal zwei, aber muss ich, muss ich eigentlich zwei Werte
angeben?
Ja, es gibt zwei Werte.
Der zweite Werte heißt dann, um wie viele Zeilen das dann noch nach oben rutscht, also
die quasi ausgelassen werden.
Also wenn ich jetzt irgendwie, äh, drei, also Höhe drei, aber, ähm, zwei Zeilen auslassen.
Vielleicht funktioniert's tatsächlich nur mit First, äh, äh, First Letter.
Das kann sein, das hab ich jetzt nicht ausprobiert.
Egal, also, äh...
Jedenfalls noch nicht sehr weit verbreitet.
Ich glaub, da brauchen wir uns nicht schämen, dass wir das noch nicht, nicht kannten.
Also würde mich nicht wundern, wenn das so eine, so eine Geschichte ist, wo, ähm, wo Apple
gesagt hat, Apple hat ja schon öfter irgendwie Web-Tools, äh, gebaut und dann gesagt, ey, wir brauchen
aber jetzt hier genau dieses eine Style-Ding, ähm, weil wir das jetzt hier abbilden wollen
und dann erfinden wir jetzt schnell was und tun mit dem Web-Kit rein.
Das kann natürlich sein, ja.
So sind einige Standards, äh, entstanden, ähm, als, als Web-Kit noch irgendwie Standard-Timer
Aber ich glaub, es gibt, es gibt auf jeden Fall dann einen Draft dafür, meine ich, gefunden
zu haben.
Genau, aber ist auf jeden Fall eine coole Sache.
Verbreitung kann, kann man halt in die Tonne treten, aber ich find die Idee ziemlich gut,
also aus Typ, wenn man, wenn man vernünftige Typografie für First Letter machen will,
ist es auf jeden Fall eine gute Sache.
Mhm.
Gut, dann?
Font-Variant Numeric.
Habe ich dazu die Demo noch auf?
Ich bin mir gerade nicht sicher.
Hast du da was gebastelt?
Nee, nee, äh, ich hab, ich hab da, da ist, gibt's tatsächlich eine schöne Demo von MDN,
wo man so ein bisschen rumklicken kann, die haben ja manchmal, ähm, die haben nicht für
alle, äh, nicht für alle Sachen haben die so schöne Demos, aber das ist eine, wo man so
die, die verschiedenen Werte, ähm, einfach sich mal durchklicken kann, wobei, äh, da gibt's
deutlich mehr Werte als, als man hier ausprobieren kann. Das ist ja unfassbar. Also, Font-Variant Numeric, ähm, ist, äh, das, es hat mich erinnert an etwas, was ich bei Variable Fonts schon gesehen habe, allerdings muss das denn der einzelne Font dann unterstützen.
Ähm, ähm, man kann zum Beispiel sagen, dass, äh, also, gibt's als Wert zum Beispiel slashed zero, dann ist die null durchgestrichen, allerdings natürlich nur bei Schriftarten, die das unterstützen.
Genau, es ist ein OpenType-Feature. Das heißt, es muss wirklich als eigener Glyph angelegt sein in der, in der, äh, Datei. Ich hab mich ja mit, mit, mit dem OpenType-Format vor einer Weile mal auseinandergesetzt und da in der einen OpenType-Library auch, auch, auch ein bisschen was gefixt.
Und, ähm, das ist wirklich ein eigener Glyph, der wirklich als Variante, als Zeichnvariante in der Schrift vorhanden ist und vorhanden sein muss, damit ich eben dieses, dieses Feature, ähm, aktivieren kann.
Und so ist es bei allen. Also, wir gehen vielleicht noch mal so die, äh, meistgebrauchten, sag ich mal, durch.
Genau, also, ähm, was, was ich da dran interessant fand, war, äh, wie gesagt, Variable Fonts, da ist mir das schon mal begegnet, also gerade mit dieser durchgestrichene Null, ähm, und auch anderen, ähm, sowas wie, äh, gibt's noch Old-Style-Nams zum Beispiel, das sind dann, äh, Medieval-Ziffern, glaube ich, nennt man die.
Genau, die so mal größer, mal kleiner irgendwie so ausgerichtet sind, ne?
Genau, und die so ein bisschen, äh, in die Unter- oder Oberlänge dann rein, wobei, ja, doch, der, ich weiß nicht genau, in welcher Logik das folgt, aber, ähm, ja, das ist so ein anderer Ziffern-Style, muss natürlich die Schrift auch unterstützen an der Stelle, aber wie gesagt, ich kenn's halt als, äh, als, äh, Feature von Variable Fonts.
Genau, vielleicht auch noch mal so zwischenreihen als Querverknüpfung, ähm, Variable Fonts haben wir auch drüber gesprochen, äh, Folge Nummer 14 mit, mit Gerrit van Aken in der Webtypografie-Folge.
Wer nicht weiß, was das ist, weil wir das jetzt ein paar Mal genannt haben, ähm, und auch über die, ich glaub, über die, die Font-Variants haben wir, glaub ich, auch da, äh, schon gesprochen, also, auf jeden Fall mal reinhören, das lohnt sich.
Genau, also, was ich halt cool fand, jetzt an der Stelle war, dass es dafür jetzt quasi eine Art, eine Art CSS-Standard gibt, mit dem man da so bestimmte Font-Features, ähm, äh, auswählen kann, äh, in dem Beispiel, also das, wo ich, wo ich, wo es mir schon über den Weg gelaufen ist, da ist das dann sehr Font-spezifisch, ähm, nämlich schaltet man bei dem Font, äh, einzelne Features an,
Das geht aber dann nur für diesen einen Font, weil die Features bei jedem Font anders heißen können, ähm, geht das dann nur spezifisch auf diesen einen Font und das ist ja quasi ein Standard, den dann hoffentlich, äh, viele Fonts unterstützen werden.
Genau, also, es gibt also gewisse Standards als Varianten, die man dann bei der Erstellung von so einem OpenType Font auch auswählen kann, ähm, da gehört eben das dazu, ähm, und es gibt aber auch Varianten, die man also, ja, quasi selbst benennen kann und die kann man darüber dann, dann, äh, damit auch an- und ausschalten.
Ähm, was es noch gibt, äh, Tabular Nams ist vielleicht tatsächlich was, was man mal gebrauchen könnte, ähm, da werden alle Zahlen dann als Monospace ausgegeben, aber die restliche Schrift hat nicht, also ich hab dann eine Monospace-Variante von Zahlen, die man ja vielleicht mal in tabellarischer Form quasi untereinander stellen will und das finde ich eigentlich schon ganz praktisch, das könnte man vielleicht tatsächlich irgendwo gebrauchen, wenn Zahlen irgendwo untereinander stehen.
Genau, dann hast du auf jeden Fall eine viel bessere Übersicht, also wenn du jetzt eine Tabelle, eine Tabelle hast zum Beispiel mit, äh, mit mehreren Zahlen untereinander, dann ist das schon sehr praktisch, wenn, äh, die einzelnen Ziffern untereinander stehen, wenn ich dann irgendwie vergleichen will, wie die Werte irgendwie sind, ja.
Okay, dann machen wir mal schnell weiter, oder?
Mhm.
Oder muss, oder wollen wir noch weitere?
Nee, ich hab dazu, dazu sonst nix.
Gut, dann Font-Display.
Soll ich mal?
Ja, mach du mal.
Ähm, also Font-Display ist eigentlich keine wirkliche Property, hab ich jetzt gelesen, sondern das ist ein, äh, Font-Face-Descriptor, ne, also diese Add-Font-Face-Regeln, das sieht zwar aus wie Properties, aber das sind eigentlich Descriptor anscheinend und was den Unterschied da entscheidend macht, ist, ähm, dass die nicht per Add-Supports-Query oder über die CSS-Supports-API abfragbar sind, also da kann ich nicht herausfinden, ob der Browser das unterstützt oder nicht.
Und was macht das Ganze? Da muss man so ein bisschen technisch ausholen.
Ähm, ähm, es gibt so verschiedene Zeiträume, in denen die Schriftart geladen wird oder versucht wird vom Server zu laden und dann eben eingesetzt wird im Browser, im Render-Prozess.
Und zwar gibt's einmal die Font-Block-Period, in der ein unsichtbares Fallback dargestellt wird, das heißt, es ist einfach nur Freiraum, es steht kein Text da, während die Font lädt, ähm, es gibt die Font-Swap-Period im Anschluss, die dann ein sichtbares Fallback darstellt, das heißt, es wird irgendeine, äh, ich weiß nicht, wie die Browser das machen, irgendwie die nächstbeste.
Oder vielleicht, wenn, wenn das, äh, sans-serif oder serif, äh, Keyword vorhanden ist, dass es dann eine nimmt, die, die am besten dazu passt oder von der Font-Größe her, ähm, ich weiß nicht, wie die das auswählen.
Aber es wird jedenfalls dann Text dargestellt.
Und das, der dritte Schritt ist dann Font-Failure-Period, das heißt, die Webfond konnte nicht geladen werden, irgendwie 404er, äh, Fehler ist jedenfalls nicht da und dann bleibt diese, diese Fallback-Fond dauerhaft stehen.
Und in den ersten beiden Perioden, wenn also gar kein Text da ist oder eben das sichtbare Fallback, wenn die Webfond dann gefunden wird, dann wird sie ausgetauscht.
Und dadurch hat man so diesen Effekt, den man so kennt, dieses, äh, Fout, also Flash-of-Unstyled-Text oder Void, Flash-of-Invisible-Text, also das ist so kurz flackert beim, beim Seitenladen.
Und dadurch lässt sich eben die Präferenz mitteilen, was von beiden man denn will.
Äh, will ich jetzt eher, dass am Anfang da gar nichts ist und ich gar nichts lesen kann und es flackert dann überhaupt erst Text auf oder will ich eben, dass auf jeden Fall mal eine Vorback-Fond da ist und dann wird das erst eingeblendet.
Oder ich kann halt eben auch sagen, ähm, mach die Font optional, das heißt, bei langsamen Verbindungen habe ich dann gar keine Webfond.
Und das ist, wenn ich einstelle Font-Display-Optional, dann habe ich eben diesen, diesen Fall, ähm, ich habe eine extrem kurze Block-Phase und gar keine Swap-Phase.
Also das heißt, ich habe ganz kurz ein kurzes Flackern und wenn aber, in der, ich glaube, es sind bei Chrome standardmäßig 100 Millisekunden, bei Firefox gibt es sogar einen Developer-Flag, wo man das einstellen kann.
Also es ist wirklich 100 Millisekunden, entweder ist die Font da oder nicht und wenn sie nicht da ist, dann, dann lass sie weg.
Und, äh, dann habe ich noch.
Das kann ich tatsächlich nicht.
Und dann habe ich, äh, Font-Display-Block, ist eben eine kurze Block-Phase und eine unendlich lange Swap-Phase.
Das heißt, selbst wenn es 10 Sekunden dauert, äh, bis die Font da ist, dann kommt die Font trotzdem noch.
Die Web-Font. Äh, Swap als Keyword ist eine extrem kurze Block-Phase, aber eine unendliche ist, warte mal, dann habe ich zweimal das Gleiche aufgeschrieben.
Das, das kann nicht stimmen.
Muss ich nochmal selber gucken.
Da steht bei Block und Swap das Gleiche, das macht ja keinen Sinn.
Ah ne, doch, ah ne, der Unterschied ist, extrem kurze Block-Phase, genau. Also bei Block habe ich nur eine kurze Block-Phase, ich weiß jetzt nicht wie viele Millisekunden, ist wahrscheinlich auch je nach Browser-Implementierung anders.
Und bei Swap habe ich eine extrem kurze Block-Phase, was wahrscheinlich auch so um die 100 Millisekunden liegen dürfte, wie bei Chrome.
Und dann aber auch wieder eine unendliche Swap-Phase.
Und dann gibt es noch das Keyword Fallback, extrem kurze Block-Phase und eine kurze Swap-Phase.
Das heißt, wenn dann die, die Font nicht da ist, ähm, das ist eigentlich die Frage jetzt, was ist der Unterschied zwischen Fallback und Optional?
Also da habe ich gar keine Swap-Phase und bei Fallback habe ich eine kurze Swap-Phase, okay.
Ja, genau.
Also ich habe einfach doch noch ein bisschen mehr Zeit, in der dann Fallback-Text da ist und bei Optional habe ich das, habe ich das gar nicht.
Also ich habe entweder gar kein Font oder halt direkt das Fallback, genau.
Und ich verlinke auch noch ein YouTube-Video, Font-Display-Supercharged und einen CSS-Tricks-Artikel in den Show Notes.
Cool.
Wieder was gelernt.
Also kannte ich tatsächlich auch nicht, weder, weder das mit dem Fallback, ähm, Optional, also zu dem Zeitpunkt, als wir die Umfrage ausgefüllt haben.
Wir haben dann später, oder war das nicht sogar, das könnte auch nach der, nach der Typografie-Folge gewesen sein, äh, hat uns jemand darauf hingewiesen,
hey, macht doch bei euch auf der Seite, äh, setzt das doch ein, weil das flackert immer so, wenn man es zum ersten Mal lädt.
Und das haben wir tatsächlich dann, ähm, auch gemacht.
Äh, Browser habe ich gerade noch mir angeschaut, ähm, sieht ziemlich gut aus, also Internet Explorer nicht und ansonsten alles, was irgendwie gerade aktuell ist, unterstützt das.
Sehr schön.
Und das ist schon, schon eine ganze Weile Chrome ab 72, ich weiß gar nicht, wo sind wir denn gerade, wo sind wir denn gerade bei Chrome?
Was, mit 80?
Äh, 91 schon.
91?
Ja, ich, ich glaube, ja, 91.
Dann Chrome schon eine Weile seit, seit 72, Edge seit 79, Firefox seit 58 und so weiter.
Also das ist schon relativ weit unterstützt.
Bei Safari auf iOS seit 11.3, das klingt mir jetzt nicht.
Ich finde das gar nicht auf, auf, äh, can I use.
Das habe ich nämlich vergessen zu verlinken.
Äh, ich habe, ich habe es hier bei, bei MDN, äh, so habe ich unten die, die Tabelle angeschaut.
Genau, also das, das, ich habe das auf jeden Fall auch schon mal eingesetzt und nicht nur bei uns auf der Podcastseite, sondern, ähm, tatsächlich in einem Projekt.
Und da haben wir, glaube ich, Swap genommen, ich weiß es aber nicht mehr ganz genau, ja.
Weil es mir ganz einfällt, ähm, weil das ja eben in dem Deskriptor ist und man ja so Google-Fonts vielleicht auch über einen Import oder so reinlädt, ähm, weißt du, ob man da angeben kann, was man da als Font-Display-Wert gesetzt haben will?
Oder nimmt man da einfach das, was Google einem hinwirft?
Bei Google-Fonts weiß ich tatsächlich nicht, ne.
Okay, also ich dachte nur, wenn du, wenn du es zufällig, äh, jetzt wüsstest, weiß ich mir die Frage gerade stellt.
Google, Google-Fonts, äh, kommen von einem anderen Server und sind deswegen bei mir eigentlich immer als Sicherheitsrisiko eingestuft, aber auch, ne, auch bei mir privat.
Okay.
Ich nutze das nicht mehr. Ich nutze das nur noch zum Downloaden.
Es gibt einen CSS-Trix-Artikel zum Thema Google-Fonts and Font-Display.
Lese ich mir jetzt nicht komplett durch, aber ich verlinke ihn euch auch.
Wobei ich jetzt nicht wetten würde, dass, ah, doch, ne, wir haben, äh, bei, äh, wir sind jetzt vorne.show, haben wir die Fonts auch lokal.
Mhm.
Die sind nicht bei Google.
Ja.
Okay.
All right, dann, das nächste muss auch du machen.
Muss auch ich machen, okay.
Ja, das musst du machen.
Ja, Image-Rendering ist das nächste, ne.
Ja.
Ähm, das greift nur bei skalierten Bildern.
Also wenn ein Bild tatsächlich die natürliche, äh, Kantenlänge hat, sag ich mal, ähm, und nicht skaliert wird, dann greift das nicht.
Aber wenn ich ein Bild hoch oder, also größer oder kleiner skaliere, dann kann ich damit die Kantenglättung beeinflussen.
Ah, das ist ja cool.
Also da gibt's, ähm, Auto, das macht dann das Handeln in der Browser.
Ähm, die haben da auch unterschiedliche, äh, Anti-Aliasing-Algorithmen, die die einsetzen.
Ähm, und mit Crisp-Edges oder Pixellated kann ich eben einstellen, ob die Ecken eher so Treppchen eben haben bei Pixellated oder Crisp-Edges, dann eben so dieses Anti-Aliasing.
Da ist bei dem MDN-Artikel, äh, sieht man da auch so eine, ja, eigentlich klarer Fall für eine Vektorgrafik, weil es so eine, so eine Zeichnung ist.
Ja, genau.
Ähm, sollte man am besten natürlich damit machen.
Aber für eine Rastergrafik kann ich das dann damit einsetzen, weil manchmal will man tatsächlich vielleicht eher so diesen Pixel-Look.
Ich glaube, dass gerade diese Art Grafik sich sehr gut eignet, um den Effekt zu zeigen.
Ja, klar.
Ähm, klare Kanten.
Genau, klare Kanten.
Ähm, ja, aber das ist ja tatsächlich cool.
Ich hab, was ich mich jetzt als erstes gefragt hab, ist, kann ich damit auch, ähm, Einfluss nehmen, wenn ich jetzt eine Grafik, die nicht für zum Beispiel ein High-DPI-Display gemacht ist, auf einem High-DPI-Display anzeige?
Müsste man tatsächlich mal ausprobieren.
Da, mit was es zu tun hat.
Hm.
Na gut, weil das ja intern quasi auch wieder hochgerechnet wird, eben auf die, auf die, äh, DPI-Zahl, ja.
Äh, beziehungsweise PPI.
Beziehungsweise ich kann's gar nicht mehr wissen, weil ich nutze eigentlich nur noch solche Displays momentan.
Ich hab gar nichts mehr anderes um mich rum.
Irgendwie iPad hat das, mein Handy hat das, ich hab hier einen 4K-Monitor vor mir stehen und das MacBook hat das auch.
Also ich glaube, dass man halt am ehesten so dieses Crisp-Edge haben will und das ist ja auch das, was so optisch, würde ich jetzt sagen, der Autofall ist, zumindest hier im Chrome.
Ähm, ähm, Auto-Scaling-Algorithmus ist UA-Dependent. Ähm, Firefox hat da Bilinear-Resampling zum Beispiel.
Also ich glaub schon, dass die Standardeinstellung da der Standardfall ist, weil du eben gerade bei Fotos und sowas, da willst du's eigentlich geglättet haben und nicht pixellig.
Könnte ich mir jetzt halt vorstellen, wenn du, wenn du was hast, was sowieso schon eine Pixel-Grafik ist. Also wenn wir jetzt zum Beispiel, unsere Emotes, unsere Emotes von Twitch, die in sehr kleiner Größe vorliegen müssen und da auch funktionieren müssen.
Wenn man die jetzt größer skalieren würde, würde man wahrscheinlich haben, also gerade, oder ein Farf-Icon oder sowas.
Warum auch immer man das größer skalieren wollen würde. Wenn man das größer skalieren wollen würde, äh, würde, dann sieht das, glaube ich, oder es gibt, mir fallen schon ein paar Sachen ein, die dann nicht gut aussehen, wenn sie irgendwie geglättet werden.
Und da würde man dann vielleicht schon wollen, ähm, dass das, dass das tatsächlich pixellig ist. Finde ich, finde ich tatsächlich cool.
Braucht man wahrscheinlich nicht oft, weil der Standard ja eigentlich das ist, was man in den meisten Fällen haben will. Ähm, aber ja, finde ich, ich…
Es gibt Fälle und es ist gut, dass man es, dass man es einfach beeinflussen kann.
Ja.
Oh Gott, das CSS wird einfach so riesig, so undurchschaubar, was es da ist.
Die armen Menschen, die das jetzt erst Stück für Stück lernen müssen und nicht reingewachsen sind, ne?
Also, äh, ich weiß gar nicht, ob das nicht vielleicht sogar ganz gut ist, weil, äh, ich habe in meinem Hinterkopf nur so viel altes CSS, was kein Mensch mehr so benutzt oder irgendwie so Best Practices mit, wie mache ich Equal-Height-Columns und, äh, wie, wie mache ich, äh, Elemente, die überall Schatten,
haben und runde Ecken, aber ohne, dass ich die entsprechenden CSS eigentlich, also solche Sachen sehr noch in meinem Hinterkopf…
Ja, dann ist vielleicht das nächste, wir hatten es am Mittwoch auch über das ähnliche Thema und dann haben wir auch gesagt, ja, Grid ist so das, wo wir so ein bisschen abgehängt, äh, wurden und das ist jetzt ja auch tatsächlich, also beziehungsweise nicht Grid selbst, sondern Subgrid wäre jetzt unser nächster Punkt.
Genau.
Und das ist ja eine ganz gute Überleitung jetzt.
Möchtest du?
Ich, ich, okay.
Subgrid, kann ich nur ganz, ganz…
Genau, wir sind ja beide voll die Grid-Experten, deswegen erzählen wir euch jetzt, was für ein Subgrid.
Genau, also, Display Grid, ähm, das sollten die meisten kennen, denke ich, äh, Display Flexbox ist, glaube ich, so ein bisschen verbreiteter, weil es früher da war, aber Display Grid ist tatsächlich sehr mächtig, also da kann ich richtig coole Sachen mitmachen und so Bereiche definieren, äh, wo dann die, die Spalten und die Zeilen automatisch den, die, die Höhe annehmen, aber Display Grid verursacht nur, dass direkte Kind-Elemente, das Element mit dieser Property sich an diesem Raster orientieren, das ich da festlege.
Und man hat ja oft heutzutage solche Karten- oder Kachel-Layouts, wo dann nochmal mehrere Elemente drin sind, also eine Headline und ein Bild oben drüber und noch ein Paragraph und vielleicht noch irgendwie ein Call-to-Action-Button und die haben aber vielleicht unterschiedliche Höhen.
Und dann passiert's halt, dass dann der Text ist höher und dann sitzen die Call-to-Action-Buttons, sitzen dann doch nicht gleich, dann muss man anfangen irgendwie, äh, die absolut zu positionieren, dass die am unteren Rand von der Karte sitzen oder so ein Käse und das möchte man natürlich eigentlich nicht.
Am besten wäre das, wenn sich die Kind-Elemente eben auch an diesem Raster ausrichten.
Und das, äh, geht eben mit Subgrid.
Und es gibt noch so ein, so ein anderes Ding, auf was ich da jetzt gestoßen bin, Display Contents.
Kennst du das?
Nee, tatsächlich nicht.
Und da kann man nämlich, ähm, das geht wohl bei, bei Grid und bei Flexbox und das heißt, äh, das Element, auf dem das sitzt, wird nicht berücksichtigt, das wird quasi übersprungen.
Und die Kind-Elemente verhalten sich dann so, als wenn sie eben in diesem Grid mit ausgerichtet werden.
Mhm.
Und da, äh, kann man dann zum Beispiel, also...
Okay, die verhalten sich dann wie echte Grid-Kind-Elemente, obwohl noch ein Element dazwischen ist.
Genau, also du hättest zum Beispiel, äh, du hättest ein UL und, und Li und auf dem Element außenrum, um das UL, ist Display Grid.
Und dann würde sich das komplette UL in das Grid einfügen, du möchtest aber vielleicht die einzelnen, äh, die einzelnen, äh, Listenpunkte haben.
Und dann wird das UL übersprungen und die Listenpunkte hängen dann in dem Raster drin.
Ich möchte mal, ich möchte mal noch jemand, ich möchte mal wissen, ob es eine Person gibt, die alle CSS-Eigenschaften kennt und versteht und, und, äh, einfach so ohne nachzugoogeln auswendig, äh, anwenden kann.
Ach, du gibt's bestimmt so, so Prodigies.
Wahnsinn. Wahnsinn.
Also es ist einfach...
Also es ist im Endeffekt, ähm, lässt sich das beschreiben wie Display None, aber halt so, dass die Kind-Elemente nicht mitverschwinden, sondern nur dieses Rapper-Element wird quasi übersprungen und die Kind-Elemente sind einfach trotzdem da und, äh, ja, passen sich eben auf den Außen an.
Total sinnvoll, genau für diesen Anwendungsfall, den du gerade beschrieben hast, mit dem UL und der IS.
Ja, aber für die UL und der IS, ja, aber das ursprüngliche Problem mit den Kacheln, das löst es nämlich trotzdem nicht.
Ähm, weil ich ja da trotzdem wieder, also ich hab die auf einer Ebene, die Überschrift.
Und die, und die Texte und so, das, also mein Problem ist trotzdem nicht gelöst, dass die sich ja auch anordnen müssen untereinander.
Und da kommt Subgrid ins Spiel.
Und zwar funktioniert das für die Spalten und für die Zeilen oder sogar für beides, äh, was ich fest, äh, was ich definiert hab in dem Grid.
Und das nutzt eben dann die Grid-Tracks von diesem Parent-Element, um dann Unter-Elemente, die weiter verschachtelt sein können, äh, auch an diesen Tracks auszurichten.
Und das mach ich einfach mit Grid-Template-Columns-Doppelpunkt-Subgrid.
Also da, wo ich eigentlich die Columns definieren würde, ne, mit diesem FR und mit dieser Repeat-Funktion in CSS, kennst du vielleicht, auch wenn man jetzt im Grid nicht so drin ist, aber hat man vielleicht mal gesehen.
Und da, wo ich das machen würde, um dann quasi ein neues Grid in diesem Grid zu definieren, was ich ja auch machen kann, also ich kann ja auch verschachtelte Grids haben, nur hat dann halt jedes Child-Element von dem äußeren Grid hat sein eigenes Grid wieder.
Und ich kann die wieder nicht aneinander ausrichten, was ja das eigentliche Ziel ist von der ganzen Geschichte.
Und dann sag ich einfach, okay, Subgrid heißt, übernimm von dem äußeren Grid einfach die Columns oder die Rows.
Das kann beliebig tief drin verschachtelt sein.
Und, ähm, man kann auch Named-Lines benutzen, um eben genau dann zu sagen, okay, welche, welche von diesen Tracks will ich denn überhaupt benutzen, an welchen Linien soll ich mich denn ausrichten?
Und um so halt das Subgrid direkt an einer bestimmten Stelle im Parent-Grid zu positionieren.
Ähm, was man vielleicht auch noch wissen wird sollte, ist, dass die Gap-Werte, also, äh, Flexbox unterstützt jetzt zwischen auch Gap und, und Grid unterstützt Gap, wo ich eben sagen kann, ein EM-Gap zwischen allen Spalten, die ich hab, ähm, die werden auch übernommen.
Also, das heißt, auch da gliedert sich das perfekt ein in das, in das äußere Grid, aber sie lassen sich auch überschreiben.
Also, aus irgendwelchen Gründen könnte ich ja sagen wollen, im inneren Grid will ich ein bisschen weniger Abstände haben, aber das geht natürlich nur nach innen, also nach außen ändert sich, ändert sich drumrum nix.
Aber ich kann dir auch überschreiben, das ist vielleicht ganz, ganz gut zu wissen.
Und, äh, es gibt auch eine Code-Pen-Demo, die läuft allerdings nur in Firefox, weil, das sind jetzt die schlechten Nachrichten, das ist tatsächlich bisher nur in Firefox implementiert.
Das ist echt schade, also auf den, wir hatten nämlich einen Talk genau über Subgrid, unter anderem, ähm, auf den CSS-Days in Amsterdam, als wir da zusammen waren, 2017, das sind jetzt echt vier Jahre schon her, und damals war's wohl, glaub ich, noch nirgends implementiert, und es hieß noch, oh, das wird kommen.
Und ich dachte schon so, boah, geil, wenn man das endlich nutzen kann, das ist ja richtig cool.
Und jetzt sind vier Jahre vergangen, und der Firefox hat's als einziger drin.
Es ist schon schade manchmal, wie langsam das geht.
Aber, wenn man das jetzt, äh, die Implementierung beschleunigen will, zum Beispiel bei Chrome, dann verlinke ich das, äh, Bug-Ticket von Chromium in den Shownotes, und da kann man draufklicken, und muss sich dann kurz halt, äh, registrieren, und kann dann auf ein Sternchen klicken.
Und damit signalisiert man halt so ein bisschen, okay, das ist ein, ein viel gefragtes Feature, und wenn das genug Leute machen, dann rutscht das vielleicht so ein bisschen in der Pipeline nach oben, und, äh, in der Prio.
Und das wäre auch ganz schön, wenn wir dieses Subgrid bald mal hätten.
Es wird einfach Zeit, dass, äh, Computer von alleine programmieren können.
Ja, es sind ja eher so die Prozesse, ne, dieses, äh, machen wir es denn wirklich so, oder müssen wir die Specs nochmal anpassen, und so, und sind andere Sachen wichtiger.
Das entscheidet einfach der Computer, fertig.
Ja, das wird noch kommen, das wird noch kommen.
Die AI entscheidet das, und, äh, wir essen einfach nebenher Toast Hawaii, oder so.
Okay, gut.
Okay.
CSS-Writing-Modes, bitteschön.
Was, Writing-Modes?
Was, wo sind wir denn?
Da weiß ich ja gar nichts drüber, ich bin ja schlecht vorbereitet.
Subgrid, Moment, warte mal.
Subgrid sind wir durch.
Aber jetzt kommen, Exclusions habe ich jetzt als nächstes auf das.
Ach so, die Writing-Modes rausgelöscht.
Ich hab, ne, hab ich eigentlich nicht, ich weiß aber nicht, wo die sind.
Sind irgendwie untergegangen, ja.
Ja, das ist auch eher so eine Geschichte, die wäre eigentlich bei den Fonts oben noch zum Tragen gekommen.
Dann schieben wir sie jetzt einfach schnell rein.
Writing-Modes ist auch eigentlich schnell erklärt.
Ich kann Text von oben nach unten schreiben oder seitwärts gedreht, zum Beispiel.
Und bei seitwärts gedreht denkt man jetzt vielleicht an Transform.
Dann mach ich halt Transform, Rotate, 90 Degree.
Aber Transform dreht ja nur visuell.
Also das Element nimmt ja trotzdem den Platz ein, den es normal hätte, wenn es da stehen würde.
Und dann greift das Transform und wird dann gedreht.
Aber der verbrauchte Platz bleibt, wie er ist.
Und Writing-Mode nimmt halt wirklich den Text und schreibt ihn dann von oben nach unten.
Also es gibt verschiedene Werte, die ich da einsetzen kann.
Entweder sind die Buchstaben untereinander oder der Text wird halt wirklich gedreht.
Entweder von links nach rechts, also quasi von unten nach oben oder andersrum.
Und der Text nimmt halt wirklich diesen Platz ein.
Und auch wenn ich mit dem Mauscursor drüber fahre über den Text, dann dreht sich der.
Also dann ist dieser Textcursor nicht mehr vertikal, sondern der ist dann horizontal.
Ich habe gerade gesehen, dass ich das schon mal eingesetzt habe.
Das wundert mich gerade selbst.
Ich habe gerade gedacht, Mensch, ich habe doch mal irgendwo so Hochkant-Text gemacht.
Und tatsächlich auf meinem Accessibility-Cheat-Sheet, das ist im Prinzip so mein Demo-Projekt für alle möglichen neuen Technologien.
Da habe ich das gemacht, weil da habe ich nämlich links am Rand so zwei Kategorien, Test for Accessibility und Design for Accessibility, was so tatsächlich hochkant geschriebene Text ist.
Und da habe ich tatsächlich Writing-Mode-Vertical-RL habe ich da genommen.
Siehst du, kennst das ja doch.
Ja, ich hätte das jetzt nicht mehr gewusst, dass ich das schon mal eingesetzt habe, aber ich habe mich gerade erinnert.
Okay, so.
Jetzt darfst du aber.
Ja, mit was denn?
Bist du durcheinander jetzt?
CSS-Exclusion habe ich da als nächsten Punkt.
Ich kann dir nur das sagen darüber, was ich jetzt gerade eben gelesen habe.
Also so nebenher, als du erzählt hast.
Also so gut vorbereitet bin ich.
Exclusions.
Und zwar, wenn ich das richtig verstehe, kann ich innerhalb eines Textabsatzes einen Block definieren.
Wo der Text drumherum läuft, also so eine Art wie Float.
Also du definierst es nicht im Textabsatz direkt, also im Paragraph-Element, aber also Textabsätze floaten da außen rum.
Es ist wie so ein Float, aber halt nicht nur links oder rechts.
Genau, also kann auch in der Mitte sein, zumindest ist es bei diesem Beispiel, was ich hier sehe bei CSS-Tricks.
So, jetzt muss ich gerade mal gucken, gibt es da denn eine Demo oder geht es denn schon irgendwo?
Nee, nee, nee, tatsächlich nicht.
Was, E10 und E und Edge?
Ja, ja, genau.
Also in aktiven Browsern geht es nicht.
Es gab aber tatsächlich mit MS-Prefix, gab es das schon im E10, ja.
Und auch im Edge vor Chromium.
Ah, fantastisch. Gut, vergesst also gleich wieder.
Ganz aktuell, aber keiner mehr. Also wir haben tatsächlich da mal einen Rückschritt gemacht im CSS.
Ich habe mal so ein Beispiel gefunden, das habe ich auch verlinkt, kannst du auch im Trello draufklicken,
da ist so ein Pfeilchen nach dem CSS-Tricks-Artikel und dann ist ein Link auf ein GitHub-Issue.
Und da ist so ein Beispiel mit so einer Landkarte oder so einem Flussverlauf quasi und der Text fließt da wirklich so mit rein.
Also da kommen dann noch diese Inner-Edges und Outer-Edges-Geschichte und dann kannst du halt wirklich, wie man es aus dem Print kennt,
Text fließen lassen, um so ein Bild rum. Also wie man das vielleicht auch aus InDesign oder so kennt.
Moment, aber dafür gibt es einen anderen Standard.
Ja, das ist eben das mit diesen...
Dafür gibt es doch diese Shapes, oder?
Ja, aber dazu brauchst du beides. Also um dann zu sagen, dass der Text da aber richtig drum rum fließen soll,
musst du das dann wohl nochmal einsetzen.
Also da fällt mir ein Shape Outside.
Mhm, genau.
Aber das müsste doch ausreichen, oder? Da kann ich auch ein Polygon zeichnen oder sowas.
Es hat aber nochmal irgendwie anders Einfluss auf den Textschluss.
Also so tief bin ich jetzt nicht drin.
Vielleicht geht es dann über mehrere Elemente hinweg und ich weiß nicht genau, ob das Shape Outside kann.
Wobei, wie ist denn das? Browsermäßig unterstützt bin ich gerade mal am schauen.
Ah ja, okay, das können nämlich die aktuellen Browser.
Würde mich jetzt nicht wundern, wenn das quasi so die aktuelle Variante davon...
Das kann natürlich auch sein. Ich meine, das ist CSS Exclusions Module Level 1 von 2015.
Also das kann schon sein, dass das vielleicht tatsächlich komplett ad acta gelegt ist und das schon ausreicht mit diesen Outer Shapes.
Aber ich meine, was gelesen zu haben, dass das mit dem Textschluss nochmal irgendwie da Auswirkungen drauf hat.
Ich schaue gerade mal, ob ich dafür noch irgendwie eine Demo finde, die ein bisschen über das bei MDN hinausgeht, weil...
Ja, ist halt schwierig. Demo, die halt nirgends mehr funktioniert.
Nein, ich meine, aber jetzt mit den Shapes, die funktionieren nämlich.
Ach so.
Aber ich habe jetzt, okay, da gibt es bei CodePen tatsächlich was.
Aber das sieht aus, als wäre das ein Absatz.
Ich will jetzt mal sehen, wie das ist, wenn man da mehrere macht.
Muss ich mal, hacke ich mal kurz schnell.
Na, kein Ü-Element, sondern ein P-Element. Ü wäre aber auch cool.
So. Ah, okay, nee. Geht auch mit mehreren Elementen.
Also ich kann dir die Demo mal kurz schicken, dass du es auch sehen kannst.
Genau, aber das scheint, glaube ich, so der Nachfolger davon zu sein.
Obwohl ich jetzt nicht weiß, ob man das in der Mitte platzieren kann.
Ja, das ist es nämlich, ja, weil das ist ja jetzt auch wieder im Endeffekt, ja, das ist Float Left.
Und um das jetzt in der Mitte zu positionieren, zum Beispiel auf einem Grid,
und ich glaube, gerade im Zusammenspiel mit Grid, dass du es da irgendwie drin positionieren kannst.
Ich glaube, da kommt das eben zum Tragen, mit dieser Exclusion-Geschichte.
Ja, müsste man nochmal genauer gucken.
Dass du das Element da und da positioniert und da fließt eben kein Text, wo das Element positioniert ist.
Und dann kannst du halt zusätzlich mit diesem Shape Outside dann definieren, was da noch die Konturen sind.
Ja, Float Center gibt es halt leider nicht.
Ja, richtig.
Gut, aber da wäre es ...
Eigentlich möchte man das ja prozentual irgendwie auch, also man möchte ja eigentlich das platzieren können, wo man will.
Genau.
Nicht links, rechts, mittels oder vielleicht auch fünf Prozent von links oder keine Ahnung.
Vielleicht würde man das quasi, das weiß ich jetzt nicht, weil wie gesagt, wir haben uns das ja jetzt auch erst angelesen, weil wir eben diese Properties nicht kannten.
Vielleicht kann man es auch theoretisch absolut positionieren oder relativ zum Parent-Element und dann einfach sagen, lass den Text da trotzdem fließen, aber schließ halt dieses Element aus.
Also vielleicht ist es genau so konzipiert.
Aber es gibt halt keine Demos und ich habe ehrlich gesagt mir jetzt nicht den Draft komplett durchgelesen.
Sonst wüsste ich es. Aber das habe ich mir jetzt erspart.
Jo, alles gut.
Alright.
Aspect Ratio.
Habe ich tatsächlich schon mal eingesetzt.
Ja, ich mittlerweile auch, ja, seit wir die Umfragen gemacht haben.
Ich glaube, wir wussten auch beide so grob um was es geht, nur so die Details nicht so wirklich.
Ich wusste zum Beispiel nicht, ich habe mir die Folge noch mal angehört und wusste dann nicht, ist es jetzt nur für Videos zum Beispiel, aber es ist tatsächlich für alle Elemente.
Genau, ich habe es auch, ich habe es auch genau für sowas angehört.
Also alle Elemente nicht alle außer Inline oder Table, aber alle anderen.
Ah, ja.
Also ich habe das tatsächlich für so ein, was war das noch?
Ah, genau, ein Header, ein Header von, also kann man sich so vorstellen, wie bei Facebook oder bei Twitter diese große Grafik, die man da reinladen kann.
Ich weiß gar nicht, wie sich das nennt, Titelbild oder so, nicht, nicht der Avatar oder das Profilbild, sondern so ein großes, so ein Titelbild.
Und da möchte man ja eigentlich, dass das immer die gleiche Aspect Ratio hat, damit das überall auf allen Größen irgendwie passt.
Und da ist es dann tatsächlich interessant, wenn man jetzt vielleicht kein Bild reingeladen hat, wie behält dieses Ding die richtige Größe?
Wenn jetzt vielleicht gar nichts drin ist, was irgendwie die Größe definieren könnte, wenn ich vielleicht kein Bild reingeladen habe, weil noch niemand was hochgeladen hat oder so.
Und dafür ist es tatsächlich interessant, genau für so einen Fall habe ich das angewendet.
Und das ist echt, das funktioniert genauso, wie man sich das wünschen würde.
Aspect Ratio und dann schreibe ich Zahl, Slash Zahl, glaube ich, wenn ich das noch richtig weiß.
Also 16 zu 9 wäre dann wirklich 16 Slash 9.
Und das ist meiner Meinung nach genauso, wie das sein sollte.
Und es funktioniert auch genauso, wie man es erwarten würde.
Genau, also man legt einen Wert fest und der andere ist Auto.
Und entsprechend wird es, ja, beziehungsweise bei Block Elementen brauche ich es gar nicht festlegen, weil es ist die Breite einfach immer 100 Prozent von dem, was es einnehmen kann.
Und der Rest passiert automatisch.
Ja, das ist sehr praktisch.
Und leider kein Safari aktuell noch.
Sonst könnte man es tatsächlich, also es ist wirklich sehr sinnvoll, zum Beispiel auch bei solchen Kartengeschichten, so ein bisschen kann ich dem Problem, was wir da vorhin geschildert haben, entgegenwirken.
Wenn ich zum Beispiel sicherstellen kann, dass alle Bilder, die da drin landen in dieser Kachel, dass die einfach die richtige Aspect Ratio haben.
Und wenn die dann immer die volle Breite einnehmen von seiner Kachel, dann weiß ich, okay, die Höhe wird entsprechend auch gesetzt.
Und dann kann ich ja mit Background Size Cover zum Beispiel oder Contain, kann ich dann entsprechend das Bild aufspannen lassen in diesem Bereich.
Wow, jetzt wird es interessant.
Das ist nämlich jetzt was, was ich wirklich immer noch nicht kenne und mir auch noch nicht angeschaut habe.
Backdrop Filter.
Doch, das hast du doch, du hast doch schon was damit gebaut.
Habe ich?
Sogar.
Oder hast du es mit was anderem gebaut?
Dieser Milchglaseffekt, du hast doch damals in der Demo gebaut.
Milchglaseffekt von ...
Ach doch, du hast recht.
Das müsste der Backdrop Filter gewesen sein.
Das ist das meine Güte.
Das bist du nicht wie sonst.
Bin ich vergesslich.
Ich glaube, du hast vollkommen recht.
Ja, ich nehme alles zurück und behaupte das Gegenteil.
Vielleicht findest du die Demo.
Ich erzähle mal kurz, genau, also zum Beispiel so einen Milchglaseffekt kann man, den machen wir ja auch oft bei, bei, auf Apple Designs dargestellt wird.
Also wie man das halt einfach kennt, so dieses, es ist so ein bisschen geblurrt im Hintergrund und dann macht man so eine halbtransparente Hintergrundfarbe drauf und dann hat man so diesen, ja, wie so solche Milchglastüren eben im Effekt.
Es gibt aber nicht nur das, also mit Blur würde man das machen, Backdrop Filter, Blur und dann kann man eben fünf Pixel oder so angeben.
Es gibt aber auch Brightness, Contrast, Drop Shadow, Grayscale, U-Rotate, Invert, Opacity, Saturate und Sepia.
Man sieht es tatsächlich auf Apple.com, wenn man zum Beispiel ein MacBook kaufen möchte, hat man oben so eine Milchglaszeile, wo dann irgendwie der Kaufen-Link drin ist.
Ich guck grad nochmal, ob das wirklich so gemacht ist, nicht, dass ich, dass ich da jetzt irgendwie falsch...
Ja, müsste aber, das müsste.
Wo ist der?
Hey, ich seh's gerade nicht, Rapper.
Backdrop Filter, Saturate, ist da zum Beispiel drin, äh, und in dem Rapper, also das sind mehrere, genau, Saturate 1,8, äh, und Blur 20 Pixel.
Genau, und bei uns, ähm, haben wir das, glaub ich, ja auch, ich find grad aber das richtige Element nicht, oder ich bin grad blind.
Genau, und das bezieht sich halt tatsächlich, ähm, nicht auf das, also da muss kein Hintergrundbild festgelegt sein, auf dem Element, auf das sich das dann bezieht, sondern wirklich auf das, was durchscheint, also was der Browser, der zerlegt ja quasi die, die, die Bilder dann, je nach Element, um die zu rendern, in, in einzelne Teilbereiche, und der Teil, der hinten dran durchscheint durch dieses Element, der wird dann eben geblurrt.
Cool.
Und ich hab grad was ganz anderes im Kopf gehabt, als ich das, als ich mir das nochmal angeschaut hab, aber jetzt, wo ich, äh, wo ich mir nochmal die genauen Beispiele anguck, äh, du hast vollkommen recht.
Ich hab, ich kann mal sagen, an was ich erst gedacht hab, ich hab grad tatsächlich gedacht an, ähm, das Dialoguelement, das ja auch einen Backdrop kriegen kann, ähm, automatisch.
Und dass das irgendwie, dass man den irgendwie damit einstellen kann, aber da lieg ich falsch, das ist, das muss was anderes sein, das weiß ich jetzt aber grad nicht auswendig.
Ich glaube, darauf kann man auch Einfluss nehmen, wie das Ding aussieht, das ist aber wahrscheinlich deine Pseudoklasse, würde ich tippen.
Ähm, was ein bisschen schade ist, ist, dass bei Firefox noch hinter einem Flag ist, und zwar schon seit Firefox 70, jetzt sind wir bei 89, und auch in der 90er und 91er Version wird sich da wohl nichts dran ändern.
Also die, die, ja, testen da wohl noch ziemlich lange aus, ob's denn tatsächlich so gut funktioniert und performant ist, bevor sie's veröffentlichen.
Und in Safari braucht man noch ein Prefix, aber Chrome und entsprechend Edge funktioniert schon so.
Also kurzer Nachtrag noch, äh, zum Dialoguelement und Backdrop ist tatsächlich eine Pseudoklasse, ähm, beziehungsweise in dem Fall ein Pseudoelement, würde ich sagen, Doppelpunkt, Doppelpunkt.
Doppelpunkt, gibt es da, aber das, aber das ist, äh, noch, das ist nicht, also generell, dieses Dialoguelement ist nicht so gut unterstützt, und mit Firefox gibt's das gar nicht.
Ähm, ja, das ist tatsächlich eine gute Idee, aber offenbar kann man sich da nicht drauf einigen, das irgendwie mal vernünftig umzusetzen.
Genau, so, okay.
So, und jetzt, jetzt weiß ich aber, du hast eine Demo dazu gebaut.
Ja, mit, äh, Dunkelgrau und Hotpink.
Seh ich die auch? Hast du die reingehängt?
Bitte?
Hast du die reingehängt? Seh ich die, äh, Overscroll?
Äh, ja, ja.
Ja, das ist, das ist der zweite Ding.
Und zwar geht es jetzt um Overscroll-Behavior.
Und, äh, da hab ich heute schon ein bisschen, ich hab, ich wollte eigentlich noch viel mehr Demos bauen für alle möglichen Sachen, die wir hier in dieser Liste drin haben, und bin da dann gleich schon hängen geblieben.
Oh, es ist sehr dunkel bei dir gerade, Konstantin, ich seh dich auch noch.
Ja, weil, weil, äh, warte mal, ich mach mal nicht. Es ist dunkel geworden, weil, weil eben CodePen halt, äh, Dark Mode hat.
Es ist fast wie ein Zombie, ein Zombie-Film, es wurde immer dunkler und dunkler.
Konstantin, jetzt hab ich ihn fast gerade gar nicht mehr gesehen.
Ähm, okay.
Also, Overscroll-Behavior.
Und zwar geht es da um das Verhalten des Browsers, was man gerade so von, von Mobilgeräten her kennt.
Ich glaube, ähm, Apple hat das irgendwann mal, dieses Verhalten, äh, introduced, wahrscheinlich mit dem iPhone, das weiß ich nicht.
Ich hab, ich bin kein iPhone-Besitzer und war ich noch nie.
Ich kenn's aber auf jeden Fall schon sehr früh vom iPad im Browser.
Und zwar dieses Verhalten, wenn man ans Ende einer Seite scrollt, egal ob oben oder unten, dass man, weil man zieht die Seite ja mit dem Finger,
dass man noch ein Stück weiter ziehen kann, ähm, als es eigentlich, als die Seite eigentlich hoch ist.
Und dann bouncest du zurück, ne?
Und das bouncest du zurück. Ich kann quasi hinter die Seite gucken.
Ähm, und ich glaube, das sah auch, ähm, in dem, auf dem iPad, die hatten damals auch, da war dann kein Weiß dahinter, glaube ich,
sondern irgendwie so ein komisches, so ein komisches graues Muster.
Man hatte so das Gefühl, man kann hinter das Internet oder in das Internet reingucken.
Ähm, so, äh, darum soll es gehen.
Aber nicht nur das, hab ich dann jetzt auch gelernt bei diesem Overscroll-Behavior.
Es ist nicht nur das, ähm, sondern, äh, jetzt hab ich natürlich die MDN-Demo irgendwo noch offen, aber ich weiß ja, doch, da hab ich's gefunden.
Ähm, sondern es geht auch darum, ob, ähm, der Hintergrund, wenn ich jetzt irgendwie, wenn ich jetzt, äh, zum Beispiel ein Diff habe, das ich scrollen kann,
oder irgendein Element, das ich, das ich scrollen kann, ähm, ob, wenn ich da ans Ende gescrollt hab, dann irgendwann das darunterliegende Element anfängt zu scrollen, also der Body beispielsweise.
Also Scroll-Chaining nennt sich das, der Fachbegriff.
Scroll, genau, Scroll-Chaining in dem Fall, ob, ob das quasi weiter, äh, durchgereicht wird oder nicht, weil das kann nämlich in vielen Fällen...
Also, wenn ich zum Beispiel so ein, wenn ich so ein Overlay hab, ja, irgendwie Terms and Conditions und ich kann da durchscrollen,
und wenn ich da dann anfange und ich bin am Ende, dann würde die Seite, die da hinten dran liegt, so ausgegraut, vielleicht würde dann auch mitscrollen.
Genau, und in, in vielen Fällen, ähm, will man das, glaub ich, nicht, dass dann der Hintergrund oder dass dann der Body noch mitscrollt, wenn man irgendwie was da drin hat.
Also typischerweise würde ich jetzt, mir fällt jetzt grad gar nichts ein, wo man das haben will, äh, muss ich ehrlich sagen.
Ja, vielleicht, wenn's kein Overlay ist, aber macht's das dann überhaupt? Das weiß ich jetzt gar nicht.
Ist es nur, wenn tatsächlich das als Overlay irgendwie mit Position absolut ist, oder?
Das ist generell, das ist, das ist generell, egal, ob das ein Overlay ist.
Ja gut, vielleicht tatsächlich eine Seite, wo ich die Terms and Conditions hab und dann scrolle ich und bin am Ende und will dann, dass die Seite hoch, weiter hochgezogen werden kann, damit ich die Checkbox aktivieren kann, oder so.
Also, ich hab hier eine Demo gebaut und es war gar nicht so einfach, die zu testen, weil, äh, ich erst mal gar nicht wusste, wo kann ich denn das jetzt überhaupt sehen?
Es geht nämlich natürlich nur in Mobile-Browsern, ähm, beziehungsweise man kann, ähm, wenn man, jetzt muss ich jetzt grad nochmal gucken, bevor ich jetzt was Falsches sag.
Ich hab hier jetzt in meinem Chrome, ähm, und hab den, den Mobile-Modus offen.
Ähm, ähm, äh, ja genau, da kann man das.
Sieht man's auch? Also ich hab's jetzt extra mal auf dem Handy aufgemacht, äh, Android.
Ah, nee.
Warte mal.
Doch, doch, man kann, man kann es, man kann zumindest ein Teil davon, ein Teil davon kann man auch da sehen.
Ähm, ich muss grad mal gucken, ob das im Normal-Modus auch geht.
Ah ja genau, dafür brauch ich nicht mal den Mobile-Modus.
Also um dieses Scroll-Chaining in Action zu sehen, dafür brauch ich den Mobile-Modus nicht auf dieser Demo.
Ich hab da mehrere Boxen auf der Seite, ähm, angezeigt.
Und, ähm, man kann die scrollen.
Und, äh, wenn man die ersten beiden scrollen möchte, ähm, dann, dann scrollt die Seite, auch wenn man am Ende ist, unten drunter nicht mit.
Ähm, wenn man die dritte Box scrollt, dann scrollt die Seite unten drunter dann weg, wenn man am Ende angelangt ist.
Und ich weiß nicht, tatsächlich, eigentlich möchte ich, dass das immer das Standardverhalten sich wissen.
Also ich kann's auch auf dem Android tatsächlich nachvollziehen, ja.
Genau, ähm, also es geht auch im, im Desktop-Chrome, ähm, also dieses, dieses Scroll-Verhalten, das kann man im Desktop-Chrome auch nachvollziehen, ganz ohne Mobile-Modus.
Ähm, was damit aber auch gemacht wird, ist tatsächlich, dass man Einfluss darauf nehmen kann,
ob ich eben die Seite über ihren, ihren eigenen Rand hinaus, äh, bewegen kann oder eben nicht.
Äh, weil, äh, das, ich glaube, das kam dann irgendwann auf, als, ähm, dieses, äh, Scroll-to-Refresh, ähm, aufkam in verschiedenen Apps.
Bei Twitter gab's das zum Beispiel, dass man irgendwie so, äh, bis an, ganz nach oben scrollt und dann noch ein Stück weiter und dann, ähm, kommt so eine kleine Animation und dann refresht der Stream.
Und, äh, ich weiß gar nicht, ob es das, gibt's, glaub ich, an verschiedenen Stellen.
Irgendwie Google hatte das auch bei verschiedenen Tools mal und so.
Ähm, genau.
Und man kann mit, ähm, Overscroll-Behavior-None, äh, das zum Beispiel auch ausschalten.
Dann kommt da gar kein Effekt mehr.
Ich hab's sogar gesehen, äh, als ich's ausprobiert hab, ähm, es gibt ja nicht nur den Effekt, dass, ähm, die Seite weiter scrollt, als sie eigentlich könnte,
sondern auch, dass dann irgendwie so ein Schatten angezeigt wird, der dann irgendwie oben ist, der dann so zeigt, okay, hier, hier hört's jetzt auf, es geht hier jetzt nicht weiter.
Und auch der wurde mir dann nicht mehr angezeigt.
Das heißt, es gibt dann gar keinen Effekt, wenn ich an den Rand komme, ähm, auf Devices, die normalerweise da einen Effekt anzeigen würden.
Also, ich hab dafür Blut und Wasser geschwitzt für diese Demo, also müsst ihr euch unbedingt anschauen.
Hast du die, die, die Keywords jetzt schon genannt, die es da gibt?
Ähm, none, äh, ist wirklich alles ausschalten.
Also, sowohl.
Kein Chaining und keine Effekte.
Und auch kein Effekt, ähm, dann gibt es, äh, Contain, das ist, äh, der Effekt bleibt noch da, aber das Chaining ist weg, wenn ich's richtig verstanden hab.
Und dann gibt's noch, äh, ich glaub, Normal oder so.
Auto.
Auto ist halt, klar, der Standard.
Alles normal, beides, also Chaining und Effekt, ja.
Gut.
Ja.
So, jetzt bist du wieder dran.
Gut, äh, Content Visibility ist das Nächste.
Ähm, und zwar versuchen Browser ja schon, den Inhalt zu optimieren.
Beim Rendern, sodass in dem, im Paint dann nur das landet, was auch tatsächlich initial zu sehen ist.
Also, dass Sachen, die irgendwie below the fold sind, dass die gar nicht, möglichst gar nicht irgendwie berücksichtigt werden müssen.
Allerdings muss dafür trotzdem vorher das komplette Layout erstellt werden.
Ja, weil so Dinge, äh, per CSS können ja verschoben werden von ganz unten, von am Ende der Seite, ganz unten im DOM, äh, per Position fixed, absolut, wie auch immer, nach ganz oben.
Und dann sind die trotzdem da und dann müssen die auch irgendwie im Paint natürlich landen.
Ähm, an der Stelle auch, äh, nochmal eingehakt, Folge Nummer 6.
Da haben wir, äh, im Thema drin, also das ist nicht gesondert behandelt, aber da haben wir auch verlinkt in den Shownotes, äh, wie rendert der Browser eine Seite.
Also, da ist so ein Video verlinkt, wo man dann sieht, was ist eben genau dieses, was ist Layout, was ist, äh, Paint, was ist Rendering und so weiter.
Ähm, das ist ganz interessant, das mal zu sehen und dann versteht man auch eher, was, was, was jetzt so gemeint ist.
Ähm, und mit Content Visibility Auto kann ich dem Browser eben die Anweisung geben, den Inhalt dieses Elements, auf dem das gesetzt ist, ähm, so lange zu ignorieren, bis das Element selbst im Viewport landet.
Das heißt, ähm, es ist quasi wie, wie Display None, also ignoriere es einfach komplett und erst wenn es in den, in den Viewport reinkommt, dann berücksichtige das.
Äh, das heißt natürlich, ich darf da drin dann halt nicht solche Sachen machen, wie irgendwas umzupositionieren und nach außen, äh, irgendwie overflowen zu lassen.
Das kann ich dann natürlich nicht machen, also ich muss schon wissen, dieses Element unten, keine Ahnung, irgendwie ein Build Slider, da weiß ich, der rutscht definitiv nicht nach oben.
Und mein Use-Bereich bleibt auch immer da unten und dann kann ich eben sagen, Content Visibility Auto und dann wird das am Anfang, das, das wird also gar nicht, wird kein Layout dafür erstellt, ähm, und entsprechend kann der Browser da einiges an Zeit sparen.
Und das Problem dabei ist, dass die Elemente dann aber erstmal eine Höhe von Null haben, weil klar, wenn ich, wenn ich das ignoriere, wenn mich nicht interessiert, was da drin ist,
dann weiß ich nicht, wie hoch wird das am Schluss und das heißt, die haben standardmäßig eine Höhe von Null.
Wenn ich jetzt aber nach unten scrolle, also ich habe jetzt zum Beispiel mehrere Sections untereinander, eben, wie gesagt, so ein Image Slider und, und ein Use-Bereich und keine Ahnung was.
Und die haben aber alle eine Höhe von Null und ich bin jetzt am Ende angekommen von dem, was ich initial im Sichtbaren Bereich habe und jetzt kommt das, äh, above the fold, was ich da unten drunter habe.
Und da die alle aber eine Höhe von Null haben, werden die jetzt doch alle gleichzeitig, äh, berechnet und das geht natürlich dann wieder in die Performance.
Das heißt, ich muss ja irgendwie sagen, es nimmt ungefähr so viel Platz ein und das kann ich machen mit Contain minus Intrinsic minus Size.
Und da gebe ich dann die Width und die Height an, also zum Beispiel sage ich ein Pixel, 5000 Pixel, äh, ich muss halt ungefähr so einen groben Wert haben, wie viel nimmt das ungefähr in der Höhe ein.
Und das wird dann als Fallback-Wert genommen, um eben zu gucken, wenn ich jetzt nach unten scrolle, aha, okay, das erste Element hat diese Intrinsic Size von 5000 Pixel in der Höhe, dann muss ich das unten drunter erstmal noch nicht berücksichtigen, sondern ich gucke erstmal, was habe ich denn für Kind-Elemente in diesem Element drin, erstelle dafür das Layout und am Ende den Paint.
Und das sind also quasi Fallback-Werte, aber wichtig, Fallback-Werte des Contents, also ein Block-Element ist trotzdem noch vollbreit.
Wenn das jetzt auf 100% ist und hat aber Intrinsic Size, die Intrinsic Size, die gilt für alles, was da drin an Inhalten ist.
Und beim tatsächlichen Layout wird das dann aber auch komplett ignoriert.
Die einzige Auswirkung, die das negativ haben kann, ist oft die Scrollbar.
Das heißt, wenn ich jetzt runterscrolle und die Scrollbar hat eine gewisse Höhe, ne, die wird ja entsprechend, wie viel Content ist da zu erwarten, wird die ja kleiner, dieser Balken, den ich anfassen kann, der Anfasser.
Und wenn da halt jetzt irgendwie 5000 Pixel drinstehen, aber am Schluss ist das Ding halt nur 300 Pixel groß, dann kann es passieren, dass dieser Anfasser dann größer springt, ne, da habe ich dann im Scrollen sehe ich dann, dass da sonst so ein Spring drin ist.
Aber ich denke, das ist verkraftbar für das, was man da sparen kann.
Ich habe da auch ein Video verlinkt von HTTP 203, Slashing Layout Cost with Content Visibility.
Und da war das Beispiel eben die Seite von so einer HTML-Spezifikation und die sind ja teilweise sehr, sehr lang.
Und da war irgendwie, ich glaube, von 5 Sekunden auf 400 Millisekunden ist das geschrumpft.
Einfach nur dadurch, dass gesagt wurde, okay, die Sections da unten, ignorier die, wir haben hier nichts mit irgendwelchen lustigen Floats bzw. Positionierungen und sowas.
Und dass da irgendwas rauswobbelt und dementsprechend bei so statischem Content macht das tatsächlich echt einen Unterschied.
Wow.
Und das bringt uns auch schon direkt zum nächsten Punkt.
Soll ich auch weitermachen gleich, wenn ich schon so drin bin.
Da kann ich nur dazu sagen, Content Visibility, Containment.
Genau, CSS Containment war so der nächste Punkt.
Und da hatte ich, also wir haben das jetzt gruppiert.
Normalerweise war das Content Visibility, war weiter oben bei den Properties und jetzt kam eben CSS Containment.
Und als ich dann gelesen habe, um was es da geht, dachte ich so, hä, das ist ja eigentlich das gleiche wie Content Visibility.
Und Content Visibility, die Property, ist tatsächlich ein Teil von dieser CSS Containment Spezifikation.
Und das Contain Property aus der CSS Containment Spezifikation, um das jetzt geht, das erlaubt einfach nochmal eine feinere Einstellung, was ich dann optimieren will.
Also ein paar Beispiele, was es da für Keywords gibt.
Size, das Element kann in der Größe verändert werden, ohne die Größen der Kind-Elemente berücksichtigen zu müssen.
Layout sagt, dass nichts außerhalb des Elementes das interne Layout in diesem Element beeinflussen kann und umgekehrt eben auch nicht.
Also eben solche Geschichten wie, da guckt was raus, ich habe einen Overflow und das wird irgendwie anders positioniert.
Das Paint Keyword sagt, dass Kind-Elemente nicht außerhalb der Bounce des Elements dargestellt werden, also dass die gar nicht gerendert werden.
Das heißt, ich habe quasi implizit einen Overflow hidden.
Die werden also geklippt und zwar außerhalb der Sicht beim Bereich, sprich, das ist dann Border Box.
Die Border Box ist das Äußere.
Genau, da werden die dann geklippt und gar nicht weiter berücksichtigt.
Und ich kann aber auch mehrere von diesen Keywords hintereinander angeben.
Also kannst du zum Beispiel sagen, Contain, Style, Layout, Paint.
Da werden all diese Optimierungen auf einmal angewendet.
Und da ist was ganz, ganz cooles.
Wenn ich das zusammen benutze mit dem Content Visibility hidden, dann kann ich das so als Toggle, also wenn ich was normalerweise ausblende und einblende, mache ich ja Display None und Display Block zum Beispiel.
Wenn ich aber Content Visibility hidden nehme und das mit diesem Contain Keyword zusammen mit den Optimierungen verbinde, dann habe ich also krasse Performance-Verbesserungen beim Ein- und Ausblenden, weil ich diesen Layout-Shift nicht habe.
Also wenn ich das mit Display None mache, dann wird quasi jedes Mal wieder aufs Neue das Layout berechnet und geguckt, wie muss ich jetzt die anderen Elemente verschieben, damit das wieder richtig dargestellt wird.
Und dieser Render-State, der bleibt, der wird aber beibehalten aufgrund dieser Optimierungen, wenn ich diese Kombi aus Content Visibility hidden und dem Contain Property habe.
Und das ist tatsächlich was, was ich in Zukunft versuchen werde einzusetzen, wenn ich solche Geschichten habe, wie das da irgendwas ausklappbar ist oder aus irgendwelchen anderen Gründen ein- und ausgeblendet werden muss.
Und das fand ich echt ganz cool.
Ich glaube, aber da geht es in erster Linie um so richtig riesige Seiten mit riesig viel DOM-Elementen.
Ja, so sagt das nicht. Also wenn ich mir jetzt unsere Firmenseite angucke zum Beispiel, da weiß ich schon genau, wo ich da was optimieren kann.
Und wie viel Impact das jetzt hat, kann ich noch nicht sagen, weil ich habe es noch nicht gemacht, aber ich habe mir das jetzt auf jeden Fall vorgenommen, das einzusetzen.
Und ich meine, das muss gar nicht so viel sein, aber wenn ich halt irgendwie riesige Sections habe und ich habe, also keine Ahnung, ich habe fünf Sections, das ist jetzt gar nicht so viel.
Also ich habe vielleicht wirklich, ich habe ein Hero-Build, ich habe irgendwie Beschreibungstext, ich habe unsere News, ich habe unten das Footer noch unten.
Und das sind jetzt fünf Elemente, die berechnet werden und ich weiß aber die unteren, also dieser Hero ist immer komplett vollflächig und die anderen vier, die brauche ich am Anfang gar nicht.
Dann habe ich schon mal ein Fünftel an Elementen, also die sind auch etwa gleich groß, die Sections, dann habe ich schon mal ein Fünftel auf jeden Fall gespart.
Okay, aber das ist Visibility und nicht Containment.
Nee, das ist jetzt generell die Optimierungen mit dieser Containment-Geschichte. Also die sind ja tatsächlich trotzdem visible. Also in dem Fall will ich ja gar nichts aus- und einblenden.
Und du würdest auch, du weißt auch, dass da zum Beispiel nichts drüber raussteht?
Genau, weil ich weiß, der Footer, der ist einfach da in eine bestimmte Höhe, da ist zwar ein Hintergrundbild positioniert, aber das ist eh mit der Overflow hidden, also ich weiß, da wandert nichts nach oben von unten aus der Seite.
Also eigentlich könnte man das ja als Standard setzen für die meisten Elemente und eigentlich nur die ausnehmen, die eben Ausnahmen davon sind, weil die wenigsten Elemente ...
Genau, also in dem Fall weiß ich zum Beispiel, das sind tatsächlich Main-Bereiche und da sind Sections drin und in dem Fall würde ich tatsächlich alle Sections, ich würde einfach sagen, also Main, direkt das Child-Element-Section, setze das auf Content-Visibility-Hidden.
Oder eben halt irgendwie Contain, je nachdem, was ich da noch für Optimierungen setzen kann.
Ja, ja.
Und das Erste davon ist ja eh nicht betroffen, weil wenn das im sichtbaren Bereich ist, dann macht das das Layout ja sowieso.
Ja.
Ansonsten könnte ich natürlich sagen, okay, alle, aber not first child, wenn ich das explizit ausklammern will.
Aber im Endeffekt, der Browser kümmert sich ja drum, wenn das im sichtbaren Bereich ist, dann berechnet das so oder so das Layout.
Not first child, wir leben in der Zukunft, das ist einfach krass.
Also das fand ich echt cool, dass man damit relativ wenig, was man setzen muss, das ist so wie dieses Image-Loading gleich Lazy, wo wir es ja auch schon öfter drüber hatten.
Das ist so was Einfaches und es macht aber wirklich halt einen krassen Impact.
Muss ich mal ausprobieren, habe ich tatsächlich ...
Also ich werde es wirklich die Tage jetzt mal, vielleicht kann ich nächste Folge schon was dazu sagen in der Retro, ich werde es mal ausprobieren und bin mal echt gespannt, bevor wir die Werte notieren und dann schauen wir mal.
Zum Thema Ausprobieren habe ich noch was, das hat jetzt damit gar nichts zu tun, nur ein ganz kleiner Einwurf.
Wir haben im Stream, sind wir mehrfach angesprochen worden auf Tailwind und ich habe jetzt tatsächlich, glaube ich, ein Projekt gefunden, wo ich das mal ausprobieren werde.
Also Tailwind CSS, wer es nicht kennt, ein Utility-first CSS-Framework.
Ich habe noch nicht so richtig ganz verstanden, was da alles mit drin ist und das bringt ja schon so eine Art Layout auch mit, das sogar ganz nett aussieht.
So ein bisschen Bootstrap, ein bisschen schicker vielleicht sogar. Bin gespannt. Also ich habe jetzt auf jeden Fall mein Projekt gefunden, weil ich wollte es unbedingt mal ausprobieren.
Cool.
Kannst du ja im nächsten Stream was zeigen.
Ja, genau, genau. Ich weiß ganz genau, das ist so ein Projekt, was ich schon seit Jahren vor mir herschiebe. Also die Wahrscheinlichkeit, dass ich es letzten Endes angehe, ich weiß nicht, wie hoch die ist.
Ich versuche jetzt mir selbst ein bisschen Druck zu machen, indem ich das jetzt hier mal sage im Podcast und dann vielleicht Leute sagen, ja, was hast du denn jetzt mit Tailwind gebaut?
Und mal sehen.
Okay, ich hau dich drauf an.
Ja, genau, mach mal.
Okay, sind wir fertig mit Containwind?
Ja.
Gut.
Dann kommt jetzt noch Touch-Action und dafür habe ich auch eine Demo gebaut.
Eine kleine, das ist sowas, was heute meinen ganzen Tag aufgefressen hat, diese zwei Demos. Nein, das stimmt nicht.
Aber den Abend der Vorbereitung. Ich habe gedacht, ich komme da viel schneller durch. Deswegen hat jetzt der Konstantin so ein paar Themen für sich gehabt, die ich mir jetzt nicht angeschaut habe, weil ich irgendwie an diesen blöden Demos hängen geblieben bin.
Weil ich habe immer so das Gefühl, ich verstehe etwas nur dann in der Gänze, wenn ich es mal einmal komplett durchgespielt habe.
Und deswegen, da muss ich mir einmal die Hände schmutzig machen. Mir reicht da nicht, mir reicht da nicht Specklesen oder so. Ich muss es einmal angefühlt haben.
Dann kommt man nämlich auf ganz viele merkwürdige Probleme, wie ich vorhin schon gesagt habe bei dem Overscroll Behavior, dass das dann sehr schwer zu testen ist überhaupt oder was bedeutet es denn eigentlich und so.
Da merkt man dann die Feinheiten.
Naja, bei Touch Action ging das ein bisschen schneller.
Touch Action kann ich, es ist eine Property, die ich auf ein beliebiges Element setzen kann und die definiert, welche Touch-Funktionen oder welche Touch-Gesten darauf noch funktionieren.
Standardmäßig alle, standardmäßig Auto, wenn ich jetzt irgendwie eine Seite auf dem Handy aufmache, kann ich alle möglichen Touch-Gesten darauf ausführen, die standardmäßig der Browser eben anbietet.
Also da geht es nämlich genau um das, was macht der Browser in dem Fall.
Normalerweise, wenn ich irgendwelche, wenn ich jetzt zum Beispiel einfach nur den Finger von oben nach unten bewege oder von unten nach oben oder Pinch, Zoom, dann übernimmt ja der Browser.
Das ist ja in dem Fall, der Browser bestimmt ja dann, was passiert mit der Anzeige von der Seite.
Ich kann es aber halt auch ausschalten.
Ich kann zum Beispiel …
Und das ist voll fies, weil auf dem Handy, die Demo kann ich kaum bedienen, weil es schwierig ist zu scrollen.
Du hast da links noch so einen kleinen Bereich gelassen, da kann man dann noch dran vorbeiscrollen.
Warte mal, ich kann das, warte mal, das kann ich gerade ganz schnell nochmal anpassen, wenn du das sagst, dann machen wir da noch ein bisschen mehr Platz, dass man da noch scrollen kann.
Warte mal, dann machen wir mal auf dem Body, das ist mal jetzt gerade live, machen wir mal auf dem Body vielleicht ein bisschen größeres Padding, machen wir mal 5 Rem.
Dann sollte da ein bisschen mehr Platz sein, dass man da noch scrollen kann.
Guck mal, ob es jetzt besser ist.
Kannst du nochmal neu laden.
Ja, ja.
So, genau.
Was passiert nämlich?
Also, wie gesagt, standardmäßig ist Auto, alle Touchgesten, also etwas hin und her schieben und zoomen und was es noch so gibt.
Browser, manche Browser unterstützen zum Beispiel auch so ein Doppeltab zum Zoomen.
Genau, standardmäßig macht der Browser das einfach alles, aber mit TouchAction kann ich da bestimmte Sachen definieren, die dann eingeschlossen werden und alles andere geht nicht mehr.
Also, ich kann zum Beispiel auch alles ausschalten, TouchAction None, dann kann ich die Seite nicht mal mehr scrollen.
Dann geht wirklich gar nichts mehr.
Und deswegen habe ich jetzt in dieser Demo, die ich da gebaut habe, auch einzelne Boxen gemacht, in denen jeweils dann bestimmte Dinge ausgeschaltet sind.
Also, zum Beispiel die erste Box, da ist wirklich alles ausgeschaltet, die kann ich nicht mal mehr scrollen mit dem Finger.
Ich glaube, das ist in erster Linie für den Fall, wenn ich wirklich das komplette Touchverhalten irgendwie mit JavaScript nachbilden möchte im Browser.
Sodass der Browser da gar nicht irgendwie interferieren kann, sondern ich schalte halt alles aus und sage, ich will alles selbst machen, warum auch immer.
Ich verstehe nicht genau, warum man das machen möchte, aber vielleicht haben wir jetzt so eine App.
Also, dass du es nicht auf das komplette Dokument halt legst, aber du hast irgendwie so einen Dialog und im Hintergrund soll halt gar nichts irgendwie scrollbar sein oder so.
Ich habe mir gerade überlegt, wenn man jetzt zum Beispiel eine App baut, eine Grafik-App und da komplett selbst die Kontrolle drüber haben möchte, was da wie passiert, wenn ich den Finger wie bewege.
Dann kann es schon vielleicht für einen Bereich sinnvoll sein, dass ich das komplett ausschalte, weil ich möchte hier so App-Layout haben, so im Sinne von auch, ich habe einen festen Bereich und da kannst du eigentlich gar nichts drin scrollen, außer du kannst irgendwie den Hintergrund hin und her schieben.
Keine Ahnung, was das sein kann.
Oder ich möchte, dass, wenn ich irgendwo lang drauf tappe und dann das Element quasi verschiebe, dass dann nichts anders sonst gescrollt wird.
Also, es gibt bestimmt Anwendungsfälle, ja.
Es gibt Anwendungsfälle. Ich würde halt sagen, das ist wahrscheinlich am ehesten in einer richtigen Web-App zu finden.
Und ja, das, was mir jetzt halt einfällt, wäre vielleicht irgendwie eine Grafikgeschichte.
Also, alles ausschalten.
Es gibt aber noch andere Keywords, wie zum Beispiel Pinch minus Zoom.
Dann kann ich da drauf zoomen, also mit dieser klassischen Zwei-Finger-Zoom-Geste, Pinch-Zoom, so heißt die halt.
Dann geht das jetzt noch, aber alles andere geht nicht.
Manipulation gibt es noch als Keyword.
Das ist zum Beispiel eben, was ich vorhin gesagt habe, dieses Double-Tap.
Also, alles, was irgendwie so, was so an Spezialfällen auftritt, ist erlaubt.
Und ich bin jetzt, mir ist jetzt gerade gar nicht sicher, ob ich auch eine Liste darf.
Eigentlich müsste man auch eine Liste reinschreiben können, gell.
Das habe ich jetzt gar nicht ausprobiert.
Also, mehrere wahrscheinlich, ja.
Was ich jetzt gerade feststelle, da bei der einen Box steht, das heißt, Vick's called,
Why panning? Scrolling up and down works? No other touch gestures.
Aber das Pinch-to-Zoom funktioniert trotzdem.
Pinch-to-Zoom funktioniert trotzdem?
Okay, dann habe ich es vielleicht tatsächlich falsch verstanden.
Aber in der ersten Box nicht.
Ja, die macht ja wirklich alles weg. Die hat ja None.
Genau, genau. Und da kann ich also auch kein Pinch-to-Zoom, aber bei der zweiten hast du nur Pinch-to-Zoom.
In meinem Chrome, beziehungsweise in meinem Brave auf dem Android geht das nicht.
Ich kann da nicht zoomen drauf.
Interessant. Dann ist das irgendwie so eine Inkonsistency im Chrome.
Genau. Also, was habe ich da?
Da ist der Wert, das hatte ich jetzt noch gar nicht.
Das ist wahrscheinlich das Klassische, was man beibehalten möchte.
jetzt ein ganz normales Scrollen.
Und zwar Pan, Moment, was habe ich denn da?
Pan überhaupt?
Warte mal, Moment, was habe ich denn?
Ich muss selbst nochmal gucken, was da steht.
Also Y, genau. Auf einer Achse.
Also in dem Fall Pan Y.
Das ist eben tatsächlich hoch-runter-scrollen.
Funktioniert dann und alles andere geht aber nicht.
Also ich kann da tatsächlich nicht drauf zoomen.
Du musst wirklich gucken, dass du mit den Fingern nur in dieser Box bist.
Okay, gut, bei mir geht es tatsächlich nicht.
Wenn es bei dir geht, okay, dann irgendwie.
Was hast du für einen Browser da jetzt gerade?
Das ist Chrome.
Ich habe Brave.
Ich sehe aber die Version jetzt hier nicht, aber müsste aktuell sein.
Okay, interessant.
Aber ich kann tatsächlich nichts machen, außer hoch- und runterscrollen bei Pan Y.
Und das gibt es natürlich in alle Richtungen.
Also ich kann auch sagen Pan X, dann könnte ich nur horizontal scrollen.
Left und Right habe ich jetzt gar nicht ausprobiert.
Geht das dann vielleicht tatsächlich nur in eine Richtung?
Das könnte sein.
Und dann, das wäre ja crazy.
Okay, das habe ich nicht ausprobiert tatsächlich.
Und dann ansonsten, ja, da gibt es ja diese ganzen Panning, Up, Down, Left, Right, XY.
Pinch, Zoom hatten wir schon.
None, Auto ist halt Standard und Manipulation sind halt so Spezialsachen, die im Browser da sind.
Das habe ich mir jetzt nicht im Detail angeschaut.
Das Beispiel, was da in der Speck stand, war eben das Double Tapping.
Und das finde ich total interessant und mächtig.
Allerdings bin ich bei den meisten Seiten davon überzeugt, dass man die Finger davonlassen sollte.
Also nur, wenn man wirklich so einen speziellen Anwendungsfall hat.
Ich hasse das, wenn man mir Pinch to Zoom wegnimmt.
Genau, das finde ich auch.
Und das ist tatsächlich auch eine Accessibility-Geschichte, weil man möchte ja,
vielleicht kann jemand den Text nicht lesen, möchte sich das größer machen.
Und wenn man das weggenommen bekommt, und da gibt es ja auch noch andere Möglichkeiten,
dafür, also gerade diese Meta-Tags mit dem Zooming gibt es ja auch, auf keinen Fall machen.
Also in den meisten Fällen sollte man es nicht tun.
Ich kann mir vorstellen, dass es Anwendungsfälle gibt.
Es ist gut, das zu wissen, aber überlegt euch sehr gut, ob ihr das anwenden wollt.
Also bei mir ist schon ohne Brille alleine, gerade hier die Demo, das CodePen, ohne Brille muss ich hier wirklich Pinch to Zoom machen,
weil sonst kann ich nicht sehen, was da steht.
Ja.
Oder ich muss halt wirklich das Handy so fünf Zentimeter vor der Nase, aber ich habe da so ein bisschen Doppelsicht.
Und jetzt kannst du nicht überall zoomen.
Nee, das ist tatsächlich bei mir auch schon ein bisschen Accessibility-Thema, ja.
Ja, aber der Text ist, ich habe es jetzt gerade bei mir mal aufgemacht, der Text ist tatsächlich sehr, sehr, sehr klein.
Das ist, das sollte man sowieso schon so nicht machen, aber generell sollte man nie annehmen,
da hatten wir es auch in der Sendung mit Chris drüber, man sollte nie annehmen, dass man weiß, was das Richtige für den Nutzer ist.
Richtig, ja.
Weil der Nutzer vielleicht irgendwelche speziellen Anforderungen hat, die man alle nicht kennen kann.
Man sollte so wenig wie möglich verbieten, sondern dem Nutzer die freie Wahl lassen.
Und gerade wenn ihr jetzt zum Beispiel irgendwie mit Meta-Tags verbietet, dass man zoomen kann,
das kann man in Browsern wieder ausschalten, dieses Verbot.
Also gerade, ich glaube, Chrome hat tatsächlich ein Setting dafür, dass man für Zoom immer zugelassen wird.
Das ist das Stichwort, warum es bei mir geht, mit dem Pinch zu zoomen.
Ah, hast du es angeschaltet?
Du hast ja mir das mal gesagt, wir hatten es nämlich im Stream, glaube ich, auch schon mal genau darüber,
und da hast du gesagt, da gibt es ein Setting und das habe ich dann aktiviert, weil ich genau das eben nicht wollte.
Und anscheinend, das wissen wir jetzt zum Beispiel auch dadurch, dieses Nun überschreibt sogar das,
also das ist dann unüberschreibbar, wenn da wirklich Nun steht, dann kann ich auch,
das ist interessant.
Nee, beim ersten ja nicht. Beim ersten hast du alles deaktiviert und da kann ich nicht mal zoomen.
Also da ist wirklich, also selbst, dass ich im Browser sage, ich möchte immer Pinch zu Zoom haben,
das greift da nicht.
Aber bei dem dritten Fall, die dritte Box, da greift das tatsächlich mein Überschreiben.
Wenn ich das jetzt ausmachen würde, könnte ich wahrscheinlich da auch kein Pinch zu Zoom machen.
Ja, also ich bin mir nicht sicher, ob man den Webentwicklern so viel Macht geben sollte.
Aber okay, jetzt haben wir es.
Ah, gerade Browser gucke ich gerade noch schnell.
Da kommt es tatsächlich offenbar drauf an, welche Eigenschaft man, also welchen Wert man reintut.
Ich habe jetzt gerade in dieser, in dieser Tabelle noch gesehen, dass es auch noch Double-Tabs-Zoom gibt.
Aber das funktioniert witzigerweise nur im Internet Explorer.
Ach, ausgerechnet.
Und irgendwie Edge, nee, also nee, tatsächlich offenbar nur im Internet Explorer 11.
Und im Zehner gab es das mit MS-Prefix.
Alle anderen, ah nee, da kommt es echt drauf an.
Also Touch-Action funktioniert eigentlich überall.
Generell, also die Eigenschaft gibt es generell überall in allen möglichen Browsern.
Pan X und Y gibt es eigentlich auch ziemlich überall.
Dann Double-Tab-Zoom, wie gesagt, das gibt es nur im IEF-Menü.
Und die ganzen weiteren gibt es fast alle in allen Browsern, also in allen aktuellen.
Aber Pan Up, Down, Left und Right gibt es zum Beispiel im aktuellen Firefox nicht.
Und auch auf Firefox Android nicht und auch in Safari nicht.
Also das sollte man vielleicht, sollte man sich gut überlegen, ob man das schon verwendet.
Aber das kann man in den meisten Fällen wahrscheinlich mit X und Y irgendwie abdecken.
Naja, ich verstehe eh nicht.
Also Left, Right, wie gesagt, ich habe es nicht ausprobiert.
Aber das würde ja bedeuten, dass man nur in eine Richtung, in die Richtung pinchen kann.
Und dann nicht mehr zurück.
Gut, vielleicht, wenn du was ungleichmäßig skalieren willst.
Also Pinch-Zoom ist ja meistens in beide Richtungen gleichmäßig.
Wenn du jetzt, weil du vorhin gesagt hast, Grafikprogramm.
Ja, du baust ein Grafikprogramm und du willst dann wirklich, ich habe dann ein Rechteck und ich will es jetzt nur in der Höhe verändern oder ich will es in der Breite verändern.
Dann macht es halt schon Sinn zu sagen, okay, Pinch, Pinch X, aber die Höhe ist fix oder so.
Ja.
Naja.
Das sind spezielle Anwendungsfälle.
Aber gut, da haben wir jetzt uns relativ, wenn wir jetzt weitergehen.
Ja, genau.
Wir haben, bitte ich, ich wieder.
Wir haben noch ein paar Pseudoklassen.
Und zwar haben wir einmal Doppelpunkt Any minus Link.
Und das matcht alle R-Tags oder Area-Tags, die von Doppelpunkt Linked oder Doppelpunkt Visible gematcht werden würden.
Also sprich, alle Links unabhängig vom Besuchzustand.
Und das war es eigentlich schon.
Ja, das finde ich mal tatsächlich nützlich.
Das, das hätte ich schon sehr oft gebraucht.
Das hätte ich tatsächlich schon sehr oft gebraucht.
Aber ist es nicht so, wenn du den Standardfall, du setzt dir eh eine Farbe, also gut, wenn du es wieder überschreiben willst vielleicht, ne?
In einem Bereich willst du aber unabhängig des Visited-Status willst du es wieder überschreiben, ja, also, ähm, ja.
Wobei, das ist, das ist was, was, äh, wo ich finde, dass das leider sehr oft nicht verwendet wird, Visited, äh, finde ich total nützlich eigentlich, wenn ich das auf Seiten habe.
Ich glaube, ich habe es aber selbst auf meinen Seiten.
Ja, wir haben es tatsächlich bei uns auch nicht.
Aber Visited, Visited, ich finde es wahnsinnig nützlich zu wissen, ob ich auf dieser Seite schon mal war oder nicht.
Gerade bei Wikipedia zum Beispiel, ne?
Habe ich jetzt den Link schon angeklickt, den Weiterführenden oder nicht?
Also, das ist schon, ist schon hilfreich, ja.
Ich schreibe das mal ins Trello als Zutub der Podcast-Seite.
Sehr gut.
Dann mache ich mal weiter, ähm, dann haben wir noch Doppelpunkt, Default, das matcht alle Buttons, Checkboxen, Radios, äh, Radio-Buttons und Options, die per Default ausgewählt sind.
Ähm, das heißt, bei Options, das ist die erste Option, die ein Selected-Attribut hat, beziehungsweise es gibt ja auch, äh, das Multiple-Attribut bei Select-Listen, ähm, dann matcht es natürlich auch mehrere Optionen, die Selected sind.
Ähm, bei Checkboxen und Radio-Buttons, die das Check-Attribut haben und bei Buttons, wenn es der Default-Submit-Button eines Formulars gibt,
das ist, sprich der, der erste Button, das erste Button-Element nach der DOM-Reihenfolge, ähm, oder aber auch, ähm, Input-Type-Image oder Input-Type-Submit, äh, Type-Submit.
Also alles, was, was eben das Formular abschickt und der Standard-Button ist, wird dadurch gematched.
Ähm, kann man auch irgendwie zu farblicher Hervorhebung nutzen, vielleicht ist es auch Accessibility-technisch, ähm, äh, nutzbar, kannst du vielleicht mehr dazu sagen?
Ja, ja.
Aber ich kann das tatsächlich nicht, ich hab's auch nicht genutzt, aber es würde es wahrscheinlich nicht geben, wenn's nicht auch tatsächlich sinnvoll einsetzbar wäre.
Vielleicht habt ihr ja einen, einen Anwendungsfall, dann schreibt ihn doch gerne in die Kommentare.
Ja, sehr gerne. Und drückt die Glocke.
Oh, jetzt hast du, Moment, Moment, Moment, da war ich schnell genug.
Ah.
Oh Gott.
Ähm, gut, dann haben wir noch Indeterminate.
Und das ist was, da hab ich mir noch, ich wusste, dass es das irgendwie gibt, aber ich wusste nicht, wie ist der Browser-Support,
und ich wusste vor allem nicht, dass es eben diesen, ähm, Selector dafür gibt.
Und zwar diesen Indeterminate-Zustand, den gibt es bei, hauptsächlich bei Checkboxen, aber auch bei Radio-Buttons,
aber so richtig sichtbar ist er eigentlich, ähm, bei Checkboxen, da gibt's dann nicht nur ein Häkchen oder kein Häkchen,
sondern da gibt's auch noch so einen Strich, also wie so ein Minus drin.
Und das heißt im Endeffekt, ich hab da keine Meinung zu, quasi, oder, oder nimm den Standardwert, egal ob der jetzt, äh, aktiv oder inaktiv ist,
es ist mir im Endeffekt wurscht, ähm, und ansonsten sage ich halt explizit, ich möcht's haben oder ich möcht's nicht haben.
Und was da aber wichtig zu wissen ist, ich, es gibt kein Indeterminate-Attribut.
Also ich kann nicht sagen, hier Input-Type-Checkbox und, äh, Indeterminate, sondern ich kann diesen Zustand nur per JavaScript setzen.
Also wenn ich per JavaScript, äh, den, ich, ich wähl die aus, äh, Query-Selector oder wie auch immer, ähm, Punkt Indeterminate ist gleich true.
Und dann kann ich diesen Indeterminate-Zustand aktivieren und wenn ich dann auf die Checkbox klicke,
dann rotiere ich durch zwischen Indeterminate, Checked und Unchecked.
So, jetzt, äh, jetzt kommt die, jetzt kommt die goldene Frage, weil ich's da nämlich, äh, gerade mit einem Kollegen drüber hatte.
Ähm, wofür ist dieser Indeterminate-Zustand wirklich?
Ähm, weil, weil bei uns wurde der jetzt, äh,
einmal so verwendet für, das ist der Zustand zwischen den Zuständen im Sinne von, ich klicke drauf, weiß aber noch nicht, ob mein Request erfolgreich ist, zum Beispiel, ja, weil ich, weil ich das vielleicht direkt an den Server schicke, ja.
Ähm, und solange bis ich Erfolg habe und, äh, das hingeschickt habe und dann klar ist, okay, das ist jetzt auch angekommen, ist es Indeterminate.
Und, äh, es springt quasi zurück, wenn's nicht erfolgreich war und wenn's erfolgreich war und wenn's erfolgreich war, wird's dann nicht.
Finde ich schwierig, weil ich würde erwarten, ich klicke da drauf und das Häkchen ist halt da und ich klicke da drauf und dann hab ich irgendwie da so ein Minus drin.
Also, ich weiß auch nicht, ob's vielleicht Accessibility-technisch, äh, Nachteile hätte.
Ich weiß halt nicht, tatsächlich nicht genau, wofür dieser Zustand ist, die, das andere, die anderen Beispiele, die ich dafür kenne, so der Klassiker ist, ich hab so einen Baum.
Ich hab ne Baumstruktur, ähm, wo jedes Element, ähm, ne Checkbox hat und ich hab jetzt zum Beispiel in einem Unterbaum nur eins ausgewählt von zwei oder dreien.
Dann wäre das, wäre die Checkbox von dem Überbaum Indeterminate, weil es sind nicht alle ausgewählt, äh, sondern eben, sondern eben halt, äh, ja, alle Minus eins oder halt irgendeine Anzahl, die nicht null ist, ähm, aber auch nicht alle.
Genau. Und, äh, das ist der, der, äh, das Beispiel, was ich öfter dafür gesehen hab. Und ich weiß jetzt nicht, und wir hatten jetzt halt eben diesen Fall und ich bin mir jetzt nicht sicher, ob's dafür überhaupt gedacht ist, für diesen Zwischenzustand, wir wissen jetzt gerade nicht, welchen Zustand es hat, weil ich auch, glaub ich, eher so, äh, optimistisch, UI-mäßig sagen würde, äh, ich setz das mal sofort und, ähm, guck mal, ob der Request durchgeht und würde es vielleicht wieder zurücksetzen in dem Falle, wenn der Request fehlschlägt.
Ich, ich wäre als Nutzer da, glaub ich, verwirrt, ehrlich gesagt, obwohl ich den Zustand kenne und man sieht ihn aber nicht so häufig und jetzt aber gerade als komplett gar nicht technischer, äh, technischer versierter Nutzer, wenn ich mich da versuche, reinzuversetzen, ich wäre, glaub ich, echt verwirrt, dass ich da draufklicke und dann hab ich ein Minus, ich würde wahrscheinlich nochmal klicken.
So, und dann schicke ich nochmal das Request, was macht der Server jetzt? Äh, entweder checkt er das und bricht das erste Request ab oder er schickt quasi nochmal hin, aha, Checkbox wurde getoggelt und ich hab's wieder deaktiviert.
Und dann sitz ich da und klicke und klicke und klicke, ja, und es passiert nix und dann ist er irgendwie plötzlich doch angehakt und dann wieder nicht mehr, also ich find's, ich würd's dafür nicht benutzen tatsächlich.
Aber was noch viel wichtiger ist zu wissen, ist, dass beim Absenden von einem Formular dieser Indeterminate-Zustand überhaupt nichts aussagt.
Also ich hab da nicht einen dritten Zustand, den ich da sehe, sondern die Checkbox, die wird nur übertragen, wenn ich jetzt einen klassischen Post oder Get mach, wenn sie angehakt ist.
Ah, also Indeterminate oder, genau, also Indeterminate oder, oder, oder unchecked ist im Endeffekt das gleiche Ergebnis, weil die Checkbox wird ja gar nicht hingeschickt.
Was vielleicht auch gar nicht, also viele, viele Anfänger vielleicht gar nicht wissen.
Ich bin da sogar selber letztens nochmal drauf reingefallen und dachte so, ich hab doch aber die Checkbox, die ist jetzt halt nur nicht aktiviert und dann hab ich erst wieder gemerkt, ja, aber klar, Checkboxen, die nicht aktiviert sind,
die kommen auch nicht an.
Ja.
Ah, Moment, die kommen gar nicht an?
Nee.
Ha, das wusste ich tatsächlich auch nicht.
Ha.
Und da hatte ich nämlich dann einen Fehler, dass dann irgendwelche Checkboxen, ne, in einem anderen Tab wurden die dann wieder überschrieben und ich dachte, das gibt's doch gar nicht.
Ja, aber wenn das Ding, aber die, auch nicht, wenn sie, ha, mit was für einer Sprache hast du das gemacht?
Wie?
Achso, es war, äh, nee, es war einfach nur HTML.
Okay.
Hm, crazy.
Das wusste ich tatsächlich nicht, dass die komplett ignoriert.
Aber das ist doch, das heißt, ich müsste dann auf dem Server beispielsweise standardmäßig sagen, okay, wenn nicht angehakt ist, dann ist, äh, also wenn nix kommt, dann ist quasi nicht ausgewählt gewesen.
Weil ich will ja diesen State vielleicht speichern aus irgendeinem Grund.
Ja, gut, du würdest ja, in dem Fall würdest du das wahrscheinlich per, per, äh, API-Request mit JavaScript machen und dann hast du, dann siehst du ja schon, du übergibst dann den Boolean-Wert, äh, checkbox.checkt und schickst den dann entsprechend an die API und dann fängst du es ja ab.
Aber in einem normalen, äh, HTML-Formular, sag ich mal, ähm, kommt die sonst gar nicht an.
Aber wenn wir noch, äh, grad ganz kurz darüber reden, pass auf, da schweife ich jetzt nochmal kurz weg.
Nur ganz kurz als, als Workaround, was man machen würde, ähm, um das zu machen, man müsste das tatsächlich, wenn man das jetzt nicht an eine, an eine API schickt über, über ein, äh, Ajax-Request oder Fetch oder wie auch immer, ähm, müsste man ein Hidden-Element einbauen und das nimmt dann eben einen entsprechenden Wert an.
Und das wird dann immer übertragen. Also so macht man das dann auch, wenn man, wenn man bei Checkboxen eben auf jeden Fall einen Wert übertragen will, äh, muss man es halt per JavaScript machen, dass dieses Hidden-Element einen Wert annimmt, je nachdem, ob ich die Checkbox gesetzt habe oder nicht.
Das ist ja freaky, das wusste ich nicht. Wow. Okay.
Ah, die Weiten des HTML-CSS-Java-Scripts, die sind einfach unergründlich.
Ähm, was ich noch sagen wollte an der Stelle zu wegen checkt und nicht checkt, weil ich das jetzt gerade, ähm, im Netz mal gesehen habe an einer Stelle, wo, wo es falsch verwendet wurde und wir hatten es auch im Stream ganz kurz darüber.
Ähm, vielleicht an der Stelle noch für, für, wir haben ja vielleicht auch Leute, die nicht so extrem tief drin sind im Thema oder das gerade erst noch lernen.
Ähm, wie der Konstantin gerade eben schon gesagt hat, äh, wenn ich jetzt den Check-Status von der Checkbox abfragen wollen würde, dann würde ich das Element selektieren, also in JavaScript.
Dann würde ich das Element selektieren und dann Punkt Checkt abfragen. Ähm, das ist der wirklich echte, aktuelle Zustand der Checkbox.
Ähm, ihr könnt das nicht machen mit dem Attributselektor, indem ihr einfach jetzt sagt, naja, ähm, wir, wir, wir selektieren jetzt irgendwie die Checkbox mit dem Attribut.
So habe ich das nämlich mal gesehen, weil man kann natürlich das Checkt-Attribut im HTML hinschreiben, aber das gibt überhaupt keine Auskunft darüber, ob die Checkbox gerade angehakt ist oder nicht.
Das ist nur der Ursprungszustand, wenn die Seite geladen wird oder wenn, wenn diese Checkbox eingefügt wird, was für einen Zustand sie dann hat.
Und, kleiner Einwurf, nicht mal zwingend tatsächlich beim Laden der Seite, ähm, ist gesagt, dass das, was checkt hat, beim Laden dann auch checkt hat, weil die Browser sich teilweise merken, wie war denn der Zustand.
Und wenn ich dann neu lade, ist trotzdem immer noch genau das angehakt, was ich eben abgehakt hatte, angehakt hatte.
Das ist, ja, und deswegen überhaupt null Verlass auf, auf, auf, auf das, äh, auf das Attribut.
Perfekte Überleitung zu unserem letzten Punkt.
Gerne.
Den ich, den ich nur, den ich nur, den ich nur minderwertig vorbereitet habe.
Aber, und zwar, Dinge, die Browser sich merken, dazu gehört nämlich zum Beispiel auch die Scroll-Position auf der Seite.
Zumindest versuchen sie das.
Ähm, und zwar, wir kommen jetzt zur Eigenschaft Overflow-Anchor.
Ähm, und in den meisten Fällen braucht man das wahrscheinlich nicht, wenn ich das richtig verstanden habe.
Ähm, damit kann ich nämlich ausschalten, dass der Browser versucht, sich zu merken, wo er beim Scrollen war, wenn noch Inhalte nachgeladen werden.
Browser versuchen nämlich mittlerweile so schlau zu sein, wenn ich schon nach unten gescrollt habe, und es kommt noch was dazu, zum Beispiel oben drüber,
dass trotzdem, also irgendwas wird nachgeladen.
Ein Bild, ein Bild hat sehr lange gebraucht, um zu laden, was riesig ist.
Ich habe schon weiter runtergescrollt, bin jetzt irgendwo im Text.
Und was ist da unfassbar nervig?
Mein Content springt weg von mir, obwohl ich schon irgendwo hingescrollt habe.
Weißt du, was mir gerade auffällt?
Wir haben Overflow-Anchor schon mal behandelt.
Richtig.
In unserem Scroll-Special.
Folge Nummer 20.
Weil ich wusste es nämlich vorhin auch nicht mehr in der Vorbereitung, beziehungsweise hatte es gar nicht auf dem Schirm, und du hast es dann, hast es noch auf der Liste gehabt.
Und jetzt, wo du gerade erzählst, sagst du dich so, Herr Moment, das haben wir doch schon mal besprochen.
Das habe ich gerade mal gesucht bei uns, also Folge 20 in unserem Scroll-Special.
Wir haben ja eine Folge.
Okay, dann ist es jetzt vorbei.
Wir haben uns komplett dem Scrollen gewidmet.
Und da haben wir das genau schon beschrieben, auch mit einem YouTube-Video, sogar mit einer Gegenüberstellung zwischen an und aus.
Also ich glaube, wir brauchen es tatsächlich an der Stelle gar nicht nochmal.
Dann bin ich still.
Das ist natürlich noch viel besser als alles, was ich jetzt noch sagen könnte.
Und ihr hört euch Folge 20 nochmal an, würde ich sagen.
Genau, perfekt.
Weil das war jetzt echt gerade so, deja vu, ich darf so einen Moment mal stehenbleiben und scrollen und doch nicht und springen, nachladen.
Und dann hat es Klick gemacht.
Also, hört euch Folge Nummer 20 an.
Ich habe es auch komplett vergessen.
Ich habe mich nicht daran erinnert, auch nicht bei der Vorbereitung.
Wahrscheinlich habe ich da irgendwie geschlafen oder so.
Kommt öfter mal vor.
Ich glaube, es war tatsächlich mein Punkt, den ich damals gemacht habe.
Okay, selbst wenn es meiner gewesen wäre, hätte es mich jetzt nicht gewohnt.
Aber so viel zum Thema, ob es Leute gibt, die alle Properties kennen, aus dem Stehgreif.
Ich kenne nicht mal die, die ich kenne.
Ja, gut.
Ich kenne auch nur Float.
Dann sind wir jetzt tatsächlich durch mit dem Thema.
Und wir sind noch unter zwei Stunden.
Ich finde, das ist doch durchaus mal ein Applaus wert, oder?
Ja.
Einfach, weil wir es viel zu selten machen.
Ja.
Genau.
Streamen kann ich das öfter.
Genau.
Schaut mal bei uns im Stream vorbei.
Machen wir jetzt hier noch.
Ich muss ganz kurz Werbung nochmal reinschieben.
Schaut doch mal bei uns bei Twitch vorbei.
Twitch.tv slash WWS IV.
Ich weiß, der Werbeblock kommt am Ende auch nochmal.
Das machen wir jetzt einfach mal zwischendrin.
Weil wir haben ja keinen Spam-Spot.
Aber ich mache mich mal wieder dran.
Schlaue Podcaster machen das.
Die werfen die Werbung einfach mal zwischendrin.
Kommt einfach mal bei uns im Stream vorbei.
Wir streamen eigentlich immer jede Woche mittwochs.
Nächste Woche vielleicht dann verschoben.
Da wollte ich eh noch mit dir drüber sprechen.
Das können wir gleich mal.
Das machen wir am Ende.
Meistens Mittwoch und Freitags alle zwei Wochen immer so abwechselnd mit dem Podcast.
Es ist nicht immer, wir schaffen das nicht immer.
Weil es ist dann schon relativ viel Zeit, die wir in dieses Projekt stecken.
Aber das macht viel Spaß und das ist weniger technisch als der Podcast oft.
Wir reden da oft so ein bisschen, da da so ein bisschen Interaktion ja auch ist mit den Zuschauern und Zuschauerinnen.
Weil da reden wir viel mit dem Chat und probieren Sachen aus und machen auch Website-Reviews und sowas.
Also es ist oft mehr so ein bisschen so Aftershow und gar nicht so viel Thema und Wissensvermittlung.
Aber auch.
Genau, genau.
Und ja, es ist aber auf jeden Fall immer eine nette Runde und schaut da doch einfach mal vorbei.
Und das ist irgendwie cool und nett und wir lernen auch immer was gegenseitig.
Also wir lernen auch ganz oft was von unseren Leuten, die im Chat sind.
Es ist auf jeden Fall eine geile Sache und einfach mal vorbeischauen.
Ihr müsst auch gar nichts schreiben.
Ihr könnt auch einfach so mal einfach nur zugucken und könnt auch sagen, die Informationsdichte ist mir zu wenig.
Ich höre dann doch lieber den Podcast, obwohl wir auch nicht sagen.
Da kriegen wir die Kritik ja genauso.
Aber heute kann man es uns nicht vorwerfen.
Nein, heute kann man es uns nicht vorwerfen.
Doch nicht.
Und wer jetzt irgendwie sagt, so Streams kann ich gar nicht und ich will dann eh nicht am Chat und ich will mich auch nicht committen, irgendwie zwei Stunden, drei Stunden dazuzuhören.
Man kann auch die Videos nachsehen auf YouTube.
Und wenn wir da schon dabei sind, die Leute irgendwie zu angeln und darum zu bitten, dass sie uns doch mal zuschauen.
Ich würde jetzt gerne sagen, youtube.com slash channel slash www.siv oder slash wo wir sind ist vorne.
Aber man darf erst eine eigene, tolle, benamte Channel URL haben, wenn man 100 Abonnenten hat.
Und wir haben jetzt 38 und das wäre doch echt cool, wenn wir es schaffen würden, dass wir bei den 100 irgendwie demnächst ankommen und wir dann eine tolle, einfach zu merkende URL haben.
Und ich poste diesen Link mit dieser komischen kryptischen URL, den lese ich jetzt nicht vor.
Den posten wir in die Shownotes und dann klickt nochmal drauf und wäre schön, wenn ihr uns einfach ein Abo dalasst.
Wenn wir die 100 voll haben, dürft ihr auch wieder deabonnieren.
Ich hatte gerade noch eine Idee für diese ganzen Links, Mensch.
Wollen wir mal so Weiterleitungslinks machen auf unsere Seite, wo wir sind es vorne slash YouTube, dass das dann auf YouTube zeigt.
Achso, ja, das wäre, ah, das wäre natürlich, ja.
Wo wir sind es vorne slash Merchandise, dass das auf unser Merchandise zeigt oder so.
Habe ich gerade gedacht, das wäre doch irgendwie was Nettes so zum Teilen.
Gerade so Idee gehabt, übernehme ich mal in unser Telefon.
Schreib das gleich mal auf, sehr gut.
Ja, und ansonsten kommt jetzt noch der letzte Block, wenn du bereit bist.
Ich bin total bereit.
Alles klar.
Wenn ich den richtigen Knopf noch finde.
Ich kann auch.
Yo, soll ich?
Willst du?
Fang an, fang an.
Ich fang an.
Ich habe heute, aber du musst da auch drauf gehen.
Du musst da gleich klicken.
Ich überbrücke jetzt noch ein bisschen mit Laberababa.
Ich kenne die Seite schon, sehr lange.
Aber du kennst die schon.
Ja.
Wahrscheinlich ist das total der alte Hut und das ist gar nicht so lustig.
Aber ich kann es noch nicht und ich finde es lustig.
Es ist pointerpointer.com.
Also Pointer ist ja auf Englisch der Mauszeiger.
Und da hat man einen schwarzen Bildschirm und da steht nur, please move your pointer.
Und wenn man den jetzt bewegt und an irgendeiner Stelle einfach mal still bleibt,
zack, dann lädt ein Bild, ein vollflächiges, und da sind dann Personen drauf, die zeigen auf den,
auf den, äh, auf den Mauscursor.
Also Pointer ist auch der, der Zeigefinger auf Englisch und eben der Mauscursor.
Deswegen Pointerpointer und da, ich weiß nicht, ob das per AI gemacht ist, aber wenn du
sagst, du kennst die schon lange, dann ist das wahrscheinlich tatsächlich irgendwie
tausende Bilder, äh, genommen und dann an die Stelle markiert quasi, wo das ist und
da wird einfach geschaut, gib mir das Bild aus der Datenbank, ähm, wo der Maus, wo
die Mauscursorposition am nächsten, äh, an dem Finger liegt.
Aber egal, wie es gemacht ist, es ist lustig, es kommen da so, so Party, äh, Bilder und
dann zeigt da jemand so, und, äh, ja, funktioniert auch mobil sogar tatsächlich.
Ich find's großartig.
Es ist großartig, ich kenn es tatsächlich schon relativ lange, schon einige Jahre, es
wird immer mal wieder durch Social Media, äh, getrieben.
Also es, äh, ja, es ist, ich bin grad nochmal drauf, es ist einfach super und es sind auch
sehr, sehr merkwürdige Bilder, ich frage mich ja, die kommen doch, ich hab jetzt hier grad
ein Bild, da sind zwei Mädels drauf, einer hat ein Hooters-T-Shirt an und es ist irgendwie,
es sind, es sind aber irgendwie so, es sind so Privatbilder, oder?
Also es sieht jetzt, das sieht jetzt für mich so aus, als wäre das irgendwie eine Privatparty
in der Küche stehen die.
Jetzt schieb ich den Mauszeiger mal nochmal woanders hin.
So, so, so, so echt so, so College-Party-Bilder.
Er zeigt jetzt, er zeigt jetzt eine Frau auf einen Hund, der im Käfig ist.
Es ist auch nirgends irgendwie, ähm, also klar, es ist keine deutsche Seite, es gibt
kein Impressum, es gibt aber auch sonst nichts, also es ist nicht irgendwie, ob die Bilder
jetzt, äh, Creative Commons lizenziert sind oder Public Domain oder so, also es ist
einfach nichts, es ist nur diese, die Seite mit dieser Funktion.
Das gucken wir jetzt mal, ich muss jetzt, ich muss jetzt mal hier bei den Requests gucken,
ob da irgendwas an eine bestimmte, an eine Domain rausgeht, die man kennt, irgendwie Flickr
oder sowas, was so in dieser Zeit irgendwie, ne, aber man…
Weil dann bräuchten sie ja, ähm, müssten sie ja trotzdem irgendwie sagen, wo ist denn
der Zeigefinger positioniert.
Ja, irgendwie schon, gell?
Oder ist, ich glaube nicht, dass das da ein verrücktes Machine Learning dahinter steckt,
das gibt's nämlich echt schon lange.
Das funktioniert erstaunlich gut.
Es ist einfach, ja, coole Seite.
Ja.
Also wenn man, wenn man Zeit totschlagen will, fantastisch.
Kann man nämlich, also es ergibt nämlich gar keinen Sinn, dass man da drauf geht.
Also es bringt einem irgendwie nix, außer Zeit totschlagen.
Aber das muss man ja auch manchmal.
Also falls ihr mal irgendwo an der Straßenbahnhaltestelle steht.
Und nicht wisst, was ihr machen sollt.
Und ihr über fünf Minuten warten müsst und nicht wisst, was ihr machen sollt.
Und ihr habt alle unsere Podcast-Folgen schon gehört.
Fünfmal.
Und ihr könnt auswendig mitsprechen.
Und dann.
Und dann, dann dürft ihr auf pointerpointer.com.
Ja.
Okay.
Dann kommen wir zu meinem Geilteil.
Wir haben heute zwei.
Weil es mir vor kurzem über den Weg lief.
Und ich jetzt heute tatsächlich nochmal gesucht habe, Mensch, da war doch was.
Und wir auch im Stream, glaube ich, irgendwann nochmal über, wie hieß es noch, CSS Zen Garden gesprochen haben.
Das war mal, oder das gibt es auch noch, CSS Zen Garden.
Das war in den 2000ern so eine Seite, die zeigen wollte, dass man mit dem gleichen HTML extrem viel unterschiedliche Designs machen kann, die einfach nur auf CSS basieren.
Also man tauscht das einfach das CSS aus und hat mit dem gleichen HTML plötzlich eine komplett andere Seite.
Und das ist quasi neu aufgelegt worden.
Das heißt aber nicht mehr CSS Zen Garden, sondern das hat die, die vorhin schon mal von mir erwähnte, glaube ich, habe ich das, habe ich das im Podcast oder egal, Stephanie Eccles.
Hast du vorhin gesagt, ja.
Genau, habe ich vorhin gesagt.
Die hat das neu aufgelegt und zwar heißt das, oder es ist so ähnlich, funktioniert so ähnlich, ist nicht, heißt nicht CSS Zen Garden, sondern stylestage.dev.
Funktioniert aber nach dem gleichen Prinzip, ich habe einen Standard HTML und man kann ein CSS dazu einreichen, dass bestimmten Regeln genügen muss und dann wird das in die Liste mit aufgenommen, wenn ich das richtig verstanden habe.
Also genauso wie bei CSS Zen Garden und dann kann ich mich durch verschiedene Designs durchklicken und kann mir das dann anschauen, wie verschiedene Leute mit dem gleichen HTML verrückte unterschiedliche Designs machen.
Da ist jetzt noch nicht, glaube ich, noch gar nicht so viel los. Wie viel haben wir denn da? Ah, doch, ich finde es nicht so viele Designs wie bei CSS Zen Garden, aber es kam schon einiges zusammen und die Leute werden teilweise extrem kreativ.
Ich habe jetzt zum Beispiel gerade mal ein Design aufgemacht, das heißt Jet Set.
Das habe ich witzigerweise auch.
Das springt extrem ins Auge, wenn ihr das dann seht, dann wisst ihr auch, warum, da fliegt irgendwie der Hintergrund hintendran, das sieht extrem comicmäßig aus.
Ein bisschen wie diese Autoseite, diese Autoseite, die wir im Stream hatten.
Oh ja, genau. Und wenn ihr wissen wollt, was für eine Autoseite wir im Stream hatten, dann müsst ihr noch auf YouTube vorbeischauen.
Genau, also das, also wenn die Leute, wenn teilweise extrem kreativ, da ist viel mit Animation und bunt und genau, es ist einfach wieder ein schönes Beispiel, wie mächtig CSS ist.
Wir hatten es ja heute schon, wir wissen gar nicht mehr, was es alles für Tags gibt, Tags sage ich schon, was es alles für Eigenschaften gibt und was für Selektoren.
Und ich finde es immer wieder sehr schön zu sehen, was man denn, oder ja, dass immer mal wieder der Beweis erbracht wird, dass HTML eigentlich wirklich nur die Auszeichnung für den Inhalt ist und dass CSS eigentlich die komplette Macht über das Layout hat.
Und das, man kann es eigentlich nicht besser zeigen, als wenn man unterschiedliche Seiten oder wenn man den gleichen Inhalt zeigt mit unterschiedlichen Designs, die nur auf CSS basieren.
Und ja, finde ich einfach immer schön, es ist schöne Inspirationen für verschiedene Sachen und schaut mal rein.
Ich bin Fan.
Sehr cool.
Auf jeden Fall. Genau. Damit ist ausgegeilt halt heute.
Mensch, dann waren wir heute richtig fix.
Ich weiß nicht, ob uns jetzt alle dazu stimmen würden. Jens, falls du das hörst, sag mal, ob dir das heute zu lang war.
Nee, da ist ja, glaube ich, anderthalb Stunden ist ja, glaube ich, schon so die Grenze, ne?
Wir sind noch nicht fertig.
Ich weiß nicht, ich weiß nicht, es kommt, glaube ich, auch darauf an, bei welcher Tätigkeit die Leute den Podcast hören und wenn der länger dauert als das, beim Sex hauptsächlich.
Und dafür, ich weiß nicht, also wenn ihr zwei Stunden durchhaltet, dann seid ihr gute Sportler, würde ich sagen.
Oder haben wir uns jetzt geoutet, als Leute, vielleicht machen alle anderen, vielleicht sind alle anderen immer vier Stunden.
Moritz, nur wir beide sind nach zwei Minuten fertig.
Nur wir beide.
Haben wir überhaupt, die Umfrage haben wir, glaube ich, noch gar nicht, haben wir die im Podcast auch schon besprochen.
Also es geht um die Umfrage auch von Twitter, die wir hatten.
Ja, ich glaube schon, oder?
Da haben wir gefragt, bei welcher Tätigkeit ihr uns hört und aus Spaß, beziehungsweise unser Gast Micha hatte im Nachgeplänkel von seiner Folge irgendwie gesagt,
er hat das mal gelesen, dass ganz viele Leute angeblich Podcasts beim Sex hören.
Wir konnten uns das nicht vorstellen und haben euch befragt und wer konnte es erahnen, diese Antwortmöglichkeit hatte die meisten Klicks.
Ja, weil ihr einfach lustige Scherzbolde seid und wir finden das kann.
So wie wir.
Ja, genau, so wie wir, so wie wir.
Ich muss aber, ich muss dazu sagen, ich glaube, ich glaube, ich habe mehr Humor, als mir manche Leute zutrauen.
Wurde nämlich auch schon mal von jemandem darauf hingewiesen, der hat gesagt, ich weiß nicht, ich weiß nicht, ich kann dich nicht einschätzen.
Ich kann dich nicht einschätzen.
Und, ich weiß nicht, Konstantin, vielleicht habe ich auch gar keinen Humor und du nur so als ob.
Ich sage dazu nichts.
Danke.
Okay.
Danke, dass du mir hilfst in meiner Sache.
Dann stellt euch hier den imaginären Abschluss-Dschingel vor und wir machen nochmal Werbung, oder?
Wir machen nochmal Werbung.
Ich würde sagen, wir hauen nochmal auf die Merch-Glocke, das Stichwort.
Und jetzt auch.
Ah, genau.
Und also nochmal der Hinweis, wir haben jetzt einen Merch-Shop und haben wir den eigentlich verlinkt, sag mal, auf unserer Seite?
Oder müssen wir den immer nur nennen?
Ja, ganz heimlich, ganz heimlich derzeit.
Wo wir sind, ist fraglich?
Oder wo haben wir den?
Nee, es gibt jetzt eine neue Seite, die heißt Unterstützen.
Ah, ganz unten im Footer.
Die ist ganz unten im Footer, derzeit noch verlinkt.
Wir müssen, ich bin noch am überlegen, wie wir die Navigation so aufbauen, dass wir da mehr Zeug reinkriegen.
Das ist derzeit noch so ein Design-Problem.
Die Suche unter anderem.
Das ist derzeit noch ein Design-Problem.
Das muss aber gelöst werden, weil wir wachsen ständig in unserem Inhalt und irgendwann ist dann halt Ende.
Es gibt einen Link, wo wir sind, ist vorne.show slash unterstützen.
Den findet ihr auch ganz unten im Footer derzeit noch nur.
Muss irgendwie auch nochmal weiter nach oben.
Vielleicht nehmen wir das Spendier ein Bier dann auch raus.
Keine Ahnung, wie wir das machen.
Da gibt es ganz viele Wege, wie ihr uns unterstützen könnt.
Also natürlich Merch, Merch Shop ist da auch verlinkt.
Aber ihr könnt uns natürlich auch unterstützen, ganz ohne Geld.
Ihr könnt uns bei Apple Podcasts abonnieren oder auch uns bewerten, Bewertungen schreiben.
Das hilft uns sehr.
Auf diversen Portalen gibt es einige, aber ich glaube Apple Podcasts ist so das bekannteste, wo man irgendwie bewerten kann.
Ihr könnt uns, wie wir vorhin schon gesagt haben, bei YouTube abonnieren oder bei Twitch folgen.
Überall heißt es anders, folgen, abonnieren.
Beziehungsweise, nee, warte mal, abonnieren ist ja falsch.
Folgen ist bei Twitch und YouTube ist abonnieren, weil bei Twitch ist abonnieren nochmal was anderes als folgen.
Ihr könnt ein Twitch Prime Abo abschließen für uns.
Das ist, wenn ihr eh schon Amazon Prime Kunde seid, dann kriegen wir ein bisschen Geld und euch kostet das gar nichts.
Das wäre doch nett, oder?
Das wäre, das wäre, das fände ich wirklich fantastisch.
Ihr könnt auch über unseren Amazon Affiliate Link einkaufen.
Der ist da auch verlinkt.
Wenn ihr einfach den anklickt und dann irgendwas einkauft, das kostet euch auch nichts.
Und dann kriegen wir auch ein paar Cent davon.
Und dann können wir hier Podcast Equipment aufbauen und Streaming Equipment.
Und dem Konstantin zum Beispiel sein neues Audio-Interface kaufen, wofür wir gerade Geld sammeln.
Und natürlich dürft ihr uns auch nach wie vor Biere spendieren.
Wir sind mittlerweile umgezogen von buymecoffee.com zu Streamlabs, um für uns Spenden zu sammeln.
Also wenn ihr uns was spenden wollt, dann freuen wir uns natürlich auch sehr drüber.
Wie gesagt, Merch kaufen.
Bei Twitch ein Abo dalassen.
Genau, so Merch wäre echt toll, wenn wir das ein bisschen unter die Leute bekommen.
Merch wäre fantastisch.
Würde uns helfen, dass wir auch noch mehr Motive online bringen können, wenn noch zwei, drei Leute, zwei, drei 25.000 Leute unsere T-Shirts kaufen.
Und die Hoodies ist tatsächlich auch echt gute Qualität.
Also ich glaube, das trägt man auch tatsächlich gerne.
Ja, absolut.
Ich habe es jetzt auch schon länger getragen und ich bin immer noch Fan davon.
Also gerade die Fairtrade-Sachen, Fairtrade-Shirt und Fairtrade-Hoodie, die sind ein bisschen teurer.
Aber es ist gute Qualität, es ist guter Stoff, guter Druck, fühlt sich gut an, macht Spaß.
Und dann könnt ihr auch mit unserem wunderschönen Logo durch die Gegend laufen.
Und Leute gucken euch ein bisschen hinterher und komisch an vielleicht auch.
Das verspreche ich euch nicht, das kann sein, es kommt drauf an, wo ihr herkommt.
Ich denke, in Berlin-Mitte seid ihr damit total out.
Aber das kann ja auch cool sein, wenn man Hipster ist, dass man nicht zu sehr auffällt.
Kauft euch unser Hoodie, wenn ihr in Berlin-Mitte nicht zu sehr auffällt.
Kurzer Nachtrag noch von wegen Streaming.
Wir haben ja gesagt, wir gehen immer mittwochs und freitags live, beziehungsweise jeden zweiten Freitag.
Jetzt, wenn ihr das jetzt hört, wenn ihr das sehr früh hört, also am Sonntag vielleicht schon oder am Montag über den Tag.
Wir gehen bei Twitch jetzt tatsächlich am Montagabend live und zwar um 19 Uhr und wir werden da die WWDC Apple Keynote kommentieren live.
Also wir können sie nicht live direkt mit euch schauen.
Ich glaube, das dürfen wir aus rechtlichen Gründen nicht.
Aber wir kommentieren die.
Wir schauen die gemeinsam an und ihr könnt da gerne mit dazu in den Chat kommen, falls euch das auch interessiert.
Kommt einfach mal vorbei.
Ja, wir freuen uns, wenn ihr dabei seid.
Okay.
Ja, dann mal wieder vielen Dank fürs Zuhören.
Ja.
Und bis zum nächsten Mal.
Ciao.
Bis zum nächsten Mal.