Frontend on besserentwickeln.de

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.

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! 🚀

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.

HTML - Details Tag

Wed, 27 Jul 2022 00:00:00 +0000

1
2
3
4


<details>
 <summary>Epcot Center</summary>
 <p>Epcot ist ein Themenpark im Walt Disney World Resort mit spannenden Attraktionen, internationalen Pavillons, preisgekröntem Feuerwerk und saisonalen Sonderveranstaltungen.</p>
</details>

Styling zum Head hinzufügen

Thu, 25 Nov 2021 00:00:00 +0000

1
2
3
4
5


const addStyle = () => {
 const style = document.createElement('style');
 document.head.append(style);
 return (styleString) => style.textContent = styleString;
})();

Icon-Farbe eines img mit src ändern

Wed, 29 Sep 2021 00:00:00 +0000

Da Hugo direktes HTML hier nicht mag. Statt des iFrames jetzt ein Link zum Codepen.

For-Loop

Fri, 02 Jul 2021 00:00:00 +0000

1
2
3


for (let i = 0, el = logoInner.length; i < el; i++) {
 element[i].innerHTML = 'Bing';
}

JavaScript ausführen, nachdem die Seite vollständig geladen ist

Fri, 25 Jun 2021 00:00:00 +0000

1
2
3


window.addEventListener("load", function(){
 // ....
});

Quelle

CSS :is() und :where()

Tue, 16 Mar 2021 00:00:00 +0000

Pseudoklassen, die ich häufiger verwenden sollte:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Wählt jeden Absatz innerhalb eines header-, main-
oder footer-Elements aus, der gerade gehovert wird */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

/* Das Obige ist gleichbedeutend mit dem Folgenden */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

Quelle

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Wählt jeden Absatz innerhalb eines header-, main-
 oder footer-Elements aus, der gerade gehovert wird */
:where(header, main, footer) p:hover {
 color: red;
 cursor: pointer;
}

/* Das Obige ist gleichbedeutend mit dem Folgenden */
header p:hover,
main p:hover,
footer p:hover {
 color: red;
 cursor: pointer;
}

Quelle

Eingabe muss eine Zahl enthalten

Mon, 15 Jun 2020 00:00:00 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


function validateStreet(e) {
 const streetNotice = document.getElementById('streetnotice');
 let currentvalue = e.value;
 let outputvalue = currentvalue.search(/\d/g);

 if (outputvalue === -1) {
 streetNotice.style.display = "block";
 } else {
 streetNotice.style.display = "none";
 }
}

Codepen

Destructuring Assignment

Tue, 02 Jun 2020 00:00:00 +0000

1
2


const temps = {yesterday: 70, today: 71, tomorrow: 72};
const {today: highToday, tomorrow: highTomorrow} = temps;

Zahl aus String extrahieren

Fri, 29 May 2020 00:00:00 +0000

1
2
3


let txt = "4br4k 4d4br4";
let num = txt.replace(/\D/g, "");
console.log(num);

CodePen

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.

Regex und .match()

Wed, 11 Mar 2020 00:00:00 +0000

Gestern etwas mit Regex und der match-Funktion gearbeitet. Link zum Codepen.

Prüfen, ob eine URL einen String aus einem Array enthält

Wed, 04 Mar 2020 00:00:00 +0000

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


let contains = false;

const array = ['imprint', 'data-protection', 'terms-of-use'];

const currentUrl = '/imprint'.toUpperCase();
// mit window.location.href ersetzen

array.forEach(function (item) {
 let currentItem = item.toUpperCase();

 if (currentUrl.includes(currentItem)) {
 contains = true;
 }
});

console.log(contains);

CodePen

Frontend on besserentwickeln.de

Formulare dauerhaft per DevTools Snippet blockieren

Snippet anlegen

Warum das funktioniert

Vorteil gegenüber Breakpoints

Schnelle Alternative: Console

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

SCSS - Padding und Margin verschachteln

Optimiertes SCSS-Nesting für sauberen und effizienten Code

Standard

Verschachtelt

HTML - Details Tag

Styling zum Head hinzufügen

Icon-Farbe eines img mit src ändern

For-Loop

JavaScript ausführen, nachdem die Seite vollständig geladen ist

CSS :is() und :where()

Eingabe muss eine Zahl enthalten

Destructuring Assignment

Zahl aus String extrahieren

Array-Methoden zum Hinzufügen und Entfernen von Elementen

Regex und .match()

Prüfen, ob eine URL einen String aus einem Array enthält

Bootstraps `$spacers`-Map

1. `$spacer` direkt verwenden

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