Context: CodePen is my low-stakes playground while I knock out school and internship work. None of these pens are production apps—they’re teaching myself out loud.
AI assist: Copilot/ChatGPT sometimes generated starter components or regex patterns. Each pen description and this post label where AI helped.
Status: Learning log, not a portfolio of client projects.

Why CodePen?

  • Instant feedback: No local setup; I can prototype an idea in minutes.
  • Safe failure: Breaking a pen doesn’t take down Netlify or a Render backend.
  • Documentation: Every pen description now includes a “Reality” block (what works, what doesn’t, what AI wrote).

Anchor pens & lessons

PenLinkFocusReality snapshot
Garbage Collection Visualizerhttps://codepen.io/student-account-bradley-matera/pen/ZYzoWpLMark-and-sweep animation using vanilla JS + CSS transitionsHelps me explain GC interviews. Numbers are illustrative, not actual engine data.
React Calculatorhttps://codepen.io/student-account-bradley-matera/pen/ogvGZjJControlled inputs + useState patternsTests edge cases (multiple decimals, divide by zero). Keyboard support still TODO.
Sound Machinehttps://codepen.io/student-account-bradley-matera/details/dPbVvoaKeyboard accessibility + audio APIsResetting audio.currentTime prevents overlapping sounds; mobile support is limited.
Markdown Previewerhttps://codepen.io/student-account-bradley-matera/pen/ZYzXeEJ3rd-party libs (marked) + sanitizationHandles malformed input gracefully; still need unit tests before promoting to GitHub.
Regex Analyzerhttps://codepen.io/student-account-bradley-matera/details/dyEYbPORegex visualisation + copy-to-clipboard flowHighlights matches, explains capture groups. Heavy use of AI-generated starter text.
Random Quote Generator v1/v2https://codepen.io/student-account-bradley-matera/pen/azoLpeG / https://codepen.io/student-account-bradley-matera/pen/PwYJWMYAsync fetches, debouncing, design iterationShows how I go from “functional” to “nicer UX” in public.

Learning pattern

  1. Set a hypothesis: e.g., “Can I explain garbage collection visually?” or “Can I mask card numbers accessibly?”
  2. Clone a pen or start blank: Add a Reality block at the top describing scope + AI involvement.
  3. Instrument early: console.table logs, accessible live regions, or overlays help me debug without leaving the pen.
  4. Break it on purpose: Try invalid inputs, rapid keyboard events, or network failures. Log what broke and why.
  5. Document: Notes go in the pen description + my codepen-journal.md file (repo: learning-journal).
  6. Promote (if deserving): Once a pen stays stable, I move it into a GitHub repo with tests + accessibility checks (CheeseMath started this way).

Example: Card Obscurer (CheeseMath)

  • Built to practice credit card masking/validation.
  • Live demo sits at https://bradleymatera.github.io/CheeseMath-Jest-Tests/; pen version shows the original concept.
  • Lessons learned: regex alone isn’t enough; I added Luhn checks and clear error messaging.
  • Next steps: integrate axe/Lighthouse audits before calling it “done.”

How I keep myself honest

  • AI disclosure: Pen descriptions state what Copilot/ChatGPT generated. If a section is mostly AI, I mark it “Needs manual review.”
  • Backlog: codepen-ideas.md lists upcoming experiments and links to research (MDN, WCAG, etc.).
  • Retros: At the end of each month I log “Pens that graduated to GitHub” vs “Pens that stalled.” Helps me avoid hoarding half-baked demos.

Next steps

  • Convert top-performing pens (Garbage Collection, Sound Machine, Regex Analyzer) into GitHub repos with tests + CI.
  • Add automated axe/Lighthouse checks via GitHub Actions for the pens I embed into the portfolio.
  • Build a “skills index” page mapping each pen to the concepts it reinforces—useful for interview prep and peer mentoring.

References