Mit folgendem Codeblock kann man die Eingabe auf dem Input Feld mit der id=“supplier_iban“ bei Eingabe nach ISO 13616-1 und EBS 204 formatieren.

let el_supplier_iban = document.getElementById('supplier_iban');
						
el_supplier_iban.addEventListener('input', (event) => {
    
    let v = event.target.value.toUpperCase().replace(/ /g, '');
    let r = '';

    for (let i = 0; i < v.length; i ++) {
        
        r += v[i];
        
        if ((i + 1) % 4 === 0 && i > 0) r += ' ';
        
        
    }
    
    event.target.value = r.trim();
    
});

el_supplier_iban.dispatchEvent(new Event('input'));

Beispiel:

Siehe auch:

IBAN Validieren

Mit folgendem Hook der Action „add_meta_boxes“ kann der Reiter „AIOSEO – Settings“ des SEO Plugins „All in One SEO“ bei bestimmten Beitragstypen ausgeblendet werden.

Action registrieren z.B. in der functions.php des WordPress Themes:

#functions.php

\add_action('add_meta_boxes', ['ns\Actions', 'add_meta_boxes'], 100);

Dann in der geladenen Klasse

#Actions.class.php

abstract class Actions {

  public static function add_meta_boxes(): void {

    \remove_meta_box('aioseo-settings', ['protektor-quote', 'protektor-partner'], 'normal');

  }

}

Damit man z.b. die Pakete webcamjs unter MacOS nutzen kann, muss die App die Berechtigungen für die Kamera abfragen. Dies geschieht über die entitlements.mac.plist.

Diese Datei muss wie folgt gefüllt werden

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.device.camera</key>
    <true/> 
  </dict>
</plist>

Damit die Datei verwendet wird, muss in der package.json der Pfad definiert werden

..
"mac": {
    "hardenedRuntime": false,
    "entitlements": "entitlements.mac.plist",
    "extendInfo": {
        "LSMinimumSystemVersion": "10.12.6",
        "NSCameraUsageDescription": "Please give access to your webcam",
        "NSAppTransportSecurity": {
            "NSAllowsArbitraryLoads": true
        }
    }
}
..

Dann sollte die mit electron-builder gebaute App die Kameraberechtigung beim Start abfragen.

Um in einer Electron Anwendung auf Systembefehler wie für Netzwerk etc. zugreifen zu können muss man mit dem Eventsystem und dem icpRenderer arbeiten.

Von der HTML5 Oberfläche -> Systemschicht

/* preload.js */

const ipcRenderer = require('electron').ipcRenderer;

window.ipcRenderer = ipcRenderer;

/* app.vue */

window.ipcRenderer.invoke('scan_ip', {
    target: '127.0.0.1',
    port: this.port
});

/* main.js */
ipcMain.handle('scan_ip', (evt, arg) => {
  
  ...

});

Von der Systemschicht -> HTML5 Oberfläche

/* main.js */

mainWindow.webContents.send('network-event', arg);

/* src/index.js */
window.ipcRenderer.on('store-data', (event, store) => {

  ...

});

Mit folgender Funktion kann man einen Container so scrollen, das dass ausgewählte Element innerhalb des Containers sichtbar wird. Ich habe das ganze für Autocomplete Elemente genutzt.

let el_container = document.getElementById('container'); 
let e_element = document.getElementById('selected');

el_container.scrollTo({
    top: e_element.getBoundingClientRect().top - el_container.getBoundingClientRect().top + el_container.scrollTop
});

JSFiddle

Webkomponenten/Webcomponents sind HTML5 Elemente die sich leicht wiederverwenden lassen. Sie kapseln dabei HTML 5 Markup, Javascript und CSS Styles in einem „shadow Dom“ und laufen als isolierter Teil der Seite.

Ich habe eine Komponente entwickelt, die eine Firmengeschichte/Lebenslauf oder andere zeitliche Abläufe anschaulich und responsiv darstellt.

Beispiel:

Diese Ansicht wurde mit folgendem HTML5 Markup erzeugt:

<ds-history data-elementminwidth="200">
	<div data-title="Grundstücksbesichtigung" data-year="November 2020"></div> 
	<div data-title="Grundstückskauf" data-year="Dezember 2020">Notarvertrag für das Grundstück unterzeichnet</div> 
	<div data-title="Bauantrag" data-year="März 2021">Bauantrag wurde beim Bauamt gestellt</div> 
	<div data-title="Baugenehmigung" data-year="August 2021">Bauantrag wurde genehmigt</div> 
	<div data-title="Bauvorbereitung" data-year="September 2021">Entfernung alter Baumbestand</div> 
	<div data-title="Baubeginn" data-year="Oktober 2021">Bager auf dem Grundstück, Erdarbeiten</div> 
	<div data-title="Baufortschritt" data-year="Dezember 2021">Errichtung Erdgeschoss/Dachgeschoss</div> 
    <style>
        .ds_history .element > * { text-align:center;  } 
        .copyright a { color:#FFFFFF !important; }
    </style>
</ds-history>

<style>
    
    ds-history { margin:0.5rem 0; border: 1px solid white; padding:0.5rem; 
      --background-color:transparent;
      --line-color:white;
      --circle-color:white;
      --text-color:white;
      --arrow-color:white;
    }
    
</style>

<script src="https://daschmi.de/wp-content/plugins/ds_history/js/ds_history.component.js"></script>

Weitere Beispiele gibt es hier.

Um aus einem bestehenden Key, der z.B. unter Windows mit Putty(gen) generiert wurde einen Key zur Anmeldung mit einem SSH Clienten unter Linux/Unix zu machen kann man wie folgt vorgehen:

Putty Tools installieren (Beispiel Debian/Ubuntu)

sudo apt-get install putty-tools

Privater Putty Schlüssel private.ppk in SSH Schlüssel private.ssh umwalden

puttygen private.ppk -O private-openssh -o private.ssh

Öffentlicher Putty Schlüssel public.ppk in SSH Schlüssel public.ssh umwandeln

puttygen public.ppk -O public-openssh -o public.ssh

Im folgenden Codeblock ist dargestellt, wie man mit Javascript ein Event (click, change, input etc.) programmatisch auslösen kann.

let el = document.getElementById('select');

el.addEventListener('select', (event) => {
  ..
});

el.dispatchEvent(new Event('change'));

Mit folgender JavaScript Funktion kann man einzelne Bits einer Zahl vergleichen.

checkBit(hayStack, bit, needle) {
    
    return (hayStack >> (bit - 1) & 1) === needle;

}

Die Anwendung kann dann wie folgt erfolgen:

let b = checkBit(2, 0, 1); // false
let b = checkBit(3, 0, 1); // true

Mit folgender statischer Funktion kann die Dateigröße formatiert ausgegeben werden.

/**
 * Gibt die Dateigröße einer Datei formatiert zurück
 * @param mixed $size Dateigröße in Bytes der Datei
 */
public static function formatFileSize($size): string {
        
  if (is_string($size) && !is_numeric($size)) $size = filesize($size);

  $mod = 1024;

  $units = explode(' ', 'B KB MB GB TB PB');

  for ($i = 0; $size > $mod; $i++) {

    $size /= $mod;

  }

  return round($size, 2).' '.$units[$i];

}

Die Gleiche Funktion in Typescript/Javascript