[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_283":284,"_285":286},"routes/_app.x.$handle.$name",{"_108":107,"_37":50,"_117":95,"_32":118,"_13":14,"_119":-5,"_11":120,"_121":122,"_123":124,"_125":126,"_127":128,"_26":-5,"_129":130,"_131":132,"_133":30,"_134":135,"_136":54,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":54,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":63,"_64":54,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":30},"version",38,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","997f3452-f48d-4a3d-8c01-64e62d7437e2","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","lessons/04-elaboration-and-reflection.tsx","latestPath","fileId","e7da1846-3741-11f1-b7cd-42b51c65c3df","name","04-elaboration-and-reflection.tsx","fileType","script","content","/** @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

Elaboration

\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

\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

\n\n

Reflection

\n Writing down questions or mentally going through what you've learned after you learn it. Reflection aids learning.\n

That's why each lesson ends with a reflection writing exercise.

\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","createdAt",["D",1776089162735],"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",{"_108":107,"_116":112},"org",{"_108":107,"_109":110,"_111":112,"_19":61,"_113":114,"_115":30},"branch",{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":56,"_102":103,"_104":70,"_105":50,"_106":107},"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",{"_48":49,"_37":50,"_43":278,"_52":-5,"_53":54,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":63,"_64":54,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":279,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":280,"_89":281,"_91":282,"_93":30},"tree",[212,218,219,220,221,222],"files",[212,213,214,215,216,217,218,219,220,221,222],"counts",{"_202":100,"_203":68,"_204":100,"_205":206,"_207":208},"contents",[151,152,153,154,155,156],"upstreamProject",{"_48":103,"_37":147,"_58":148,"_60":149,"_55":56,"_87":150},"upstreamBranch",{"_48":98,"_43":141,"_142":143,"_37":95,"_96":103,"_13":144,"_97":-5,"_99":-5,"_145":146,"_52":-5,"_93":30,"_55":56,"_106":107,"_69":70,"_105":147},"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",{"_108":107,"_116":112},{"_48":195,"_37":196,"_35":197,"_159":-5,"_46":47,"_45":198,"_161":54,"_43":199,"_13":100,"_39":200,"_41":-5,"_29":30,"_166":-5,"_32":201},{"_48":189,"_37":190,"_35":191,"_159":-5,"_46":47,"_45":68,"_161":30,"_43":192,"_13":100,"_39":26,"_41":193,"_29":30,"_166":-5,"_32":194},{"_48":182,"_37":183,"_35":184,"_159":-5,"_46":47,"_45":185,"_161":54,"_43":186,"_13":100,"_39":40,"_41":187,"_29":30,"_166":-5,"_32":188},{"_48":175,"_37":176,"_35":177,"_159":-5,"_46":47,"_45":178,"_161":54,"_43":179,"_13":100,"_39":40,"_41":180,"_29":30,"_166":-5,"_32":181},{"_48":168,"_37":169,"_35":170,"_159":-5,"_46":47,"_45":171,"_161":30,"_43":172,"_13":100,"_39":40,"_41":173,"_29":30,"_166":-5,"_32":174},{"_48":157,"_37":158,"_35":63,"_159":-5,"_46":47,"_45":160,"_161":30,"_43":162,"_13":163,"_39":164,"_41":165,"_29":30,"_166":-5,"_32":167},"997bca34-2ec5-11f1-b0f6-42dde27851f2","main.tsx","parentId",29,"latest",["D",1775156164347],28,"http","import { fetchConfirmationHtml } from \"https://esm.town/v/pmillspaugh/fetchConfirmationHtml\";\nimport { fetchSignupHtml } from \"https://esm.town/v/pmillspaugh/fetchSignupHtml\";\nimport { markLessonComplete } from \"https://esm.town/v/pmillspaugh/markLessonComplete\";\nimport { refreshToken } from \"https://esm.town/v/pmillspaugh/refreshToken\";\nimport { sendLesson } from \"https://esm.town/v/pmillspaugh/sendLesson\";\nimport { sendLessonResponses } from \"https://esm.town/v/pmillspaugh/sendLessonResponses\";\nimport { sendVerification } from \"https://esm.town/v/pmillspaugh/sendVerification\";\nimport { upsertStudent } from \"https://esm.town/v/pmillspaugh/upsertStudent\";\nimport { email as sendEmail } from \"https://esm.town/v/std/email?v=11\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite?v=4\";\nimport { Hono } from \"npm:hono\";\nimport { JSX } from \"npm:react\";\n\nexport async function emailSubscription(req: Request) {\n const app = new Hono();\n\n app.get(\"/\", async (c) => {\n return c.html(fetchSignupHtml());\n });\n\n app.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\n app.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 sqlite.execute({\n sql: `UPDATE students SET verified = 1 WHERE email = ?;`,\n args: [email],\n });\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 */\n app.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

