Posts on besserentwickeln.de

Proxy per IP-Selbsttest finden

Mon, 28 Sep 2026 00:00:00 +0000

Wenn eine Anwendung wie für jeden Request dieselbe IP protokolliert oder Rate-Limits plötzlich alle Nutzer gleichzeitig treffen, steht oft ein Proxy oder Load Balancer zwischen Client und Server. Ob das so ist, und welche IP dieser Proxy hat, lässt sich mit einem einfachen Selbsttest herausfinden.

Die Idee

Du kennst deine eigene öffentliche IP. Du schickst einen Request an den Server und schaust nach, welche IP dort protokolliert wurde.

Beide IPs stimmen überein: Die Anwendung sieht die echte Client-IP. Entweder steht kein Proxy dazwischen oder er wird bereits korrekt ausgewertet.
Im Log steht eine andere IP: Du hast den Proxy gefunden und siehst direkt seine IP.

Eigene IP ermitteln und Request senden

Auf deinem Rechner:

1
2


curl -s https://api.ipify.org
curl -s -o /dev/null -w '%{http_code}\n' https://example.com/ip-probe-a1b2c3

Der erste Befehl gibt deine öffentliche IP aus. Die zweite URL existiert nicht – sie liefert einen 404 und löst keinerlei Fachlogik aus. Der eindeutige Pfad sorgt dafür, dass du die Zeile im Log später sicher wiederfindest.

Access-Log auf dem Server prüfen

Per SSH auf den Server verbinden:

1

ssh user@example.com

Das Access-Log finden – der Pfad hängt vom Hoster ab:

1

ls -la ~/logs/ /var/log/nginx/ /var/log/apache2/ 2>/dev/null

Und die passende Zeile heraussuchen:

1

