Software Development

A scroll listener on window can fire hundreds of times during one swipe. Run getBoundingClientRect() on every card in a feed on each of those events and fifty images are enough to make the page stutter. The Intersection Observer API takes that check off the scroll path: you register which elements to watch, and the browser tells you when their visibility actually changes. How IntersectionObserver works An observer watches one or more target elements against a root (the viewport, by default) and calls a callback whenever a target crosses a visibility threshold. ...

Open a file saved as UTF-8 in a tool that assumes a different encoding and café turns into café. The bytes on disk did not change. Only the rule used to turn those bytes back into characters did, and the two rules disagree about what byte 0xC3 means. Most “weird characters” bugs come from the same mismatch: broken filenames, mangled form submissions, emoji that crash a database insert, two strings that look identical but fail an equality check. Behind each one is the same confusion between two separate things, Unicode and UTF-8. ...

What Is a Closure in JavaScript? 1 2 3 4 5 6 7 8 9 10 11 12 function makeCounter() { let count = 0; return function () { count += 1; return count; }; } const counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 makeCounter runs once, returns a function, and is done. The call is over and its stack frame is gone. Yet every call to counter() still reads and updates count, a variable declared inside a function that has already finished. count isn’t reset to 0, and it isn’t copied. It’s the same variable, still live, three calls later. ...

A test written after the code tends to check what the code does, not what it was supposed to do. Test-driven development fixes that by flipping the order: write the test, watch it fail, then write the smallest piece of code that makes it pass. Because the test exists before the code it checks, it can’t quietly confirm whatever the code happens to return. Kent Beck formalized the loop as red, green, refactor in his 2002 book Test-Driven Development: By Example. The name stuck. ...

Log a user out of a session-based app and the server forgets them on the next request. Log them out of a JWT-based app and, unless you built extra machinery for it, the token they’re holding stays valid until it expires. That difference is the real decision behind “JWT vs session”. The rest follows from it. What a session actually stores A session keeps the user’s state on the server and hands the browser only a lookup key. ...

Wrap a fetch() call in try/catch, hit an endpoint that answers with a 404, and the catch block never runs. The promise resolves. res.json() parses whatever body the server sent back, often an error payload like {"error": "user not found"}, and the rest of the function treats it as the record it asked for. No exception and no console warning. The bad data moves downstream until something else breaks on it. ...

A function that calls itself has a maximum depth, and it is smaller than most people expect: 1,000 calls in CPython by default, roughly 10,000-15,000 in Node and browser engines depending on how much each frame holds. Go past it and the program does not slow down gracefully. It crashes. Python raises RecursionError: maximum recursion depth exceeded; JavaScript raises RangeError: Maximum call stack size exceeded. Both errors have the same cause, and once you see it you will know when recursion is the right tool and when it is a liability. ...

You’re building a dashboard: a header, a sidebar, a main content area, a footer. You reach for Flexbox because that’s the layout tool you know, and twenty minutes later you’ve got three nested display: flex containers, a sidebar that won’t hold its width without a magic number, and a footer that floats halfway up the page when the content is short. None of that is a Flexbox bug. You’re using a one-dimensional tool on a two-dimensional problem. ...

Put go in front of a function call and it runs concurrently with the rest of your program, scheduled by the Go runtime instead of the OS. Starting one is the easy part. The hard part is getting two goroutines to hand off a result without stepping on each other’s state, and that’s the job channels do. What is a goroutine? A goroutine is a function running independently of the one that started it, managed by Go’s runtime rather than the operating system. An OS thread reserves a megabyte or more of stack and costs the kernel real time to schedule. A goroutine starts with a stack of about 2KB that grows as needed, and the runtime multiplexes many goroutines onto a handful of OS threads. Starting thousands of them is normal. ...

A class that saves a user to the database, sends them a welcome email, and formats a receipt is one change away from breaking two features it has nothing to do with. Touch the email template and you risk the database write. Touch the receipt layout and you risk the email. SOLID is five rules aimed at that kind of entanglement, each from a different angle, and they share one idea: a class should change for one reason, and the rest of the code should depend on what something promises to do rather than how it does it. ...