Golb Slexa ::

Ich habe eine Sprachdatei für ein PHP-Skript in einer JSON Datei abgelegt.
Meine HTML Seite sollte in der eingebundenen Javascript-Datei die Datei ebenfalls laden und deren Inhalt einer Variable “aLang” zuweisen.

Sicher geht es noch eleganter, aber ich bin bei diesem Snippet hängengeblieben:

var sLang='de-de';
var aLang={};

(...)

/**
 * Init step 1: load language file and make it available in aLang
 */
async function init(){
    fetch('lang/' + sLang + '.json')
    .then(response => response.json())
    .then(aLang => {
        initStep2(aLang)
    })
    .catch(error => console.log(error))
    ;

}

/**
 * Init step 2
 */
async function initStep2(langArray) {
    aLang = langArray;

    // just to check it in the console:
    console.log(aLang);

    // optional: next js function to call or more js code
}

// MAIN
init();

Unter https://www.axel-hahn.de/docs/[POJEKT] habe ich diverse Hilfen für PHP- und Javascript Tools bereitgestellt, die ich mit einem Parser generieren lasse. Jener Ansatz ist etwas älter und länger her - und stellt bereits geraume Zeit so einige meiner Dokumentationen bereit…

Eigentlich suchte ich nach einem mehr generischen Ansatz, um heutzutage in Git übliche Markdown-Dateien in statisches HTML umzuwandeln. Es gibt da diverse Tools, aber ich bin beim PHP-CLI Tool Daux hängengeblieben. Insbesondere, weil ich hier im Gegensatz zu anderen angetesten Werkzeugen keine Extra Konfiguration für einen Navigationsbaum als Config-Datei hinterlegen muss. Auch hat der Entwickler sehr schnell reagiert und auf gemeldete Feature Requests reagiert. Kurz: ich habe nun diverse einzelne Dokumentationen verschiedener Produkte und Klassen mit Daux gebaut. Das sind jeweils statische Verzeichnisse mit statischen HTML-Dateien + Javascript und Css out of the Box in jedem Browser laufen, wenn man sie vom Filesystem oder aber USB-Stick startet.

Was diverse Markdown zu Html Generatoren bieten, ist ein eingebauer Webserver für eine Vorschau. Der hilft beim Schreiben der Markdown-Dateien. Mittlerweile in Markdown Quasi-Standard ist der Support von mathematischen Formeln oder aber Graphen (mermaid.js) - das soweit ich auf Github, Gitlab oder aber lokal im Visual Studio Code per Markdown Preview gesehen habe.

Soweit so gut. Und wenn ich nun zig alleinstehende Dokumentationen habe und eine Index-Seite haben will?

Ich habe dazu einen Ansatz zum Generieren einer Index-Seite wie folgt gewählt:

• ich möchte Gruppen: nach Programmiersprache oder nach einer sonstigen Rubrik
• in jeder Rubrik werden N Projekt-Dokumenationen verlinkt
• … wobei jene referenziert wird als Git-Repository, um diese mit Daux on the fly generieren zu lassen
• … oder aber: weil ich noch meine geparsten Dokumentationen habe: ich kann anderweitig bestehende Dokumentationen ebenfalls einbetten
• die Index-Seite soll flexibel sein und verschiedene Templates/ CSS/ Javascritpt unterstützen

Ich habe dazu ein Bash-Skript geschrieben, das mit jq eine JSON Config-Datei parst und mittels eines Templates die Seitenelemente generieren lässt. Die Flexibilität steckt in den Templates - dese bestimmen, ob es ein

OK, all das ist zu viel Text … so sieht meine Übersichtsseite mit dem Template mit Gruppen und Boxen sieht so aus: Axels Docs

weiterführende Links: (en)

1. Axels Docs-Index-Seite
2. daux.io Hilfe-generator - Markdown zu HTML
3. Github: axelhahn/multidoc-generator
4. Statische Hilfe zum multidoc-generator
5. Mermaid.js

Matomo empfiehlt zum Tracken einer Webseite den Einbau des Codeschnipsels innerhalb des HTML Dokuments … im Head Bereich. [1]

Aber: das Hineinschreiben von Javascript Code in das HTML Dokument ist nicht so recht günstig, wenn man im CSP Security Header das Attribut script-src sicher und ohne unsafe-inline konfigurieren will. [3]