grep ip-probe-a1b2c3 ~/logs/*access*.log | tail -5

Die IP am Anfang der Zeile vergleichst du nun mit der Ausgabe von api.ipify.org.

Optimierungen

Hast du Ergänzungen oder einen besseren Weg? Schreib mir gerne eine Mail an optimierungen@besserentwickeln.de

Datei aus dem letzten Commit entfernen, Inhalt aber behalten

Tue, 15 Sep 2026 00:00:00 +0000

Man committet und merkt danach, dass eine Datei im Commit gelandet ist, die dort nichts zu suchen hat. Die Änderung selbst will man aber behalten.

How To

Die Datei aus dem Commit-Inhalt lösen, ihren aktuellen Inhalt aber behalten:

1
2


git restore --source=HEAD~1 --staged myFile.php
git commit --amend --no-edit

git restore --source=HEAD~1 --staged setzt die Datei im Index auf den Stand vor dem Commit zurück. Das Arbeitsverzeichnis bleibt dabei unangetastet. Der Inhalt der Datei geht also nicht verloren. Das anschließende git commit --amend --no-edit schreibt den Commit ohne die Datei neu, die Commit-Message bleibt unverändert.

Ergebnis

Der bisherige Commit wird durch einen neuen Commit ohne die README ersetzt. Die Datei taucht danach wieder als unstaged Änderung in git status auf.

Wichtig: --amend erzeugt einen neuen Commit-Hash. Wenn der alte Commit bereits gepusht wurde, braucht es einen Force-Push.

Verifikation

1
2


git show --stat HEAD
git status -s

git show --stat HEAD zeigt, welche Dateien tatsächlich im Commit stecken — die entfernte Datei darf hier nicht mehr auftauchen. git status -s zeigt sie dagegen wieder als Änderung im Arbeitsverzeichnis.

Formulare dauerhaft per DevTools Snippet blockieren

Tue, 07 Apr 2026 00:00:00 +0000

Manchmal möchte man beim Entwickeln oder Debuggen verhindern, dass ein Formular abgeschickt wird – ohne jedes Mal den Quellcode anzupassen oder einen Breakpoint zu setzen. Als DevTools Snippet lässt sich das einmal ablegen und dann nach jedem Seitenladen mit einem Klick erneut ausführen.

Snippet anlegen

Im Chrome DevTools unter Sources → Snippets ein neues Snippet erstellen und folgenden Code einfügen:

1
2
3


document.addEventListener("submit", e => {
 e.preventDefault();
}, true);

Anschließend mit Strg + Enter (bzw. Cmd + Enter) ausführen.

Warum das funktioniert

Global – der Listener hängt am document und greift damit auf alle Formulare der Seite.
Capture-Phase (true) – der Listener läuft, bevor der Event die Handler am Formular selbst erreicht. e.preventDefault() unterbindet dann das Standardverhalten des Browsers, also das eigentliche Abschicken bzw. das Neuladen der Seite.

preventDefault() stoppt allerdings nicht die weitere Ausbreitung des Events – Handler von React, Vue & Co. laufen trotzdem noch. Solange die nur den nativen Submit abfangen, ist das egal. Verschickt ein Framework-Handler die Daten aber selbst per fetch/XMLHttpRequest, muss man die Ausbreitung zusätzlich unterbinden:

1
2
3
4


document.addEventListener("submit", e => {
 e.preventDefault();
 e.stopImmediatePropagation();
}, true);

Vorteil gegenüber Breakpoints

Ein Snippet ist schnell ausgeführt, muss nicht jedes Mal neu konfiguriert werden und lässt sich problemlos erweitern – zum Beispiel um ein console.log, das die Formulardaten ausgibt:

1
2
3
4


document.addEventListener("submit", e => {
 e.preventDefault();
 console.log("Form submit blocked:", e.target);
}, true);

So sieht man sofort, welches Formular betroffen wäre, ohne dass eine Anfrage rausgeht.

Schnelle Alternative: Console

Wer das nur einmalig ausprobieren möchte, kann den Code auch direkt in die Console (Tab Console) einfügen und mit Enter bestätigen. Der Effekt ist identisch. In beiden Fällen ist der Listener nach dem nächsten Seitenneuladen weg – der Unterschied: Das Snippet bleibt im DevTools gespeichert und lässt sich mit einem Klick erneut ausführen, während man den Console-Befehl jedes Mal neu einfügen muss.

Ai Commits in IDEs von Jetbrains

Wed, 02 Jul 2025 00:00:00 +0000

Seit einiger Zeit nutzte ich die meisten der built-in AI-Features von PhpStorm bzw. allgemein den IDEs von Jetbrains. Dabei auch die Funktion Commits via AI-Prompt zu erstellen.

Anforderung

Da ich mich in Vergangenheit versucht habe die meiste Zeit an die angular Git Commit Guidelines zu halten, war das auch das Ziel meines Prompts.

Der Prompt

1
2
3
4
5
6
7
8


Build the commit message after the following structure:
<type>(<scope>): <short summary>.
Types are: build|ci|docs|feat|fix|perf|refactor|test.
The scope is the commit scope,
one word for example "header".
Use camelCase for the scope if needed.
Summary in present tense.
Not capitalized. No period at the end.

Verwendung in PhpStorm

Damit der Prompt zum Einsatz kommen kann, fügt ihn an folgender Stelle ein.

Anschließend müsst ihr nur noch die Files auswählen die ihr commiten wollt und klickt auf den kleinen lila Strudel über der Box wo eure Commit-Message erscheinen soll

Resultat

Eure Commit-Messages sollten nun automatisch nach diesem Schema erstellt werden.

Optimierungen

Dieser kleine Guide ist relativ schnell entstanden, ich denke es gibt sicherlich noch mögliche Optimierungen. Wenn du etwas hast, lass es mich gerne wissen und schreib mir eine Mail an optimierungen@besserentwickeln.de

Twig Macros

Thu, 13 Mar 2025 00:00:00 +0000

Eine Einsteiger-Anleitung zu Twig Macros

Was sind Twig Macros?

Twig Macros sind wiederverwendbare Funktionen innerhalb von Twig-Templates. Sie helfen dabei, Code zu vereinfachen, indem sie Wiederholungen reduzieren und die Wartbarkeit verbessern – ähnlich wie Funktionen in Programmiersprachen.

Ein Macro definieren

Ein Twig Macro wird mit dem Tag {% macro %} definiert. Es kann, genau wie eine Funktion, Parameter entgegennehmen.

1
2
3


{% macro button(text, url, class) %}
 <a href="{{ url }}" class="btn {{ class }}">{{ text }}</a>
{% endmacro %}

Dieses Macro erzeugt eine Button-Komponente, die mehrfach mit unterschiedlichen Werten wiederverwendet werden kann.

Macros im selben Template verwenden

Auch innerhalb der Datei, in der das Macro definiert ist, muss es zuerst importiert werden. {% import _self as macros %} macht die eigenen Macros unter dem Namespace macros verfügbar:

1
2
3


{% import _self as macros %}

{{ macros.button('Click me', 'https://example.com', 'btn-primary') }}

Der frühere Aufruf über {{ _self.button(...) }} ist seit Twig 2.11 veraltet und funktioniert in Twig 3 (und damit in aktuellen Symfony-/Shopware-Versionen) nicht mehr.

Macros in einer separaten Datei speichern

Für eine bessere Organisation können Macros in einer separaten Datei (z. B. macros.twig) gespeichert und bei Bedarf importiert werden.

1
2
3


{% import 'macros.twig' as macros %}

{{ macros.button('Learn More', 'https://example.com', 'btn-secondary') }}

Vorteile von Twig Macros

Code-Wiederverwendung: Vermeidet das Duplizieren gleicher Strukturen.
Bessere Lesbarkeit: Hält Templates sauberer und strukturierter.
Einfache Wartung: Macros einmal aktualisieren und die Änderungen überall übernehmen.

Deployment einer statischen Seite

Tue, 11 Mar 2025 00:00:00 +0000

In diesem Blogpost schauen wir uns an, wie wir eine einfache statische Seite via gitlab.com deployt.

Vorraussetzungen

Account bei gitlab.com
Ein Repository in welchem man Administrator ist
Git-Bash oder ein anderes Linux-Terminal, wenn auf Windows

SSH-Keys

Erstellen eines SSH-Keys

Um später den Gitlab-Runner zu berrechtigen, dass dieser per SSH auf den Ziel-Server zugreifen darf, erstellen wir ein neues Key-Pair, welches ausschließlich dafür verwendet wird.

Dieses Keypair erstellen ich nach dem vom Martin Leyrer empfohlenen Aufbau aus seinem Talk “Besser Leben mit SSH”.

1

ssh-keygen -t ed25519 -a 420 -f ~/your/own/path/id_ed25519 -C "foo@ba.de"

Bitte nicht vergessen den Pfad ~/your/own/path/... zu ersetzen, da ihr ansonsten, unter Umständenen euren bereits vorhanden SSH-Key durch den Deployment-Key ersetzt. Die Dummy-Mail foo@ba.de sollte ebenso durch eine passende von euch getauscht werden. Beispielsweise: deployment@euredomain.com oder noreply@euredomain.com.

Hinterlegen des SSH-Keys

Nachdem das Keypair erzeugt wurde, kann der Public-Key auf eurem Zielserver hinterlegt werden. Je nach Hoster kann dies über GUI oder per SSH/FTP geschehen.

Um euch den Public-Key auszugeben, könnt ihr im Terminal den cat-Befehl nutzen.

1

cat ~/path/to/your/key/id_ed25519.pub

Anschließend diesen bei eurem Hoster hinterlegen. Sollte das per SSH oder FTP geschehen, dann müsst ihr euren Public-Key in die authorized_keys kopieren, die findet ihr meist unter ~/.ssh/.

Repository auf dem Server auschecken

Mittels eines Deploy-Tokens werden wir unseren Ziel-Server berechtigen auf das Gitlab-Repository zuzugreifen.

Deploy Token erstellen

Um ein Token zu erstellen navigieren wir in Gitlab wie zu Settings > Repository > Deploy Token. Dort klicken wir auf Add token und erhalten die Ansicht aus dem Screenshot.

In dieser Ansicht vergeben wir einen Namen und Usernamen für das Token, sowie alle Leserechte. Schreibrechte werden in Regel nicht benötigt.

Nach Klick auf Create Deploy Token bekommen wir unseren gewählten Usernamen sowie ein zufälliges Passwort ausgegeben.

Git clone ausführen

Nun nachdem wir das Deploy-Token haben, können wir unser Repository auf dem Server auschecken. Dazu verbinden wir uns per SSH mit dem Server und klonen am gewünschten Ort unser Repository.

1

git clone https://tokenName:tokenPassword@gitlab.com/repo.git

gitlab-ci.yml anlegen

Nun legen wir die gitlab-ci.yml an und hinterlegen die notigen Variablen in Gitlab.

Nachfolgend habe ich ein Template vorbereitet, welches die Variablen SSH_PRIVATE_KEY und SSH_CONNECTION erwartet. Diese Variablen müssen in Gitlab in eurem Repository unter Settings > CI/CD > Variables hinterlegt werden.

Wenn diese Variablen hinterlegt sind, könnt ihr anschließende gitlab-ci.yml zu eurem Projekt hinzufügen. Diese ist so vorkonfiguriet, dass sie beim Merge nach dev auf euer DEV-System deployt und mittels release-... Tag auf live deployt.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


stages:
 - Deploy

deploy-dev:
 stage: Deploy
 rules:
 - if: '$CI_COMMIT_REF_NAME == "dev"'
 image: "edbizarro/gitlab-ci-pipeline-php:8.3"
 before_script:
 - eval $(ssh-agent -s)
 - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
 - mkdir -p ~/.ssh
 - chmod 700 ~/.ssh
 script:
 - ssh -o StrictHostKeyChecking=no "$SSH_CONNECTION" "cd /root-project-dir-dev/ && git fetch && git checkout dev && git pull"

deploy-live:
 stage: Deploy
 rules:
 - if: '$CI_COMMIT_TAG =~ /release-.*/'
 image: "edbizarro/gitlab-ci-pipeline-php:8.3"
 before_script:
 - eval $(ssh-agent -s)
 - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
 - mkdir -p ~/.ssh
 - chmod 700 ~/.ssh
 script:
 - ssh -o StrictHostKeyChecking=no "$SSH_CONNECTION" "cd /root-project-dir-live/ && git fetch && git checkout $CI_COMMIT_TAG"

