Wo wir sind, ist vorne, Folge 8. Heute geht's um x Dinge, die früher Magie waren und heute zum Alltag gehören.
Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzelein.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Herzlich willkommen bei Wo wir sind, ist vorne. Jetzt habe ich das Intro nochmal wiederholt, aber wir sind ja ganz gut im Wiederholen immer, haben wir auch schon mal festgestellt.
Wir machen ganz gern Echo, auch bei unseren Jingles.
Ja und mit mir, also mein Name ist Moritz Gießmann, das kann man ja auch irgendwie auch nochmal sagen und mit mir heute am Steuer Konstantin Groß.
Hi, aber nur heute.
Nur heute und früher auch und in der Zukunft vielleicht auch nochmal. Immer.
Also es gibt ja schon, du musst mich loswerden.
Nein, nein, nein, nein. Ich finde, nein, ohne dich wäre das ja gar nicht möglich hier alles.
Was trinkst du denn heute?
Moment, ich trinke noch gar nichts. Ich mache aber mal kurz auf.
Wir haben übrigens, wir haben Feedback bekommen zum Bier trinken. Jetzt muss ich gerade den Öffner noch suchen.
Also ich habe ganz konkret Feedback bekommen von einem Hörer, der gesagt hat, immer wenn wir das Bier aufmachen, wird er ein bisschen neidisch.
Und von daher möchte ich hier Bier mit WWS IV als neue Aktion starten. Also ihr könnt euch jetzt auch ein Bier holen. Wir geben euch mal irgendwie so, weiß ich nicht, so ein paar Sekunden Zeit.
Jetzt noch eine halbe Minute und dann.
Nee, nee, also ihr könnt jetzt, ihr könnt jetzt zum Kühlschrank gehen und ich verspreche euch, in den nächsten 20 Sekunden, 30 Sekunden kommt wirklich nichts Interessantes. Da könnt ihr einfach weiterlaufen lassen.
Und dann könnt ihr einfach, jetzt warte doch mal, warte doch mal. Und dann, ja genau, holt euch ein Bier und dann machen wir das gleich gemeinsam auf. So, und jetzt kommt.
Müssen wir dafür, ja nicht zu viele Takte, nicht zu viele, sonst müssen wir dafür noch was zahlen.
Ist mir egal.
Nein, Spaß, okay, so ist es jetzt vorbei.
Ja genau, ich trinke heute ein Augustiner Lagerbier Hell.
Ich mache es gerade mal auf, Moment.
Ich auch.
Bei mir gibt es ein Hasseröder Premium-Pilz.
Schon mal getrunken?
Das hätte ich jetzt nicht gesagt.
Ich weiß nicht, nee.
Ich glaube, das gehört so.
Ich bin letztens einkaufen gewesen und habe mal ein bisschen Biervorrat eingekauft für unsere Aufnahmen.
Also ich bin jetzt eingedeckt für die nächsten Folgen und habe einfach mal geschaut, was hatte ich denn schon lange nicht mehr und was hatte ich denn noch nie.
Und dann habe ich irgendwie gedacht, Mensch, Hasseröder Premium-Pilz, das kenne ich irgendwie noch so aus der Fernsehwerbung, aus den 90ern.
Da wäre das ein Begriff, aber getrunken habe ich es noch nie, jetzt habe ich es mal.
Ich würde sagen, wir stoßen mal an.
Ja, Moment.
Dazu brauche ich natürlich noch das Extra-Gerät, okay?
Oh, das war jetzt mal.
Wir sind natürlich mal wieder remote und können nicht miteinander anstoßen.
Aber wir simulieren die Geräusche trotzdem für euch.
Aber so, Hasseröder, ich will so eine Marke ja gar nicht aussprechen.
Also jemand, der schon mal im Fernsehen irgendwie Werbung gemacht hat, ich wüsste es jetzt bei Augustiner nicht, weiß ich gar nicht, ob man dafür ...
Ich habe es aber, glaube ich, auch noch nie getrunken.
Also die Werbung bei mir, bei dir hat sie funktioniert, du hast es jetzt irgendwie 20 Jahre später gekauft.
Ja, richtig, ja.
Vielleicht sind das auch noch die Restbestände von damals, vielleicht gibt es die Brauerei gar nicht mehr.
Wahrscheinlich.
Seit 1872.
Ja, Augustiner habe ich erst entdeckt, seit ich in Karlsruhe bin, das ist ja ein bayerisches Bier.
Aber ich finde das einfach, also das macht, es hat eine gute Wirkung auf mich, sage ich mal so.
Also wenn mich jemand mal abfüllen will, Augustiner ist dafür auf jeden Fall gut geeignet.
Also mich erinnert das ein bisschen an, es ist sehr geschmeidig, sage ich mal.
So ein bisschen Tannenzäpfle.
Ja, kann man trinken.
Ob es jetzt Premium ist, naja.
Also da ist schon mehr Premium, ist noch was anderes, was ich habe, und zwar was nicht Alkoholisches.
Ich halte das mal in die Kamera.
Ah, nein.
Ja, Almdudler Hanf, weil die Hörer und Hörerinnen sehen das natürlich jetzt nicht.
Almdudler Hanf gibt es und es gibt auch Almdudler Grapefruit und diverse andere Sorten, irgendwie noch light und kohlensäurefrei und was weiß ich.
Seit letztem Jahr habe ich das im Urlaub entdeckt in Österreich und ja, gibt es hier in Deutschland noch nicht.
Die testen das wahrscheinlich jetzt erstmal so aus, was sich wie gut verkauft.
Im Onlineshop kann man es nämlich bestellen.
Almdudler Hanf verkauft sich bestimmt super.
Und es schmeckt also tatsächlich, also es schmeckt wohl so, wie Hanf schmeckt.
Schmeckt wie Hanf schmeckt.
Wenn man so auf so einer Hanftüte rumkauen würde, ich weiß es nicht.
So, wie Almdudler Hanf.
Also nee, was heißt, ich weiß es nicht, also ab und zu mal so einen legalen Hanftee trinke ich tatsächlich ganz gerne.
Und so schmeckt das mit Almdudler vermischt.
Was ist denn legaler Hanftee?
Es gibt Hanftee zu kaufen, ohne THC.
Aber wir schweifen jetzt, also schon wieder extrem.
Nee, nee, nee, nee, nee, da müssen wir jetzt kurz drauf eingehen.
Was bringt der dann?
Willst du da jetzt wirklich in die Details gehen?
Also es gibt ja THC und CBD in Hanf und das THC ist das Berauschende und das CBD ist das, was so ein bisschen eher runterbringt.
Und der THC-Gehalt darf halt irgendwie maximal 0,5 Prozent oder was sein in legal vertriebenen Hanfprodukten.
Und dementsprechend ist in dem Tee halt mehr CBD als THC.
Also ist nicht null, aber ist irgendwie noch was drin und das reicht wahrscheinlich auch schon.
Wahrscheinlich müsstest du irgendwie 500 Badewannen voll trinken, damit du was spürst oder so.
Ich weiß es nicht.
Challenge exzentriert.
Okay, ja, sollen wir mal in die Retro starten?
Ja, gehen wir mal in die Retro.
Ja, wir sind heute ja drei Wochen eigentlich auseinander zur letzten Folge.
Ich denke, dass wir jetzt den Zwei-Wochen-Rhythmus wieder beibehalten und nicht nächste Woche gleich schon wieder die nächste raushauen werden.
Ich bin ja eh überrascht, dass wir das tatsächlich geschafft haben, diesen Zwei-Wochen-Rhythmus so einzuhalten.
Und dementsprechend war das jetzt ein relativ langer Zeitraum, auf den wir zurückblicken.
Und ich werde trotzdem versuchen, mich ein bisschen kürzer zu fassen.
Responsive Design ist 10 geworden.
Responsive Web Design.
Beziehungsweise nicht Responsive Design selbst, sondern der Be...
Ja, bitte.
Moritz kann jetzt auch Knöpfchen drücken.
Ja, ich sage nicht mehr Moment.
Ich spiele die einfach ein.
Gnadenlos, egal ob du gerade was sagst.
Genau, also der Begriff, das Responsive Web Design ist 10 geworden, genauer gesagt.
Geprägt wurde der von Ethan Marcotte, wenn ich das richtig ausspreche.
Ja, da frage ich mich auch immer.
Der stand ja mal bei der Beyond Tellerrand mit mir im Aufzug.
Aber das tut nichts zum Namen, zur Sache.
Der hat mir da auch nicht gesagt, wie er ausgesprochen wird, seinen Namen.
Ja, also fragst du dich, wie er ausgesprochen wird, oder was...
Ja, ich weiß es nicht.
Er weiß tatsächlich nicht genau.
Ethan Marcotte oder so.
Ethan Marcotte.
Egal.
Jedenfalls hat er jetzt auch am 25. Mai einen Artikel veröffentlicht, wo er darüber spricht,
wie er damals diesen Begriff geschaffen hat.
Allerdings muss man sagen, also bereits 2001 wurde Audi.com gelauncht und war die erste
Seite, die sich an die Browserbreite adaptiert hat.
Aber das war natürlich noch ziemlich limitiert.
Irgendwie EA hat das tatsächlich dynamisch geschafft.
In Netscape musste dann jedes Mal beim Resizing die Seite wohl neu geladen werden.
Aber 2010 war es dann soweit, dass man Media Queries tatsächlich auch einsetzen konnte.
Und Ethan Marcotte hat den Begriff eben geprägt als Fluid Grid, Flexible Images und Media Queries.
Und den Originalartikel und diesen Jubiläumsartikel verlinke ich natürlich auch entsprechend in
den Shownotes.
Ja, dann habe ich jetzt...
Ja, Moment.
Darf ich da kurz einhaken?
Aber selbstverständlich.
Ich weiß nicht genau.
Ich finde die Seite gerade nicht mehr, die mir dazu einfällt, weil du sagst, die haben
irgendwie schon ein Design gehabt damals, das sich an die Breite des Browsers anpasst.
Ich meine, dass diese Demo noch irgendwo tatsächlich sogar gibt, aber...
Wichtig ist, also da gab es mal eine Seite, ich habe sie gerade gesucht, die gibt es glaube
ich nicht mehr.
Das hieß glaube ich mal liquiddapsive.com, weil das, was du gerade ansprichst, ist Liquid
Design.
Das gibt es schon sehr, sehr lange.
Das konnte man auch mit Tables machen.
Die Begrifflichkeiten sind glaube ich erst später dann tatsächlich dazugekommen.
Also Responsive Web Design war so der ursprüngliche Begriff, den ihr eben gebringt.
Genau, das wurde später Liquid Design genannt, das, was du gerade angesprochen hast, also
das, was sich so auf 100% aufspannt und dann irgendwie anpasst.
Dann gibt es Adaptive Design.
Das ist mit festen Breakpoints, wo die Breite dann aber normalerweise genau fest ist.
Das heißt, du springst dann ab einem bestimmten Breakpoint zum kleineren und hast keine Zwischenschritte
mehr.
Und dann das Responsive Design ist so ein Mischmasch da draus.
Das wollte ich nur noch mal kurz, weil die Begriffe oft irgendwie durcheinander geworfen
werden und mir das irgendwie immer so ein bisschen auf die Nerven geht.
Deswegen mal ganz kurz das nochmal erklärt, dass es da irgendwie diese drei gibt es, die mir
da einfallen und ja.
Um unserem Lehrauftrag gerecht zu werden.
Unsere.
Ja, hallo, hallo an Fabian an der Stelle.
Er weiß, wer gemeint ist.
Jetzt aber keine Insider mehr.
Gut.
Genau.
So, damit bin ich eigentlich durch.
Ach nee, eine Sache wollte ich noch sagen, auch wenn es eigentlich nicht retro ist, eigentlich
gehört es noch zum Getränk der Woche.
Du hast gestern wieder ein bisschen über WordPress geflucht und weil wir es von Almdudler
hatten, die Almdudler-Seite ist mit WordPress gemacht.
Also auch so große Firmen und bekannte Marken setzen immer wieder auf WordPress.
Es gibt eine Menge, also, naja, nur weil es viele benutzen muss, es ja nicht gut sein.
Nee, natürlich nicht.
Leute ist scheiße, Millionen fliegen können nicht irren.
Genau.
Ich kann auch mal ganz kurz sagen, vielleicht gibt es dafür eine ganz leichte Lösung oder
vielleicht bin ich auch einfach zu blöd.
Ich will das nicht ausschließen, aber ich kann mal ganz kurz sagen, was unser Problem
war.
Also, falls einer von den Hörern irgendwie das gleiche Problem schon mal hat und das gelöst
hat oder sagt, ihr seid doch alle doof und riecht nach Lulu, hier, guck mal, da den einen
Knopf hätte zu drücken müssen, dann gerne her damit.
Also, das Problem ist bei unserer Seite, naja, wir haben die Performance.
Also, letzten Endes geht es darum, dass irgendwie so Cache-Header richtig gesetzt werden und
ja, das ist es im Prinzip weitestgehend schon.
Und dafür hatte ich halt ein Plugin installiert.
Es hat aber eine andere Menge, eine andere, eine Menge, andersrum, eine Menge anderer Quatsch
verursacht, der irgendwie genervt hat.
Also, es war so ein Caching-Plugin und dann waren da irgendwie veraltete Stände irgendwie
auf der Seite.
Manchmal gingen irgendwelche Links nicht mehr und das haben wir dann wieder rausgeworfen und
erst gedacht, oh ja, geht ja immer alles immer noch toll.
Aber dann, wenn du das Ding dann nochmal durch den Chrome Performance Audit geschickt
hast, hat es gesagt, naja, es ist nicht so gut.
Ich habe das Gefühl, diese WordPress-Templates, die laden eine Menge Kram, den man eigentlich
gar nicht will, also den man gar nicht braucht im Template.
Also, so WordPress-eigene Sachen.
Und wieso ist das überhaupt?
Gibt es, warum gibt es da nicht einfach irgendeinen Knopf, den ich drücken kann und sagen
kann, hey, das ist jetzt, also, was hat das alles im Template verloren?
Wieso brauche ich das?
Das ist doch bestimmt nur für irgendwelche bestimmten Standard-Templates gedacht.
Aber wenn ich ein Custom-Template habe, dann brauche ich das nicht.
Also, ich hätte am liebsten gar kein WordPress, sondern irgendwie was anderes.
Aber wir sind, ich bin derzeit sehr dankbar, dass uns ganz viel von der Podcast-Geschichte
durch das Podlove-Projekt abgenommen wird und das basiert nun mal momentan noch auf WordPress.
Deswegen sind wir da gelandet.
Vielleicht steigen wir da irgendwann auf die neuere Variante davon um, aber ich glaube, die
ist noch sehr am Anfang, wenn ich das richtig mitbekommen habe.
Genau, meine Retro.
Es sind verschiedene, mehrere Punkte.
Der erste ist, ich habe mich ein bisschen mit Tastaturen beschäftigt.
Ich habe überlegt, ich hätte gerne eine neue Tastatur für mich bei mir zu Hause.
Und ich bin da so in so ein Rabbit Hole reingeklettert und bin bis heute nicht wieder rausgekommen.
Und es ist irgendwie, naja, ich mache das ja öfter mit verschiedenen Sachen, aber das war
irgendwie ein bisschen frustrierend mal wieder.
Na ja, was will man denn haben?
Oder ich meine, dann guck, also wie gehe ich an sowas ran?
Ich gucke mal im Netz, was gibt es denn so?
Und das kann schon immer ein paar Tage dauern, bis ich mir dann so einen Überblick verschafft
habe, was ist denn so der Stand der Technik?
Und dann kommt man so drauf, naja, vielleicht will man eine mechanische Tastatur haben, weil
das hat man halt heute so.
Ich glaube, der Konstantin hat auch eine, aber die ist relativ laut.
Ich habe eine, die ich habe immer so schön, ja.
Kannst du mir mal sagen, weißt du, was für Switches du da drin hast?
Äh, nee.
Es gibt ja irgendwie so Red Cherry und Brown Cherry und nee, müsste ich jetzt nachgucken,
weiß ich gar nicht.
Das ist so verrückt.
Ich bin da auf Seiten gelandet, wo dann stand, ja, diese Tastatur, die gibt es mit roten
Switches, mit blauen Switches und mit braunen Switches.
Und ich dann so, äh, Moment mal, äh, bei dem Bild, äh, wenn ich mir die andere Tastatur
angucke, mit deinen, an den Farben unterscheidet sich da gar nichts.
Bis ich dann rausgefunden habe, das ist das innen drin und das spielt irgendwie eine Rolle
mit, wie taktil ist das und wie laut ist das am Ende.
Also das siehst du auch gar nicht, wenn ich jetzt mal eine Tastatur hier rausziehe.
Doch, man sieht's.
Blau.
Ah, ist, hast du?
Okay, dann.
Was, was hast du in deiner?
Blau.
Blau, okay.
Ja, also ich hab, ich, was ich irgendwie gehört habe, so rot ist irgendwie ein bisschen leiser und
Blau ist irgendwie schon relativ laut und, äh, ach, was weiß ich, ich hab's ja noch nie
ausprobiert, ich hab mich da nur mit, mit der Theorie quasi beschäftigt, ähm, dann
möchte man vielleicht, ähm, eine Tastatur haben, die besonders klein ist und dann landet
man mal bei so Layouts, ähm, die nicht mal mehr Pfeiltasten haben, das sieht super schick
aus, aber ist halt nicht benutzbar, wenn man Developer ist, meiner Meinung nach.
Ja, vor allem auch keine spitzen Klammern, du hattest mir eins, ein Layout geschickt ohne
spitze Klammern, also.
Doch, doch, die haben die spitzen Klammern woanders, weil das amerikanische Layouts sind.
Ah, okay.
Da ist ja nämlich, ähm, die spitze Klammern-Taste, ich, ich weiß gar nicht, wo die auf dem amerikanischen
Layout ist, aber da, ähm, wo die spitze Klammern-Taste ist, bei, bei, bei diesen, bei diesen Tastaturen
oder wäre, haben die einfach eine sehr breite Shift-Taste.
Äh, ja, genau, das, das ist was, äh, eine, die ich dir da geschickt hab, genau.
Ähm, ja, also, die sehen halt super schick aus, diese kleinen Tastaturen, aber da fehlt halt
zum Beispiel, äh, meistens halt die kompletten Pfeiltasten, ähm, und dann auch sowas wie
Drucken, Einfügen, Post 1, Bild hoch, runter, Ende und sowas, ähm, wo ich dann auch mal
überlegt hab, welche von den Tasten benutze ich denn eigentlich regelmäßig, ich hab dann
gemerkt, ich benutze nicht alle.
Ah ja, genau, ah, und da fällt mir noch was ein, die F-Tasten fehlen da oft auch.
Die sind dann irgendwie doppelt belegt mit den, mit den normalen Zahlentasten und dann hast
du da, wo du normal die Tilde hast, äh, nee, Quatsch, nicht die Tilde, das Dach und das
Gradzeichen, also links von der 1 hast du dann die Escape-Taste, also, nee, äh, damit komm
ich nicht klar. Äh, sieht schick aus, aber damit komm ich nicht klar. Ähm, genau, also ich
hab, ich hab da mir sehr, sehr viel angeschaut, äh, ich, ich werde, glaub ich, nicht glücklich
werden, weil am Ende möchte ich das vielleicht auch noch drahtlos haben, dann, und das soll
eine möglichst lange Akkulaufzeit haben und da wird's dann schon schwierig, irgendwie was
zu finden, also, äh, die Kombination aus allem, irgendwie leise, äh, mechanisch, taktiles,
gutes Feedback, minimalistisches Aussehen, drahtlos, vielleicht auch noch beleuchtet, drahtlos
und beleuchtet, mit langer Akkulaufzeit, vergiss, das geht einfach nicht. Also, ich möchte Dinge
mal wieder, die in der Kombination nicht funktionieren, ähm, das werden wir vielleicht in dem Podcast
noch öfter hören, mit anderen Sachen, das ist, ja. Also, wenn drahtlos, wenn du dich tatsächlich
dafür entscheidest, dann, äh, sag mal bitte Bescheid, wie das heutzutage funktioniert, weil die
letzte drahtlose Tastatur, die ich selber benutzt hab, die war, das war bestimmt auch schon
irgendwie 15 Jahre oder so her und da hab ich mir geschworen, nie wieder, weil das irgendwie
damals noch so frickelig war mit der Verbindung, dass da ständig dann irgendwie Zeichen ausgefallen
sind oder Zeichen mehrfach, äh, aufgetaucht sind und das ist beim Programmieren total ätzend.
Aber das ist mit Sicherheit mittlerweile ganz anders. Ich hab nur keine Erfahrungswerte, weil
ich seitdem immer, auch Mäuse, immer, äh, kabelgebunden, gekauft habe.
Ja, ähm, genau. Also, ähm, ich weiß nicht genau, wie stabil diese Bluetooth-Geschichte
ist, ähm, das scheint aber mittlerweile auch, obwohl, nee, das stimmt gar nicht, ähm, ich
hab eine Bluetooth-Tastatur und die funktioniert, also, die hab ich, die benutze ich eigentlich
immer nur mit dem iPad, ähm, die funktioniert aber eigentlich ganz gut. Also, da hatte ich
jetzt selten irgendwie Ausfälle, aber programmiert hab ich mit der nicht. Also, ich hab auch nicht
wirklich viel geschrieben mit der. Ähm, was aber heute der Stand der Technik ist, ist, ähm,
dass, also, gerade, es gibt auch drahtlose Gaming-Tastaturen und die können natürlich, das darf natürlich
gar nicht passieren, da darf nichts ausfallen, du darfst auch eigentlich keine Verzögerung
haben. Ja. Und, äh, wie das funktioniert, ist, die haben halt, die funktionieren nicht über
Bluetooth, sondern du hast so ein kleines, äh, so ein kleines USB-Nupsi, was du an deinen
Rechner dran steckst und die bauen ihre eigene Funkverbindung auf in einem bestimmten, in einem
äh, äh, Funk, äh, Bereich und dann, äh, scheint das, das scheint sehr, sehr schnell
zu funktionieren, also, ist wohl genauso, fast, weiß ich nicht, genauso oder fast genauso
gut wie Kabel. Das ist wohl der Stand der Technik bei drahtlos, also, das gibt's mittlerweile
und es gibt's auch für Mäuse, also, wenn du auch willst, dass das besonders zuverlässig
und schnell ist mit hoher Abtastrate und so, hast du das auch für Mäuse schon, das gibt's
auf jeden Fall. Genau. Ähm, ja, damit möchte ich das Tastaturen-Thema abschließen, das geht,
das ist eigentlich auch schon viel zu lange, ähm, weil es geht noch weiter.
Ähm, genau das mit dem, äh, genau, hatte ich in der Retro noch das Bier-Opening, das
haben wir jetzt schon gemacht. Ähm, das ist dann kein Teil mehr der Retro, aber was noch
Teil der Retro ist, ist, äh, wir hatten die Tage einen kleinen Spike in unseren Downloads
äh, und ich hab mich in der Statistik dann gefragt, Mensch, wo kommt denn der her?
Wir haben doch grad, äh, gar nicht unseren Freunden eine Mail geschrieben oder wir haben
doch grad, äh, irgendwie gar keine besondere Werbung oder irgendwas gemacht, äh, für den
Podcast, wo kommt denn jetzt dieser Spike her? Und, ähm, dann bin ich zufällig drauf gestoßen,
dass wir jetzt, äh, Bestandteil eines
T3N-Artikels sind, äh, auf der T3N-Seite, den verlinken wir dann auch, ähm, der, der Podcasts listet, die zum Thema Web-Development, äh, was sagen. Ähm, und offenbar, obwohl dieser Artikel schon etwas älter ist, äh, wird der immer wieder geupdatet.
Und es hat wohl tatsächlich das Update gereicht, um, äh, in diversen, äh, weiß ich nicht jetzt, Feedreadern oder sonst irgendwo zu landen oder keine Ahnung, vielleicht gibt's auch Leute, die manuell jeden Tag auf den Artikel gehen und gucken, ob, ob, ob der aktualisiert wurde.
Auf jeden Fall sind wir da jetzt mit dabei. Ähm, und, äh, ja, das, das hat offenbar dafür gesorgt, dass ein paar Leute, ein paar mehr Leute uns gefunden haben und wir freuen uns sehr.
Ja, und, äh, da wurde auch sehr nett über uns geschrieben. Also, da steht auch was von Flöten-Solo drin, das hab ich nie gespielt. Also, wer, wer, wer euch erzählt, dass wir hier schon mal Blockflöte gespielt haben in, äh, bei Wo wir sind, ist vorne, das ist eine glatte Lüge.
Das wäre doch verrückt.
Das soll mir, da soll mir mal einer das Gegenteil beweisen.
Also, herzlich willkommen an, an alle Neuhörer und Neuhörerinnen, die noch nicht während unserer halbstündigen Retro eingeschlafen sind.
Gut, das war, das war der kurze Applaus, der kurze stürmische.
Okay, ähm, dann würde ich sagen, kommen wir jetzt zur...
Oh, ich hätte vielleicht selbst kicken sollen.
Sollen wir es nochmal machen?
Sag mir mal an, ich drücke, okay.
Okay, du, du drückst und ich sage, jetzt kommen wir zur...
Die Property der Woche.
Die Property der Woche, auch nochmal schön geechoet.
Zur, zur, der Property der Woche.
So ein Quatsch.
Ja, diesmal inspiriert von csstrix.com und zwar haben die auf ihrer Seite, ich muss grad nochmal, äh, selber aufmachen, mit meiner schönen, laut klappernden Tastatur, ähm, auf den Überschriften und auch auf diversen anderen Links haben die so einen schönen, ja, nicht Regenbogen, aber so einen schönen Farbverlauf, den man sieht.
Also wenn man die Headlines von den Artikeln hovert oder auch diesen Read-Article-Link, da ist so ein Farbverlauf drauf.
Und ich hab das gesehen und hab gedacht, okay, wie haben die das denn gemacht?
Äh, früher hat man das, äh, gab's da JavaScript, äh, Libraries dafür, die dann nix anderes gemacht haben als Startwert, Endwert in Farbe und dann wird jedes, jeder Buchstabe, jedes Wort in ein eigenes Span gehauen und die, die Fontfarbe angepasst.
Aber, ja, aber dann, da hat dann wirklich jeder Buchstabe, richtig, jeder Buchstabe hat eine eigene Farbe und bei deren Effekt sieht man halt wirklich innerhalb eines Buchstabens auch, dass da ein Verlauf drin ist.
Und dann hab ich mir das angeschaut, wie das gemacht ist und bin dabei auf drei Properties, na gut, eigentlich sind es sogar vier Properties, ähm, gestoßen, die man dafür braucht.
Ähm, das sind also vier Properties der Woche sogar, wenn man so will.
Und ich hab dazu eine kleine Demo gebastelt, den Link, den gibt's natürlich auch in die Shownotes, der Moritz kann auch mal schon mal draufklicken, weil ich glaube, es macht, es macht immer Sinn, wenn man die tatsächlich nebenher offen hat.
Das wurde uns auch als Feedback gegeben, dass es manchmal schwierig ist, da zu folgen, ähm, ja, aber das liegt irgendwie in der Natur der Sache.
Also wir können natürlich immer nur beschreiben, was man denn theoretisch sieht, weil nicht jeder die Gelegenheit hat, das nebenher zu verfolgen, aber es macht auf jeden Fall Sinn, wenn man die Gelegenheit, die Möglichkeit hat, beim Hören auch die Links zu öffnen.
Und wer das offen hat, äh, für die anderen beschreibe ich es mal so gut es geht, der sieht, äh, unsere, unsere Namen, wo wir sind, ist vorne, eben genau mit so einem Verlauf, natürlich angepasst mit unseren Farben und ich hab auch zur Demonstration einen Border drumherum gemacht, damit man das eine Property noch besonders gut nachvollziehen kann.
Und wer das offen hat, der klickt am besten mal alle drei Checkboxen kurz weg.
Und dann sieht man Kästchen um die Worte, das ist auch zweizeilig, extra groß geschrieben, dass es zweizeilig umbricht und im Hintergrund ist ein Verlauf.
Das heißt, der eigentliche Verlauf, den man sieht, der Gradient, das ist wirklich nur ein ganz normaler Background-Gradient.
Also das wäre so die, ja, die nullte Property, sag ich mal, weil den Gradient brauchen wir natürlich auf jeden Fall.
Und wenn ich dann, äh, Webkit Text-Fill-Color transparent aktiviere, dann verschwindet der Text komplett, weil eben die Text-Fill-Farbe transparent wird.
Äh, warum Text-Fill-Color und nicht einfach nur Color?
Es funktioniert, soweit ich das getestet habe, auch mit Color, wenn ich einfach Color auf Transparent setze.
Ähm, ich kann nur davon ausgehen, dass es vielleicht als Fallback gedacht ist, weil Color wird eben überall in allen Browsern akzeptiert.
die Text-Fill-Color nur in manchen, vor allem denke ich natürlich auch wieder Can-I-Use, wie gewohnt.
Ähm, vielleicht gab es aber auch Probleme in bestimmten Browsern, ich weiß es nicht, ich kann es nicht nachvollziehen.
Also hier macht wird es auf CSS-Trix, jedenfalls mit Webkit Text-Fill-Color.
Interessant ist dabei, dass das wiederum ein Attribut ist, äh, ein Attribut ist, ähm, da hatten wir es schon mal drüber,
dass überall mit Prefix, mit Webkit Prefix eingesetzt wird.
Also egal ob Chrome oder Firefox oder, äh, der neue Edge, der jetzt auch auf Chromium basiert, ähm, auch Safari, überall brauche ich das Webkit Text-Fill-Color, äh, weil das nämlich ein Non-Standard-Attribut ist.
Also das ist in keinem Standard so festgeschrieben, aber es wird in den ganzen schönen Evergreen-Browsern, die wir heutzutage haben, unterstützt.
Also IE natürlich nicht, der ist da explizit mit ausgenommen. Ähm, Unterstützung über 93 Prozent, also das ist schon ganz ordentlich.
Dann.
Ja, ich hab's mir, ich hab's mir, ich hab mich schon gewundert, dass es funktioniert, weil ich hab's im Firefox offen.
Ja.
Aber das ist, das wurde ja, da irgendwann gab's ja mal diesen Switch, wo die Mozilla-Entwickler gesagt haben, ähm, wir wollen jetzt auch die Webkit-Geschichten.
Genau, also es gibt ja noch diverse Mods, Prefix-Sachen, aber ich glaube, gerade bei den neueren Sachen ist es eigentlich immer inzwischen auch Webkit, wenn's noch nicht im Standard ist.
Jedenfalls kommt als nächstes dann das Attribut, äh, Webkit-Background-Clip oder auch nur Background-Clip, je nach Browser, das aktuell als experimentell eingestuft ist.
Und, äh, das wird gesetzt auf den Wert Text und dadurch wird der Hintergrund zugeschnitten, eben ein Clipping, wie man das ja auch vom Clip-Attribut schon kennt, wo man Pfade angeben kann, äh, wird beschnitten, der Hintergrund auf den Text und dann sieht man schon ganz schön den Verlauf über den Font.
Ich versuch's jetzt auch mal wieder zu beschreiben, weil man's natürlich beim Hören nicht sehen kann.
Das Problem ist dabei, das ist ein Inline-Element, auf das ich das jetzt gesetzt habe, das so groß ist, dass es zweizeilig wird.
Und dann sieht man, der Verlauf ist von links nach rechts, äh, pink nach blau und das W von wo wir sind, ist vorne, ist schön pink und das vorne ist aber quasi komplett blau, also es bricht um und der Verlauf geht aber nicht von links nach rechts über das Wort vorne, sondern das vorne wäre ja eigentlich ganz rechts am Bildschirmrand, wenn's nicht umbrechen würde und wäre dann blau und bricht aber komplett blau um.
Und da gibt's jetzt, äh, genau, äh, zu Background-Clip hab ich noch vergessen was zu sagen, äh, dieser Text-Wert, der ist erst in, ähm, im CSS-Backgrounds-and-Borders-Module-Level-4 definiert.
Ähm, genau, und für dieses, dieses Umbruch-Problem, und das ist auch der Grund, warum ich den Border gesetzt hab jetzt für die Demo, es ist so, wenn ein Inline-Element mit Border oder sonstigen Styles umbricht, dann bricht der Border in der Mitte durch.
Also, bei, bei der Zeile ist es jetzt so, wo wir sind, ist, ist in einer Zeile, vorne ist das zweite, die zweite Zeile, wo wir sind, ist, da ist rechts kein Border, der hört, der ist einfach nicht da und in der zweiten Zeile geht's dann, äh, links ohne Border weiter und der Border endet erst ganz rechts.
Weiß nicht, ob man das jetzt sich vorstellen kann.
Jedenfalls wird der Border kaputt gemacht.
Wenn ich jetzt aber...
Link anklicken, Shownotes benutzen.
Ja, richtig, also es macht einfach in dem Fall Sinn und es ist eigentlich immer bei den Properties so, dass es, äh, schon sinnvoll ist, sich das anzuschauen.
Wenn ich das jetzt aktiviere, dann hab ich wunderschön um beide Zeilen außenrum einen Border.
Und ich könnte mir vorstellen, dass das auch in einigen anderen Situationen sehr hilfreich ist, jetzt nicht nur für dieses fancy, äh, Regenbogen-Gradient-Gedöns.
Ähm, genau.
Also man sieht einerseits den Border, der jetzt um beide Zeilen drumherum ist, aber auch der Verlauf ist jetzt schön in beiden Zeilen gleichmäßig verteilt, von Pink nach Blau, von links nach rechts, bei beiden Worten.
Und das in der Kombination ergibt eben diesen tollen Regenbogen, äh, ja, Gradient-Effekt.
Und das fand ich einfach irgendwie schick und das hab ich auch so noch nirgends anders gesehen.
Und das waren gleich drei Attribute auf einmal, die ich noch nicht kannte.
Und das fand ich toll, deswegen wollte ich's teilen.
Ja, super, echt gut.
Also ich find's, also ich, auf jeden Fall.
Wir sollten's mit dem Selbstbeklatschen, glaub ich, nicht übertreiben.
Was, warum?
Äh, also, wer, also wer, wer den, wer den Titel und, und die Beschreibung von unserem Podcast gelesen hat und dann noch zuhört und dann sich darüber aufregt, dass wir uns selbst beklatschen, der ist wirklich selbst schuld.
Außerdem sind die Leute auch selber schuld, wenn's halt nie negative Kritik gibt.
Also, dann fühlen wir uns halt einfach geil.
Damit kommen wir zum Geil-Teil.
Nee, Spaß, das, äh, noch, noch nicht.
Noch nicht.
Äh, hast du noch, hast du noch was dazu?
Konstantin.
Hattig.
Das darfst du nicht rausschneiden.
Nee, wir haben, wir haben noch nicht mal, noch nicht mal unser Tagesthema.
Bist du, hast du noch eine Anmerkung zu dem, zur Property?
Äh, ich, ich wollte nur sagen, ähm, also dieses Box-Decoration-Break-Clone, das ist, das ist das, ähm, genau.
Genau, den Wert hatte ich noch gar nicht genannt, glaub ich, hab ich vergessen.
Also, Box-Decoration-Break-Clone sorgt dafür, dass eben die, die, ja, das sagt ja auch.
Ist ja eigentlich der Name, wenn man's übersetzt, dass diese Dekorationsbestandteile eben geklont werden auf die nächste Zeile, auch bei Umbruch.
Äh, ich glaube, das hätte ich das ein oder andere Mal schon gebraucht.
Ähm, das wurde, das kannte ich nicht, also, ich bin mir jetzt grad nicht sicher, ich glaube, äh, Background-Clip, das hab ich schon mal gehört.
Ähm, Text-Fill-Color bin ich mir relativ sicher, dass ich das noch nicht kenne.
Ähm, aber das, das Box-Decoration-Break-Clone, das hätte ich definitiv schon mal gebraucht.
Aber das ist wahrscheinlich, ich glaube, so der letzte Anwendungsfall, wo ich mir das gewünscht hätte, ist wahrscheinlich so acht oder zehn Jahre her.
Ähm, und seit, dann hab ich halt, dann, ja, dann hab ich beschlossen, ähm, das, das gibt's nicht, das, äh, also, äh, geht nicht, weil ist nicht.
Ähm, und hab das abgehakt, aber sehr gut zu wissen, dass es sowas jetzt gibt, also, ich mein, äh, ist ja schon unglaublich.
Also, funktioniert das vielleicht auch mit Hintergrundbildern, wollte ich noch, noch kurz hinzufügen.
Also, nicht nur Gradients, sondern einfach so den Hintergrund irgendwie durchscheinen lassen.
Und auch dieses, äh, ja, dieses Text-Clipping, also, fand ich einfach cool.
Also, schöner Effekt, auch, wenn man dafür drei unbekannte Properties braucht.
Aber wie gesagt, die Browser-Abdeckung, also, was ich geschaut habe in den aktuellen Browsern, ich mein, klar, IE darf man sich jetzt gar nicht erst anschauen, IE11.
Ähm, aber jetzt mit, mit, mit Edge, seit der auch Evergreen ist, also, in den aktuellen Browsern, ja, funktioniert das und da hat man einen Großteil der User abgedeckt.
Geht das im aktuellen Edge, also, ich mein, in, in Edge nicht Chromium?
Ähm, kann ich den nicht mehr sagen, weil ich den nicht mehr hab.
Du hast den schon?
Ich hab, der ist schon, der hat sich bei mir schon aktualisiert auf, auf, äh, Chromium.
Ach, von ganz alleine?
Mhm.
Das find ich ja interessant, weil da warte ich drauf seit ewigen Zeiten.
Ja, das erzähl ich auch grad irgendwie Käse, aber, äh, ich öffne mal ganz kurz das CodePen noch in, in dem Edge, der nicht auf dem Dev-Channel ist, ähm, und da funktioniert's jedenfalls.
Äh, okay, aber warte mal einen Moment, das kann ich, das kann ich kurz auch machen, ähm, weil ich find das, äh, ich, ich hab eigentlich gedacht, irgendwann, das war mal angekündigt für Anfang des Jahres, dass der automatisch mit dem Windows-Update kommt, der neue Edge.
Äh, äh, aber es geht auch mit dem alten, ich hab nämlich den alten hier, da bin ich mir sehr, sehr sicher, dass das noch der alte Edge ist.
Ja, ich bin mir jetzt inzwischen auch recht sicher, dass das doch der alte Edge ist, ich hab nämlich den zweimal, äh, in der Taskleiste, ich dachte nur, der hätte sich aktualisiert.
Ne, also, es scheint tatsächlich auch schon in Edge zu funktionieren.
Oh, was? Pro? CodePen Unlock All of...
Was da nicht funktioniert, ist das, äh, Box-Decoration-Break-Clone.
Das ist vielleicht so der einzige Abstrich, das heißt, ähm, der Regenbogeneffekt bei CS-Asterix dürfte dementsprechend auch bei Mehrzeihlichkeit nicht funktionieren.
Ähm, ja, da seh ich das Problem jetzt aber nicht.
Vielleicht haben die auch noch irgendwie ein Fallback für den, für den alten Edge, ich weiß es nicht, aber, äh, ja.
Was ich in deinem Beispiel auf jeden Fall, was ich dazu noch sagen wollte, ist, ähm, da kann man auch ein bisschen View lernen, weil ich hab grad gesehen, du hast es mit View.js gebaut.
Das wollte ich noch sagen, gut, dass du's sagst.
Das hatte ich nämlich eigentlich, ich hatte das schon angedacht ursprünglich auch in unserem, in so einem Trello als, äh, eigenes Geil-Teil.
Und dann dachte ich, na komm, ich bastel das jetzt eh wieder mit View, die Demo, äh, dann, dann erwähnst du's mal.
Es gibt nämlich jetzt bei CodePen die Möglichkeit, View-Single-File-Components direkt zu bearbeiten.
Und aktuell funktioniert das nur über einen Link, wenn man den kennt.
Ach.
Und zwar CodePen.io slash Pen slash Editor slash View.
Und dann kommt man zu einem speziellen Editor, äh, in dem man, wie gesagt, Single-File-Components direkt bearbeiten kann.
Und das ist für mich als, als, äh, View-Entwickler ist das natürlich super.
Also, ähm, ich hab mich grad noch gefragt, wo ist denn das, wie, wo ist denn der CSS-Tab?
Genau.
Und wo ist denn der HTML-Tab?
Und da ist alles drin.
Also, wer das nicht kennt, View-Single-File-Components, ähm, das ist eine Datei, in der ist ein Template-Tag, in der ist, äh, mindestens ein Script-Tag und in der kann ein Style-Tag sein.
Und dann hab ich eben eine Datei, meistens .view, in der alles drin ist, äh, da gibt's jetzt wahrscheinlich welche, die das noch nicht kennen und gleich sagen hier so, äh, Separation of Concerns und so.
Ähm, aber die, die, die, die Concerns sind ja trotzdem abgekapselt, ich hab ja keine Durchmischung, sondern ich hab ja trotzdem alles an seiner eigenen Stelle, aber eben in eine Datei.
Ähm, und alles, was zu einer Komponente gehört, und View ist ja eben component-driven, ähm, ist in einer Datei drin und ich find das sehr sinnvoll und ich arbeite sehr gerne mit View, hab ich schon tausendmal gesagt, und ich arbeite sehr gerne mit Single-File-Components und, äh, das, äh, Code-Pen, das jetzt, ähm, zeigt, ähm, anbietet, zeigt mir, dass ich da nicht der Einzige bin und ich find's toll.
Lass uns mal ein View-Projekt bauen, ich hab da, also ich hab da nur ganz, ganz, ganz, äh, naives Basiswissen. Ähm, das können wir sehr gerne mal machen und dann hier darüber,
berichten. Wie das für dich so als, äh, Einsteiger quasi dann.
Genau, also ich, äh, vielleicht, das wär, ah, warte mal, ich, ich weiß genau, wie wir das machen. Äh, wenn wir, wenn wir nochmal, wenn wir nochmal irgendwie was haben, was, was wir gemeinsam bauen wollen, was jetzt nicht grad, äh, ein WordPress-Template ist, ähm, das kommt ja vielleicht nochmal, dass wir vielleicht eine Demo mal gemeinsam bauen oder so, ähm, dann lass uns das mal über, ähm, das Faust-Code, äh, Remote-Sharing, ich hab keine Ahnung, ich hab, ich hab vergessen, wie's heißt, ähm, machen, dann können wir das,
können wir das auch, äh, in, in, in der Quarantäne-Zeit, so, solange wir irgendwie noch, äh, zu Hause sitzen, irgendwie auch mal gemeinsam machen und dann lass uns mal was mit View bauen, ich hab richtig Bock drauf. Äh, ich bin da aber wirklich sehr, sehr, sehr unbedarft und neu, ich glaub, ich versteh die Grundkonzepte, aber ich hab's nie benutzt, nie so richtig benutzt, also ich hab halt mal so, so ein kleines Tutorial gemacht, aber da lernt man ja nicht wirklich, wie so ein Framework funktioniert.
Würde mich sehr freuen, wenn ich da meine Begeisterung weitergeben kann.
Ja, dann, dann machen wir das doch mal.
Sehr schön.
Aber vorher muss ich, glaub ich, noch diesen, diesen View-Film gucken, den du mal gefeatured hast, den ich danach nicht geguckt hab.
Hast du auch noch nicht geschaut? Mensch, ist aber auch keine gute Voraussetzung.
Vielleicht mach ich das, ich hab jetzt dann heute zwei Bier im Kopf, ich kann den, kann den mal im Anschluss dann vielleicht.
Alles klar.
Ähm, gucken.
Dann würde ich sagen, machen wir als nächstes, äh, ein kleines bisschen Werbung und dieses Werbung in, in Airquotes, äh, es wurde uns nahegelegt, äh, dass wir das immer dazu sagen, unsere Spam-Spots, dass das nicht echte Werbung ist, sondern dass das tatsächlich echte Spam-Mails sind, die wir bekommen, ähm, steckt ja eigentlich auch schon im Namen, ähm, die wir vertonen.
Genau, das hat man, das war tatsächlich mal Feedback, wir haben tatsächlich mal Feedback, das greifen wir natürlich dann auch sofort hier auf in der Sendung, also wer hier mal, äh, erwähnt werden will, äh, namentlich jetzt so nicht, weil ich wieder vergessen habe, wo das, äh, herkam, ähm, ja, dann, äh, gebt uns Feedback.
Wir reagieren da auch drauf.
Wenn ihr namentlich erwähnt werden wollt, müsst ihr dazu sagen, dass ihr damit einverstanden seid, dass ihr namentlich erwähnt werdet, sonst werdet ihr nicht namentlich erwähnt.
Und wir schicken euch dann ein DSGVO-Formular.
Zwei, äh, ich würde sagen, wir schicken einfach zwei.
Genau.
So schön.
Schon kriegen wir kein Feedback mehr.
Mist.
Nein, äh, genau, äh, Spam-Spot.
Echte Spam-Mail vertont von Konstantin Groß, dem wunderbaren Sprecher.
Oh, Mensch.
Ja, das ist so.
Graues Haar.
Verjüngungsbalsam.
Wahnsinn.
Mit der neuen Haarfärber.
Graue Haare weg.
Graue Locken im Haar.
Keine Panik.
Wasche es mit Mittel gegen Ergrauen.
Grau Haare.
Weg damit so.
Hier können sie sich problemlos abmelden.
Ehemalige dich wiedergewinnen, Selbstvertrauen zurückgewinnen.
Neues Haar.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Du siehst so aus, als wolltest du vor dem Tagesthema Jingle noch was sagen.
Ja, auf jeden Fall.
Du hast so eine wahnsinnig geile Stefan-Rab-Jingle-Stimme.
Also, wirklich.
Jetzt haben wir sogar verraten, wo ich das abgekupfert habe, Mensch.
Ja, ich meine, ich würde nicht sagen abgekupfert, sehr gut imitiert.
So würde ich, also das muss man ja erst mal hinkriegen.
Eigentlich spreche ich ja tatsächlich so.
Ich bemühe mich nur immer sehr, hier eine professionelle Podcast-Stimme an den Tag zu nehmen.
Genau, wenn ihr dem Konstantin mal in echt begegnet, der spricht eigentlich so wie dieser komische Sprecher bei Stefan Raab.
Genau.
Und da wir jetzt schon irgendwie über 40 Minuten reden, glaube ich, hat der Konstantin mich jetzt dazu gezwungen, dass wir mit dem Thema anfangen.
Und nein, das ist nicht geschnitten.
Er hat einfach jetzt das Jingle abgespielt, dann kann ich gar nichts mehr anderes machen.
Jetzt sind wir nämlich tatsächlich beim Thema.
Reicht jetzt auch mal, Mensch.
Danke, mit Gewalt.
Also genau, das Thema wurde ja ganz am Anfang schon genannt.
Also es geht um Dinge, die mal einem als Magie erschienen sind und irgendwann dann zum Alltag gehört haben.
Beziehungsweise irgendwann hat man so hinter den Vorhang geschaut und dann, ich hatte da in meiner Karriere so mehrere so Aha-Erlebnisse, wo ich dann so dachte,
Ach Gott, das ist ja viel einfacher, als ich gedacht habe, wie soll ich das sagen, ja doch meistens war der Gedanke, ach so einfach ist das.
Man vermutet hinter irgendwas oder ist es irgendwas, wo man nicht genau weiß, wie es funktioniert und man vermutet da irgendwie ganz, ganz verrückte Sachen dahinter und jedes Mal, wenn man dann dahinter guckt, merkt man dann so, oh, da steckt gar nicht so viel dahinter.
Das ist ja nur, das ist ja nur das.
Darum geht es heute.
Hol dir schon mal ein Bier, es gibt 17 Punkte.
Was?
Nein, das war schon.
Wir haben extra vorher nicht gesagt, wie viele Punkte sind.
Diese 17 Punkte geheimer Webmagie werden dich zum Staunen bringen.
Bei Punkt vier habe ich geweint.
Genau.
Genauso wie dieser Clickbait-Artikel, den ich da vorhin offen hatte.
Der als erstes, egal, nein, darüber sprechen wir jetzt nicht.
Wir haben schon viel zu lange geredet.
Wieder zwei Minuten Match seit dem Themen-Jingle.
Ja, dann, wir brauchen vielleicht noch ein, jetzt fängt es wirklich an, Themen-Jingle.
Dabei ist der schon so ernst.
Okay, jetzt werden wir jetzt ernst.
Mein erster Punkt auf dieser Liste ist, Webseiten sind reine Textdateien.
Wenn du hier zuhörst und noch irgendwie halbwegs folgen kannst, dann weißt du das wahrscheinlich schon.
Aber für mich war das eine extrem große Erleuchtung, als ich gemerkt habe, das ist nicht irgendwie irgendwas Magisches, irgendein binäres Format oder irgendeine Datei, in die ich nicht reingucken kann, was es ist.
Sondern letzten Endes habe ich da eine ganz einfache Textdatei vor mir, die ich mit meinem Editor bearbeiten kann.
Und die dann einfach unter einer bestimmten Dateiendung abspeichere.
Also statt txt mache ich einfach daraus .html.
Und dann ist das plötzlich eine Datei, die ich im Browser öffnen kann.
Das heißt, also ich meine, das simpelste Beispiel wäre, ich schreibe einfach nur irgendwas in eine Textdatei rein.
Also irgendwas, hallo.
Und nenne die dann irgendwas .html oder test.html und öffne die dann im Browser und dann steht da plötzlich hallo.
Also das war für mich ein großer Moment, als mir klar wurde, ich brauche dafür auch keine verrückte Software oder irgendwas, sondern Textdateien, die begegnen einem ja immer mal wieder.
Wann war das? Letzte Woche?
Gestern.
Und heute habe ich mir gedacht, wir machen mal einen Podcast über Webdesign.
Und verkünden die große Neuigkeit, hey, das sind Textdateien, was ihr da schreibt.
Die Frage war wahrscheinlich ernst gemeint, wann das war.
Nein, ja tatsächlich, ich wollte nicht drauf hinaus, doch, ja.
Das war, also das genaue Datum kann ich dir jetzt nicht mehr sagen.
Ich sage auch keinem das Ergebnis, das man im Webarchive vielleicht noch finden könnte aus dieser Ära.
Es war Anfang der 2000er, es war vielleicht 2000, 2001.
Da bin ich mir jetzt nicht ganz genau sicher.
Wahrscheinlich 2001.
Und das war der Moment, als ich in Frontpage mal diesen Quelltext-Tab gefunden habe.
Und dann, ich meine, wenn man das, wenn man zum ersten Mal Quelltext sieht, auch wenn es nur HTML ist, in Anführungsstrichen, und damals halt noch wirklich sehr, sehr simples HTML.
Da gab es ja ganz viel noch nicht, was wir heute haben.
Und dann auch noch generiertes HTML von Frontpage eben, also Microsoft Frontpage, die sehr viel Älteren werden sich erinnern, dass es sowas mal gab.
Dann ist auch das erst mal so ein bisschen Magie für einen.
Man sieht das irgendwie und man versteht aber auch nicht jetzt, wie funktioniert denn das jetzt.
Also da ist einem dann noch nicht klar, dass es da irgendwie ein HTML-Element gibt.
Oder wie funktionieren überhaupt Elemente?
Was ist überhaupt ein Element?
Was ist denn ein Attribut?
Das weiß man ja in dem Augenblick noch nicht.
Also da war dann so der Weg, ich mache das mal auf und ändere mal eine Zahl und gucke, was passiert.
Also so hat das bei mir einfach angefangen.
Und das war aber dann so schon diese Revelation, okay, da ist jetzt einfach tatsächlich doch nur Text.
Und wenn man sich Mühe gibt, kann man da auch irgendwie was rauslesen.
Und ich kann, also es ist aber menschenlesbar.
Es ist zwar, es ist so eine Mischung zwischen Maschinen- und Menschen-Kram.
Und das, ja, das war für mich eine große Erkenntnis.
Und ja, war gestern.
Ja, interessant, weil wir da auch irgendwie, glaube ich, aus einer anderen Richtung jeweils kommen.
Also du hast angefangen mit Frontpage und da irgendwie halt mit dem Interface die Sachen zusammenzuziehen.
Ich bin halt direkt eingestiegen in, also mit diesem, wir hatten es ja in der, glaube ich, allerersten Folge oder in der nullten Folge, glaube ich sogar, davon, wie wir dazu gekommen sind.
Und ich habe halt direkt angefangen mit dem Data-Backer-HTML-Buch.
Ja, also da war für mich dann, ja klar, was passiert.
Aber klar, wenn man aus der anderen Richtung kommt, dass man visuelle Editoren nutzt.
Und ich meine, die gibt es ja heute auch noch.
Und viele Leute, die so ins Web einsteigen, nutzen vielleicht auch tatsächlich die am Anfang.
Für die ist das tatsächlich vielleicht eine Erleuchtung, auch heute noch.
Ja, ich meine, ich habe ja vorher, bevor ich irgendwie Webkram gemacht habe oder bevor ich da mit Frontpage romantiert habe, habe ich auch schon mal ein ganz kleines Programm auf einem C64 geschrieben.
Aber das war für mich, das habe ich nicht miteinander verknüpft.
Das war mir nicht so klar.
Das war auch damals so simpel.
Ich meine, da hast du irgendwie eine Endlosschleife mal eben gebaut, weil du hast einfach nur irgendwas abgeschrieben, was in irgendeinem Buch stand.
Zumindest war das bei mir so.
Ich habe was abgeschrieben, was im Buch stand.
Und da stand dann halt irgendwie wahrscheinlich 10 Print Hallo oder sowas und dann 20 Go to 10.
So, und damit war es das dann schon erledigt.
Und das habe ich aber also in meinem Kopf nicht verknüpft mit, naja, wahrscheinlich ist irgendwie Quellcode so.
Für mich war das irgendwie so ein unbekannter Nimbus, keine Ahnung, irgendwas, irgendeine Magie eben.
Und das ist halt auch wieder der Unterschied zwischen, da hatten wir auch schon mal drüber, richtige Programmierung in Anführungsstrichen, ja, und eben halt einer Mark-Absprache, die halt im Browser eben anders gerendert ist als das, was ich da reinschreibe.
Ja, genau.
Jetzt habe ich auch mal wieder genau gesagt.
Ich finde, das sagen wir eigentlich viel zu selten, weil das wird in Podcasts viel zu selten.
Äh, sollten wir auch noch mehr streuen, als wir das tun.
Wir sollten noch ein bisschen mehr äh und ein bisschen mehr genau sagen.
Dann sage ich jetzt, genau, dann komme ich jetzt zu meinem ersten Punkt.
Ähm, und der ist noch ein bisschen mehr Meta, gar nicht Frontend, Computer-Hardware generell und im Speziellen das BIOS-Setup.
Das war irgendwie so als Kind so bei den ersten Rechnern, also mein, der erste Computer, den wir hier im Haus hatten, bei meinen Eltern im Haus, ähm, das war so ein Riesenröhrenbildschirm und schwarz mit gelbem Text.
Also er war nicht mal weiß, sondern gelber Text.
Äh, irgendwie, ja, das war halt für mich, ja, das war wirklich Magie, ne.
Damals war ich halt wirklich auch noch ein Kind und, äh, da macht man sich ja gar nicht so Gedanken, was steckt da dahinter und dann konnte man da irgendwie, da gab's schon so eine Art Grafikprogramm, ne, unter DOS alles noch, da gab's auch noch kein Windows bei uns.
Und, äh, da konnte man dann so halt diese Pipe-Symbole und was weiß ich was rumschieben und das war schon, wow, Wahnsinn, wie das funktioniert.
Und, ähm, ja, BIOS war auch immer lange Zeit so, oh Gott, geh da bloß nicht rein, mach da bloß nichts kaputt, sonst funktioniert am Schluss nichts mehr.
Und ich mein, da hat sich ja auch viel getan, ja, also wenn ich jetzt das BIOS von meinem, äh, ASUS-Mainboard anschaue, das ist ja wie so ein kleines, richtiges Operating-System, ja, wo ich mit der Maus inzwischen bedienen kann, nicht mal irgendwie mit, mit der Tastatur, sondern du kannst da draufklicken.
Und, äh, auch dieses, ähm, ja, wenn da mal irgendwie beim, wenn der beim, beim, beim Hochbooten dann abstürzt und dann ist das BIOS für immer kaputt und dann, äh, ja, was ist ein Problem, da musst du den Chip austauschen oder was weiß ich.
Heute ist das so, da sind zwei Chips drauf und wenn du einen BIOS irgendwie zerbrezelst, dann, äh, gibt's nur ein Backup und dann, äh, spielst du das halt wieder ein und dann funktioniert das.
Wusste ich gar nicht, dass das heute so ist. Also bei meinem altmodischen Rechner gibt's nur einen BIOS, glaub ich, und da ist das nur so mit, mit, äh, du musst die richtigen Shortcuts kennen, um reinzukommen und dann da drin zu navigieren.
Also du kannst sogar zum, also ich hab noch was sehr altmodisches.
Zum Firmware-Update kannst du direkt im Dateisystem auf deinen Festplatten die, die Firmware-Datei auswählen, die Bener-Datei und dann wird das direkt im Interface, äh, eingespielt.
Und wenn dabei was kaputt geht, dann gibt's wie gesagt ein BIOS. Also es ist wahrscheinlich jetzt auch nicht auf jedem Board so, das ist jetzt halt so ein, so ein Gaming-PC, äh, Board, ähm, wo das halt der Fall ist, aber es geht jedenfalls und hat diese, diese Angst vor irgendwas im BIOS machen, die ist halt inzwischen echt verloren gegangen.
Also grad kürzlich hatte ich das wieder den Fall, als ich da in Laravel, Laravel, ich kann das nicht aussprechen, Laravel, mit jedem Bier wird's, wird's schlechter, ich weiß auch nicht.
Ähm, als ich da eingestellt bin und muss ich dann die Virtual Machine erst irgendwie deaktivieren, äh, aktivieren, die, die Funktionalität, äh, für die CPUs.
Und dann gehst du halt da schnell rein und setzt ein Häkchen und, und startest neu. Und früher war das so, oh nein, äh, allein schon dieses gefährliche Blau, das dich ja angeleuchtet hat, wenn du da auf F2 gekommen bist beim Hochfahren.
Ähm, genau.
Ja, aber gut so, aber gut so.
Ja, man sollte natürlich da nicht einfach so.
Ich glaub, das war schon, das war schon, das war schon, das war schon gut so, dass das so war.
Ja, vor allem, als ich noch kleiner war, war das gut so, dass ich da nicht irgendwie, ja.
Ja, aber Hardware generell so.
Ja, aber konnte man da noch kein BIOS-Passwort setzen, also.
Doch, doch, doch, doch, das ging.
Dann hätte, das hätte man ja, das hätte man ja setzen können, um den kleinen Konstantin da draußen zu halten oder hätte der dann halt eins, zwei Titten, Titten.
Ja, das ist wie, äh, Kindersicherung am Fernseher, das hält nicht lang.
Du, du findest den Zettel, auf dem's aufgeschrieben ist dann wahrscheinlich.
Oder halt ausprobieren.
Ja, und, äh, auch Hardware generell, dann, wenn man irgendwie angefangen hat, seine, seine, seine Rechner dann selber zu bauen oder halt auch mal wirklich selber was zu reparieren, wenn irgendwas kaputt war und so.
Das hat alles irgendwie so seinen Schrecken verloren.
Aber ich will jetzt gar nicht weiter in die Tiefe gehen.
Schon wieder viel zu viel Zeit.
Oh nein, nein, nein, also, komm, ist es, also erstens mal gibt's noch, gibt's noch, gibt's noch, keine Zeit.
Nein, was, wieso keine Zeit?
Also, das ist ja das Schöne am Internet und an einem Podcast, ist, dass wir unbegrenzt Zeit haben.
Und wenn eine Folge 27 Stunden lang wird, dann wird's halt 27 Stunden lang, das ist ja nicht unser Problem, sondern das von den Hörern.
Da hab ich jetzt so einen Tweet dazu geliked, ich weiß jetzt leider auch nicht mehr, ähm, von wem, vielleicht such ich den nochmal raus, wo auch jemand gesagt hat,
hört auf, war es sogar Emma Bos, Bos, Bos, Bos, Bos, Bos, Bos, Bos, Bos, Bos, Bos, ich weiß es nicht.
Jedenfalls hat, es war eine sie, soweit ich mich erinnere, und sie hat gesagt, ähm, hört auf, den Leuten vorzuschreiben, wie lang ihre Podcasts sein sollen oder dürfen.
Ja, und wenn, wenn man's halt auf zweimal hört, dann hört man's halt auf zweimal, es zwingt einem ja keiner.
Aber wir werden jetzt schon wieder Meta. Und, äh, ich würd sagen, du darfst gerne mit deinem nächsten Wort vorfahren.
Ne, dazu, dazu, das muss ich noch kurz abschweifen da in die Richtung, ein kurzes Zitat noch, also, äh, Tim Britloff sagt ja, ähm, der Podcast ist so lang, also, man muss den so lang machen, wie er halt, wie das Thema halt braucht.
Und ich find's, ich find's blöd, es irgendwie zu verknappen oder zu verkürzen. Ich mein, klar, man muss sich überlegen, wie weit man ausschweift irgendwo an der Stelle, wie weit geht man jetzt weg von dem, was, wo man eigentlich hin will.
Also, zum Beispiel, indem man vom Thema abschweift, um Meta zu sprechen.
Ja, aber, also, ich, zu BIOS wollte ich noch kurz sagen, ähm, um wieder zum Thema zurückzukommen, danke, dass du mich kurz zurückmoderiert hast, ähm, das, also, das hab ich in erster Linie genutzt, um halt ein BIOS-Passwort auf dem Rechner einzurichten.
Und zwar ein Passwort, das ja, also, das, das, das, das ich allgemein, egal, Startpasswort, also nicht nur ein Passwort, das das BIOS schützt, sondern ein Startpasswort, was dann dafür sorgt, dass man den Rechner eigentlich nur starten kann, wenn man das Passwort weiß.
Damit keiner deine Schmudeleien sieht.
Und ich frage, ich frage mich bis heute, ob das wirklich sicher ist.
Also, äh, nee.
Also, kann ich dir aus eigener Erfahrung sagen?
Ich hab mir das schon gedacht.
Nein, nein, ich mein, also, angenommen, es ist ein Passwort, was keiner rausfindet.
Aber, äh, das kann, das kann man bestimmt relativ gut bruteforcen.
Musst du gar nicht.
Also, wenn du an die Hardware rankommst, also,
früher bei den Mainboards war das teilweise nur ein Jumper,
den du gezogen hast und reingemacht hast, ja.
Oder du musstest, äh,
hättest theoretisch eine Batterie rauslöten können und wieder reinlöten.
Also, ja.
Okay, also, du musst schon wissen, was du tust.
Ja, natürlich, klar.
Also, du musst schon an die Hardware auch rankommen.
Aber, okay, Jumper find ich easy.
Was jetzt löten, find ich, ist schon eine relativ große, große Hürde.
Aber es gibt, es gibt auf, äh, so Firmenlaptops, ähm, ja, tatsächlich die Möglichkeit, so eine
Komplettverschlüsselung einzurichten.
Und das ist dann schon tatsächlich sicher.
Also, da brauchst du, um überhaupt, also, ich weiß nicht, jetzt will ich jetzt technisch auch keinen Quatsch erzählen.
In meiner Vorstellung ist es so, dass dieser Masterboot-Sektor verschlüsselt ist und dass ich den mit Eingabe des Passwortes entschlüssel.
Oh ja, das war ein schlimmes Wort.
Es gab Viren früher, die sich darin eingenistet haben.
Und jedenfalls funktioniert jetzt auch eine richtige, ähm, Festplattenverschlüsselung.
Das heißt, das ganze Betriebssystem, alle Dateien sind entschlüsselt und die werden dann eben erst, äh, entschlüsselt nach Passwordeingabe.
Und das ist dann schon sicher, glaub ich.
Und du hattest Angst, unsere Sendung wird zu kurz mit so einem kleinen Thema.
Ja, jetzt sind wir schon, schon gleich bei einer Stunde.
Siehst du, hiermit wäre das Gegenteil.
Ja, ich, ich glaube, ja, ich glaube, auf, auf der Hörerzahl ist noch nicht ganz die Stunde, weil wir nicht, äh, bei, bei Null im Prinzip mit, äh, ist auch egal.
Sprich nur eine halbe Minute, dann haben wir sofort.
Nein, nein, ach, ja, ich höre mich ja gern selbst reden, ne, ich höre es ja auf meinen Kopfhörern.
Nein, ach, Mensch, jetzt habt ihr alle meinen Staubsauger gehört, der möchte nämlich, dass ich ihn woanders
woanders hinstelle.
Ähm, äh, äh, mein nächster Punkt ist, ähm, ein Server ist auch nur ein Computer mit ganz normaler Ordnerstruktur.
Also, wenn man, ähm, in der, in der Frontpage-Phase ist, so nenne ich das jetzt mal, äh, hab ich ja jetzt eben schon nochmal erklärt.
Und im Prinzip noch gar nicht weiß, okay, man weiß jetzt, es gibt irgendwie HTML-Dateien und da steht irgendwie was drin und das kann man irgendwie so halbwegs als Mensch auch
lesen. Und es gibt vielleicht noch sowas wie CSS. Zumindest war das in meiner Zeit damals so, oder gab es CSS.
JavaScript war, war so im Entstehen, sag ich mal. Äh, hab ich damals auch, naja, doch, hat schon Anwendungen gefunden.
Aber da waren das auch noch Java-Applets, äh, falls sich Leute noch dran erinnern. Also, es waren merkwürdige Dinge im Netz damals.
Ähm, ähm, es war eine wichtige Erkenntnis rauszufinden, ähm, wenn ich jetzt mich mit einem Server verbinde.
Also, was ist denn denn ein Server überhaupt? Ein Server ist auch irgendwo nur ein Computer, der irgendwo rumsteht.
Das ist nicht, äh, nix verrückt. Das ist nur irgendein anderer Computer. Ähm, und auf den kann ich einfach Dateien rüberspielen.
Genauso, äh, wie die bei mir rumliegen, äh, versuche ich halt, dass die dann auch da genauso rumliegen.
Und das Einzige, was man da dann, glaube ich, wenn man irgendwie eine Webseite zum Laufen bringen will, noch wissen muss,
ist, dass die, die Datei, die in meinem Root-Verzeichnis, also in meinem, in meinem, ja, in meinem Webseiten-Verzeichnis liegt,
da muss eine Index-HTML liegen, weil das ist die Datei, die normalerweise angezogen wird, wenn ich dann auf meine, äh, Domain gehe.
Also, in dem Fall, wo wir sind, ist vorne.show, äh, wenn ihr da drauf geht, dann seht ihr, also, dann würdet ihr im normalen Fall sehen,
da gibt es natürlich noch, also, PHP kann man da noch Schweinereien machen mit allen möglichen serverseitigen Sprachen.
Aber dann seht ihr normalerweise einfach die Index-HTML, das ist die erste Seite, auf die ihr da stoßt.
Das heißt, die Erkenntnis war für mich wichtig, zu wissen, ich kann einfach irgendwelche Text-Dateien oder HTML-Dateien,
die eigentlich nur Text-Dateien sind, auf, mit einem FTP-Programm, File-Transfer-Protokoll, auf den Server laden
und, äh, die Struktur sollte dann da genauso aussehen wie auf meinem Rechner und dann, äh, dann, dann passt das, dann läuft das, das, das ist es
und dann muss es nur eine Index-HTML geben und dann wird, wird die Seite angezeigt. Das ist, äh, ja, war eine wichtige Erkenntnis für mich
auf meinem Weg zum Developer.
Auch noch sehr, sehr am Anfang, aber ich finde, da muss es erst mal Klick machen, weil Server war für mich damals schon so was, ähm, so was Magisches.
Der, der, der Server irgendwie und da läuft irgendwie eine Software drauf, weiß ich so.
Also diese Blackbooks, die Magische.
Ja, die Magische und ich, noch viel schlimmer, wenn die irgendwo rumstehen würde, wo ich sie anfassen kann, wäre das ja noch okay.
Aber die, die ist irgendwo und ich kann mich mit einer, irgendeiner Adresse und einem Passwort, äh, kann ich mich mit der verbinden und dann kann ich da Dinge hin und her schieben und dann, dann, also das, das war schon, ich weiß nicht,
kommentiert mal irgendwie, falls ihr auch mal so einen magischen Moment hattet, also ich, ich, für mich war das magisch, als das zum ersten Mal funktioniert hat, ich spiele eine Webseite auf den Server
und dann gehe ich auf eine Domain, die auf den Server zeigt und dann sehe ich das, was ich da gerade gemacht habe, war schon ein verrückter Moment.
Also ich fand das auch interessant, ähm, in der Vorbereitung jetzt für das Thema, also wir hatten ja eine Riesenliste, ich habe da auch mit meinem Bruder dann zusammen gebrainstormt und wir haben auch festgestellt, wir sind das beide ein bisschen anders angegangen, du hast schon dich sehr aufs Frontend konzentriert,
ich und mein Bruder, wir sind da wirklich so in Erinnerungen geschwälgt und eben so unser erster alter Rechner mit, äh, gelber Grafik und so und sind da wirklich so auf, auf die Hardware-Ebene auch,
also bunte Pixel, wie die entstehen auf dem Bildschirm und, äh, ja, die ersten 3D-beschleunigten Grafika und so weiter und das haben wir da alles zusammengestrichen,
weil es wäre sonst wirklich sehr umfangreich geworden, aber ich finde das mal interessant, sich wieder so zurückzuversetzen in die Zeit damals und auch jetzt als erfahrener Entwickler, also ich meine,
vielleicht hört der ein oder andere das jetzt, da jetzt zu und denkt sich gerade so, äh, wollen die mich verarschen, die reden jetzt darüber, dass das HTML-Seiten Textdateien sind
und dass, dass Server nur Computer sind, hä, aber es, es gibt auch jetzt noch Neulinge, denen das nicht bewusst ist, die vielleicht Quereinsteiger sind und jetzt
sich im Web-Bereich, äh, tätig machen wollen und für die, es gibt täglich diese, diese Momente von, wo, wo diese Magie plötzlich zu, aha, zu wissen wird, ja, und, ähm, ja, da gibt's, da gibt's so einen Spruch,
jetzt krieg ich den leider nicht mehr zusammen, den hätte ich mir auch mal vorher noch raussuchen können, irgendwie so, du triffst jeden Tag Menschen, die Dinge wissen, die du noch nicht weißt und die Dinge nicht wissen,
die für dich normal sind, ja, also jeder kann jeden Tag was dazulernen und jeder kommt irgendwie aus einer anderen Ecke und deswegen
sollte man da nicht so irgendwie so auf so einem hohen Ross, ja, so auch wie diese Thematik hier, richtige Programmierung und, äh, und Mark-Up-Sprachen und so,
Sondern, ähm, ja, für jeden ist es anders und das fand ich interessant, mal wieder so den Blickwinkel so ein bisschen zu verändern und diese Magie so wieder, wieder neu zu erleben.
Also da kamen wirklich so Erinnerungen hoch, indem man da so schwelgen konnte.
Ja, das ist, das ist ein sehr schönes Zitat, auch wenn's vielleicht nicht korrekt war, ich hab jetzt leider keinen wirklich anerkennenden Applaus als Jingle, ähm, deswegen denkt euch den jetzt einfach mal, also die, die sind alle viel zu enthusiastisch, das muss so ein, so ein intelligenter, anerkennender Applaus, den hätte ich gerne noch, also der, der, der, der steht jetzt.
Ja, danke, also das ist auch kein Spruch von mir, ne, also ich krieg ihn, wie gesagt, nicht so ganz zusammen, er war, also vom groben Sinn her war, war der so und ja, das tut einfach ganz gut, den Blickwinkelzahlen.
Ich finde es wichtig, dass das mal gesagt wird, ist egal, ist egal, wer sich, ist egal, wer sich das ausgedacht hat, ähm, es ist einfach, es ist einfach was dran.
Weil wir wissen nicht, wer uns hier zuhört und wenn's jemand ist, der komplett neu ist in der Thematik, dann ist der genauso herzlich willkommen, wie alle anderen auch.
Ich weiß, dass mindestens zwei Leute zuhören, die nicht extrem tief sind, äh, tief drin sind in der Thematik und für die ist das vielleicht tatsächlich wichtig.
Das ist doch schön.
Ja.
Wieder Bildungsauftrag erfragt.
Ja, Mensch, äh, vielleicht kann man sich für, für, wo wir sind, ist vorne auch Bildungsurlaub nehmen.
Das wär doch was.
Dann macht das auch nix aus mit den langen Folgen.
Müssen wir mal, müssen wir mal gucken, ob wir da auf diese Bildungsurlaubsliste draufkommen.
Dann sag ich jetzt nicht genau, sondern ich sage jetzt, fein, kommen wir zum nächsten Punkt.
Sehr gut, jawohl.
Und das geht auch, also wir haben hier so schöne Überleitungen, äh, von der Hardware zum Server und jetzt zu HT-Access.
Was ja auch wieder eine Datei auf dem Server ist, die für mich auch anfangs magische Dinge gemacht hat.
Und auch hier galt, wie beim BIOS bloß nicht anfassen, sonst geht alles kaputt.
Ja, also man hat sich die Regeln irgendwie zusammen kopiert.
Äh, nicht, dass ich das heute nicht auch noch machen würde, weil ich jetzt nicht jede ...
Warte ganz kurz, darf ich, darf ich kurz einhaken? Dazu muss man, ähm, wissen, die, wer noch keine HT-Access gesehen hat, das ist, die ist allein schon deswegen magisch, weil sie keinen File-Namen hat, sondern nur eine File-Extension.
Also die heißt Punkt-HT-Access, also die hat keinen Namen davor. Und das alleine finde ich schon magisch daran.
Und dank Moritz weiß ich, und das hat tatsächlich sehr lange gedauert, und das ist tatsächlich eine Magie, die sich erst vor ...
Ich glaube, es war, glaube ich, erst letztes Jahr irgendwann, äh, die sich da aufgelöst hat.
Wie man unter Windows so einen Dateinamen anlegt. Weil wenn ich das versuche zu machen, und hier rechtsklicke, äh, new, bei mir ist es auf Englisch, äh, Punkt FUBA, ja, dann kommt hier, if you change file name extension, the file might become unusable, I usually want to change it.
Und ich klicke yes, und oh, es funktioniert. Cool.
Ah, geht das jetzt?
Wusstest du, dass das jetzt mittlerweile unter Windows 10 funktioniert?
Nein, wusste ich natürlich nicht.
Jetzt hatten wir sogar live, äh, hier einen magischen Moment. Das funktioniert jetzt. Aber das muss, das ging noch vor, vor ein paar Wochen ging das noch nicht.
Das muss echt jetzt mit dem, mit dem, mit dem, äh, Update-Funk, äh, sich eingeschlichen haben. Also Punkt hat die Access. Wow. Dann hat's auch echt nur 30 Jahre gedauert, bis man das unter Windows genauso konnte, wie bei, ähm, wie unter Unix-System.
Äh, gut, funktioniert jetzt.
Wollen wir den Trick noch verraten?
Ja, wir verraten den Trick jetzt trotzdem. Vielleicht hat jemand noch nicht das neueste Update. Ähm, Moritz, du darfst, weil du hast ihn mir auch beigebracht.
Äh, ich bin mir grad selbst nicht mehr zu 100 Prozent sicher, ob ich's noch auswendig weiß. Aber warte, ich sag's noch mal.
Und du sagst mir, ob's, ob's, ob's stimmt. Also, ich, und ich hab, ehrlich gesagt, keine Ahnung, warum der Trick funktioniert. Ich hab den irgendwo mal gelesen und hab gedacht, das kann ja wohl nicht wahr sein.
Der Trick, um so eine Datei unter Windows anzulegen, war, Punkt, HT-Access, Punkt, sie zu benennen.
Genau.
Dann verschwindet der erste Punkt, richtig, ne?
Ja, korrekt.
Das war's.
Dann verschwindet der erste Punkt.
Der letzte Punkt verschwindet.
Äh, äh, Entschuldigung.
Genau, weil du hast ja quasi dann eine, du hast keine Dateiendung und das ist nicht gültig und das hat Windows dann umgeändert.
Es ging aber auch, glaub ich, erst ab Windows 98 oder was weiß ich.
Also, es war auch, äh, anfangs nicht, äh, erst ab Windows 98.
Ja.
Das ist, das ist, also, da muss man echt schon noch drauf achten, finde ich.
Ja.
Naja, jedenfalls, äh, super, jetzt live hier was gelernt.
Man kann unter Windows 10 jetzt neuerdings, äh, direkt Punkt-Dateien anlegen, ähm, was ja auch nicht unwichtig ist, wenn man mit, mit Node, äh, und sonstigen Setups, äh, arbeitet, weil da ganz oft die Konfigurationsdateien dann zum Beispiel Punkt-Babel-RC oder so weiter, äh, und so weiter sind.
Ähm, das kann man jetzt alles ohne irgendwelche Tricksereien, was man vorher schon immer konnte war, oder was heißt schon immer, bestimmt auch irgendwie erst ab Windows, was weiß ich, äh, aber mit dem Editor, mit dem Code-Editor,
eine Datei speichern und dann den Dateinamen .htaccess eingeben und dann speichern, das ging komischerweise dann.
Nur im Explorer beim Anlegen von der neuen Datei ging das nicht.
Aber es ist damit hinfällig, es funktioniert.
Jedenfalls kommen wir zurück nach 10 Minuten Ausschweifung zu den .htaccess-Dateien.
Und, ähm, da muss ich vielleicht auch noch kurz erklären, was die denn genau machen.
Da kann ich auf Apache-Servern, äh, auch wieder bestimmte Magie walten lassen, um Dateinamen umzuschreiben, sodass die Dateinamen, äh, Dateien...
... in der URL anders zu erreichen ist, als sie tatsächlich auf dem Server liegt.
Oder ich kann sogar, ähm, theoretisch den User-Agent und andere Laufzeit-Umgebungsvariablen abfragen und dann entsprechend darauf reagieren.
Schon während der Request quasi auf den Server trifft, sollte man nicht übertreiben, weil natürlich auch bei jedem Request die Datei ausgewertet werden muss.
Das sollte man dann tatsächlich in die Apache-Config direkt reinschreiben, wenn man sowas generell machen will und den Zugriff auf den Server hat.
Was bei Shared-Hosting meistens nicht funktioniert.
Aber auch da schweifen wir schon wieder zu weit ab.
Worauf wollte ich eigentlich hinaus, ähm...
Du wolltest wahrscheinlich Sachen erzählen, die da drin sind in der ht-access-Datei, oder?
Genau, die da drin sind in der ht-access-Datei, oder?
Und, ähm, ja, wie gesagt, früher Regeln zusammen kopiert, irgendwie geguckt, äh, was, was will ich denn erreichen?
Ich möchte gerne, dass, äh, statt, äh, Datenbank.php?id ist gleich 8 und User ist gleich 5, ich einfach irgendwie eine schöne sprechende URL hab, äh, wo ich die User-ID und die andere ID oder was auch immer ich sortieren will oder so, ähm, einfach in der URL drin habe, quasi als Ordner-Namen, wenn man so will.
Das lässt sich alles mitmachen und so inzwischen weiß man dann doch, wie es funktioniert.
Also ich schreibe auch nicht immer alle Regeln selbst, sondern kopiere mir die dann zusammen von eigenen Projekten, wo ich schon mal das Gleiche gemacht hab.
Ähm, aber es ist jedenfalls nicht mehr so, so die Marki wie früher und auch nicht mehr das Problem, ich hab die ht-access, die läuft auf meinem lokalen Entwicklungssystem und ich lade sie auf den Server hoch und dann krieg ich plötzlich nur noch 500er.
Also das ist mir jetzt schon länger nicht mehr passiert, weil man inzwischen, ich glaub das, was heißt inzwischen, vielleicht wusste ich das einfach nur früher nicht, äh, man kann abfragen,
welche Module auf dem Server installiert sind, weil nicht alle Module gibt's tatsächlich standardmäßig auf jedem Server und ich kann da einfach drum schreiben,
if-Module und dann zum Beispiel Headers, äh, oder Rewrite oder was weiß ich.
Also wie ein HTML-Tag tatsächlich, äh, Spitze Klammer auf, if-Module, Spitze Klammer zu, ähm, und damit kann ich das abfragen.
Und wenn der Server das nicht kann, zum Beispiel irgendwelche Komprimierung, dann wird das tatsächlich auch nicht ausgeführt.
Ich hatte noch eine Frage zur ht-access-Datei.
Ich weiß nicht, ob ich dich jetzt auf dem falschen Fuß erwisch, aber was bedeutet das ht?
Äh, Hypertext.
Heißt du das zufällig?
Hätte ich jetzt einfach mal geraten.
Ähm, ich hab, ich hab keine Ahnung.
Hast du's gegoogelt?
Ich hab, ich hab's versucht grad zu googeln, es, ähm, ich hab's nicht, nicht auf den ersten Blick gefunden.
Aber, äh, ja, ich find tatsächlich auch auf die Schnellings, also ich bin, ich bin eigentlich recht gut in solcher Abkürzungen, in denen die irgendwelchen Sinn geben, in, in 90 Prozent der Fälle stimmt das auch tatsächlich.
Also ich hätt jetzt mal gesagt, äh, Hypertext-Access.
So wie's halt bei HTML.
Dann nehmen wir das jetzt einfach mal so hin.
Vielleicht ist es auch komplett falsch.
Falls es nicht stimmt, ein Kommentar schreiben.
Aber das macht ihr ja eh nicht.
Wikipedia, ja, über unser guter Freund, äh, Hypertext-Access.
Nein.
Ist ja auch naheliegend, ja.
Ja, genau.
Gut.
Wirklich jetzt?
Ich, ich, ich hab grad ein, ach, das ist ja interessant.
Ich würde dir das total gerne zeigen, was ich grad auf dem Monitor sehe, aber eigentlich ist es total, äh, unwichtig.
Ich hab, ich bin in einer, in einer, äh, Animationsschleife gefangen bei Wikipedia gerade.
Mhm.
Ähm, das, das Menü oben, das, äh, fährt nach links und wieder nach rechts.
Und dann springt die Suchbox nach unten und nach oben und es geht einfach unendlich.
Ähm, ja, das ist das wirklich toll.
Egal.
So.
Weiter.
Weiter im Text.
Weiter.
Oder?
Ja.
Du hast nichts mehr zu HD-Access.
Ähm, äh, genau.
JavaScript macht keine Magie, es verändert nur HTML und CSS.
Ähm, das ist, das jetzt, die, die ganzen Single-Page-Application-Entwickler, die, die werden jetzt, äh, die Hände über dem Kopf zusammenschlagen und sagen, was sagt der da?
Ähm, aber das war früher mal so.
Und, ähm, ich weiß nicht, da lehne ich mich jetzt wahrscheinlich sehr weit aus dem Fenster, wenn ich sag, äh, JavaScript verändert nur HTML und CSS.
Ich sag das jetzt einfach mal.
Ich hab nämlich, äh, gelernt in, äh, in, in, in einem Forum oder Podcasts, dass man einfach mal was Kontroverse sagen soll und dann mal gucken soll.
Dann kommen mehr Reaktionen.
Ich sag, ich behaupte jetzt einfach mal, JavaScript, ähm, ist nur da, dazu da am Ende, um HTML und CSS zu verändern.
Und, ähm, wer anderer Meinung ist, der kann sich ja mal bei uns melden.
Nicht per Mail, sondern öffentlich.
Ich will, dass jemand für seine Meinung öffentlich auch dann geschlagen werden kann, wenn er nicht recht hat.
Sehr wichtig im Internet, dass man auf jeden Fall Ärger kriegen kann für das, was man macht.
Genau, aber, ähm, genau, das ist, das ist meine, meine Erkenntnis gewesen.
Und das hat sich, äh, manifestiert in Form damals.
Und ich hab auch sogar noch die Original-Demo dazu.
Ähm, tatsächlich noch aus der Zeit, als ich diese Erkenntnis hatte.
Äh, ich war damals noch in der Ausbildung zum Mediengestalter.
Ähm, und hab ein, und ich meine, das kommt, das Beispiel kommt von Jonathan Snook.
Der eine oder andere wird ihn kennen oder wird vielleicht, äh, Smacks kennen.
Ist, äh, Scale-Battle and Modular CSS, sein Ansatz und sein Buch.
Ähm, der hat früher, also ich, der blockt, glaube ich, immer noch, aber der hat früher ganz oft, äh, ganz gerne mal so, so kleine Schnipsel geblockt, von, von, wo er versucht hat, irgendwie so ein, so ein kleines, abgeschlossenes, äh, Problem zu lösen.
Ähm, ähm, ähm, und das Beispiel, äh, wo mir das dann irgendwie klar wurde, ähm, JavaScript macht eigentlich gar nichts Verrücktes, ähm, war eine kleine, wie soll ich das nennen, eine, eine kleine Slideshow.
Und zwar einfach nur, ähm, Bilder, die ineinander überblenden.
Ähm, das wird, das wird jeder irgendwo im Web schon mal gesehen haben.
Ich hab den Link auch, äh, schon zu den, zu den Shownote-Notizen gepackt.
Äh, vielleicht kannst du dir das mal angucken, Konstantin, dann kannst du mitreden.
Das müsste da, oh, simple.js Slideshow.
Ähm, das, das Beispiel da, das basiert noch auf jQuery, das lass ich aber auch mal so, dass, das darf ruhig auf jQuery.
Ich bin nicht mehr so schnell.
Ähm, du bist nicht mehr so schnell, ich kannst ja auch, äh, ja, nee, ist, guck mal, also, es ist, ja, genau.
Wer lesen kann und so, ja.
Es ist, es ist ein ziemlich simpler Effekt, stellt euch einfach vor, ähm, ihr habt, äh, mehrere Bilder, in dem Fall sind es, glaube ich, drei Bilder, die sind, die sind alle gleich groß.
Ähm, und langsam blenden die Bilder ineinander über.
Das eine wird, das eine wird durchsichtiger und man sieht dann, äh, irgendwann das andere.
Und das war ein Beispiel, was mir extrem geholfen hat, irgendwie zu verstehen, was da, was da eigentlich passiert.
Weil am Anfang dachte ich, oh, da passiert irgendeine JavaScript-Magie von der verstehe ich nichts.
Ähm, das ist, also ich, für mich war damals, in meinem Kopf war damals JavaScript so ein extra Layer im Browser.
Irgendwie sowas, äh, was, was, was, was abgeschottet von HTML und CSS läuft.
Und das hatten, und als ich das dann gesehen habe, habe ich dann gemerkt, okay, gut, da werden jetzt was, was wird denn da jetzt eigentlich gemacht?
Äh, okay, das ist Fade-In.
Das sind tatsächlich, ähm, am Ende, also in, in, da wird, äh, manipuliert die, äh, jQuery tatsächlich direkt das CSS.
Das muss man aber auch erst mal sehen.
Ich glaube, damals gab's, damals war Firebug aktuell und dann konnte man in Firebug da draufklicken.
Ähm, und dann konnte man sehr gut sehen, was da genau passiert.
Nämlich dieses kleine Mini-JQuery-Skript, das sind hier, äh, warte mal, es sind vier Zeilen, wenn ich das richtig sehe.
Es sind vier Zeilen.
Ähm, sorgt dafür.
Ähm, dass die, dass die Bilder nach und nach, ähm, ausgeblendet werden und zwar mit Opacity in CSS.
Also dieser Wert wird animiert.
Mittlerweile könnte man das viel einfacher machen.
Mittlerweile bräuchte man für sowas kein JavaScript mehr.
Das könnte man komplett mit CSS machen.
Ähm, aber damals war das eben noch nötig, äh, weil es noch keine CSS-Animationen gab.
Und, äh, äh, es stimmt nicht ganz, äh, in dem Fall wird auch noch HTML manipuliert, ähm, weil nämlich, äh, die, die einzelnen Bilder wieder in der Reihenfolge geändert werden.
Mensch, knallt doch nicht so die Tür zu da neben dran. Meine Güte, das hast du bestimmt auch gehört, Konzentri, oder?
Ja, natürlich.
Ach du, meine Güte, verrückt.
Ähm, genau.
Also die Reihenfolge des HTMLs wird geändert.
Ihr könnt euch das Demo, die Demo mal angucken.
Das ist auch wieder sehr schwer zu erklären.
Also so für Audio, das, da, da sollt ihr vielleicht echt mal reingucken.
Ähm, die Reihenfolge des HTMLs wird geändert.
Das heißt, dass, das, ein Bild wird immer ganz nach unten geschoben, sozusagen.
Ähm, und, äh, genau.
Eigentlich wird dann nur die Opacity von dem Bild geändert in CSS.
Das, das ist es im Prinzip.
Also das hat, ich, also wenn jemand, wenn jemand irgendwie Probleme hat, ähm, zu verstehen, wie dieser Zusammenarbeit ist,
und wie dieser Zusammenhang besteht, dann sucht euch das einfachstmöglichste Beispiel raus.
Also wirklich, und ich glaube, das ist auch das, was mir damals geholfen hat, zu verstehen, wie dieser Zusammenhang ist.
Das ist ein extrem einfaches Beispiel war, äh, von wie interagieren in HTML, CSS und JavaScript miteinander.
Ähm, ja, ich weiß nicht, gar nicht, äh, ich kann da gar nicht viel mehr dazu sagen.
Ich bin jetzt sehr viel auf dieses Beispiel angegangen, aber, ähm, das war für mich so ein, so ein magischer Moment.
Ähm, JavaScript ist nicht irgendein, ähm,
magisches Ding, das irgendwo läuft.
Wahrscheinlich wird das heute eh keiner mehr denken,
weil ganz viele Entwickler, die heutzutage, äh,
Entwicklungen lernen sozusagen in irgendwelchen Bootcamps,
die fangen ja oft mit JavaScript quasi schon an
oder mit irgendwelchen Frameworks.
Ähm, das war für mich,
das war für mich ein prägender Moment,
wo ich den Zusammenhang verstanden habe,
dass JavaScript in vielen Fällen
einfach nur manipuliert,
was in HTML und CSS ist.
Das habe ich jetzt zum hundertsten Mal gesagt.
Hast du noch eine Frage?
Ich glaube, es ist jetzt in den Köpfen drin.
Ich glaube, ich hoffe es, ich hoffe es, ja.
Du hast dazu nichts, das war ...
Nee, nee, weil, ja, weil wir da auch, wie gesagt,
wieder aus einer anderen Ecke kommen.
Und, ähm, ich einfach JavaScript auch anders,
ja, vielleicht systematisch oder, ich weiß nicht,
aber aus einer anderen Herangehensweise raus gelernt habe.
Ach, systematisch habe ich nie gelernt.
Ja.
Und, äh, ja, ich halt schon.
Also, weil du vorhin auch Java-Applets angesprochen hattest,
ähm, ja, klar, mit denen habe ich natürlich auch
ganz am Anfang noch gearbeitet.
Und dann, äh, irgendwie, ja, JavaScript ist dann gewachsen
mit der Zeit und, äh, war immer mehr möglich.
Aber für mich, also das ist auch schon wieder das,
was ich meinte vorhin mit dem Blickwinkel,
für mich sind, sind die Sachen nicht magisch für dich,
waren sie magisch.
Und du hattest diesen Moment.
Und bei mir gab's das eben nicht.
Bei mir gab's das dafür halt bei anderen Sachen,
wo's bei dir vielleicht nicht war.
Ja.
Bios fand ich beispielsweise nie magisch.
Keine Ahnung warum.
Aber egal, ähm, damit können wir jetzt ganz ohne Ausschweifung
zum nächsten Thema springen, oder?
Genau.
Regular Expressions.
Und wenn ich das schon sage, wird der ein oder andere wahrscheinlich,
äh, äh.
Nee, ich sag da, äh.
Genau, Regular Expressions.
Also, ich möchte jetzt auch gar nicht sagen,
oh, für mich ist das heute hier alles, äh, schreibe ich dir im Schlaf.
Weil das war nämlich auch deine Frage so.
Sag mal, Regular Expressions, wenn ich dich jetzt nachts um drei weg,
kannst du das im Schlaf und so.
Und, äh, nein, natürlich nicht.
Aber es hat so diesen Schrecken,
den viele Leute, glaube ich, da,
viele Programmierer noch, äh, davor haben,
für mich schon verloren, also, ähm, es gibt da Ressourcen im Internet, äh, ich verlinke natürlich auch
RegularExpressions.info, ähm, wo man wirklich erklärt bekommt, wie funktioniert das denn und welche
Syntax ist denn für was verantwortlich und so.
Und mit der Zeit, klar war das auch wie bei den HTX, das Regeln, man sucht erstmal, man googelt, äh,
was, was will ich denn erreichen, ich brauche den und den Bestandteil aus dem und dem Wort und da gibt's ja auch
wirklich zu Regular Expressions, äh, gibt's ja auch tausende oder hunderttausende Millionen von Fragen,
ich weiß nicht wie viele, auf Stack Overflow, ähm, oft kommt dann die Antwort, das ist so eine der goldenen Regeln,
niemals HTML versuchen mit Regular Expressions zu parsen.
Da ist HTML nicht regulär, äh, genug dafür.
Und ich sag jetzt einfach auch mal was, äh, Kontroverses, um auf die Finger zu bekommen.
Also ich sage, wenn ich genau weiß, was ich da bekomme als Input, äh, dann warum nicht?
Ja, wenn ich dann noch drauf achte, auf variable Anzahl an Lehrzeichen, wenn ich die berücksichtige oder,
oder sonstige, wenn ich so ein bisschen mehr Gedanken drüber mache und ich weiß, was da reinkommt.
Und ich will wirklich nur da irgendwie ein Attribut und will dafür jetzt nicht irgendwie,
also je nachdem, manchmal, gut, im Browser geht's ja inzwischen auch, da kann ich,
da brauch ich keine extra Library, die mir das parsst.
Das geht inzwischen jetzt auch über Document, äh, Parsing und so.
Ähm, aber ganz ehrlich, ich hab das trotzdem auch schon gemacht.
Ein, ein ehemaliger gemeinsamer Kollege von uns, ähm, der übrigens sehr, sehr gerne Regular Expressions verwendet hat,
der hatte dazu einen schönen Spruch, der hat immer gesagt, ähm, du hast ein Problem,
du versuchst es mit Ragex zu lösen, dann hast du zwei Probleme.
Ja, gut, da ist, äh, tatsächlich was dran, ja.
Ähm, ja, also, ja, es ist, natürlich ist das eine unpopular Opinion, wenn ich jetzt sage, äh, hier, äh, kann man schon mal machen.
Aber das ist, glaub ich, wie bei allem, das ist wie, äh, evil is evil, ja.
Ja, natürlich ist es das und natürlich sollte ich das nicht einfach in, irgendwo an der Stelle, wo der User-Code, äh, reingekloppt wird.
Aber ich hab's tatsächlich auch schon an, an anderen Stellen benutzt, ja, als grad für irgendwelche internen Tools, wo ich weiß, da kommt nicht irgendwie User-Input rein.
Oder an Stellen, wo ich einfach wirklich weiß, da ist kein User-Input, sondern ich will irgendwie, äh, eine magische Funktion erstellen, die da irgendwie aus Code, den ich aus einer Config-Datei bekommen.
Gut, da muss ich natürlich drauf achten, dass die Config-Datei nicht manipuliert werden kann, was denn ich, ja, aber ich, ähm, man kann das schon, und ich hab auch genug Antworten schon zu dem Thema gefunden auf Stack-Overflow, wo die Leute, wo dann natürlich jemand um die Ecke kam, nö, aber evil is, äh, evil.
Ähm, und dann jemand aber gemeint hat, ja, aber in dem Fall kannst du's nutzen und es ist deine einzige Möglichkeit, wenn du das erreichen willst, was du da erreichen willst, das zu tun, und dann, dann kannst du's auch nutzen, ja.
Also man muss ja immer aufpassen mit so, äh, hier ist generell zu 100 Prozent in allen Fällen immer böse.
Also, aber ja, natürlich, wenn ich einen DOM-Parser hab und dazu nicht extra eine Library reinladen muss, dann parse ich mir natürlich das Mark-Up als, äh, mit dem richtigen Parser, um da auf Attribute hinzuzugreifen, ja.
Was mich noch interessieren würde, hast du irgendwie Tipps für Leute, die Regular-Expressions besser verstehen können, weil ich, also mittlerweile hab ich noch, äh, da wollte ich jetzt grad noch dazu kommen, dann, ich hab eigentlich das andere, das vorgezogen.
Ich wollte nur sagen, die, die, das war für mich auch sehr, äh, schreck, äh, gespensthaft, äh, für mich eine Zeit lang und mittlerweile hat's den, äh, seinen Schrecken auch verloren, aber vielleicht braucht's auch einfach ein bisschen Zeit, aber was sind denn deine Tipps da?
Also, es gibt, ähm, verschiedene, ähm, Regex-Tester, wenn man da das einfach mal googelt, Regex-Tester, ja, ich nenn jetzt einfach mal drei, es gibt aber noch viel mehr von solchen Tools, äh, regex101.com, äh, regexel.com und, äh, regex-Tester.com, das sind auch, glaub ich, gleich die drei ersten Ergebnisse, wenn man danach googelt.
Da kann man regex eingeben, man kann einen Beispieltext eingeben und man sieht wunderschön mit Highlights nicht nur, was der findet, sondern auch farblich hervorgehoben, ähm, was solche Character Groups matcht, was einfach nur Gruppierung ist, ähm, und so weiter und so fort.
Ähm, und teilweise, ich glaub, gerade bei Regex 101 war das, wo man auch wirklich lernen kann dabei, wo man also wirklich sieht, was was macht, ähm, und das ist unglaublich hilfreich, wenn jetzt komplizierte Regex-Expressions sind.
Äh, den, den benutze ich regelmäßig, also immer, wenn ich irgendwas mit Regex mach, äh, dann hau ich das mal in Regex rein, ähm, weil das hilft mir echt, äh, sehr, äh, da ist das so, die Regex, die man oben einträgt, äh, dann kann man mit der Maus drüber gehen und dann, äh, werden einzelne Buchstaben oder einzelne Zeichen oder Paare gehighlighted und da wird dann einem, kriegst du direkt auch dann, äh, so einen kleinen Tooltip, der dir dann anzeigt, was macht denn das jetzt hier gerade genau?
Genau, ja.
Und das, das ist extrem hilfreich, um Regex zu schreiben, ja.
Genau, auf jeden Fall, das hilft beim Entwickeln von, von komplexeren, äh, regulären Ausdrücken und zum Lernen, wie gesagt, regularexpressions.info, da wird wirklich alles erläutert, was es da für Möglichkeiten gibt.
Man muss immer drauf achten, Regular Expressions in der Einsprache sind nicht, nicht immer, also, oder sagen wir mal, es gibt Features, ja, es gibt so ein, ein, ein Superset an, an Features, die Regular Expressions,
unterstützt und anbietet, aber nicht jede Sprache implementiert alles davon. Also, da findet man dann Beispiele, Beispiele für Python oder für, was weiß ich, irgendeine Programmiersprache und man kopiert das einfach in JavaScript und das funktioniert nicht.
Oder auch JavaScript und PHP sind da sehr unterschiedlich, äh, was das angeht. Wird immer ähnlicher, weil immer mehr unterstützt wird, ähm, aber da muss man aufpassen, was die Sprache, die man, in der man das verwenden will, auch tatsächlich kann.
Also, zum Beispiel so Sachen, ich will das jetzt auch gar nicht erklären im Detail, aber, äh, look ahead und look behind, ja, wo man dann gucken kann, ob dann die nächste Zeichenfolge dem entspricht, aber nicht mitgematcht wird und so weiter und so fort.
Oder was ich letztens hatte, ähm, was ich auch ganz cool finde, eigentlich, Unicode, äh, Syntax, ähm, da hab ich mich wieder beschäftigt mit chinesischen Schriftzeichen, also generell für, ähm, logografische oder ideografische Schriftzeichen, japanisch, koreanisch, chinesisch und so weiter, ähm, wo man wirklich Zeichengruppen matchen konnte.
Äh, hab ich jetzt das Beispiel nicht da, aber das, das ist dann wirklich mit, äh, ich glaub, backslash p und dann in geschweiften Klammern kann ich dann wirklich sagen, ideographic, ähm, äh, special, was weiß ich, also wirklich Charaktergruppen, um dann eben japanisch rauszufiltern.
Also, da wollte ich gucken, sind die ja eingegebenen Zeichen tatsächlich, äh, hochchinesisch, sag ich mal, und nicht irgendwie japanisch, was ja auch chinesische Zeichen, äh, benutzt.
Und da wollte ich wirklich nur chinesische Zeichen haben, da geht's ja auch nochmal um Unterschied zwischen Taiwan und, äh, Mainland, äh, China.
Und da kann man wirklich dann solche Gruppen matchen, Unicode ist ja aufgeteilt in so verschiedene Gruppen oder Tabellen, weiß ich nicht, ob das jetzt der richtige Begriff dafür ist, aber so verschiedene Subsets eben an Zeichen.
Und dann wollte ich zum Beispiel noch rausfiltern, alle chinesischen Zeichen, aber nicht chinesische Sonderzeichen wie Satzzeichen, Ausrufezeichen, Fragezeichen und so weiter.
Und das geht also darüber. Es, äh, in, in ES6 ist die Unterstützung dafür deutlich besser geworden.
Ähm, aber so hundertprozentig hat's teilweise auch nicht funktioniert. Ähm, ja, muss man eben gucken, was die Sprache unterstützt.
Aber es ist sehr mächtig und das macht, glaube ich, auch vielen Leuten Angst.
Und wenn man dann nach, dann nach was fragt und dann kommt da die Antwort und dann sagt jemand so, ja, ist doch ganz einfach, so bitte hier. Und dann hast du halt irgendwie drei Zeilen Regular Expression und am besten noch ohne Erklärung.
Und das kann einem natürlich schon Angst machen.
Ja, Mensch, äh, sag mir nie wieder, ich darf nicht ausschweifen.
Ja, sorry.
Nö, nö, äh, ich, ich finde das total okay.
Ähm, aber ich hoffe doch, der eine oder andere hat wieder vielleicht was dabei gelernt, was er vorher noch nicht wusste.
Ja, ich zum Beispiel.
Sehr schön.
Ähm, genau, aber dann, äh, gehen wir jetzt mal gleich zum nächsten oder hast du noch was zur Regular Expression?
Nee, das, das, das tatsächlich jetzt mal, ich, jetzt halte ich mal kurz die Klappe.
Äh, ach, ach was? Du darfst, du darfst jederzeit, weil jetzt kommt was, wo du auch wieder, wo du auf jeden Fall mitreden kannst und auch willst, das weiß ich schon.
Äh, CSS-Spezifität ist mein nächstes Thema.
Da haben wir uns ein bisschen drum gekloppt, um den nächsten Punkt, muss man gleich mal sagen.
Ja, wir haben uns, ich, ich, ich hatte das unter dem Punkt Kaskade, CSS-Kaskade schon aufgenommen und du hast da nochmal Spezifizität, äh, extra hinzugefügt.
Da dachte ich schon so, hm, hoppla, das geht für mich hart in Hand, aber mach du erstmal deine Spezifizität und, äh, vielleicht sag ich so was.
Ich finde super, dass du Spezifizität sagst, weil das ist nämlich, äh, du hast Quatsch, Spezifizität, äh, ein Deutsch, das heißt aber auf Deutsch.
Spezifizität oder, warte mal.
Spezifizität?
Spezifizität oder Spezifizität?
Egal.
Äh, ich glaube auf Deutsch heißt es Spezifität, ohne, ohne, ohne, ohne extra Spezifizität.
Also mein, mein Word unterkringelt es nicht.
Was Spezifität?
Spezifizität.
Ich glaube, wie das schon klingt.
Erzähl du mal, ich guck mal kurz bei Duden, wie es heißt.
Ja, guck, guck, guck, guck, guck du mal, guck du mal bitte nach, ähm, vielleicht lege ich ja auch komplett falsch, ich nenne es einfach mal Spezifität, solange, ähm, oder, äh, Specificity oder noch besser, das hatten wir auch in einer anderen Folge schon mal, Specificity und was es damit auf sich hat, äh, das kommt am Ende noch.
Und ich sag ganz kleinlaut, okay, es ist Spezifität.
Ah, sehr gut, hatte ich doch recht.
Ähm, genau, äh, da geht es darum, wenn ich CSS schreibe, äh, dann, dann, dann, dann habe ich ja normalerweise immer irgendeine Art Selektor, also ein, ein Ding, mit dem ich sage, auf welchen Bereich in meinem HTML soll denn das jetzt wirken, auf, auf, auf, auf welchen Bereich in meinem HTML soll das jetzt Auswirkungen haben.
Das ist der Selektor. Und, ähm, dann hat man, also, ich glaube, wenn man anfängt CSS zu schreiben, dann hat man immer mal wieder den Fall gehabt, äh, ich schreibe CSS und es hat keine Auswirkungen.
Ich sehe, ich sehe nicht, ich sehe, ich sehe keine Auswirkungen davon und das war in der Zeit, als wir das noch gelernt haben, Konstantin, war das noch viel schlimmer als heutzutage, weil du einfach gar nicht wusstest, warum.
Man hat, man hat einfach gesehen, na, es hat jetzt irgendwie gerade keiner, das, was ich geschrieben habe, irgendwie passiert damit nichts. Ich habe jetzt hier irgendwie eine Background-Color von schwarz hinterlegt, aber irgendwie sie trotzdem immer noch weiß.
Und man wusste einfach nicht, ich muss gerade, das Bild, was ich gerade gesehen habe, muss ich, muss ich gerade kurz kommentieren, der, Konstantin, hat einen sehr tiefen, äh, Schluck aus, aus seiner Hanf-Alm-Dugler-Schück genommen.
Auf jeden Fall ist er jetzt gut drauf. Ähm, genau. Äh, damals war das noch, äh, also ich, wir haben ja beide noch angefangen zu entwickeln, wo es noch nicht mal Firebug gab, also im Prinzip keine Entwickler-Tools sozusagen.
Also man war noch so ein bisschen auf, äh, ja, man musste Dinge eigentlich auswendig wissen, um zu wissen, warum, warum passiert denn hier jetzt was? Man hat nicht vom, vom Browser oder von den Dev-Tools gesagt bekommen, ähm, hier stimmt was nicht.
Oder, äh, mittlerweile, es ist ein Firefox, ist übrigens ein sehr cooles Feature, gibt's noch nicht so lange, ähm, dass einem unter bestimmten Umständen dann auch, also dies mit der Spezifität, warum, warum da etwas nicht richtig angezeigt wird, das sagt er einem schon sehr lange, der streicht dann die Zeile durch.
Aber mittlerweile sagt er einem auch, ähm, warum, äh, warum eine bestimmte Eigenschaft nicht wirken kann, weil zum Beispiel eine Voraussetzung dafür nicht gegeben ist.
Also zum Beispiel, wenn ich irgendwelche, äh, Flex, äh, Eigenschaften benutze, aber gar keinen Flex-Container habe oder so.
Na, egal, das ist schon wieder ausgeschweift.
Spezifität.
Was hat's damit auf sich?
Ähm, der Selektor bekommt einen Wert berechnet.
Der Selektor, den ich schreibe im CSS, der bekommt einen Wert berechnet und der Selektor mit dem höchsten Wert für das gleiche Element gewinnt.
So, so, um, um das mal so ganz simpel auszudrücken.
Ähm, jetzt gibt es da verschiedene, verschiedene Selektoren, es gibt ja verschiedene Möglichkeiten, HTML zu selektieren.
Ähm, ich glaube so, dass, dass, das, das Einfachste, was, was man kennt, ist, man schreibt einfach das Tag hin, das, äh, also das, das Element, der Elementselektor.
Ähm, dann gibt es so was wie Attributselektoren oder Klassenselektoren, die sind bestimmt bekannt.
Ähm, also wenn, dann, die Klassenselektoren sind momentan eigentlich so das, was, was am häufigsten verwendet wird, glaube ich.
Ähm, Pseudoklassen hat bestimmt auch jeder schon mal gesehen.
Ich, ich gehe auch gleich nochmal darauf ein, wie das alles genau aussieht.
Also, so für die Leute, die vielleicht noch nicht so tief da drin sind.
Ähm, dann gibt es noch, äh, ID-Selektoren natürlich.
Es gibt Inline-Styles und es gibt Important.
Important ist eigentlich kein Selektor, aber da kommen wir gleich noch drauf, was es damit auf sich hat.
So, ähm, jetzt habe ich ja gesagt, man kann das berechnen.
Das bedeutet, jeder, jede Selektorenart hat so eine Art Wert.
Und am Ende wird zusammengezählt, was ich, welche, welche Selektoren ich habe.
Und am Ende, da ergibt sich dann ein Wert draus.
Also, zum Beispiel, wenn ich jetzt einen Elementselektor habe, also ein Tag, also ich, zum Beispiel, ein Div oder einfach nur P, dann hat er den Wert 1.
Die Elementselektoren haben immer den Wert 1.
Das heißt, wenn ich jetzt auch mehrere Elementselektoren hintereinander schreibe, dann hat er jeder 1.
Also, wenn ich jetzt sage, zum Beispiel, Div, P, A oder sowas, dann habe ich, hätte ich dann den Wert 3.
Die werden aufaddiert.
Ähm, der Klassenselektor, der ist dann schon ein bisschen, äh, mächtiger.
Der hat den Wert 10.
Oder einer hat den Wert 10.
Ähm, das heißt, ich habe hier irgendwie, äh, eine Klasse MyClass.
Oder ich habe tatsächlich, äh, was da, was da auch geht, ich glaube, äh, Moment, jetzt, äh, jetzt kommen wir gleich noch dazu.
Ähm, die Pseudoklassen gehören da dazu.
Also, sowas wie, ähm, First Child, Last Child, äh, Only of Type oder sowas gehört da dazu.
Also, ist auch eine Klasse, hat auch den Wert 10.
Also, auch die, wenn ich die addiere und mehrere Klassenselektoren habe, ähm, dann, also ich nehme mal an, ich habe jetzt, ähm, ähm, äh, Klasse,
Klassenselektor, äh, und, ähm, dann noch ein Attribut, äh, Quatsch, ein, äh, ein Pseudoklassenselektor, dann wären das zwei.
Das sind dann 20.
Und wenn ich da dann vielleicht noch ein, ähm, ein Elementselektor mit reinpacke, dann wären es, also einen dazu, dann wären es 21.
Also, so wird das immer weiter aufaddiert.
Also, man kann natürlich auch aufaddieren.
Man kann natürlich kombinieren miteinander, ja?
Ich würde da ganz, ganz kurz gerne einhaken wollen, weil die Erklärung ein bisschen irreführend ist.
Ich glaube, du, äh, hast dich da orientiert an, an MDN, oder?
Nee, hab ich nicht.
Nicht?
Weil es ist tatsächlich, es ist nicht so, also, ich habe mir das ein bisschen anders, ähm, eingeteilt, oder aus dem Artikel, wo ich das, äh, hatte.
Äh, es gibt eigentlich drei Zähler, ne?
Sagen wir mal A, B und C.
Und ich finde das gefährlich mit dem, das hat den Wert 10, weil das hat es eigentlich nicht.
Also, es sind eigentlich drei, drei selbstständige Zähler, ja?
Und, äh, in dem MDN-Artikel steht in so einer gelben Box, äh, ich hab's mal übersetzt aus dem Englischen, eine Million Class-Selektoren kombiniert können nicht die Regeln eines einzelnen ID-Selektors überschreiben.
Okay.
Und das ist, das ist, das ist ein bisschen irreführend.
Das sind also nicht wirklich jetzt von einer dreistelligen Zahl die Ziffern, weil sonst hätte ich ja bei größer als 10 auch irgendwann das Problem, dann komme ich in den Tausender-Bereich, ja?
Sondern es sind drei verschieden gewichtete Zähler und, ähm, am spezifischsten ist der ID-Selektor, das heißt, wenn der fünf hat, das sind eigentlich drei Werte, sagen wir mal, äh, 1, 0, 0, ja?
Oder halt, wenn ich fünf ID-Selektoren drin hab, sind es 5, 0, 0 und das ist natürlich spezifischer.
Ja, äh, danke für die Anmerkung, das ist total korrekt, was der Konstantin sagt, also ich kann, äh, ja, das ist wirklich eine wichtige und, und, äh, ja, vielleicht sollte man das, nein.
Ich hab grad überlegt, wollen wir das rausschneiden? Der Moritz hat ja totalen Quatsch geredet, aber ich hab vorher noch gesagt, vor der Folge, es wird nichts geschnitten, deswegen wird auch nichts geschnitten.
So, wird nichts geschnitten. Ähm, nein, der Konstantin hat vollkommen recht, ich kann nicht mit, äh, mit 1000, äh, Elementselektoren einen Klassenselektor überschreiben, das geht nicht.
Beziehungsweise in dem Fall müssten es dann, ne, ich hab gar keine Ahnung, nein, es sind tatsächlich verschiedene Bereiche, aber die Anmerkung, die ich dazu noch hab, da wollte ich eigentlich noch dazu kommen, aber jetzt, jetzt muss ich das, glaub ich, jetzt schon sagen, es sind nicht nur drei, es sind fünf.
Ähm, und wieso das fünf sind, da komm ich gleich noch dazu. Ähm, es gibt fünf verschiedene Blöcke.
Okay, aber gut, danke, also auf jeden Fall danke für die Ergänzung, das ist absolut korrekt. Ähm, also sprechen wir nicht mehr von, von 1 und 10, sondern sprechen wir von Block 1, äh, bei den, bei den Elementselektoren, sprechen wir von Block 2 bei den Klassenselektoren.
Das heißt, IDs, ähm, die schön mit der Raute, äh, markiert werden in CSS, ähm, das wäre dann Block 3, ähm, der dann halt, je nachdem, wie viele IDs ich verwende, da noch was dazu bekommt, also, äh, genau, letzten Endes wird alles wieder aufaddiert, aber das ist dann tatsächlich, Block 3 ist natürlich wichtiger als Block 2 und auch als Block 1 und so weiter.
Ähm, jetzt kommen wir aber noch zu dem, was ich gerade gesagt habe, es gibt noch Block 4 und 5, äh, und zwar, wenn ich ein Inline-Style nehme, jetzt mal ganz abgesehen davon, dass das kein eigener Selektor ist, sondern ich habe ein Style-Attribut im HTML drinstehen,
Dann erzeugt das damit quasi alles, was da drin schon ist, äh, Block 4, also sozusagen 1000, 1000, wenn man so will, ja, also alles, was da drin steht, wird dann natürlich nochmal aufaddiert, weil ein Inline-Style geht immer über das, was in dem CSS-File irgendwo steht.
Außer?
Und wenn du jetzt, äh?
Außer?
Außer, außer, und da berufe ich mich jetzt auf, ähm, auf mein, das hatten wir in einer anderen Folge schon mal, auf mein wunderschönes, äh, Bildchen Specificity.
Außer, ich schreibe ein Important hinter etwas, also Ausrufezeichen Important, ähm, dann komme ich in den fünften Block, das wäre dann quasi 1000,000, und damit kann ich auch den Inline-Style nochmal überschreiben.
Äh, da ist, das ist dann schön, also bei Specificity wird das alles mit Fischen gezeigt und, äh, spätestens beim Style-Attribut hören die Fische auf, da kommt dann schon der, äh, kommt dann schon der Zerstörer, beziehungsweise in dem Fall ist es, glaube ich, ein Ölboot.
Äh, und bei Important, äh, also bei dem, äh, bei dem Zehntausender sozusagen, äh, kommt dann schon die Atombombe, da kommt dann nach nichts mehr, wobei ich sagen würde, doch, danach kommt noch was.
Ein Important im Inline-Style, also da, äh, und das muss dann noch, ähm, das habe ich jetzt noch gar nicht gesagt, das muss dann noch ganz unten, äh, im, im Dokument irgendwie stehen, oder am, äh, äh, ganz, ganz weit hinten.
Ähm, weil, äh, wenn zwei Werte, das hätte ich vielleicht am Anfang eigentlich sagen sollen, wenn zwei Werte identisch sind, dann, äh, dann gewinnt das Zweite oder das, das Letzte gewinnt.
Wenn, wenn es mehrere identische Werte gibt, dann gewinnt das Letzte, das heißt, das Unterste im Dokument, das Unterste in der CSS-Datei.
Oder, ich weiß gar nicht, damit kommen wir dann eigentlich schon zur, zur Kaskade.
Äh, ja, ich wollte ein, äh, okay, bevor wir zur Kaskade kommen, noch eine kleine Ergänzung, also Specificity, äh, werden wir noch verlinken in den Shownotes und, ähm, es gibt, äh, bei CSS-Selektoren noch was, ähm, also ich muss noch ganz kurz sagen, warum war das für mich jetzt so eine, so eine verrückte, äh, Erkenntnis, ähm, dass man so einen Wert ausrechnen kann, weil ich oft Fragezeichen über dem Kopf hatte, warum wird das jetzt irgendwie nicht angezeigt, warum wird das nicht genommen?
Naja, weil der Wert nicht stimmt und den Wert kann man ganz einfach ausrechnen, beziehungsweise, ja, mit diesen, also ich, ich hab's immer simpel addiert, das geht meistens, aber der Konstantin hat recht, es sind einzelne Blöcke, ich kann mit, mit 1000, äh, Element-Selektoren keinen Klassenselektor überschreiben.
Die kleine Ergänzung, die ich noch machen wollte, ist, die Kombinatoren, die es gibt in CSS, sowas wie der Plus-Kombinator für, äh, das, das, äh, den nächsten, ähm, Sibling, ähm, oder das direkte Kind, äh, mit, mit, äh, dem, äh, größer, größer Zeichen.
Äh, äh, oder die Tilde, ähm, die haben keine Spezifität, die werden da nicht mit reingerechnet, ebenso der Sternselektor, der Universalselektor, der hat auch keinen Wert, was das angeht, der hat quasi null.
Das war noch meine kleine Ergänzung, jetzt können wir zur Kaskade kommen.
Wunderbar, genau, äh, für die Kaskade gehen wir eigentlich noch mal einen Schritt zurück, bevor wir, äh, äh, an die, an die Spezifizität, äh, Spezifität kommen.
Ich, für mich heißt das Spezifizität, ich werde das, glaube ich, auf Deutsch auch immer so sagen.
Ähm, genau, die Kaskade, das ist eigentlich die Reihenfolge, beziehungsweise die, die Quelle der Einbindung des CSS, wo das herkommt.
Und da gibt's eine bestimmte Reihenfolge, und zwar das, äh, Browser-Style-Sheet, das heißt, die, das, die Standardformatierung, zum Beispiel, dass ein Strong-Tag eben gefettet ist, oder ein EM-Tag, äh, Italic ist, die kommt aus dem Browser, das bringt der Browser mit.
Das hat also die niedrigste Spezifität, wenn man so will.
Und danach kommt die Benutzer-Deklaration, ja, also in den Browser-Einstellungen kann ich ja zum Beispiel sagen, ich bin, ich hab ne, äh, große Sehschwäche, ich brauch auf jeden Fall, äh, mindestens, äh, 20 Pixel Schriftgröße, um was erkennen zu können.
Das kann ich im Browser festlegen, das ist dann auch wieder ein Browser-Style-Sheet, aber das der, der Benutzer definiert hat.
Danach kommt die Autor-Deklaration, das ist das, was die Seite selbst mitbringt.
Und zwar eben durch, äh, per Link-Tag-Style-Sheets angezogen in der Datei, oder auch durch, ähm, durch Style-Tags.
Dann als nächstes Important in Autor-Deklaration und dann am Schluss Important durch Benutzer-Deklaration.
Und das ist wichtig zu wissen, weil ich eben so dafür sorgen kann, dass diese Browser-Minimal-Frontgröße zum Beispiel nicht wieder überschrieben werden kann.
Und das ist eine Besonderheit, die mir so auch nicht vorher bewusst war.
Da habe ich mir so keine Gedanken drüber gemacht.
Genau, und das ist eben die Kaskade.
Und das ist so die Standard-Reihenfolge.
Aber über die Spezifität, Spezifität, meine Fresse, über die Spezifität, ich sage es jetzt einfach nicht mehr, ähm, der Regeln an sich kann ich natürlich dann auch wieder, äh, innerhalb der Kaskade gewichten.
So, fertig.
Okay, du hast fertig.
Ähm, ja, mein, mein letztes, ähm, und das ist noch, das ist, das ist jetzt nicht mehr so weit in der Vergangenheit, ähm, bei mir ist, Note-Modules, habe ich es mal genannt, Note-Modules sind nicht so geheimnisvoll.
Oder der Note-Modules-Ordner um die, ihm geht es mir im Speziellen.
Aber das ist eigentlich nur eine ganz kleine Sache, ich weiß gar nicht, ob wir da groß drüber reden müssen, dass, wir sind auch schon relativ weit fortgeschritten in der Zeit, sehe ich gerade.
Aber wir wollen uns ja nicht beeilen, wir sind ja gechillt.
Ähm, ich habe lange, also Note-Modules war für mich lange sowas wie, wie ein Server.
Naja, ich mache da irgendwie ein NPM-Install und dann passieren da irgendwelche Dinge und dann erscheint da so ein Ordner und die IDE oder der Editor markiert den Ordner schon so als, als, also in VS Code ist das glaube ich so, wird so ein bisschen ausgegraut dargestellt.
Ist sowas, wo man, naja, da sollte man nicht reingucken, hat es irgendwie mir immer gesagt, weiß ich nicht, ob das stimmt.
Ähm, nee, kann man, kann man gerne mal reingucken, ist eine Menge Kram drin wahrscheinlich, äh, eine Menge, eine Menge Dependencies, die man nie haben wollte, aber dann irgendwie sich durch die Package-JSON reingezogen hat.
Ähm, und ich habe lange mich dann gefragt, ja, wie kann man denn eigentlich jetzt, wenn ich jetzt so direkt was aus dem Note-Modules haben will, äh, wie kann ich das denn dann irgendwie nehmen?
Das war für, war für mich so ein, Note-Modules war für mich so eine Art Blackbox.
Und dann habe ich irgendwo tatsächlich mal ein Beispiel gesehen, wo jemand gesagt hat, hey, äh, ja, ich, ich verlinke da direkt rein.
Also, das ist für mich einfach ein Ordner wie jeder andere auch oder ein Verzeichnis wie jedes andere auch.
Äh, und da habe ich halt dieses Modul und da verlinke ich rein.
Ähm, kann, also da sind, da liegen einfach nur HTML, CSS, JavaScript-Files drin, also in vielen Fällen nur JavaScript-Files, aber in manchen Fällen halt, liegt da ja noch viel mehr drin.
Kannst also ein CSS-File aus dem Note-Modules-Ordner einfach genauso einbinden, indem du einfach den Pfad nimmst, der da reinlinkt.
Es gibt ja zum Beispiel auch CSS-Libraries, die aber auf npm verfügbar sind, zwecks Versionierung und zwecks einfacher Einbindung, wo ich dann aber halt doch, wenn ich dann eine bestimmte Theme-Datei oder was weiß ich anziehen will, die dann halt wirklich auch im Note-Modules-Ordner verlinken muss.
Ja, und, äh, ich habe vor kurzem gemerkt, ähm, und das habe ich mir schon immer gedacht, dieser Note-Modules-Ordner, der wird ja generiert.
Das heißt, ich habe, wenn jetzt morgen, äh, keine Ahnung, das System umstellt und sagt, die Struktur ist jetzt anders, dann geht dein Link kaputt.
Mhm.
Oder dann geht dein Pfad kaputt.
Das ist, deswegen finde ich, das, fühlt sich das irgendwie schmutzig und falsch an.
Ähm, das ist so mein Gefühl immer gewesen, ähm, da direkt was drin zu machen, das, das ist irgendwie nicht so der richtige Weg.
Aber es gibt manchmal Situationen, wo man leider nicht dran vorbeikommt.
Das ist wieder das Gleiche wie mit, mit E-Wahl und das Gleiche wie mit Regex und HTML.
Genau.
Manchmal ist es einfach der richtige Weg, das so zu tun.
Ich würde sagen, ähm, wenn man es irgendwie vermeiden kann, sollte man es vermeiden.
Das ist so mein, mein Gefühl. Ich habe das nirgends gelesen, das hat auch mir niemand gesagt.
Das war immer nur so, naja, früher war die Struktur da drin mal anders, jetzt ist sie so.
Also, da kann ich nur nochmal so einen alten Tweet, den, den packen wir auch in die Shownotes.
Ähm, mal verlinken, da, da hat die, äh, Laura Eck bei Twitter mal ein schönes Bild gepostet.
Irgendwie, ähm, ich versuche mal zu beschreiben, was drauf ist, äh, das, da steht, äh, groß drauf, the heaviest objects in the universe.
Ähm, und dann kommt irgendwie als erstes die Sonne und dann ist, ist da so dieses Raumkrümmungsbild, also mit, mit so einem Raster.
Und das hat wahrscheinlich jeder schon mal gesehen, wie viel, äh, wie schwer ist ein Objekt, wie viel krümmt das denn Raum?
Und dann kommt die Sonne und die krümmt so ein bisschen und dann kommt der Neutron Star und der krümmt schon sehr, sehr deutlich.
Dann kommt das schwarze Loch und das geht schon extrem weit nach unten und krümmt.
Und dann kommt Node-Modules und das, da sieht man gar nicht, wie weit das runter geht.
Äh, weiß nicht, ob du den, ob du das kennst.
Das ist von, was, von 2017?
Ich glaube, ich hab's schon mal gesehen, ja.
Ähm, das hat man schon mal gesehen, genau.
Äh, hat auch damals irgendwie 1300 Retweets gekriegt und, äh, 2200 Likes.
Das ist, äh, ist echt eine, eine coole Geschichte.
Ja, so empfinde ich das auch oft.
Und ich weiß, dass die Struktur im Node-Modules-Ordner mal ganz anders war.
Also, die war mal sehr tief verschachtelt.
Dafür hast du wenig, du hast weniger Ordner auf höchster Ebene gehabt.
Kannst du, kannst dich da dran erinnern?
Mhm.
Ähm, du hast weniger Ordner, oder weniger, weniger Verzeichnisse auf erster Ebene gehabt.
Und dann waren, waren das extrem tief verschachtelte Node-Modules-Ordner immer wieder innen drin.
Und das war tatsächlich auch teilweise ein Problem unter Windows.
Genau, das wollte ich sagen.
Weil dann die Pfade tatsächlich zu lange geworden sind.
Und dann irgendwie manchmal einfach nichts mehr funktioniert hat.
Oder, oder sogar in der Konsole dann irgendwie Fehler geworfen hat.
Wegen Zugriffsrechten.
Also, es klang nach Zugriffsrechten, aber es war erst mal gar nicht ersichtlich, was da eigentlich gerade passiert.
Ja, und das war natürlich ein großes Problem.
Oder du konntest den auch nicht mehr löschen.
Ja, auch, auch sehr schön.
Es gab auch, also, ab einer gewissen Pfadlänge hat Windows geweigert, sich Files zu löschen.
Was total crazy ist.
Deswegen, äh, naja, Windows, naja, gut.
Windows halt, ne?
Ähm, ja.
Worauf ich, das war halt, das war halt mein kleines Beispiel.
Also, da direkt rein verlinken.
Ähm, wie gesagt, das kann gefährlich sein.
Ich hatte vor kurzem auch den Fall, dass ich, äh, bei einem Paket eine bestimmte Version haben wollte, was aber in Konflikt stand zu den, äh, Dependencies von einem anderen Modul, was ich eingebunden hatte.
Und dann hat er die komplette Struktur davon wieder geändert in das, was man kennt.
Was, was man früher kannte, wie das früher war.
Das wusste ich auch nicht, dass das passieren kann.
Ähm, deswegen sage ich, es ist gefährlich, direkt rein zu verlinken.
Aber es geht.
Man kann das machen und ich, wir haben das tatsächlich in einigen Projekten im Einsatz und bislang ist es, äh, nicht schiefgegangen.
Aber, man weiß nicht.
Ich finde, es fühlt sich so ein bisschen an wie eine Krücke.
Aber man kann das machen.
Man kann so viel machen.
Mittlerweile.
Ist so verrückt, oder?
Ja, ist schon.
So viel verrückte APIs.
Schon viel passiert.
Ist so viel passiert.
Ich glaube, damit sind wir am Ende vom Pima, oder?
Ja, weißt du, was jetzt gerade passiert ist?
Wir haben die Zeit überschritten.
Es wird, stand jetzt, die längste Folge.
Die wir bisher haben.
Dafür, dass wir uns mal ein bisschen kürzer fassen wollten, haben wir jetzt tatsächlich die längste Folge von 105 Minuten geknackt.
Und wir haben vorher schon Themen draufgesprächen.
Wir haben noch was vor.
Ah, stimmt, wir haben noch was vor.
Das war es ja jetzt noch gar nicht.
Oh je.
Oh nein.
Wenn du fertig bist.
Ach so, stimmt.
Dann kommt ja jetzt.
Dann kommt jetzt.
Das Geiltein.
Geiltein.
Oh je, jetzt muss ich ja noch mehr reden.
Jetzt bitte aber in doppelter Geschwindigkeit.
Fertig.
Ja, nee.
Ja, war eine gute Idee.
Finde ich.
Dafür hast du dir was verdient.
Wir haben noch keine Zeit.
Jetzt muss noch weitergehen.
Stefan Raab, ey.
So, das Geiltein.
Komm, das machen wir jetzt irgendwie noch schnell.
Ich weiß gar nicht, wann ich drauf gestoßen bin.
Das ist noch gar nicht so lange her.
Ich habe keine Ahnung, wie lange es das schon gibt.
Es hat auf jeden Fall 2730 GitHub-Sterne Stand.
Jetzt Stand heute.
Ich sage jetzt natürlich nicht, wann heute ist, weil heute ist natürlich live am Sonntag.
Wie soll es auch anders sein?
Ich schweife schon wieder ab.
Das Geilteil heute ist eine wunderbare Seite namens oneloc.dev.
Ich habe es ursprünglich einslog ausgesprochen und dann habe ich mir darüber Gedanken gemacht, was bedeutet denn das eigentlich?
Es soll wahrscheinlich, sehr wahrscheinlich eine Abkürzung sein für onelineofcode.dev.
Und was findet man da?
Es ist relativ simpel.
Es ist einfach eine Liste mit One-Linern in JavaScript.
Also mit so kleinen Utilities, weiß ich nicht, ob man das so nennen kann, kleine Kniffe, kleine Sachen, die in eine Zeile passen, in JavaScript, die irgendwie was für einen tun.
Und auch ein schöner Filter oben, in dem man dann einfach mal eintragen kann, was man sucht.
Vielleicht findet man das dann auch.
Also ich bin ein großer Fan von One-Linern, weil man ganz oft so an dem Punkt ist, jetzt muss ich gerade irgendwie das eine kleine, wie mache ich denn das jetzt?
Nennt doch mal ein paar Beispiele aus der Liste, dass man sich vorstellen kann, was das so ist.
Ich wollte noch kurz sagen, die Liste ist aufgeteilt in verschiedene Bereiche, also sowas wie Array, Datetime, DOM, Function, MISC, Number, Object und String, glaube ich.
Genau.
Und ich sage mal ein paar ganz kurze Beispiele, die ich mir vorhin schon rausgesucht habe.
Also zum Beispiel zwei Arrays vergleichen.
Weil ich erst mal gedacht habe, okay, ich weiß zwar jetzt nicht genau, wann man das machen will, aber ich fand die Idee ganz interessant.
Da ist dann zum Beispiel die Variante, wie man da zwei Arrays vergleicht, ist, naja, man macht die erst mal als JSON-Stringify und dann, guck mal, ist da das gleiche drin.
Fand für mich eine interessante Idee.
Hast du es gerade auch offen?
Also, was ich dann mir noch rausgesucht habe, ist, herausfinden, ob ein Datum zwischen zwei Daten liegt.
Ist das da zwischendrin oder nicht?
So ein schöner kleiner Einzeiler.
Ich gehe da jetzt nicht direkt auf den Code ein, das könnt ihr euch selbst anschauen, wie die Lösungen dafür sind.
Sekunden in Hour, Hour, Minute, Minute, Minute, Second, Second Format konvertieren.
Dann im DOM-Bereich habe ich noch, naja, so ein Klassiker.
Ist das, bin ich im Internet Explorer?
Das finde ich ganz witzig.
Das ist auf jeden Fall irgendwie so ein Hack, weil da wird ein DOM-Objekt Document.DocumentMode abgefragt, das es wahrscheinlich nur im Internet Explorer gibt.
Das wusste ich vorher auch nicht.
Wahrscheinlich Quirks-Mode oder nicht.
Das kann auch sein, weiß ich tatsächlich nicht genau, aber in diesen One-Linern verbirgt sich oft, also das kenne ich auch aus dem 140-Bytes-Projekt, da gehe ich gleich noch drauf ein.
Da konnte man immer sehr viel draus lernen.
Aus einem One-Liner kann man oft sehr viel draus lernen, auch wenn er manchmal auf den ersten Blick sehr schwer zu lesen ist und ich mir nicht immer sicher bin, ob man ihn verwenden sollte, aber lernen kann man immer eine Menge draus.
Oder MacOS-Browser, da ist dann im Prinzip eine Regular Expression, die abfragt nach Mac, iPod, iPhone, iPad.
Was haben wir hier noch? Reload, CurrentPage, habe ich mir noch rausgesucht, fand ich irgendwie ganz witzig, so in einer Zeile ganz, ganz kurz.
Das sind Dinge, wo man, wie soll ich sagen, wenn man JavaScript auswendig kann und das DOM, dann ist das überhaupt kein Problem, da fliegt einem das zu, dann weiß man, dass es das gibt.
Aber ich hätte jetzt zum Beispiel nicht gewusst, ich kann die Seite neu laden mit Location.reload. Das war mir nicht klar, das wusste ich einfach nicht.
Das hatte ich jetzt, aber klar, ich weiß nicht.
Klar, man kennt immer unterschiedliche Dinge. Ich finde, wie gesagt, von so Einzeilern kann man eine Menge lernen. Also selbst wenn ihr sie nicht verwenden wollt, wenn ihr was lernen wollt, dann klickt die einfach mal alle durch und guckt euch an, wie es gemacht ist.
Gut, wenn wir scrollen, ist jetzt tatsächlich keine Magie, AGB in Hex konvertieren.
Das arbeitet tatsächlich mit dem Bitwise-Verschiebungsoperator, das muss ich mir mal genauer angucken, wie das funktioniert.
Das ist auch noch so ein bisschen Magie für mich, ja.
Ja, genau.
Ich glaube, ich weiß grob, wie das funktioniert, aber da verbiegt sich mein Gehirn auch noch.
Also wenn ihr, wenn ihr es mal sehen wollt, wie bitweise Verschiebung gemacht wird in JavaScript, dann scrollt da mal runter zu Convert RGB to Color to Hex.
Da habt ihr das auf jeden Fall drin. Das ist so dieses doppelgroßer, größer oder doppel kleiner, kleiner Zeichen. Das ist der Operator dafür.
Ich glaube, ja, ich glaube, das waren die Beispiele, die ich mir rausgesucht habe.
Ah, in dem Moment, ich habe hier noch was bei Strings, zum Beispiel Escape HTML Special Characters.
Ich sage jetzt schon mal, mach das nicht. Es ist interessant, wie die das machen, aber ich glaube, dafür gibt es bessere Methoden.
Und File nehmen von der URL bekommen, das weiß auch noch was, was ich mir irgendwie angeguckt habe.
Also es ist eine sehr, sehr, es ist eine recht lange Liste. Hier steht 183 Favorite JavaScript Utilities in Single Line of Code.
Ich finde das, ich finde es immer cool, so kurze Utilities zu haben, die man irgendwo mal einfach reinschmeißen kann, so wie sie sind, um ein kleines Problem zu lösen.
Das war das Geilteil. Jetzt wollte ich aber, Moment, ich wollte noch kurz auf 140 Bytes eingehen, weil das habe ich im Zusammenhang damit noch kurz recherchiert.
Das war mal ein Projekt, leider war mal. Ich habe es nicht mehr gefunden.
Ich war auch gerade erstaunt, weil ich kannte das auch noch und jetzt begrüßt mich da eine Agenturseite aus Spanien.
Die Seite hieß mal 140 Byte oder Bit mit Y.es.
Und da waren lauter kleine JavaScript-magische Beispiele, die in 140 Bytes, also 140 Zeichen gepasst haben, also quasi in den Tweet.
Und das war noch viel krasser, als was auf der onelog.dev-Seite zu finden ist.
Da wurden teilweise komplette Parsings irgendwie mit 140 Bytes gemacht.
Was ich jetzt noch bei GitHub gefunden habe, war eine Art Pac-Man, was in 140 Bytes umgesetzt wurde.
Da kann man dann allerdings wirklich so gut wie gar nichts mehr direkt lesen, außer man ist ein krasser Typ.
Ich kenne so einen krassen Typen, der auch sowas geschrieben hat, der da mitgemacht hat.
Vielleicht kann der, wenn er sich jetzt erkannt hat und den Podcast auch hört, das weiß ich tatsächlich nicht.
Ehemaliger Kollege?
Ehemaliger Kollege, ja.
Vielleicht kann der mir mal sagen, ob es irgendwo noch ein Backup von der 140 Bytes-Seite gibt, weil das war schon echt crazy shit.
Wenn man 140 Bytes bei Google eingibt, dann findet man noch so ein paar Beispiele davon, aber leider nicht mehr die ganze Liste.
Also ich habe es jetzt auf den ersten Blick nicht gefunden, aber das war auch ein sehr, sehr krasses, cooles Projekt.
Nicht, weil ich sage, man sollte so JavaScript schreiben, aber warum nicht mal damit kreativ werden und so Machbarkeitsstudie machen, so im Sinne von, was kann ich denn in 100, wie kann ich denn crazy Sachen mit 140 Zeichen lösen, wo keiner gedacht hätte, dass das geht.
Und da habe ich auch diesen Bitwise-Operator zum ersten Mal gesehen, der da eingesetzt wurde.
Ja, also ich sage nicht, verwendet das bei euch in der Agentur oder für eure Projekte, aber man kann eine Menge davon lernen.
Also auf jeden Fall nochmal Shoutout 140 Bytes, falls es das irgendwo noch gibt, bitte, bitte melden.
Bitte, bitte melde dich.
Genau.
Ja, damit sind wir fertig mit dem Geil-Teil und wir haben immer noch keinen Jingle für Geil-Teil fertig.
Von daher würde ich einfach mal sagen, es nimmt über Hand, du hättest mir nicht sagen sollen, mach doch auch mal.
Ich hätte dir dieses Tool nicht in die Hand geben sollen.
Nein, auf keinen Fall.
Das artet ein bisschen aus.
Das war auch Feedback, was wir bekommen haben übrigens, dass unsere Jingles, unser Sounddesign ein bisschen over the top ist.
Fast schon, fast schon over the top.
Da ist noch viel Raum.
Ich würde sagen, in der nächsten Folge, gucken wir mal, da ist noch Luft nach oben.
Da geht noch ein bisschen.
Irgendwann kommt die Folge, die nur aus Jingles besteht.
Ja, und wenn wir mit den Zeiten so weitermachen, dann würde ich sagen, hören wir einfach irgendwann gar nicht mehr auf zu senden.
Wir machen dann eine 24-7-Unterhaltungssendung.
Aber nee, wir machen die aber trotzdem zwei Wochen verzögert.
Das heißt, erst wenn wir zwei Wochen senden, kann man live quasi verzögert zuhören.
Das fände ich extrem witzig.
Und gehen aber dann immer schön auf tagesaktuelles Geschehen ein.
Ja, tagesaktuell, aber zwei Wochen verzögert.
Das fände ich super.
Wie bringe ich meine Hörerzahl gegen null?
Ach was?
Ich meine, das ist dann, glaube ich, wie bei, wie hieß dieser Film nochmal, Truman Show.
Dafür interessieren sich die Leute dann schon.
Es muss auch nicht unbedingt immer live sein.
Vielleicht ist der Reiz genau das.
Das ist eben so eine Time Capsule zwei Wochen in die Vergangenheit.
Ja, genau.
Ist doch super.
Faszinierend.
Was war neu vor zwei Wochen?
Also heutzutage ist das noch okay.
Aber wahrscheinlich sagt man, wird es irgendwann in den nächsten zehn Jahren das Sprichwort geben,
ja, das ist ja sowas von gestern.
Früher hat man gesagt, das ist sowas von 90er.
Und irgendwann hieß es mal, das ist sowas von vor fünf Jahren.
Und dann hieß es irgendwann, das ist sowas von 2019.
Sagt man nicht, ich bin doch nicht von gestern.
Oh.
Scheiße.
Ein magischer Moment, live aufgelöst wieder.
Ich bin doch nicht von vor 14 Tagen.
Ja, okay, ich glaube, ihr merkt schon.
Komm, jetzt machen wir die zwei Stunden noch voll.
Komm, erzähl noch einen schlechten Witz.
Schwank aus deiner Jugend.
Schwank aus meiner Schwäche und schwank aus deiner Jugend.
Dann werden wir noch Abkündigungen.
Machen wir die Abkündigung, dann haben wir die zwei Stunden voll.
Wir haben noch Abkündigungen.
Vor allem an die neuen Hörer, falls jetzt noch jemand tatsächlich hängen geblieben ist.
Liked uns auf unseren Social-Media-Kanälen.
Twitter, at www.siv.
Instagram, wo wir sind, ist vorne.
Ja, aber zu Instagram, wir wollen ja die zwei Stunden noch voll machen, ne?
Zu Instagram muss ich nur sagen, da setze ich jetzt den Instagramern mal die Pistole auf die Brust.
Ich weiß, wir haben das Medium auch nicht so bespielt, wie es wahrscheinlich sein sollte.
Weil wir posten da im Prinzip nur die Folgenbilder und sonst nichts.
Wir machen da keine Storys oder so.
Wenn da nicht demnächst sich ein bisschen mehr tut, dann glaube ich, dann klemmen wir das Instagram wieder ab.
Dann kommt auf die Webseite da an der Stelle irgendwie ein Pimmel-Icon oder sowas.
Weil es müssen ja drei sein, sonst sieht's komisch aus.
Ne, ich bin echt am überlegen, Instagram, ich glaube, es ist nicht unser Kanal.
Wir haben aber auch nicht viel dafür gemacht, muss ich sagen.
Wir sind aber auch nicht die typischen Instagramer, glaube ich.
Wollte ich, ich weiß nicht, was du dazu, wie du das findest.
Ne, also ich bin sowieso Social-Media, außer Twitter, habe ich echt so zurückgefahren, bin ich gar nicht mehr drin.
Also außer TikTok hatte ich mal letztens so eine Phase, aber die war dann schon, habe ich schon gemerkt, diese Rabbit Hole, wo ich dann abends dann doch wieder irgendwie eine Stunde da verbracht habe und Zeit vergeudet habe, habe ich jetzt auch schon länger nicht mehr draufgeschrieben.
Ja, wo wir sind bis vorne? Demnächst auf TikTok.
Oh je.
Ja, ihr merkt, die Qualität nimmt ab.
Findest du? Ich finde, es geht gerade erst richtig los.
So, wir haben dann auch die zwei Stunden demnächst voll und darum würde ich sagen, ja, liked uns, subscribt uns, empfehlt uns weiter, offline und online und gehabt euch wohl.
Wir bitten darum, ja.
Hast du noch ein Wort zum Sonntag?
Danke.