Herzlich willkommen zu unserem Vortrag Lesezeichen 2.
Das JavaScript schlägt zurück.
Und unser Vortragender hat einen schönen Nickname, Birdy1976.
Und er hat mir verraten, dass JavaScript tatsächlich seine Lieblingssprache ist.
Ja, dann schauen wir mal, was da so zurückschlagen kann.
Und ich bin gespannt.
Dankeschön.
Na gut, dann herzlich willkommen.
Ich glaube, länger darf ich nicht laufen lassen wegen so Copyright-Geschichten.
Dann breche ich jetzt hier mal ab.
Genau, JavaScript für Bookmarklets.
Ich bin dann eben der Birdy1976.
Wofür die 1976 steht, könnt ihr euch wahrscheinlich vorstellen.
Birdy ist mein Nachname, einfach auf Englisch verwurstelt.
Genau.
Worum geht es heute?
Also, worum geht es eigentlich nicht?
Also, ich weiss nicht genau.
Also, es gibt ja auch Leute, die machen so JavaScript im Browser drin mit dem GreaseMonkey-Plugin.
Das kann man sich so installieren im Browser.
Und dann werden automatisch JavaScripts ausgeführt, wenn man auf bestimmte Seiten geht.
Das werde ich nicht behandeln.
Ich habe es nur erwähnt, weil es gibt Leute, die machen das lieber so als mit Bookmarklets.
Dann manche Dinge sind nicht so einfach oder gehen gar nichts.
Gar nicht, weil da die same origin policies sperrt
Also, wenn ich von einer Webseite auf eine andere zugreifen möchte aus dem Browser, kann das sein, je nachdem, wo ich bin, dass es halt verhindert wird.
Und dafür habe ich noch keine guten Tricks gefunden, die auch wirklich funktionieren.
Ich sage es einfach, meistens geht es, aber nicht immer.
Also, oft geht es, aber nicht immer.
Dann die Adresszeile hier oben, die wir da haben, die ist ein bisschen limitiert vom Platz her, den man hat.
Ich habe jetzt da mal 65.000, 536.000.
Zeichen hingeschrieben, stimmt aber eigentlich nicht, ist bei jedem Browser anders.
Und ich habe auch schon wesentlich längere Bookmarklets versucht, geht meistens auch noch.
Irgendwo, habe ich auch schon erlebt, ist dann fertig.
Also, dann ist halt einfach abgeschnitten hinten.
Darum, wenn das das Problem sein sollte, muss man halt schauen, ob man die kleiner kriegt, die Bookmarklets.
So, das als Vorbemerkung für das Mission Briefing sozusagen.
Dann...
Kapitel 1, die Entdeckung der Bookmarklets.
Also, was ist da die Kraft, die da in diesen Lesezeichen drin steckt?
Zum einen kannst du deine persönliche Sammlung da kuratieren.
Das sind also deine Dinge, die da sind.
Kann man selber zusammenstellen, sortieren, machen.
Man kann Schlüsselwörter vergeben.
Ich mache mal schnell, um zu zeigen, was das ist.
Wenn man sich da ein Beispiel anschaut.
Da unten gibt es ein Schlüsselwort.
Das ist jetzt in dem Fall, man sieht es wahrscheinlich nicht gut, einfach nur eine E.
Und wenn ich dann oben in der Adresszeile das E eingebe, wird dann dieses Bookmarklet aufgerufen.
Das ist nicht das gleiche wie ein Tag oder ein Schlüssel...
Wie heisst das? Schlüssel, nicht Schlüsselwort.
Ich weiss nicht.
Einfach, es ist kein Tag, sondern das Schlüsselwort.
Das ist da, um direkt dieses Bookmark aufzurufen.
Und wenn du halt ein JavaScript hinterlegt hast, kann man mit Enter gerade das ausführen.
Das mache ich bei so Bookmarklets, die...
...viel brauche.
Dann nochmal was, was wichtig und nützlich sein kann, wenn man sich beim Firefox anmeldet.
Da sieht man jetzt den Kopf hier oben.
Den Kopf hier oben.
Da bin ich angemeldet.
Das heisst, bei allen meinen Browsern, wo ich angemeldet bin, wird diese Sammlung synchronisiert.
Das heisst, es verbindet alle meine Geräte, wo ich angemeldet bin mit dem Firefox-Login.
Genau.
Also, das ist mal so ein bisschen ein Vorwort gewesen.
Jetzt beginnt da die Rebellion.
Was kann man da alles machen?
Man kann die Bookmarklets mit CSS, HTML oder eben auch JavaScript belegen.
Also man kann reine HTML-Seiten da auch ablegen.
Das erlaubt dann Sachen wie private Systeme im Hyperraum abzulegen.
Also es ist dann eine private Webseite, die nur du für dich hast, wenn du das Bookmarklet öffnest.
Hast du eine private Webseite.
Also habe ich für einzelne Sachen so kleine Tools, die ich dann direkt im Browser ausführen möchte.
Ja, ist so eine Idee.
Und wenn einem die CSS, also die Formatierungssprache HTML als Auszeichnungssprache
und JavaScript eben als die Skriptsprache nicht ausreichen,
kann man JavaScript-Bibliotheken auch noch nachladen im Bookmarklet.
Also kann man die Zeichenlimitierung sozusagen auch nochmal ausweiten,
indem man einfach externe Bibliotheken dazu holt.
Ich versuche möglichst, ohne Bibliotheken das zu machen normalerweise,
damit die auch funktionieren, wenn vielleicht mal die Bibliothek dann irgendwie nicht mehr da ist oder so.
Aber wenn man jetzt mal irgendwas Schnelles braucht und halt viel Funktionalität da drin steckt
und jemand hat es schon gemacht, kann man sich dich also auch holen.
Genau, dann eine neue Hoffnung.
Man kann so auch APIs abfragen.
Also man kann auch Daten noch, nicht nur Skripte dazuladen, sondern auch Daten.
Und da habe ich jetzt das erste Beispiel, was ich zeigen möchte.
Das ist mein...
Ich hole mir die immer hier oben, da habe ich es direkt.
Zum Kopieren.
Genau, und das ist jetzt für diese Seite hier.
Da mache ich immer Sport und ist leider inzwischen so, dass man sich anmelden muss
und manchmal sind die Plätze ausgebucht.
Und da ist jetzt mein Skript eigentlich nichts anderes, also ich gehe auf die Seite hier.
Ich mache schnell die Kommandozeile noch auf.
Und wenn ich die jetzt...
ausführe, wird die Konsole geleert und jetzt wird es fünf Minuten dauern oder so,
bis es gemacht wird.
Darum, man kann es ja laufen lassen im Hintergrund, dann passiert dann vielleicht was später.
Im Moment gibt es da noch zehn freie Plätze, aber ich kann mich noch gar nicht anmelden,
weil es erst nächste Woche ist.
Also ich lasse es einfach mal laufen und zeige kurz das Skript.
Also ich lade da einen Sound nach.
Ah, dafür habe ich auch eins.
Dann kann ich noch zoomen.
Wo war es?
Dark Mode.
So sieht man es, glaube ich, besser.
Zuerst lade ich einen Sound nach.
Das ist einfach nur ein New Audio und dann den Link zur Sounddatei.
Also auch hier kann ich einfach aus dem Netz nachladen.
Dann setze ich einen Intervall.
Der macht eben in dem Fall alle, was sind das, glaube ich, fünf Minuten oder so was.
Ich muss jetzt ausrechnen.
Sind es Millisekunden?
Dann sind es irgendwie 300 Sekunden, ja, fünf Minuten.
Schaut der nach, ob es neue Plätze gibt mit diesem Check.
Und da wird dann eben dieses JavaScript abgefragt.
Das ist hier unten.
Da ist die Adresse von der API hier abgelegt.
Da muss ich einfach hinten die Nummer vom entsprechenden Angebot anschreiben.
Das passiert hier unten.
Ich packe einfach diese Adresse hinten noch, die Zahl dazu, von der Veranstaltung, die ich brauche.
Dann wird geprüft.
Dann wird der Text runtergeladen, geparst.
Hier mit noch JSON.
JSON wird geparst.
Und dann schaue ich in diesen JSON-File hinein, wie viele von Maximumplätzen.
Es ist leider nicht, dass man einfach nachschauen kann, wie viele Plätze sind frei,
sondern man muss Maximumplätze.
Abzählen von angemeldeten Zahl.
Und dann bekommt man, ob etwas frei ist oder nicht.
Ist jetzt halt bei der Schnittstelle so.
Und wenn etwas frei ist, dann werde ich benachrichtigt.
Und zwar wird dann ein Sound abgespielt.
Dieses Pferdewiren hier.
Das ist der Sound A.
Und es wird mir eine Nachricht hier oben bei den Notifikationen eingeblendet.
Also da habe ich zwei Sachen.
Zusätzlich sogar noch in der Kommandozeile.
Ich lasse jetzt einfach weiterlaufen.
Hoffe, dass dann irgendwann das Pferd da wird.
Dann habe ich auch ein kleines Skript.
Das kopiert mir dann die Sachen aus dem...
Wenn ich die Anmeldung habe, kopiert es mir an, welches Angebot das ist.
Und wie die Trainerin heisst, die das gibt und solche Sachen.
Das zeige ich jetzt nicht.
Das ist einfach ein Copy.
Aber doch, das ist noch spannend wegen dem Copy-Teil.
Weil das ist auch etwas ganz Einfaches.
Da habe ich am Anfang gedacht, das ist sicher super kompliziert.
Und dann habe ich gedacht, es gibt eine Schnittstelle auch dafür.
Genau, wieder Zoom.
Also es ist tatsächlich einfach das hier.
Navigator, dort Clipboard, Write Text.
Und dann kann ich die Sachen, die ich vorher aufgemacht habe,
aus dem Dokument herausgelesen habe, mit diesen Query-Abfragen,
ins Clipboard hineinschreiben und kann es nach dem Kalender
als neuen Termin einfach einfügen.
Also es ist kein Terminkalender-Eintrag,
sondern einfach nur der String, den ich dann brauche für den Kalender.
Aber es ist super praktisch.
Da habe ich immer sonst eine Minute, 30 Sekunden gebraucht.
Jetzt brauche ich noch 10 Sekunden.
Und weil ich immer eine Minute oder zwei Minuten losrennen muss,
dass ich mich daran denke, mich anzumelden,
oder oft wenigstens, muss es schnell gehen.
Ich trage mir das trotzdem in den Kalender ein,
aus was auch immer nostalgischen Gründen für das Archiv, für die Zukunft.
Und man kann natürlich auch ganz andere APIs vom Multiversum abrufen,
nämlich hier Game of Thrones.
Machen wir schnell auf hier, die Kommandozeile.
Und da habe ich jetzt direkt eine Game of Thrones API,
wo man Zitate sich herholen kann.
Da draufklicken, sieht man hier unten,
da kommt irgendeins dieser Zitate zufällig zurück.
You're a dragon, be a dragon, was auch immer.
You're too slow on the draw.
Ah, da müsste ich nach oben, dann sehe ich nicht ganz alles.
Also das wollte ich nur noch zeigen.
Man kann auch beliebige APIs abfragen.
Auch hier kann ich das kurz zeigen.
Was jemand noch sehen möchte, ist ein ganz kurzes.
Auch hier zoomen vielleicht.
Also auch wieder die API abrufen.
Mit diesem Endpunkt random.
Jetzt hat er gemerkt, dass er einen Platz frei ist.
Also wenn ich am Computer am Arbeiten bin,
dann weiss ich jetzt sofort auf die Anmeldeseite
und dann habe ich einen Platz.
Es gäbe auch eine App, aber mein Smartphone ist zu alt.
Ich kann die App nicht installieren.
Da habe ich mir das jetzt halt im Browser gebaut.
Genau.
Und genau, ist das genau gleiche Spiel wieder.
Man bekommt dann die Antwort von dieser API, ist ein Text,
der wird dann hier umgewandelt
in ein JSON-Objekt und danach kann ich aus diesem JSON-Objekt
direkt den Satz rauslesen und den Charakternamen
noch hinten dran schreiben.
Also das ganze Spiel jetzt, um dieses Game of Thrones Zitat
in die Kommandozeile zu bekommen, also Kommandozeile vom Browser,
die Konsole vom Browser.
Gut, dann das wäre dann Kapitel drei.
Gehen wir mal weiter.
Schauen wir, was es da sonst noch gibt.
Das Imperium schlägt natürlich irgendwann zurück.
Und dann läuft der Countdown zur nächsten, zur endgültigen Schlacht,
was darum geht, ob es das Gute oder Böse gewinnt.
Und da braucht man natürlich so eine Anzeige,
wo man sieht, wie viel Zeit das noch vergeht, bis die Schlacht beginnt.
Und da habe ich jetzt so Widgets gemacht.
Genau, Würfel, ah nicht den Würfel, das ist falsch.
Wo war es?
Ich wollte den Countdown da.
Der sieht dann so aus.
Und weil das responsive gemacht ist,
kann ich also auch zoomen und es zoomt jetzt in dem Fall nur das Widget,
weil die Reveal.js Webseite lässt sich lustigerweise nicht über die normale Zoom-Funktion vergrössern.
Ist auch gut in dem Fall, weil ist ja schon genug und groß.
Und da kann ich jetzt einfach diesen Countdown starten.
Und den hatte ich früher eben so als kleine Webseite,
aber ich habe dann gemerkt, ist blöd.
Ich möchte dir eigentlich was zeigen, vielleicht parallel noch im Unterricht zum Beispiel,
damit die Leute sehen, was sie tun sollen und gleichzeitig noch,
wie lange sie noch Zeit haben.
Und wenn dann Pause zwischendurch ist, zum Beispiel eine 10-Minuten-Pause,
mache ich hier einfach Pause und nach der Pause lasse ich es weiterlaufen.
Das ist so ein Widget und eben den Würfel, den Würfel habe ich da auch noch.
Zum Beispiel auch wieder 42.
Und da kann ich jetzt zum Beispiel, wenn jede Studentin, jeder Student oder jeder Teilnehmer eine Nummer bekommt,
kann ich dann hier zufällig zum Beispiel eine Teilnehmerin bestimmen,
die dann was machen darf oder eine Wortmeldung, eine Wortmeldung bieten oder so.
Ich könnte dann natürlich auch eine Liste reinpacken am Anfang mit einem Prompt,
wo ich dann halt die Liste reinkopiere und dann würde direkt der Name kommen.
Das könnte ich auch machen.
Ich habe jetzt einfach einen Würfel gewollt, der ist für alles brauchbar,
auch für sonst Zufallssachen oder für Spiele, wo ich einfach einen Würfel brauche, oft mit 6 Seiten.
Wenn die Zeit abgelaufen ist, dann habe ich jetzt hier keinen Ton reingepackt.
Aber dafür habe ich eine Mini-Emoji-Story.
Und als ich das letztens in meinem Kurs verwendet habe,
da hat dann eine Teilnehmerin gesagt, ja, aber es ist ja dann immer die gleiche Geschichte am Schluss.
Das stimmt.
Darum habe ich mir als nächsten Ausbauschritt vorgenommen,
da mit 42 oder so verschiedene Mini-Stories reinzupacken,
dass dann jedes Mal eine zufällige andere Mini-Story kommt.
Und das heisst jetzt zum Beispiel, Launch gelungen.
Das Einhorn bringt die Pizza im Ufo und wir machen eine Party.
Das ist dann auch noch lustig.
Wenn jemand raten möchte, was die Geschichte da ist.
Und dank KI kann man ja solche Sachen in Sekundenbruchteilen,
solche Schichten erfinden und die guten raussuchen, die einem gefallen.
Und weil dieses Reveal.js, das ist jetzt speziell, weil die Präsentation ist Reveal.js im Hintergrund,
weil die eine Single-Page-Application ist, also alle diese Slides sind auf der gleichen Seite sozusagen,
bleiben die Widgets auch,
wenn ich die Slides wechsle.
Wenn es eine normale Webseite wäre, wo ich halt auf eine Navigation klicke, würden die wegfallen,
müsste ich sie wiederholen, wenn ich sie wieder brauche.
Ist manchmal das eine besser, manchmal das andere, ja.
Gut, das war das.
Und jetzt.
Das ist mein, Moment, mein Lieblings-Widget.
Das ist der Chatbird Companion.
Ich habe den hier.
Genau.
Wenn ein Droide übrigens hinterlegt ist, merkt ihr das?
Da kommt der Sound.
Bei den anderen nicht, oder?
Wo Droiden reingepackt sind.
Aber da machen wir jetzt, sollte ich gar nicht sagen, genau da.
Das ist jetzt mein Chat Companion, heisst der.
Chatbot Companion.
Und zwar bin ich inzwischen auch immer öfter auf Chatbots unterwegs.
Ich sage immer, es ist mein drittes Leben.
Zuerst waren Bücher, da war ich unheimlich begeistert, immer noch.
Dann das Internet.
Das war ja auch der Hammer.
Als ich vor dem Kurzprüfungsstudieren anfing, war das Internet da.
Das ist schon eine Weile her bei mir, das Studium.
Und dann...
Jetzt muss ich das ausschalten, sonst kommt die ganze Zeit.
Also das wäre auch ein Timer für mich, eigentlich alle fünf Minuten.
Bin ich sehr...
Genau, das dritte Leben ist jetzt sozusagen die Chatbots.
Also ich denke immer, mein Kopf ist zu klein, herauszufinden, was ich jetzt mit dieser allwissenden Maschine eigentlich alles machen könnte.
Und darum versuche ich immer so ein bisschen zu helfen, indem ich halt für mich so super Prompts und so weiter schreibe,
die mir dann helfen, um noch besser zu interagieren mit dem Chatbot.
Einer davon ist der Optimiere-Prompt.
Also es ist ein Prompt-Optimierungs-Prompt.
Und dann habe ich noch einen Destilier-Prompt.
Also Optimier-Prompt ist glaube ich klar.
Destilier-Prompt ist, wenn ich einen Dialog hatte mit dem Chatbot,
mein initialer Prompt hat nicht das Resultat gegeben, was ich wollte,
und da habe ich viele Anpassungen vorgenommen am Original,
dann sage ich ihm, das ist eben ein Destilier-Prompt,
der fasst dann alles zusammen, was ich im Dialog mit ihm gemacht habe
und macht einen neuen Prompt daraus, den ich dann das nächste Mal verwenden kann,
um direkt das Endresultat zu erhalten.
Also dass ich nicht das nächste Mal wieder alle diese Anpassungen noch mal reintippen muss.
Das ist der Destilier-Prompt. Reverse-Engineering ist wahrscheinlich klar.
Da gebe ich Code rein und sage, wie müsste mein Prompt ausschauen,
dass dieser Code rauskommt.
Und da muss ich nur die Funktionen ergänzen oder rausnehmen oder anpassen,
die ich anders haben möchte.
Und kann den wieder laufen lassen und kriege natürlich nicht den gleichen Code,
aber der genau das gleiche macht hoffentlich.
Das funktioniert erstaunlich gut.
Für Coding mag ich Claude übrigens am besten.
Der macht am wenigsten Fehler, was ich so gemerkt habe, für meine Fälle zumindest.
Und da gibt es einen Haufen anderer Sachen.
Zum Beispiel erstelle Präsentation.
Da muss ich einfach den, immer wo Selection hinten steht, könnte ich jetzt hier Text auswählen.
Das könnte mein ganzes Skript sein, muss einfach im Browser verfügbar sein.
Und dann mache ich hier oben, erstelle Präsentation, kopieren.
Und dann habe ich den Text jetzt im Zwischenspeicher mit dem Prompt davor
und dem Skript danach reinkopiert.
Und das kann ich jetzt im Chatbot ausführen und ich bekomme direkt eine fertige Präsentation.
Und das ist hoch erstaunlich.
Das funktioniert bis jetzt jedes Mal perfekt.
Und ich muss praktisch keine Anpassungen mehr machen.
Wenn wir Zeit haben und ihr wollt das sehen, kann ich so einen Schluss laufen lassen mal
oder auch einen anderen Prompt.
Aber wie gesagt, ich finde das fantastisch.
Dann habe ich, das sind die Vorlagen.
Dann gibt es hier unten, ich habe dann irgendwie noch gedacht,
ja ist das schon alles, immer die gleichen Vorlagen verwenden.
Wäre es nicht cool, wenn ich auch von Anfang an bessere Prompt schreiben würde.
Und da gibt es ja so ein paar Systeme, die kann man im Kopf haben.
Kreide ist eins.
So eine Abkürzung und halt die einzelnen Komponenten.
Kontext, Rolle, Erteilung des Auftrags, Dialog führen, genau.
Und das E ist, glaube ich, noch evaluieren, genau.
Aber da habe ich gedacht, ja ist ein bisschen limitiert.
Es gibt noch viele andere Module oder Patterns, die man in Prompts verwenden kann.
Und darum habe ich dann gedacht, ich könnte hier ja so einen Prompt-Generator bauen.
Und da kann ich jetzt einfach hier oben,
zum Beispiel Rollen auswählen.
Und dann kann ich hier unten den Kontext und die Rolle eingeben.
Das Szenario ist ähnlich.
Da ist dann Kontext, Rolle und Ziel.
Das ist dann in einem Schritt.
Oder wenn ich andere Dinge noch ergänzen möchte,
Jane of Thought zum Beispiel,
dann werden die alle noch dazugefügt im Hintergrund.
Die brauchen nicht immer alle eine Eingabe,
aber ich könnte jetzt direkt hier unten die Ergänzung rein tippen
und dann mit Anzeigen,
ist jetzt halt auch wieder relativ klein,
wird hier denke Schritt für Schritt.
Stell dir vor, du bist Rolle in Kontext und Ziel.
Und wenn ich jetzt das ausgefüllt hätte,
würde das direkt reingeschrieben.
Auch hier kann ich es dann identifizieren
und habe es dann bereit für den Chatbot.
Genau, und Reset macht es zurück.
Also das ist so mein Companion.
Der hat den Dark und anderen Mode noch drin.
Einfach, dass es ein bisschen je nach Seite besser ausschaut.
Das war das.
Jetzt, glaube ich, muss ich weiter,
sonst wird es dann mit der Zeit vielleicht auch knapp.
Kapitel 5, für alle Fälle.
Das ist mit der Han Solo gemeint.
Der muss da ja manchmal Daten schmuggeln oder andere Dinge.
Und da habe ich für einen Kollegen,
der hat das letztens gewollt,
der wollte auf Tutti, das ist bei uns eine Webseite,
wo man Sachen verkaufen kann, wie Ebay oder so.
Ricardo ist in der Schweiz noch bekannt.
Ich weiß nicht, was ihr in Deutschland habt.
Und da kann ich jetzt zum Beispiel auf Tutti gehen.
Und jetzt fragt er wieder.
In Deutschland fragt er mich immer, ob ich ein Mensch bin.
Das ist lustig.
Ich weiss nicht, was sie da uns damit sagen wollen.
Keine Witze machen, das ist immer gefährlich.
Und jetzt möchte ich zum Beispiel Instrumente,
die es gerade gibt, hier exportieren.
Es gibt keine API bei dieser Seite.
Ich möchte aber alle diese Angebote jetzt da irgendwie rausholen.
Ich möchte natürlich jetzt Punkt um Punkt durchgehen
und das rauskopieren.
Er wollte die Postleitzahl und die Adresse zum Angebot.
Und da habe ich jetzt auch wieder so ein Tutti-Skript.
Da klicke ich hier auf Tutti.
Und jetzt fragt er mich schon, wo möchtest du die Daten?
Ich packe sie mal auf den Schreibtisch.
Ich habe es heute schon mal gemacht.
Und wenn ich es jetzt öffne,
sollten genau alle diese Daten,
da muss man hier unten scrollscannen,
bekommen jetzt vorne die Postleitzahl
und hinten die Angebote.
Das ist jetzt in einem Klick passiert.
Er hat mir einfach einen Pfeil erstellt.
Wenn man mehrere Seiten möchte,
habe ich gemerkt, ist es praktischer.
Ich gehe jetzt mal auf die nächste Seite.
Irgendwo da unten kommt es.
Es ist praktischer, wenn es mir die Daten
in den Zwischenspeicher packt.
Dann mache ich da Zwischenspeicher.
Und jetzt kann ich sie hier einfügen.
Er fragt mich gerade,
jetzt sind die anderen Angebote auch schon da.
Dann kann ich die ersten zehn Seiten
relativ schnell mir so rauskopieren.
Und er hat dann noch eine Visualisierung daraus gemacht,
wo die Inserate, also wo sie zu finden sind.
Wahrscheinlich mit dem Ziel da,
die, die nahe liegen und so rauszuholen.
Respektive er hat gesagt, er möchte schauen,
wo zum Beispiel die meisten Rolex-Uhren
verkauft werden in der Schweiz.
Auf Tutti glaube ich wahrscheinlich nicht viele,
aber das war so sein Szenario.
Er möchte mir rausschauen,
in welchen Gebieten welche Dinge verkauft.
Das ist ein Data-Analyst, der so Sachen macht.
Genau.
Da könnte ich jetzt noch kurz zeigen,
wie die CSV-Datei geht.
Die anderen Dinge habt ihr die meisten
schon mal irgendwo gesehen.
Wo ist es da?
Und wenn man sie gut macht, die Bookmarklets,
dann kann sie tatsächlich auch jederzeit
wieder in diese Form bringen,
wo sie schön formuliert sind.
Da mache ich schnell wieder das Vollbild.
Ups.
Jetzt wollte ich eigentlich direkt das Vollbild.
Wieso macht er das nicht?
Jetzt.
Oh je.
Ah, da habe ich es invertiert.
Darum.
So.
Genau.
Und der Trick ist also tatsächlich,
man sagt, man soll einen neuen Blog machen.
Und da wird einfach diese CSV-Daten,
das ist einfach in einer Variable gespeichert,
mit Zeilen und Brüchen da,
damit eins vom anderen getrennt ist.
Sagt man, das ist jetzt eine neue Datei
vom Typ Text CSV-Datei,
kreiert einen Link, wo sozusagen,
wo die Daten dann hinterlegt werden.
Dem fügt man eine Datenadresse hinzu.
Das ist neben dieser Blob,
da sind auch die Daten als Datei sozusagen
beim Link hinterlegt.
Man sagt, wie der Name sein soll des Downloads.
Und fügt das dann dem DOM,
also dem Ganzen, der Webseite dazu.
Und nachher wird der Klick simuliert,
dass der Link angeklickt wird.
Und dann muss ich nur noch sagen,
wo ich es abspeichern möchte als Benutzer.
Danach, wenn man aufräumt hinter sich,
das ist ein guter Haushalt,
immer aufzuräumen gerade,
dann löscht man einfach diesen Link wieder.
Dann ist der gerade wieder weg
und stört nicht andere Dinge.
Also so kann man Dateien erzeugen.
Ist relativ einfach auf dieser Blob.
Und dann hat man eigentlich schon eine Datei.
Gut.
Ah, die Datenbanken,
jetzt musste ich gerade überlegen,
was ich da wollte.
Die Datenbanken der Rebellen sichern,
Backups machen
und sind vielleicht in Tabellen hinterlegt,
von einer Webseite.
Was ich normalerweise mache,
ich drücke Kontrolltaste
oder Steuerungstaste auf Deutsch.
Dann wähle ich alle aus,
kopiere die
und das sollte eigentlich direkt gehen.
Hoffentlich.
Ja, zack.
Das wissen viele Leute nicht.
Darum hat jemand mal ein Skript geschrieben.
Das macht,
ist also nicht von mir,
das nächste, was ich da zeige.
Das heisst Table This.
Wenn ich mit der Maus da drauf fahre,
passiert nichts, oder?
Wenn ich Table This aktiviere,
das Bookmarklet,
wird da ein Download,
ein Download-Link eigentlich für jede Datei,
für jede Tabelle generiert.
Bei der hier habt ihr gesehen, wie es geht,
einfach Kontrolle, alles auswählen.
Hier unten ist eine,
da funktioniert mein Trick nicht,
weil da hat es verschachtelte Tabellen.
Hier zum Beispiel ist eine verschachtelte Tabelle
in der Tabelle drin
und das geht dann mit dem anderen Trick nicht.
Darum macht es ein bisschen Sinn,
dieses Bookmarklet.
Da kann ich jetzt,
wenn ich diesen Link hier nehme,
den ersten und nicht den kleinen hier,
kann ich die ganze Tabelle inklusive dieser Tabellen,
die da noch verschachtelt sind, bekommen.
Also ja, das ist einfach nur so,
für den Fall, dass ihr da öfter Tabellen
von irgendwo her sichern wollt.
Dann hat man auch das Gleiche wieder,
in dem Fall jetzt gerade ohne die Formatierung.
Ich hätte auch ohne Formatierung vorher einfügen können,
natürlich.
Gut, das war die Tabelle.
Dann, ähm,
muss ich manchmal so Einsatzpläne,
die als PDF vorliegen,
in meine,
in mein Adressbuch übertragen,
äh, nicht Adressbuch,
in meinen Kalender.
Und das ist am PDF.
Das kann ich nicht einfach in den Kalender importieren.
Und darum habe ich mir überlegt,
ja, vielleicht kann ich ja die Daten rauskopieren
und das geht tatsächlich.
Das ist da der ICAL für Einsatzplan.
Und die Daten sehen so aus.
TV ist ein Eintrag,
sind immer zwei Buchstaben,
sind ein Eintrag.
TV heisst Tagesverantwortung,
ist so wie so ein Einsatzplan.
Weiter hinten gibt es noch Spätdienst
und Ferien und frei
und zwei Punkte sind einfach,
wenn nichts da drin steht.
Und das kann man zum Glück einfach so rauskopieren
aus dem PDF.
Ich zeige das jetzt nicht,
weil da halt auch Namen von Leuten draufstehen und so.
Und vorne muss ich dann noch ergänzen,
für welchen Monat im Jahr das ist.
Ich habe es im März geschrieben, das Skript.
Darum steht da jetzt halt März drin.
Der dritte Monat sozusagen im Jahr 2025.
Wenn ich jetzt OK klicke,
passiert wieder das Gleiche.
Ich bekomme einen Download.
Direkt jetzt als ICAL.
Und das könnte ich jetzt mit dem Kalender,
da sieht man es hier unten,
sind jetzt die einzelnen Termine.
Und weil ich da im Skript noch hinterlegt habe,
welche Schicht in welcher Zeit drinnen liegt,
macht er auch gerade dann das Zeitfenster richtig.
Das ist aber, weil ich die Logik
in Bookmarklet drin habe,
ist nicht aus den Daten direkt ersichtlich.
Also das könnte ich jetzt importieren,
dann sind die in meinem Kalender drinnen.
Das hat mich einen Tag, glaube ich, gebraucht.
Wahrscheinlich habe ich bis jetzt
noch keine Sekunde Zeit gespart.
Aber wie es so ist,
es macht mehr Spass,
das Skript zu schreiben,
als die Terminkalendereinträge zu machen.
Es ist der gleiche Trick,
mit dem Blob, New Blob.
Und dann muss man halt das ICAL-Format kennen
und die entsprechend zusammen rendern.
Das wollte ich jetzt gar nicht hier zeigen.
Also, dann habe ich gedacht,
es ist Zeit für ein kleines Zwischenspiel,
ein Interlude.
Da gibt es jetzt ein kurzes Spiel,
wo ich mich blamieren kann.
Da muss ich einfach die Asteroiden ausweichen
und es werden immer mehr und immer schneller.
Es sind sicher alle besser,
als ich geübt habe.
Da habe ich manchmal so 6-700 geschafft.
Aber ich könnte es ja nochmal probieren.
Es ist streng genommen kein Bookmarklet.
Es ist ja direkt in der Datei da drin.
Eben, es wird dann immer schwieriger.
Ich bin nicht zufrieden.
Ich wollte nur,
dass wir uns zwischendurch lockern können,
mich selber ein bisschen ablenken.
Ich habe auch gelernt,
wenn ich summe oder singe,
das lasse ich jetzt,
kann man auch Stress reduzieren und so.
Aber ja, das war jetzt nur so als kleiner Gag gedacht,
zwischendurch ein kleines Spiel einzubauen.
Weil es eine Webseite ist,
kann man alles da drin machen,
was man möchte.
So, und jetzt ist wieder ein roter Titel.
Da sind wieder die Sith an der Macht
und wollen was machen.
Und wir Rebellen müssen uns im Autorim betätigen
und da Experimente und Versuche starten,
wie wir uns besser wehren können.
Zum Beispiel,
wie wir die Kraft,
die Macht besser nutzen können.
Und das habt ihr jetzt schon ein paar Mal gesehen.
Das ist mein Vollbild.
Mein Vollbild Bookmarklet.
Das habe ich für diese Seite so gemacht,
dass automatisch immer,
dass der Editor gesumt wird.
Das habe ich einfach als Fall eingebaut.
Aber wenn ich es auf einer anderen Webseite,
zum Beispiel hier starte,
dann kann ich,
wenn ich mit der Maus darüber fahre,
das Element aussuchen,
welches ich zoomen möchte.
Zum Beispiel jetzt diese drei Punkte hier.
Kann ich es auch einmal zoomen.
Das geht lustigerweise.
Dann kann ich hier rein.
Ui, das habe ich gar nicht gemacht.
Okay.
Das war noch von,
als ich es getestet habe.
Genau.
Und da habe ich auch einen Color Picker.
Da ist die falsche Farbe dahinter.
Da kann ich einfach eine andere Farbe wählen,
die mir dann gerade passt.
Mit Esc gehe ich wieder raus.
Es ist auch erstaunlich einfach.
Noch einmal Reload vielleicht.
Vorhin war ein bisschen was komisch.
Jetzt hat der,
oh, der hat Leerschläge drin.
Dann geht dieser Trick nicht.
Noch einmal probieren.
Vielleicht habe ich etwas falsch gemacht.
Nein, das sind Leerschläge.
Ah, shit.
Ah, da habe ich den Decoder.
Der sollte da gehen.
Okay, jetzt hoffentlich.
Nicht Downloaden.
Gut.
Das ist immer, wenn man,
jetzt ist gut.
Okay.
Da habe ich einfach jetzt mit dem,
das ist auch ein Bookmarklet,
das macht einfach die URL-Coding raus.
Und dann kann ich so Bookmarklets,
die halt doch irgendwie eine Coding drin haben,
wiederholen.
Und da gehe ich jetzt nicht alles durch,
was ich,
der Hauptpunkt ist ja der,
wie man diesen Zoom machen kann.
Muss mal schauen, ob ich den finde.
Der muss da irgendwo,
irgendwo müsste er sein.
Da.
Man muss also nichts anderes machen,
als Request Fullscreen,
heisst diese Funktion.
Da kann man einfach sagen,
welches Element das sein soll.
Das heisst,
der grösste Teil vom Skript ist eigentlich die Auswahl,
welches Element ich haben möchte.
Und der Rest,
das wirklich Fullscreen zu machen,
ist dann nur noch dieser Aufruf,
Request Fullscreen.
Und dann macht er Pum und ist gross.
Und irgendwo ist dann noch der Color Pick,
aber den vergabe ich mehr oder weniger.
Da ist er relativ einfach.
Ist einfach eine,
eine,
ist eigentlich ein HTML Element,
der Color Picker.
Das ist ein normales HTML Element.
Genau, das war,
das war das,
also Fullscreen.
Und da,
wie gesagt,
da ist wieder ein Bot versteckt,
nämlich der R2D2,
R2D2,
man sieht es vielleicht hier,
ganz klein.
Und da sitzt einer,
den,
da habe ich jetzt leider nur eine Kommandozeile,
als,
als Kommunikationsmöglichkeit mit dem.
Und da kann ich leider auch nicht direkt hinein tippen,
weil irgendwie meine Tastatur gerade kaputt ist.
Behaupte ich jetzt einfach mal.
Darum muss ich jetzt das hier kopieren.
Ich kann es mit Rechtsklick,
dann wird es glaubwürdiger,
wenn ich es mit CTRL-C mache,
glaubt jemand sogar nicht.
Also Rechtsklick kopieren.
Und jetzt habe ich,
muss ich das Feld auswählen,
wo ich rein tippen möchte.
Und wo habe ich jetzt das Tippen?
Tippen, wahrscheinlich unter T, oder?
Tippen, genau.
In Eingabefeld tippen,
da füge ich jetzt das ein,
mit ENTER.
Und jetzt tippt er mir da.
Genau.
Und der Ton,
der kommt,
ich kann es nochmal machen.
Ähm.
Das ist der andere Ton jedes Mal, oder?
Das ist noch lustig,
weil,
ich habe hier erlebt,
wenn ich die T-Taste drücke,
dann wird jetzt das Farbschema
in der Tastatur,
das Farbschema invertiert.
Invertiert kommt,
Wenn es rot ist,
kommt der Darth Vader
mit seiner,
mit seiner Atmung
und wenn es gelb wird,
ist sozusagen die gute Seite,
die er macht,
dann kommt das,
da ist der Lichtsäpel da.
Invertiert?
Ich weiss gar nicht mehr
ja gut, egal.
Also ihr habt verstanden,
worum es geht,
vielleicht habe ich auch einen Buggy
da drinnen,
kann auch sein.
Ist erst so fünf Minuten vor fertig geworden.
Wieso immer.
Genau, und dann diese Hologrons, vielleicht kennt ihr die nicht, die gibt es da im Star Wars Universum.
Das sind so Gegenstände, da kann man, wenn man ein Machtwesen ist, dann nennt sich das glaube ich,
kann man das aktivieren und dann wird ein Hologramm abgespielt.
Und das ist natürlich gemein, wenn das nur die Machtwesen machen können.
Darum habe ich gedacht, ja, wie könnten wir normalen Wesen das auch tun.
Und da haben wir zum Glück die Webcam, die wahrscheinlich ausgeschaltet ist.
Und da ist jetzt dieses Selfie-Webcam-Bookmarklet, kommt da zum Tragen.
Muss da mal erlauben.
Habe ich da eine Nachtsicht? Bin ich mir sicher.
IR, mal schauen, wie das ausschaut.
Habe ich jetzt gar nicht getestet.
Ah, sieht genau gleich aus.
Und da bin ich jetzt im Selfie-Modus.
Ich könnte jetzt, wie sage ich, am einfachsten einfach ein Stammbild aufnehmen.
Aber damit es noch ein bisschen, kann man ja auch am Foto schiessen,
das ist dann einfach unten, wird das unten ergänzt.
Immer der aktuelle Stand.
Also ja, der letzte Stand.
Und jetzt ist nicht wahnsinnig schön gedesignt,
das ist mehr zum zeigen, dass man da tatsächlich die Webcam im Browser einfach direkt abrufen kann.
Ich schalte das jetzt wieder aus.
Und wieder weg hier.
So, wie geht das jetzt?
Da denkt ihr sicher, wow.
Wie geht das?
Das habe ich ja nie gevermutet, dass das möglich ist.
Und dann schauen wir mal, ob das hier, ist da wieder so eins?
Nein.
Fullscreen, wo haben wir es?
Da.
Das ist hier unten irgendwo.
Get User Media, das hier ist es.
Navigator, Media Devices, Get User Media.
Und dann einfach ein kleines JSON-Skript, wo man halt sagt, das Video soll es sein.
Und dann bekommt man mehr oder weniger direkt einen Stream, den man dann verwenden kann.
Also auch hier wieder, ist irgendwie, ja, das wird dann direkt abgespielt.
Also es ist in dem Sinn auch wieder, wenn man es weiß, ist nicht so wahnsinnig viel, was es da braucht.
Ich habe es ja nicht gewusst, ich habe es nachgeschaut.
Und manchmal frage ich den Chatbot, der weiß da sehr viel.
Gut.
Dann sind wir schon bei zehn.
Ich glaube, dann sollte es mit der Zeit gut reichen.
Die haben ja auch so mentale Kräfte, diese Jedi's.
Und einen habe ich euch schon gezeigt.
Wir haben die Leute dann, die die falschen Dinge sehen.
Das sind mehr oder weniger auf dieser Dark Mode, habe ich gedacht.
Eigentlich macht er nichts anderes, als die Farben umzudrehen.
Aber doch kann ich damit euer Gehirn manipulieren, weil es wandert, anstatt schwarz, wie es eigentlich sein sollte.
Und das ist auch wieder ein super einfaches Teil.
Und da bin ich relativ stolz darauf, weil ich habe noch nie irgendwo so einen kurzen Dark Mode irgendwo gesehen.
Der macht nichts anderes.
Das ist einfach alles zu invertieren.
Die ganze Webseite, jedes Element mit Stern.
Wählt man alle Elemente auf der ganzen Webseite, auch die Bilder, die Emojis, alles.
Und die werden dann einfach von der Farbe her gedreht.
Und das ist dann einfach der Dark und Light Mode.
Und das könnten Sie sich jetzt vorstellen, wie das mit mentalen Kräften bei euch im Kopf passiert.
Ein bisschen von der Idee her.
Dann möchte man vielleicht manchmal, fühlt man sich vielleicht gestört vom Design.
Da in der Webseite, wo man möchte am liebsten nur die ganzen Styles weghaben.
Da gibt es auch Möglichkeiten.
Man kann nämlich einfach alle CSS-Dateien und alle Styles entfernen.
Ich mache das mal.
Dann sieht es nachher nur noch so aus.
Also nochmal Reload, sowas vorher.
Bisschen grösser machen vielleicht.
Ja genau, jetzt kann man sehen, das ist eigentlich wie die Webseite hier aufgebaut ist.
Man hat zwei Titel, man hat eine Aufzählungsliste und darunter noch ein Absatz.
Und dann halt noch den Vorwärts- und Zurückknopf, mehr oder weniger.
Das ist so die Geschichte.
Und da habe ich jetzt nochmal ein Skript, das ich gerade zeigen möchte.
Nämlich das Geheimtexte manipulieren.
Also nichts anderes als die Webseite, den Text zu ändern.
Und da habe ich auch ein Skript, da kann ich einfach ein- und ausschalten, ob ich die Webseite editieren möchte.
Der heisst Edit Page.
Und da habe ich jetzt so ein Schlüsselwort hinterlegt.
Da kann ich jetzt Ctrl-L-E für Edit.
Weil den brauche ich so oft.
Enter.
Und jetzt mache ich mal noch Vollbild. Ich hoffe da geht es auch.
Ups, da muss ich wieder auswählen was.
Nehmen wir mal das hier.
Jetzt ist eben so ein Fall, wo der schwarze Hintergrund nicht hilft.
So, und jetzt sollte ich da direkt hineinschreiben können.
Eigentlich, ja. Wieso geht es jetzt nicht?
Ah, immer Demos, immer Demos.
Mache ich es halt direkt hier. Hoffentlich geht es da.
Ah, jetzt okay.
Ups, ich habe S gedrückt. Das ist das Intro.
Das ist ja Tastatursteuerung.
Genau, also da kann ich jetzt einfach hineinschreiben, aber kann S drücken.
So, und dann kann ich da...
T.
Genau, wieder Edit Page ausschalten.
Und wenn ich jetzt wieder versuche, passiert wieder nichts mehr.
Also das kann ich wie einfach ein- und ausschalten.
Das brauche ich vor allem dann, wenn ich zum Beispiel von Wikipedia mir zwei, drei Sätze kopieren möchte
und dazwischen gibt es überall noch diese langen Klammern und Fußnoten und Nebensätze
und die vielleicht alle gar nicht brauche.
Dann kann ich schnell Edit ein, das anpassen, wie ich es brauche, rauskopieren und fertig, ja.
Also ausschalten, Edit brauche ich eigentlich gar nicht, weil meistens, wenn die Seite ja neu geladen wird,
ist es ja wieder original oder so.
Aber ich habe einfach beides drin, dass man ein- und ausschalten kann.
Ich mache wieder Neuladen, dass es wieder da ist.
Ah, wenn ihr das sehen wollt, das ist noch einfacher als das hier.
Ah, habe ich das falsche noch?
Bearbeiten natürlich zuerst.
Das ist einfach dieser Befehl hier.
Document Body Content Editable.
Da muss man einfach gleich True setzen.
Warum man jetzt diese Zeilenbrüche nicht macht?
Müsst ihr hier ja eigentlich Zeilenbrüche machen, wäre besser.
Ja.
Aber im Prinzip, wir hätten einfach getoggelt, oder?
Mal ist er ein, mal ist er aus.
Das ist das ganze Skript.
Eigentlich eine Zeile, mehr oder weniger.
Ich finde immer wieder erstaunlich, was alles geht im Browser.
Also, wenn man das mal gemacht hat, kann man auch die ganzen Texte löschen
und dann ist der Browser einfach ein Texteditor.
Also, wo man halt einfach Text reinschreibt.
Wenn man Ctrl-S macht und die Datei abspeichert, hat man eine Textdatei.
Eine Textdatei, die man, wenn man sie wieder öffnet, mit dem Browser weiter bearbeiten kann.
Das ist ein fertiger Texteditor in einer Zeile, sozusagen.
Ja.
Eben, die Sachen finde ich immer wieder lustig.
Gut, das war jetzt mit Gedankenkraft und CSS-Kraft die Realität verändern.
Schauen wir mal, was auf dem Programm steht.
Man kann nämlich jetzt, ich habe es schon gesagt, man kann APIs abfragen.
Und was ist so die mächtigste aller APIs, die wir im Moment haben?
Der Chatbot natürlich oder die KI.
Und ich habe bei Google kann man, bei Gemini kann man sich API-Keys for free, lustigerweise.
Ich weiss nicht genau, wo die Limite ist für kleine Anwendungen für zu Hause,
die man nur selber braucht oder für den Verein.
Kein Problem, was man da an gratis API-Zeit bekommt.
Kann ich direkt diesen Chatbot-Abt-Query machen, oder?
Und da habe ich jetzt auch.
So ein Script, also ein Bookmarklet.
Das ist nur ein Demo, ein Demo-Bookmarklet.
Das ist nicht, was ich normalerweise, wenn ich das brauche, mache.
Dann muss ich ja Daten holen, die ich brauche für das Bookmarklet.
Und hier mache ich einfach ein Query, um zu zeigen, dass ich eine Antwort bekomme.
Und um es noch ein bisschen nerdiger zu machen, habe ich, wo habe ich die hingelegt?
Ich habe es vergessen.
Oh je.
Ah, genau hier.
Habe ich gedacht, ich zeige euch mal, man muss nicht immer normalen Text da reinkopieren.
Man kann auch direkt die Query als JSON formatieren.
Das ist dann zum Beispiel praktisch, wenn du in einem Programm drinnen deine Query generierst,
kannst du gerade die als JSON-Objekt generieren, dein Prompt für den Chatbot.
Und da kannst du dann auch alle Regeln vorgeben und so weiter.
Also das ist eigentlich alles nicht nötig für Gemini.
Gemini möchte eigentlich nur wissen am Schluss, was er zurückgeben soll.
Darum ist das einzige Wichtige, der Rest könnte normaler Fließtext sein.
Ja.
Aber eben, ich finde es halt immer noch lustig, dass man sieht, man kann auch so dem Bot irgendeinen JSON-File geben
und der analysiert das und versteht, ah, das ist meine Rolle, das ist meine Aufgabe, obwohl er es gar nicht als JSON brauchen würde.
Aber man ist sehr kompakt dadurch und man erkennt sofort, welche sind die Bestandteile dieses Queries oder dieses Prompts.
Und was ich wirklich möchte am Schluss, ist dieses Output-Schema, also wieder als JSON.
Er soll mir ein JSON zurückgeben.
Er soll sich streng daran halten, diese Vorgabe ans Schema hier.
Er soll nur genannte Informationen aus diesem Text hier oben, ihr seht nicht den ganzen, der geht dann noch weiter nach hinten.
Und am Schluss eben als JSON ohne Erklärung, Kommentare oder Formatierungen zurückgeben.
Das kopiere ich jetzt hier.
Wollte ich gerade alles kopieren, das wäre dumm gewesen.
Das ist mein Notizblock hier, da stehen noch viele Dinge drin.
Und dann klicke ich auf KI-Anfrage mit Google-Suche.
Das heisst, ich habe da eine Anfrage.
Das heisst, ich habe die Google-Suche aktiviert, obwohl ich es in dem Sinn gar nicht brauche jetzt bei dieser Anfrage.
Der würde also auch Daten aus einer Google-Suche noch verwenden, wenn es die braucht.
Aber in dem Fall braucht er sie nicht.
Da füge ich sie jetzt einfach ein.
Das ist ein JSON-File, jetzt halt auf eine Zeile gemacht.
Dann dauert es immer einen Moment.
Und dann bekommt man hier Peng.
Man bekommt einfach ein JSON-File zurück.
Darum sage ich, das ist die allmächtige API.
Die weiss ziemlich alles von dieser Welt.
Ich kann die Google-Suche noch dazuschalten.
Und ich kann ihm sagen, in welchem Format möchte ich das Resultat am Schluss haben.
Es ist nicht gesagt, dass da immer alles stimmt, was zurückkommt.
Klar.
Aber für Spiele, für kleine Experimente oder wo ich die Daten vorgebe.
Fließtext, oder?
Und er soll mir da eine Struktur daraus machen.
Ist super geeignet.
Und zum Beispiel, der Titel ist null, weil im ganzen Text wird der Titel des Berichts, der da analysiert wurde, nicht erwähnt.
Darum kann er keinen Titel zurückgeben.
Also null.
Die andere Sache, der Dr. Meyer, den hat er gefunden.
Veröffentlichungsdatum.
Und welche Länder da betroffen sind.
Deutsch und Schweiz.
Hat er alles sauber extrahiert und nach dem Format zurückgegeben.
Was er trotzdem immer macht, was mich am Anfang ein bisschen aufgeregt hat.
Obwohl ich ihm sage, ohne alles, ohne Formatierungen.
Egal, wie ich dem danke.
Sechs oder fünf?
Fünfzehn.
Das wäre cool.
Mit zwei Anstalten.
Gut.
Aber eben, der macht immer diese Formatierung, Markdown-Formatierung.
Damit da eigentlich eine andere Maschine das direkt wieder als Markdown, als Code formatiert darstellen könnte.
Schickt er trotzdem immer diese JSON-Formatierung mit fürs Markdown.
Am Anfang und am Schluss.
Hat mich ein bisschen aufgeregt.
Und dann, genau.
Wie kann ich jetzt diese JSON-Holo-Crones da sozusagen rausholen?
Es gibt so eine Regex.
Die macht eigentlich nichts anderes.
Einfach vom ersten geschwungenen Klammer bis zur letzten geschwungenen Klammer.
Holt ihr einfach alles raus.
Und wenn da sonst nicht noch irgendwelche Klammern auf der Seite im Antwort sind.
Also die nicht dazu gehören zum JSON.
Sollte das dann direkt nur noch der JSON-String sein.
Also das ist so ein kleiner Trick.
Auch wenn die auch vorne und nachher noch Sätze schreiben würden.
Würde es trotzdem funktionieren, solange ein gültiges JSON da drin ist.
Ja.
Ah.
Den habe ich...
Wollte ich dann hier zeigen?
Das ist der hier wieder.
Chatbot Companion.
Dann habe ich da am Anfang was falsches gezeigt.
Dann hätte ich da was anderes zeigen wollen.
Den habt ihr jetzt schon gesehen.
Das wäre der hier.
Der Chatbot Companion.
Den habe ich schon gezeigt.
Dann habe ich das etwas verwechselt am Anfang.
Wenn die einzelnen Punkte nicht so klar geschrieben sind, wie sonst in den Vorträgen.
Muss man nicht mehr in Erinnerung haben, was sich das gemeint ist.
Und da habe ich mich offenbar jetzt selber mal irgendwo überlistet.
Gut. Gehen wir weiter.
Jetzt sind wir schon ziemlich am Schluss.
Wir haben dann noch ungefähr 10 Minuten für Fragen in dem Fall.
Es gibt ja ein Webformat.
Den habt ihr schon x-mal gesehen jetzt.
Das ist diese Seite hier.
Die finde ich super praktisch.
Ich mache sie mal ein bisschen kleiner, dass man sie ganz sieht.
Super praktisch.
Um irgendwelchen Code.
Auch HTML, XML, CSS.
Alles mögliche.
Wenn ich so unformatierten Code bekomme, packe ich den mal da rein.
Egal an welchem Computer, dass ich gerade bin.
Und bekomme dann eine gute, übersichtliche Darstellung.
Er findet auch Fehler lustigerweise.
JavaScript zum Beispiel zeigt ja gerade, wo ist der Fehler auf welcher Zeile.
Dann ist man auch schneller, wenn mal was nicht funktioniert.
Wenn man es jetzt nicht richtig im Browser debuggt.
Genau so.
Das ist etwas Cooles.
Den mag ich noch gern.
Und sie behaupten, dass es alles im Browser drin ist.
Ich habe es nie untersucht, ob es stimmt.
Weil ich mache meistens Sachen, die eigentlich auch öffentlich sein dürften.
Aber ja, wenn jetzt etwas ganz Geheimnis ist, würde ich es trotzdem nicht hier reinkopieren.
Man weiss ja nie.
Man kann es auch untersuchen, wenn man möchte.
Dann, wenn der Notrufcode zu lang ist, weil eben die URL zu kurz wird.
Nein, nicht die URL.
Die Adresszeichen zu klein sind.
Ihr habt aber gesehen, was da alles reinpasst.
Zum Beispiel der Chatbot Companion.
Der ist ja, ich weiss nicht, 200, 300, 400 Zeilen, ich weiss nicht mehr genau, lang.
Und nachher, ich weiss nicht, wie viele tausend Zeichen.
Aber wenn das doch mal zu lang wäre, gibt es so eine Webseite, die heisst Bookmarkletter.
Man kann auch da, gibt es auf GitHub das Ganze, wenn man es selber betreiben möchte.
Da kann man sagen, dass er zum Beispiel die URL-Encoding macht, wenn man das möchte.
Man kann sagen, dass er noch eine Funktion da rumlegt, damit das sicher als Bookmarkletter funktioniert.
Er macht auch eine Art Office, ich kann das Wort nicht sagen.
Diese Variablen kürzer.
Und dass man nicht weiss, was die Variablen, Namen und Funktionen bedeuten.
Aber vor allem, um Platz zu sparen, damit es kürzer wird.
Also man kann da wie so Sachen noch machen.
Und wenn man zum Beispiel jQuery in seinem Bookmarklet verwenden möchte, kann man auch gerade noch, dass er die Library dazu packt.
Dann kann ich auch direkt jQuery im Bookmarklet verwenden.
Auch auf Seiten, wo jQuery nicht schon vorhanden ist.
Also das sind auch so eine coole Seite, wenn man das gerne möchte, verkleinern möchte.
Aber dann ist es halt nachher eben, wenn man es weiter bearbeitet, muss man es original behalten.
Damit man noch nicht selber sich Reveurs ingenieren muss.
Genau.
Dann, was mir sehr oft Kopfzerbrechen bereitet hat, und darum fahre ich mit der Maus darüber wieder.
Ich sage, mach mir mal eine kleine Funktion, die ich da in meinem Bookmarklet brauche.
Ich mache da immer Kommentare rein, nur mit diesen zwei Strichen.
Schrägstrichen.
Und wenn ich die dann in die Adresszeile rein packe, wo alles auf einer Zeile steht,
ist also alles, was hinter diesen zwei Strichen ist, Kommentar.
Und dann funktioniert das Bookmarklet nicht mehr.
Darum muss man dem Chatbot eigentlich immer sagen, am besten von Anfang an,
er soll nur solche C-Style Kommentare machen, mit diesem Schrägstrichstern am Schluss.
Dann funktioniert das Bookmarklet auch mit Kommentaren noch.
Genau.
Also, dann noch zusammenfassen.
Javascript ist dann 3D.
Javascript ist dann treuer Droide im digitalen Raum.
Da kann man sehr viel damit machen.
Nutze die Macht aber weise, junger Padwan.
Also keinen Unsinn betreiben.
Und teile dein Wissen, das stärkt die ganze Rebellion.
Vielen Dank.
Ja, vielen Dank.
Und dann übergebe ich mal ans Publikum für Fragen, für eure Fragen.
Wer möchte denn beginnen?
Ja.
Ich programmiere selber Javascript, aber war bis jetzt immer nur bei Dateien.
Jetzt verstehe ich das so, dass statt Dateien nur Adresszeilen genutzt werden,
um Javascript auszuführen.
Ich sehe da aber das Problem, wenn ich das jetzt bearbeiten möchte.
Wenn ich jetzt das Skript bearbeiten möchte, diesen Einzeiler.
Wie bearbeite ich das?
Muss ich das im externen Editor öffnen?
Und wo ist aus Ihrer Sicht der Vorteil zu einer Datei?
Ah, okay.
Ja, also was ich mal auch ausbauen könnte bei meinem Lesezeichen 2, 1 könnte ich auch anschauen.
Da hatte ich noch ein bisschen weniger so Tricks drin.
Was man noch überlegen könnte, man könnte zum Beispiel seine Bookmarklets auf GitHub oder so als Datei ablegen.
Und dann halt im Bookmarklet drin eigentlich nur noch sagen, welches Skript geladen werden sollte.
Und dann könnte ich ganz normal mit meiner normalen Entwicklungsumgebung arbeiten.
Aber ich weiß nicht genau, ich mache es eigentlich meistens so, genau wie ich es gezeigt habe.
Ich klicke da rechts auf das Bearbeiten Ding, kopiere mir das hier raus, gehe auf diese Seite hier,
füge das ein und mache wieder Formatierung daraus.
Und dann meistens editiere ich es sogar direkt hier.
Und dann wechsle ich immer hin und her zwischen dem, ja so.
Aber eben wenn man jetzt einen professionellen Bookmarklet-Entwickler werden möchte,
würde ich wahrscheinlich dann auch auf den GitHub oder einer anderen Versionskontrolle umsteigen.
Weil wenn zum Beispiel längere Bookmarklets, die sind mühsam so.
Weil die dann nicht mehr funktionieren mit diesem wieder zurückformatieren.
Und da habe ich dann meistens eine Datei irgendwo, auch als Backup für den Fall, dass ich mal was kaputt mache.
Aber ja, sauberer wäre ein anderer Workflow.
Ja.
Okay, weitere Fragen?
Vielen Dank für den interessanten Vortrag.
Geht es so ein bisschen in eine ähnliche Richtung?
Also ist diese kurierte Sammlung vielleicht irgendwo zur Verfügung, dass man davon lernen kann,
also auch daran arbeiten kann zum Beispiel?
Ich habe das allerwenigste irgendwo veröffentlicht.
Eigentlich nichts, weil es alles da ist.
Außer, habe ich es noch auf?
Ich habe es nicht mehr auf.
Ich habe letztens das ein paar Leuten gezeigt.
Dann habe ich meinen Chat, meinen, diesen Chatbot-Companion, den habe ich da auf dem Internet kopiert.
Aber ich kann ja vielleicht noch das eine oder andere dann, ich habe gehört, man kann Links machen.
Kann ich vielleicht das eine oder andere noch, zum Beispiel die Slides sicher noch in die Beschreibung reinpacken beim Talk und dann sollten die nachher da sein.
Weil ich so knapp fertig war, habe ich es nicht schon gemacht.
Also ich schaue, ob das klappt, dann packe ich da noch was rein.
Und sonst kommst du nachher zu mir und da kann ich dir auch direkt die Sachen geben, die dich am meisten interessieren.
Und dann musst du ja auch nicht ganz alles irgendwie veröffentlicht irgendwo und dann pflegen und so weiter.
Ja, wie gesagt, es ist mehr Basteln.
Ich sage immer ich bastle.
Hacken kann man schon auch sagen, aber ich sage meistens ich bastle.
Und ja, und halt Dinge, die mir Spaß machen und die sind mal eine Woche, zwei, einen Monat interessant.
Und manche Dinge verschwinden dann wieder und dann, ja.
Also ich, auch erst nochmal vielen Dank für die ganzen Inputs.
Also es sprudelt gerade in meinem Gehirn.
Ich hätte gerne nochmal ein paar Antworten zu.
Ein paar Antworten zum Thema Grafik.
Wir haben einmal kurz dieses Spiel gesehen.
Ich habe auch schon probiert mit JavaScript und Grafik zu arbeiten.
Meine Frage, SVG, Canvas oder was ganz anderes?
Es gibt verschiedene Schnittstellen für Grafiken.
Das Spiel jetzt hier am Speziellen, das habe ich, ich habe da heute Nachmittag eigentlich noch dran.
Und dann habe ich so ein bisschen Feedback vom Chatbot geholt.
Und der hat gefunden, es wäre noch lustig, ein Spiel da einzubauen.
Und dann habe ich gesagt, ja gut, machen wir mal eins.
Und das ist das Thema.
Und es ist jetzt glaube ich tatsächlich, es ist glaube ich, jetzt muss ich überlegen, meistens ist es SVG oder ist es ein Canvas.
Also Canvas oder SVG geht es.
Das Logo hier zum Beispiel ist ein SVG.
Aber es kann auch Canvas sein.
Da kann man auch direkt dann immer wieder Dinge draufmalen.
Ja genau.
Aber wenn man es skalierbar möchte, macht man es eigentlich sinnigerweise besser, gerade als SVG-Spiel.
Weil dann hat man nachher auch jede Auflösung, kann man skalieren und machen.
Ja, aber ja, die zwei Möglichkeiten.
Ich war auch am überlegen, ob ich nach dem Code von dem Spiel frage.
Ah, wenn ich die Slides hier irgendwie veröffentliche, ist das ja da drin.
Ist dann einfach Folie, welche war es?
Weil das war jetzt einfach auch mal ein anderes Thema.
Darum sind es jetzt 13, ich wollte eigentlich 12.
Dann habe ich das Spiel noch als Interlude, wie bei Filmen, oder?
Interlude.
Wie bei Star Wars gethemed ist.
Also ein Interlude.
Asteroidenfeld nach dem Han Solo.
Und das hat dann einfach so zusammenge...
Also es ist unglaublich, oder, eigentlich?
Der Claude ist...
Also da war wieder Claude.
Dann habe ich zwei, drei Korrekturen noch gefragt.
Dann habe ich selber noch zwei, drei Dinge angepasst, die mir nicht gefallen haben.
Zum Beispiel ist jetzt der Num-Block zum Steuern.
Weil das Reveal.js braucht ja auch viele Tastaturabkürzungen.
Und wenn ich dann die gleichen Pfeile und so weiter für die Präsentation brauche,
und dann geht das Spiel ja nicht richtig, oder?
Dann geht eben die Folie weg.
Darum habe ich dann einfach das noch umgestellt auf den Num-Block,
wo halt dann Zahlen zum Spielen gedacht sind.
Darum sind die Zahlen, dass es in der Flight drin gerade funktioniert.
Also so kleine Tricks.
Da muss man halt dann selber doch auch wieder Hand anlegen
und den Code ein bisschen verstehen und anpassen.
Okay.
Wir hätten noch Zeit für eine kurze Frage, wenn es noch eine gäbe.
Dann danke ich nochmal ganz herzlich.
Und Applaus für unseren Sprecher.