\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}",[],[160,200],{"_104":210,"_96":211,"_161":212,"_163":162,"_164":146,"_165":213,"_167":119,"_106":214,"_101":215,"_170":184,"_172":216,"_173":22,"_174":-5,"_175":217,"_99":218},"0cd5bc1c-f4a4-11f0-a39f-42dde27851f2","nvc.html","a05348a0-f2e8-11f0-a6db-42dde27851f2",523,["D",1768764587512],4,"\n \n NVC\n \n \n \n

\n \n What are you feeling?\n

\n \n

Peaceful

calm

content

satisfied

secure

centered

relieved

confident

comfortable

composed

fulfilled

Affectionate

warm

tender

appreciative

passionate

compassionate

loving

touched

Happy

glad

pleased

excited

joyful

delighted

amused

encouraged

grateful

hopeful

thrilled

moved

Playful

energetic

expansive

adventurous

mischievous

silly

light

hearted

enthusiastic

lively

optimistic

Interested

inspired

curious

surprised

stimulated

amazed

absorbed

fascinated

engaged

eager

enchanted

intrigued

motivated

Rested

alert

alive

invigorated

refreshed

rejuvenated

relaxed

renewed

Sad

lonely

hopeless

hurt

sorrowful

grief

despair

discouraged

disappointed

helpless

Confused

hesitant

indifferent

suspicious

puzzled

troubled

bewildered

baffled

conflicted

torn

uncertain

skeptical

Scared

terrified

startled

shocked

nervous

anxious

worried

desperate

afraid

cautious

insecure

Uncomfortable

uneasy

embarrassed

fragile

vulnerable

ashamed

distressed

disturbed

bored

restless

jealous

impatient

exasperated

stressed

envious

tense

concerned

tired

weary

exhausted

overwhelmed

Angry

irritable

annoyed

agitated

frustrated

disgusted

furious

enraged

mad

angry

bitter

\n \n \n What are you needing?\n \n \n

Subsistence

air

food

health

movement

safety

rest/sleep

shelter

touch

water

Security

consistency

efficiency

predictability

order

structure

protection

stability

accountability

trust

reassurance

Freedom

autonomy

choice

ease

independence

responsibility

space

spontaneity

empowerment

self-expression

Well-being

health

healing

rest

privacy

self-care

nurturing

Relaxation

humor

joy

play

fun

recreation

pleasure

rejuvenation

Connection

affection

appreciation

attention

closeness

companionship

harmony

intimacy

love

support

tenderness

warmth

To Matter

acceptance

care

compassion

consideration

empathy

kindness

respect

to be heard

to be seen

understanding

Community

belonging

communication

cooperation

equality

inclusion

mutuality

participation

partnership

shared reality

Awareness

authenticity

competence

dignity

growth

honesty

integrity

clarity

discovery

learning

Meaning

aliveness

challenge

consciousness

contribution

creativity

effectiveness

exploration

integration

purpose

Transcendence

beauty

balance

celebration

communion

faith

flow

hope

inspiration

mourning

peace

presence

wholeness