Symbolische Links unter Linux erstellen: Eine sichere und effektive Anleitung

Tue, 11 Mar 2025 00:00:00 +0000

Symbolische Links unter Linux erstellen: Eine sichere und effektive Anleitung

Symbolische Links (Symlinks) sind eine mächtige Funktion unter Linux, mit der du Verknüpfungen zu Dateien oder Verzeichnissen erstellen kannst. Das kann die Dateiverwaltung effizienter und flexibler machen. In dieser Anleitung schauen wir uns an, wie man Symlinks sicher erstellt und dabei häufige Fallstricke vermeidet.

Was ist ein symbolischer Link?

Ein symbolischer Link ist eine spezielle Art von Datei, die auf eine andere Datei oder ein anderes Verzeichnis verweist. Anders als Hardlinks, die auf denselben Inode wie die Originaldatei verweisen, speichern Symlinks lediglich den Pfad zum Ziel. Das macht sie besonders nützlich, um Dateien über verschiedene Speicherorte hinweg zu organisieren.

Wie man einen symbolischen Link erstellt

Um unter Linux einen symbolischen Link zu erstellen, wird der Befehl ln -s mit folgender Syntax verwendet:

1

ln -s [target] [link_name]

Um zum Beispiel einen Symlink für ein Verzeichnis unter /home/user/documents/ auf dem Desktop zu erstellen, führst du aus:

