@@ -9,6 +18,15 @@
border: var(--border);
border-radius: var(--4px);
margin-top: var(--16px);
- padding: 0 var(--16px) var(--16px);
+ padding: var(--2px);
+ }
+
+ .label {
+ background-color: var(--color-border);
+ padding: 0.5em 1em;
+ }
+
+ .content {
+ margin: 1em;
}
diff --git a/src/components/CodeFigure.astro b/src/components/CodeFigure.astro
index 7bb4fab..2d4d8e3 100644
--- a/src/components/CodeFigure.astro
+++ b/src/components/CodeFigure.astro
@@ -3,7 +3,7 @@ const { label } = Astro.props;
---
diff --git a/src/components/Figure.astro b/src/components/Figure.astro
index fe9ef06..8260416 100644
--- a/src/components/Figure.astro
+++ b/src/components/Figure.astro
@@ -22,6 +22,6 @@ const { label } = Astro.props;
}
div {
- margin: var(--16px);
+ margin: 1em;
}
diff --git a/src/components/ImageFigure.astro b/src/components/ImageFigure.astro
index 5aaed04..4b817cc 100644
--- a/src/components/ImageFigure.astro
+++ b/src/components/ImageFigure.astro
@@ -26,7 +26,7 @@ const { alt = '', format = 'webp', src, quality = 'high' } = Astro.props;
figcaption {
flex-basis: 10em;
flex-grow: 1;
- margin-bottom: 1rem;
+ margin-bottom: 1em;
max-width: 40em;
text-wrap: pretty;
}
diff --git a/src/components/ImpactMapFigure.astro b/src/components/ImpactMapFigure.astro
index c873e34..6184f99 100644
--- a/src/components/ImpactMapFigure.astro
+++ b/src/components/ImpactMapFigure.astro
@@ -22,7 +22,7 @@ const { label } = Astro.props;
}
div {
- padding: var(--8px) var(--16px) var(--16px);
+ padding: 0.5em 1em 1em;
}
diff --git a/src/components/Writings.astro b/src/components/Writings.astro
index b180914..a0c4ccb 100644
--- a/src/components/Writings.astro
+++ b/src/components/Writings.astro
@@ -32,7 +32,7 @@ const posts = (await getCollection('writings'))
align-items: baseline;
display: flex;
flex-wrap: wrap;
- gap: var(--8px) var(--16px);
+ gap: 0.5em 1em;
margin: 0;
}
diff --git a/src/content/writings/2022-08-30-complexity.mdx b/src/content/writings/2022-08-30-complexity.mdx
index a34d5e1..4bd9002 100644
--- a/src/content/writings/2022-08-30-complexity.mdx
+++ b/src/content/writings/2022-08-30-complexity.mdx
@@ -16,6 +16,8 @@ This article outlines three warning signs to look out for, their effect on the u
2. [Warning: Loading indicators on page load](#warning-loading-indicators-on-page-load)
3. [Warning: Page does not reload or redirect when submitting a form](#warning-page-does-not-reload-or-redirect-when-submitting-a-form)
+---
+
## Warning: Paths after the hash (#) in the URL
Client-side routing is a technique meant to increase the speed of navigation by having JavaScript transform the page instead of waiting for a response from the server. This can be useful if the browser already has all the data it needs to render the page. However, this technique tends to create more problems than it solves, and it is difficult to correctly implement. As such, product teams should expand typical testing scenarios.
@@ -93,6 +95,8 @@ main.innerHTML = html;
```
+---
+
## Warning: Loading indicators on page load
A loading indicator is a useful way to inform the user that a system process is busy. However, if this occurs immediately after navigating to a new page, it likely means that JavaScript is requesting more data from the backend before rendering.
@@ -180,6 +184,8 @@ In the meantime, consider what on the page is truly interactive or needs dynamic
- Try rendering substantial sections of static content with the server.
- Try embedding multiple, small JavaScript apps on the page, only where dynamic content is needed.
+---
+
## Warning: Page does not reload or redirect when submitting a form
The default behavior of a form submission results in a call to the server. The server then responds with redirecting or reloading the page. Creating a new document may open that document. Purchasing a product may redirect the user to a confirmation page. Changing filters on a search page may reload the current page with the new applied values.
@@ -247,6 +253,8 @@ When the form is submitted with this GET method:
2. Without an explicit "action" attribute on the form, the query string is applied to the current page, causing a refresh.
3. The server renders the page with the requested data. That data could be embedded in the HTML (see the previous Warning section).
+---
+
## Conclusion
The maturity of the JavaScript language and its tools have opened incredible possibilities for developers and designers. However, in our effort to explore these technologies and techniques, we often overlook the fundamentals. In doing so, we:
diff --git a/src/content/writings/2023-10-31-impact.mdx b/src/content/writings/2023-10-31-impact.mdx
index d417e7e..58edbd3 100644
--- a/src/content/writings/2023-10-31-impact.mdx
+++ b/src/content/writings/2023-10-31-impact.mdx
@@ -8,8 +8,12 @@ import Aside from '@components/Aside.astro';
import ImageFigure from '@components/ImageFigure.astro';
import ImpactMapFigure from '@components/ImpactMapFigure.astro';
-