majiayu000 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>© 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