\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}",[],[152,169],[152],{"_107":177,"_99":178,"_153":179,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":180,"_104":33,"_160":181,"_162":182,"_163":27,"_164":-5,"_165":183,"_102":184},"43225072-fdfc-11ef-a2e7-569c3dd06744","README.md","44df26a2-d49f-4496-8a11-e99283ae67f9",["D",1741644537119],"file","# stevekrouse.com - my personal website\n\nThis project hosts my personal website.\n\nIt used to [live on Github Pages](https://github.com/stevekrouse/stevekrouse.github.io), which is why I proxy over requests to certain blog posts over to the Github Pages site still.\n\n## Todos \n\n- [ ] Speed up page load by loading sqlite data later like in @healeycodes/steve_web\n- [ ] Store more (legally storable) analytics data, and maybe make a sparkline!\n- [ ] Add some sort of way to contact me\n- [ ] Move over all my blog posts from Github Pages (maybe into @std/blob as a CMS?)",[],[178],{"_107":186,"_99":187,"_153":188,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":189,"_104":33,"_160":190,"_162":191,"_163":27,"_164":-5,"_165":192,"_102":193},"43225252-fdfc-11ef-a2e7-569c3dd06744","analytics.ts","0b674ff4-a7c6-4e88-9f69-c31c10d24818",["D",1741644537119],"script","import { sqlite } from \"https://esm.town/v/std/sqlite?v=5\";\n\nexport async function getHits() {\n const [, , { rows: [[monthHits]] }, { rows: [[todayHits]] }] = await sqlite.batch([\n \"CREATE TABLE IF NOT EXISTS stevekrouse_com_hits (timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)\",\n \"INSERT INTO stevekrouse_com_hits DEFAULT VALUES\",\n \"SELECT COUNT(*) FROM stevekrouse_com_hits where strftime('%m', timestamp) = strftime('%m', 'now') AND strftime('%Y', timestamp) = strftime('%Y', 'now')\",\n \"SELECT COUNT(*) from stevekrouse_com_hits where strftime('%m', timestamp) = strftime('%m', 'now') AND strftime('%Y', timestamp) = strftime('%Y', 'now') AND strftime('%d', timestamp) = strftime('%d', 'now')\",\n ]);\n if (todayHits % 100 === 0) email({ subject: `You got ${todayHits} hits today! (${monthHits} this month)` });\n return { monthHits, todayHits };\n}",[],[187],{"_107":195,"_99":103,"_153":196,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":197,"_104":33,"_160":190,"_162":198,"_163":27,"_164":-5,"_165":199,"_102":200},"43226b52-fdfc-11ef-a2e7-569c3dd06744","4bdb8572-7375-4b2c-86fe-9a1d5e37e389",["D",1741644537119],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nconst linkClass = \"text-blue-500 hover:underline\";\nexport const Link = (\n { children, href }: {\n children?: React.ReactNode;\n href: string;\n },\n) => {children};",[],[103],{"_107":202,"_99":203,"_153":204,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":205,"_104":33,"_160":190,"_162":206,"_163":27,"_164":-5,"_165":207,"_102":208},"43226c7e-fdfc-11ef-a2e7-569c3dd06744","homepage.tsx","53964fb5-ef1b-4a02-b5d7-4cafa736111f",["D",1741644537119],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { getHits } from \"./analytics.ts\";\nimport { Link } from \"./helpers.tsx\";\n\nconst dateClass = \"text-xs text-gray-400 font-mono mr-1 hidden sm:inline-block\";\n\nexport async function Homepage(request: Request) {\n let monthHits, todayHits;\n try {\n const hits = await getHits();\n monthHits = hits.monthHits;\n todayHits = hits.todayHits;\n } catch (e) {\n console.log(\"Caught database error: \", e);\n }\n return new Response(\n renderToString(\n \n \n Steve Krouse\n \n \n \n \n

Steve Krouse

\n 👋 Hi, I'm Steve. I live in Prospect Heights, Brooklyn.\n

\n I build Val Town, a social website to code in the cloud.\n

\n {monthHits && todayHits\n ? (\n

\n This site was{\" \"}\n built in Val Town. It was\n viewed {todayHits.toLocaleString()} times today, and {monthHits.toLocaleString()} times in{\" \"}\n {new Date().toLocaleString(\"default\", { month: \"long\", year: \"numeric\" })}.\n

\n )\n : null}\n

Projects

\n 2022 Jul -\n Val Town\n
\n 2022 Sep -\n Date Me Directory\n
\n 2022 Jan -\n Zaplib\n
\n 2021 Mar -\n Compose\n
\n 2017 Jul -\n Future of Coding\n
\n 2016 May -\n WoofJS\n
\n 2015 Sep -\n The Coding Space Curriculum\n
\n 2015 Jul -\n The Coding Space\n
\n 2014 Jan -Software Engineer @{\" \"}\n Looker\n
\n 2013 Jun -Software Engineer @{\" \"}\n First Round Capital\n
\n 2013 Jan -Partner @{\" \"}\n Dorm Room Fund\n
\n 2012 Sep -Computer Science @{\" \"}\n University of Pennsylvania\n

\n\n

Essays

\n 2025 Feb -\n \n I proposed to my girlfriend in Quordle\n \n
\n 2022 Nov -\n \n End-programmer Programming\n \n
\n 2019 Apr -\n \n Lunch with Alan Kay: how to become educated enough to invent the future\n \n
\n 2018 Oct -\n \n The \"Next Big Thing\" is a Room\n \n
\n 2017 Oct -\n Life Plan\n
\n 2017 Oct -\n \n WoofJS.com One Year Later\n \n
\n 2017 Jul -\n \n The Coding Space: Two Year Update\n \n
\n 2017 Jul -\n \n Learn to code in two-player mode\n \n
\n 2017 May -\n \n The Rose Project (April 2017)\n \n
\n 2017 Mar -\n The Rose Project (March 2017)\n
\n 2017 Jan -\n \n Resources for creating front-end programming languages and frameworks in 2017\n \n
\n 2016 Nov -\n \n Types are shapes — a graphical programming exploration\n \n
\n 2016 Nov -\n \n TEDD — Technologically-Enabled Direct Democracy\n \n
\n 2016 Aug -\n Goodbye, Seymour\n
\n 2016 Jul -\n \n The Trick to Teach Anonymous Functions to 11-Year-Olds\n \n
\n 2016 Jul -\n \n Scratch Has a Marketing Problem\n \n
\n 2016 Jul -\n \n WoofJS — making JavaScript learnable\n \n
\n 2016 Jun -\n \n The Coding Space: A year in review\n \n
\n 2016 Feb -\n \n The 4 Steps to Giving Magical Praise\n \n
\n 2016 Jan -\n \n \"Why do we need to learn this?\"\n \n
\n 2015 Dec -\n The Lens Lens\n
\n 2015 Dec -\n The College of the Future\n
\n 2015 Dec -\n \n Stop Paying $250k for a Degree and a Network\n \n
\n 2015 Nov -\n \n Incidentally for machines\n \n
\n 2015 Jun -\n A Cursory Education On Education\n
\n 2014 Jun -\n \n One year ago today I blogged that I'd never drop out of college\n \n
\n 2013 Sep -\n \n Making friends at the world's largest hackathon\n \n
\n 2013 Jul -\n Be a quitter\n
\n 2013 Jun -\n What It Really Means To Drop Out\n
\n 2013 May -\n Paying it Forward\n
\n 2013 Mar -\n Being Nice Matters\n
\n 2013 Nov -\n \n When nobody's watching\n \n
\n 2013 Nov -\n Stuffed Animal Priorities\n
\n 2013 Feb -\n \n Medieval Luxury, Modern Torture, and Education 2.0\n \n
\n 2013 Jan -\n Theseus and The Minotaur\n
\n 2012 Dec -\n IP And Innovation: A Software Case Study\n
\n 2012 Dec -\n \n Scheming Sororities and the Gale-Shapley Algorithm\n \n
\n 2012 Dec -\n The Arbitrary and The Elegant\n
\n 2012 Nov -\n Start Small\n

\n\n

Podcasts

\n 2023 Aug -\n JSParty × val.town with Steve Krouse\n
\n 2023 Aug -\n \n Scaling Devtools × val.town with Steve Krouse\n \n
\n 2023 July -\n \n Supper Club × val.town with Steve Krouse\n \n
\n 2023 Jul -\n \n CS Primer – What makes programming fun?\n \n
\n 2023 Apr -\n Devtools.fm – val.town\n
\n 2017 Jul -\n Future of Coding Podcast\n
\n 2016 Oct -\n \n Off Trail Learning - Dropping Out of College & the Silicon Valley Dream\n \n

\n\n

\n Twitter |{\" \"}\n Github |{\" \"}\n LinkedIn\n

\n \n ,\n ),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n // TODO only when on main - \"Cache-Control\": \"public, max-age=3600, stale-while-revalidate=0\",\n },\n },\n );\n}",[],[203],{"_107":210,"_99":211,"_153":212,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":213,"_104":33,"_160":171,"_162":214,"_163":27,"_164":-5,"_165":215,"_102":216},"43228c36-fdfc-11ef-a2e7-569c3dd06744","index.tsx","f5c179c1-26ba-4f08-b89d-b5886751e5af",["D",1741644537119],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { email } from \"https://esm.town/v/std/email?v=11\";\nimport { Homepage } from \"./homepage.tsx\";\nimport Proposal from \"./posts/proposal.tsx\";\n\nexport default async (request: Request) => {\n const url = new URL(request.url);\n if (url.pathname === \"/favicon.ico\") return new Response(null, { status: 404 });\n\n if (url.pathname === \"/proposal\") {\n return Proposal(request);\n }\n\n if (url.pathname !== \"/\") {\n const githubPagesUrl = `https://stevekrouse.github.io${url.pathname}${url.search}`;\n const response = await fetch(\n new Request(githubPagesUrl, {\n method: request.method,\n headers: new Headers({ ...Object.fromEntries(request.headers), \"User-Agent\": \"Val Town\" }),\n }),\n );\n if (response.status !== 404) return response;\n return new Response(\n renderToString(

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

),\n { status: 404, headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n if (url.pathname === \"/\") {\n return Homepage(request);\n }\n};",[],[211],"files",[150,167,176,185,194,201,209],"counts",{"_221":33,"_222":138,"_223":33,"_224":33},"pulls","branches","forks","envVars","contents",[],{"_107":195,"_99":103,"_153":196,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":228,"_104":33,"_160":190,"_162":198,"_163":27,"_164":-5,"_102":229},["D",1741644537119],[103],"upstream",{"_107":232,"_99":100,"_115":233,"_116":-5,"_113":114,"_21":234},"972467e0-e985-11ef-b2c8-e6cdfca9ef9f","The personal site of Steve Krouse, stevekrouse.com",{"_97":235,"_134":236},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":241,"_148":245,"_217":267,"_181":268,"_225":270,"_230":271,"_280":27,"_281":-5},{"_107":108,"_99":100,"_109":242,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":243,"_136":244},["D",1741644537119],{"_97":98,"_134":135},{"_104":138,"_99":43,"_107":139,"_140":108,"_141":142,"_143":144,"_145":114,"_146":147},[246,252,255,258,261,264],{"_107":151,"_99":152,"_153":154,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":159,"_104":33,"_160":161,"_162":-5,"_163":27,"_164":-5,"_165":247,"_102":251},[248],{"_107":168,"_99":169,"_153":119,"_155":154,"_156":139,"_157":138,"_158":121,"_109":170,"_104":33,"_160":171,"_162":172,"_163":27,"_164":-5,"_165":249,"_102":250},[],[152,169],[152],{"_107":177,"_99":178,"_153":179,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":180,"_104":33,"_160":181,"_162":182,"_163":27,"_164":-5,"_165":253,"_102":254},[],[178],{"_107":186,"_99":187,"_153":188,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":189,"_104":33,"_160":190,"_162":191,"_163":27,"_164":-5,"_165":256,"_102":257},[],[187],{"_107":195,"_99":103,"_153":196,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":197,"_104":33,"_160":190,"_162":198,"_163":27,"_164":-5,"_165":259,"_102":260},[],[103],{"_107":202,"_99":203,"_153":204,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":205,"_104":33,"_160":190,"_162":206,"_163":27,"_164":-5,"_165":262,"_102":263},[],[203],{"_107":210,"_99":211,"_153":212,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":213,"_104":33,"_160":171,"_162":214,"_163":27,"_164":-5,"_165":265,"_102":266},[],[211],[246,248,252,255,258,261,264],{"_107":195,"_99":103,"_153":196,"_155":-5,"_156":139,"_157":138,"_158":121,"_109":228,"_104":33,"_160":190,"_162":198,"_163":27,"_164":-5,"_102":269},[103],[],{"_107":142,"_109":272,"_273":274,"_99":43,"_140":232,"_104":275,"_141":-5,"_143":-5,"_276":277,"_132":27,"_113":114,"_278":235,"_279":100},["D",1739394544742],"updatedAt",["D",1744743360433],377,"lockfileKey","1744743362205-esm.town_v_stevekrouse_stevekrouse_dot_com@377-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]