Thanks for completing the lesson! Your responses should be in your inbox any second, and the next lesson will go out tomorrow.

In the meantime, feel free to send any feedback to pete@petemillspaugh.com, or by replying directly to any lesson email.

\n `;\n\n return new Response(responseHtml, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n });\n\n return app.fetch(req);\n}","label",[158],"ad01390c-3741-11f1-8130-42b51c65c3df","html.tsx","ad0139e8-3741-11f1-8130-42b51c65c3df",32,["D",1776089064005],"/** @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",[169],"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",[176],"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",[183],"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",[190],"919344da-3741-11f1-8130-42b51c65c3df","lessons","919345ac-3741-11f1-8130-42b51c65c3df",30,["D",1776089017986],"directory",[196],"pulls","branches","forks","envVars",{"_209":100,"_211":100},"connections",{"_209":100,"_210":100},"count","unfilledCount","emptyCount",{"_48":195,"_37":196,"_35":197,"_159":-5,"_46":47,"_45":198,"_161":54,"_43":275,"_13":100,"_39":200,"_41":-5,"_29":30,"_166":-5,"_224":276,"_32":277},{"_48":267,"_37":268,"_35":269,"_159":197,"_46":47,"_45":270,"_161":54,"_43":271,"_13":100,"_39":40,"_41":272,"_29":30,"_166":-5,"_224":273,"_32":274},{"_48":259,"_37":260,"_35":261,"_159":197,"_46":47,"_45":262,"_161":54,"_43":263,"_13":100,"_39":40,"_41":264,"_29":30,"_166":-5,"_224":265,"_32":266},{"_48":251,"_37":252,"_35":253,"_159":197,"_46":47,"_45":254,"_161":54,"_43":255,"_13":100,"_39":40,"_41":256,"_29":30,"_166":-5,"_224":257,"_32":258},{"_48":243,"_37":244,"_35":245,"_159":197,"_46":47,"_45":246,"_161":54,"_43":247,"_13":100,"_39":40,"_41":248,"_29":30,"_166":-5,"_224":249,"_32":250},{"_48":239,"_37":38,"_35":36,"_159":197,"_46":47,"_45":14,"_161":54,"_43":240,"_13":100,"_39":40,"_41":42,"_29":30,"_166":-5,"_224":241,"_32":242},{"_48":189,"_37":190,"_35":191,"_159":-5,"_46":47,"_45":68,"_161":30,"_43":236,"_13":100,"_39":26,"_41":193,"_29":30,"_166":-5,"_224":237,"_32":238},{"_48":182,"_37":183,"_35":184,"_159":-5,"_46":47,"_45":185,"_161":54,"_43":233,"_13":100,"_39":40,"_41":187,"_29":30,"_166":-5,"_224":234,"_32":235},{"_48":175,"_37":176,"_35":177,"_159":-5,"_46":47,"_45":178,"_161":54,"_43":230,"_13":100,"_39":40,"_41":180,"_29":30,"_166":-5,"_224":231,"_32":232},{"_48":168,"_37":169,"_35":170,"_159":-5,"_46":47,"_45":171,"_161":30,"_43":227,"_13":100,"_39":40,"_41":173,"_29":30,"_166":-5,"_224":228,"_32":229},{"_48":157,"_37":158,"_35":63,"_159":-5,"_46":47,"_45":160,"_161":30,"_43":223,"_13":163,"_39":164,"_41":165,"_29":30,"_166":-5,"_224":225,"_32":226},["D",1775156164347],"children",[],[158],["D",1776089064005],[],[169],["D",1776089077124],[],[176],["D",1776089036138],[],[183],["D",1701626495413],[],[190],"e7da17a6-3741-11f1-b7cd-42b51c65c3df",["D",1776089162735],[],[196,38],"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",[],[196,244],"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",[],[196,252],"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",[],[196,260],"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",[],[196,268],["D",1776089017986],[213,214,215,216,217],[196],["D",1746203277423],["D",1789501878689],{"_108":107,"_116":112},{"_108":107,"_109":110,"_111":112,"_19":61,"_113":114,"_115":30},{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":56,"_102":103,"_104":70,"_105":50,"_106":107},"ctx",{"_87":-5,"_138":316,"_317":318,"_319":320,"_321":30,"_322":30,"_323":30,"_324":54,"_325":-5,"_326":-7,"_327":-7,"_328":100,"_329":30,"_330":30,"_331":-5,"_332":30,"_333":30,"_334":30,"_335":-5},"ENV",{"_287":288,"_289":290,"_291":95,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315},"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 · v38