1

ln -s /home/user/documents/ /home/user/Desktop/documents

Das erstellt eine Verknüpfung zum Verzeichnis documents auf dem Desktop, während das ursprüngliche Verzeichnis unverändert bleibt.

Best Practices für die sichere Nutzung von Symlinks

Um Fehler zu vermeiden und Zuverlässigkeit sicherzustellen, sollten folgende Best Practices befolgt werden:

Zielpfad überprüfen Bevor ein Symlink erstellt wird, sicherstellen, dass die Zieldatei oder das Zielverzeichnis existiert. Dazu Befehle wie ls oder file nutzen:
1

ls -l /home/user/documents/
Absolute Pfade verwenden Relative Pfade funktionieren zwar auch, aber absolute Pfade sorgen für Konsistenz und verhindern Probleme, falls der Symlink in unterschiedlichen Kontexten verwendet wird.
Auf bestehende Dateien oder Links prüfen Sicherstellen, dass am Zielort nicht bereits eine Datei oder ein Verzeichnis mit demselben Namen existiert. Falls nötig, die vorhandene Datei vor dem Erstellen des Symlinks umbenennen oder entfernen:
1

rm -r /home/user/Desktop/documents
Den Symlink testen Nach der Erstellung prüfen, ob der Symlink korrekt funktioniert:
1

ls -l /home/user/Desktop/documents
Wird das Zielverzeichnis gelöscht, ist der Symlink defekt (er erscheint in den meisten Terminals rot). Einen defekten Symlink kannst du entfernen mit:
1

rm /home/user/Desktop/documents

Häufige Anwendungsfälle für Symlinks

Konfigurationsdateien organisieren: Symlinks zu häufig genutzten Konfigurationsdateien erstellen, die zentral gespeichert sind.
Softwareentwicklung: Symlinks nutzen, um verschiedene Versionen von Bibliotheken zu verwalten, ohne Pfade zu ändern.
Geteilte Ordner: Gemeinsam genutzte Verzeichnisse mit Benutzer-Home-Verzeichnissen verknüpfen für schnellen Zugriff.

Fazit

Symbolische Links sind ein einfaches, aber mächtiges Werkzeug für effizientes Dateimanagement unter Linux. Wer sich an Best Practices hält, sorgt dafür, dass die eigenen Symlinks zuverlässig und effektiv bleiben. Egal ob für Organisation, Komfort oder Systemkonfiguration – Symlinks können den eigenen Workflow deutlich verbessern.

Bootstrap Spacing

Sat, 01 Mar 2025 00:00:00 +0000

SCSS-Spacer in Bootstrap verstehen

Beim Arbeiten mit Bootstrap ist Spacing ein entscheidender Aspekt für gut strukturierte und optisch ansprechende Layouts. Bootstrap bietet ein flexibles System zur Handhabung von Abständen mithilfe von SCSS-Variablen. In diesem Artikel schauen wir uns die SCSS-Spacer in Bootstrap an, wie sie funktionieren und wie du sie effektiv einsetzen kannst.

Was sind SCSS-Spacer?

Spacer in Bootstrap sind vordefinierte Werte für Margins (m-*-Klassen) und Paddings (p-*-Klassen). Diese Werte basieren auf der Variable $spacer und ermöglichen ein konsistentes Spacing-System im gesamten Projekt.

So definiert Bootstrap den Basis-Spacer:

1

$spacer: 1rem !default; // Standard-Spacer (bei 16px Root-Font-Size also 16px)

Alle weiteren Abstufungen leitet Bootstrap daraus in der $spacers-Map ab. Eigene Variablen wie $spacer-lg oder $spacer-sm gibt es in Bootstrap nicht – man arbeitet direkt mit $spacer (bzw. Vielfachen davon) und der Map.

Bootstraps `$spacers`-Map

Bootstrap nutzt außerdem eine SCSS-Map, um Spacing-Werte dynamisch zu definieren. So sieht das aus:

1
2
3
4
5
6
7
8


$spacers: (
 0: 0,
 1: $spacer * .25, // 0.25rem (4px)
 2: $spacer * .5, // 0.5rem (8px)
 3: $spacer, // 1rem (16px)
 4: $spacer * 1.5, // 1.5rem (24px)
 5: $spacer * 3, // 3rem (48px)
) !default;

Diese Map ermöglicht es Bootstrap, Utility-Klassen zu erzeugen wie:

.m-1 → margin: .25rem; (4px)
.p-3 → padding: 1rem; (16px)
.m-5 → margin: 3rem; (48px)

Wie man Bootstrap-Spacer in SCSS verwendet

1. `$spacer` direkt verwenden

Du kannst den $spacer (bzw. Vielfache davon) direkt in deinen Styles verwenden:

1
2
3
4


.my-section {
 padding: $spacer * 2; // 2rem (32px)
 margin-bottom: $spacer * .5; // 0.5rem (8px)
}

2. `map-get` verwenden, um Spacing-Werte abzurufen

Um Werte dynamisch aus der $spacers-Map zu holen, nutzt man map-get:

1
2
3


.my-box {
 padding: map-get($spacers, 3); // Entspricht $spacer (16px)
}

3. Dynamische Spacing-Klassen generieren

