knuspermagier.de

Hallo. Ich bins! Philipp!
Hallo! Ich habe gerade freie Kapazitäten und suche Projekte mit PHP / Laravel / Vue.js / React / etc. Wenn ihr was habt, schreibt mir gerne

Sebastian Madsen
Sei Nur Du Selbst →

Sebastian von Madsen, also aus der Band Madsen, er ist nicht plötzlich adelig, hat eine Soloalbum gemacht und ich finde es schön. Vor allem dieses Lied mit Drangsal, aber auch “Ich Löse Mich Auf“ ist gut, genauso wie auch der Rest des Albums. Schöne Überraschung!

Gitarren

Letztens, als ich diesen Kurzeintrag über die Hagstrom Fantomen schrieb, dachte ich mir schon, dass es vielleicht passend wäre, diese Liste der Wunsch-Gitarren ins Wiki zu übernehmen, weil warum nicht.

Eine einfache Text-Liste war mir aber zu langweilig, irgendwelche Bilder aus dem Internet klauen mag ich aber auch nicht, also überlegte ich mir, dass ich sie wohl abmalen muss und die Idee verselbstständigte sich etwas. Was mache ich mit den Bildern? Wäre ja lustig, wenn die nebeneinander hängen würden, als hingen sie an einer Wand. Wenn sie nun so da hängen, wäre es ja aber auch noch witziges Easteregg, wenn man sie bewegen könnte… und natürlich müssten sie kaputt gehen, wenn man sie nicht vernünftig auf einen Wandhalter hängt.

knuspermagier.de_wiki_listen_gitarren.png

Leider machen mir die besonders sinnlosen Sachen am meisten Spaß. Anfangs dachte ich, ich male die Gitarren in einem Vektor-Programm, damit ich sie beim Aufprall schöner zerstören kann, also richtig den Hals rausbrechen. Nach fünf Minuten war es mir allerdings zu aufwändig, die Kurven ordentlich zu ziehen und ich verwarf die Idee. Eventuell habe ich auch einfach gar keine Ahnung von Vektorprogrammen und es wäre vielleichter gegangen, als einzelne Punkte zu setzen und dann die Bézierkurven zu ziehen bis es auf die Gitarrenrundung passt. Es kam mir aber auch ganz gelegen, denn irgendwie male ich auch einfach gerne in Procreate.

Um trotzdem einen kleinen Zerstörungseffekt hinzubekommen, kam mir die Idee, dass ich das Bild einfach in zwei Teile schneide und ein bisschen herumdrehe, dass es irgendwie durcheinander aussieht. Dazu nehme ich zwei <canvas>-Elemente und male in jedes eine Hälfte der Gitarre und ✨schwupps✨. Bisher hatte ich keine Gitarre, bei der das super dumm aussah, weil der Body mehr als die Hälfte des Gesamtbildes groß ist, oder so.

screenshot-2022-10-01-at-23.03.17.png

Das ganze Dragging wollte ich erst per Hand machen, also einfach mit .addEventListener('drag', […]), aber da stieß ich auch schnell an Grenzen, es ging schon damit los, dass ich das Ghost-Image, also das Bild, was der Browser halt anzeigt, wenn man einen Drag-Vorgang startet, nicht weg bekam und alle Stack Overflow-Tricks nicht funktionierten. Da ich eh schon vermutete, dass ich für die ein oder andere Animation GSAP einsetzen werde, schaute ich, ob die zufällig was dafür haben und fand das Draggable-Plugin, das ziemlich gut funktioniert. Super wäre noch das Intertia-Plugin, dann wäre das noch alles etwas physikalischer, aber das kostet leider Geld.

Am Anfang hatte ich ein paar Probleme mit den Koordinatensystemen, in denen sich die einzelnen Elemente befanden, und das Snapping funktionierte nicht so richtig, wie ich das wollte, aber nach genug Factorio spielen löste sich das auch auf, hatte ein position: relative auf dem richtigen Container vergessen.

