writing-web

Web Development (Simple, Modern)

Philosophy

HTML first - Semantic markup does the work
CSS second - Styling and layout
HTMX third - Server-driven interactivity
JS last - Only when nothing else works

Patterns

Semantic HTML

<header>
  <nav><a href="/">Home</a></nav>
</header>
<main>
  <h1>Title</h1>
  <article>Content</article>
</main>
<footer>&copy; 2024</footer>

Use native elements:

<button> for actions
<a> for navigation
<details>/<summary> for accordions
<dialog> for modals

Simple CSS

:root {
  --primary: #2563eb;
  --spacing: 1rem;
}

.container {
  display: grid;
  gap: var(--spacing);
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

HTMX (with Go)

<!-- Load content -->
<div hx-get="/items" hx-trigger="load"></div>

<!-- Form -->
<form hx-post="/create" hx-target="#result">
  <input name="title" required />
  <button>Create</button>
</form>

<!-- Delete with confirmation -->
<button hx-delete="/item/123" hx-confirm="Delete?">Delete</button>

<!-- CSRF token -->
<body hx-headers='{"X-CSRF-Token": "{{.Token}}"}'></body>

Minimal JS

// Only when HTML/CSS/HTMX can't do it
document.body.addEventListener("click", (e) => {
  if (e.target.matches("[data-copy]")) {
    navigator.clipboard.writeText(e.target.dataset.copy);
  }
});

Avoid

JS for things HTML can do (accordions, modals)
CSS for things HTML can do (form validation)
Fetch when HTMX works
Deep selector nesting
Wrapper div soup

writing-web

Web Development (Simple, Modern)

Philosophy

Patterns

Semantic HTML

Simple CSS

HTMX (with Go)

Minimal JS

Avoid

More from alexei-led/claude-code-config

brainstorming-ideas

refactoring-code

fixing-code

using-cloud-cli

evolving-config

committing-code