Du kannst eine Schleife erstellen, um eigene Spacing-Utility-Klassen zu generieren:

1
2
3
4
5
6
7
8


@each $key, $value in $spacers {
 .custom-m-#{$key} {
 margin: $value;
 }
 .custom-p-#{$key} {
 padding: $value;
 }
}

Das erzeugt:

1
2


.custom-m-1 { margin: 0.25rem; }
.custom-p-3 { padding: 1rem; }

Warum SCSS-Spacer verwenden?

Konsistenz – Sorgt für einheitliches Spacing im gesamten Projekt.
Anpassbarkeit – Du kannst die $spacer-Werte an dein Designsystem anpassen.
Effizienz – Reduziert repetitiven Code und verbessert die Wartbarkeit.

Fazit

SCSS-Spacer in Bootstrap bieten eine leistungsstarke Möglichkeit, Abstände effizient zu verwalten. Durch die Verwendung vordefinierter Variablen und Maps kannst du ein konsistentes Design beibehalten und gleichzeitig dein CSS sauber und skalierbar halten. Egal ob direkt in SCSS oder über Bootstraps Utility-Klassen genutzt – Spacer helfen dabei, deinen Layout-Workflow zu vereinfachen.

Brauchst du ein individuelleres Spacing-System? Passe die $spacer-Variable an die Anforderungen deines Projekts an und erstelle deine eigenen Spacing-Utilities! 🚀

readme.so

Sat, 01 Mar 2025 00:00:00 +0000

README-Erstellung vereinfachen mit readme.so

Eine gut strukturierte und informative README-Datei zu erstellen ist für jedes Projekt essenziell, egal ob es sich um ein Open-Source-Repository, ein persönliches Projekt oder eine Team-Zusammenarbeit handelt. Ein README manuell zu formatieren und zu strukturieren kann jedoch zeitaufwendig und herausfordernd sein, besonders für alle, die mit der Markdown-Syntax nicht vertraut sind. Hier kommt readme.so ins Spiel — ein einfaches, aber leistungsstarkes Tool, das die README-Erstellung schnell und einfach macht.

Was ist readme.so?

readme.so ist ein intuitiver, webbasierter Editor, mit dem README-Dateien mühelos erstellt und bearbeitet werden können. Er bietet eine übersichtliche Oberfläche mit vordefinierten Abschnitten, die je nach Bedarf hinzugefügt oder entfernt werden können. Das Tool ist besonders nützlich für Entwickler und Projektbetreuer, die ein professionell aussehendes README erstellen möchten, ohne übermäßig viel Zeit mit der Formatierung zu verbringen.

Hauptfunktionen

Drag-and-Drop-Oberfläche: Abschnitte wie Installation, Nutzung, Contributing, Lizenz und mehr einfach hinzufügen, umsortieren oder entfernen.
Markdown-Unterstützung: Inhalte direkt in Markdown mit Echtzeit-Vorschau bearbeiten.
Vorgefertigte Vorlagen: Schnell mit gängigen README-Strukturen starten.
Anpassung: Überschriften, Beschreibungen und Anweisungen an die Bedürfnisse des Projekts anpassen.
Export mit einem Klick: Die README-Datei sofort im Markdown-Format herunterladen.

Warum readme.so verwenden?

Zeitersparnis – Statt eine README-Datei manuell zu strukturieren und zu formatieren, können die vorgefertigten Abschnitte genutzt werden, um schnell Inhalte zu erzeugen.
Anfängerfreundlich – Es sind keine Markdown-Vorkenntnisse nötig, wodurch das Tool für alle zugänglich ist.
Bessere Dokumentation – Eine gut strukturierte README verbessert die Nutzererfahrung und hilft anderen, das Projekt besser zu verstehen.
Kostenlos – Das Tool ist völlig kostenlos und erfordert keine Anmeldung.

Erste Schritte

readme.so besuchen.
Abschnitte für das README auswählen.
Die Inhalte direkt im Editor bearbeiten.
Die Änderungen in Echtzeit als Vorschau ansehen.
Die README-Datei exportieren und speichern.

Fazit

Ein gut geschriebenes README ist für jedes Projekt entscheidend, und readme.so macht diesen Prozess einfacher als je zuvor. Egal ob erfahrener Entwickler oder Anfänger — dieses Tool hilft dabei, in wenigen Minuten eine professionelle, gut strukturierte Dokumentation zu erstellen. Einfach mal ausprobieren und die Projektdokumentation optimieren!

Hast du readme.so schon einmal genutzt? Teile deine Erfahrung in den Kommentaren!

Dateifreigabe lokal via Python

Fri, 21 Feb 2025 00:00:00 +0000

Dateien lokal via Python teilen: Kurze und einfache Anleitung

Warum Python für lokale Dateifreigabe nutzen?

Pythons integrierter HTTP-Server bietet eine einfache und effiziente Möglichkeit, Dateien innerhalb eines lokalen Netzwerks zu teilen. Es wird keine zusätzliche Software benötigt, was ihn zu einer schlanken und effektiven Lösung für schnelle Dateiübertragungen macht.

Voraussetzungen: Python auf deinem System installieren

Vor dem Fortfahren sicherstellen, dass Python installiert ist:

1

sudo apt update && sudo apt install -y python3