\n \n \n \n",[],[160,211],{"_104":220,"_96":221,"_161":222,"_163":162,"_164":146,"_165":223,"_167":119,"_106":224,"_101":225,"_170":205,"_172":226,"_173":22,"_174":-5,"_175":227,"_99":228},"01354d1e-f068-11ef-9fd8-e6cdfca9ef9f","proposal.tsx","9cf02092-ed59-11ef-b8aa-e6cdfca9ef9f",212,["D",1740151495922],157,"/** @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}",[],[160,221],{"_104":230,"_96":231,"_161":232,"_163":162,"_164":146,"_165":145,"_167":119,"_106":233,"_101":234,"_170":184,"_172":235,"_173":22,"_174":-5,"_175":236,"_99":237},"032cfc54-f9e3-11f0-be05-42dde27851f2","request-for-school.md","1395c7c4-f948-11f0-9da0-42dde27851f2",["D",1769341385456],19,"# Request for School\n\n_Location: Brooklyn, NY_\n\nEver since I went to a magical after-school program\n([IMACS](https://www.imacs.org/)) that helped me go from hating to falling in\nlove with math, I've been extremely passionate about education. To learn about\neducation, I've read dozens of books, visited schools, did a lot of tutoring and\nteaching, and eventually started my own after-school computer science program\nhere in NY, [The Coding Space](https://www.thecodingspace.com/).\n\nMy biggest educational influences are Seymour Papert, The Sudbury Valley School,\nBlake Boles, John Holt, and John Taylor Gatto.\n\nI believe that humans learn best at their own pace, voluntarily,\nself-directedly, so they have a chance to develop an intimate, positive\nemotional relationship with the material.\n\nI believe that a lot of what traditional schools do is actively harmful to\nchildren: large classrooms, curriculum, lectures, tests, homework, etc. These\none-sized-fits-all tools are useful for school systems to manage mass-education\nat scale, but they are woefully worse than more humane and tailored approaches.\n\nFor example,\n[Bloom's Two Sigma Problem](https://en.wikipedia.org/wiki/Bloom%27s_2_sigma_problem)\nshows that literally all students can get A's in all subjects if instead of\ngetting lectured at, they get a personalized tutor. Erik Hoel writes at length\nabout how\n[we used to produce Einsteins through what he calls Aristocratic Tutoring](https://www.theintrinsicperspective.com/p/why-we-stopped-making-einsteins).\nEspecially with modern technology, such as the internet, computers, google,\nwikipedia, not even including recent advances in AI, there are definitely\ncost-effective ways to get every child the attention they deserve. For starters,\nthe flipped classroom model works wonders; that's what I experienced 20 years\nago at IMACS. Secondly, if you remove the overhead of paying for extensive\nadministration of a school, then you can much more affordably scale 1:4 teacher\nto student ratios.\n\nThis is why homeschooling is on the rise. It's growing at an insane rate right\nnow!\n\nYet, it feels depressing to keep a child alone at home all day, learning with\njust mom, and on the computer by themselves.\n\nIt feels like there should be another option that's a vibrant, social place for\nchildren to go that's a culturally rich environment to learn, be creative, make\nfriends, go on adventures, do projects, play make-believe, have fun, learn\nlessons, have space for academic rigor and play, silliness and serious\nproductive fun, time to run around outside and focus time inside, time to read\nwhatever you want, time to go on a walk with friends.\n\nGiven how much I care about this, I fear that I might have to create this\n\"school\" myself: provide this vision, recruit the leaders, teachers, other\nparents and students, to help get it off the ground. If this sounds like your\nlife's work, please reach out!\n\nHowever, I'd be much happier to find that a school close enough to my dream,\nclose enough to where we want to live, and just get to send our kids there,\nwithout having to start it ourselves! **Would you know of such a school?**\n\nIs a Montessori school close enough to what I'm looking for? What about Waldorf?\nAre there any other good pre-existing options in my area?\n\nMy fiancé Emily and I are planning to raise a family in Brooklyn, NY. We\ncurrently live in Prospect Heights. We plan to have 2-3 kids.",[],[160,231],{"_104":239,"_96":240,"_161":241,"_163":162,"_164":146,"_165":242,"_167":119,"_106":243,"_101":244,"_170":205,"_172":245,"_173":22,"_174":-5,"_175":246,"_99":247},"3547e492-08cb-11f0-97bd-569c3dd06744","survey.tsx","0f93339a-08b8-11f0-a8bf-569c3dd06744",357,["D",1742832931355],15,"/** @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

\n \n \n \"a person surveying a space\" by{\" \"}\n Fal Demo App\n \n

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}",[],[160,240],[160],{"_104":250,"_96":251,"_161":252,"_163":-5,"_164":146,"_165":253,"_167":119,"_106":254,"_101":255,"_170":256,"_172":257,"_173":22,"_174":-5,"_175":258,"_99":259},"0781cfb4-f948-11f0-a24c-42dde27851f2","PostTemplate.tsx","527e932c-f947-11f0-9fb8-42dde27851f2",598,["D",1769274820730],3,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PostTemplateProps {\n title?: string;\n description?: string;\n ogImage?: string;\n children: React.ReactNode;\n}\n\n/**\n * Template for blog posts with:\n * - Good OG meta tags\n * - Favicon (SK in orange)\n * - Header with link back to homepage\n * - View source link at the top\n * - Water.css styling\n */\nexport function PostTemplate({\n title = \"Steve Krouse\",\n description,\n ogImage,\n children,\n}: PostTemplateProps) {\n // Generate favicon SVG (orange SK on white)\n const faviconSvg = `data:image/svg+xml,${\n encodeURIComponent(`\n \n `)\n }`;\n\n return (\n \n \n {title}\n \n \n \n\n {/* OpenGraph meta tags */}\n \n \n {description && (\n <>\n \n \n \n \n )}\n {ogImage && (\n <>\n \n \n \n \n )}\n \n\n \n \n \n

\n \n ← Steve Krouse\n \n \n view source\n \n

\n {children}\n \n \n );\n}",[],[251],{"_104":261,"_96":179,"_161":262,"_163":-5,"_164":146,"_165":263,"_167":119,"_106":264,"_101":215,"_170":184,"_172":265,"_173":22,"_174":-5,"_175":266,"_99":267},"d5bb30a2-ed58-11ef-b1ef-e6cdfca9ef9f","c0b19768-e985-11ef-9203-e6cdfca9ef9f",38,["D",1739815127043],"# 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?)",[],[179],{"_104":269,"_96":270,"_161":271,"_163":-5,"_164":146,"_165":272,"_167":119,"_106":273,"_101":274,"_170":256,"_172":275,"_173":22,"_174":-5,"_175":276,"_99":277},"c5cc456c-b366-11f0-9268-0224a6c84d84","analytics.ts","feaa60fe-e985-11ef-b2e0-e6cdfca9ef9f",479,["D",1761591443489],8,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nexport async function getHits() {\n const winner = await Promise.race([\n _getHits(),\n new Promise((resolve) => setTimeout(resolve, 1000)),\n ]);\n if (!winner) throw new Error(\"Took longer than 1 second to get hits\");\n return winner;\n}\n\nasync function _getHits() {\n const [, { rows: [[monthHits]] }, { rows: [[todayHits]] }] = await sqlite\n .batch([\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 return { monthHits, todayHits };\n}",[],[270],{"_104":279,"_96":280,"_161":281,"_163":-5,"_164":146,"_165":282,"_167":119,"_106":283,"_101":284,"_170":256,"_172":285,"_173":22,"_174":-5,"_175":286,"_99":287},"ac7f5c48-b366-11f0-9268-0224a6c84d84","helpers.tsx","1fc9543e-efda-11ef-970d-e6cdfca9ef9f",477,["D",1761591401040],28,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nconst linkClass = \"text-blue-500 hover:underline\";\nexport const Link = (\n { children, href }: {\n children?: React.ReactNode;\n href: string;\n },\n) => {children};",[],[280],{"_104":289,"_96":290,"_161":291,"_163":-5,"_164":146,"_165":292,"_167":119,"_106":293,"_101":294,"_170":256,"_172":295,"_173":22,"_174":-5,"_175":296,"_99":297},"c027c9ca-f852-11f0-a0bc-42dde27851f2","index.tsx","a181cbd8-e985-11ef-acab-e6cdfca9ef9f",583,["D",1769169474306],48,"/** @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() {\n console.log(\"rendering homepage\");\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

