Skip to content

Commit 758dc53

Browse files
mayouniclaude
mayouni
and
claude
committed
The local-first diagram becomes a drawing
The hand-authored SVG is replaced by site/local-first-diagram-1.jpg, which does the job properly: the device is a device, the data is a database cylinder, the server is a cloud, and a visitor is standing in the picture. Mine was four rounded rectangles with words in them. The artwork carries its own caption, so there is no figcaption repeating it — the sentence lives in the alt text instead, where a reader who cannot see the picture will actually meet it. The alt describes the shapes, the labelled relationships and the dashed link, then closes on the thesis. The SVG's dead styling goes with it. Two things came out of doing this. The image declares its intrinsic 1024x420 so the page reserves its space and nothing jumps when it lands (rule 38) — and `figure img` set `width:100%` with no `height:auto`, so that honest height attribute is precisely what squashed it to 704x420. Fixed in the stylesheet, which is the right place: it would have bitten every future image that declares its dimensions. The image now renders 704x290 at desktop and 320x132 on a phone, aspect intact. And because the stylesheet changed, the cache stamp had to move with it — 0.9.25 to 0.9.26 across all 16 pages. Verified this was necessary rather than assumed: at 0.9.25 the browser kept serving the old sheet and the image stayed squashed. Site audit still clean at 1280 across 15 pages. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent ad07eb8 commit 758dc53

18 files changed

Lines changed: 35 additions & 44 deletions

‎playground/ledger.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>A savings-circle register, written in Ring — does it feel right to use?</title>
77
<meta name="description" content="A working savings-circle register running on the real Ring virtual machine inside your browser. Filter, sort and total 20,000 records, with every interaction timed against how people perceive delay and every answer checked by JavaScript.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="../style.css?v=0.9.25">
9+
<link rel="stylesheet" href="../style.css?v=0.9.26">
1010
<style>
1111
/* This page is part of the site, and now looks it: the site's stylesheet
1212
carries the palette, the type scale and the menu, and the names the app

‎site/blog-browser-limits.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>What a browser cannot give you — and why that is an error, not a crash — RingScript blog</title>
77
<meta name="description" content="Files, directories, processes: what a Ring program loses inside a page, exactly how each loss behaves, and the design rule that keeps a missing capability from taking the page down.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 44rem; }
1212
article p { color: var(--ink-soft); }

‎site/blog-data-pages.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Writing a fast data page in Ring — RingScript blog</title>
77
<meta name="description" content="Five rules and one payload shape for fast Ring pages, each learned by getting it wrong first and each measured. With a live Ring example you can edit and run.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 44rem; }
1212
article p { color: var(--ink-soft); }

‎site/blog-local-first.html‎

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Local-first is not a luxury — RingScript blog</title>
77
<meta name="description" content="The applications behind RingScript run in a bank in Niger, a high school, a restaurant in France. What building for places where the connection is a guest teaches about software.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 44rem; }
1212
article p { color: var(--ink-soft); }
@@ -18,15 +18,10 @@
1818
margin: 1.6rem 0; padding: .2rem 0 .2rem 1.1rem;
1919
border-left: 3px solid var(--accent); font-size: var(--read); color: var(--ink);
2020
}
21+
/* The diagram carries its own caption in the artwork, so there is no
22+
figcaption to repeat it — the sentence lives in the alt text instead,
23+
where a reader who cannot see the picture will actually meet it. */
2124
figure { margin: 2rem 0; }
22-
figure svg { width: 100%; height: auto; display: block; }
23-
figcaption { font-size: var(--floor); color: var(--ink-soft); margin-top: .5rem; text-align: center; }
24-
.d-line { stroke: currentColor; stroke-width: 1.5; fill: none; opacity: .75; }
25-
.d-dash { stroke: currentColor; stroke-width: 1.5; fill: none; opacity: .45; stroke-dasharray: 5 5; }
26-
.d-box { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .8; rx: 8; }
27-
.d-accent { stroke: var(--accent); fill: none; stroke-width: 2; }
28-
.d-t { font: 600 17px -apple-system, "Segoe UI", sans-serif; fill: currentColor; }
29-
.d-s { font: 16px -apple-system, "Segoe UI", sans-serif; fill: currentColor; opacity: .65; }
3025
</style>
3126
</head>
3227
<body>
@@ -73,25 +68,16 @@ <h2>Software with real users, in real places</h2>
7368
breaks at the worst moment.</p>
7469