Wie man die lokale IP-Adresse findet

Um die lokale IP-Adresse herauszufinden, nutze:

1

hostname -I | awk '{print $1}'

Deine lokale IP sollte wie 192.168.xxx.xxx aussehen. Das ist wichtig, um von einem anderen Gerät auf die geteilten Dateien zugreifen zu können.

Schritt für Schritt: Den Python-HTTP-Server starten

Ein Terminal öffnen und in das Verzeichnis mit den Dateien wechseln, die geteilt werden sollen:
1

cd /path/to/your/files
Den Python-HTTP-Server starten:
1

python3 -m http.server 8000
Das startet einen einfachen HTTP-Server auf Port 8000, wodurch die Dateien im Verzeichnis über das lokale Netzwerk erreichbar werden.

Wie man von einem anderen Gerät auf die geteilten Dateien zugreift

Auf jedem Gerät im selben Netzwerk:

Einen Webbrowser öffnen.
Folgendes in die Adresszeile eingeben:
1

http://192.168.xxx.xxx:8000
(xxx.xxx durch die tatsächliche lokale IP-Adresse ersetzen.)

Best Practices für sichere lokale Dateifreigabe

Lokal bleiben: Diese Methode ist nur für lokale Netzwerke gedacht. Diesen Server niemals dem Internet aussetzen.
Port bei Bedarf ändern: Falls Port 8000 belegt ist, einen anderen wählen:
1

python3 -m http.server 8080
Interface gezielt wählen: --bind bestimmt, auf welcher Netzwerk-Schnittstelle der Server lauscht – z. B. nur im LAN und nicht über ein zusätzliches VPN:
1

python3 -m http.server 8000 --bind 192.168.xxx.xxx
Das begrenzt aber nicht, wer sich verbinden darf – jeder, der die Adresse erreicht, hat Zugriff. Für echte Zugriffsbeschränkung eine Firewall verwenden.

Fazit

Pythons integrierter HTTP-Server ist eine schnelle und effektive Möglichkeit, Dateien lokal zu teilen. Mit diesen Schritten kannst du Daten einfach zwischen Geräten übertragen, ohne zusätzliche Software. Speichere diese Anleitung für später!

SCSS - Padding und Margin verschachteln

Mon, 03 Feb 2025 00:00:00 +0000

Optimiertes SCSS-Nesting für sauberen und effizienten Code

Lerne, wie man SCSS-Nesting nutzt, um sauberere und besser strukturierte Styles zu schreiben. Der Standardansatz hält Eigenschaften organisiert, während Nesting hilft, die Übersichtlichkeit zu bewahren, indem verwandte Styles gruppiert werden. Verbessere Lesbarkeit und Wartbarkeit mit dieser einfachen SCSS-Technik! 🚀

Standard

1
2
3
4
5


.class {
 background-color: black;
 padding-top: 0.625rem;
 padding-bottom: 1.875rem;
}

Verschachtelt

1
2
3
4
5
6
7
8


.class {
 background-color: black;

 padding: {
 top: 0.625rem;
 bottom: 1.875rem;
 }
}

Beide Varianten kompilieren zum selben CSS (padding-top / padding-bottom). Die verschachtelte Schreibweise ist Sass-spezifisch (“nested properties”) und funktioniert weiterhin in Dart Sass.

ImageMagick Batch-Resize

Mon, 19 Dec 2022 00:00:00 +0000

Voraussetzung

ImageMagick

Installation

Debian/Ubuntu

1

sudo apt-get install imagemagick

MacOS/Brew

1

brew install imagemagick

Lösung

Dies in dem Verzeichnis mit den Bildern ausführen, die verkleinert werden sollen. Nicht vergessen, vorher ein Verzeichnis small-jpgs zu erstellen.

1

mogrify -path ../small-jpgs -resize 30% *

Es ist auch möglich, die Qualität zu reduzieren, indem man z. B. -quality 90 hinzufügt.

1

mogrify -path ../small-jpgs -quality 90 -resize 30% *

Und wenn gewünscht, kann sogar das Bildformat mit -format jpg geändert werden.

1

mogrify -path ../small-jpgs -quality 90 -format jpg -resize 30% *

M1 DDEV Chromium

Tue, 29 Nov 2022 00:00:00 +0000

Einer meiner Kollegen bekam auf seinem M1-Macbook beim Ausführen von bin/build-storefront.sh folgenden Fehler.

Fehlermeldung

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /var/www/html/vendor/shopware/storefront/Resources/app/storefront/node_modules/puppeteer
npm ERR! command failed
npm ERR! command sh /tmp/install-9c2094bf.sh
npm ERR! The chromium binary is not available for arm64.
npm ERR! If you are on Ubuntu, you can install with:
npm ERR!
npm ERR! sudo apt install chromium
npm ERR!
npm ERR!
npm ERR! sudo apt install chromium-browser
npm ERR!
npm ERR! /var/www/html/vendor/shopware/storefront/Resources/app/storefront/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115
npm ERR! throw new Error();
npm ERR! ^
npm ERR!
npm ERR! Error
npm ERR! at /var/www/html/vendor/shopware/storefront/Resources/app/storefront/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115:27
npm ERR! at FSReqCallback.oncomplete (node:fs:206:21)

