Revision 2 of my Code of Conduct / Manifesto Document

I have published a new edition of my Personal Manifesto of Software Engineering, an exposé of my software engineering background and a declaration of my professional code of conduct.

Auf macOS HTTP(S) ohne Entwickler-Werkzeuge protokollieren

Die Browser-Entwicklerwerkzeuge sind nett, aber der Netzwerktraffic-Reiter hat (insbesondere bei FF) ein Problem, er reisst die Performance so weit runter, dass einem das Gesicht einschläft.

Auf macOS verwende ich „mitmproxy“, um HTTP und HTTPS zwischen Browser und Server zu protokollieren. Das Verfahren erfordert die Installation von „homebrew“ (ein Paket-Manager für macOS) und damit dann „mitmproxy“ (ein „Man-in-the-Middle“ Web-Proxy, der im Terminal läuft, und alles mitprotokolliert, was Browser und Webserver kommunizieren).

Installation wie folgt:

  • „homebrew“ installieren: Im macOS-Terminal:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • „mitmproxy“ herunterladen und installieren: Im Terminal:
brew install mitmproxy

Das Folgende Verfahren muss zu Beginn der Arbeit durchgeführt werden:

  • mitmproxy starten: Im Terminal:
mitmproxy
  • Firefox / Chrome / Whatever starten.
  • Folgende Proxy-Einstellungen verwenden:
    • IP: localhost
    • Port 8080

Die folgenden Schritte sind einmalig nötig, damit „mitmproxy“ den HTTPS-Traffic entschlüsseln kann:

  • Im Browser folgende URL aufrufen:
http://mitm.it
  • Auf das Symbol „Apple“ klicken.
  • Im darauf folgenden Import-Dialog diese Option wählen: „Dieses Zertifikat verwenden, um Webseiten zu identifizieren“

Noch ein Hinweis: „mitmproxy“ loggt erstmal alles, was schnell unübersichtlich wird. Um die Ausgabe einzugrenzen, kann folgende Tastenkombination verwendet werden:

l ~ts html

Erklärung zu diesem Ausdruck: l für „Limit auf Ausgabe setzen“; ~ts für „Nach Content-Type filtern“; html matcht dann „Content-Type: text/html“.

Neue AGB

Aufwandsabschätzung

Anzahl der Fachverfahren: 850

Geschätzer Aufwand für das Portieren der Fachverfahren: 8500 Stunden

Ich würde es nicht wagen, so eine Aufwandsabschätzung meinen Kunden zu präsentieren, geschweige denn der Öffentlichkeit.

Audio-Archiv in Flexbox-CSS mit mehreren MyPlayer-Instanzen

Übersicht

Ziel und grundsätzliche Anforderungen: Für die Präsentation meiner Sammlung von Audio- und Musikproduktionen benötigte ich ein HTML-Dokument, das ein Archiv meiner Sammlungen („Sampler“ bzw. „Alben“) von Veröffentlichungen im MP3-Format, jeweil mit einer M3U-Playlist pro Album sowie einige Infos, Cover-Art und externe Links zu jedem Album übersichtlich darstellt.

Sinn und Zweck ist die Verfügbarmachung einer Reihe von Alben an Besucher meiner Webseite, damit diese die Stücke bzw. Zusammenstellungen sichten und ggf. direkt im Webbrowser wiedergeben können.

Dabei sollen die verschiedensten Endgeräte unterstützt werden („mobile-ready“ u.a.). Grundlage der Abspielbarkeit von Mediendateien direkt im Webbrowser ist mein eigener Web-Audio-Player MyPlayer mit Playlist- und M3U-Unterstützung, basierend auf dem verbreiteten MediaElement.js.

Geforderter Einsatzbereich:

Es soll mindestens eine Einbindung auf meiner eigenen Webseite erfolgen, dort Darstellung z.B. in einem Teilbereich, auf einer dedizierten Seite o.ä.

Verlinkung von anderen Präsentationen wie meinem Video-Archiv bei YouTube; zu diesem Zweck Anpassbarkeit der Gestaltung bzw. des „Look & Feel“ zwecks Angleichung an solche externen Auftritte. Gestaltung bevorzugt in reinem CSS, direkt im HTML-Dokument.

Für das responsive HTML-Layout soll Flexbox-CSS zum Einsatz kommen, also display: flex wie in CSS3 verfügbar.  Dynamische Funktionen (z.B. Lighbox für Cover Art) sollen in JS möglichst mit jQuery oder möglichst kleinen JS-Anwendungen realisiert werden.

Bemerkungen

MyPlayer: Es mussten umfangreiche Änderungen am MyPlayer-CSS vorgenommen werden. Diese sind, wo es angebracht war, in den dafür dediziert installierten MyPlayer (/test/snd/unsorted/mp3/player/) fest eingebaut (local.css angepasst und MyPlayer neu compiliert) oder werden speziell für dieses Projekt in der index.html als CSS-Override (z.T. mit !important) angewendet. Die Forderungen, dass alles CSS in index.html stehen soll, war deswegen nicht einhaltbar, weil manche CSS-Regeln in MyPlayer sich im Lauf der Umsetzung als fehlerhaft herausgestellt haben und behoben werden mussten.

