Refine style and use of hr

src/components/Aside.astro

@@ -1,6 +1,15 @@
+---
+import { uniqueId } from '@util/uniqueId';
+const { label } = Astro.props;
+const labelId = uniqueId();
+---
+
 <div class="u-grid-aside">
-	<aside>
-		<slot />
+	<aside aria-labelledby={label ? labelId : undefined}>
+		{label && <div id={labelId} class="label">{label}</div>}
+		<div class="content">
+			<slot />
+		</div>
 	</aside>
 </div>
 
@@ -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;
 	}
 </style>

src/components/CodeFigure.astro

@@ -3,7 +3,7 @@ const { label } = Astro.props;
 ---
 
 <figure>
-	{label && <figcaption>{label}</figcaption>}
+	{label && <figcaption set:html={label}></figcaption>}
 	<slot />
 </figure>
 

src/components/Figure.astro

@@ -22,6 +22,6 @@ const { label } = Astro.props;
 	}
 
 	div {
-		margin: var(--16px);
+		margin: 1em;
 	}
 </style>

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;
 	}

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;
 	}
 </style>
 

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;
 	}
 

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;
 ```
 </CodeFigure>
 
+---
+
 ## 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:

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';
 
-<Aside>
-**For more, see:** [Design with impact](https://github.com/basham/swit-workshop-impact) (2022, workshop)
+<Aside label="Impact maps series">
+1. Build the right thing with impact maps
+2. [Overcome assumptions with impact maps](/2023-11-07/assumptions)
+3. [Practice with impact maps](/2023-11-14/practice)
+
+Workshop: [Design with impact](https://github.com/basham/swit-workshop-impact) (2022)
 </Aside>
 
 Impact maps can be a useful technique for anyone trying to achieve a goal. They are especially useful for designers and software development teams.
@@ -42,6 +46,8 @@ When working in the solution space, ask the question, "What solutions are worth
 - test those possible solutions
 - refine solutions based on what is learned
 
+---
+
 ## Impact mapping
 
 Impact mapping is a discovery technique useful for making progress in both the problem space and the solution space. It helps the team:
@@ -217,6 +223,8 @@ Merging the actors with impacts could allow more nuance for prioritizing. Maybe
 	- **5.** **Congress:** Rally public support
 </ImpactMapFigure>
 
+---
+
 ## Conclusion
 
 Impact maps are a powerful and flexible collaborative tool for exploring how solutions can make an impact toward its goal. They can be enlightening during the discovery phase of a project. They can prioritize work during the delivery phase of a project. Practice making an impact map with this structure:
@@ -226,5 +234,3 @@ Impact maps are a powerful and flexible collaborative tool for exploring how sol
 3. **Impacts:** "What should the actors do or not do to impact the goal?" These are behavior changes.
 4. **Deliverables:** "How will you help the actors make the intended impact?" These are solutions.
 5. **Experiments:** "How can you test whether the deliverable will have the intended impact?" This requires research and evidence.
-
-Continue with: [Overcome assumptions with impact maps](/2023-11-07/assumptions)

src/content/writings/2023-11-07-assumptions.mdx

@@ -7,8 +7,12 @@ description: "As problem solvers, we need some way to define unexamined assumpti
 import Aside from '@components/Aside.astro';
 import ImpactMapFigure from '@components/ImpactMapFigure.astro';
 
-<Aside>
-**Read first:** [Build the right thing with impact maps](/2023-10-31/impact)
+<Aside label="Impact maps series">
+1. [Build the right thing with impact maps](/2023-10-31/impact)
+2. Overcome assumptions with impact maps
+3. [Practice with impact maps](/2023-11-14/practice)
+
+Workshop: [Design with impact](https://github.com/basham/swit-workshop-impact) (2022)
 </Aside>
 
 A substantial amount of work done in information technology, the work in our personal lives, the work in other disciplines and domains — can be described simply as problem solving. A particular solution will fix a particular problem or achieve a particular goal.
@@ -50,5 +54,3 @@ Use impact maps to share and collaborate with the team and stakeholders, so ever
 ## Conclusion
 
 As problem solvers, we need some way to define unexamined assumptions, test unproved assumptions, and communicate unshared assumptions. Impact maps help us achieve all these things. When we use impact maps, we can more confidently know that a particular cause will result in the desired effect.
-
-Continue with: [Practice with impact maps](/2023-11-14/practice)

src/content/writings/2023-11-14-practice.mdx

@@ -8,10 +8,12 @@ import Aside from '@components/Aside.astro';
 import Figure from '@components/Figure.astro';
 import ImpactMapFigure from '@components/ImpactMapFigure.astro';
 
-<Aside>
-**Read first:**
-- [Build the right thing with impact maps](/2023-10-31/impact)
-- [Overcome assumptions with impact maps](/2023-11-07/assumptions)
+<Aside label="Impact maps series">
+1. [Build the right thing with impact maps](/2023-10-31/impact)
+2. [Overcome assumptions with impact maps](/2023-11-07/assumptions)
+3. Practice with impact maps
+
+Workshop: [Design with impact](https://github.com/basham/swit-workshop-impact) (2022)
 </Aside>
 
 Making impact maps is a skill that requires practice. Ideally, the goal for a project is known upfront, so the impact map is developed in order: goal, then actors, then impacts, then deliverables, then experiments.
@@ -23,6 +25,8 @@ The following two exercises will help form an impact map, regardless of the proj
 - [Make an impact map](#exercise-make-an-impact-map)
 - [Discover the goal](#exercise-discover-the-goal)
 
+---
+
 ## Exercise: Make an impact map
 
 Properly formulating a goal can hinder the work of just diving in and developing an impact map. For this exercise, select a goal from the following list, then make an impact map from that goal.
@@ -151,6 +155,8 @@ Feel free to later expand, refine, and tweak the impact map as desired. To keep
 				- **Experiment:** Take the family to the children's museum during a rainy day to gauge interest. <span class="u-nowrap">(Scheduled for Nov 18.)</span>
 </ImpactMapFigure>
 
+---
+
 ## Exercise: Discover the goal
 
  Sometimes the goal is unclear or not well defined at the start of the project. In a roundabout way, the goal can be revealed by starting with a potential deliverable. Once the goal is clear, an impact map can be started which can reveal any number of additional deliverables that support the goal.
@@ -253,6 +259,8 @@ Provide all families below the poverty line in the local downtown area with one
 
 Now, come full circle and [make an impact map](#exercise-make-an-impact-map) based on the goal in Step 5. If still relevant, the selected deliverable in Step 1 could be included as a deliverable in this new impact map.
 
+---
+
 ## Conclusion
 
 With some structure and prompts, individuals or teams can explore a world of possibilities. With the [*make an impact map* exercise](#exercise-make-an-impact-map), a goal can lead to an abundance of solutions. With the [*discover the goal* exercise](#exercise-discover-the-goal), a vague solution can lead to defining the goal and uncovering even better options.

src/content/writings/2023-12-12-links-buttons-javascript.mdx

@@ -163,7 +163,7 @@ Use a form's `get` method to change the view of a page based on user input, such
 
 Use a form's `post` method to create, update, or delete resources. Hidden input fields can indicate the particular action to take on the given resource (Option 1). Alternatively, the hidden input fields could be replaced by a convention that includes the action and resource identifier in the form's `action` URL (Option 2).
 
-<CodeFigure label={`Create an "Item"`}>
+<CodeFigure label="Create an <q>Item</q>">
 ```html
 <!-- Option 1 -->
 <form action="/items" method="post">
