Survey the space

\n 🚧 This essay is under active development 🚧\n

• Describe precisely what you're doing

• Think of key words

• Think of words or phrases you'd be likely to use

• Think about where you'd post your thing. Think about where this crowd hangs out

• Google, perplexity, hn search, twitter, deep research

\n \n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[18,82],"64821320-e75c-11f0-a1e3-42dde27851f2",["D",1767304445769],"/** @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 Steve Krouse\n

I proposed to my girlfriend in Quordle

\n Emily loves puzzles. Every day she plays Wordle, the New York Times Mini, Connections, Spelling Bee,\n LinkedIn Tango and Queens, and Quordle, in that order.\n

\n I thought it'd be fun to propose in one of her favorite games. It's appropriate, after all, because\n Wordle itself was created for love. But which game would work?\n

\n At the end of the day you have to say \"Will you marry me?\" so that ruled out many options. How can you\n fit that into Wordle or Connections? I tried my hand at a crossword, but damn those are hard!\n

\n Eventually I realized the question would fit inside Quordle, but with extra letters. For context,{\" \"}\n Quordle{\" \"}\n is four Wordles that you're playing at the same time. I'd deal with the extra letters by having them\n fall away at the end, leaving the big question. The first set of words I came up with were \"Willy\",\n \"Youth\", \"Marry\", and \"Meaty\", but I eventually changed \"Meaty\" to \"Meter\" because Emily loves\n {\" \"}\n when words end with \"er\".\n

\n Enter AI. I work at{\" \"}\n Val Town, and we make a website for programmers to build apps.{\" \"}\n Townie{\" \"}\n is our AI-assistant that writes Val Town apps for you. I started with a very simple prompt and a\n screenshot of Quordle.\n

\n On a cold December night at Betaworks in Chelsea, I cozied up and worked with Townie for 90 minutes. It\n was one of David Bieber's wonderful hack nights, so the atmosphere was perfect. By the end of the night,\n it was done. I remember it being a lot of fun.\n

\n Looking back at the chat history, I see that there are{\" \"}\n 91 versions, which means I was\n averaging about one edit per minute. It takes Townie, powered by Claude 3.5 Sonnet, about 30-60 seconds\n to rewrite a couple hundred lines of code, so that would account for the speed. I think most of those\n edits were through Townie, but I also made some manual edits to the code for smaller changes.\n

\n The basic mechanics of Quordle were more complicated than I'd realized. For example, the keys on the\n on-screen keyboard need to be colored appropriately, green, yellow, gray, and black, representing\n whether that letter is in the right spot, wrong spot, not in the word, or not played yet, respectively,\n and in four quadrants, for the four different Wordle boards on-screen. Also each of the attempts on each\n Wordle board needs to be colored appropriately, with subtle rules governing various end states.\n

\n But after I got the basic mechanics working, the game felt flat somehow. I pulled up the original and\n noticed all sorts of tiny micro interactions that gave the game life. When you press on a letter on the\n keyboard, it moves up and turns another color. When a letter shows up on the screen, it animates in.\n When you get a word correct, it animates in in a flipboard style.\n

\n I also wanted to copy how Quordle highlights invalid words in red, but for that I needed a list of valid\n words. It was suprisingly easy to find the list that Quordle itself was using. I popped open the Chrome\n Network tab, navigated to Quordle, and hit Cmd+F to get the Search across everything. There I just put a\n random word that I knew to be on the list, \"youth\", and voila. I found it interesting to see the lists,\n broken up into a `wordBank`, `blacklist`, and `allowed`. I went with the `allowed` list.\n

\n I later realized that the letters-falling-away animation at the end happened quite quickly, so I needed\n some way to slow it down, and get her attention. I could imagine her looking away right when she gets\n the last word, and she'd miss it. So I had Townie add a modal when she won, asking her if she's ready\n for the next level.\n

\n \n

\n \n \n

\n The morning I decided to do it, we first started with her normal word games. Then I announced that I\n made her a word game. She was excited. She enjoyed the Quordle, but was a bit confused why all the words\n were so random. The only one that had any significance was \"meter\", because it ended in \"er\", but even\n that significance was weak. Safe to say she had no clue what was coming. She got to the win screen and\n was ready for the next level. The letters fell away and she turned to me and said, \"What?\"\n

\n The rest happened in a blur, but I did get down on one knee and pull out a ring. She said yes.\n

\n \n

\n You can play Emirdle here\n . The next level is reserved for Emily.\n

\n \n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[18,91],"6479a910-e75c-11f0-a83a-42dde27851f2",["D",1767304445714],"/** @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}",[18,67],"64857fd8-e75c-11f0-998d-42dde27851f2",["D",1767304445759],"# Steve Krouse's README\n\n👋 Hi, I'm Steve. This README explains a bit about me, the standards I hold\nmyself to and how to work best with me. Hopefully, reading this document will\nsave you some time learning my quirks the old-fashioned way. If you find me not\nliving up to my own standards, please let me know, so I can make it right.\n\n## A bit about me\n\n- I was born in NYC and raised in South Florida\n- I'm a big audiobook reader\n- I dropped out of Penn after 3 semesters\n- I'm Bret Victor and Alan Kay fanboy\n- I'm passionate about programming and education\n- I'm a Crystal Palace supporter\n\n## Values\n\nThese are some of the standards I hold myself to, and traits I value in others.\n\n1. **Integrity** – honesty, accountability, doing the right thing. Doing what\n you'll say you'll do. Not lying. Not taking advantage of people. Being\n responsible. Integrity is the cornerstone of trust, and trust lets us all go\n further, faster.\n\n2. **Kindness** – treating people with respect, patience, good-will. Wanting the\n best for others. Taking pleasure in helping people. Taking others'\n perspectives and emotion into account, and treating them with care and\n empathy. Working _with_ people instead of manipulating them.\n\n3. **Resourcefulness** – leveraging all resources and clever thinking to\n identify and solve problems. Not getting stuck, spiraling, or getting\n discouraged. Asking for help when you need it – other people are some of the\n best resources! – but not bothering people until you've done your homework\n first.\n\n## Async communication\n\nI love async communication.\n\nI regularly check:\n\n- email\n- text\n- facebook messenger\n- whatsapp\n- twitter DMs\n- bluesky\n- linkedin\n\nI try to at least acknowledge receipt of all non-spam messages within a day or\ntwo. Always feel free to bump a message to urge me to reply more quickly.\n\nI'm a big fan of sending and receiving audio or video messages when it makes\nsense more than text. For example, for giving feedback on an essay or a website,\ndemoing a bug, or teaching how to do something.\n\nI may message you at odd hours, but that doesn't mean I expect a reply right\naway. That's what's so great about async communication: the sender can send\nmessages at the right time for them, and the receiver can reply at the right\ntime for them, and those can be two very different times.\n\nWhen there's a tense, fraught, complex, or important conversation happening on\nDMs, I try to quickly bounce to synchronous conversation, like phone call. A lot\ncan be lost in textual communication that can be easily cleared up with the tone\nof a human voice.\n\n## Giving feedback\n\nI love giving feedback, though I've found my feedback isn't always well\nreceived. My favorite way to give feedback is in a stream-of-conscious style,\nwherein I document all my reactions to the work. It's exactly how I review my\nown work. There's minimal sugar coating. I may highlight parts and simply say\n\"wordy\" or \"nonsense\" or \"delete\" or \"repetitive\" or \"word choice\" or \"did an AI\nwrite this?\".\n\nIt's very important to understand that I want you to interpret these as\n**reactions**. I am not claiming to know what's right. I am not demanding you\nmake any change. I am trying to give you the gift of knowing what goes inside\nthe head of one person when they read your work. It's a very vulnerable thing\nfor me to do – giving you an unfiltered view into my head – and I find that I'm\nbest at it when I don't worry about what you'll think about what I think.\n\nSo when reading my feedback, take with with a grain of salt. I am just one\nperson. I may not be your intended audience. I can be wrong. Maybe I misread\nsomething. My reactions are intended for you to read, reflect on, and then do\nwhat you want. They are a single data point. They do not need any reply. They do\nnot require any action on your part. If you think my reaction is irrelevant,\nignore it! Let my reactions wash over you, and then do what you think is best.\n\n## Receiving feedback\n\nI love to receive feedback, and really appreciate it when it's given in any\nform. I see it as my responsibility to make it as easy and painless for you to\ngive me feedback.\n\nI absolutely love friction logs. They're one of the best gifts you can give me.\n[Here's a great guide on how to write one](https://blog.sbensu.com/posts/friction-logs/),\nbut don't feel like yours has to be so structured. If easier, just turn on your\ncamera, screen recorder and mic, and talk me through your feedback.\n\n## Rough edges\n\nI have a couple of rough edges that I am aware of. While I'm working on them and\nhope you don't have to experience them, I find it helpful for folks to know what\nthey are just in case.\n\nIf I'm making you feel bad, it's likely because I'm making you feel flustered or\ndumb. I hope I never do this to you. If I do, know that I am not doing it on\npurpose, and am sorry about it. Likely it means that I'm feeling stupid or\noverwhelmed, and am trying to protect myself by projecting the stupid onto you.\nIf you're brave and self-aware enough to say, \"You're making me feel stupid\",\nthose are magic words to fix the situation. It will help me adjust my own\nattitude, de-escalate, and apologize.\n\nAlso know that my first reaction to an idea is not the final word on it, so\ndon't try to read into it too much. If you think I'm wrong, that's great! It\nmeans that there's something for one or both of us to learn. I admire people who\ncan self-advocate for themselves and their beliefs. If I am being dismissive of\nyou or your ideas, please call me out on it, so I can give them the focus they\ndeserve.\n\n## Tools\n\nThis one is a bit random, but I want everyone I work with to use the following\ntools, or equivalents. Otherwise, it's just annoying to watch you use your\ncomputer 😝. They are quick to install. Then you just have to pick keyboard\nshortcuts and learn them. It's a very worthwhile investment. You won't know how\nyou lived without them.\n\n1. [Clipboard manager](https://maccy.app/) - if you think cmd+c is useful, wait\n till you can cmd+c multiple things\n\n2. [Window manager](https://rectangleapp.com/) - for looking at things\n side-by-side.\n\n3. [Screen Recording](https://cleanshot.com/) - for async communication. You can\n skip a lot of meetings with a good screen recording.\n\n## Parting ways\n\nI want to build a work culture where we celebrate people for:\n\n1. **Long tenures**. Folks should feel like there's no artificial ceiling to\n learning, growing, and compensation on my team.\n2. **Parting on good terms**. There's not always room for everyone's dreams at\n every company, and we want to celebrate our people chasing their dreams,\n wherever that takes them.\n\nIf you're thinking of quitting on me, I'd first ask that you let me know that\nyou're unhappy or thinking of a move as early as possible so that I can do all\nthat I possibly can to fix things to make you happy to stay. Even if it seems\nimpossible, please let me know, because you might be wrong. If it doesn't seem\nlike I understand the urgency of your request, let me know that too.\n\nTypically, when an employee wants to leave an employer, they keep that knowledge\nsecret until they are ready to hand-in their two-weeks notice. This is very\nsensible, considering that the employer may decide after hearing this to\nimmediately fire the employee or otherwise treat the employee badly.\n\nI find this pattern sub-optimal and would like to propose an alternative to\nanyone I manage: trust me like your mentor that has your best interests at\nheart. If you are unhappy working with me or plan to leave, let me know as soon\nas possible, so that I can address it or prepare. In return for this trust, I\ncan promise that I will treat you right. I won't fire you or be upset. On the\ncontrary, I'll be incredibly grateful, and even more helpful you in your next\nsteps.\n\nI have the receipts. I told this to an employee who later took me up on it. She\neven asked me to even be her reference for her future employer. I gave a glowing\nreference, she got the job, and we had a very pleasant final weeks together. If\nyou'd like to speak to her as a reference, let me know! I hope to treat you so\nwell in this situation that you too will be an employee reference for me in the\nfuture.",[18,100],"pulls","branches",1,"forks","envVars",{"_229":26,"_231":26},"connections",{"_229":26,"_230":26},"count","unfilledCount","emptyCount",{"_36":193,"_13":18,"_65":101,"_46":-5,"_38":39,"_194":195,"_196":24,"_40":320,"_42":26,"_68":102,"_198":-5,"_70":30,"_199":-5,"_250":321,"_17":322},{"_36":217,"_13":100,"_65":99,"_46":101,"_38":39,"_194":94,"_196":24,"_40":317,"_42":26,"_68":21,"_198":219,"_70":30,"_199":-5,"_250":318,"_17":319},{"_36":213,"_13":67,"_65":66,"_46":101,"_38":39,"_194":43,"_196":24,"_40":314,"_42":26,"_68":69,"_198":215,"_70":30,"_199":-5,"_250":315,"_17":316},{"_36":209,"_13":91,"_65":90,"_46":101,"_38":39,"_194":85,"_196":24,"_40":311,"_42":26,"_68":69,"_198":211,"_70":30,"_199":-5,"_250":312,"_17":313},{"_36":205,"_13":82,"_65":81,"_46":101,"_38":39,"_194":76,"_196":24,"_40":308,"_42":26,"_68":69,"_198":207,"_70":30,"_199":-5,"_250":309,"_17":310},{"_36":300,"_13":301,"_65":302,"_46":-5,"_38":39,"_194":303,"_196":24,"_40":304,"_42":26,"_68":21,"_198":305,"_70":30,"_199":-5,"_250":306,"_17":307},{"_36":292,"_13":293,"_65":294,"_46":-5,"_38":39,"_194":295,"_196":24,"_40":296,"_42":26,"_68":21,"_198":297,"_70":30,"_199":-5,"_250":298,"_17":299},{"_36":285,"_13":100,"_65":286,"_46":-5,"_38":39,"_194":287,"_196":24,"_40":288,"_42":223,"_68":21,"_198":289,"_70":30,"_199":-5,"_250":290,"_17":291},{"_36":277,"_13":278,"_65":279,"_46":-5,"_38":39,"_194":280,"_196":24,"_40":281,"_42":26,"_68":21,"_198":282,"_70":30,"_199":-5,"_250":283,"_17":284},{"_36":270,"_13":271,"_65":272,"_46":-5,"_38":39,"_194":223,"_196":24,"_40":273,"_42":26,"_68":69,"_198":274,"_70":30,"_199":-5,"_250":275,"_17":276},{"_36":262,"_13":263,"_65":264,"_46":-5,"_38":39,"_194":140,"_196":24,"_40":265,"_42":266,"_68":69,"_198":267,"_70":30,"_199":-5,"_250":268,"_17":269},{"_36":253,"_13":254,"_65":116,"_46":-5,"_38":39,"_194":255,"_196":24,"_40":256,"_42":257,"_68":258,"_198":259,"_70":30,"_199":-5,"_250":260,"_17":261},{"_36":245,"_13":246,"_65":247,"_46":-5,"_38":39,"_194":223,"_196":24,"_40":248,"_42":26,"_68":69,"_198":249,"_70":30,"_199":-5,"_250":251,"_17":252},"483cd89a-de23-11f0-816e-42dde27851f2","post-helpers.tsx","019b3f1b-f949-7608-a498-68701de8f45d",["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}","children",[],[246],"87a3d5a0-f7fb-11f0-a858-42dde27851f2","main.tsx",89,["D",1769132013292],14,"http","import { Homepage } from \"./index.tsx\";\nimport { Hono } from \"npm:hono@4.0.0\";\nimport { renderPage } from \"./post-helpers.tsx\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst app = new Hono();\n\n// Serve the stars PNG for nighttime background from blob storage\napp.get(\"/stars.png\", async (c) => {\n try {\n const response = await blob.get(\"ch_stars_compressed_90\");\n if (!response) {\n return c.text(\"Stars image not found\", 404);\n }\n // For binary files like PNG, use arrayBuffer\n const imageData = await response.arrayBuffer();\n return c.body(imageData, 200, {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=86400\"\n });\n } catch (e) {\n console.error(\"Error fetching blob:\", e);\n return c.text(\"Error: \" + String(e), 500);\n }\n});\n\n// Serve the dark mode favicon PNG from blob storage\napp.get(\"/favicon-dark.png\", async (c) => {\n try {\n const response = await blob.get(\"ch_favicon_32x32\");\n if (!response) {\n return c.text(\"Favicon image not found\", 404);\n }\n const imageData = await response.arrayBuffer();\n return c.body(imageData, 200, {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=86400\"\n });\n } catch (e) {\n console.error(\"Error fetching favicon blob:\", e);\n return c.text(\"Error: \" + String(e), 500);\n }\n});\n\napp.get(\"/\", (c) => Homepage(c.req.raw));\napp.get(\"/*\", (c) => renderPage(c.req.raw));\napp.onError((e) => Promise.reject(e));\nexport default app.fetch;",[],[254],"b339ccc2-42b2-11f1-8c86-42b51c65c3df","index.tsx","019b3f1b-f949-7608-a498-60d158246340",["D",1777347070351],70,"/** @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// Calculate perceived brightness of an RGB color (0 = black, 1 = white)\nfunction getLuminance(rgbString: string): number {\n const match = rgbString.match(/rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$/);\n if (!match) return 1; // default to bright if can't parse\n const [r, g, b] = [match[1], match[2], match[3]].map(Number);\n // Perceived brightness formula\n return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\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; isDark: boolean }> {\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 const topLuminance = getLuminance(data.css.themeColor);\n const bottomLuminance = getLuminance(data.css.fallbackColor);\n return {\n gradient: data.css.background,\n topColor: data.css.themeColor,\n bottomColor: data.css.fallbackColor,\n isDark: topLuminance < 0.15 && bottomLuminance < 0.15,\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 isDark: false,\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 = sfSky.isDark \n ? \"/favicon-dark.png\" \n : getFaviconSvg(sfSky.topColor, sfSky.bottomColor);\n const faviconType = sfSky.isDark ? \"image/png\" : \"image/svg+xml\";\n\n return new Response(\n renderToString(\n \n \n shapedlines\n \n \n \n \n \n \n

History · posts