Start drafting article

src/components/CodeFigure.astro

@@ -4,7 +4,9 @@ const { label } = Astro.props;
 
 <figure>
 	{label && <figcaption>{label}</figcaption>}
-	<slot />
+	<div>
+		<slot />
+	</div>
 </figure>
 
 <style>
@@ -19,4 +21,8 @@ const { label } = Astro.props;
 		color: var(--color-base);
 		padding: 0.5em 1em;
 	}
+
+	div {
+		padding: 0 1em 1em;
+	}
 </style>

src/content/writings/2023-11-21-without-js.mdx

@@ -0,0 +1,92 @@
+---
+title: Imagine a web without JavaScript
+pubDate: 2023-11-21
+description: ""
+draft: true
+---
+
+import CodeFigure from "@components/CodeFigure.astro";
+
+The software teams I work with at Indiana University have primarily developed single-page applications (SPA) over the last 10 years. That is a long period of time to practice that pattern and learn from it. Two years ago, I published the article [*Warning signs of front-end complexity*](/2022-08-30/complexity) as a way to reflect on the problems encountered with this approach and to provide a way forward. Since then, I directed two software teams on migrating their single-page architecture to a multi-page architecture.
+
+During these projects, developers frequently ask me:
+
+> Should this be a link or a button?
+
+My most effective response is simply:
+
+> How would you build this if you could not use JavaScript?
+
+A JavaScript-less web relies on links and form submissions to handle all interactions with the server, resulting in a page refresh or redirect.
+
+Keys and values are shared to the server through the URL's query string.
+
+<CodeFigure>
+```html
+<a href="/search?page=1&sort=desc">Page 1</a>
+<a href="/search?page=2&sort=desc">Page 2</a>
+
+<form method="get" action="/search?sort=desc">
+</form>
+```
+</CodeFigure>
+
+Keys and values can also be shared to the server through form field `name` and `value` attributes.
+
+<CodeFigure>
+```html
+<form method="post">
+	<input type="text" name="query">
+</form>
+```
+</CodeFigure>
+
+## Create
+
+Use a form to create a resource.
+
+<CodeFigure>
+```html
+<form method="post" action="/tasks/add">
+	<input type="text" name="label" value="">
+	<button type="submit">Save</button>
+</form>
+```
+</CodeFigure>
+
+## Update
+
+Use a form to update a resource.
+
+<CodeFigure>
+```html
+<form method="post" action="/tasks/123">
+	<input type="text" name="label" value="Get groceries">
+	<button type="submit">Save</button>
+</form>
+```
+</CodeFigure>
+
+## Delete
+
+Use a form to delete a resource.
+
+<CodeFigure>
+```html
+<form method="post" action="/tasks">
+	<input type="hidden" name="id" value="123">
+	<button type="submit">Delete task</button>
+</form>
+```
+</CodeFigure>
+
+---
+
+- Links get complicated when they are used to do things meant for forms.
+- Forms get complicated when they are used to do things meant for links.
+- GET/POST/DELETE?
+- View/Update/Delete?
+- Pagination: List of links is more sensible than a bunch of forms.
+- Without JavaScript, user input can only be captured with form fields. You can't dynamically update a link's URL to make it work in the same way.
+- Progressive enhancement
+- JavaScript can make anything in HTML be effectly anything else in HTML. A button could be created from a link. A link could be created from a button. Either could be created from a `div`. However, just because we can doesn't mean we should.

src/styles/global.css

@@ -100,7 +100,6 @@ code,
 pre {
 	color: var(--color-code);
 	font-family: var(--font-mono);
-	margin: 0;
 	tab-size: 2;
 }
 
@@ -109,7 +108,11 @@ main {
 	margin-top: 2em;
 }
 
-figure {
+figure,
+ol,
+p,
+pre,
+ul {
 	margin: 1em 0 0;
 }
 
@@ -134,6 +137,11 @@ h3 {
 	margin: 1.5em 0 0;
 }
 
+hr {
+	border: var(--1px) solid var(--color-link);
+	margin: var(--32px) 0;
+}
+
 img {
 	max-width: 100%;
 	height: auto;
@@ -170,7 +178,6 @@ mark::after {
 
 ol,
 ul {
-	margin: 1em 0 0;
 	padding: 0 0 0 1.5em;
 }
 
@@ -179,14 +186,6 @@ ul ul {
 	margin-top: 0;
 }
 
-p {
-	margin: 1em 0 0;
-}
-
-pre {
-	padding: 1em;
-}
-
 pre > code {
 	all: unset;
 }