Element braucht ein Margin Auto nach links!
margin-left: auto;Code-Sprache: HTTP (http)Autor: amoerke
CSS Grid Content Center
display: grid;
place-content: center;Code-Sprache: HTTP (http)JOINs in SQL
(INNER) JOIN: Returns records that have matching values in both tablesLEFT (OUTER) JOIN: Returns all records from the left table, and the matched records from the right tableRIGHT (OUTER) JOIN: Returns all records from the right table, and the matched records from the left tableFULL (OUTER) JOIN: Returns all records when there is a match in either left or right table
Git – Verschlüsselung RSA auf MacOS Ventura
Die Standardverschlüsselung unter MacOS Ventura hat sich geändert. Dementsprechend muss man, wenn man einen RSA-verschlüsselten Key benutzen möchte, die Verschlüsselung in der SSH-Config angeben.
Dazu trägt man in der ~/.ssh/config folgende Zeilen zusätzlich ein:
Host *
HostkeyAlgorithms +ssh-rsa
PubkeyAcceptedAlgorithms +ssh-rsaEnde-zu-Ende Verschlüsselung
Traditionell wird der Content der Webseite in der Datenbank gespeichert und kann vom Server in Klartext gelesen werden. Im Falle eines Serverhacks, bei dem die Datenbank ausgelesen werden kann, kann der Angreifer alle Inhalte aus der Datenbank abgreifen und lesen.
Wird Ende zu Ende verschlüsselt, landet der Inhalt selbst auch verschlüsselt in der Datenbank. Im Falle eines Angriffs und Daten-Highjacking sind die Daten verschlüsselt und für den Angreifer nutzlos.
Glücklicherweise ist die Web-Cryptography mittlerweile in allen gängigen Browsern nativ implementiert, sodass man diese nutzen kann.
Upload
- Zufälligen Schlüssel generieren mit dem der Inhalt verschlüsselt werden soll
const key = await window.crypto.subtle.generateKey(
{ name: "AES-GCM", length: 128 },
true, // extractable
["encrypt", "decrypt"],
);Code-Sprache: JavaScript (javascript)2. Inhalt mit Schlüssel verschlüsseln
const encrypted = await window.crypto.subtle.encrypt(
{ name: "AES-GCM", iv: new Uint8Array(12) /* don't reuse key! */ },
key,
new TextEncoder().encode(JSON.stringify(content)),
);Code-Sprache: JavaScript (javascript)3. Verschlüsselten Inhalt auf den Server hochladen
const response = await (
await fetch("/upload", {
method: "POST",
body: encrypted,
})
).json();Code-Sprache: JavaScript (javascript)4. Eine URL zum teilen des Inhaltes generieren (optional)
const objectURL = response.url;
const objectKey = (await window.crypto.subtle.exportKey("jwk", key)).k;
const url = objectURL + "#key=" + objectKey;Code-Sprache: JavaScript (javascript)Download
Die andere Seite ist der Download der Datei zurück vom Server
const response = await fetch(`/download?id={id}`);
const encrypted = await response.arrayBuffer();Code-Sprache: JavaScript (javascript)Der Schlüssel den wir kodiert in der URL im k-Feld des jwk-Objektes erhalten haben, stellt den eigentlichen Schlüssel dar. Um das Schlüsselobjekt zurück zu erhalten müssen wir dieses mit all seinen Feldern reproduzieren.
const objectKey = window.location.hash.slice("#key=".length);
const key = await window.crypto.subtle.importKey(
"jwk",
{
k: objectKey,
alg: "A128GCM",
ext: true,
key_ops: ["encrypt", "decrypt"],
kty: "oct",
},
{ name: "AES-GCM", length: 128 },
false, // extractable
["decrypt"],
);Code-Sprache: JavaScript (javascript)Wir entschlüsseln die Nachricht zurück zu einem String und konvertieren sie zurück in den ursprünglichen JSON-String
const decrypted = await window.crypto.subtle.decrypt(
{ name: "AES-GCM", iv: new Uint8Array(12) },
key,
encrypted,
);
const decoded = new window.TextDecoder().decode(new Uint8Array(decrypted));
const content = JSON.parse(decoded);Code-Sprache: JavaScript (javascript)Quelle: Excalidraw
Typescript vs. GraphQL Queries & Mutations
Da es müßig ist, für alle Queries und Mutations und deren Models Typen zu schreiben für GraphQL bietet sich ein Generator an.
Fündig geworden und für gut befunden bin ich bei GraphQL Code Generator
GraphQL Endpunkt in Verbindung mit MongoDB umsetzen
server/index.js
- Expressserver implementieren
- GraphQL Enpunkt als Middleware an den Expressserver binden
- MongoDB verbinden
- Expressserver starten
GraphQL-Schema implementieren
Mongoose Models implementieren
Mongoose Models in die GraphQL-Schema-Queries integrieren (Damit ist die MongoDB an die GraphQL-API angebunden!)
iOS Simulator – Video aufnehmen
xcrun simctl io booted recordVideo appVideo.movCode-Sprache: CSS (css)Resposive Text basierend auf Bildgröße
<div class="box">
<img>
<h1>Lorem ipsum dolor ..</h1>
</div>Code-Sprache: JavaScript (javascript).box {
display: inline-block;
}
h1 {
width: 0;
min-width: 100%;
}Code-Sprache: CSS (css)Die umgebene Box auf display-inline setzen, damit Sie die Größe Ihrer Kindelemente annimmt.
Die Überschrift, bzw. das Textelement auf width: 0 setzen, damit es nicht mehr automatisch die Breite des Eltern-Containers übernimmt.
Das Textelement (h1) auf min-width: 100% setzen, damit es die Größe des Bildes annimmt.
Docker CheatSheet
// Im Verzeichnis des Dockerfiles ausführen
docker build -t EIGENER_IMAGENAME .
// Container aus Image bauen und starten und nach stoppen löschen
docker run EIGENER_IMAGENAME -rm -d CONTAINER_NAME
// Benanntes Volume (wird nach löschen des Containers nicht gelöscht)
docker run EIGENER_IMAGENAME -v VOLUMENAME:PFAD_IM_CONTAINER CONTAINER_NAME
// Mount als Volume dabei wird /app/node_modules wenn schon vorhanden nicht überschrieben, weil es als anonymer Pfad aufgeführt wird
docker run -v PFAD_AUF_HOST_COMPUTER:/PFAD_IN_CONTAINER -v /app/node_modules -d CONTAINER_NAME
Code-Sprache: JavaScript (javascript)Volume-Arten Vergleich