\n Steve Krouse\n

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

\n I build{\" \"}\n Val Town, a collaborative\n website to code in the cloud.\n

\n I founded the Future of Coding podcast & community, and\n co-cofounded The Coding Space. I've worked at Looker, First Round\n Capital, and studied computer science at Penn.\n

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

\n This site was{\" \"}\n \n built in Val Town\n . It was viewed {todayHits.toLocaleString()}{\" \"}\n times today, and {monthHits.toLocaleString()} times in{\" \"}\n {new Date().toLocaleString(\"default\", {\n month: \"long\",\n year: \"numeric\",\n })}.\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 \n Zaplib\n \n
\n 2021 Mar -\n Compose\n
\n 2017 Jul -\n \n Future of Coding\n \n
\n 2016 May -\n \n WoofJS\n \n
\n 2015 Jul -\n The Coding Space\n

\n\n

Essays

\n 2026 Jan -\n \n Advice to college students in 2026\n \n
\n 2025 Mar -\n \n Find a model\n \n
\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\n 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 \n The Rose Project (March 2017)\n \n
\n 2017 Jan -\n \n Resources for creating front-end programming languages and\n 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 \n Goodbye, Seymour\n \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 \n The College of the Future\n \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 \n A Cursory Education On Education\n \n
\n 2014 Jun -\n \n One year ago today I blogged that I'd never drop out of\n 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 \n What It Really Means To Drop Out\n \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 \n Stuffed Animal Priorities\n \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 \n IP And Innovation: A Software Case Study\n \n
\n 2012 Dec -\n \n Scheming Sororities and the Gale-Shapley Algorithm\n \n
\n 2012 Dec -\n \n The Arbitrary and The Elegant\n \n
\n 2012 Nov -\n Start Small\n

\n\n

Podcasts

\n 2023 Aug -\n \n JSParty × val.town with Steve Krouse\n \n
\n 2023 Aug -\n \n Scaling Devtools × val.town with Steve Krouse\n \n
\n 2023 Jul -\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 \n Devtools.fm – val.town\n \n
\n 2017 Jul -\n \n Future of Coding Podcast\n \n
\n 2016 Oct -\n \n Off Trail Learning - Dropping Out of College & the Silicon\n 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}",[],[290],{"_104":299,"_96":300,"_161":117,"_163":-5,"_164":146,"_165":301,"_167":119,"_106":302,"_101":303,"_170":205,"_172":304,"_173":22,"_174":95,"_175":305,"_99":306},"ef7051b6-f947-11f0-98d2-42dde27851f2","main.tsx",597,["D",1769274780352],31,"import { Homepage } from \"./index.tsx\";\nimport { Hono } from \"npm:hono@4.0.0\";\nimport { renderPage } from \"./post-helpers.tsx\";\nimport { listFilesByPath } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst SOURCE = \"https://www.val.town/x/stevekrouse/stevekrouse_dot_com\";\n\n// Cache blog posts metadata for source links\nlet blogPostsCache: Map | null = null;\n\nasync function getBlogPostsMap() {\n if (blogPostsCache) return blogPostsCache;\n \n const files = await listFilesByPath(\"posts\");\n blogPostsCache = new Map(\n files.map(file => {\n const slug = file.name.split(\".\")[0].toLowerCase();\n const sourceUrl = `${SOURCE}/code/${file.path}`;\n return [slug, sourceUrl];\n })\n );\n \n return blogPostsCache;\n}\n\nfunction getBlogPostBySlug(slug: string, postsMap: Map) {\n const sourceUrl = postsMap.get(slug);\n if (!sourceUrl) return null;\n return { valSourceURL: sourceUrl };\n}\n\nconst app = new Hono();\n\napp.get(\"/\", () => Homepage());\napp.get(\"/favicon.ico\", () => new Response(null, { status: 404 }));\n\napp.get(\"/source\", async (c) => {\n const referer = c.req.header(\"referer\");\n if (!referer) return c.redirect(SOURCE);\n \n const url = new URL(referer);\n const slug = url.pathname.slice(1); // Remove leading slash\n \n if (!slug) return c.redirect(SOURCE); // Homepage\n \n const postsMap = await getBlogPostsMap();\n const post = getBlogPostBySlug(slug, postsMap);\n \n if (!post) return c.redirect(SOURCE);\n return c.redirect(post.valSourceURL);\n});\n\napp.get(\"/*\", (c) => renderPage(c.req.raw));\n\napp.onError((e) => Promise.reject(e));\n\nexport default app.fetch;\n",[],[300],{"_104":308,"_96":309,"_161":310,"_163":-5,"_164":146,"_165":311,"_167":119,"_106":312,"_101":183,"_170":256,"_172":313,"_173":22,"_174":-5,"_175":314,"_99":315},"990cba44-f947-11f0-b461-42dde27851f2","post-helpers.tsx","68026ad8-b366-11f0-9979-0224a6c84d84",595,["D",1769274635398],"/** @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\";\nimport ValTown from \"npm:@valtown/sdk@1.9.0\";\nimport { PostTemplate } from \"./PostTemplate.tsx\";\n\nasync function loadFile(file: ValTown.Vals.Files.FileRetrieveResponse) {\n if (file.name.endsWith(\".tsx\")) {\n return (await import(file.links.module)).default;\n } else if (file.name.endsWith(\".html\")) {\n const html = await readFile(file.path);\n return () =>\n new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n } else if (file.name.endsWith(\".md\")) {\n const markdown = await readFile(file.path);\n // Extract title from first h1 in markdown, or use filename\n const titleMatch = markdown.match(/^#\\s+(.+)$/m);\n const title = titleMatch ? titleMatch[1] : file.name.replace(\".md\", \"\");\n \n return function () {\n return new Response(\n renderToString(\n \n {markdown}\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}\n\nlet posts;\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}\n",[],[309],"files",[158,177,188,198,209,219,229,238,249,260,268,278,288,298,307],"counts",{"_320":32,"_321":322,"_323":255,"_324":325,"_328":329},"pulls","branches",2,"forks","envVars",{"_326":32,"_327":32},"count","emptyCount","connections",{"_326":32,"_330":32},"unfilledCount","contents",[],{"_104":210,"_96":211,"_161":212,"_163":162,"_164":146,"_165":213,"_167":119,"_106":334,"_101":215,"_170":184,"_172":216,"_173":22,"_174":-5,"_99":335},["D",1768764587512],[160,211],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":44,"_99":100,"_102":344,"_184":349,"_352":353,"_373":374,"_381":-7,"_382":32,"_383":22},{"_104":105,"_96":97,"_106":345,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":346,"_138":347,"_143":348,"_155":22},["D",1739394544742],{"_94":95,"_136":137},{"_94":95,"_140":137,"_14":115,"_141":142},{"_101":145,"_96":44,"_104":146,"_147":105,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":97,"_154":95},{"_104":210,"_96":211,"_161":212,"_163":162,"_164":146,"_165":213,"_167":119,"_106":350,"_101":215,"_170":184,"_172":216,"_173":22,"_174":-5,"_99":351},["D",1768764587512],[160,211],"history",[354,356,360,364,368],{"_104":210,"_164":146,"_161":212,"_96":211,"_172":216,"_170":184,"_101":215,"_163":162,"_106":355,"_165":213,"_174":-5},["D",1768764587512],{"_104":357,"_164":146,"_161":212,"_96":211,"_172":216,"_170":184,"_101":255,"_163":162,"_106":358,"_165":359,"_174":-5},"a3fc9790-f2e8-11f0-af8f-42dde27851f2",["D",1768574144586],516,{"_104":361,"_164":146,"_161":212,"_96":211,"_172":73,"_170":184,"_101":322,"_163":162,"_106":362,"_165":363,"_174":-5},"a32ae3c6-f2e8-11f0-a527-42dde27851f2",["D",1768574143220],515,{"_104":365,"_164":146,"_161":212,"_96":211,"_172":73,"_170":256,"_101":169,"_163":162,"_106":366,"_165":367,"_174":-5},"a325c4c2-f2e8-11f0-a527-42dde27851f2",["D",1768574143185],514,{"_104":369,"_164":146,"_161":212,"_96":370,"_172":73,"_170":256,"_101":32,"_163":162,"_106":371,"_165":372,"_174":-5},"a05347c4-f2e8-11f0-a6db-42dde27851f2","new-file-8921.ts",["D",1768574138455],513,"versions",[375,377,378,379,380],{"_184":354,"_376":356},"previous",{"_184":356,"_376":360},{"_184":360,"_376":364},{"_184":364,"_376":368},{"_184":368,"_376":-5},"versionNumber","page","hasNext","actionData","errors"]

stevekrouse

stevekrouse_dot_com

History for nvc.html