Joa, ich wünschte, ich könnte noch mehr dazu berichten, aber im Großen und Ganzen sind es nur ein paar Zeilen Code und die größte Arbeit war es natürlich, die Gitarrenbilder herzustellen. Ich bin aber zufrieden. Es sieht witzig aus und irgendwie macht es Spaß die Gitarren herumzubewegen und fallen zu lassen. War ein Spaßiges kleines Ding und ich hab wenigstens wieder ein bisschen mehr mit GSAP gemacht. Der Code ist natürlich einfach komplett inline, das hier ist schließlich mein Blog, da kann ich machen, was ich will!


Wenn ich Lust habe, werde ich noch die Farin Urlaub Signature von Cyan Guitars hinzufügen.

Did you know that DOM elements with IDs are accessible in JavaScript as global variables? It’s one of those things that’s been around, like, forever but I’m really digging into it for the first time.

Named Element IDs Can Be Referenced as JavaScript Globals auf css-tricks.com

Manchmal gibt es komische Zufälle. Gestern Abend baute ich ein bisschen herum und plötzlich gab es einen Error in der Konsole, weil er eine Variable nicht fand, nachdem ich ein Element aus dem HTML löschte. Ich wunderte mich kurz, dachte aber nicht weiter drüber nach und fünf Minuten später fand ich diesen Artikel von CSS-Tricks zufällig? Was ist das für eine komische Magie.

Electric Callboy
HYPA HYPA Tour 2022 →

Wie gut ist es eigentlich, dass die Bands mittlerweile selber die Konzertfilme einfach auf Youtube hochladen, statt die auf Plastikscheiben herauszubringen.

Hamilton und die Flex-Option

Letztes Jahr kaufte ich Vorpremieren-Karten für die deutsche Version von Hamilton. Es sollte ja im Februar 2022 starten. Dieser Termin konnte dann leider nicht gehalten werden und wurde in den September, bzw. Oktober 2022 verschoben. Ich fand das nicht so schlimm, ich habe eh ein paar Bedenken bei der deutschen Fassung und naja, ich hab ja Zeit. Als die Bitte kam, das Ticket auf einen beliebigen anderen Termin umzubuchen, mit dem Bonus, dass man sich auch gratis bessere Karten aussuchen kann, als man kaufte, habe ich das gerne gemacht und bin auf Ende September ausgewichen.

Nun hatte ich leider das Problem, dass mir dieser Termin nicht mehr in den Kalender passte, aber zum Glück hatte ich mich ja bei der ursprünglichen Buchung für die Flex-Option entschieden, die damals sogar gratis war. Sie erlaubt mir, bis maximal 48 Stunden vor Vorstellungsbeginn, noch einmal umzubuchen.


Eigentlich dachte ich, nun folgt ein riesiger Rant, dass das alles nicht funktioniert und ich übel abgezockt wurde, aber so schlimm wird es gar nicht. Denn es hat wunderbar geklappt! Nur der Prozess war etwas blöd und einen Wermutstropfen gibt es trotzdem, aber bleibt dran!


Der Prozess für die Flex-Option ist nämlich dergestalt, dass man quasi neue Karten kauft und danach ein Kontaktformular ausfüllt, wo man die alte Bestellnummer (mit Flex-Option) und die neue Bestellnummer einträgt. Die Anfrage wir danach, so wirkte es, noch von einem Menschen manuell durchgewunken. Am Ende bekommt man das Geld für die alte Bestellung zurück erstattet.

Mein Problem dabei: Man geht ja erstmal mit der neuen Bestellung in Vorleistung, ohne zu Wissen, ob die Anfrage akzeptiert wird. Musicals.de benutzt ticketonline.de als Ticket-Provider, warum bauen die nicht eine Flex-Options-UI ein, wo man das alles automatisiert in einem Rutsch durchführen kann, ohne was neues zu kaufen, ohne zu wissen, ob vielleicht was schief geht.

