Herzlich Willkommen bei "Wo wir sind, ist vorne! Frontend-Fakten-Frotzelein!"
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Jetzt reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und Javascript-Jongleur Konstantin
Groß.
Hallo und herzlich Willkommen zu unserer dritten Ausgabe.
Wir haben heute eine kleine Premiere. Wir sitzen nämlich gerade jeder bei sich zu Hause und versuchen das Ganze hier per Remote-Aufnahme.
Und ich bin sehr gespannt, wie das funktioniert. Es ist jedenfalls schon mal ganz komisch, wenn man sich nicht gegenüber sitzt.
Und jeder sitzt da so, weil man sich auch ins Wort fällt. Wir haben natürlich eine kleine Latenz, bevor wir uns gegenseitig hören.
Es ist ein bisschen schwieriger. Also wundert euch nicht, wenn das Ganze heute anders abläuft, als es sonst abläuft.
Und wir sitzen hier jeder einsam mit seinem Bier.
Jeder für sich. Aber ich würde sagen, wir stoßen trotzdem mal aus der Ferne an. Prost!
Lass es dir schmecken.
Ich habe außerdem ein neues Mikro. Ich weiß nicht, ob man das gleich hört. Vielleicht macht sich das bemerkbar.
Ich hoffe, dass das Rauschen ein bisschen weniger ist und dass vor allem meine Atem- und Schmatzgeräusche sich etwas mehr in Grenzen halten, als in den ersten beiden Folgen.
Das hat mich beim Durchhören selber gestört, aber man stört sich ja sowieso an seiner eigenen Stimme.
Ja, doch, ich finde das immer ganz schrecklich. Aber deswegen höre ich es einfach auch nicht selber. Muss ich auch gar nicht, weil wir nämlich auch so schon über 400 Downloads haben.
Yay!
Doch, finde ich. Also dafür, dass wir nicht wirklich so viel Werbung gemacht haben, außer halt so auf unseren Social-Media-Kanälen, denen jetzt auch noch nicht so viele Leute folgen. Also dafür finde ich das echt gut.
Hab mich überrascht.
Da folgen schon eine ganze Menge. Also da ist schon weniges am Start.
Tausende.
Wir haben auch schon Snips und BHs geschickt bekommen.
Ja, also keine Snips, ich die BHs. Also egal. Nein, das ist auch egal. Das führt jetzt schon gleich am Anfang zu weit. Da kommen wir später noch hin. Nach dem zweiten Bier dann, glaube ich.
Weil wir uns jetzt gerade nicht sehen. Ich wollte kurz mal erwähnen. Ich meine, jetzt dürft ihr gleich alle sagen, es ist ein schlimmer Laber-Podcast, aber ich trinke heute einen Wölfle.
Das kleine Pilz. Das wurde mal bei mir um die Ecke gebraut. Was trinkst du denn heute?
Ich trinke wieder das, was ich auch in der ersten Folge und in der zweiten Folge schon getrunken habe. Einen Brooklyn. Aber nicht das Lager, sondern das East IPA.
Ah, ja. Sehr gut. Ja, das klingt auch lecker. Vielleicht kommen wir dann direkt mal zur Retro.
Genau.
Für die haben wir übrigens noch keinen Jingle.
Genau das habe ich auch schon gedacht. Wir haben noch keinen Jingle für die Retro. Aber ich habe schon eine Idee. Ich bastel da mal was.
Nein, das sind die Jingles. Ich glaube, die Jingles muss ich machen. Tut mir leid.
Echt?
Oh, nö.
Ja, nö.
Okay, dann machen wir es gemeinsam.
Wie ihr euch vielleicht denken könnt. Ich meine, wir sagen, wir haben keinen Jingle für die Retro. Wo ist jetzt die große News? Naja, wir haben vielleicht für was anderes noch Jingles.
Wir haben ein paar neue Sachen in dieser Folge.
Lasst euch überraschen.
Genau. Kommen wir zur Retro.
Mein Retro besteht eigentlich nur daraus, Feedback haben wir schon einiges bekommen. Leider, also für die bisherigen Folgen, leider noch keine offiziellen, irgendwie öffentlich einsehbaren Kommentare.
Es kam über Twitter ein bisschen was rein, also direkt auf unserem Kanal WWS IV. Bei Instagram nichts. Da kamen ein paar Likes. Und auf unserer Homepage, wo wir sogar extra die Kommentare sehr hübsch gestaltet haben, zumindest glauben wir das.
Ihr dürft uns dazu gerne in den Kommentaren kommentieren, wie ihr das findet, das Kommentar-Design. Da kam noch gar nichts. Jetzt ist die Frage, was könnte das jetzt bedeuten?
Bedeutet das, dass alles super ist? Bedeutet das, die Kommentarfunktion ist kaputt? Das ist ja immer am beliebtesten, die Leute kommentieren nicht, weil sie nicht können.
Oder bedeutet das, alles ist super? Also was ich aber nicht glaube, weil normalerweise das Internet ist ja jetzt nicht unbedingt dafür bekannt, dass alle immer alles super finden, sondern eigentlich, dass man da hingeht, um gesagt zu bekommen, wo man überall falsch liegt.
Aber gerade das spricht ja eigentlich dafür, dass alles in Ordnung ist, weil wenn die Leute was zu meckern haben, dann tun sie das in der Regel auch.
Ich glaube, die Kommentarfunktion ist kaputt.
Ja, wahrscheinlich. Ich glaube, wir gucken uns das nochmal an und posten mal selber Kommentare. Aber immerhin auf Twitter und aber auch LinkedIn und Xing, da kam schon auch was an textuellem Feedback zurück.
LinkedIn und Xing, äh, LinkedIn und Xing habe ich jetzt gerade unterschlagen.
Das hatte ich auch nicht so auf dem Schirm, aber da kam tatsächlich auch was zurück. Ja, freut uns jedenfalls, wenn wir was von euch hören.
Genau, also das war eigentlich schon meine Retro. Da drehte sich viel um den Livegang. Der Konstantin hat schon gesagt, wir haben schon über 400 Downloads. Was ich tatsächlich wirklich verrückt finde. Ja, dankeschön dafür und empfehlt uns weiter.
Auf jeden Fall. Ja, ich habe gar keine richtige Retro vorbereitet. Ich habe mich seit der letzten Folge immer noch sehr intensiv mit WordPress beschäftigt und habe viel geflucht, weil ich versuche, den Gutenberg-Editor anzupassen nach wie vor.
Und, ähm, bin jetzt inzwischen an dem Punkt, wo ich das tatsächlich wohl eher erstmal aufstecke und was komplett eigenes entwickle.
Oh.
Ja, weil mit dem Gutenberg-Editor im aktuellen Zustand, da haben sich die Jungs und Mädels vom WordPress-Core-Team leider nicht so einen großen Gefallen getan.
Das merkt man unter anderem an den Reviews zum offiziellen Gutenberg-Plugin. Früher brauchte man ja ein Plugin, um den vorab schon mal nutzen zu können.
Und aktuell ist es so, dass man über das Plugin immer die aktuellste Version bekommt. Nicht die Dev-Version, sondern sie sind schon versioniert, aber halt noch nicht die Version, die tatsächlich im WordPress-Core landet, wenn man WordPress installiert.
Das heißt, da ist es immer so ein bisschen voraus und man hat da eben neuere Features. Und das Problem ist, dass von Version zu Version teilweise wirklich grundlegende Sachen geändert werden.
Und wenn man sich jetzt da einklingt und versucht mit Styles oder indem man sich in diese React-Components reinhängen will, die Gutenberg nutzt, da stößt man ganz schnell an Grenzen und ist vor allem immer frustriert, weil plötzlich mit dem Versions-Update nichts mehr funktioniert.
Also ich hatte das wirklich gestern innerhalb von einem Tag. Ich habe mich morgens noch gefreut. Juhu, ich habe es geschafft, das so anzupassen, wie ich das gerne möchte. Und komme nach dem Mittagessen an den Rechner, CEO, Plugin-Benachrichtigung, Update, Gutenberg, super, gleich mal aktualisiert. Und es ging danach wirklich so gut wie nichts mehr.
Und wenn ich dann in den Release Notes halt schon lese, this is not the final concept, da wird es noch einige Änderungen geben in Zukunft, dann weiß ich schon, am besten Finger weglassen.
Ja, du sagst gerade, du hast was Eigenes gebaut. Was spricht denn dagegen, den alten Editor zu verwenden? Den gibt es ja irgendwie auch noch, oder?
Das habe ich auch schon überlegt, ja. Aber ich meine, dem Gutenberg-Editor, wenn jetzt nicht das Feedback weiterhin so negativ ist, dass sie irgendwann sagen, okay, wir lassen das Ganze, aber das glaube ich nicht, dass das passieren wird.
Der ist schon die Zukunft des Editierens in WordPress. Und ich finde auch die Grundansätze nicht schlecht. Also, das ist jetzt fast schon wieder ein eigenes Thema, aber grundsätzlich funktioniert das so, dass nicht mehr diese Shortcodes reingespeichert werden in den Beitragskontext, die dann zur Laufzeit, jedes Mal, wenn die Seite aufgerufen wird, wenn man kein Caching nutzt, dann gepasst werden.
Sondern es wird statisch rausgerendert, das HTML drin gespeichert, umgeben von Kommentaren, öffnende und schließende Kommentare außenrum, die definieren, das ist ein Gutenberg-Blog vom Typ Paragraph zum Beispiel.
Und mit den entsprechenden Parametern, die man daran übergeben kann. Und dann bastelt sich der Editor daraus wieder die Oberfläche zum Editieren. Und das ist an sich nicht schlecht, weil am Schluss habe ich da wirklich HTML, das einfach ausgegeben werden kann, ohne dass ich irgendwelche Tags parsen muss.
Und das macht, glaube ich, einen Großteil aus, warum viele Themes in WordPress so langsam sind. Und der Grundgedanke, der gefällt mir. Und wie gesagt, das wird die Zukunft sein von WordPress. Und ich möchte auch kompatibel bleiben zu Gutenberg.
Aber für mich bedeutet das jetzt aktuell, außer mir kann jemand sagen, wie ich als nicht absoluter React-Crack es schaffe, den selber irgendwie aufzubohren.
Also ich habe schon versucht, dann mir wirklich, also selber mit am Chord zu arbeiten und habe mir das ausgecheckt. Aber ganz ehrlich, da habe ich es tatsächlich selber mit, mit View, weil ich da einfach fitter drin bin, wahrscheinlich schneller selber gestrickt, als da dran mitzuarbeiten.
Und dann sehe ich halt auch, es gibt irgendwie, keine Ahnung, 400 offene Tickets oder so. Und gerade wenn man als Neuling das erste Mal versucht, da irgendwie was, also ein Pull-Request zu stellen, dann kommt halt ganz schnell, ja, aber das machen wir hier nicht so, das machen wir hier anders.
Und da wird dann jede Code-Zeile zerpflückt und kann man an der Stelle das nicht so und so machen und da und da. Also bis das drin wäre im Core, da würden sicherlich Monate bis Jahre vergehen. Und so lange will ich nicht warten.
Und was brauchst du konkret? Brauchst du eigene Blöcke oder was?
Eigene Blöcke, aber vor allem auch Blöcke anpassen. Ich möchte noch nicht so viel verraten, was wir da so genau basteln. Ich habe ja schon mal gesagt, wir basteln ein eigenes Theme.
Es richtet sich an eine bestimmte Personengruppe, die eventuell dem Endnutzer das ein bisschen mehr einschränken möchte, als WordPress das tut.
Also ich möchte vielleicht nicht, dass der Endkunde einen roten Hintergrund und einen gelben Text setzen kann, bei jedem einzelnen Paragraph.
Und das kann ich aktuell mit dem Gutenberg-Editor halt machen.
Ja, also es ist sehr komplex, vor allem wenn man eben halt auch noch zusätzlich so ein bisschen mehr React machen muss, als man das eigentlich gerne möchte und gewohnt ist zu tun.
Und vermutlich werde ich da jetzt selber dran basteln und das werden einige Wochen und Monate ins Land ziehen, die vorher nicht geplant waren, bis wir das Produkt letztendlich auf den Markt bringen.
Ja, aber gut, so ist es und man lernt ja auch dabei.
Ja, Leute, macht mehr React.
Nein, nein, macht mehr View.
Was mir jetzt, ich habe den Editor gerade nochmal auf und habe mir nochmal angeschaut.
Also er erinnert mich sehr, sehr stark an den Medium-Editor.
Ich denke mal, das wird bestimmt auch eine große Inspiration dafür gewesen sein.
Also das Klassische, ich habe einzelne Blöcke, die ich mit so einem kleinen Plus hinzufügen kann und habe so eine Art What you see is what you get.
Ist es ja auch so auf eine gewisse Art und Weise.
Ist es, wäre auch schön, wenn das sehr stringent so funktionieren würde, aber das tut es halt an vielen Stellen dann doch leider wieder nicht.
Und ich finde es auch sehr, und das ist auch das Feedback, was man immer wieder hört von den Nutzern, es ist schön und gut, dass das What you see is what you get ist.
Aber man weiß manchmal gar nicht so genau, wo man denn jetzt eigentlich gerade klicken soll, um an einer bestimmten Stelle was zu bekommen und an einer bestimmten Stelle was zu bearbeiten.
Weil man erst beim Hovern dann teilweise Feedback bekommt visuell, was man denn jetzt gerade gehovert hat und was man da macht.
Und diese Plus-Böppel, die da auftauchen, mit denen man dann Blöcke einfügen kann, die sind manchmal da und manchmal nicht.
Also das ist teilweise halt auch wirklich verbuggt.
Also was ich sagen will, ist, der Editor ist in der Form einfach noch nicht fertig.
Oh, ich habe es gerade geschafft, vier Plus-Böppel auf einmal zu sehen.
Das finde ich ein bisschen verwirrend, ehrlich gesagt.
Und es ist halt einfach auch ein bisschen schade, weil WordPress, also das, was WordPress so im Kern ausgemacht hat, war eigentlich immer, dass es sehr leicht anzupassen ist.
Oder zumindest sehr leicht, ich meine, wir haben auch an einigen Stellen geknabbert, als wir unsere Blogseite gebastelt haben, aber zumindest mal, man kann irgendwie alles erreichen.
Und wenn man im äußersten Notfall OB Start macht und mit OB Get Contents irgendwas mit Regex passt, so die absolute Notlösung, wenn es gar keine Hooks an irgendeiner Stelle gibt, also man kommt irgendwie zum Ziel.
Und mit dem Nutzen von aktuelleren Frontend-Technologien, wie eben jetzt React-Module, React-Components und so ein Bildprozess, der dahinter steckt, das macht es halt nicht gerade einfacher, sich da irgendwo einzuklinken.
Aber diese ganzen Regex-Geschichten da, also muss ich mal ganz kurz einhaken. Kannst du dir bitte mal kurz den Mund auswaschen, weil sowas sollte man gar nicht sagen.
Nein, natürlich, ich weiß.
Das haben wir auch nicht gemacht.
Das haben wir tatsächlich auch nicht machen müssen. Nein, ich wollte nur damit sagen, also man kann sich irgendwie immer reinhaken, selbst wenn es keinen offiziellen Hook dafür gibt. Also man kommt da immer irgendwie zum Ziel.
Und bei der React-Geschichte jetzt, also erstmal bis ich, wie das halt immer so ist, wenn man so ein größeres NPM-Note-Projekt auscheckt, also einmal NPM-Install ausgeführt und dann erstmal eine Runde Kaffee trinken gehen und vielleicht das Auto waschen und die Kinder von der Kita abholen.
Ja, und groß werden und Abitur machen lassen.
Genau, weil das dann doch halt recht lange dauert. Und ich meine, früher war halt so, mal kurz den Code durchsuchen, aha, da ist die Stelle und dann weiß ich auch schon, wo ich es verändern muss.
Also es macht natürlich alles komplexer. Das geht auch schon so ein bisschen jetzt über in das, was ich nachher noch zum Hauptthema sage.
Also kurzum, der Editor ist eigentlich nicht fertig, es wird immer noch dran aktualisiert und meiner Meinung nach hätte man damit noch ein, zwei Jahre warten müssen, bis tatsächlich mal ein Zustand erreicht ist, der die Flexibilität bietet, die man, also die man als Entwickler eigentlich auch haben will, wenn man Themes und Plugins für WordPress schreibt.
Und das ist einfach ein bisschen schade, weil das ist das, was WordPress halt immer ausgemacht hat und das wird einem jetzt ziemlich erschwert.
Ja, zu dem Thema habe ich noch kurz eine Anmerkung, dann können wir gleich zum nächsten Blog gehen. Einfach nur so, weil es mir gerade heute über den Weg lief.
Also wir hatten es gerade angesprochen, NPM-Install und dauert irgendwie lange. Ich habe heute von einem älteren Projekt mal wieder, also ein Test schlug an und wurde rot durch,
naja, guck doch nochmal die Dependencies an, da sind vielleicht ein paar Vulnerabilities drin. Und dann habe ich eben NPM-Audit gemacht und NPM-Audit-Fix, um die Vulnerabilities zu fixen.
Und dabei lief mir dann die Zahl über den Weg, wie viele Pakete da installiert sind. Und es ist, um es kurz zu machen, das ist so ein klassisches älteres Angular-Projekt, also mit der ganzen Testgeschichte und, keine Ahnung, dieses Browser-Refresh,
mir fällt Browser-Sync und keine Ahnung, was da alles mit drin ist und E2E-Tests und so weiter. Konstantin, du darfst mal kurz raten, was schätzt du so ganz grob, wie viele Pakete sind da drin?
Hast du schon mal ein Angular-Projekt irgendwie gehabt oder gebaut?
Okay, also ich bin bei Angular nie über die Tour of Heroes rausgekommen, muss ich ja gestehen. Also von den drei Frameworks Angular-Rack-View habe ich mich mit Angular am wenigsten beschäftigt, keine Ahnung, was da so, aber ich finde Angular an sich relativ komplex und sehr, keine Ahnung, 4000 Pakete.
Du bist weit drunter, also das ist nicht ganz das Zehnfache, aber die Hälfte vom Zehnfachen, also 22.000, über 22.000 Pakete. Und da dauert der NPM-Install dann auch eine Weile.
Nicht schlecht.
Wie man sich denken kann.
Nicht schlecht.
Ja, genau, damit können wir das eigentlich dann auch abschließen oder hast du noch was dazu?
Nee, das wäre es eigentlich.
Gut, dann haben wir vielleicht sogar jetzt ein Jingle.
Die Property der Woche
Ah, okay, das Ende habe ich noch gehört. Da war jetzt gerade ein kleines Loch in der Übertragung, aber macht nichts. Dadurch, dass ich das Ende gehört habe, ist alles gut.
Ja, das kann also generell sein heute, dass wir zwischendrin mal Lücken haben. Wir hoffen nicht, dass es der Fall ist, aber mal gucken.
Nein, bei uns gibt es nichts. Wir sind lückenlos.
Also meine Property der Woche, oder die ist diese Woche von mir, ist WebKit Line Clamp.
Also das ist jetzt auch nichts ganz, ganz, ganz schrecklich Neues. Es ist mir schon vor einer Weile über den Weg gelaufen, aber ich habe es jetzt heute nochmal ausprobiert, weil ich es irgendwie interessant fand und ich habe extra WebKit dazu gesagt, weil da sind wir schon bei der ersten Merkwürdigkeit.
Die wird mit WebKit Prefix unterstützt, das ist eine CSS Property, mit WebKit Prefix wird die unterstützt, aber auch in Firefox und zwar nur so.
Also ich kann nicht einfach Line Clamp schreiben und hoffen, dass es dann in Firefox funktioniert, sondern in Firefox tatsächlich brauche ich auch WebKit Prefix.
Gab es meiner Meinung nach, aber auch schon ab und zu mal bei bestimmten Properties. Weiß ich jetzt gerade kein konkretes Beispiel mehr, aber sowas ist mir auch schon mal über den Weg gelaufen, dass man das tatsächlich im Firefox so auch gebraucht hat.
Ich finde es extrem merkwürdig, weil normalerweise gibt es dann irgendwie immer noch eine Standardvariante, aber offenbar gibt es dazu noch nicht die Standardvariante.
Ich nehme mal an, Mozilla hat da sich dabei gedacht, naja wir gucken jetzt erstmal wie das jetzt wird, bevor wir das irgendwie implementieren, wir wollen aber irgendwo die Kompatibilität herstellen.
Egal, aber ich erkläre erstmal, was das Ding überhaupt tut, für die, die das noch nicht wissen.
Und zwar mit WebKit Line Clamp kann ich eine Anzahl an Zeilen angeben, nach der mein Blog, der Text von meinem Blog abgeschnitten wird.
Also das ist ein klassischer Use Case im Webdesign, ist so, ich habe hier irgendwie eine Box, möchte die aber nicht unendlich hoch werden lassen, möchte nach einer gewissen Zeilenanzahl meinen Text abschneiden.
Und vielleicht bin ich dann aber auch mitten in einem langen Wort oder so.
Das ist oftmals irgendwie schwer zu berechnen.
Also gibt es jetzt WebKit Line Clamp, da kann ich zum Beispiel sagen, hey, nach drei Zeilen bitte hätte ich gerne Ellipsis und der Text wird nicht mehr als drei Zeilen angezeigt, egal wie lange der ist.
Dazu braucht man eine ganze Myriade an Eigenschaften, die man da reinschreiben muss.
Also es ist leider nicht mit Line Clamp 3 getan, also man kann da einen Nun oder einen Integerwert reinschreiben.
Man muss dazu auch noch Display minus WebKit minus Box dazunehmen und tatsächlich komischerweise, ich habe es vorhin ausprobiert, nur in Firefox braucht man noch WebKit Box Orient Vertical.
Und das habe ich für den, ja, Moment, stimmt nicht, ich habe was unterschlagen, wir brauchen noch was, wir brauchen auch noch Overflow hinten.
Aber das ist bei so Text abschneiden, auch so mit Text Overflow und so weiter, ist, genau.
Interessant ist, dass wie der Text abgeschnitten wird, da gar nicht dabei steht.
Also da wird einfach angenommen, dass man ein Ellipsis haben will.
Ich weiß jetzt nicht, ob man das irgendwie noch beeinflussen kann, aber derzeit wird da einfach eine Ellipsis eingefügt am Ende.
Ich habe dazu auch eine kleine Demo gebaut, die gibt es dann in den Shownotes.
Interessant.
Ich bin jetzt gerade am überlegen, habe ich noch was vergessen?
Genau, also mit Text Overflow, Ellipsis, das ist der klassische Fall, damit kann man leider nur eine Zeile machen, also so drei Zeilen ist dann eher schwierig.
Es gibt auch eine JavaScript-Implementierung davon, also wenn man irgendwie das jetzt über alle Browser hinweg irgendwie halbwegs gleich haben will, dann gibt es etwas, das nennt sich Clamp.js.
Das habe ich mir jetzt nicht im Detail angeschaut, aber das funktioniert so ähnlich.
Man gibt eine Zeilenanzahl an und dann wird abgeschnitten.
Browser-Support ist Chrome, Current Fire, also Chrome glaube ich schon seit Version 14, beziehungsweise auf Mobile erst 80, wie ich gerade sehe.
Firefox ab 68, IE nicht, Edge ab 17 und Safari ab 5 kann das, also eigentlich auch schon relativ lange.
Ich nehme mal an, dass wahrscheinlich dadurch, dass es in Safari 5 schon unterstützt wurde, wahrscheinlich so eine Apple-Eigenheit noch ist aus der Web-Git-Zeit,
wo die noch sehr viel Properties eingebaut haben in ihre Browser, weil sie sie eben gebraucht haben für ihre eigenen Produkte.
Genau, ich glaube, was es noch zu sagen gibt, ist, das ist irgendwie auch nicht richtig standardisiert, soweit ich weiß, und auch nicht so richtig dokumentiert.
Also überlegt euch gut, ob ihr es einsetzen wollt.
Ich finde es aber eine interessante Lösung oder eine relativ einfache Lösung für einen Use-Case, den ich zumindest schon relativ oft hatte,
beziehungsweise Grafiker, mit denen ich zusammengearbeitet habe, hätten das schon sehr oft gerne mal gehabt.
Ich möchte da gerne mal den Text abschneiden, weil wir wollen da, wir haben da nur Platz für zwei Zeilen oder für drei Zeilen oder für fünf Zeilen.
Und jetzt kann ich das quasi einfach nur mit CSS machen, ohne da irgendwie Zeichen zählen zu müssen oder irgendwie sonst irgendwas komisches machen zu müssen.
Genau, damit bin ich mit meinem Thema die Property der Woche am Ende.
Brauchen wir eigentlich End-Jingles, habe ich mich gerade gefragt?
End-Jingles? Nee, ich glaube, wir brauchen es nicht übertreiben, oder?
Doch, ich habe eine super Idee. Wir drehen die Jingles, wir spielen die Jingles einfach rückwärts ab.
Okay, mal gucken. Hören wir uns mal an.
Vielleicht in der nächsten Folge, genau.
Ja, es geht gleich weiter mit dem nächsten Thema, weil ich höre gerade aus der Regie.
Wir müssen leider Werbung machen. Ein Spot, dann geht's weiter.
Magst du nähen, montieren, modellieren? Mit kurzsichtiger Brille vergrößerst du alles.
Kannst du die kleinen Buchstaben kaum lesen? Kein Problem mit dieser Lupenbrille.
Überwältigende Kurzsichtigkeit. Sehe alle winzige Dinge.
Irritiert dich, wenn du die winzigen Buchstaben nicht lesen kannst? Lupenbrille.
Abmeldung hier.
Trage diese Lupenbrille. Nützlich, du bekommst eine super Sehkraft auf nah.
Mit dieser Brille geht Näherei an Strichjatt.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Ja, das war natürlich keine echte Werbung, sondern eine Spam-E-Mail, die ich tatsächlich genau mit diesem Wortlaut in meinem Posteingang gefunden habe.
Und ich habe mir jetzt vorgenommen, die witzigsten oder auch skurrilsten oder auch nur banalsten davon statt zu löschen, einfach zu sammeln und zu vertonen.
Und dann gibt es die hier als Spam-Spot zu hören.
Sehr, sehr, sehr geil. Ich habe auch schon, also, naja, ich durfte schon mal vorhören, es ist jetzt nicht die einzige, die es bisher gibt.
Nein, wir haben schon ein paar für die nächsten Folgen.
Was heißt, naja, nicht, ja genau, wir haben, wir haben schon ein paar, aber der Konstantin hat sie gemacht und ich habe, nachdem ich die alle gehört habe, ich glaube, ich habe schon eins mehr gehört, als du glaubst, dass ich gehört habe, by the way.
Echt? Okay.
Habe ich mir auch, also, ich bin mir sicher, du wirst Sprecherangebote bekommen.
Oh mein Gott, ja vielleicht zweites Standbein.
Ja, wir wurden auf LinkedIn auch gefragt, wo kriegt man denn so einen geilen Sprecher her oder wer ist denn der geile Sprecher?
Vom Intro, ja, genau.
Und dann musste ich antworten, genau, vom Intro, Entschuldigung.
Und dann musste ich antworten, nein, habe ich gerne geantwortet, naja, der spricht auch im Podcast mit und hint, ich bin's nicht.
Genau, also, der Konstantin, der hat da echt große Sprecherqualitäten.
Ach, ja, gut.
Du darfst, na, doch, doch, nicht tiefstapeln, ich bin auf jeden Fall der Meinung, ihr könnt es ja mal in die Kommentare schreiben.
Ja, würde mich freuen, vielleicht findet ihr es auch total doof, dann lassen wir es in Zukunft wieder weg, aber ich finde es, es hat Spaß gemacht, das zu produzieren.
Nein, wir lassen es nicht weg, wenn ihr das doof findet, solange wir es gut finden.
Nein, es ist einfach zu gut.
Ja, deswegen habe ich vorhin auch so, als du gemeint hast, du willst alle Jingles produzieren, also ich wollte nämlich noch sagen, ich habe jetzt zwar schon vier von diesen Spots produziert, aber ich wäre schon dafür, dass wir uns das auch aufteilen, damit meine Stimme nicht irgendwann zu langweilig wird.
Dafür würde ich dann vielleicht auch noch einen Jingle machen, vielleicht können wir uns da einigen, wir sprechen mal noch hinter der Bühne.
Hinter der Bühne. Ja, ich weiß nicht, also, ich sage es mal so, ich tue mir leicht mit schwer verfremdeter Stimme durch irgendwelche merkwürdigen Tools, ich bin mir nicht sicher, ob ich das mit den Jingles halbwegs gleichwertig hinkriege wie du.
Wir gucken mal, wir gucken mal.
Ja, genau, wir schauen mal.
Genau, und jetzt kommen wir zum Thema, zu dem wir nämlich auch keinen Jingle haben bisher, aber eigentlich bräuchten wir für das Thema auch einen Jingle, finde ich.
Das kriegen wir hin.
Machen wir.
Da habe ich jetzt zum Beispiel schon eine Idee.
Ich auch.
Wir werden uns irgendwie einigen.
Ja, da hätte ich jetzt ganz knallhart, hallo David Matsiejewski, falls du es hörst, da würde ich knallhart von dem mittlerweile alten und nicht mehr erscheinenden Podcast Technikwürze abkupfern, die haben das nämlich damals ganz cool gemacht schon.
Zur Zeit, als es noch nicht so viele geile Tools gab, um Podcasts zu produzieren, also nochmal Hut ab an alle, die vor 15 Jahren schon Podcasts produziert haben.
Wir haben es jetzt sehr leicht im Vergleich zu euch.
Heute können das sogar wir.
Früher war das noch richtig Arbeit.
Das ist der einzige Grund, warum wir das jetzt machen.
Und nicht früher, genau, weil wir einfach ein bisschen nicht schlau genug waren damals.
Jetzt sind wir schlau genug.
Okay, dann, ja, die letzten beiden Themen waren nicht wirklich frontend-spezifisch.
Das war auch ein Feedback, was wir bekommen haben.
Neben dem ansonsten eigentlich durchweg positiven Feedback, was uns sehr gefreut hat.
Und für uns ist es natürlich auch eine Gratwanderung, Neulinge nicht auszuschließen, die vielleicht gerade erst eingestiegen sind in den Bereich und den Podcast hören.
Und Senior-Entwicklern jetzt nicht irgendwie jedes Mal nur was zu erzählen, was sie schon tausendmal gehört haben.
Aber es wird natürlich nicht ausbleiben, dass eins von beidem immer wieder auftritt.
Und ich habe mir überlegt, worüber könnte man denn mal sprechen, damit jeder was Neues erfährt.
Und es ist ja so, dass unser Bereich sich immer grundlegender und immer rasanter entwickelt.
Die Build-Prozesse werden immer komplexer.
Wir haben es vorhin schon gesagt, tausende, und zwar wirklich tausende, Abhängigkeiten und Packages, die installiert werden.
Dann ES6 bzw. ES Next, diverse Frameworks, die immer wieder aus dem Boden gestampft werden und wieder eingestampft werden.
Und bei mir war das tatsächlich eine Zeit lang, ich hatte richtig das Gefühl, abgehängt zu werden und nicht mehr mitzukommen.
Und auch gar nicht die Zeit, neben dem eigentlichen Arbeiten noch mehr diese diversen Techniken und Libraries und diverse Trends, die es gibt, anzuschauen.
Weiß nicht, wie ging es dir, Moritz? Kennst du das Gefühl?
Absolut selbe Geschichte.
Also ich weiß gar nicht genau, als ich noch in einer kleineren Agentur gearbeitet habe, da war das für mich noch leichter, irgendwie die Trends nachzuvollziehen.
Aber irgendwann hatte ich so den Eindruck, unser Ökosystem oder unsere Branche explodiert irgendwie und es entsteht an, jede Woche irgendwie entstehen drei neue Frameworks, wo alle sagen, das musst du gesehen haben.
Und jetzt zusätzlich kommen ja heutzutage noch nicht nur neue Frameworks dazu, sondern auch noch Myriaden an Browser-APIs, die man irgendwie alle auch schon mal gesehen haben sollte.
Und ich weiß nicht, ob ich jetzt vielleicht einfach zu alt geworden bin oder mein Hirn zu langsam, ich komme da tatsächlich nicht mehr mit.
Aber ich habe mittlerweile auch meinen Frieden damit geschlossen. Es ist okay, man kann einfach nicht mehr alles können, glaube ich.
Ja, gut, dass du auch schon mal die Einschätzung gibst. Das wäre nämlich auch noch mal eine Frage gewesen.
Und das ist auch so ein bisschen das, was ich heute klären will.
Also ich habe mir mal zwei Techniken rausgegriffen, die so ein bisschen das Zeug dazu haben, die Frontend-Landschaft nochmal stärker zu verändern, als das in den letzten Jahren eh schon der Fall war.
Natürlich WebGL und WebAssembly. Aber es wäre natürlich jetzt im Rahmen von so einer Podcast-Episode, wäre es schon zu viel, nur eins davon so richtig in der Tiefe zu behandeln.
Das heißt, ich werde nur mal kurz anreißen, was das überhaupt ist, wieso das entstanden ist, was man damit machen kann.
Vor allem möchte ich aber auch die Frage klären, muss man sich das dann überhaupt anschauen? Also lohnt es sich da Zeit rein zu investieren?
Und das hast du jetzt gerade schon ein bisschen vorweggenommen.
Ah, Verzeihung.
Nein, nein, gar kein Problem. Und ich habe jetzt diesmal auch schon eine Folge, wir haben das jetzt vorher noch nicht abgesprochen.
Normalerweise legen wir den Folgentitel nach der Aufnahme fest, wenn wir einen besonders lustigen Satz oder sowas aus der Folge haben.
Ich würde das Ganze aber jetzt zumindest das Thema schon mal unter den Deckmantel stellen, unter die Überschrift stellen.
Ist das noch Frontend oder kann das weg?
Yes.
Und sagt dir denn beides was, WebGL und WebAssembly?
Ja, mit einem habe ich tatsächlich schon mal ein bisschen rum experimentiert, allerdings war es da noch in einer relativ frühen Phase und von dem anderen kenne ich eigentlich nur Demos. Kannst du jetzt raten, was was ist?
Von WebAssembly kennst du nur Demos, mit WebGL hast du schon experimentiert.
Nee, es ist genau umgekehrt.
Nein, tatsächlich? Okay.
Ja, tatsächlich.
Interessant. Bei mir ist es nämlich genau andersrum. Deine Einschätzung genau, die wollte ich jetzt eigentlich erfragen, aber du hast schon gesagt, du bist der Meinung,
man muss sich nicht immer mit allem beschäftigen. Ja, ich bin gespannt, ob das auch unser Endfazit werden wird.
Und vorher schauen wir uns beide Techniken mal kurz an. Mit WebGL habe ich auch, also habe ich wie gesagt schon mal ein bisschen gearbeitet.
Da haben wir auch eine Art Tech-Demo gemacht, die leider noch nie an die Öffentlichkeit gegangen ist. Vielleicht kann ich das irgendwann mal zeigen.
Ja, kann ich jetzt leider nicht sagen, was es dagegen ist. Brennen wir unter den Nägeln, aber ich darf es nicht sagen.
Was ist WebGL?
WebGL ist eine JavaScript-API zur Anzeige von 3D-Grafiken. Und das Ganze funktioniert im Browser, Hardware beschleunigt, kann also direkt mit der GPU kommunizieren und wird in einem Canvas-Element dargestellt.
Und durch JavaScript-Schnittstellen ist es natürlich dann auch möglich, damit sie interagieren. Also ich kann Objekte reinladen, ich kann die Objekte drehen, kann auf Mausbewegungen achten.
Ich kann sogar die Webcam anzapfen, wenn der Browser das zulässt und so weiter. Und das Ganze gibt es eigentlich sogar schon relativ lange.
Also es ist 2011 erschienen, das ist jetzt auch schon fast ein Jahrzehnt her und es ist trotzdem noch eine Nische.
Also auch daran merkt man schon, wenn es jetzt wirklich der heiße Scheiß wäre, dann müsste da schon viel mehr mitgemacht worden sein.
Und ein Grund ist glaube ich auch, dass das Ganze eine eigene Programmiersprache mit sich bringt, mit der die Shader programmiert.
Nennt sich GLSL, also für GL wie in OpenGL oder WebGL, was einfach nur für Graphics-Library steht und eben SL, die Shader-Language.
Da muss man auch wieder einen kurzen Exkurs machen. Was sind Shader? Shader sind Programmmodule oder auch Hardware-Module mittlerweile fest auf den Platinen, die für die Geometrie, Texturierung, Materialeigenschaften von 3D-Objekten zuständig sind.
Ich hoffe, ich habe das so richtig wiedergegeben. Mein Bruder wird mich sonst schlagen. Er ist nämlich bei uns für den 3D-Bereich zuständig, macht das auch schon so lange, wie wir, oder fast so lange, wie wir uns mit dem Web-Bereich beschäftigen.
Und von daher bin ich nicht ganz ein unbeschriebenes Blatt. Ich habe da immer so ein bisschen Einblicke gehabt in die 3D-Welt. Für mich war es trotzdem ein Buch mit sieben Siegeln, bis vor ein paar Wochen, wo ich tatsächlich auch mal ein bisschen in den 3D-Bereich eingestiegen bin, dank Blender, was ja eine Open-Source-Software ist für 3D-Anwendungen oder 3D-Grafiken, 3D-Renderings.
Und das ist so eine ganze, ganz eigene Welt für sich. Also man merkt das jetzt schon, Shader muss ich schon allein erläutern, weil das wahrscheinlich nicht jedem was sagt.
Und was für Gedanken man sich da macht, man nimmt die Umwelt ganz anders wahr, überlegt, welche Materialeigenschaften hat das Objekt oder wie würde ich das nachmodellieren.
Und das sind einfach Sachen, über die man sich so im 2D-Kontext und als Grafikdesigner oder Webdesigner, aber auch als Entwickler eben überhaupt gar keine Gedanken macht.
Und ja, deswegen ist das überhaupt noch Frontend. Ja, es ist aber trotzdem Frontend, weil es muss irgendwie in den Browser und irgendjemand muss das in den Browser bringen.
Ja, das heißt, entweder wird es so sein, dass Frontendler sich plötzlich mit dem 3D-Bereich beschäftigen müssen, wenn sie sowas anwenden wollen.
3D-3D-Artists, wie die sich ja nennen, gibt es da einen deutschen Begriff dafür, 3D-Künstler, müssen sich Webtechniken aneignen oder in großen Firmen wird es wahrscheinlich so laufen, dass es zwei Teams gibt, die dann irgendwie miteinander interagieren.
Es gibt aber auch eine Library oder bestimmt gibt es auch noch mehrere andere Libraries, aber die eine, die ich kenne, mit der ich auch schon mal so ein bisschen rumprobiert habe, die nennt sich 3JS.
Und die abstrahiert das Ganze so ein bisschen. Also man muss dann keine eigenen Shader mehr programmieren und muss die Interaktion mit, ich bewege die Maus und das Objekt soll sich bewegen und so.
Das nimmt einem einiges ab. Und interessant dabei ist, dass es ursprünglich in ActionScript geschrieben war, also für das Hassgeliebte Flash, das mittlerweile endlich tot ist und wurde dann eben portiert nach JavaScript.
Ja, das macht es natürlich einem Webentwickler ein bisschen einfacher in diese Geschichte einzusteigen, aber trotzdem brauche ich noch 3D-Modelle und trotzdem sehen viele Demos, die man so sieht, dann halt auch so aus, als hätte jemand, der eigentlich von 3D nicht so wirklich die Ahnung gehabt hat, nur mal so ein bisschen rumprobiert.
Und weil ich gerade Flash angesprochen habe, ja, ist das das neue Flash? Ja, Flash ist tot, es lebe WebGL. Der große Unterschied ist, dass WebGL nativ im Browser läuft. Das ist kein Browser-Plugin, sondern das läuft direkt, wenn der Browser Canvas-Elemente unterstützt und WebGL implementiert hat, läuft das. Browser-Abdeckung sage ich auch gleich noch was dazu.
Und das bietet natürlich viel mehr Möglichkeiten. Also 3D war schon mit Flash auch möglich, aber dieses direkte Ansprechen der Grafikkarte und wirklich in einem 3D-Kontext sich befinden, das eröffnet natürlich eine ganz andere, neue Welt.
Zumal, wenn ich kurz einhaken darf, der 3D-Kontext im Browser ja eigentlich in den meisten Fällen am Ende ein 2D-Kontext wird.
Ja gut, klar, alles.
Wenn ich jetzt mal klug scheißen darf.
Genau.
Nee, ich hake deswegen ein, weil mir ist das zum letzten Mal begegnet, das Thema WebGL auf einer Konferenz, auf der wir, glaube ich, gemeinsam waren in Amsterdam, wo es nämlich um die WebVR-API geht, wo dann wirklich tatsächlich echtes 3D ist, weil ich da nämlich auch zwei Bilder habe, also mit so einer Brille.
Ich habe jetzt gerade eben nochmal ganz kurz nachgeschaut. Die WebVR-API ist deprecated, die gibt es irgendwie nicht mehr, das heißt jetzt WebXR. Gerade eben erst gelernt, wusste ich auch nicht, kann ich auch nicht viel zu sagen. Also ich wollte nur kurz einhaken und sagen, 3D wird meistens ja am Ende 2D.
Richtig, genauso wie bei Architektur-Visualisierung am Ende kommt ein Bild raus, egal mit welcher Technik das jetzt gemacht wird, Raytracing, das also wirklich Strahlen abschickt oder in Blender gibt es dann noch eine andere Technik, die das wieder ein bisschen anders macht.
Aber am Ende versuche ich, dreidimensionalen Raum in 2D darzustellen. Und das passiert natürlich auch, wenn WebGL das Ganze in Canvas-Element reinrechnet, reinrendert, meine ich.
Ja.
Genau, also es gibt bei 3JS, auf 3JS.org gibt es einige Demos und ich habe schon gesagt, viele sind tatsächlich einfach nur Tag-Demos. Da hat jemand wirklich gezielt einfach nur mal was demonstriert, wie man das nutzen könnte.
Also man kann mit einem sehr rudimentären 3D-Auto durch eine noch rudimentärere 3D-Landschaft fahren, mit der Tastatur, das ist nett, aber halt eben auch nur nett und nicht wirklich nützlich jetzt für eine Webseite, außer vielleicht von einem Hersteller, aber da müsste man das Ganze noch ein bisschen schicker machen.
Dann gibt es eine Demo, die nennt sich Infinitown. Da wird eine Stadt, so ein bisschen im Comic-3D-Stil, programmatisch gerendert und zwar endlos. Da kann ich rumscrollen und das wiederholt sich immer wieder, aber so, dass man es möglichst nicht merkt, dass es sich wiederholt.
Aber es sind, wie gesagt, hauptsächlich Tag-Demos. Es gibt ein paar Beispiele auf der Seite, die es sich anzuschauen lohnt, wo man wirklich sieht, wie man das Ganze aber auch richtig cool und richtig ansprechend in tatsächliche Seiten unterkriegen kann.
Das ist eine Demo, da poste ich natürlich auch die Links in die Shownotes. Eine zum Thema Wein, das ist ein Weingut oder zumindest ein Weinvertrieb im französischsprachigen Bereich, wo das in so einem Header-Visual ziemlich cool umgesetzt ist.
Also es lohnt sich, da mal drauf zu gehen. Es ist auch so ein kleiner Slider. Es gibt verschiedene Slides, wo man sich da anschauen kann und teilweise ist es mit Video, teilweise aber wirklich auch über WebGL umgesetzt und das macht einfach Spaß.
Also es sieht richtig wertig auch aus und so lässt sich das natürlich schon ganz cool einsetzen, um eine Webseite aufzuwerten, wo es eben Sinn macht.
Und die andere Demo, die es da gibt, ist zum Thema Mais. Ich glaube, es geht um genmodifizierten Mais, wenn ich das richtig verstanden habe. Ist aber auch egal. Es ist einfach cool gemacht.
Also es macht Spaß, sich da durchzuscrollen. Ich finde es auch ganz nett, wie das gemacht ist, dass man scrollt und scrollt aber nicht einfach nur eine Seite runter, sondern es wandert dann so hoch und man sieht rechts den Fortschritt mit so Kreisen, die sich aufhören.
Also ich finde es insgesamt ziemlich cool gemacht und es zeigt halt vor allem auch, was mit WebGL möglich ist, wo dann irgendwelche so DNA-Stränge dann hochkommen und ja, irgendwelche fancy Effekte, wenn man über den Text fährt und das ist eben alles damit möglich und das ist ziemlich cool.
Und da sieht man, es ist tatsächlich möglich, das im Web unterzubringen. Es wird nur noch nicht wirklich gemacht, weil wahrscheinlich das Know-how fehlt und weil viele davor zurückschrecken, sich vielleicht dem Thema anzunehmen.
Ich habe dazu aber auch noch eine Theorie, warum das nicht so viel gemacht wird. Ist, weil oftmals finde ich für viele Sachen die Anwendungsfälle fehlen. Es ist genau wie VR. Ich weiß nicht, ich bin mir nicht sicher, ob es wenig Anwendungsfälle gibt oder ob wir sie erst noch erfinden müssen.
Ob wir erst, sagen wir mal so, mit der Technologie kommt ja oft erst die Idee für den Anwendungsfall und es kann sein, dass wir einfach in unserem Mindset noch nicht so weit sind, dass es uns klar wird, hey, sowas geht eigentlich.
Es muss vielleicht auch sich erstmal durchsetzen, dass wir wissen, dass sowas geht, dass wir uns überhaupt dafür interessieren. Weil ich meine, da kommen wir nochmal zu dem allgemeinen Thema. Ist es Frontend oder kann das weg? Möchte ich was lernen, einfach nur um es gelernt zu haben oder habe ich einen konkreten Anwendungsfall?
Also in meinem Fall ist die Motivation, was Neues zu lernen, am allerhöchsten, wenn ich konkret irgendwas damit umsetzen will. Also wenn ich, ich habe jetzt ein Projekt und sage, hey, das kann ich jetzt nur mit WebGL lösen, dann muss ich es halt eben lernen.
Ja, da muss ich es mir jetzt anschauen und ansonsten so auf Halde lernen. Ich weiß nicht, ich glaube, ich kenne Leute, die das können. Mir fällt das sehr schwer.
Ja, da ist durchaus was dran. Aber wir hätten natürlich jetzt auch schon fast ein Jahrzehnt gehabt, um Anwendungsfälle zu finden. Aber die Anwendungsfälle sind auf jeden Fall durchaus da.
Also es gibt sie, das zeigen die beiden Demos ganz deutlich. Was die Demos aber auch zeigen, sind Ladezeiten. Das hat mich dann doch wieder an Flash erinnert.
Also man sieht erstmal so einen Text loading your experience und einen Loader, bis da im Hintergrund was geladen wird. Also es sind halt natürlich auch entsprechende Datenmengen, die da erstmal in den Browser geladen werden müssen.
Das wird bei WebGL aber noch schlimmer. Dazu kommen wir dann gleich noch. Zwei Demos, die ich da noch hervorheben möchte, weil wir ja beide auch so ein bisschen musikalisch durchaus inspiriert sind, sind zwei Audio-Demos, die auch Web-Audio, was ja auch wieder eine dieser neumodischen Web-APIs ist.
Das klingt so negativ.
Nein, es geht ja generell um, dass man überschwemmt wird von so neumodischen, dieser ganze neumodischen Kram. Da kann ich als Web-Opa nichts mit anfangen.
Genau, also diese beiden Demos. Das eine ist glaube ich so ein, ja ich dachte zuerst, das wäre so ein Indie-Label, das da irgendwie Songs vorstellt. Das ist aber eigentlich auch wieder nur eine Google-Tag-Demo.
Und das zweite ist auch auf 3.js wieder so eine Tag-Demo. Aber es ist beides ganz cool, weil eben zusätzlich zu dem visuellen, räumlichen 3D auch die Audio-Wiedergabe sich anpasst.
Das heißt, wenn ich, das sind dann so Böppel um einen rum, wo dann, die dann als Musikquelle dienen und wenn ich mich da im Raum eben mit der Maus bewege, dann kommt der Böppel hinter mir halt wirklich, auch wenn ich es über Kopfhörer höre, hinter mir.
Und das vor mir kommt vor mir und wenn ich näher rangehe, wird es lauter und wird leiser, wenn ich weggehe und so. Also das ist, ja das ist einfach absolute Immersion. Aber halt auch sehr technisch. Ich würde gerne mal was sehen, wo man das, ja nicht nur als Tag-Demo, sondern wirklich cool miterleben kann.
Von mir aus auch als Kunstprojekt. Das muss ja nicht mal eine Webseite sein, die irgendwie was bewirbt oder so. Ja, bitte.
Vorne und hinten. Ich nehme mal an, du hast Stereo-Kopfhörer, oder?
Ja.
Da frage ich, ich habe keine Ahnung, wie das funktioniert. Ich habe auch davon gehört, dass es irgendwie gehen soll, aber wie kannst du vorne und hinten hören bei Stereo-Kopfhörern, die du links und rechts auf den Ohren hast? Also wie wird das gemacht? Hast du eine Ahnung?
Das stimmt, das hat wahrscheinlich eine gute Frage.
Also ich meine, offenbar funktioniert es ja.
Also ich meine generell, um mal kurz einen Biologie-Exkurs zu machen, für alle, die in der Schule in Biologie nicht aufgepasst haben. Also grundsätzlich funktioniert ja die Klangortung so, dass ich eine Geräuschquelle auf dem rechten Ohr lauter wahrnehme als auf dem linken, beziehungsweise zusätzlich spielt damit rein, dass sie am rechten Ohr ganz minimal früher ankommt als auf dem linken.
Genau.
Und dadurch kann das Ohr halt entscheiden, okay, wenn das rechts früher ankommt als links, auch wenn das nur ein paar Millisekunden sind, so fein kann das Gehör auflösen, um zu entscheiden, okay, das kommt von rechts oder das kommt von links. Aber es ist tatsächlich eine gute Frage, kommt es von vorne, kommt es von hinten?
Ja, da gibt es sowas wie Phasenverschiebung, aber da hört dann mein Wissen auch schon auf, was das angeht. Vielleicht kann es jemand klären, dann sagen wir es in einer der nächsten Folgen, wie das funktioniert.
Ja, das würde mich jetzt auch interessieren.
Kommentarfunktion auf unserer Seite benutzen und schauen, ob sie funktionieren.
Und wenn es nur dafür ist, bitte, bitte.
Und wenn sie nicht funktioniert, nicht frustriert abziehen, sondern uns irgendwie eine Mail schreiben oder bei Twitter irgendwie melden.
Sondern hinterlassen uns einen Kommentar, dass die Kommentarfunktion nicht funktioniert.
Also wirklich, das sind die schlimmsten Situationen.
Wir haben ja genug Kanäle, wo man uns dann drauf anhauen kann.
Genau, also einen anderen, weniger von uns kaputt gemachten Kanal benutzen, um uns dann Bescheid zu sagen.
Genau, weil das interessiert mich wirklich, weil ich hatte das auch schon, dass ich dachte, da kommt jetzt was von vorne oder von hinten.
Oder man hat so dieses Gefühl, so wie im Kino, da geht jetzt einmal was, einmal rund.
Also mit guten Kopfhörern kann man das irgendwie haben.
Aber eigentlich kann es gar nicht sein.
Also vielleicht fehlt mir aber auch irgendwie nur Wissen, um es zu verstehen.
Genau, ein Schubende.
Ja, das war es eigentlich jetzt auch schon zum Thema WebGL.
Wie gesagt, die Links zu den ganzen Demos, die gibt es dann in den Shownotes.
Und ganz kurz noch zum Browser-Support.
Der ist tatsächlich relativ hoch, überrascht jetzt auch nicht nach mittlerweile einem Jahrzehnt fast.
97,47 Prozent inklusive IE11, man höre und staune, und Edge.
Und die Version 2 von WebGL bei gerade mal 75,1 Prozent.
Kein IE natürlich, Edge seitdem es jetzt auf Chromium umgestellt ist.
Und leider Safari nur mit Flag.
Und wie ich gelesen habe, wohl auch seit ein paar Jahren schon nicht mehr wirklich aktiv weiterentwickelt.
Das ist natürlich sehr schade, weil das natürlich schon als Bremse fungieren kann.
Aber die ganzen Demos, bis auf irgendwie eine Handvoll auf der 3.js-Seite, sind mit WebGL 1 gemacht.
Und nur ganz wenige mit WebGL 2.0.
Also man kann da auch jetzt schon ein cooles Zollbild machen.
Man muss es nur wollen und man muss es natürlich auch können.
Ich glaube, wenn ich ein interessantes Produkt habe, das mit WebGL 2 gemacht ist,
dann kann ich vielleicht auch meine Nutzer, auch wenn man das nicht unbedingt sollte, dazu erziehen,
dass sie dann dafür eben den entsprechenden Browser verwenden.
Gut, weil es natürlich mobil auch unter iOS auf Apple-Geräten nicht funktioniert.
Aber gut, anderes Thema.
Wir wollen mich schon wieder Apple haten.
Ja, dann kommen wir zu WebAssembly, auch WASM abgekürzt, W-A-S-M.
Das ist ein offizieller W3C-Standard für ein portables Binär-Code-Format zur Ausführung von Code aus verschiedenen Programmiersprachen im Browser.
Ja, ich habe das abgelesen.
Quatsch.
In erster Linie ist das gedacht für relativ Low-Level-Sprachen wie C oder C++.
Aber durch Interpreter kann man zum Beispiel auch .NET-Sprachen benutzen, C-Sharp, Go, Java, um nur einige zu nennen.
Auf der Seite webassembly.org ist eine ganze Liste an Sprachen, die da unterstützt werden.
Und das Ganze ist auch schon 2017 erschienen.
Das heißt, das ist tatsächlich ein bisschen neuer.
Natürlich sind jetzt auch schon wieder drei Jahre.
aber doch eine aktuellere Technik jetzt im Vergleich mit WebGL.
Und wichtig zu sagen ist, das soll jetzt nicht irgendwie JavaScript ersetzen.
Jetzt nehmen uns plötzlich die ganzen C-Sharp-Entwickler die Arbeitsplätze weg.
Sondern es ist als Ergänzung gedacht für besonders performance-hungrige Anwendungsfälle.
Aber auch zum eben einfacheren Konvertieren von bestehender Software, die in anderen Sprachen geschrieben ist, für den Browser.
Es ist natürlich schneller als JavaScript, weil es näher am Maschinencode ist.
Und es muss nicht gepasst werden. Das ist der große Vorteil.
Und dadurch habe ich natürlich einen großen Geschwindigkeitsvorteil.
Nachteil ist, es gibt keinen direkten DOM-Zugriff.
Das ganze Ding ist in so einer eigenen Sandbox.
Aber über Proxy-Funktionen ist es auch möglich, aufs DOM zuzugreifen.
Das funktioniert so ein bisschen wie Imports und Exports bei JavaScript-Modulen.
Also ich importiere mir aus dem DOM-Kontext Dinge rein, die ich dann in WebAssembly benutzen kann.
Und ich kann auch Methoden exportieren, die dann öffentlich aufgerufen und ausgeführt werden können.
Und das kann dann zum Beispiel auch wieder mit WebGL interagieren, um irgendwas performance-hungriges erstmal zu berechnen und dann eben auch mit WebGL darzustellen.
Ja, warum macht man das? Du lachst.
Ja, bei dem würde ich sagen, sofern ihr damit in Berührung gekommen seid, habt ihr es wahrscheinlich gar nicht gemerkt.
Also das merkst du ja nicht unbedingt.
Naja, ich sage gleich noch, woran man es merkt.
Aber erstmal, warum hat das jemand gemacht?
Also das war tatsächlich 2010, glaube ich, erstmal so ein bisschen Proof of Concept.
Da kam mScripten auf den Markt.
Das ist eine Software, ein Compiler, der C oder C++-Code in JavaScript übersetzt.
Und das Spiele-Studio Epic, das man vielleicht auch kennt, hat dann die Unreal-Game-Engine damit einfach mal eben so im Browser laufen lassen.
Und ich glaube, da hat dann auch damals Heise und sowas darüber berichtet.
Also das war dann schon so, oh wow, man kann das jetzt im Browser laufen lassen.
So richtig performant war es, glaube ich, aber nicht.
Ich hätte mich gern mal davon überzeugt, es gab diese Unreal-Citadel-Demo.
Und ich habe dazu leider keinen funktionierenden Link mehr gefunden.
Also das war so das erste Ding, wow, man kann diese Engine da im Browser benutzen.
Und sah wohl auch schon relativ cool aus.
Wenn da jemand noch einen funktionierenden Link dazu findet, gerne, dass wir den nachreichen können, uns einfach melden.
Ja, und dann hat man festgestellt, das ist schön und gut, dass es funktioniert, aber natürlich ist es nicht wirklich performant.
Und dann hat das mScripten-Team in Zusammenarbeit mit Mozilla und Epic 2013 ASM,
JS rausgebracht.
Und ich habe mich da jetzt nicht so komplett tief eingelesen, aber wenn ich es richtig verstanden habe,
ist das einfach eine Untermenge von JavaScript, einfach ein bisschen zusammengestrichen,
um effizienter arbeiten zu können.
Und damit war es dann möglich, mit dem Kompilieren von mScripten und diesem ASM-JS als Basis,
die Performance nochmal ein bisschen zu erhöhen.
Aber auch das war natürlich nicht so performant, wie wenn ich was nativ laufen lasse.
Und dann hat man sich zusammengetan noch mit ein paar anderen, ich weiß gar nicht,
wer da alles noch mit in dem Konsortium dann mit drin war,
aber jedenfalls mit dem W3C-Konsortium ist da dieser Standard entstanden,
wurde Wasm, W-A-S-M, WebAssembly entwickelt.
Und es gibt da eine Demo, die ich natürlich auch in den Shownotes verlinken werde,
die direkt JavaScript versus WebAssembly aufzeigt.
Das ist so ein 3D-Ding, mit Sicherheit auch wieder WebGL fürs tatsächliche Rendern dann.
Da laufen so Figuren zufällig rum.
Erstmal nur zehn Stück und manche laufen nur geradeaus, andere bewegen sich.
Und ich kann das einmal mit JavaScript machen lassen und ich kann das mit WebAssembly machen lassen
und kann diese Anzahl an Figuren hochschrauben.
Und ich hätte jetzt erwartet, also ich meine, man merkt natürlich schon einen deutlichen Unterschied
zwischen JavaScript und WebAssembly von der Flüssigkeit her, der Bewegungen.
Und es läuft auch oben so wie so ein FPS-Meter.
Es ist, glaube ich, aber nicht FPS.
Ich weiß aber nicht genau, was es darstellt.
Aber man sieht jedenfalls, Wasm kann da deutlich mit deutlich größeren Mengen umgehen als JavaScript.
Aber wenn man das Ganze so Richtung 100, 125 Männchen hochfährt,
was ich jetzt noch gar nicht so viel finde,
dann merkt man, dass selbst Wasm ins Stocken gerät.
Vielleicht sollte ich auch mal meinen Rechner ab und zu neu starten.
Vielleicht liegt es auch daran, dass sich mein Speicher vollgefressen hat.
Ich weiß es nicht, habe mich aber überrascht, weil ich jetzt dachte,
okay, der Unterschied müsste deutlich dramatischer sein.
Aber es scheint gute Gründe zu geben, Wasm zu nutzen.
Google Earth hat vor einer Weile, also Google hat vor einer Weile Google Earth geupdatet
mit einer neuen Version im Browser.
Und das basiert auch auf WebAssembly.
Und da gibt es auch einen Blogbeitrag über die Hintergründe,
warum man sich dazu entschieden hat und wie man,
was für Schwierigkeiten man vorher hatte,
bevor man sich auf die Technik geeinigt hat,
eben Google Earth, was ja doch sehr ressourcenhungrig ist,
eben im Browser darzustellen.
Und was ich jetzt vorhin meinte, woran man dann doch merkt,
dass es WebAssembly ist, da werden halt mal eben 16 MB runtergeladen,
nur um das ausführen zu können.
Und 16 MB, ja okay, wenn du vier hochauflösende Bilder auf die Seite packst,
was manche Leute auch ohne Skrupel tun, dann hast du das auch voll.
Aber es ist halt schon eine Menge und man sitzt halt schon kurz davor
und wartet, bis das geladen ist.
Mit Brodli sind es dann nur noch 3,6, die dann tatsächlich auch übertragen werden.
Aber es dauert trotzdem, also man sitzt schon eine Weile vor diesem Loader
und wartet, dass was passiert.
Aber das Ergebnis ist natürlich auch cool.
So Google Earth im Browser, nicht schlecht.
Kannst du mir sagen, was ich denn in der Netzwerkanalyse sehe,
wenn WebAssembly runtergeladen wird?
Ich habe jetzt gerade eine Seite, von der ich dachte,
dass da WebAssembly im Einsatz ist.
Das müsste bei XHR, müsste das mit drunter sein,
weil das wird in der Regel per Window Fetch oder sonstigen geladen.
Ich habe es gerade gefunden.
Normales HTTP-Request.
Und als, du legst ja fest, was du erwartest als Rückgabewert,
ob jetzt JSON oder HTML oder was auch immer,
da wird dann eine Byte-Array, glaube ich, einfach angegeben.
Und dann wird das wirklich als.
In welchem Browser?
Bei Firefox war das zumindest.
Okay, also ich habe nämlich jetzt gerade ganz kurz live eingespielt.
Dann ist das nämlich tatsächlich WebAssembly, was ich hier gefunden habe.
Das sage ich gleich noch, was es ist.
Also im Netzwerkanalyse-Tab von den DevTools von Firefox sehe ich jetzt hier,
ist tatsächlich über, also Ursprung ist Fetch,
wurde also über ein JavaScript Fetch nachgeladen.
Und der Typ, der angegeben wird, ist tatsächlich Wasm, steht da.
Und in dem Fall ist das Ding nur 61 Kilowatt groß.
Oh ja, gut.
Ja, das ist eigentlich ganz okay.
Vielleicht erwähne ich auch mal kurz, was es ist.
Mir fiel nämlich ein, als du gerade erzählt hast, was man damit so machen kann,
fiel mir ein, ich habe ja schon mal eine Demo gesehen
und ich bin ja regelrecht süchtig danach geworden, nach dem Ding.
Was heißt Demo?
Es funktioniert schon richtig.
Und zwar heißt das Ding Sandspiel.club.
Das ist auch ganz ernst gemeint.
Also das ist eine Art Spiel, wo man sich sein Ziel selbst definiert.
Ich höre schon, der Konstantin tippt es gerade mal ein.
Ja, ich tippel, tippel, tippel mit meiner ultra leisen mechanischen Tastatur.
Genau.
Das ist, wie soll ich sagen, du hast quasi einen Canvas,
auf den kannst du verschiedene Materialien kippen.
Manche fallen nach unten, manche bleiben da, wo sie sind.
Also zum Beispiel, die haben physische Eigenschaften,
also zum Beispiel Wasser, Stein, Eis, Gas, Feuer, Lava, Pilze, Säure und so weiter.
Und die Materialien, je nachdem, wie man die kombiniert, interagieren die miteinander.
Also die Blumen sind sehr stabil.
Die kann man mit Stein bewerfen und der Stein häuft sich drumherum an.
Ja, dann bitte mal ein bisschen Säure draufwerfen, dann sind die auch weg.
Genau.
Was da passiert ist, also da kann man sehr, sehr,
der Canvas ist jetzt nicht wirklich riesig groß,
aber man kann relativ viele,
ich sag's mal so, jeder Pixel ist tatsächlich ein Element,
das eine Eigenschaft hat und mit seiner Umwelt interagiert.
Also ich kann mir vorstellen, dass da eine Menge Aktionen stattfinden,
wo jetzt berechnet werden muss.
Ein Pixel interagiert immer mit allen, die drumherum sind
und die wiederum mit allen, die drumherum sind und so weiter.
Und ich glaube, das multipliziert sich relativ schnell hoch.
Ich habe den Code von dem Sense-Spiel jetzt noch nicht gesehen.
Ich weiß auch gar nicht, ob man den irgendwo sehen kann.
Auf jeden Fall, der Entwickler, der dieses Spiel,
ich weiß nicht, ob es wirklich ein Spiel ist,
entwickelt hat, der hat auf der JS-Conf letztes Jahr in Berlin das vorgestellt
und ich habe danach irgendwie stundenlang damit rumgespielt,
weil es einfach mega Spaß macht.
Also es fiel mir jetzt so ein, spontan als Wasm-Demo.
Ja, wir müssen jetzt leider auch aufhören.
Mir gefällt sehr, dass die Säure aussieht wie Grog
und sich auch so verhält aus Monkey Island.
Also wenn ihr nicht demnächst arbeitsunfähig sein wollt,
jetzt mal ganz abgesehen von irgendwelchen Krankheiten,
die man sich holen kann,
sondern weil ihr nur noch das spielt,
dann einfach nicht diesen Link anklicken.
Vielleicht machen wir eine Kapitelmarke,
dass man das dann rüberspielen kann.
So Achtung, Suchtgefahr.
Und man fragt sich auch, warum man das gerne macht.
Also irgendwie bei mir trifft er da einen Nerv.
Egal, ihr könnt ja mal in den Kommentaren berichten,
falls ihr damit rumgespielt habt, was ihr damit gebaut habt.
Man kann nämlich auch dabei, also wenn wir schon dabei sind,
man kann auch das, was man gebaut hat, hochladen.
Da gibt es einen Upload-Button.
Und genauso kann man auch auf Browse Sachen sehen,
die andere gebaut haben.
Ganz beliebt sind, glaube ich, verschiedene Vulkan-Kombinationen.
Das ist irgendwie so, wie schaffe ich es denn,
einen Vulkan zu machen, der immer Feuer spuckt und so damit.
Einfach mal ein bisschen mit rumspielen.
Also auf jeden Fall auch mal inspirieren lassen von dem,
was die anderen so da machen.
Ja, dann weiß ich jetzt schon, was ich die nächsten Tage tue.
Oh je.
Aber ja, super, toll.
Guck, was du angerichtet hast.
Nichts mit schneiden.
Bis Sonntag geht die Folge nicht live.
Aber Spiele war tatsächlich eine ganz gute Überleitung.
Das ist nämlich ein Großteil von dem,
was wirklich Nutzen davon hat, sind Spiele im Browser.
Ich meine, es hat ja auch so angefangen mit der Unreal Engine.
Aber neben Unreal haben zum Beispiel auch die Spiele-Engines Unity und Godot,
was jetzt gerade so auch so ein bisschen gehypt wird,
haben die Möglichkeit, dann HTML5-Export zu machen,
der dann eben auch Wasm benutzt, um das Ganze im Browser wiederzugeben.
Funktioniert, soweit ich weiß, auch intern mit diesem M-Scripten.
Und am Schluss hat man dann Wasm und kann das in den Browser laden
und kann irgendwelche sinnlosen Spiele daddeln.
Super.
Ja, ich glaube, es gibt aber auch einige.
Ja, es gibt sehr viele.
Das Internet Archive, das man vielleicht auch kennt,
weil das diverse oder fast alle, die es nicht geblockt haben,
Internetseiten archiviert,
hat auch einen DOS-Box-Emulator im Browser zur Verfügung gestellt,
mit dem man tausende DOS- und PC-Spiele im Browser spielen kann,
emuliert.
Ich habe mir es dann nicht angeguckt,
aus Gründen, wie viel es da gibt und was es da alles gibt,
weil ich glaube, dann würde ich tatsächlich die nächsten Tage
nichts mehr anderes machen.
Es gibt aber tatsächlich auch noch andere Anwendungsfälle außer Zocken.
Und zwar möchte ich da noch nennen PocketSphinx.js.
Das ist eine Spracherkennungssoftware,
ursprünglich in C, glaube ich, geschrieben,
die auch komplett im Browser läuft.
Website, also nicht Website wie die Webseite,
sondern Website, die Sicht, ist auch eine Demo,
die ich leider nicht mehr gefunden habe.
Das war eine Gesichtserkennung,
wo man dann WebAssembly gegen ASM.js,
gegen Vanilla JavaScript antreten lassen konnte.
Das hätte mich mal interessiert zu sehen.
Wenn da jemand den Link findet,
dann gerne auch wieder mitteilen,
dass wir den in die Shownotes posten können.
Und dann möchte ich noch anmerken,
dass ich ganz viel von dem Hintergrund wissen,
weil ich mich jetzt eben auch geradezu zu Wasm
erstmal heftig einlesen musste.
Die habe ich aus einem Tech-Blog von Thalia.
Der beginnt auch ungefähr mit den Worten,
was hat denn ein Multi-Channel-Online-
und Offline-Buchhändler mit solchen Techniken zu tun.
Aber da sitzen natürlich auch im Hintergrund
irgendwelche Nerds, die sich mit sowas beschäftigen
und dann bloggen die auch sogar darüber.
Also das fand ich ganz cool.
Und viele von den Links habe ich auch daher
und viele von den Informationen jetzt zu WebAssembly.
Deswegen möchte ich natürlich das auch als Quelle
nicht unerwähnt lassen und verlinke das auch.
Und wenn jemand selber Know-How in C oder in Rust hat,
Rust muss ich auch gestehen,
ist mir vorher schon mal begegnet,
aber so richtig konnte ich damit bisher auch nichts anfangen.
Okay, also Rust ist auch eine Programmiersprache.
Wer damit sich auskennt und damit spielen will,
es gibt ein WebAssembly-Studio,
da kann man in so einem ganz rudimentär nachgebauten,
sieht aus wie Visual Studio so ein bisschen,
kann man direkt Code schreiben und den kompilieren lassen
in Wasm und das dann auch analysieren und so.
Also das sieht ganz cool aus,
falls man sich damit eingehender beschäftigen möchte.
Ja, vielversprechend ist das Ganze, glaube ich,
vor allem in Kombination mit anderen Web-Techniken,
PWAs, die dadurch vielleicht noch mehr
wie native Anwendungen sich anfühlen können.
Ganz kurze Anmerkung.
Also PWA bedeutet Progressive Web App,
einfach nur nochmal, um das kurz zu erklären,
über was der Konstantin da spricht.
Genau, aber gut, wenn ich einfach solche Abkürzungen um mich werfe,
dann immer reingrätschen, damit wir die erläutern.
Sehr gut.
Yes, Blutgrätsche.
Genau, und das andere Web Components,
auch da ist zum Beispiel,
weiß ich jetzt gar nicht mehr,
ob ich das auch aus dem Artikel habe,
aber ein Videoplayer mit
integrierten Codecs mitgeliefert.
Wäre zum Beispiel so ein Anwendungsfall.
Das heißt, ich mache mir einfach ein anderes Video Tag,
das ich wie auch immer nenne,
und kann damit einen Web Player, Video Player mitliefern mit Codecs.
Schon ziemlich cool.
Dann hat man nicht mehr diese Geschichte,
so der Browser kann aber nur das,
und der braucht das,
und dann muss ich verschiedene Sources festlegen,
und was weiß ich.
Ja, klingt auf jeden Fall spannend.
Und was du vorhin auch schon angesprochen hast,
VR und Augmented Reality,
also VR,
Virtual Reality,
kennt man, denke ich,
Virtual Reality, Augmented Reality,
ist ja auch sehr rechenintensiv,
also auch das kann davon profitieren.
Wolltest du noch was sagen dazu?
Ich wollte noch anmerken,
wenn wir schon bei verrückten Web-Techniken sind,
die vielleicht auch in Form von Web-Komponenten
oder Web-Komponents irgendwie interessant sind,
also weil du da halt so was Drop-In-mäßiges hast,
was dann einfach so für sich funktioniert,
fällt mir jetzt gerade noch ein Houdini.
Ich weiß nicht,
ob wir darüber schon mal gesprochen haben.
Nee, aber das haben wir auch zusammen in Amsterdam gehört,
auf den CSS-Days.
Und das ist offenbar auch noch nicht so populär,
vielleicht braucht das jetzt auch noch zehn Jahre,
bis das irgendwie interessant wird.
Wäre aber auch mal ein schönes Thema.
Ich glaube, zu Houdini sage ich jetzt einfach gar nicht mehr,
falls euch Houdini interessiert,
einfach mal googeln.
Ja, oder wir machen mal ein Thema drüber, genau.
Aber das führt jetzt sonst zu weit weg.
Genau.
Browser-Support noch ganz kurz,
90,93 Prozent,
kein IE11,
überrascht jetzt glaube ich auch nicht.
Kein IE11, was?
Nein, oh mein Gott.
Was werden meine Kunden sagen?
Okay.
Ja, zum Glück sagen meine Kunden zu sowas gar nichts.
Du klickst.
Also kurzum,
um so ein kleines Resümee zu machen,
die Grenzen von Frontend
und ich sage es jetzt nochmal so böse,
richtige Programmierung,
die verschwimmen immer weiter.
Ich habe das letzte Mal schon gesagt,
ist natürlich nicht wirklich meine Meinung,
aber man trifft diese Haltung immer wieder an,
die Frontendler,
alle keine Ahnung
und ich kann irgendwie Java
nachts um drei,
wenn du mich wächst,
auswendig programmieren.
Ich bin so toll
und ich kann C-Sharp und C-Plus
und ihr seid ja alle keine richtigen Entwickler.
Das greife ich natürlich nur ironisch auf,
das ist nicht meine Meinung.
Aber es gibt natürlich schon
einen Unterschied zwischen
Anwendungsprogrammierung
und ich klicke mir so ein bisschen
aus Libraries was zusammen
und die Grenzen verschwinden
eben immer weiter.
Also das Know-how
in verschiedenste Bereiche
breitet sich immer weiter aus,
das man haben muss,
wenn man tatsächlich alles abdecken möchte.
Und was ich auch schon gehört habe
von verschiedenen Entwicklern,
auch schon auf Twitter,
viele nennen sich gar nicht mehr
Frontend-Entwickler,
sondern einfach nur noch Entwickler.
Also die Anforderungen,
die auch zukünftige potenzielle Arbeitgeber
an einen stellen,
die wachsen.
Die Anforderungen,
die man sich selber stellt,
wenn man eben verschiedenste Techniken
unterbringen möchte,
die wachsen
und man wächst natürlich als Entwickler mit.
Es bleibt einem ja gar nichts anderes übrig.
Ja, ich wollte noch eine kleine Anmerkung
zu solchen Web-Technologien machen
wie allgemein jetzt WebGL und Wasmf
oder hast du noch was?
Weil das könnte so eine Art Schlusswort dafür sein.
Ja, ich hätte noch ein, zwei Sätze
als Schlusswort gehabt,
aber du kannst auch ruhig erstmal deins.
Ja, dann ich schiebe mal kurz ein.
Ich habe noch,
also ich habe mir so ein bisschen,
ich wusste schon,
was der Konstantin für ein Thema heute macht
und ich habe mir dann so ein bisschen überlegt,
naja, ich bin jetzt nicht in allen
diesen Technologien Firmen,
warum lohnt es sich vielleicht trotzdem,
sowas zu machen oder anders?
Wofür ist das denn jetzt wirklich sinnvoll?
Und mir sind gleich ein paar Fälle eingefallen,
also das Web besteht ja nicht nur aus den Browsern,
die wir irgendwie auf dem Rechner haben,
also dem normalen Browser,
mit dem wir das Internet benutzen,
sondern auch zum Beispiel aus Electron-Apps
oder sonstige Embedded-Geschichten,
Progressive-Web-Apps,
die wirklich als Apps auf dem Handy installiert werden
oder vielleicht sogar auch sowas wie Firefox OS
oder jetzt mittlerweile Kai OS,
das jetzt gerade wieder mit Mozilla zusammenarbeitet,
also ein mobiles Betriebssystem auf Firefox-Basis,
also Systeme,
die auf einem Browser basieren
in irgendeiner Art und Weise
und dadurch,
dass es diese ganzen Technologien gibt,
im Prinzip extrem viel an Mächtigkeit gewinnen,
wenn diese ganzen APIs da drin sind.
Also wenn ich jetzt irgendwie Web-Audio machen kann,
das heißt,
ich kann einfach eine vernünftige,
keine Ahnung,
eine Audio-App,
eine Audio-Studio-App,
kann ich dann einfach in Form einer Progressive-Web-App bauen
und dann läuft sie auch in Kai OS zum Beispiel.
Also ich finde,
das gibt dem Browser so eine große Macht,
also über die normale Internetnutzung hinaus,
sondern auch als Native-App
auf allen möglichen Betriebssystemen
in Form von Electron oder so.
Also deswegen finde ich das auf jeden Fall
eine sehr, sehr gute Sache,
dass der Browser da immer mächtiger wird
in dieser Richtung.
Auch wenn es viele unterschiedliche Sprachen sind,
die man dann vielleicht quasi
nochmal extra lernen muss,
obwohl man denkt,
ich kann doch schon JavaScript.
Ja, aber ich glaube,
das ist auf jeden Fall eine gute Sache,
dass es das gibt.
Sehr guter Einschub,
auf jeden Fall.
Ja, ich denke,
man hat auf jeden Fall
im Vergleich zu Mitbewerbern,
wenn man sich jetzt irgendwo bewirbt,
je mehr man kann,
je mehr man anbieten kann,
natürlich größere Chancen genommen zu werden,
je nach Unternehmen
und je nachdem,
was sie alles abdecken wollen,
wenn man sich so manche Headhunter-Anfragen
und auch öffentliche Stellenausschreibungen anguckt,
also manchmal ist es ja echt schon ein Witz.
Also am besten bist du wirklich Profis
in Angular, React, React Native und Vue.js
und am besten noch in dem Framework,
das gerade letzte Woche erst rausgekommen ist
und kannst dazu noch
irgendwelches Audiozeug
und keine Ahnung was,
also die Anforderungen sind teilweise schon echt lustig
und ich frage mich dann immer,
klar, natürlich gibt es Cracks,
die sowas abdecken,
die halt irgendwie erst mit Angular entwickelt haben
und dann mit React und dann mit Vue
und irgendwie fünf Projekte parallel laufen haben,
wo sie das auch wirklich aktiv einsetzen,
aber manchmal denke ich mir,
also der Großteil der Bewerber,
der wird doch da hingehen und sagen,
naja, ich habe schon mal ein Wikipedia-Artikel
über Angular gelesen
und die Tour of Heroes vielleicht gemacht
und schon mal ein Video-Tutorial über React gesehen,
Jo, ich bin der Richtige für den Job.
Also es wird manchmal so hoch gepokert
von Seiten der Unternehmen,
dass man auch als Entwickler so ein bisschen pokern muss
und ja, jetzt weiß ich gar nicht mehr,
was ich eigentlich sagen wollte,
aber das ist mir jetzt gerade noch so.
Wünschen kann man sich ja viel.
Du kannst ja in die eine Hand reinscheißen
und in die andere reinwünschen
und gucken, was schneller voll ist.
So.
Sehr schönes Schlusswort.
Wir markieren unsere Folgen ja mit Explicit,
also müssen wir auch ab und zu mal so was fallen lassen,
damit sich das auch lohnt.
Ah ja, stimmt, da fällt mir auch ein,
ich glaube, ich muss vielleicht dann doch
nochmal so einen Spam-Spot machen,
vielleicht ist dann der Explicit-Spam-Spot von mir,
weil ich habe da ja einen merkwürdigen Text bekommen,
der noch nicht vertont ist.
Vielleicht brauche ich dafür auch noch Gastredner,
müssen wir mal gucken.
Brauchst du jemanden, der dir ins Mikrofon stöhnt?
Nee, das kann ich selbst.
Okay.
Gut.
Also dann vielleicht nochmal abschließend,
ja, ist das noch Frontend?
Lohnt sich das, tiefer reinzusteigen?
Also WebGL würde ich spontan sagen, ja, schon.
Also da habe ich einfach jetzt genug Anwendungsfälle gesehen.
Wasm, also WebGL ist halt auch wirklich,
du hast da ein Canvas-Element,
mit dem du auch in anderen Kontexten schon arbeiten kannst
und Wasm ist halt einfach so,
das ist schon ein Brocken.
Also wenn du noch nie was mit C oder so am Hut hattest
und wirklich nur in Anführungsstrichen reiner Webentwickler bist,
dann steigst du nicht mal eben da so ein, ja.
Und ich weiß auch gar nicht,
ob ich das wirklich als Frontend sehen würde per Definition.
Ich meine, ja, es wird in den Browser geladen
und es wird clientseitig ausgeführt,
aber eigentlich ist es ja mehr so was wie ein clientseitiges Backend.
Also ich schicke da was hin, ich kriege was zurück und kann damit arbeiten.
Ich bin mir nicht so ganz sicher.
Es ist so ein, hm.
Ja, das sehe ich ähnlich,
aber wir sollten unsere Zuhörer auch nicht unterschätzen,
weil vielleicht gibt es ja tatsächlich irgendwo da draußen
den echten Fullstack-Developer,
von dem ich bis heute noch,
also ich habe noch keinen kennengelernt,
aber vielleicht gibt es ihn ja tatsächlich,
der das alles hinkriegt.
Ja, um Himmels Willen,
ich wollte niemanden unterschätzen.
Ich meine nur so der Durchschnittsentwickler,
so die Leute, mit denen ich mich unterhalte,
die ich so kenne,
also die, ja, die haben vielleicht schon mal auch früher mal was mit C-Sharp geschrieben oder so,
aber mal eben so einsteigen tut man eben in diese Welt nicht.
Das heißt, also man muss jetzt als Frontend-Entwickler kein schlechtes Gewissen haben,
weil man sich damit noch nicht auseinandergesetzt hat.
Das wollte ich sagen.
Ja, ihr habt es hier gehört und damit ist es offiziell.
Damit ist es die reine Wahrheit.
Genau, bei uns gibt es nämlich nur die Wahrheit.
Nicht so wie bei Politikern oder so.
Gut, ja, wenn du keine Anmerkungen mehr hast zum Thema.
Vielleicht kommt jetzt ein Tügel.
Dann kommt jetzt das Geilteil.
Geil Teil.
Oh yeah.
Ja, das Geilteil heute.
Ich habe heute eigentlich zwei Geilteile.
Eins ist jetzt, eins ist ganz brandneu, weil es mir heute bei Twitter reingeflogen ist
und das andere ist schon ein paar Wochen älter, aber beide sind gleich geil.
Nee, das eine ist, nee, ich möchte keine Wertung vornehmen.
Es sind beide auf ihre Art und Weise relativ geil.
Und zwar das erste ist tiny-helpers.dev.
Eine schöne Seite mit so kleinen Helfern, so Single-Purpose-Helpern nenne ich sie jetzt mal.
Also so ein Tool, um QR-Code zu generieren.
Das ist zum Beispiel von mir.
Kurze, kurze Werbung.
Das ist da drin gelandet.
Man kann, genau, oder es ist auch nach verschiedenen Kategorien aufgesplittet.
Also kleine CSS-Helper, Can I Use da zum Beispiel mit drin, Can I E-Mail, Grid-Generatoren, also alle möglichen Generatoren, teilweise Cheat Sheets für alle möglichen Sprachen.
Alles, was so kleine Single-Purpose-Helper sind, die man im Web und bei der Webentwicklung so braucht, findet man auf tiny-helpers.dev.
Das ist schön aufgesplittet nach Kategorien.
Das heißt, man kann dann sagen, hey, ich suche was für JSON, also klicke ich mal auf JSON oder Typografie oder Unicode.
Das sind eine ganze Menge Kategorien.
Insgesamt gibt es bislang 180 schon so kleine Helper.
Es gibt auch ein Feed, wo man das abonnieren kann oder auch über Twitter kann man abonnieren, falls da was Neues dazu kommt, dann kriegt man da alle Updates.
Habe ich auch bei mir gemacht, finde ich immer interessant, was da so an neuen kleinen Sachen dazu kommt.
Gemacht und gepflegt ist das, wenn ich es richtig weiß, von dem Stefan Judis.
Ja, genau, da steht es auch.
Aber eine Menge Leute haben da schon mitgeholfen, das besser zu machen.
Man kann nämlich, wenn man so einen Helper selbst gemacht hat oder auch, wenn man sagt, hey, es gibt einen Helper, der ist total geil, aber der fehlt da noch.
Dann kann man rechts oben klicken, Add Helper, das ist so ein schönes kleines Plus.
Und dann kann ich über GitHub einen Pull Request stellen und meinen Helper damit eintragen.
Und das ist sogar relativ cool gemacht.
Da muss ich mal irgendwie loben an die Machart, beziehungsweise an den Stefan, wie er das gemacht hat.
Und zwar funktioniert es so, ich folge das Projekt, ich clone es bei mir und dann habe ich tatsächlich ein Node-Script, das ich einfach nur ausführen muss, das mich dann quasi durch den Prozess leitet.
Also ich sage dann hier jetzt Add Helper, ich weiß nicht mehr genau, wie es heißt, aber npm run Add Helper oder so.
Und dann habe ich in der Kommandozeile so einen kleinen Wizard.
Also ich werde dann erst gefragt, ja, wie heißt denn das Tool, wie ist denn die URL davon, in welche Kategorie würdest du das einordnen und was ist denn so eine kurze Beschreibung, was das tut.
Ah, und ich glaube, man kann noch hinzufügen, wer den GitHub-Namen von dem, der es gebaut hat, falls es das irgendwie gibt auf GitHub oder falls die Person bei GitHub ist.
Genau, und dann wird da aus den Informationen, die ich da reingetan habe, automatisch der Code erstellt für das Tool.
Und dann muss ich einfach nur noch bei GitHub ein Pull-Request stellen und wenn das dann irgendwie die Prüfung besteht, dann landet das auf tiny-helpers.dev.
Ja, finde ich eine ziemlich coole Sache und bisher sind wahnsinnig viele kleine nützliche Sachen da drauf, die ich sonst nicht gefunden hätte.
Das ist Geilteil Nummer 1.
Cool, ich habe das gesehen auf GitHub, dass da irgendwelche Sachen von dir reingemerged wurden, habe mir die Seite aber noch nicht angeguckt.
Also, super Tipp, muss ich auf jeden Fall mal reingucken.
Einfach mal reingucken, vielleicht auch dem Twitter-Account folgen, ich glaube, das ist auch automatisiert.
Also jedes Mal, wenn da ein neues Tool dazu kommt, geht da auch ein kleiner Tweet raus.
Ja, dann komme ich zum zweiten Geilteil.
Dazu möchte ich, da müsst ihr euch, glaube ich, den Link in den Shownotes angucken, weil das ist jetzt nicht so einfach erklärt.
Man muss das, glaube ich, gesehen haben.
Es ist ein Code-Pen und zwar heißt der Pure CSS Landscape and Evening in Southwold.
Ich weiß jetzt nicht, was Southwold genau sein soll.
Vielleicht ist das ein Ort.
Also ich würde mal tippen, es ist wahrscheinlich ein echt existierender Ort,
weil was wir da sehen, ist ein schon fast fotorealistisch, auf den ersten Blick fotorealistisch aussehendes Bild,
das aber tatsächlich mit CSS gebaut wurde.
Also komplett mit CSS gebaut, also mit allem, was es da so an interessanten Sachen gibt.
Ich versuche gerade durchzuscrollen.
Der Browser wird da auch ein bisschen langsam, wenn man das sich anschauen will.
Also lohnt es sich da mal reinzugucken, also irgendwie, man hat da irgendwie alles Gradients, Backgrounds, Borders, alles was CSS so hergibt, Filters mit Blur und keine Ahnung.
Und ich habe auf den ersten Blick gedacht, ich werde da jetzt doch verarscht, da hat doch einer einfach nur ein Foto über HTML eingebunden.
Wenn man dann genauer hinguckt, dann sieht man, okay, es ist wahrscheinlich dann irgendwie doch kein echtes Foto,
aber auf den ersten Blick sieht es wirklich fotorealistisch aus.
Also ich würde tippen, da hat einer eine Fotovorlage nachgebaut.
Ich glaube, es steht sogar auch dabei, wer das ist.
Genau, Ben Evans.
Von dem ist dieser CodePen.
Link findet ihr in den Shownotes.
Auf jeden Fall mal angucken.
Ist auf jeden Fall echt eine interessante Geschichte und wird vielleicht euren Lüfter auch ein bisschen zum Laufen bringen.
Apropos Lüfter zum Laufen bringen, ich wundere mich gerade, deine Aufnahme knackt wieder und knackt wieder.
Also ich glaube, wir nehmen das ja zur Sicherheit bei dir auch nochmal auf und werden das dann irgendwie, glaube ich, hin und her schicken,
und damit wir auch eine vollständige Aufnahme haben.
Ich habe dieses Ding geöffnet und diese Knackser sind immer mehr geworden.
Also ich glaube, es liegt auch zum Teil ein bisschen die Audioverarbeitung und mein Rechner, wie sehr der überladen ist,
das kommt dann irgendwie nicht mehr hinterher.
Ja, wir gucken mal, wir hoffen, dass wir am Schluss eine saubere und anhörbare Folge rausbekommen.
Ohne Knacksen, ohne Unterbrechungen, aber man merkt tatsächlich, dass der Rechner da arbeiten muss, ja.
Damit wäre das demonstriert.
Achso, bei mir läuft auch die ganze Zeit noch so ein Sandspiel-Velkan im Hintergrund.
Okay, gut, das erklärt natürlich einiges.
Sucht bei Sandspiel, sucht bei Sandspiel, das ist ganz wichtig.
Ja, was ich noch nachträglich zum Thema sagen wollte, das verträgt sich nicht gut, dass Wessim mit Audio aufstammen.
Ah ja, genau.
Also sucht bei Sandspiel, also bei Sandspiel, wenn ihr da mal drauf seid, geht einfach mal auf Browse und dann gebt mal ein Volcano.
Und in meinem Fall, ich mache das jetzt gerade nochmal live, in meinem Fall, was ich jetzt gerade offen hatte die ganze Zeit, war das das Zweite, was man da findet.
Moment, oder? War das der?
Ah, genau. Und dann muss man Play, ganz wichtig, wenn ihr die Demo starten wollt, müsst ihr den Play-Button rechts oben drücken.
Und dann läuft dieser Vulkan los und der ist jetzt die ganze Zeit bei mir nebenher gelaufen.
Deswegen war wahrscheinlich auch der Lüfter von meinem Rechner die ganze Zeit an.
Ja, vielleicht sollten wir das in Zukunft lassen.
Ja, vielleicht. Aber ich gucke da so gerne drauf.
Ja, natürlich. Wie so eine Lava-Lampe.
Ziel ist es ja sowieso, dass wir in Zukunft wieder auch zusammen aufnehmen.
Wir wollten es jetzt einmal ausprobiert haben und das ist auch ganz cool, dass es überhaupt so funktioniert, auch in der Qualität.
Und zum anderen natürlich auch ein bisschen im Hinblick auf Corona, wenn man irgendwann vielleicht mal nicht mehr vor die Tür will.
Aber die zukünftigen Folgen werden schon hoffentlich, wenn der ganze Spuk vorbei ist, auch wieder face-to-face stattfinden.
Ja, unbedingt, weil man muss dazu sagen, was jetzt noch keiner gesehen hat, weil wir ja ein Audio-Podcast sind, ist zum Beispiel, dass wir beim Intro eigentlich immer so einen kleinen Dance hinlegen, weil es uns immer noch so gut gefällt.
Und das ist jetzt heute, also ich habe es heute für mich gemacht, aber alleine ist es nur halb so cool.
Gut zu wissen, dass wir beide zu Hause in unseren Zimmern saßen und lustig vor uns hingetanzt haben.
Ja, es ist einfach, es macht einfach Laune.
Ja.
Ja, das war dann auch schon.
Geil Teil vorbei.
Gut, dann.
Geil Teil over.
Dein Wort zum Sonntag.
Mein Wort zum Sonntag?
Habe ich irgendwas verpasst?
Blödes Gebabbel zum Ende zu kommen.
Okay, lass das drin.
Weil wir die Sonde ja, die Sonde, die Folge ja am Sonntag veröffentlichen immer. Diesmal wahrscheinlich schon nachmittags statt spätabends, weil die Podcatcher eine Weile brauchen.
Hast du noch was loszuwerden, wollte ich eigentlich damit sagen?
Äh, Werbung.
Werbung.
Ja, Werbung. Dafür haben wir vielleicht, äh, haben wir auch noch keinen Jingle, aber ein Jingle, Werbe-Jingle für Werbung wäre vielleicht auch irgendwie sowas, was Schönes, was wir immer machen könnten.
Ähm, wir wollten noch ein bisschen Werbung machen und zwar, wie vorhin schon angekündigt, ich hätte gerne mal, dass jemand die Kommentarfunktion auf unserer Seite ausprobiert.
Ähm, ihr dürft da auch gerne bla bla bla bla reinschreiben.
Geht auch über den Podcatcher. Man muss nicht mal irgendwie manuell unsere Seite eingeben, sondern im Podcatcher in den Shownotes oben ist auch ein Link, wo man direkt auf den Kommentaren landet.
Ja, wir wollten euch das Leben, äh, da an dieser Stelle leicht machen.
Äh, äh, des Weiteren, liked uns oder, äh, retweetet uns bei Social Media, gebt uns ganz viel Herz, falls es euch gefallen hat, falls nicht, äh, trotzdem, ähm, ihr dürft uns auch ganz gerne bei iTunes bewerten, ich weiß, dass wir da mittlerweile drin sind, ähm, erzählt es euren Freunden und, äh, noch ein kleiner Request, falls, ähm, ihr von dem Podcast gehört habt, aber euch gefragt habt, hey, in meiner Lieblings-Podcast-App ist der irgendwie noch nicht drin,
im Verzeichnis oder so, also irgendwie, ich weiß nicht, es gibt so viele Podcast-Apps und so viele Podcast-Verzeichnisse, es ist quasi, man kommt quasi gar nicht hinterher, aber, ähm, direkt, also, falls du dich jetzt angesprochen fühlst, in meiner Lieblings-Podcast-App, da seid ihr noch nicht drin, ich musste das jetzt irgendwie umständlich
umständlich über den Feed machen, ähm, oder so, ähm, dann bitte auch einfach mal irgendwie melden, dann schauen wir, dass wir da noch reinkommen.
Genau, dazu noch zwei Anmerkungen, ich hab heute mal versucht, über meinen, äh, Google Home Mini das abzuspielen, nachdem wir jetzt auch bei Google Podcasts endlich im Verzeichnis sind, ähm, aber irgendwie funktioniert es nicht einfach zu sagen, äh, jetzt löse ich wahrscheinlich ganz viele aus, okay Google, spiele die aktuelle Folge von, wo wir sind, ist vorne, sondern man muss dazu setzen, spiele die aktuelle Folge von, wo wir sind, ist vorne, auf Google Podcasts.
Und dann funktioniert das Ganze auch in vier von fünf Fällen, hat's bei mir heute funktioniert, ähm, falls jemand, äh, faul ist und nicht tippen will und das am Handy machen will, sondern über seine Speaker das abspielen lassen will, ähm, und, äh, genau, wählt es euren Freunden und Bekannten und Kollegen auch offline, wir machen immer Werbung für Social Media, aber erzählt auch offline mal von eurem, äh, euren Kollegen von unserem Podcast.
Genau, äh, und jetzt noch ganz kurz, um alle kurz zu ärgern, natürlich, äh, die das, die das laut hören, äh, Alexa, bitte eine Tüte Chips bestellen.
Ah, damit wir, ach so, damit wir nicht wieder hier Schleichwerbung, damit wir beide abgedeckt haben und damit, damit wir alle User verärgert haben, dann sagen wir jetzt vielleicht noch, ähm, wie, wie heißt das bei Echo dort, äh, Gedöns, also ne, war ja Alexa, dann gibt's noch, hey Siri, bestelle den Jungs von, wo wir sind, ist vorne zwei Pizzen und einen Kasten Bier.
Äh, nee, und, hey, hey Siri, erzähl mir einen Witz.
Ja, jetzt ist, jetzt ist auch mal gut, glaub ich.
Okay, ja, ich, äh, ja, es wird spät, äh, wir hören jetzt auf.
Äh, ich, ich lass das Intro laufen.
Okay? Äh, das Intro?
Äh, ich lass noch mal das Intro laufen.
Nee, dann, dann lass ich, dann lass ich, dann lass ich jetzt das Outro laufen.
Okay.
Überzeugt?
Jetzt.
Zerfahrt.
Tschüss.
Ciao.