Die Abhilfe besteht darin, dass man [2]

1. das Snippet in eine Javascript Datei auslagert.
2. den Aufruf des Trackens im Onload Event einfügt - der ebenfalls in der Javascript-Datei ist und nicht im HTML-Code einer Webseite.

Hier einmal ist die Funktion embedTrackingCode benannt:

function embedTrackingCode() {
	var _paq = window._paq = window._paq || [];
	_paq.push(["trackPageView"]);
	_paq.push(["enableLinkTracking"]);

	var u="/matomo/";
	_paq.push(['setTrackerUrl', u+'matomo.php']);
	_paq.push(['setSiteId', 1]);

	var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
	g.defer=true; g.async=true; g.src=u+"matomo.js"; s.parentNode.insertBefore(g,s);    
}

… welche bei Abschluss des Ladevorgangs initialisiert wird:

window.onload = (event) => {
	embedTrackingCode();
};

Hinweis:

Wenn der Tracking Code in einer Javascript-Datei ist, muss man das Http-Caching der JS Datei bei einem expires= im Http Response Header beachten. Man ist u.U. nicht mehr so flexibel, wenn man den Code anpassen wollte, weil Browser das Javascript aus dem Cache nehmen, statt frisch vom Server die angepasste Version zu holen. Man kann per ETag cachen lassen … oder kann die JS-Datei mit Versionsnummer benennen.

weiterführende Links:

1. Matomo Guide: JavaScript Tracking Client (en)
2. Matomo Blog: Different ways of embedding the Matomo tracking code for faster website performance (en)
3. developer.mozilla.org: CSP Header - script-src (en)

Mein bisheriger Blog war über Jahre immer ein Custom style … aber eben nicht public.
Nun habe ich meinen erstes Theme für Flatpress veröffentlicht. Vom Look her ist es der klassische Blog Style mit einem hellen Theme als Basis. Wegen der Transparenzen taufte ich es “A Touch Of Glass”.

Warum überhaupt … es gibt ja bereits mehrere Themes?!

1. Mich stört in Flatpress, dass man den Filter auf einen Monat oder eine Kategorie nicht visualisiert hat. Ich hatte es bis anhin mit einem Hack gelöst. In diesem Theme ist es mit Javascript implementiert: In der Widget-Box ist es nun hervorgehoben als auch im Headerbereich sichtbar.
   
2. Mehrere Themes für ein 2 oder 3-Spalten-Layout? Das ist unnötig. Wer mag, darf es gern adaptieren. Im Flatpress-Backend platziert man Widgets in einzelne Bereiche. Von mind. 1 Widget benutzte Spalten werden angezeigt; ungenutzte nicht. Klingt banal. Und ist es per CSS an sich auch.
3. Es fehlen Icons. Naja, an allen Ecken und Enden. Ich habe im Theme per CDN Fontawesome eingebunden und an so einigen Stellen per CSS im Frontend als auch Backend integriert.
4. Ich wollte ein cooleres Backend. Es soll schliesslich auch 2019 Spass machen, einen neuen Blog-Eintrag zu machen.
   

Das Theme gibt etliche Rahmenbedingungen vor. Die Syles - 4 liefere ich einmal mit - sind nur noch extrem einfache CSS Dateien, die einige Default-Farben übersteuern.

Weitere Farb-Schemata zu erstellen wird zum Kinderspiel. Wer mag, kann sich eine style.css eines Farbschemas ansehen: es werden CSS Variablen definiert und diese in denjenigen CSS Selektoren angewendet, die übersteuert werden sollen.

Hey, wenn ihr es für gut befindet, empfehlt/ teilt es weiter :-)

UPDATE

• 19.06.2019: Es sind ein Freitextfilter mit Highligntning bei Kategorieen und auf- und zuklappbare Jahre im Archiv hinzugekommen. Ich hab es nun mal v1.0 genannt :-)
• 06.08.2019: Mein Twitter-Posting wurde auf dem Flatpress Channel eingefügt (s. Link [6])

weiterführende Links:

1. Github: Projekt Seite des Themes
2. Github: Theme A Touch Of Glass als ZIP
3. Flatpress.org Blogging Engine in PHP ohne Datenbank
4. Fontawesome Iconset
5. Twitter: Axels Tweet
6. Twitter: Flatpress Tweet … und Channel