Naja, aber ist ja alles gut gegangen, obwohl ich das 48-Stunden-Limit fast gerissen hätte, da ich nicht wusste, was ich ins Formular eintippen soll — die Tatsache mit der gezwungenen Umbuchung vom Februar auf September machte mich nämlich etwas unsicher. Zum Einen wusste ich nicht, welche alte Bestellnummer ich nun eingebe (Original, oder Umbuchung) und zum Anderen wusste ich nicht, ob ich mir nun wieder die teureren Plätze aussuchen darf, oder nur welche auf dem Preislevel der Originalbestellung.

Da die Zeit knapp wurde und die Hotline einfach abgeschaltet ist (“Bitte benutzen sie unser Kontaktformular im Internet!”) habe ich mich für die Plätze aus der Originalbestellung entschieden und nicht weiter darüber nachgedacht. Bye bye, Reihe 5!

Webauthn und (Apple) Passkeys in einer Laravel-App

Letztens warf Markus einen Link zu passkeys.io in den Chat. Ich hatte schon wieder ganz vergessen, dass iOS 16 ja Passkey-Support mitbringt und freute mich über diese kleine Gedankenstütze!

Doch was sind Passkeys? Am Besten kann es natürlich die oben verlinkte Webseite rüberbringen. Passkeys sind eine Initiative von Apple, Google und Microsoft um Passwörter abzulösen. Das baut alles auf den FIDO und Webauthn-Standards auf, was erstmal gut ist, denn die werden bereits von Geräten und Software unterstützt! Statt eines Passworts benutzt man zum Login auf einer Seite halt Touch ID, Face ID oder die entsprechenden Funktionen der anderen Hersteller, um den Login per Passkey freizugeben.

Ich hatte direkt Lust, das in eins meiner Projekte zu integrieren. Der Login mit Passwort ist zwar auch nicht so schlimm, da entsprechende Passwortmanager auch auf dem Handy alles automatisch ausfüllen, aber Zukunft! Außerdem dachte ich, vielleicht gibt es ein paar spannende Erkenntnisse zur Einbindung, die ich dann hier teilen könnte.


Zunächst suchte ich also ein Package, das Laravel mit Webauthn verbindet und fand laragear/webauthn. Das installiert man schnell in die Laravel-App, ändert ein paar Konfigurationen und schwupps, kann man es benutzen. Da Webauthn zum Teil auch ein Browserfeature ist, muss man natürlich auch ein bisschen JavaScript schreiben, um die richtigen APIs anzusprechen um die entsprechenden Dialoge im Browser zu triggern. Die Schnipsel sind in der README vom Package auch dabei.

Ich hatte nun also schonmal einen “Login with Webauthn”-Button, aber der Login klappte einfach nicht. Ich ärgerte mich zehn Minuten damit rum, bis mir einfiel, dass ich meinen bestehenden Account noch gar nicht mit dem Passkey verknüpft hatte, 🤦. Also erstmal die Username/Passwort-Authentifizierung wieder aktiviert und den “Register Passkey”-Button eingebaut, um den seitenspezifischen Passkey zu erstellen und in der Datenbank zu hinterlegen.

Danach klappte es dann auch einfach! Verrückt. Ich bin davon ausgegangen, noch irgendetwas and er Konfiguration des Pakets ändern zu müssen, oder verrückte JavaScripte zu schreiben, um dieses Webauthn-Paket für Passkeys fit zu machen, aber ich kann berichten: It just works.

Das Gute ist: Will man gar keine Passkeys verwenden, sondern einen YubiKey, oder so etwas, dann funktioniert es auch einfach, denn es ist ja einfach dieser Webauthn-Standard, den es schon seit ein paar Jahren gibt.


