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