{{else}}{{icon_img glyph}}{{/if}}
+ {{title}}
{{caption}}
{{verdict}}
+ {{#if summary}}{{summary}}
{{/if}} +{{aside}}
+
+
+ -- one refunds tool, six ways to build it, on day 100
+
+ Low Effort.
+
+ Low Effort.
Low Drama.
+ Building got cheap.
Owning what got built is still expensive.
+ {{#> comparison-card id="compare-sqlpage" title="SQLPage" caption="SQL files + your database" verdict="Day 100: still a few files you can read." aside="-- boring on purpose." sqlpage=true summary="SQL files in git. One stateless binary. The common attacks handled by default."}}
+
+
+
+
+
+ {{/comparison-card}}
+
+
+
+ Add refunds page
+3 files changed +26 −2
+-
+
- {{icon_img "file"}} refunds.sql+14 +
- {{icon_img "file"}} index.sql+4 −2 +
- {{icon_img "file"}} sqlpage/migrations/0007_refunds.sql+8 +
{{icon_img "circle-check"}} git push → live
+
+
+ Scroll horizontally to explore five illustrative alternatives. Use the left and right arrow keys when this region is focused.
+
+ {{#> comparison-card id="compare-agent" title="Agent-built app" caption="An AI agent writes the full stack" verdict="The vibe debt comes due." aside="-- LGTM (nobody read it)" glyph="sparkles"}}
+
+
+
+
+ {{/comparison-card}}
+ {{#> comparison-card id="compare-spreadsheet" title="Spreadsheet" caption="Excel, Google Sheets" verdict="Great until the data drifts." aside="-- which one is real?" glyph="table"}}
+
+
+ Add refunds page
+214 files +8,402 −1,317
+-
+
- {{icon_img "file"}} package-lock.json+6,120 +
- {{icon_img "file"}} src/components/RefundTable.tsx+212 +
- {{icon_img "file"}} src/api/refunds.ts+148 +
- {{icon_img "file"}} prisma/schema.prisma+31 +
… and 209 more files
+
+
+ {{icon_img "alert-triangle"}} 2 dependency alerts
+{{icon_img "check"}} 1 approval: LGTM
+
+
+
+ {{/comparison-card}}
+ {{#> comparison-card id="compare-scripts" title="Custom scripts" caption="Python, shell, cron" verdict="Works. Until the author leaves." aside="-- cron says it ran" glyph="terminal-2"}}
+
+
+ NameModified ↓
+ -
+
- X refunds.xlsxMar 3 +
- X refunds_final.xlsxMar 9 +
- X refunds_final_v2.xlsxMar 9 +
- X refunds_FINAL_real.xlsxApr 2 +
- X refunds (1).xlsxJun 1 +
{{icon_img "lock"}} Locked for editing by dave
+
+
+
+ {{/comparison-card}}
+ {{#> comparison-card id="compare-bi" title="BI dashboard" caption="Charts on top of your data" verdict="Great for charts. Not for actions." aside="-- look, but don't touch" glyph="chart-bar"}}
+
+
+ $ crontab -l
+0 6 * * * python3 ~/dave/refunds.py
+$ tail -n3 refunds.log
+05-14 06:00 ok
05-15 06:00 ok
05-16 06:00 ConnectionError
+$ git log -1 --format=%an
+dave (left in March)
+$
+
+
+
+ {{/comparison-card}}
+ {{#> comparison-card id="compare-lowcode" title="Low-code platform" caption="Drag-and-drop app builders" verdict="It lives on their terms." aside="-- 14 seats, billed monthly" glyph="apps"}}
+
+
+
+
+
+ €12.4krefunded, last 30 days
+ Edit View-only access
+ SCan we add a button?Not in this tool.
+
+
+
+ {{/comparison-card}}
+
+
+
+
+ | Order | Customer | Amount |
|---|---|---|
| #1042 | Ada L. | €48.00 |
| #1043 | Grace H. | €12.50 |
| #1044 | Linus T. | €76.00 |
| #1045 | Margaret H. | €24.00 |
+ Export is a Business feature
+
+ Upgrade to export refunds as CSV.
+Not nowSee plans
+
diff --git a/tests/end-to-end/landing-comparison.spec.ts b/tests/end-to-end/landing-comparison.spec.ts
new file mode 100644
index 00000000..8aecd0af
--- /dev/null
+++ b/tests/end-to-end/landing-comparison.spec.ts
@@ -0,0 +1,121 @@
+import { expect, test } from "@playwright/test";
+
+for (const settings of [
+ { width: 1440, height: 1000, reducedMotion: "no-preference", visible: 2 },
+ { width: 768, height: 1024, reducedMotion: "reduce", visible: 1 },
+ { width: 390, height: 844, reducedMotion: "reduce", visible: 1 },
+] as const) {
+ test(`landing comparison browses all alternatives at ${settings.width}px`, async ({
+ page,
+ }) => {
+ await page.setViewportSize(settings);
+ await page.emulateMedia({ reducedMotion: settings.reducedMotion });
+ const errors: string[] = [];
+ page.on("pageerror", (error) => errors.push(error.message));
+ await page.goto("/");
+ await expect(page.locator("#compare + .databases-section")).toHaveCount(1);
+ const section = page.locator("#compare");
+ const track = section.getByRole("region");
+ const previous = section.getByRole("button", {
+ name: "Previous alternative",
+ });
+ const next = section.getByRole("button", { name: "Next alternative" });
+ const status = section.getByRole("status");
+ await next.scrollIntoViewIfNeeded();
+ await expect(previous).toBeDisabled();
+ await expect(status).toHaveText(
+ settings.visible === 2 ? "1–2 of 5 alternatives" : "1 of 5 alternatives",
+ );
+ const sqlpage = section.locator(".comparison-sqlpage");
+ const initialHeight = await section.evaluate(
+ (section) => section.clientHeight,
+ );
+ for (let index = 1; index <= 5 - settings.visible; index++) {
+ await next.click();
+ await expect(status).toHaveText(
+ settings.visible === 2
+ ? `${index + 1}–${index + 2} of 5 alternatives`
+ : `${index + 1} of 5 alternatives`,
+ );
+ await expect(
+ sqlpage.getByRole("heading", { name: "SQLPage", exact: true }),
+ ).toBeVisible();
+ }
+ await expect(next).toBeDisabled();
+ await expect(previous).toBeEnabled();
+ // The final card is wholly readable, and cycling never changes section geometry.
+ const last = track.locator(".comparison-card").last();
+ expect(
+ await last.evaluate((card) => {
+ const bounds = card.getBoundingClientRect();
+ const track = card.parentElement?.getBoundingClientRect();
+ if (!track) throw new Error("Missing alternatives track");
+ return bounds.left >= track.left - 1 && bounds.right <= track.right + 1;
+ }),
+ ).toBe(true);
+ expect(await section.evaluate((section) => section.clientHeight)).toBe(
+ initialHeight,
+ );
+ await track.focus();
+ for (const [key, button, disabled] of [
+ ["Home", previous, true],
+ ["ArrowLeft", previous, true],
+ ["ArrowRight", previous, false],
+ ["End", next, true],
+ ["ArrowRight", next, true],
+ ["ArrowLeft", next, false],
+ ] as const) {
+ await track.press(key);
+ if (disabled) await expect(button).toBeDisabled();
+ else await expect(button).toBeEnabled();
+ }
+ await previous.click();
+ await expect(next).toBeEnabled();
+ // Resize the same page after browsing; scroll bounds and controls update together.
+ await page.setViewportSize({ width: 1280, height: 900 });
+ await track.focus();
+ await track.press("End");
+ await expect(status).toHaveText("4–5 of 5 alternatives");
+ await expect(next).toBeDisabled();
+ expect(
+ await page.evaluate(
+ () => document.documentElement.scrollWidth <= innerWidth,
+ ),
+ ).toBe(true);
+ expect(errors).toEqual([]);
+ });
+}
+
+test("landing comparison remains browsable without JavaScript", async ({
+ browser,
+ baseURL,
+}) => {
+ const context = await browser.newContext({
+ baseURL,
+ javaScriptEnabled: false,
+ viewport: { width: 390, height: 844 },
+ });
+ const page = await context.newPage();
+ await page.goto("/");
+ const section = page.locator("#compare");
+ await section.scrollIntoViewIfNeeded();
+ await expect(
+ section.getByRole("group", { name: "Browse alternatives" }),
+ ).toBeHidden();
+ const track = section.getByRole("region");
+ await track.scrollIntoViewIfNeeded();
+ await track.hover();
+ await page.mouse.wheel(3000, 0);
+ await expect
+ .poll(() => track.evaluate((track) => track.scrollLeft))
+ .toBeGreaterThan(0);
+ expect(
+ await page.evaluate(
+ () => document.documentElement.scrollWidth <= innerWidth,
+ ),
+ ).toBe(true);
+ await expect(
+ section.getByRole("heading", { name: "Low-code platform", exact: true }),
+ ).toBeVisible();
+ await context.close();
+});
diff --git a/tests/end-to-end/landing-demos.spec.ts b/tests/end-to-end/landing-demos.spec.ts
index 259c60fb..a9ba0fa1 100644
--- a/tests/end-to-end/landing-demos.spec.ts
+++ b/tests/end-to-end/landing-demos.spec.ts
@@ -170,7 +170,7 @@ test("a failed landing example keeps the current preview and SQL", async ({
await page
.getByRole("tab", { name: "chart A timeline from 3 rows", exact: true })
.click();
- await expect(page.getByRole("status")).toHaveText(
+ await expect(page.locator("#demo-panel").getByRole("status")).toHaveText(
"The demo could not load. Please try again.",
);
await expect(demo.getByRole("cell", { name: "Acme Corp" })).toBeVisible();
diff --git a/tests/end-to-end/landing-motion.spec.ts b/tests/end-to-end/landing-motion.spec.ts
index 96e19acd..db5b859b 100644
--- a/tests/end-to-end/landing-motion.spec.ts
+++ b/tests/end-to-end/landing-motion.spec.ts
@@ -231,7 +231,7 @@ for (const viewport of [
// Even the last card gets a fully readable interval before the next wave arrives.
const purpose = requireValue(positions[1], "purpose section");
const deployment = requireValue(positions[2], "deployment section");
- const closing = requireValue(positions[4], "closing section");
+ const closing = requireValue(positions.at(-1), "closing section");
const readingScroll = purpose.top - purpose.stickyTop;
await scrollTo(Math.ceil(readingScroll));
await expect(trailingCard).toHaveCSS("opacity", "1");