[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_275":276,"_277":278},"routes/_app.x.$handle.$name",{"_101":100,"_31":44,"_109":87,"_26":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":24,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":24},"version",58,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","posts/model.tsx","latestPath","fileId","6479a9ec-e75c-11f0-a83a-42dde27851f2","name","model.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { Link } from \"../helpers.tsx\";\n\nexport default async function (request: Request) {\n return new Response(\n renderToString(\n \n \n Steve Krouse\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n Steve Krouse\n \n

\n \n \n \"a woman painting a landscape\" by{\" \"}\n \n Fal Demo App\n \n \n

Find a model

\n One of the most common pieces of advice I give to mentees is to\n \"find a model.\" It's a stupid-simple technique, but can\n transform how you work. It will let you do things faster,\n better, and with more confidence. It's a mystery that everybody\n doesn't use it all the time.\n

\n The core of the technique is to find a model artifact to keep an\n eye on while you work on your artifact, which could be a coding\n project, a song, a painting, an email, a social media post, an\n essay like this one, etc.\n

\n The are three important benefits to this technique.\n

\n A north star\n

\n A model gives you a north star; something to shoot to; something\n you can visually compare your work to, and see what's missing; a\n yardstick by which you can measure how \"done\" your artifact is.\n Without a model, how do you even know what kind of thing you're\n making? How can you tell its shape? A model is like a\n hyper-specific template that lets you stay focused on the end\n goal.\n

\n There are many related principles:{\" \"}\n \n Backward Chaining\n ,{\" \"}\n \n Top-down design\n ,{\" \"}\n \n The XY Problem\n , and Amazon's principle to \"Write the Press Release\n First\". These all get at the idea that you don't want to lose\n sight of the end goal. Without a model, you risk getting lost in\n the details. Losing the forest for the trees. A model helps you\n keep the whole forest in sight, so you actually create what you\n set out to.\n

\n However, it's important to remember that \"Plans are useless, but\n planning is indispensable.\" In other words, you shouldn't feel\n compelled to stick to your model so closely. Use the parts that\n you want, and forget about the rest. A model is high up on{\" \"}\n The Ladder of Abstraction, but that doesn't\n mean you can't change it. If you realize that you chose the\n wrong model or that your goals have changed, excellent. Time to\n find a better model.\n

\n The fact that you have a model is what allows you to realize\n when you have the wrong model. Imagine you're a ship captain\n navigating by a star that you thought was the north star, but\n then later realized was just Venus. The time you wasted\n navigating by Venus would've been equally wasted if you were\n navigating without reference to any star. At least when you're\n navigating by Venus one of your fellow sailors can come over\n your shoulder and say, \"Hey captain, I think that's Venus.\" If\n you're navigating by nothing, then you're truly lost at sea.\n

\n Un-stuck-ing yourself\n

\n Another reason to have model is that it's very helpful when you\n get stuck. Don't know how to do something? See how your model\n does it.\n

\n For this essay I felt stuck on the first line. This essay's\n model is{\" \"}\n \n Do things that don't scale\n , because it's an essay that explains a cognitive\n technique. Its first sentence isn't the prettiest, but it gets\n the idea across and it's a hook: \"One of the most common types\n of advice we give at Y Combinator is to do things that don't\n scale.\"\n

\n Now go back and read my first line. Is it deritive? Yes. Would\n literally anyone have noticed if I didn't draw your attention to\n it? No. There's something profoundly true about the line\n oft-attributed to Picasso, \"Good artists borrow. Great artists\n steal.\" I didn't truly believe this quote until I read{\" \"}\n \n The Elements of Eloquence\n , wherein he shows examples of Shakespeare lifting whole\n sentences out of other books and plays, only changing a couple\n words.\n

\n In school, they call this behavior cheating, which is probably\n why this technique isn't practiced more often. I think it's an\n important lesson to unlearn. Why reinvent the wheel? Save time\n so you can focus on your unique contribution. Just be sure to\n give attribution and credit where it's due.\n

\n Maybe someone already did it, so you don't have to\n

\n How many times have you built something only later to realize\n someone else already built it? Chances are that if an idea\n occurs to you, likely it has occured to someone like you. So\n many people don't even take a second to google around before\n embarking on a project. Instead of wasting your time reinventing\n the wheel, see if someone already invented it. Then stop. Just\n use their thing.\n

\n How to find a model\n

\n One reason \"finding a model\" isn't more common is that it can be\n quite difficult to find a good model. I call that technique{\" \"}\n \"surveying the space\".\n

\n \n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}","createdAt",["D",1767304445714],"branchVersion","branchId","4839b4b2-de23-11f0-816e-42dde27851f2","id","48375500-de23-11f0-816e-42dde27851f2","shapedlinesdotcom",["D",1766290356487],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","personal site, forked from steve ( for now :) ) ","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c50e3472-e5d2-4b60-5702-1517f2763a00/square512?exp=1789549199&sig=f219dff7b2ab29f585ab4f34249f8961f903d1e822c7873dda78577bf1585e80","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","019b3f1b-f949-7608-a498-65a2cde27489","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e9195859-3c6b-4b40-bb3e-c11844477fdf","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":24},"branch",{"_13":86,"_31":87,"_42":41,"_88":43,"_89":90,"_91":92,"_93":49,"_94":95,"_96":97,"_98":44,"_99":100},"isOwned",96,"main","projectId","forkedBranchId","9724c258-e985-11ef-b2c8-e6cdfca9ef9f","forkedBranchVersion",502,"forkedProjectPrivacy","forkedProjectId","972467e0-e985-11ef-b2c8-e6cdfca9ef9f","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","shapedlines","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":271,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":272,"_81":273,"_83":274,"_85":24},"tree",[229,231,232,233,234,235,236,237,238],"files",[229,230,231,232,233,234,235,236,237,238],"counts",{"_219":63,"_220":158,"_221":63,"_222":223,"_224":225},"contents",[145,146,147,148,149,150,151,152,153],"upstreamProject",{"_42":95,"_31":141,"_51":142,"_53":-5,"_48":49,"_79":143},"upstreamBranch",{"_42":90,"_37":134,"_135":136,"_31":87,"_88":95,"_13":137,"_89":-5,"_91":-5,"_138":139,"_46":-5,"_85":24,"_48":49,"_99":140,"_64":97,"_98":141},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":133},"shapedlines.com",["D",1739394544742],"updatedAt",["D",1784749093711],1160,"lockfileKey","1784749093847-esm.town_v_stevekrouse_stevekrouse_dot_com@1160-main","stevekrouse","stevekrouse_dot_com","The personal site of Steve Krouse, stevekrouse.com",{"_101":140,"_108":144},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_42":212,"_31":213,"_29":214,"_157":-5,"_40":41,"_39":215,"_159":59,"_37":216,"_13":63,"_33":217,"_35":-5,"_23":24,"_162":-5,"_26":218},{"_42":205,"_31":206,"_29":207,"_157":-5,"_40":41,"_39":208,"_159":59,"_37":209,"_13":63,"_33":20,"_35":210,"_23":24,"_162":-5,"_26":211},{"_42":198,"_31":199,"_29":200,"_157":-5,"_40":41,"_39":201,"_159":59,"_37":202,"_13":63,"_33":20,"_35":203,"_23":24,"_162":-5,"_26":204},{"_42":193,"_31":194,"_29":195,"_157":-5,"_40":41,"_39":168,"_159":59,"_37":196,"_13":158,"_33":20,"_35":110,"_23":24,"_162":-5,"_26":197},{"_42":186,"_31":187,"_29":188,"_157":-5,"_40":41,"_39":189,"_159":59,"_37":190,"_13":63,"_33":20,"_35":191,"_23":24,"_162":-5,"_26":192},{"_42":180,"_31":181,"_29":182,"_157":-5,"_40":41,"_39":158,"_159":59,"_37":183,"_13":63,"_33":34,"_35":184,"_23":24,"_162":-5,"_26":185},{"_42":172,"_31":173,"_29":174,"_157":-5,"_40":41,"_39":175,"_159":24,"_37":176,"_13":177,"_33":34,"_35":178,"_23":24,"_162":-5,"_26":179},{"_42":164,"_31":165,"_29":57,"_157":-5,"_40":41,"_39":166,"_159":24,"_37":167,"_13":168,"_33":169,"_35":170,"_23":24,"_162":-5,"_26":171},{"_42":154,"_31":155,"_29":156,"_157":-5,"_40":41,"_39":158,"_159":59,"_37":160,"_13":63,"_33":34,"_35":161,"_23":24,"_162":-5,"_26":163},"483cd89a-de23-11f0-816e-42dde27851f2","post-helpers.tsx","019b3f1b-f949-7608-a498-68701de8f45d","parentId",1,"latest",["D",1766290356487],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport {\n listFilesByPath,\n readFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown@9?deps=react@18.2.0\";\n\nasync function loadFile(file) {\n if (file.name.endsWith(\".tsx\")) {\n return (await import(file.links.module)).default;\n } else if (file.name.endsWith(\".md\")) {\n const markdown = await readFile(file.path);\n return function () {\n return new Response(\n renderToString(\n \n \n \n {file.name}\n \n \n {markdown}\n \n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n };\n }\n}\n\nasync function getPosts() {\n const posts = Object.fromEntries(\n await Promise.all(\n (await listFilesByPath(\"posts\"))\n .map(\n async (\n file,\n ) => [\n file.name.split(\".\")[0].toLowerCase(),\n await loadFile(file), // could defer this until someone wants this particular file\n ],\n ),\n ),\n );\n return posts;\n}\nasync function getPostsBounded() {\n const posts = await Promise.race([\n getPosts(),\n new Promise((resolve) => setTimeout(resolve, 5000)),\n ]);\n if (!posts) {\n console.error(\"Timeout fetching posts\");\n return [];\n }\n console.log(`Fetched ${Object.keys(posts).length} posts`);\n return posts;\n}\nlet posts;\n\nexport async function renderPage(req: Request) {\n if (!posts) posts = await getPostsBounded();\n console.log(posts);\n\n // render /posts/* in this val\n const url = new URL(req.url);\n const name = url.pathname.slice(1);\n const post = posts[name.toLowerCase()];\n if (post) return post(req);\n\n // look up page on github pages\n const githubPagesUrl =\n `https://stevekrouse.github.io${url.pathname}${url.search}`;\n const response = await fetch(\n new Request(githubPagesUrl, {\n method: req.method,\n headers: new Headers({\n ...Object.fromEntries(req.headers),\n \"User-Agent\": \"Val Town\",\n }),\n }),\n );\n if (response.status !== 404) return response;\n\n // return 404\n return new Response(\n renderToString(

