javascript | blog.symolo.de

Wieviel Pixel ist in einem Millimeter?

3 Satz in der Praxis

Dezember 2, 2021 - Lesezeit: 15 Minuten

Wer wollte nicht schon immer mal wissen wie viele Pixel eigentlich ein Millimeter sind? Die Frage lässt sich leider nicht ganz eindeutig beantworten, da es immer von der DPI abhängt. Also der Pixeldichte. Bei einem Monitor ist diese Dichte normalerweise deutlich weniger als bei einem Ausdruck auf Papier. Aber auch da gibt es Unterschiede, wenn ich z.B. ein Foto ausdrucken möchte. Da ich momentan viele Ausdrucke designe und leider aufgrund der Umstände häufig nicht vor dem betreffenden Drucker stehen kann, um mir das Ergebnis anzusehen bin ich gezwungen das Ganze auf dem Reisbrett vorher schon mal durchzuspielen und dem Kunden am besten ein PDF mit seiner Anforderung zum Testen schicken kann. Ein PDF hat den Vorteil, dass der Ausdruck wie designt ausgedruckt werden kann. Inklusive Schriftarten und Bildern. Nur die Abmessung sollte man vorher kennen, damit man das Ganze noch richtig zurechtschieben kann. Ein Kunde nennt aber im Normalfall Millimeter als Maß. Das ist beim Designen meistens hinderlich, da das ein permanentes Umrechnen erfordert, wenn es darum geht kleinere Korrekturen mit statischen Werten vorzunehmen. Wenn man das Design bereits mit Pixelwerten durchführt, übernimmt der Drucker die Rückrechnerei später für uns. Damit der Kunde weiterhin mit dem Lineal messen kann und ich bereits im Vorfeld pixelperfekte Layouts liefern möchte hab ich einen kleinen Umrechner geschrieben, der es mir ermöglich mit meiner Entwicklung im Bereich der Pixel Schalten und Walten zu können, aber auf die Wunschmaße nicht verzichten zu müssen.

Das Tool ist erreichbar unter:

mm in px

Und reiht sich wunderbar in die Liste der anderen Tools ein. Auch dieses Tool kann man sich, wenn es öfter gebraucht wird, einfach als APP verknüpfen.

Fun with HTML5

making some noise

November 2, 2021 - Lesezeit: 25 Minuten

Jetzt gibt es soviele verschiedene Betriebssysteme und so viele unterschiedliche Musikplayerprogramme von VLC über mplayer oder der im Windows integrierte Grooveplayer. Nur sind die meisten Programme entweder nicht direkt installiert oder umständlich einzurichten, wollen ins Internet um irgendwas runterzuladen oder erstmal die ganze Festplatte durchsuchen. Ich will doch einfach nur ein paar mp3 Dateien anhören. Aber es gibt ja glücklicherweise den Browser, der das Abspielen von Musikdateien im HTML5 Standard ja bereits unterstützt. Super, also schnell die mp3 Datei gesucht und via Drag und Drop in den Browser ziehen und schon wird sie abgespielt. Nach 5 Minuten dann die nächste Datei draufziehen. Und dann nach 5 Min.? Genau: nächste Datei draufziehen. Nach 20 Min. war mir das dann zu doof und zu zeitaufwändig. Aber bis ich jetzt im Grooove mir was zusammengezogen habe und das Ganze dann noch für mein Linux und mein Androiden zusammengstellt habe, kam mir die Idee, warum nicht alles einmal fertig machen und auf jeder Plattform genießen. Also hab ich das Ganze mal in eine Website gepackt:

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
 <source type="audio/mp3" src="./Voodoo Suite - Little Grass Shack.mp3">
 Sorry, your browser does not support HTML5 audio.
</audio>

Ok, das war easy. Jetzt kann ich eine Datei abspielen. Die Datei muss im selben Ordner liegen und das Ganze kann, in zusammenarbeit mit einem einfachen Webserver, sogar schon gestreamt werden. Ist aber nur eine Datei, brauchen wir noch eine Playlist:

<ul id="playlist">
 <li><a class='active'href="./Voodoo Suite - Little Grass Shack.mp3">Voodoo Suite - Little Grass Shack.mp3 (Local)</a></li>
 <li><a href="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Voodoo_Suite/blissbloodcom/Voodoo_Suite_-_03_-_Little_Grass_Shack.mp3">Voodoo_Suite_-_03_-_Little_Grass_Shack.mp3</a></li>
</ul>

