DevCore.net

HTML

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

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

WebP: Das unterschätzte Bildformat

Das Problem: WebP spart ~30% Bandbreite gegenüber JPEG, findet aber wenig Anwendung.

Warum nicht mehr Websites WebP nutzen:

  1. Unwissenheit – Viele kennen WebP gar nicht
  2. Kompatibilität-Angst – "Was wenn alte Browser nicht unterstützen?" (Fallback ist einfach!)
  3. Workflow-Trägheit – Bestehendes Tooling müsste angepasst werden
  4. Wahrnehmung – Mythos: PNG/JPEG hätten bessere Qualität (stimmt nicht!)
<!-- So easy: Fallback für alte Browser -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

Browser-Support: 97%+ der modernen Browser. Kein Grund mehr zu warten!

Meine Faustregel: WebP für neue Projekte, schrittweise Migration für bestehende.

htmlssgperformance

Formularverarbeitung mit Array-Namen vereinfachen

Komplizierte Formularverarbeitung? Nutze HTML-Arrays!

<!-- HTML -->
<input name="user[name]">
<input name="user[email]">
<input name="product[sku][]">
<input name="product[sku][]">
// PHP - automatisch strukturiert!
$_POST['user']['name']        // "John"
$_POST['user']['email']       // "[email protected]"
$_POST['product']['sku'][0]   // "SKU123"
$_POST['product']['sku'][1]   // "SKU456"

Vorteil: Automatische Strukturierung, kein manuelles Parsing, weniger Code.

Gold-Regel: Immer $_POST validieren bevor du es nutzt!

htmlphpsimplify