Als Workaround haben wir --ignore-scripts --legacy-peer-deps zu jedem npm install bzw. npm clean-install in der build-storefront.sh hinzugefügt.

Shopware 6: Automatisiertes Security-Update mit GitLab

Thu, 25 Aug 2022 00:00:00 +0000

Diese Pipeline erstellt automatisch einen Merge Request mit einem Update des Shopware Security Plugins, basierend auf einem Tag.

Voraussetzungen

GitLab
Shopware 6 Composer-Setup

Variablen

SSH_DEPLOY_PRIVATE_KEY
- Der private Schlüssel eines erstellten Schlüsselpaars muss in dieser Variable gespeichert werden
- Der öffentliche Schlüssel muss unter „Settings > Repository > Deploy Key“ eingetragen werden
  - Nicht vergessen, Schreibrechte zu vergeben
SSH_KNOWN_HOSTS
- Diese aus der GitLab-Dokumentation entnehmen

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


stages:
 - security

securityUpdate:
 stage: security
 rules:
 - if: '$CI_COMMIT_TAG =~ /security-.*/'
 image: "kellerkinder/pipeline-image:8.0"
 before_script:
 - eval $(ssh-agent -s)
 - echo "${SSH_DEPLOY_PRIVATE_KEY}" | tr -d '\r' | ssh-add -
 - mkdir -p ~/.ssh && > ~/.ssh/known_hosts
 - echo "$SSH_KNOWN_HOSTS" >> ~/.ssh/known_hosts
 - chmod 700 ~/.ssh
 - git config user.name "security"
 - git config user.email "ci@example"
 - git remote remove origin || true
 - git remote add origin "git@gitlab.com:path/repo.git"
 script:
 - cd ${CI_PROJECT_DIR} && composer install --no-interaction --optimize-autoloader
 - composer update store.shopware.com/swagplatformsecurity
 - git checkout -b feature/security-patch-$(date +%F)
 - git add -A
 - |
 if git diff --cached --quiet; then
 echo "Kein Security-Update verfügbar – nichts zu committen."
 exit 0
 fi
 - git commit -m "Security Update $(date +%F)"
 - git push --set-upstream origin feature/security-patch-$(date +%F)

Beispiel-Tag

security-YYMMDD

History-Format

Wed, 08 Jun 2022 00:00:00 +0000

Der History einen Zeitstempel für den Befehlsverlauf hinzufügen (nur für die aktuelle Terminal-Sitzung) mit folgendem Befehl:

HISTTIMEFORMAT="%F %T "

Jetzt history eingeben, und du solltest Zeitstempel bei deinen Bash-History-Befehlen sehen.

Quelle

MySQL: ANY command denied to user

Wed, 08 Jun 2022 00:00:00 +0000

MySQL ANY command denied to user

Fehler

1

ERROR 1142 (42000) at line 11215: ANY command denied to user 'db-user-exported'@'%' for table 'dummy'

Lösung

Eine Kopie erstellen

1

cp dev-dump.sql dev-dump-copy.sql

Alten Benutzer und alte DB ersetzen

Im Dump steckt der DEFINER des Quellsystems (im Fehler oben db-user-exported). Dieser wird auf den lokalen Benutzer bzw. die lokale DB umgeschrieben:

Alter Benutzer (im Dump): db-user-exported → Neuer Benutzer: db-user-target

Alte DB (im Dump): db-exported → Neue DB: db-target

Zuerst den spezifischeren Benutzernamen ersetzen, dann den DB-Namen:

1
2


sed -i 's/db-user-exported/db-user-target/g' dev-dump-copy.sql
sed -i 's/db-exported/db-target/g' dev-dump-copy.sql

Reimport

1

mysql -u db-user-target -p db-target < dev-dump-copy.sql

Alternative: nur Routinen und Trigger nachziehen

Wenn nur Stored Procedures, Functions und Trigger am Definer scheitern, importiert man den Rest normal (z. B. mit --force) und zieht diese Objekte separat aus der Quell-DB nach.

Aus der Quell-DB exportieren:

1

mysqldump --no-data --no-create-info --routines --triggers db-exported > routines-triggers.sql

Definer ersetzen:

1
2


sed -i 's/db-user-exported/db-user-target/g' routines-triggers.sql
sed -i 's/db-exported/db-target/g' routines-triggers.sql

In die Ziel-DB einspielen:

1

mysql -u db-user-target -p db-target < routines-triggers.sql

Nur die drei neuesten Dateien behalten

Tue, 24 May 2022 00:00:00 +0000

1

ls -t | sed -e '1,3d' | xargs -d '\n' -r rm

Was passiert hier?

ls -t listet alle Dateien im aktuellen Verzeichnis in absteigender Reihenfolge der Änderungszeit auf. Die zuletzt geänderten Dateien stehen zuerst, ein Dateiname pro Zeile.

sed -e '1,3d' löscht die ersten 3 Zeilen, also die 3 neuesten Dateien.

xargs -d '\n' -r rm liest die restlichen Zeilen, nimmt dabei \n als einziges Trennzeichen (so überstehen Dateinamen mit Leerzeichen) und hängt sie als Argumente an einen – bei sehr vielen Dateien auch mehrere – rm-Aufrufe an. -r verhindert, dass rm ohne Argumente läuft, falls es 3 oder weniger Dateien gibt.

