Category: Javascript

Posted on

Eine ganz kleine Webseite

Meine erste Idee als ich gefragt wurde eine Webseite zu erstellen war alles in eine Datei zu packen. Das wenige CSS das nötig sein sollte passt bestimmt in den HTML-Header, habe ich gedacht. Aber dann wurden doch Ansprüche wie responsive Webdesign deutlich erkennbar. Also musste was kleines an Bibliothek besorgt werden, denn das fummeln ich mir nicht selber zusammen. Meine Liebe gegenüber CSS hält sich eh in Grenzen.

Nach einer fünf Minuten suche fand ich das kleine feine CSS Framework pureCSS. In den Beispielen war dann auch schnell eine Variante gefunden den den Zweck mehr als erfüllen sollte. Nach dem Erhalt der hochauflösender Bilder, um die ich gebeten hatte, ging für das bearbeiten noch die meiste Zeit drauf. Sicherheitshalber hatte ich die Fotos in mehre Formate und Auflösungen angefertigt. Am Ende brauchte ich die PNG und WEBP Versionen aber gar nicht. Zu finden ist der Laden im Herzen von Kaltenkirchen und heißt Hattaphon schaut doch einmal vorbei.

Posted on

Von 100KB auf 8854 Byte mit einem HTML5 Spiel

Die Motivation für dieses Projekt entstand nach der Demo Party Revision 2022. Das Ziel war es, ein weiteres Spiel zu schreiben, das für die Demoscene relevant wäre. Statt nur einer Referenz wurden es dann zwei. Nicht nur, dass die Spielmechanik einem Amiga-Freeware-Spiel aus dem AmiNet entsprang, das ich irgendwann in den späten 90er Jahren gefunden hatte. Auch das Minimieren des JavaScript-Codes auf einen Bruchteil seiner Größe war passend. Und so begann eine spannende Reise in eine unbekannte Welt.

Continue reading “Von 100KB auf 8854 Byte mit einem HTML5 Spiel”
Posted on

Ein Sequenzer in NodeJS

Auf der Suche nach Software zu meinem Launchpad MINI stöberte ich bei GitHub und fand diese Sequenzer. Noch bevor es zum ersten Test den Weg auf meine Festplatte gefunden hatte, fiel mir auf das es die Launchpad Ansteuerung über ein NPM Packet erledigte. Launchpad-Mini ist praktisch wenn man genau dieses Pad besitzt, damit sollte es doch möglich sein selber etwas zu Programmieren. 

pad.on( 'key', k => {
  if(k.pressed) {
    pad.col( pad.red.full, k);
    return;
  } else {
    console.log(`pressed: ${k.pressed} Y:${k.y} X:${k.x}`);
    let btnStatus = BTN_GRID[k.x][k.y];
    if(!btnStatus||false) return;
    if(btnStatus._name==='green') {
      BTN_GRID[k.x][k.y] = pad.yellow;
      updatePatts(false,k.x,k.y);
    } else if(btnStatus._name==='yellow') {
      BTN_GRID[k.x][k.y] = pad.green;
      updatePatts(true,k.x,k.y);
    }
    pad.col( BTN_GRID[k.x][k.y], k);
  }
});

Hier zu sehen wie bei jedem druck auf eines der Pads, solange des gehalten wird dieses Rot leuchtet. Und bei jedem anderen Event den Status invertiert. Dann steht grün für Aktiv und gelb für Inaktiv. Der Teil der die meiste Arbeit bereitet hat, war die Midi Verbindung zu einem anderen Programm. Da das Pad selber auch per MIDI angesteuert wird, muss ein Kanal auswählt werden der nur die zu spielen Noten enthält. Und eine wichtige Erkenntnis war das Verbinden des JavaScript Programmes mit dem Sample Abspieler. [Hydrogen/Alsa/Linux]

Der Samstag war dann noch lang genug um zumindest eine minimale Version meines Sequenzers zu erstellen.

So meine ich muss das ungefaehr aussehen wenn man einen Sequencer auf dem Launchpad abbilden will.

Da ja auch bald wieder Hacktober ist für alle die mitmachen wollen =>
https://github.com/dexta/launchpad-mini-my16seq

Posted on

Chaos Game – Numberphile

Einfach schön wenn Mathematik in unter 10 Minuten anschaulich erklärt wird, in dieser Numberphil Episode ein Spiel mit drei festen Punkten und einem Würfel. Man wähle eine zufällige Ecke eines Dreiecks vom Ausgangspunkt zur Ecke markiert man auf halber Strecke den neuen Ausgangspunkt. Wiederholt man dieses ein paar 100, 1000, oder 10000 mal entsteht immer deutlicher ein Muster je nachdem welche Regel man auf das Auswählen oder die Annäherung anwendetet.
Jeder nehme jetzt die Programmiersprache seines geringsten Mißtrauens um diese kleine Aufgabe von einem Computer erledigen zu lassen. In meinem Fall war es natürlich JavaScript das sich nur zufällig gut eignet um es in diesem Kontext zu präsentieren. Aller Anfang war leicht nach nicht mal einer Stunde stand die erste Version, hier noch als als Source verfügbar, nach dem Gulp, Bootstrap 4 und das vermeiden von Angular, Vueje oder React bezwungen wurden vergingen doch ein paar Tage.

Die Version 0.42 hat immer noch ein GUI Problem sowie ein paar Bugs die sich meist durch ein neu laden beheben lassen. Wer es ich ansehen möchte findet eine Live Demo, wer sich an dem Quellcode versuchen möchte hier entlang.

Posted on

JQuery Terminal Emulator

Damit muß ich unbedingt mal was machen, ein Terminal im Browser per jQuery einfach ein zu binden.  Ein Schwerpunkt bei diesem Projekt scheinen JSON-RPC gewesen zu sein,  mit einer Zeile Code ist das erledigen.  Die API bietet darüber hinaus noch weitere interaktions Möglichkeiten mit dem Terminal.

Nun brauche ich nur noch ein passendes Projekt zu diesem Plugin, das Chaos-Game war kurz in der Auswahl nur währe es mit dem Responsive schwierig geworden.

 

Posted on

Welches Javascript Framework

Diese Frage stellt sich immer auf ein neues sobald das letzte Projekt zum Abschluß gekommen ist.  Wo geht es weiter welche Probleme bekomme ich wenn ich bei diesem bleibe oder zu einem anderen Wechsel.

Abgesehen von der Zeit die es benötigt sich in ein neues Framework ein zu arbeiten, fällt es immer schwerer je mehr man schon gesehen hat, die Gegebenen Umstände kritiklos an zu erkennen. Will sagen was an andere Stelle schon einmal gut Funktioniert hat oder sich als Praktisch erwiesen hat gibt man ungern für etwas auf das erst mal nicht funktioniert (metaphorisch Kopf Ding)

Dementsprechend brauche ich immer bis ein neues Framework gefunden ist das mit so gut gefällt damit mal etwas aus zu probieren. An dieser Stelle spare wir uns die Aufzählung der bekannten groessen, nur soviel ich komme von Angularjs 1.x.

Und Riot soll es werden, nicht ganz neu nicht ganz klein und vor allem noch aktive in der Entwicklung, ist ein React artiges Komponenten Javascript Framework. Klein soll es sein und “Batteries included” das sollte erst einmal ausreichen.