7570
<figure>
76-
<svg viewBox="0 0 640 190" role="img" aria-label="Diagram: the application and its data live on the device; the connection is used when it is available">
77-
<rect class="d-box" x="20" y="30" width="270" height="130" rx="10"/>
78-
<text class="d-t" x="40" y="58">The device</text>
79-
<rect class="d-accent" x="40" y="74" width="110" height="34" rx="6"/>
80-
<text class="d-t" x="55" y="96">the app</text>
81-
<rect class="d-accent" x="40" y="116" width="110" height="34" rx="6"/>
82-
<text class="d-t" x="55" y="138">the data</text>
83-
<path class="d-line" d="M150 91 h60 M150 133 h60"/>
84-
<text class="d-s" x="216" y="96">works</text>
85-
<text class="d-s" x="216" y="138">answers</text>
86-
<path class="d-dash" d="M290 95 C 360 95, 380 95, 450 95"/>
87-
<text class="d-s" x="315" y="84">when the connection allows</text>
88-
<rect class="d-box" x="450" y="60" width="170" height="70" rx="10"/>
89-
<text class="d-t" x="478" y="90">the server</text>
90-
<text class="d-s" x="478" y="110">sync, backup, share</text>
91-
</svg>
92-
<figcaption>The local-first shape: the connection is a guest, not a
93-
foundation. When it visits, you synchronise. When it leaves, nothing
94-
stops.</figcaption>
71+
<img src="local-first-diagram-1.jpg" width="1024" height="420" loading="lazy"
72+
alt="The local-first shape. A tablet labelled &quot;The device&quot; contains
73+
two things joined to each other: the app, drawn as a phone screen, and
74+
the data, drawn as a database cylinder marked &quot;Local Database
75+
(persistent)&quot;. The app works; the data answers. A visitor stands on
76+
the device. Outside it, across the widest gap in the picture, a cloud
77+
labelled &quot;The server&quot; offers sync, backup and share — and it is
78+
reached by a dashed line, the only dashed thing here, labelled &quot;when
79+
the connection allows&quot;. The connection is a guest, not a foundation:
80+
when it visits, you synchronise; when it leaves, nothing stops.">
9581
</figure>
9682

9783
<h2>The tontine test</h2>

‎site/blog-measured-against.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Measured against Lua and QuickJS — RingScript blog</title>
77
<meta name="description" content="The same scenarios through three C interpreters compiled to WebAssembly. Robustness parity, four wins out of nine, and every loss published with its cause.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 44rem; }
1212
article p { color: var(--ink-soft); }

‎site/blog-two-quadratics.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>A 50,000-row page and two quadratic surprises — RingScript blog</title>
77
<meta name="description" content="A real app, driven like a user, found two O(n²) behaviours in the Ring VM's list machinery — invisible to every benchmark. The diagnosis, the fixes, and the safety net.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 44rem; }
1212
article p { color: var(--ink-soft); }

‎site/blog-zig-not-emscripten.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Zig instead of Emscripten — RingScript blog</title>
77
<meta name="description" content="The 2025 build of Ring for the browser used Emscripten and worked. The rebuild used Zig and a hand-written WASI shim instead. How that decision was made from evidence in half a day, and what it cost.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 44rem; }
1212
article p { color: var(--ink-soft); }

‎site/blog.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Blog — RingScript</title>
77
<meta name="description" content="Writing from the RingScript project: why local-first software matters, how to write fast Ring pages, what a browser cannot give a Ring program, and the deep technical work behind the runtime.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 46rem; }
1212
article p { color: var(--ink-soft); }

‎site/data.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Working with data — RingScript at normal application loads</title>
77
<meta name="description" content="Can a Ring page carry a normal application data load? A working app with 20,000 records you can filter, sort and total in the browser — every interaction measured, every answer verified.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 46rem; }
1212
article p { color: var(--ink-soft); }

‎site/faq.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Questions and answers — RingScript</title>
77
<meta name="description" content="Does load &quot;myfile.ring&quot; work in the browser? How do I split a program across files, read input, call Ring from a button? Plain answers for Ring developers.">
88
<link rel="icon" href="favicon.svg" type="image/svg+xml">
9-
<link rel="stylesheet" href="style.css?v=0.9.25">
9+
<link rel="stylesheet" href="style.css?v=0.9.26">
1010
<style>
1111
article { max-width: 46rem; }
1212
article p { color: var(--ink-soft); }

0 commit comments

Comments
 (0)