Ok, jetzt haben wir eine Playlist. Wenn ich die aber anklicke, dann navigiert der Browser und ich bin soweit wie vorher. Dann packen wir doch einfach noch ein bisschen oldskool Javascript dazu:

<script>
  var audio;
  var playlist;
  var tracks;
  function init() {
    audio = document.querySelector('#audio');
    playlist = document.querySelector('#playlist');
    tracks = playlist.querySelector('li a');
    let links = playlist.querySelectorAll('a');
    links.forEach(e => {
      e.onclick = (evt) => {
        evt.preventDefault();
        playlink(e);
      }
    });
    audio.addEventListener('ended', function (e) {
      var current = playlist.querySelector('li a.active');
      var next = current.parentNode.nextElementSibling;
      if (next) {
        let e = next.querySelector('a');
        playlink(e);
      }
      else {
        let links = playlist.querySelectorAll('a');
        playlink(links[0]);
      }
    });
  }
  function playlink(link) {
    let e = link;
    playlist.querySelectorAll('a').forEach(l => { l.classList.remove("active") });
    e.classList.add("active");
    audio.src = e.getAttribute('href');
    audio.load();
    audio.play();
  }
  init();
</script>

So, jetzt kann ich mir in der Playlist aussuchen was ich will und die ganze Liste läuft solange ich nicht stoppe. Ich kann ich der Playlist entweder lokale Einträge verwenden oder Quellen aus dem Internet. Das Ganze lässt sich mithilfe eines Webservers bequem bedienen und funktioniert sogar mit der Xbox. Was will man mehr. Kein generve vom VLC für Updates oder das Verhalten des mplayers unter windows. Man muss nur seinen Browser aktuell halten und das war's schon.

Das Javascript in diesem Beispiel kann zweifelsohne noch deutlich verbessert werden. Ist aber für den vorliegenden Fall vollkommen ausreichend. Denn sonst hätt ich ja auch einen Player installieren können.

Mit Node.js gegen den Rest der Welt

Heute: easy SFTP Upload

Juli 27, 2021 - Lesezeit: 14 Minuten

Immer mal wieder hat man die Anforderung schnell mal ein paar Dateien von einem Rechner auf einen anderen zu laden. Besonders wenn dann noch das Internet beteiligt ist, ist man bestrebt das Ganze auch noch sicher ablaufen zu lassen. Damit entfällt die alte aber zuverlässige Methode des FTP. Aber dafür hat man ja SFTP. Nodejs macht es einem dann sogar recht einfach, da es bereits ein paar tolle Pakete dafür gibt. Eins davon hab ich dann heute mal eingesetzt und wieder lässt sich ein Anforderung in wenigen Zeilen elegant lösen.

Installation

npm i sftp-upload

Danach eigentlich nur noch passend konfigurieren und fertig:

const SftpUpload = require('sftp-upload');

async function uploadFiles() {
  return new Promise((resolve) => {
    process.stdout.write('\r');
    new SftpUpload({
      host: '<HOST HERE>',
      username: '<USER HERE>',
      password: "<PASS HERE>",
      path: './',
      remoteDir: '/<DIR HERE>',
      excludedFolders: ['node_modules'],
      exclude: ['package-lock.json', 'package.json'],
      dryRun: false
    })
      .on('error', (err) =>  {throw err;} )
      .on('uploading',  (progress) =>  process.stdout.write('\r' + progress.percent + '% completed'))
      .on('completed', () => {
        process.stdout.write('\r');
        resolve();
      })
      .upload();
  });
}

(async () => {
  await uploadFiles();
  console.log("DONE");
})();

Lässt sich super für Kontinuierliche Integration einsetzen und man könnte das ganze jetzt mit dem Komprimieren passend kombinieren. Jetzt muss das Ganze nur noch zyklisch ausgeführt werden...

Ha-GUID! Gesundheit!

GUIDs für Jedermann

Juni 30, 2021 - Lesezeit: ~1 Minute

GUIDs sind eine tolle Möglichkeit eine Eindeutigkeit z. B. an einem Datensatz zu erzeugen. Im Gegensatz zu Zahlenindetifiaktionen sind GUIDs absolut eindeutig und übergreifend. Als Entwickler braucht man immer mal wieder eine GUID für alle möglichen Zwecke. Deshalb haben wir ein kleines Programm entwickelt, dass einfach eine GUID erzeugt und in die Zwischenablage schiebt.

GUID Generator

Kann man auch als App verknüpfen.