xargs -d ist eine GNU-Erweiterung. Unter macOS/BSD stattdessen ls -t | tail -n +4 | tr '\n' '\0' | xargs -0 rm verwenden.

Quelle

Ubuntu Standard-Audiogerät

Thu, 15 Apr 2021 00:00:00 +0000

Ich habe ein wenig nach der Antwort gesucht und Folgendes gefunden: https://itectec.com/ubuntu/ubuntu-how-do-you-set-a-default-audio-output-device-in-ubuntu-18-04/

Ich speichere das hier ab, weil ich es garantiert irgendwann wieder suchen werde.

Ausführen: pactl list short sinks
Den Gerätenamen notieren, den man als Standard verwenden möchte
Ausführen: pactl set-default-sink <Your_Device_Name> Das sollte ohne Fehlermeldung funktionieren.
Die Anwendung „Startprogramme“ öffnen (sollte auf Ubuntu vorinstalliert sein)
Auf „Hinzufügen“ klicken
Dem Autostart-Eintrag einen Namen geben
Den Befehl von oben in das Befehlsfeld kopieren: pactl set-default-sink 'Your-Device-Name'
Auf „Speichern“ klicken.

Array-Methoden zum Hinzufügen und Entfernen von Elementen

Sat, 21 Mar 2020 00:00:00 +0000

Alle folgenden Methoden verändern das Array direkt (sie mutieren es):

.pop() entfernt das letzte Element eines Arrays und gibt es zurück. .shift() entfernt das erste Element eines Arrays und gibt es zurück.

.push() fügt ein Element am Ende des Arrays hinzu und gibt die neue Länge zurück. .unshift() fügt ein Element am Anfang des Arrays hinzu und gibt die neue Länge zurück.

.splice(1, 3) entfernt ab Index 1 drei Elemente aus dem Array und gibt die entfernten Elemente als neues Array zurück. Nicht zu verwechseln mit .slice(1, 3), das das Array unverändert lässt und nur eine Kopie des Ausschnitts (Index 1 bis 2) liefert.

Diese Methoden gehören übrigens nicht zu ES6 – .pop(), .shift(), .push(), .unshift() und .splice() sind schon seit ES3 (1999) Teil von JavaScript.

Posts on besserentwickeln.de

Proxy per IP-Selbsttest finden

Die Idee

Eigene IP ermitteln und Request senden

Access-Log auf dem Server prüfen

Optimierungen

Datei aus dem letzten Commit entfernen, Inhalt aber behalten

How To

Ergebnis

Verifikation

Formulare dauerhaft per DevTools Snippet blockieren

Snippet anlegen

Warum das funktioniert

Vorteil gegenüber Breakpoints

Schnelle Alternative: Console

Ai Commits in IDEs von Jetbrains

Anforderung

Der Prompt

Verwendung in PhpStorm

Resultat

Optimierungen

Twig Macros

Eine Einsteiger-Anleitung zu Twig Macros

Was sind Twig Macros?

Ein Macro definieren

Macros im selben Template verwenden

Macros in einer separaten Datei speichern

Vorteile von Twig Macros

Deployment einer statischen Seite

Vorraussetzungen

SSH-Keys

Erstellen eines SSH-Keys

Hinterlegen des SSH-Keys

Repository auf dem Server auschecken

Deploy Token erstellen

Git clone ausführen

gitlab-ci.yml anlegen

Symbolische Links unter Linux erstellen: Eine sichere und effektive Anleitung

Symbolische Links unter Linux erstellen: Eine sichere und effektive Anleitung

Was ist ein symbolischer Link?

Wie man einen symbolischen Link erstellt

Best Practices für die sichere Nutzung von Symlinks

Häufige Anwendungsfälle für Symlinks

Fazit

Bootstrap Spacing

SCSS-Spacer in Bootstrap verstehen

Was sind SCSS-Spacer?

Bootstraps $spacers-Map

Wie man Bootstrap-Spacer in SCSS verwendet

1. $spacer direkt verwenden

2. map-get verwenden, um Spacing-Werte abzurufen

3. Dynamische Spacing-Klassen generieren

Warum SCSS-Spacer verwenden?

Fazit

readme.so

Was ist readme.so?

Hauptfunktionen

Warum readme.so verwenden?

Erste Schritte

Fazit

Dateifreigabe lokal via Python

Dateien lokal via Python teilen: Kurze und einfache Anleitung

Warum Python für lokale Dateifreigabe nutzen?

Voraussetzungen: Python auf deinem System installieren

Wie man die lokale IP-Adresse findet

Schritt für Schritt: Den Python-HTTP-Server starten

Wie man von einem anderen Gerät auf die geteilten Dateien zugreift

Best Practices für sichere lokale Dateifreigabe

Fazit

SCSS - Padding und Margin verschachteln

Optimiertes SCSS-Nesting für sauberen und effizienten Code

Standard

Verschachtelt

ImageMagick Batch-Resize

Voraussetzung

Installation

Debian/Ubuntu

MacOS/Brew

Lösung

M1 DDEV Chromium

Bootstraps `$spacers`-Map

1. `$spacer` direkt verwenden

2. `map-get` verwenden, um Spacing-Werte abzurufen