Hier ein Listing der CSS-Overrides in der index.html für den im Projekt verwendeten MyPlayer:

 .mejs { background-color: #a8a8a8!important; }
 .mejs li { padding-top: .2em; color: blue; }
 .mejs li:hover { background-color: ffefad; }
 .mejs-container { background: none; height: 100%!important; }
 .mejs-controls { height: 32px!important; }
 .mejs-duration-container { margin-left: 1em!important; }
 .mejs-inner { height: 100%!important; }
 .mejs-mediaelement { height: auto!important; }
 .mejs-playlist { height: 100%!important; }
 .mejs-poster { height: 32px!important; }
 .mejs-time-rail { width: 95px!important; }
 .mejs-time-total { width: 95px!important; }

Man sieht, dass zumindest einige dieser Overrides immer noch Unklarheiten bzw. Unrichtigkeiten im MyPlayer-CSS sind und eigentlich auch dort behoben werden sollten (TODO).

Flex CSS: display: flex hat sich nach einigem Experimentieren und Feinanpassungen in Browser-Displays von sehr großen Desktops (4k) bis zu kleineren Smartphones (4″) bewährt und stellt dort die einzelnen Alben sinnvoll zu Boxen arrangiert 1-, 2- oder 3-spaltig dar. Das Styling (Template) ist über alle diese Geräteklassen hinweg responsiv, wobei nur ein einziger Breakpoint bei width: 100em erforderlich ist.

Der Alben-Flexbox-Container ist ein div-Element mit Klasse slides, das div-Elemente mit Klasse slide enthält. Das CSS, um den Alben-Container zu einem Flexbox-Container zu erklären, lautet:

/* Alben-Container. */
.slides { display: flex; flex-wrap: wrap; max-width: 62.5em; }
/* Breakpoint bei Browserfenster-Breite "100 em". */
@media (min-width: 100em) {
    .slides { max-width: 87.5em; }
}

Hinweis: flex-wrap: wrap ist erforderlich, damit die Boxen nebeneinander auftauchen, ansonsten erfolgt kein Einsortieren der Boxen in Zeilen und Spalten, sondern sie kommen alle untereinander (bzw. nebeneinander i.A.v. CSS-Eigenschaft flex-direction)

Hier ein zwei Screenshots bei unterschiedlichen Browserfenster-Breiten:

Screenshot des Musik-Archivs auf einem FullHD PC-Desktop, Browserfenster bei 100% Breite.

Screenshot des Musik-Archivs auf einem FullHD PC-Desktop, Browserfenster bei 50% Breite.

Demo

Das Archiv ist ab jetzt unter dieser URL abrufbar: https://tk-sls.de/musik.

Sonstiges

Bei der Umsetzung habe ich Fehler bzw. falsche Grundannahmen in MyPlayer gefunden, die ich in näherer Zukunft in einer Bugfix-Release beheben möchte.

 

Creative E-MU 1616m PCIe on Windows 10 64bit

On a PC running Win10Pro64 that has no Firewire port i needed a 4in4out audio solution functioning as an ASIO device.

So i dug out my E-MU 1616m PCIe, and – fearing that it would show severe compatibility issues – installed the most recent driver (EmuPMX_PCDrv_US_2_30_00.exe, July 15th 2011). To my surprise, the device started working immediately. So far i have not found any unsupported or problematic features (at 48 kHz samplerate i use WDM audio output, symmetrical input with zero-latency monitoring and ASIO sends and output to speakers through a 4-band EQ as DSP insert).

I think the E-MU 1616m PCIe is a great device:

  • 10 years after i bought it, it works as on the first day.
  • It has good and solid performance, i permanently run it with 10ms buffer size, which in Ableton Live adds on to 23.3 ms global round-trip latency, and i am yet to encounter any dropout or instability.
  • PatchMix looks and feels very functional (apart from the brushed Aluminium skin which i find quite funny and nostalgic). Since it has spent many years in maturity, having no „software development“ bloating it with useless features and workflows, it runs rock solid and lightning fast on a modern PC.
  • The breakout box (called „Microdock“) has massive connectivity:
    • copper S/PDIF, AES or EBU (really!),
    • optical ADAT or S/PDIF,
    • four balanced 6.35mm input jacks,
    • two XLR/jack combo inputs,
    • six balanced 6.35mm output jacks,
    • three unbalanced 3.5mm stereo output jacks,
    • a dedicated 6.35 mm headphone output jack with hardware volume control and
    • a stereo pair of RCA inputs plus GND (Phono).
  • It works with Linux (using emutrix instead of PatchMix).

This is the best Creative product ever – ah wait, it’s not really by Creative … 😉

xdraw 1.1

I was very pleased to notice that my small Xlib-utility xdraw has made it across the years unscathed. It compiled after 11 years of complete lack of code or build system maintenance. Hail to the stability of the X Library!

However, i found the visual quality of the drawing results a bit lacking – the drawn lines are too uneasy. So i have added weighted average smoothing to the drawn lines.

xdraw in action.

I have released this improvement as version 1.1 of xdraw here: https://gitlab.tk-sls.de/tilman/xdraw/tree/1.1

Rechtlicher Hinweis

Endlich ein Linux-Desktop dank Ubuntu! Unity!!!

Hier noch ein rechtlicher Hinweis:

Screenshot Ubuntu 16.04 LTS