Short lessons from the bugs, shortcuts, and “clever” ideas we’ve all shipped. Understand the why. Keep the fix.
Find your next lightbulb moment38 bite-sized episodes · Code included
const items = [];
{items.length && <Cart />}
38 episodes
An AI agent says it booked an appointment, but the calendar is empty. Learn what an evaluation checks, how to inspect trusted state, and how to compare prompts on the same tasks.
Mutation testing changes code on purpose and checks whether tests notice. Stryker automates this for JavaScript and TypeScript. A free-shipping rule shows how two passing tests can miss an exact boundary.
One TypeScript report becomes JSON, CSV and Markdown. Store exporter objects in a dictionary, select one and call its shared method. Add a format while keeping the shared caller unchanged.
A coffee payment succeeds, but its reply is lost. Retrying with a new payment key can charge you again. Design for failure means deciding how the system recovers before things break.
Laya is a local AI model that chooses from options. Its input builder limits option text before inference, so adding options can cut off the words that distinguish them.
Von is a local AI model that chooses from options. Give it a support ticket and team descriptions; your application still has to check the returned choice and dispatch the ticket.
Pi is a coding agent: it runs tools around an AI model. A TypeScript extension can inspect a requested tool call and block it before execution.
Jev is an AI model that selects from supplied options. A computer-use application gathers screen information, asks for a choice, checks it and executes the corresponding action.
AGENTS.md is a file of project instructions for an AI coding agent. Give it concrete commands, locations and constraints, then check whether they help on real tasks.
The model asks for a tool. Surrounding software checks permission, runs it and returns its output. Follow one real test result through a tiny JavaScript harness.
A model can request another tool call. Your application decides whether it may run. Use a tool-call limit, handle its error and report an incomplete task honestly.
LangChain is a framework for apps using language models. Its agent loop lets a model request a tool, runs your function, returns the result to the model and continues until a final reply or a stopping rule.
Jev UI is a React library that asks the Jev model to choose between components you supply. A free-text request can select a chart or a table without generating new components.
With verbatimModuleSyntax enabled, an inline type-only name can disappear while an empty JavaScript import remains. That import still evaluates the dependency.
TypeScript private controls ordinary access during type checking. Its modifier disappears, leaving an ordinary field that JSON.stringify includes in this example.
Older TypeScript targets expand optional chaining and nullish coalescing into checks and temporary values. The saved value prevents a repeated call to getUser.
Using calls a resource’s Symbol.dispose method when execution leaves its block. The ES2020 output adds resource helpers and a try/finally structure.
forEach ignores the promises returned by async callbacks. Awaiting its undefined result does not wait for your uploads.
A zero-delay timer runs in a later task. A ready promise callback runs as a microtask after the current task, before another task starts.
Removing a panel does not remove its window listener. The callback can keep the old panel reachable and react after it closes.
Index keys identify positions. After sorting, React can keep a row’s local checked state while that position now represents a different item.
innerHTML parses a string into elements. In the isolated demo, an image error handler runs code; textContent displays the same string as text.
Jev is an AI (artificial intelligence) model from TypeSafe. It picks from allowed answers and returns probabilities. This example chooses a support team and sends uncertain cases to a person.
The && operator returns an operand, not necessarily a boolean. An empty array has length 0, and React renders that number.
Record the slow interaction before reaching for memo. Check Network for request waiting, React Profiler for component rendering, and Chrome Performance for main-thread work.
The string "false" is non-empty, so converting it with Boolean or !! returns true. Neither operation parses the meaning of the word.
Don’t Repeat Yourself (DRY) concerns shared knowledge. Two policies can use the same arithmetic without having the same owner or reason to change.
A regular numeric TypeScript enum produces a runtime object with forward and reverse mappings. It does not disappear like a type alias.
Give a coding agent an observable outcome, constraints, and a check that matches the task. “Improve validation” leaves the finish line undefined.
Pass the controller’s signal to fetch. Creating an AbortController beside a request does not connect it to that request.
When two nearby components need the same value, start with their closest shared parent. One owner removes the need to synchronize two local copies.
A reducer calculates the next state from the current state and an action. Context makes a provided value available to descendants.
Components using the same query key and QueryClient share cached server state. Copying the result into another store creates another value to keep synchronized.
Keep a shared selected ID in Zustand and fetch the product through TanStack Query. Include that ID in the query key instead of duplicating the product snapshot.
Calling a Zustand hook without a selector subscribes to the whole store state. Destructuring count afterward does not narrow that subscription.
React Profiler measures subtree rendering, not the entire time from click to visible result. Expensive event-handler work can sit outside that measurement.
Coverage shows which code ran. It does not prove that assertions checked the correct behavior. A test can execute the whole function and miss the wrong answer.
Hiding or unmounting an input does not necessarily remove its value from the form’s state. Decide which values belong in the active submission.
Try another word or explore all episodes.
Oops Driven Development is a notebook for the things we thought we understood—until the code disagreed. React, TypeScript, testing, and working with coding agents.
Every lesson starts with a clear question, follows the actual behavior, and shows a useful correction. The joke comes last. The explanation never gets cut for it.
Original code-led visuals. Synthesized English dialogue.
No gatekeeping. No “just use this library.”