This is Part 4 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Unit tests are where all testing begins. You put one function in front of you and nail down “this input produces this output” — the smallest, fastest kind of verification there is. This one article takes you from what a unit test actually is, through pure functions, the AAA pattern, and edge cases, with real code all the way. ...
This is Part 3 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary This is a start-to-finish walkthrough of wiring a testing environment into a React + Vite + TypeScript project — from an empty folder to the first passing test. We install Vitest, Testing Library, and jsdom, read the config line by line, turn the first test green, and map out where setup most often goes wrong. One article, complete setup. ...
This is Part 2 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Last time we talked about why testing matters. Now for the practical question: “So… what do I test, and how much?” Time is finite, and you can’t test everything. This installment is really one question, answered in three pieces: how to pick the code that’s most worth testing what coverage numbers really mean — and where they lie the testing strategy we’ll use for our demo app A diagram contrasting a perfect coverage number with a test that verifies nothing — visited is not the same as verified What to test first Not all code carries the same weight. Top priority goes to code that changes often and hurts badly when it breaks. ...
This is the appendix to the “Frontend Testing, Done Right” series. Whenever you hit an unfamiliar term in the series, come back here. Browse the full series Learning frontend testing means getting buried in unfamiliar words. How is a mock different from a stub? When do getBy and queryBy part ways? Why shouldn’t you take a coverage number at face value? This one page collects all of those terms — and each entry goes beyond “what it is” to “why it matters” and “when you’d use it.” ...
This is Part 1 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary “Tests? But it already works.” We’ve all said it — or heard it. I said it for years. Look at the screen, click around, “yep, works,” done. But then the features pile up, and every time you touch the code a little voice asks, “if I change this, what breaks over there?” That creeping anxiety is exactly the moment tests become worth their price. ...
One failing Promise can take down your entire dashboard. Compare Promise.all and Promise.allSettled with real-world examples, and learn when to use which.
Learn the difference between function declarations and expressions, how hoisting works under the hood, and when to use arrow functions in practice.
Introduction Recently, I started building and operating a blog using Hugo with the PaperMod theme. Using someone else’s theme has the advantage of quick setup, but not everything fits my needs perfectly. After customizing many parts to match my preferences, I noticed some issues with the code blocks. Line numbers were implemented with <table> tags. While this doesn’t violate accessibility guidelines, it felt not semantic. Moreover, I wondered: what’s the experience for screen reader users? I found a better approach using CSS Counters. ...