404: stevekrouse.com{url.pathname}{url.search}

),\n { status: 404, headers: { \"Content-Type\": \"text/html\" } },\n );\n}","label",[155],"4a5bda3a-e6a8-11f0-b34c-42dde27851f2","main.tsx",48,["D",1767227092449],2,"http","import { Homepage } from \"./index.tsx\";\nimport { Hono } from \"npm:hono@4.0.0\";\nimport { renderPage } from \"./post-helpers.tsx\";\n\nconst app = new Hono();\napp.get(\"/\", (c) => Homepage(c.req.raw));\napp.get(\"/*\", (c) => renderPage(c.req.raw));\napp.onError((e) => Promise.reject(e));\nexport default app.fetch;",[165],"bb195934-e75a-11f0-b807-42dde27851f2","index.tsx","019b3f1b-f949-7608-a498-60d158246340",55,["D",1767303732048],47,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { Link } from \"./helpers.tsx\";\n\n// San Francisco coordinates for the sky gradient\nconst SF_LAT = 37.7739043893829;\nconst SF_LON = -122.43962250314021;\n\n// Fetch sky gradient from horizon-val API\nasync function getSkyGradient(lat: number = SF_LAT, lon: number = SF_LON): Promise<{ gradient: string; topColor: string; bottomColor: string }> {\n try {\n const response = await fetch(\n `https://shapedlines--86fe5e54e42311f09c7342dde27851f2.web.val.run/api/gradient?lat=${lat}&lon=${lon}`\n );\n if (!response.ok) {\n console.log(\"Horizon API error:\", response.status, await response.text());\n throw new Error(`API returned ${response.status}`);\n }\n const data = await response.json();\n console.log(\"Horizon API response:\", JSON.stringify(data));\n return {\n gradient: data.css.background,\n topColor: data.css.themeColor,\n bottomColor: data.css.fallbackColor,\n };\n } catch (e) {\n console.log(\"Failed to fetch from horizon API:\", e);\n // Fallback to a simple gradient\n return {\n gradient: \"linear-gradient(to bottom, rgb(135, 206, 235), rgb(255, 223, 186))\",\n topColor: \"rgb(135, 206, 235)\",\n bottomColor: \"rgb(255, 223, 186)\",\n };\n }\n}\n\n// Helper to generate a dynamic SVG favicon based on the sky colors\nfunction getFaviconSvg(topColor: string, bottomColor: string): string {\n const svg = ``;\n return `data:image/svg+xml;base64,${btoa(svg)}`;\n}\n\nconst dateClass = \"text-xs text-gray-400 font-mono mr-1 hidden sm:inline-block\";\n\nexport async function Homepage(req?: Request) {\n let lat = SF_LAT;\n let lon = SF_LON;\n let locName = \"San Francisco, CA\";\n\n // Parse location from cookie if present\n const cookie = req?.headers.get(\"cookie\");\n if (cookie) {\n const match = cookie.match(/horizon_location=([^;]+)/);\n if (match) {\n try {\n const loc = JSON.parse(decodeURIComponent(match[1]));\n lat = loc.lat;\n lon = loc.lon;\n locName = loc.name;\n } catch (e) {\n console.error(\"Failed to parse location cookie\", e);\n }\n }\n }\n\n const sky = await getSkyGradient(lat, lon);\n\n // Always fetch SF sky for the favicon, regardless of current location\n const sfSky = (lat === SF_LAT && lon === SF_LON) ? sky : await getSkyGradient(SF_LAT, SF_LON);\n const faviconUrl = getFaviconSvg(sfSky.topColor, sfSky.bottomColor);\n\n return new Response(\n renderToString(\n \n \n shapedlines\n \n \n \n \n

Diff · v58