@@ -182,7 +182,7 @@ Use a form's `post` method to create, update, or delete resources. Hidden input
 ```
 </CodeFigure>
 
-<CodeFigure label={`Update an "Item"`}>
+<CodeFigure label="Update an <q>Item</q>">
 ```html
 <!-- Option 1 -->
 <form action="/items" method="post">
@@ -202,7 +202,7 @@ Use a form's `post` method to create, update, or delete resources. Hidden input
 ```
 </CodeFigure>
 
-<CodeFigure label={`Delete an "Item"`}>
+<CodeFigure label="Delete an <q>Item</q>">
 ```html
 <!-- Option 1 -->
 <form action="/items" method="post">

src/content/writings/2024-08-20-useful.mdx

@@ -8,15 +8,16 @@ draft: true
 import Aside from '@components/Aside.astro';
 import Figure from '@components/Figure.astro';
 
-<Aside>
-**UX writing series:**
+<Aside label="UX writing series">
 1. Writing should be useful
 2. [Writing should be usable](/2024-08-22/usable)
 3. [Writing should be kind](/2024-08-22/kind)
 </Aside>
 
 This is the start of a series about UX writing, based on my workshop [*Writing for Product Teams*](https://github.com/basham/swit-workshop-writing). Over the series, I explain three tenets: The writing we use in digital products should be useful, usable, and kind.
 
+---
+
 ## Useful writing is purposeful
 
 The purpose of writing in digital systems is to solve problems, and the practice of UX writing gives us the means to do this. You don't have to be a "designer" or a "writer" to practice UX writing. Any product team member who has influence over the words that are used or how they are used shares the responsibility. As the book [*Strategic Writing for UX* (2019)](https://www.oreilly.com/library/view/strategic-writing-for/9781492049388/) explains:
@@ -45,6 +46,8 @@ The more you know about another person, the more effective your conversation. Yo
 2. **Research your audience:** Ask questions to learn about your audience's knowledge, expertise, interests, concerns, needs, tasks, and goals.
 3. **Write for your audience:** Write in a way to help your audience find the content they need, understand that content, and then use that content to meet their goals. Speak to the user as a member of your audience.
 
+---
+
 ## Mutual benefits
 
 Because you know your audience, you can make the conversation easy for them. Be cooperative. Reduce the required effort or upfront knowledge they need to engage in the exchange. The conversation should be mutually beneficial. Each side should be satisfied with what they invested in it and what resulted from it.
@@ -75,6 +78,8 @@ In this third example, a customer and a home improvement store both benefit from
 
 The store aims to gain a loyal customer (and their money) by making it easy for the home owner to learn about and complete their projects.
 
+---
+
 ## Activities for useful writing
 
 Summarize a conversation as a user journey (steps toward meeting a goal). This user journey and the language used in the conversation can be the basis for designing a user interface.
@@ -91,16 +96,17 @@ Summarize a conversation as a user journey (steps toward meeting a goal). This u
 	- Outcome of the conversation
 5. Afterwards, each group should share what they did and learned.
 
+
 ### Example: Pizza order
 
 <Figure>
 
-#### Situation
+Situation:
 
 - Customer wants dinner to be delivered for their family of four.
 - Pizza rep wants orders to be efficient and friendly.
 
-#### Conversation
+Conversation:
 
 - **Pizza rep:** Welcome to Pizza Planet. Is this for pickup or delivery?
 - **Customer:** Delivery, please.
@@ -115,7 +121,7 @@ Summarize a conversation as a user journey (steps toward meeting a goal). This u
 - **Pizza rep:** Is there anything else I can help you with?
 - **Customer:** No, that will be all. Thank you!
 
-#### User journey
+User journey:
 
 1. Starts order
 2. Pickup or delivery
@@ -124,7 +130,7 @@ Summarize a conversation as a user journey (steps toward meeting a goal). This u
 5. Order tracking
 6. Confirmation
 
-#### Variations
+Variations:
 
 - Pizza rep is unaware they’re out of pineapple at the time of the order.
 - Pizza rep gives incorrect delivery time.

src/content/writings/2024-08-22-usable.mdx

@@ -8,8 +8,7 @@ draft: true
 import Aside from '@components/Aside.astro';
 import Figure from '@components/Figure.astro';
 
-<Aside>
-**UX writing series:**
+<Aside label="UX writing series">
 1. [Writing should be useful](/2024-08-20/useful)
 2. Writing should be usable
 3. [Writing should be kind](/2024-08-22/kind)
@@ -22,6 +21,8 @@ Usable writing in digital systems is:
 - clear
 - concise
 
+---
+
 ## Accessible
 
 Writing is accessible if readers have the ability to distinguish the content in a text and perceive it as words and concepts. We can use text alternatives, color, text resize, and layout to help users read the text.

src/styles/global.css

@@ -99,7 +99,7 @@ a:visited {
 }
 
 blockquote {
-	border-left: var(--border);
+	border-left: var(--4px) solid var(--color-border);
 	margin: 0;
 	padding: 0 0 0 1em;
 }
@@ -164,12 +164,6 @@ h2 {
 	font-size: var(--fs-3);
 }
 
-h2 {
-	border-top: var(--border);
-	margin-top: 2em;
-	padding-top: 2em;
-}
-
 h3 {
 	font-size: var(--fs-2);
 }
@@ -179,8 +173,10 @@ h4 {
 }
 
 hr {
-	border: var(--1px) solid var(--color-link);
-	margin: var(--32px) 0;
+	border: var(--border);
+	border-bottom-width: 0;
+	font-size: var(--fs-3);
+	margin: 2em 0 0;
 }
 
 img {

src/util/uniqueId.js

@@ -0,0 +1,5 @@
+let count = 0;
+
+export function uniqueId () {
+	return `id-${++count}`;
+}