[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_351":352,"_353":354},"routes/_app.x.$handle.$name",{"_109":108,"_38":51,"_118":96,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":31,"_135":136,"_137":55,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":55,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":55,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",47,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f0cb230c-3c43-4d0b-b12b-35f0ce216fb1","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","html.tsx","latestPath","fileId","ad0139e8-3741-11f1-8130-42b51c65c3df","name","fileType","script","content","/** @jsxImportSource https://esm.sh/react */\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\nimport { JSX } from \"npm:react\";\nimport { renderToString } from \"npm:react-dom/server\";\n\nconst ENDPOINT = httpEndpoint(\"./main.tsx\");\n\n// --- Signup form HTML ---\n\nexport function fetchSignupHtml() {\n return `\n \n \n Sign up for Make It Stick (in 10 days, via email)\n \n \n

Sign up for Make It Stick (in 10 days, via email)

\n \n \n \n `;\n}\n\n// --- Confirmation email HTML ---\n\ninterface FetchVerificationEmailHtmlParams {\n email: string;\n token: string;\n reVerifying?: boolean;\n}\n\nexport function fetchConfirmationHtml({ email, token, reVerifying }: FetchVerificationEmailHtmlParams) {\n const confirmationLink = `https://petemillspaugh.com/make-it-stick/email-confirmation?email=${email}&token=${token}`;\n const html = `\n

\n ${reVerifying ? \"Looks like your verification link expired.\" : \"\"}\n Click here to confirm your subscription. \n

\n `;\n\n return html;\n}\n\n// --- Lesson template HTML ---\n\ninterface QuizQuestion {\n question: string;\n answer: string;\n}\n\ninterface GenerateLessonHtmlParams {\n email: string;\n lesson: number;\n title: string;\n fillBlank: JSX.Element;\n content: JSX.Element;\n quiz: QuizQuestion[];\n}\n\nexport function generateLessonHtml({ email, lesson, title, fillBlank, content, quiz }: GenerateLessonHtmlParams) {\n const lessonJsx = (\n \n \n

{title}

\n\n \n

\n \n The fill-in-the-blank and review questions in this (and every) lesson are there only to strengthen\n learning. What you fill out will be emailed to you once you complete the lesson, but nothing will be\n recorded or \"graded.\"\n \n

\n\n

Pre-lesson writing exercise

\n Fill in the blank below. If you're not sure, just take a guess.\n

\n {fillBlank}\n
\n
\n

\n\n          {content}\n\n          <h2>Review</h2>\n          <p>\n            <em>\n              Take a stab at each question by filling in the blank. Answers will be included in the email with your\n              responses. You are welcome to look back at the lesson content or search the Internet for these questions,\n              of course. I'd encourage you to give each one a try first, though, because the effort of retrieval will\n              lead to more durable learning.\n            </em>\n          </p>\n          {quiz.map(({ question }) => (\n            <div key={question}>\n              <p>{question}</p>\n              <label htmlFor={`ANSWER-${question}`}>Your answer</label>\n              <br />\n              <textarea name={`ANSWER-${question}`} id={`ANSWER-${question}`} rows={2} cols={40} />\n            </div>\n          ))}\n\n          <h2>Reflection</h2>\n          <p>\n            Jot down a few takeways from this lesson. Try explaining new learnings in your own words and connecting the\n            concepts to your existing knowledge and mental models. Come up with your own examples for each topic, if\n            possible.\n          </p>\n          <label htmlFor=\"reflection\">Your notes:</label>\n          <br />\n          <textarea id=\"reflection\" name=\"reflection\" rows={10} cols={40} />\n          <br />\n\n          <button type=\"submit\">Complete lesson</button>\n\n          {lesson < 9\n            ? (\n              <p>\n                The next lesson will arrive in your inbox tomorrow once you've completed this one by clicking the button\n                above.\n              </p>\n            )\n            : (\n              <p>\n                That's a wrap! Congrats, and thank you for going through all 10 lessons. I hope you liked the course.\n              </p>\n            )}\n        </form>\n\n        <hr />\n\n        <footer>\n          <p>If you have any feedback, I'd love to hear it. Send me an email at pete@petemillspaugh.com. Thanks!</p>\n          <p>\n            <a href={`${ENDPOINT}/unsubscribe?email=${email}`}>Unsubscribe</a>\n          </p>\n        </footer>\n      </body>\n    </html>\n  );\n\n  return renderToString(lessonJsx);\n}\n","/** @jsxImportSource https://esm.sh/react */\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\nimport { JSX } from \"npm:react\";\nimport { renderToString } from \"npm:react-dom/server\";\n\nconst ENDPOINT = await httpEndpoint(\"./main.tsx\");\n\n// --- Signup form HTML ---\n\nexport function fetchSignupHtml() {\n  return `\n      <html>\n        <head>\n          <title>Sign up for Make It Stick (in 10 days, via email)</title>\n        </head>\n        <body>\n          <h2>Sign up for <em>Make It Stick (in 10 days, via email)</em></h2>\n          <form action=\"${ENDPOINT}/send-verification\" method=\"post\">\n            <label for=\"name\">First name:</label><br>\n            <input type=\"text\" id=\"name\" name=\"name\" required><br>\n            <label for=\"email\">Email:</label><br>\n            <input type=\"email\" id=\"email\" name=\"email\" required><br><br>\n            <input type=\"submit\" value=\"Sign up\">\n          </form>\n        </body>\n      </html>\n    `;\n}\n\n// --- Confirmation email HTML ---\n\ninterface FetchVerificationEmailHtmlParams {\n  email: string;\n  token: string;\n  reVerifying?: boolean;\n}\n\nexport function fetchConfirmationHtml({ email, token, reVerifying }: FetchVerificationEmailHtmlParams) {\n  const confirmationLink = `https://petemillspaugh.com/make-it-stick/email-confirmation?email=${email}&token=${token}`;\n  const html = `\n    <p>\n      ${reVerifying ? \"Looks like your verification link expired.\" : \"\"}\n      <a href=\"${confirmationLink}\">Click here to confirm your subscription</a>. \n    </p>\n  `;\n\n  return html;\n}\n\n// --- Lesson template HTML ---\n\ninterface QuizQuestion {\n  question: string;\n  answer: string;\n}\n\ninterface GenerateLessonHtmlParams {\n  email: string;\n  lesson: number;\n  title: string;\n  fillBlank: JSX.Element;\n  content: JSX.Element;\n  quiz: QuizQuestion[];\n}\n\nexport function generateLessonHtml({ email, lesson, title, fillBlank, content, quiz }: GenerateLessonHtmlParams) {\n  const lessonJsx = (\n    <html>\n      <body>\n        <h1>{title}</h1>\n\n        <form\n          action={`${ENDPOINT}/complete-lesson?email=${email}&lesson=${lesson}`}\n          method=\"POST\"\n        >\n          <p>\n            <em>\n              The fill-in-the-blank and review questions in this (and every) lesson are there only to strengthen\n              learning. What you fill out will be emailed to you once you complete the lesson, but nothing will be\n              recorded or \"graded.\"\n            </em>\n          </p>\n\n          <h2>Pre-lesson writing exercise</h2>\n          <p>\n            <em>Fill in the blank below. If you're not sure, just take a guess.</em>\n          </p>\n          <label htmlFor=\"fill-in-the-blank\">{fillBlank}</label>\n          <br />\n          <br />\n          <textarea id=\"fill-in-the-blank\" name=\"fill-in-the-blank\" rows={6} cols={40} />\n\n          {content}\n\n          <h2>Review</h2>\n          <p>\n            <em>\n              Take a stab at each question by filling in the blank. Answers will be included in the email with your\n              responses. You are welcome to look back at the lesson content or search the Internet for these questions,\n              of course. I'd encourage you to give each one a try first, though, because the effort of retrieval will\n              lead to more durable learning.\n            </em>\n          </p>\n          {quiz.map(({ question }) => (\n            <div key={question}>\n              <p>{question}</p>\n              <label htmlFor={`ANSWER-${question}`}>Your answer</label>\n              <br />\n              <textarea name={`ANSWER-${question}`} id={`ANSWER-${question}`} rows={2} cols={40} />\n            </div>\n          ))}\n\n          <h2>Reflection</h2>\n          <p>\n            Jot down a few takeways from this lesson. Try explaining new learnings in your own words and connecting the\n            concepts to your existing knowledge and mental models. Come up with your own examples for each topic, if\n            possible.\n          </p>\n          <label htmlFor=\"reflection\">Your notes:</label>\n          <br />\n          <textarea id=\"reflection\" name=\"reflection\" rows={10} cols={40} />\n          <br />\n\n          <button type=\"submit\">Complete lesson</button>\n\n          {lesson < 9\n            ? (\n              <p>\n                The next lesson will arrive in your inbox tomorrow once you've completed this one by clicking the button\n                above.\n              </p>\n            )\n            : (\n              <p>\n                That's a wrap! Congrats, and thank you for going through all 10 lessons. I hope you liked the course.\n              </p>\n            )}\n        </form>\n\n        <hr />\n\n        <footer>\n          <p>If you have any feedback, I'd love to hear it. Send me an email at pete@petemillspaugh.com. Thanks!</p>\n          <p>\n            <a href={`${ENDPOINT}/unsubscribe?email=${email}`}>Unsubscribe</a>\n          </p>\n        </footer>\n      </body>\n    </html>\n  );\n\n  return renderToString(lessonJsx);\n}\n","createdAt",["D",1776091911144],"branchVersion","branchId","68126a76-2772-11f0-b46e-569c3dd06744","id","68121710-2772-11f0-b46e-569c3dd06744","email-course-creator",["D",1746203277423],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","Inspired by Just JavaScript","imageUrl","6906d0a1-0165-46b9-8717-60dfd935316a","pinnedFileId","68167922-2772-11f0-b46e-569c3dd06744","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","631c5cff-7089-4994-8427-c7580df789cd","tursoName","68121710277211f0b46e569c3dd06744","tursoHostname","68121710277211f0b46e569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789501878689],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_117":113},"org",{"_109":108,"_110":111,"_112":113,"_19":62,"_114":115,"_116":31},"branch",{"_13":95,"_38":96,"_49":48,"_97":50,"_98":99,"_100":101,"_102":57,"_103":104,"_105":71,"_106":51,"_107":108},"isOwned",52,"main","projectId","forkedBranchId","798e355a-2772-11f0-b46e-569c3dd06744","forkedBranchVersion",0,"forkedProjectPrivacy","forkedProjectId","798de9ec-2772-11f0-b46e-569c3dd06744","forkedProjectOrgId","projectName","userHandle","pmillspaugh","handle","displayName","Pete Millspaugh","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c3c0aadf-86a9-4c2e-ef01-fb649d6fb000/square512?exp=1789577999&sig=3927c0e321408bea96baab0e45026aeb9713898f5b433aef2217dbb0caa42bf2","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":346,"_53":-5,"_54":55,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":55,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":347,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":348,"_90":349,"_92":350,"_94":31},"tree",[218,230,231,232,233,234,235],"files",[218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235],"counts",{"_208":101,"_209":69,"_210":101,"_211":212,"_213":214},"contents",[152,153,154,155,156,157,158],"upstreamProject",{"_49":104,"_38":148,"_59":149,"_61":150,"_56":57,"_88":151},"upstreamBranch",{"_49":99,"_44":142,"_143":144,"_38":96,"_97":104,"_13":145,"_98":-5,"_100":-5,"_146":147,"_53":-5,"_94":31,"_56":57,"_107":108,"_70":71,"_106":148},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746203306756],"updatedAt",["D",1787929513985],362,"lockfileKey","1787929514187-esm.town_v_pmillspaugh_garden@362-main","garden","https://petemillspaugh.com","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ccc02d2f-ec0d-49a2-d1de-8e476f454c00/square512?exp=1789577999&sig=abbfc30d883a144cc5a3355ce7739a24da42c14b4e8eaaac720819b1508785a8",{"_109":108,"_117":113},{"_49":201,"_38":202,"_36":203,"_161":-5,"_47":48,"_46":204,"_163":55,"_44":205,"_13":101,"_39":206,"_41":-5,"_30":31,"_168":-5,"_33":207},{"_49":195,"_38":196,"_36":197,"_161":-5,"_47":48,"_46":69,"_163":31,"_44":198,"_13":101,"_39":26,"_41":199,"_30":31,"_168":-5,"_33":200},{"_49":187,"_38":188,"_36":189,"_161":-5,"_47":48,"_46":190,"_163":55,"_44":191,"_13":101,"_39":192,"_41":193,"_30":31,"_168":-5,"_33":194},{"_49":180,"_38":181,"_36":182,"_161":-5,"_47":48,"_46":183,"_163":55,"_44":184,"_13":101,"_39":40,"_41":185,"_30":31,"_168":-5,"_33":186},{"_49":173,"_38":174,"_36":175,"_161":-5,"_47":48,"_46":176,"_163":55,"_44":177,"_13":101,"_39":40,"_41":178,"_30":31,"_168":-5,"_33":179},{"_49":170,"_38":34,"_36":37,"_161":-5,"_47":48,"_46":14,"_163":31,"_44":171,"_13":69,"_39":40,"_41":43,"_30":31,"_168":-5,"_33":172},{"_49":159,"_38":160,"_36":64,"_161":-5,"_47":48,"_46":162,"_163":55,"_44":164,"_13":165,"_39":166,"_41":167,"_30":31,"_168":-5,"_33":169},"4722fdda-3748-11f1-861f-42b51c65c3df","main.tsx","parentId",46,"latest",["D",1776091899543],29,"http","import { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { Hono } from \"npm:hono\";\nimport {\n  confirmVerification,\n  markLessonComplete,\n  refreshToken,\n  unsubscribeStudent,\n  upsertStudent,\n} from \"./db.ts\";\nimport { sendLesson, sendLessonResponses, sendVerification } from \"./email-helpers.ts\";\nimport { fetchConfirmationHtml, fetchSignupHtml } from \"./html.tsx\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", async (c) => {\n  return c.html(fetchSignupHtml());\n});\n\napp.post(\"/send-verification\", async (c) => {\n  const formData = await c.req.formData();\n  const name = formData.get(\"name\");\n  const email = formData.get(\"email\");\n\n  if (typeof name !== \"string\" || typeof email !== \"string\") {\n    return Response.json({\n      message: \"Unexpected missing value for name or email.\",\n    });\n  }\n\n  const token = crypto.randomUUID();\n  await upsertStudent({ name, email, token });\n\n  // Lack of await is intentional: send optimistic success response, then send email and notify myself async\n  sendVerification({\n    emailAddress: email,\n    html: fetchConfirmationHtml({ email, token }),\n  });\n\n  return Response.json({\n    success: true,\n    message: \"Sent verification email.\",\n  });\n});\n\napp.put(\"/confirm-verification\", async (c) => {\n  const email = c.req.query(\"email\");\n  const token = c.req.query(\"token\");\n\n  const { newToken, didRefresh } = await refreshToken({ email, token });\n  if (didRefresh) {\n    // Lack of await is intentional: send optimistic success response, then send email and notify myself async\n    sendVerification({\n      emailAddress: email,\n      html: fetchConfirmationHtml({\n        email,\n        token: newToken,\n        reVerifying: true,\n      }),\n    });\n\n    return Response.json({ message: \"Resent confirmation email.\" });\n  }\n\n  await confirmVerification(email);\n\n  // Send the first lesson\n  await sendLesson({ emailAddress: email, lesson: 0 });\n\n  // No need to await: just emailing myself a notification\n  sendEmail({\n    subject:\n      `${email} verified for subscription to: Make It Stick (in 10 days, via email)`,\n    text:\n      `Verification complete for ${email}'s subscription to: Make It Stick (in 10 days, via email)`,\n  });\n\n  return Response.json({\n    confirmed: true,\n    message: \"Verified email address.\",\n  });\n});\n\n/*\n * TODO: POST requests are blocked for security reasons on mobile email clients.\n * I could use a GET request with a req body, but that's a hack/anti-pattern.\n * I don't want to move the form to a webpage because it should be in the lesson flow.\n * TBD how to handle this. Perhaps an email handler Val?\n */\napp.post(\"/complete-lesson\", async (c) => {\n  const email = c.req.query(\"email\");\n  if (typeof email !== \"string\") {\n    // Notify myself of the unexpected case\n    sendEmail({\n      subject: \"Unexpected missing email query param on /complete-lesson\",\n      text:\n        \"Email query param should be populated: check lesson form submission.\",\n    });\n    return;\n  }\n\n  await markLessonComplete(email);\n\n  const lesson = c.req.query(\"lesson\");\n  const formData = await c.req.formData();\n  await sendLessonResponses({ email, lesson, formData });\n\n  const responseHtml = `\n    <main>\n      <p>Thanks for completing the lesson! Your responses should be in your inbox any second, and the next lesson will go out tomorrow.</p>\n      <p>In the meantime, feel free to send any feedback to <a href=\"mailto:pete@petemillspaugh.com\">pete@petemillspaugh.com</a>, or by replying directly to any lesson email.</p>\n    </main>\n  `;\n\n  return new Response(responseHtml, {\n    headers: { \"Content-Type\": \"text/html\" },\n  });\n});\n\napp.get(\"/unsubscribe\", async (c) => {\n  const emailAddress = c.req.query(\"email\");\n\n  if (!emailAddress) {\n    return Response.json(\"\");\n  }\n\n  await unsubscribeStudent(emailAddress);\n\n  sendEmail({\n    subject: `Someone unsubscribed from Make It Stick (in 10 days, via email)`,\n    text: `${emailAddress} unsubscribed 😢`,\n  });\n\n  const responseHtml = `\n    <main>\n      <p>You've successfully unsubscribed.</p>\n      <p>If you have any feedback, shoot me an email at <a href=\"mailto:pete@petemillspaugh.com\">pete@petemillspaugh.com</a>.</p>\n    </main>\n  `;\n\n  return new Response(responseHtml, { headers: { \"Content-Type\": \"text/html\" } });\n});\n\nexport default app.fetch;\n","label",[160],"4e09d9a2-3748-11f1-8447-42b51c65c3df",["D",1776091911144],[34],"b4d31a6a-3741-11f1-a8aa-42b51c65c3df","email-helpers.ts","b4d31b82-3741-11f1-a8aa-42b51c65c3df",33,["D",1776089077124],"/** @jsxImportSource https://esm.sh/react */\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { renderToString } from \"npm:react-dom/server\";\nimport { setCurrentLesson } from \"./db.ts\";\nimport { lessons } from \"./lessons/index.tsx\";\n\n// --- Send verification email ---\n\ninterface VerificationEmailParams {\n  emailAddress: string;\n  html: string;\n}\n\nexport async function sendVerification({ emailAddress, html }: VerificationEmailParams) {\n  try {\n    // email a confirmation link to the subscriber\n    await sendEmail({\n      to: emailAddress,\n      from: {\n        name: \"Make It Stick (in 10 days, via email)\",\n        email: \"petermillspaugh.sendVerificationEmail@valtown.email\",\n      },\n      replyTo: \"pete@petemillspaugh.com\",\n      subject: \"Confirm your subscription to Make It Stick (in 10 days, via email)\",\n      html,\n    });\n\n    // email myself a success notification\n    await sendEmail({\n      subject: `${emailAddress} subscribed to Make It Stick (in 10 days, via email)`,\n      text: `A notification for ${emailAddress} verification should come in any minute now.`,\n    });\n  } catch (error) {\n    const { name, message, stack } = error;\n    await sendEmail({\n      subject: `Error sending email verification to ${emailAddress}`,\n      html: `\n        <pre>\n          <code>\n            ${name}\n            ${message}\n            ${stack}\n          </code>\n        </pre>\n      `,\n    });\n  }\n}\n\n// --- Send lesson ---\n\ninterface SendLessonParams {\n  lesson: number;\n  emailAddress: string;\n}\n\nexport async function sendLesson({ lesson, emailAddress }: SendLessonParams) {\n  await setCurrentLesson(emailAddress, lesson);\n\n  await sendEmail({\n    to: emailAddress,\n    from: {\n      name: \"Make It Stick (in 10 days, via email)\",\n      email: \"petermillspaugh.sendLesson@valtown.email\",\n    },\n    replyTo: \"pete@petemillspaugh.com\",\n    subject: `Lesson ${lesson + 1}: ${lessons[lesson].title}`,\n    html: lessons[lesson].fetchHtml(emailAddress, lesson),\n  });\n}\n\n// --- Send lesson responses ---\n\ninterface SendLessonResponsesParams {\n  email: string;\n  lesson: string;\n  formData: FormData;\n}\n\nexport async function sendLessonResponses({ email, lesson, formData }: SendLessonResponsesParams) {\n  const fillBlankResponse = formData.get(\"fill-in-the-blank\") as string;\n  const reflectionResponse = formData.get(\"reflection\") as string;\n  const lessonNum = Number(lesson);\n\n  const jsx = (\n    <>\n      <h1>Your responses for lesson {lessonNum + 1}: {lessons[lessonNum].title}</h1>\n      <h2>Fill-in-the-blank</h2>\n      <p>\n        <strong>Prompt:</strong> {lessons[lessonNum].fillBlank}\n      </p>\n      <p>\n        <strong>Your response:</strong> {fillBlankResponse}\n      </p>\n      <h2>Review</h2>\n      {lessons[lessonNum].quiz.map(({ question, answer }) => (\n        <>\n          <h3>{question}</h3>\n          <p>\n            <strong>Your response:</strong> {formData.get(`ANSWER-${question}`) as string}\n          </p>\n          <p>\n            <strong>Answer:</strong> {answer}\n          </p>\n        </>\n      ))}\n      <h2>Reflection</h2>\n      <p>{reflectionResponse}</p>\n    </>\n  );\n\n  await sendEmail({\n    to: email,\n    from: {\n      name: \"Make It Stick (in 10 days, via email)\",\n      email: \"petermillspaugh.sendLesson@valtown.email\",\n    },\n    replyTo: \"pete@petemillspaugh.com\",\n    subject: `Your responses for lesson ${lessonNum + 1}: ${lessons[lessonNum].title}`,\n    html: renderToString(jsx),\n  });\n}\n",[174],"9c6521da-3741-11f1-8130-42b51c65c3df","db.ts","9c652284-3741-11f1-8130-42b51c65c3df",31,["D",1776089036138],"import { sqlite } from \"https://esm.town/v/std/sqlite/global.ts\";\n\n// --- Upsert student ---\n\ninterface UpsertStudentParams {\n  name: string;\n  email: string;\n  token: string;\n}\n\n/*\n * Upsert covers three cases:\n * 1. Never subscribed\n * 2. Subscribed but not verified\n * 3. Resubscribing\n *\n * Case #3 is somewhat ambiguous w/r/t user intent.\n * E.g. if someone is on lesson 6 and they resubscribe,\n * do they want to start over from lesson 1?\n * Or was resubscribing an accident?\n * The current behavior is to reset to lesson 1.\n */\nexport async function upsertStudent({ name, email, token }: UpsertStudentParams) {\n  return sqlite.execute({\n    sql: `\n      INSERT INTO students (name, email, verification_token)\n      VALUES (?, ?, ?)\n      ON CONFLICT(email)\n      DO UPDATE SET\n        name = excluded.name,\n        verification_token = excluded.verification_token,\n        subscribed_at = CURRENT_TIMESTAMP,\n        current_lesson = 0,\n        has_completed_current_lesson = 0;\n    `,\n    args: [name, email, token],\n  });\n}\n\n// --- Refresh verification token ---\n\ninterface RefreshTokenParams {\n  email: string;\n  token: string;\n}\n\nexport async function refreshToken({ email, token }: RefreshTokenParams) {\n  const newToken = crypto.randomUUID();\n\n  const { rowsAffected } = await sqlite.execute({\n    sql: `\n        UPDATE students\n        SET verification_token = CASE\n            WHEN datetime(subscribed_at) < datetime('now', '-30 minutes') THEN ?\n            ELSE verification_token\n          END,\n          subscribed_at = CASE\n            WHEN datetime(subscribed_at) < datetime('now', '-30 minutes') THEN CURRENT_TIMESTAMP\n            ELSE subscribed_at\n          END\n        WHERE email = ? AND verification_token = ?\n        AND (datetime(subscribed_at) < datetime('now', '-30 minutes'));\n      `,\n    args: [newToken, email, token],\n  });\n\n  return { newToken, didRefresh: rowsAffected === 1 };\n}\n\n// --- Mark lesson complete ---\n\nexport async function markLessonComplete(emailAddress: string) {\n  await sqlite.execute({\n    sql: `\n      UPDATE students\n      SET has_completed_current_lesson = 1\n      WHERE email = ?;\n    `,\n    args: [emailAddress],\n  });\n}\n\n// --- Confirm verification ---\n\nexport async function confirmVerification(email: string) {\n  await sqlite.execute({\n    sql: `UPDATE students SET verified = 1 WHERE email = ?;`,\n    args: [email],\n  });\n}\n\n// --- Unsubscribe ---\n\nexport async function unsubscribeStudent(email: string) {\n  await sqlite.execute({\n    sql: `\n      UPDATE students\n      SET subscribed_at = NULL\n      WHERE email = ?\n    `,\n    args: [email],\n  });\n}\n\n// --- Get students due for next lesson ---\n\ntype SubscriberRow = [emailAddress: string, currentLesson: number];\n\nexport async function getStudentsDueForLesson(): Promise<SubscriberRow[]> {\n  const data = await sqlite.execute(`\n    SELECT email, current_lesson\n    FROM students\n    WHERE has_completed_current_lesson = 1\n    AND verified = 1\n    AND subscribed_at IS NOT NULL;\n  `);\n\n  return data.rows as unknown as SubscriberRow[];\n}\n\n// --- Advance student to next lesson ---\n\nexport async function advanceToNextLesson(emailAddress: string, nextLesson: number) {\n  await sqlite.execute({\n    sql: `\n      UPDATE students\n      SET current_lesson = ?, has_completed_current_lesson = 0\n      WHERE email = ?;\n    `,\n    args: [nextLesson, emailAddress],\n  });\n}\n\n// --- Set current lesson ---\n\nexport async function setCurrentLesson(emailAddress: string, lesson: number) {\n  await sqlite.execute({\n    sql: `\n      UPDATE students\n      SET current_lesson = ?, has_completed_current_lesson = 0\n      WHERE email = ?;\n    `,\n    args: [lesson, emailAddress],\n  });\n}\n",[181],"13d0a712-3742-11f1-88a0-42b51c65c3df","cron.tsx","13d0a988-3742-11f1-88a0-42b51c65c3df",45,["D",1776089236492],"interval","import { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { advanceToNextLesson, getStudentsDueForLesson } from \"./db.ts\";\nimport { lessons } from \"./lessons/index.tsx\";\n\nexport default async function sendDailyLessons(interval: Interval) {\n  // No-op if I accidentally click \"Run now\" to avoid double sending lessons\n  const now = Date.now();\n  const time23hrs57min = (23 * 60 + 57) * 60 * 1000;\n  if (!interval.lastRunAt || now - interval.lastRunAt.getTime() < time23hrs57min) {\n    console.log(\"Don't manually run this function! It will email all subscribers.\");\n    return;\n  }\n\n  const students = await getStudentsDueForLesson();\n\n  for (const [emailAddress, currentLesson] of students) {\n    const nextLesson = currentLesson + 1;\n    await advanceToNextLesson(emailAddress, nextLesson);\n\n    await sendEmail({\n      to: emailAddress,\n      from: {\n        name: \"Make It Stick (in 10 days, via email)\",\n        email: \"petermillspaugh.sendLesson@valtown.email\",\n      },\n      replyTo: \"pete@petemillspaugh.com\",\n      subject: `Lesson ${nextLesson + 1}: ${lessons[nextLesson].title}`,\n      html: lessons[nextLesson].fetchHtml(emailAddress, nextLesson),\n    });\n  }\n}\n",[188],"68169ad8-2772-11f0-b46e-569c3dd06744","README.md","68169b78-2772-11f0-b46e-569c3dd06744",["D",1701626495413],"# Email-based (spaced repetition) course creation tool\n\n🏗️ *Work-in-progress!* 🏗️ \n\nThe idea is to create a reusable course generator Val designed with effective, research-backed learning techniques in mind. That includes techniques like spaced repetition (via an interval between email lessons), retrieval practice (quizzing and fill-in-the-blank), elaboration and reflection (writing exercises). The Val(s) will include:\n\n- Email signup and verification\n- Template to fill in with course content\n- SQLite tables to store students and track progress\n- Cron job to send lessons to students\n\nAs the first use case for this generalizable course creator, I plan to make a course about [_Make It Stick_](https://www.goodreads.com/book/show/18770267-make-it-stick), which is a practical book about learning research that gave me the idea.\n\nI'm writing more about the implementation [on my digital garden](https://www.petemillspaugh.com/email-course-creator), which is also where you'll find [the signup form](https://www.petemillspaugh.com/make-it-stick).\n\nMigrated from folder: MakeItStick/emailCourseCreator",[196],"919344da-3741-11f1-8130-42b51c65c3df","lessons","919345ac-3741-11f1-8130-42b51c65c3df",30,["D",1776089017986],"directory",[202],"pulls","branches","forks","envVars",{"_215":101,"_217":101},"connections",{"_215":101,"_216":101},"count","unfilledCount","emptyCount",{"_49":201,"_38":202,"_36":203,"_161":-5,"_47":48,"_46":204,"_163":55,"_44":343,"_13":101,"_39":206,"_41":-5,"_30":31,"_168":-5,"_237":344,"_33":345},{"_49":335,"_38":336,"_36":337,"_161":203,"_47":48,"_46":338,"_163":55,"_44":339,"_13":101,"_39":40,"_41":340,"_30":31,"_168":-5,"_237":341,"_33":342},{"_49":327,"_38":328,"_36":329,"_161":203,"_47":48,"_46":330,"_163":55,"_44":331,"_13":101,"_39":40,"_41":332,"_30":31,"_168":-5,"_237":333,"_33":334},{"_49":319,"_38":320,"_36":321,"_161":203,"_47":48,"_46":322,"_163":55,"_44":323,"_13":101,"_39":40,"_41":324,"_30":31,"_168":-5,"_237":325,"_33":326},{"_49":311,"_38":312,"_36":313,"_161":203,"_47":48,"_46":314,"_163":55,"_44":315,"_13":101,"_39":40,"_41":316,"_30":31,"_168":-5,"_237":317,"_33":318},{"_49":303,"_38":304,"_36":305,"_161":203,"_47":48,"_46":306,"_163":55,"_44":307,"_13":101,"_39":40,"_41":308,"_30":31,"_168":-5,"_237":309,"_33":310},{"_49":295,"_38":296,"_36":297,"_161":203,"_47":48,"_46":298,"_163":55,"_44":299,"_13":101,"_39":40,"_41":300,"_30":31,"_168":-5,"_237":301,"_33":302},{"_49":287,"_38":288,"_36":289,"_161":203,"_47":48,"_46":290,"_163":55,"_44":291,"_13":101,"_39":40,"_41":292,"_30":31,"_168":-5,"_237":293,"_33":294},{"_49":279,"_38":280,"_36":281,"_161":203,"_47":48,"_46":282,"_163":55,"_44":283,"_13":101,"_39":40,"_41":284,"_30":31,"_168":-5,"_237":285,"_33":286},{"_49":271,"_38":272,"_36":273,"_161":203,"_47":48,"_46":274,"_163":55,"_44":275,"_13":101,"_39":40,"_41":276,"_30":31,"_168":-5,"_237":277,"_33":278},{"_49":263,"_38":264,"_36":265,"_161":203,"_47":48,"_46":266,"_163":55,"_44":267,"_13":101,"_39":40,"_41":268,"_30":31,"_168":-5,"_237":269,"_33":270},{"_49":255,"_38":256,"_36":257,"_161":203,"_47":48,"_46":258,"_163":55,"_44":259,"_13":101,"_39":40,"_41":260,"_30":31,"_168":-5,"_237":261,"_33":262},{"_49":195,"_38":196,"_36":197,"_161":-5,"_47":48,"_46":69,"_163":31,"_44":252,"_13":101,"_39":26,"_41":199,"_30":31,"_168":-5,"_237":253,"_33":254},{"_49":187,"_38":188,"_36":189,"_161":-5,"_47":48,"_46":190,"_163":55,"_44":249,"_13":101,"_39":192,"_41":193,"_30":31,"_168":-5,"_237":250,"_33":251},{"_49":180,"_38":181,"_36":182,"_161":-5,"_47":48,"_46":183,"_163":55,"_44":246,"_13":101,"_39":40,"_41":185,"_30":31,"_168":-5,"_237":247,"_33":248},{"_49":173,"_38":174,"_36":175,"_161":-5,"_47":48,"_46":176,"_163":55,"_44":243,"_13":101,"_39":40,"_41":178,"_30":31,"_168":-5,"_237":244,"_33":245},{"_49":170,"_38":34,"_36":37,"_161":-5,"_47":48,"_46":14,"_163":31,"_44":240,"_13":69,"_39":40,"_41":43,"_30":31,"_168":-5,"_237":241,"_33":242},{"_49":159,"_38":160,"_36":64,"_161":-5,"_47":48,"_46":162,"_163":55,"_44":236,"_13":165,"_39":166,"_41":167,"_30":31,"_168":-5,"_237":238,"_33":239},["D",1776091899543],"children",[],[160],["D",1776091911144],[],[34],["D",1776089077124],[],[174],["D",1776089036138],[],[181],["D",1776089236492],[],[188],["D",1701626495413],[],[196],"0f048e74-3742-11f1-88a0-42b51c65c3df","index.tsx","0f048f28-3742-11f1-88a0-42b51c65c3df",44,["D",1776089228443],"import { retrievalPractice } from \"./00-retrieval-practice.tsx\";\nimport { spacedRepetition } from \"./01-spaced-repetition.tsx\";\nimport { interleaving } from \"./02-interleaving.tsx\";\nimport { variedPractice } from \"./03-varied-practice.tsx\";\nimport { elaborationAndReflection } from \"./04-elaboration-and-reflection.tsx\";\nimport { encodingAndConsolidation } from \"./05-encoding-and-consolidation.tsx\";\nimport { generation } from \"./06-generation.tsx\";\nimport { growthMindset } from \"./07-growth-mindset.tsx\";\nimport { yourBrain } from \"./08-your-brain.tsx\";\nimport { learningAboutLearning } from \"./09-learning-about-learning.tsx\";\n\nexport const lessons: Record<number, typeof retrievalPractice> = {\n  0: retrievalPractice,\n  1: spacedRepetition,\n  2: interleaving,\n  3: variedPractice,\n  4: elaborationAndReflection,\n  5: encodingAndConsolidation,\n  6: generation,\n  7: growthMindset,\n  8: yourBrain,\n  9: learningAboutLearning,\n};\n",[],[202,256],"0ac6c6f6-3742-11f1-88a0-42b51c65c3df","09-learning-about-learning.tsx","0ac6c7d2-3742-11f1-88a0-42b51c65c3df",43,["D",1776089221328],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Learning about learning\";\n\nconst FILL_BLANK = <>TODO</>;\n\nconst CONTENT = (\n  <>\n    <h2>Metacognition: what we know about what we know.</h2>\n    <p>There are known knowns, known unknowns, and unknown unknowns (Rumsfeld).</p>\n    <p>\"Being accurate in your judgement of what you know and don't know is critical for decision making.\"</p>\n    <p>Cognitive psychology deals in metacognition. It focuses on how we think, perceive, and remember.</p>\n    <p>\n      \"Cognitive psychology is the basic science of understanding how the mind works, conducting empirical research into\n      how people percieve, remember, and think.\"\n    </p>\n\n    <h2>What you've learned about learning</h2>\n    <p>\n      This single sentence from <em>Make It Stick</em>{\" \"}\n      packs in most of the key themes from the books and the lessons in this course:\n    </p>\n    <blockquote>\n      <em>\n        \"More complex and durable learning comes from self-testing, introducing certain difficulties in practice,\n        waiting to re-study material until a little forgetting has set in, and interleaving the practice of one skill or\n        topic with another.\"\n      </em>\n    </blockquote>\n    <p>\n      Self-testing is <em>retrieval practice</em>. Introducing certain difficulties is{\" \"}\n      <em>generation</em>. Waiting to re-study material is{\" \"}\n      <em>spaced repetition</em>. And lastly, interleaving one skill or topic with another is, of course,{\" \"}\n      <em>interleaving</em>.\n    </p>\n\n    <h2>Books</h2>\n    <ul>\n      <li>Mindset by Carol Dweck</li>\n      <li>Thinking Fast and Slow by Daniel Kahneman</li>\n      <li>TODO</li>\n    </ul>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const learningAboutLearning = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,264],"03c84e7e-3742-11f1-88a0-42b51c65c3df","08-your-brain.tsx","03c84f46-3742-11f1-88a0-42b51c65c3df",42,["D",1776089209594],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Your brain\";\n\nconst FILL_BLANK = <></>;\n\nconst CONTENT = (\n  <>\n    <h2>Neurons</h2>\n    <p>\n      Humans are born with about 100 billion neurons (TODO: source).\n    </p>\n    <p>\n      Axons and dendrites.\n\n      TODO: great diagram here from Anki\n    </p>\n    <p>\n      Myelin sheath, myelination. Myelin sheath is the fatty layer around axons on neurons. Thicker, more developed\n      myelin sheath allows stronger and faster signals to transmit between synapses, which correlates with more advanced\n      skill or knowledge. Myelineation refers to the development of myelin sheath.\n\n      TODO: great diagram here from Anki\n    </p>\n\n    <h2>Synapses</h2>\n    <p>\n      Synapses are connections between neurons that transmit electrical signal. An axon on one neuron connects to a\n      dendrite on another neuron to form a synapse.\n    </p>\n\n    <h2>Neurogenesis</h2>\n    <p>\n      Neurogenesis is the process of creating new neurons. It mostly happens in prenatal development but also in the\n      hippocampus during adulthood to facilitate learning.\n    </p>\n\n    <h2>Synaptic pruning</h2>\n    <p>\n      Humans reach a peak number of synapses around age 1 or 2, plateau until puberty, then undergo synaptic pruning\n      until adulthood.\n\n      There's still research to be done on why certain neural pathways are pruned. The \"use it or lose it\" camp\n      hypothesizes that pathways that aren't used during childhood get pruned.\n    </p>\n\n    <h2>Neuroplasticity</h2>\n    <p>\n      Neuroplasticity refers to the brain's ability to change, e.g. forming new pathways between neurons and\n      strengthening/weakening synaptic connections.\n    </p>\n\n    <h2>The hippocampus</h2>\n    <p>The hippocampus performs consolidation of short-term memory into long-term memory.</p>\n\n    <h2>The basal ganglia</h2>\n    <p>\n      The basal ganglia, which also controls some motor function—both voluntary and unvoluntary, like subconscious eye\n      movements, Cognitive and motor functions can be chunked together in one unit that makes up a learned habit or\n      skill. So you can think of learned habits become automatic, uncontrolled System 1 knowledge.\n\n      It kind of looks like an over-ear bluetooth thingy. TODO: image/diagram\n    </p>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const yourBrain = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,272],"fabe2150-3741-11f1-b7cd-42b51c65c3df","07-growth-mindset.tsx","fabe2218-3741-11f1-b7cd-42b51c65c3df",41,["D",1776089194427],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Growth mindset\";\n\nconst FILL_BLANK = <>TODO</>;\n\nconst CONTENT = (\n  <>\n    <blockquote>Whether you think you can or you think you can't, you're right.</blockquote>\n\n    <h2>Growth mindset</h2>\n    <p></p>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const growthMindset = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,280],"f73fca42-3741-11f1-9abf-42b51c65c3df","06-generation.tsx","f73fcb14-3741-11f1-9abf-42b51c65c3df",40,["D",1776089188567],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Generation\";\n\nconst FILL_BLANK = <>TODO</>;\n\nconst CONTENT = (\n  <>\n    <h2>Generation</h2>\n    <p>\n      Generation is when you attempt to solve a problem before being presented with the solution or relevant knowledge.\n      Generation produces more durable learning.\n    </p>\n    <p>Trying to solve a problem before you know the solution is an effective technique.</p>\n    <p>Desirable difficulties.</p>\n    <p>\n      This course uses generation in the pre-lesson exercise.\n    </p>\n    <p>\n      Learning is more durable when it's effortful. Josh Comeau uses this tactic in his{\" \"}\n      <a href=\"https://www.joshwcomeau.com/courses/\">courses</a>, challenging students to solve a coding exercise before\n      he introduces the relevant content.\n    </p>\n\n    <h2>The case for writing</h2>\n    <p>\n      The act of writing allows you to elaborate and reflect on what you've learned (or know), often forging new\n      connections between related mental models. It often includes retrieval practice as you recall the information\n      while translating your thoughts to paper. Writing can also expose gaps and fuzzy spots in your knowledge, forcing\n      you to refine what you know.\n    </p>\n    <p>\n      Chapter 4 of <em>Make It Stick</em>{\" \"}\n      on embracing difficulties includes the story of \"The Blundering Gardener\" Bonnie Blodgett who became an expert\n      gardener by getting her hands dirty and learning things one at a time by trial and error. Bonnie also writes\n      extensively about her gardening in a quarterly called <em>The Garden Letter</em>. The book notes that \"in{\" \"}\n      <em>writing</em>{\" \"}\n      about her experiences, Bonnie is engaging in two potent learning processes beyond the act of gardening itself. She\n      is retrieving the details and story of what she has discovered—say, about an experiment in grafting two species of\n      fruit trees—and then she is elaborating by explainging the experience to her readers, connecting the outcome to\n      what she already knows about the subject or has learned as a result.\"\n    </p>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const generation = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,288],"edc4042e-3741-11f1-8cf6-42b51c65c3df","05-encoding-and-consolidation.tsx","edc404d8-3741-11f1-8cf6-42b51c65c3df",39,["D",1776089172657],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Encoding & consolidation\";\n\n// TODO: better prompt\nconst FILL_BLANK = <>Where are memories stored in your brain?</>;\n\nconst CONTENT = (\n  <>\n    <h2>Memory traces</h2>\n    <p>\n      A memory trace is a metaphorical/theoretical term for the brain's representation of some knowledge or memory. The\n      \"trace\" includes synaptic connections between neurons. Also known as an \"engram\".\n    </p>\n\n    <h2>Mental models</h2>\n    <p>\n      \"A mental model is a mental representation of some external reality.\" Fitting new knowledge into an existing\n      mental model or creating a new mental model that connects to another existing one is key for learning.\n    </p>\n    <p>\n      Placing new knowledge in a larger context aids learning. I've termed this <em>contextualization</em>{\" \"}\n      so that I have a label to attach to the concept, although that's not an official term. Same idea as fitting new\n      learnings into an existing mental model.\n    </p>\n    <p>\n      You can fit new knowledge into an existing mental model, and that connection improves retention. Or you might\n      create a new mental model that connects to another existing mental model.\n    </p>\n    <p>\"All new learning requires a foundation of prior knowledge.\" Learn the fundamentals!</p>\n    <p>Identifying underlying rules helps solve related but unfamiliar problems later.</p>\n\n    <h2>Encoding</h2>\n    <p>\n      Encoding is the process of transforming sensory perceptions—things we read, hear, see, feel—into memory traces in\n      the brain. Encoding places new learning in short-term memory, and consolidation moves it to long-term memory.\n    </p>\n\n    <h2>Memory consolidation</h2>\n    <p>\n      Memory consolidation is the process of transforming short-term memories into long term memories. It happens over\n      the course of hours and days, including during deep, slow-wave sleep. During consolidation, memory traces are\n      strengthened and connected to prior knowledge. The hippocampus performs consolidation of short-term memory into\n      long-term memory.\n    </p>\n\n    <h2>Synaptic pruning</h2>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const encodingAndConsolidation = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,296],"e7da17a6-3741-11f1-b7cd-42b51c65c3df","04-elaboration-and-reflection.tsx","e7da1846-3741-11f1-b7cd-42b51c65c3df",38,["D",1776089162735],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Elaboration & reflection\";\n\nconst FILL_BLANK = <>TODO</>;\n\nconst CONTENT = (\n  <>\n    <h2>Elaboration</h2>\n    <p>\n      Elaboration is the process of explaining newly learned things in your own words and making connections to stuff\n      you already know. It's an effective learning technique.\n    </p>\n    <p>\n      Elaboration strengthens learning. That's when you explain something you've learned in different terms, connecting\n      it to something else you know.\n    </p>\n\n    <h2>Reflection</h2>\n    <p>\n      Writing down questions or mentally going through what you've learned after you learn it. Reflection aids learning.\n    </p>\n    <p>That's why each lesson ends with a reflection writing exercise.</p>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const elaborationAndReflection = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,304],"e432a4ba-3741-11f1-b7cd-42b51c65c3df","03-varied-practice.tsx","e432a55a-3741-11f1-b7cd-42b51c65c3df",37,["D",1776089156605],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Varied practice\";\n\nconst FILL_BLANK = (\n  <>\n    Two basketball players want to improve their 3-point shooting with a weekly routine. The first player takes 100\n    shots from a different location on the court each day Monday to Friday (e.g. 100 shots from the left corner on the\n    first day, 100 shots from the wing on the second day, 100 shots from the top of the arc on the third day, and so\n    on). The second player takes 20 shots from 5 locations{\" \"}\n    <em>every day</em>. So both players take 100 shots per day, totaling 500 shots each week. Which routine do you think\n    would be more effective?\n  </>\n);\n\nconst CONTENT = (\n  <>\n    <h2>Varied practice versus massed practice</h2>\n    <p>\n      Is massed practice–focusing study on one topic for a concentrated time period–effective? No. Learning gains are\n      transitory.\n    </p>\n    <p>\n      Varied practice is more effective than massed practice and is consolidated in a different part of the brain that\n      encodes higher-order, more flexible learning.\n    </p>\n\n    <h2>Varied practice in sports</h2>\n    <p>TODO: beanbag toss experiment</p>\n    <p>TODO: basketball example</p>\n\n    <h2>Flexible memory storage in your brain</h2>\n    <p>TODO</p>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const variedPractice = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,312],"dcdbad4c-3741-11f1-b7cd-42b51c65c3df","02-interleaving.tsx","dcdbadf6-3741-11f1-b7cd-42b51c65c3df",36,["D",1776089144289],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Interleaving\";\n\nconst FILL_BLANK = <>TODO</>;\n\nconst CONTENT = (\n  <>\n    <h2>Interleaving</h2>\n    <p>\n      Interleaving the study of different topics results in more effective learning than studying distinct topics\n      sequentially.\n    </p>\n    <p>\n      Does interleaving yield better short-term learning? No, but it does yield better long-term learning.\n    </p>\n    <p>Interleaving different but related topics. Connects our mental models together.</p>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const interleaving = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,320],"da36e4f8-3741-11f1-8cf6-42b51c65c3df","01-spaced-repetition.tsx","da36e5b6-3741-11f1-8cf6-42b51c65c3df",35,["D",1776089139854],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Spaced repetition\";\n\n// TODO: better prompt?\nconst FILL_BLANK = (\n  <>\n    What is a <em>forgetting curve?</em>\n  </>\n);\n\nconst CONTENT = (\n  <>\n    <h2>Spaced retrieval practice</h2>\n    <p>\n      \"If learners spread out their study of a topic, returning to it periodically over time, they remember it better.\n      Similarly, if they interleave the study of different topics, they learn better if they had studied them one at a\n      time in sequence.\"\n    </p>\n    <p>\n      The first sentence refers to <em>spaced repetition</em>. The second sentence refers to{\" \"}\n      <em>interleaving</em>, which will be covered in more depth in a future lesson.\n    </p>\n\n    <h2>Forgetting curves</h2>\n    <p>TODO</p>\n\n    <h2>Flash cards</h2>\n    <p>TODO</p>\n\n    <h2>Automating spaced repetition with Anki</h2>\n    <p>TODO</p>\n\n    <h2>Crystallized versus fluid knowledge</h2>\n    <p>TODO</p>\n\n    <h2>Mental models</h2>\n    <p>\n      \"A mental model is a mental representation of some external reality.\" Fitting new knowledge into an existing\n      mental model or creating a new mental model that connects to another existing one is key for learning.\n    </p>\n    <p>\n      Placing new knowledge in a larger context aids learning. I've termed this <em>contextualization</em>{\" \"}\n      so that I have a label to attach to the concept, although that's not an official term. Same idea as fitting new\n      learnings into an existing mental model.\n    </p>\n    <p>\n      You can fit new knowledge into an existing mental model, and that connection improves retention. Or you might\n      create a new mental model that connects to another existing mental model.\n    </p>\n    <p>\"All new learning requires a foundation of prior knowledge.\" Learn the fundamentals!</p>\n    <blockquote>\n      <em>\n        \"Learning always builds on a store of prior knowledge. We interpret and remember events by building connections\n        to what we already know. Long-term memory capacity is virtually limitless: the more you know, the more possible\n        connections you have for adding new knowledge.\"\"\n      </em>\n    </blockquote>\n    <p>Identifying underlying rules helps solve related but unfamiliar problems later.</p>\n\n    <h2>Why memory is important</h2>\n    <p>\n      There's a common refrain that rote memorization is not valuable, except maybe in fields like law and medicine\n      where you need to memorize a high volume of information for ready retrieval on the job. Instead, the argument\n      goes, we should focus on critical thinking and problem solving. Facts and information are always a quick Google\n      search away, anyway.\n    </p>\n    <p>\n      <em>Make It Stick</em>{\" \"}\n      challenges that idea, building a compelling case that memory is crucial for our reasoning ability.\n    </p>\n    <blockquote>\n      <em>\n        \"Memory plays a central role in our ability to carry out complex cognitive tasks, such as applying knowledge to\n        problems never before encountered and drawing inferences from facts already known.\"\n      </em>\n    </blockquote>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"\",\n    answer: \"\",\n  },\n];\n\nexport const spacedRepetition = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,328],"ce09473e-3741-11f1-a9f6-42b51c65c3df","00-retrieval-practice.tsx","ce09481a-3741-11f1-a9f6-42b51c65c3df",34,["D",1776089119422],"/** @jsxImportSource https://esm.sh/react */\nimport { generateLessonHtml } from \"../html.tsx\";\n\nconst TITLE = \"Retrieval practice\";\n\nconst FILL_BLANK = (\n  <>\n    We often hear things like, \"I am a visual learner,\" or \"the way I learn best is by re-reading my notes and\n    underlining key concepts.\" Do you think there is any merit to personal preference of learning style? Why or why not?\n  </>\n);\n\nconst CONTENT = (\n  <>\n    <h2>About this course</h2>\n    <p>\n      The main purpose of this course is to teach you about about effective, research-backed learning techniques covered\n      in the book{\" \"}\n      <a href=\"https://www.goodreads.com/book/show/18770267-make-it-stick\">\n        <em>Make It Stick</em>\n      </a>. The secondary purpose of this course is to provide a copyable template for creating email-based courses with\n      a structure informed by effective learning techniques covered in that book. If you know some JavaScript/HTML and\n      are interested in that, all the code is public and{\" \"}\n      <a href=\"https://petemillspaugh.com/email-course-creator\">\n        I wrote about the implementation on my digital garden\n      </a>.\n    </p>\n    <p>\n      As a disclaimer, I am not a learning expert. I like to learn, and I like learning about learning. As mentioned\n      just above, this course is a distillation of{\" \"}\n      <em>Make It Stick</em>, supported by some follow-up research I did. It's also a way for me to strengthen what I\n      learned from the book. If you have any feedback on the course please shoot me an email at\n      pete@petemillspaugh.com—I'm open to suggestions, corrections, or anything else you'd like to share.\n    </p>\n\n    <h2>📣 This course is still a work-in-progress 📣</h2>\n    <p>\n      Thank you for signing up to test things out! I'm still working on the course content, so this lesson is\n      incomplete, but lmk any thoughts or suggestions you have in the meantime.\n    </p>\n\n    <h2>What is retrieval practice?</h2>\n    <p>\n      <em>Retrieval practice</em>{\" \"}\n      is cognitive psychology's term for the act of recalling something from memory. Studying flashcards is a very\n      structured form of retrieval practice, but we retrieve things all the time—like when a friend asks you about the\n      book you're reading, when you cook a recipe without referencing instructions, or when speaking in another language\n      that you don't use often.\n    </p>\n    <p>\n      As chapter 2 of <em>Make It Stick</em>—\"To Learn, Retrieve\"—puts it:\n    </p>\n    <blockquote>\n      <code>\n        Retrieval practice—recalling facts or concepts or events from memory—is a more effective learning strategy than\n        review by rereading. Flashcards are a simple example. Retrieval strengthens the memory and interrupts\n        forgetting. A single, simple quiz after reading a text or hearing a lecture produces better learning and\n        remembering than rereading the text or reviewing lecture notes.\n      </code>\n    </blockquote>\n    <p>\n      Each lesson in this course starts with a fill-in-the-blank question and ends with a set of review questions and\n      reflection. This structure is deliberately designed to force retrieval practice. Not only that, but retrieval\n      should be spaced, which is the topic of the next lesson and the reason this course includes a one-day delay before\n      sending the following lesson. From chapter 2 of the book:\n    </p>\n    <blockquote>\n      <code>\n        When retrieval practice is spaced, allowing some forgetting to occur between tests, it leads to stronger long-\n        term retention than when it is massed.\n      </code>\n    </blockquote>\n\n    <h2>Brain food: retrieval as reconsolidation</h2>\n    <p>From the book:</p>\n    <blockquote>\n      <code>\n        While the brain is not a muscle that gets stronger with exercise, the neural pathways that make up a body of\n        learning do get stronger, when the memory is retrieved and the learning is practiced. Periodic practice arrests\n        forgetting, strengthens retrieval routes, and is essential for hanging onto the knowledge you want to gain.\n      </code>\n    </blockquote>\n\n    <h2>But I'm a visual learner</h2>\n    <p>\n      Returning to the question from the start of this lesson, is there any evidence that instruction in one's preferred\n      learning style (e.g. \"visual learner\") improves learning outcomes?\n    </p>\n    <p>From the book:</p>\n    <blockquote>\n      <code>\n        The popular notion that you learn better when you receive instruction in a form consistent with your preferred\n        learning style, for example as an auditory or visual learner, is not supported by the empirical research. People\n        do have multiple forms of intelligence to bring to bear on learning, and you learn better when you \"go wide,\"\n        drawing on all of your aptitudes and resourcefulness, than when you limit instruction or experience to the style\n        you find most amenable.\n      </code>\n    </blockquote>\n    <p>That said, learning style should match the subject matter. Back to the book:</p>\n    <blockquote>\n      <code>\n        It is more important that the mode of instruction match the nature of the subject being taught: visual\n        instruction for geometry and geography, verbal instruction for poetry, and so on. When instructional style\n        matches the nature of the content, all learners learn better, regardless of their differing preferences for how\n        the material is taught.\n      </code>\n    </blockquote>\n  </>\n);\n\nconst QUIZ = [\n  {\n    question: \"What is retrieval practice?\",\n    answer: \"Retrieval practice is the act of recalling facts or concepts or events from memory.\",\n  },\n  {\n    question:\n      \"Is there any evidence that instruction in one's preferred learning style (e.g. visual) improves learning outcomes?\",\n    answer:\n      \"No, there is no research supporting these claims. Learning style should match the subject matter, though (e.g. visual for geometry).\",\n  },\n];\n\nexport const retrievalPractice = {\n  title: TITLE,\n  fillBlank: FILL_BLANK,\n  quiz: QUIZ,\n  fetchHtml: (email: string, lesson: number) =>\n    generateLessonHtml({\n      email,\n      lesson,\n      title: `Lesson ${lesson + 1}: ${TITLE}`,\n      fillBlank: FILL_BLANK,\n      content: CONTENT,\n      quiz: QUIZ,\n    }),\n};\n",[],[202,336],["D",1776089017986],[219,220,221,222,223,224,225,226,227,228,229],[202],["D",1746203277423],["D",1789501878689],{"_109":108,"_117":113},{"_109":108,"_110":111,"_112":113,"_19":62,"_114":115,"_116":31},{"_13":95,"_38":96,"_49":48,"_97":50,"_98":99,"_100":101,"_102":57,"_103":104,"_105":71,"_106":51,"_107":108},"ctx",{"_88":-5,"_139":384,"_385":386,"_387":388,"_389":31,"_390":31,"_391":31,"_392":55,"_393":-5,"_394":-7,"_395":-7,"_396":101,"_397":31,"_398":31,"_399":-5,"_400":31,"_401":31,"_402":31,"_403":-5},"ENV",{"_355":356,"_357":358,"_359":96,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v47