DevCore.net

Nested CSS: So benutzt du es

Nested CSS nutzt du direkt im Eltern-Block mit & für States, Klassen und Elemente.

.card {
  padding: 1rem;
  border: 1px solid var(--border);

  & h2 {
    margin: 0 0 0.5rem;
  }

  &:hover {
    border-color: var(--accent);
  }

  &.is-featured {
    background: var(--surface-highlight);
  }

  @media (min-width: 48rem) {
    padding: 1.5rem;
  }
}

Damit bleiben Elemente, Hover-State und Responsive-Anpassung direkt an der Komponente.
In manchen Fällen wird damit SCSS für genau solche Verschachtelungen obsolet.

htmlcsssimplify

Guard Clauses: Weniger Verschachtelung, klarere Logik

Die Idee: Prüfe Ausnahmefälle zuerst und verlasse die Funktion sofort. So bleibt alles sauber.

// ❌ Tief verschachtelt
function createInvoice(?User $user, array $items) {
    if ($user) {
        if ($user->isActive()) {
            if ($items) {
                return Invoice::fromItems($user, $items);
            }
        }
    }

    return null;
}

// ✅ Guard Clauses
function createInvoice(?User $user, array $items) {
    if (!$user) {
        return null;
    }

    if (!$user->isActive()) {
        return null;
    }

    if (!$items) {
        return null;
    }

    return Invoice::fromItems($user, $items);
}

Vorteil: Weniger Einrückung, schneller erfassbar, leichter zu testen.

phpsimplify

Honey Pot im Formular: Spam mit einem Feld vermeiden

Spam-Formulare kommen häufig automatisch zustande. Ein zusätzliches Feld, das Menschen nicht sehen (und Bots trotzdem ausfüllen), filtert gefühlt 98 % der Einsendungen, weil du die Verarbeitung sofort abbrichst, sobald das Feld Inhalt hat.

<input type="text" name="unused" aria-hidden="true" autocomplete="off" tabindex="-1" />
[name="unused"] { position: absolute; left: -9999px; }

Serverseitig reicht ein einfacher Check: läuft da was rein? Dann verwirfst du den Eintrag und sparst dir die komplexen „I’m not a robot“-Checkboxen, das JavaScript und externe APIs.

simplifysecurityhtml

Eleventy: schlankes SSG bei voller Kontrolle

Eleventy ist das perfekte SSG, wenn du mit Markdown, Nunjucks oder HTML schreiben willst und dir der Build nicht im Weg stehen soll. Du legst ein paar Markdown-Dateien, packst deine Assets daneben und lässt Eleventy rendern. Layouts oder Includes kannst du dazuschalten, aber sie sind optional der ganze Ablauf bleibt minimal.

Probiere es in 2 Schritten aus:

echo "Hello World" > index.md
npx @11ty/eleventy
ssgsimplifyperformance

User-Agent-Debugging mit geheimem Key

Wenn du im Frontend schnell debuggen willst, nutze einen geheimen Hash im User-Agent.

Nur wenn der Hash stimmt, gibt das Backend Debug-Infos aus (z. B. Timing, Cache-Hit/Miss, interne Steps).

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$token = $_ENV['UA_DEBUG_TOKEN'] ?? '';
$debug = $token !== '' && str_contains($ua, 'DevCoreDebug/' . $token);

if ($debug) {
    header('X-Debug-Info: ' . json_encode(['dbMs' => 42, 'cache' => 'MISS']));
}

Warum gut: Du erzeugst keinen Debug-Noise für normale User, siehst direkt im echten Frontend, was passiert, und kannst alles ohne extra UI-Flag aktivieren.

Wichtig: Das ist kein Security-Feature, sondern nur ein Debug-Schalter; gib keine sensiblen Daten aus und wechsle den Token regelmäßig.

phpsimplifydev-tricks