Die einzigen Bedenken, die ich bei der Sache jetzt noch habe ist, dass das Package, was ich verwende, nur 61 Stars bei Github hat. Ich habe mir den Code auch noch nicht genauer angesehen, da es jetzt eh nur Quaschprojekte sind, für die ich es benutze. Sollte man es produktiv verwenden, sollte man natürlich nochmal einen genaueren Checkup machen, ist ja doch eine relativ elementare Komponente einer App.

schweine.jpg

Philipp bewertet…
Ozark, Season 4

Sammelbewertung für die letzten beiden Staffeln.

Ich machte eine ziemlich lange Pause zwischen der zweiten und dritten Staffel, aber als ich zwischendurch auf einer Bahnfahrt mal etwas zu gucken brauchte und die neue Better Call Saul-Staffel noch auf sich warten lies, erinnerte ich mich und fing an die dritte Staffel anzugucken.

Ich habe es nicht bereut und direkt die vierte hinterhergeschoben. Ozark braucht sich im Genre der Drogenboss/Geldwäsche-Serien nicht verstecken, nicht mal vor Breaking Bad. Jason Bateman, Laura Linney, Julia Garner und die anderen liefern im Großen und Ganzen sehr gute Performances ab. Mein Highlight der Serie waren wahrscheinlich die letzten beiden Folgend er dritten Staffel. Die Vierte konnte das Niveau dann nicht ganz halten, war aber auch nicht wirklich schlecht. Meckern auf hohem Niveau.

Das einzige komische war, dass die letzte Staffel 14 Folgen hatte, und ich mich ungefähr zwei Drittel der zehnten Folge fragte, wie in Gottes Namen sie die Serie jetzt noch zu Ende führen wollen, bis mir auffiel, dass es noch vier weitere Folgen gibt. Puh! Hat der Serie auf jeden Fall gut getan, etwas mehr Platz zum Entfalten zu haben.

Auf der besagten Zugfahrt fragte mich der Schaffner noch, ob die Serie denn gut sei und ich sagte, dass sie das schon sei, aber auch ziemlich brutal. Das stimmt auch weiterhin, aber ich habe mich anscheinend dran gewöhnt. Nichtmal das könnte ich als Negativpunkt listen. Ich bin sehr zufrieden und kann Ozark voll empfehlen, wenn man auf so Kram steht!

Ozark, Season 4 auf imdb.com
Wertung: ★️★️★️★️★️

Der Import

Puh, das war eine der dümmsten Ideen, die ich in letzter Zeit hatte. Es waren doch ein enormer Zeitaufwand, all die alten Posts durch zu gehen und zu entscheiden, welche ich nun übernehmen will und welche nicht. Auf der einen Seite finde ich es ja ganz schön, dass der Blog nun wieder komplett ist und ich auch mal wieder auf alte Sachen oder Projekte verweisen kann, ohne die Wordpress-Krücke laufen zu lassen, andererseits musste ich jeden Post angucken und ihn hier ins Interface ziehen und hier und da Dinge fixen und ach, ich hab mich etwas dabei gehasst. Aber auch Spaß gehabt. So ist das manchmal.

Die große Kalenderansicht auf der Archiv-Seite nun auf jeden Fall etwas länger und ist auch etwas verbessert, in dem Kalenderwochen, in denen nichts passiert ist, ausgeblendet werden. Sieht jetzt nicht unbedingt ruhiger aus und vielleicht könnten auch zwei Jahre jeweils nebeneinander sein, oder keine Ahnung. Jedenfalls geht das Archiv jetzt zurück bis ins Jahr 2011 und ich kann die Wordpress-Seite abschalten. Bye, bye!

img_6968.jpg

Ich hab so eine Art Liste von Gitarren, die ich gerne in der Sammlung hätte, wenn ich ein riesiges Haus hätte, mit Platz dafür. Die Hagstrom Fantomen, die ich in diesem Video fand, gehört auf jeden Fall drauf.