Oh, was für eine kleine nette Überraschung: Das da bin ja ich :-)

Mit dieser Klasse wird bei einem Passwort-Feld ein Div eingeblendet. Darin wird die Erfüllung der vorgegebenen Bedingungen (z.B. Anzahl Zeichen, Gross-/ Kleinschreibung, Anzahl Sonderzeichen) dargestellt - on the fly während der Passworteingabe.

Diese Klasse ist Freie Software und Open Source.

weiterführende Links:

1. Axels Webseite: ahPwcheck
2. Docs: Password checker (en)
3. jsclasses.org: AH JavaScript Password Strength Check: Calculate and display the strength of a password (en)

Ich weiss ja auch nicht, was mich vor ein paar Jahre geritten hat, Oberfläche und CSS von Hand und selbst erstellen zu wollen. Weil es schlank ist. Aber eben nicht produktiv.

Nun habe ich die GUI auf AdminLTE portiert - und mir für die benötigten Elemente in AdminLTE die notwendigen Abstraktionen geschrieben. Nun ist es deutlich aufgeräumter!

GUI-Kram kann schon ziemlich lästig sein. Ich bin froh, bin ich damit durch. Nun kann ich mich wieder auf das Implementieren echter Features konzentrieren.

weiterführende Links:

1. Github: IML Appmonitor
2. AdminLTE Demo Seite
3. Docs: os-docs.iml.unibe.ch/appmonitor/

Am Wochenende habe ich v0.33 meines Html 5 Audioplayers freigegeben.
Funktional soll es das erst einmal sein, was ich mir für Version 1 vorstelle. Nun erledige ich ein wenig Code Cleanup.

Und vielleicht noch eine kleine Skin Datei. Eine in einer Art flat Design habe ich da schon mal in Vorbereitung:

… und auch ein Dark Theme

Beide sind noch nicht im Repo verfügbar … seht es als Preview :-)

Updates:

1. 22.11.2018 - ein dunkles Theme hinzugefügt

weiterführende Links:

1. Axels Webseite
2. Dokumentation (en)
3. Git-Repository (en)

Der auf meiner Webseite eingebundene Surround Audioplayer kommt der Version 1 immer näher.
In den letzten Tagen kam ein Feature zur Integration und Anzeige von Songinfos+Coverbild hinzu. Get-Funktionen in der API entsprechend auch.
Und so einige kleine Unschönheiten wuden ausgebügelt.

Natürlich kann der Player auch für stereo Medien verwendet werden.

Aktuell schreibe ich an Erweiterungen, die es erlauben, Radiostreams einzubinden - analog mit denselben Metadaten und einem Coverbild. Streams oder Audiodateien sollen automatisch erkannt werden - man könnte so Mediadateien und Streams mischen. Entsprechend Medientyp sollen sich die Steuerelemente und dieFortschrittsanzeige anpassen.

weiterführende Links:

1. Axels Webseite
2. Dokumentation (en)
3. Git-Repository (en)

Ab und an brauche ich es mal … und daher ergänze ich hier ein weiteres Snippet.

/**
 * get query parameters from url as object
 * @returns {object}
 */
function getQueryParams() {
    qs = document.location.search.split('+').join(' ');

    var params = {},
            tokens,
            re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

Beispiel:

// to get values from current request
// https://example.com/path/index.html?parameter1=foo&parameter2=bar
var oQuery=getQueryParams();
console.log(oQuery.parameter1); // foo
console.log(oQuery.parameter2); // bar

Es entsteht gerade eine weitere Demo Seite zu Html 5 Audio:
Nach Eingabe einer beliebigen Audio URL wird diese als Source eines Audio Tags verwendet.
An dieses Audio Tag werden alle dokumentierten Events angeklebt und man kann bei den Interna eines Audio Tags zuschauen und wann welche Events abgesetzt werden.

Sie erscheinen zum einen rechts als Log (mit Zeitangabe in Millisekunden seit Laden der Seite). Damit kann man z.B. messen, wie lange ein Audio laden muss, bis es abgespielt werden kann (readyState=4).

Unten ist die Liste aller Events, die bei Absetzen hervorgehoben werden … und nach und nach schwächer verfärbt sind.

weiterführende Links:

1. Demo-Seite: Html5 Audio debugger