Grid

• 2D Layout
• Layout first

Flexbox

• 1D Layout
• Content first
• Verteilt freien Platz

Grid Beispiel

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-column-gap: .5em;
    grid-row-gap: .25em;

    div {
      background: lightblue;
      text-align: center;
    }

    .first { order: -1; }
  }
</style>
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="first">4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Grid Beispiel 2

<style>
.page {
    display: grid;
    grid-template:
        "header  header "  auto
        "nav     content"  2fr
        "nav     aside  "  1fr
        "footer  footer "  auto
        / 1fr 3fr;
    gap: .1rem;
    min-height: 500px;

    div {
        background-color: lightblue;
        align-content: center;
    }
}
.header  { grid-area: header; }
.nav     { grid-area: nav; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }
</style>
<div class="page">
    <div class="header">Header</div>
    <div class="nav">Nav</div>
    <div class="content">Content</div>
    <div class="aside">Aside</div>
    <div class="footer">Footer</div>
</div>

Flexbox Beispiel

<style>
.flex-container {
  display: flex;
  justify-content: /*
    space-between
    space-around
    space-evenly
    start
    center
    end */;
  border: 1px solid #ccc;

  .item {
    background: lightblue;
    min-width: 2em;
  }

  .first { order: -1; }
}
</style>

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item first">4</div>
</div>

Flexbox Beispiel 2

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: .1em;

    .item {
      background: lightblue;
      align-content: center;
      flex: 1;
      padding: .1rem;
      text-wrap: nowrap;
    }
  }
</style>

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <!-- ... -->
</div>

position: static

• default

position: relative

• verschiebbar mit top, bottom, left, right
• oft kombiniert mit absolute

position: absolute

• relativ zum nächsten Parent mit position != static
• Beispiel: Dropdown Menü, Tooltip

position: fixed

• relativ zum Viewport
• Beispiel: Cookie Banner

position: sticky

• normal wie relative
• bleibt bei Scrolling im Viewport
• Beispiel: Sticky Header

"Knowledge"

• Logik, Datenstrukturen, Contracts, Konstanten, Konfiguration, ...
• Kommentare, Dokumentation

Nicht "Knowledge"

• Caching, Logging, Optimierung
• Helper Funktionen
• Test Assertions
• Boilerplate

Arten von Duplikation

• Imposed duplication — Duplikation ist (scheint) notwendig
• Inadvertent duplication — Duplikation fällt nicht auf
• Impatient duplication — Duplikation ist einfacher als Refactoring
• Interdeveloper duplication — Jemand anderes hat das auch schon gemacht
• Incidental duplication — Es sieht aus wie Duplication, repräsentiert aber unterschiedliche Konzepte

"Incidental Duplication"

createActionGroup({
    source: '...',
    events: {
        'Init': emptyProps(),
        'Load Success': (items: Dto[]) => ({ items }),
        'Load Failure': errorProps(),

        'Create': emptyProps(),
        'Create Success': emptyProps(),
        'Create Failure': errorProps(),

        'Update': (id: number) => ({ id }),
        'Update Success': emptyProps(),
        'Update Failure': errorProps(),

        'Delete': (id: number) => ({ id }),
        'Delete Success': emptyProps(),
        'Delete Failure': errorProps(),
    },
});

Code Smells / Anti-Patterns

• Shotgun surgery
• Magic numbers / strings
• Parallel Inheritance Hierarchy
• Copy/Paste
• Kommentare ohne zusätzliche Informationen

Wie vermeide ich Duplikation?

• Methoden/Klassen extrahieren
• Vererbung, Interfaces
• Konstanten
• Value Objects
• Code Generator
• Refactoring

Verwandte Konzepte

• Rule of Three
• Avoid Hasty Abstractions (AHA)
• KISS, YAGNI, Beware of Premature Optimization
• Single Source of Truth (SSoT)
• Single Responsibility Principle (SRP)
• Open Closed Principle (OCP)
• Low Coupling, High Cohesion

What is the simplest thing that could possibly work?

You know you are working on clean code when each routine you read turns out to be pretty much what you expected

Kernprinzipien

• Fokus auf einfachen verständlichen Code
• Einfachheit über Cleverness
• Verständlichkeit vor Optimierung
• Vermeidung von Over Engineering
• Code sollte langweilig sein
• "Build the simplest thing that meets today's needs"
• "Defer abstraction until it clearly pays"

Code Smells / Anti-Patterns

• Interface mit nur einer Implementation (Speculative Generality)
• Abstraktion wegen Konvention
• Mehrfache Verschachtelung
• (unbeabsichtigte) Code Ownership
• Hero Culture

Verwandte Konzepte

• Beware of Premature Optimization
• Avoid Hasty Abstractions (AHA)
• You ain't gonna need it (YAGNI)
• Don't Repeat Yourself (DRY)
• Principle of Least Astonishment
• Minimal Viable Complexity

Negativ Beispiele

• Eine komplizierte Query statt mehrere simple
• Komplizierte Linq Ausdrücke statt einer simplen Schleife
• Komplizierte Architekturkonzepte, die niemand ohne Erklärung versteht
• Unnötige Komplexität durch Konvention
• Arbeiten gegen die Sprache / das Framework

Ansätze

• Beispiele erstellen
• Konventionen aus bestehendem Code
• Detaillierter Kontext der Aufgabe
• AGENTS.md
• Erst Plan erstellen, dann ausführen
• Alle relevanten Codestellen kommentieren
  ("Wo?" und "Was?", nicht "Wie?")
• Test First (Feedback loop)
• Iterative Teilaufgaben