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:

Notarvertrag für das Grundstück unterzeichnet

Bauantrag wurde beim Bauamt gestellt

Bauantrag wurde genehmigt

Entfernung alter Baumbestand

Bager auf dem Grundstück, Erdarbeiten

Errichtung Erdgeschoss/Dachgeschoss

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.