-
Front End
Vitest with User Events
Last time we got Vitest’s code coverage tools up and running. Now I’m going to use the code coverage results to drive improvements to my unit test suite. As we go through this process, I’ll need to lean on additional Vitest and React Testing Library features.
-
Front End
Vitest Code Coverage
We’ve got Vitest up and running and have written a few simple tests to check that everything’s working. Today I’m going to look at Vitest’s code coverage story. Code coverage tools provide a useful set of metrics for determining how much of your source code is actually being tested by your test suite.
-
Front End
Bootstrapping Vitest
Last time I reached a level of complexity in my project building a modern react scalable virtual scrolling grid control that I could no longer put off implementing unit tests.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 5 : Is Scrolling
Next up on my list of features to implement is a
useIsScrollingcustom hook. It should be a good test of hook composition as I want to use it in conjunction with theuseVirtualScrollhook I’ve already implemented. -
React Virtual Scroll
Modern React Virtual Scroll Grid 4 : JSX
Last time I implemented a scalable binding interface and demonstrated an implementation for variable sized items. I was seemingly poised to complete the basic functionality for my list control and move onto grids. Then I got distracted.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 3 : Item Offset Mapping
Last time, we created the basic structure for our scalable virtual scrolling controls built with modern React and TypeScript. The next job is to put a scalable data binding interface in place. We want the rendering costs for our controls to be proportional to the number of visible items, rather than the total number of items being scrolled over. We can’t control how the data and metadata being displayed is retrieved and managed, but we can make sure that the interface we provide is as efficient as possible.
-
React Virtual Scroll
TypeScript
Modern React Virtual Scroll Grid 2 : Basic Structure
I have a plan, I just need to start executing. Where to start? As you may have realized by my ratio of “writing about coding” vs “actually coding”, I have a tendency towards analysis paralysis. The solution that works for me is to pick a small but meaningful subset of what I want to achieve, get it working with a minimum of fuss, then iterate from there to add functionality and clean up any shortcuts.
-
React Virtual Scroll
Modern React Virtual Scroll Grid
Time to go again. I’ve learnt a lot about how best to implement virtual scrolling in React. I’ve got my head round modern React with Hooks. Now I’m going to implement my own super scalable virtual scrolling grid control using modern React with Typescript.
-
Gear
Marmalade
Marmalade is a fruit preserve made from the juice and peel of citrus fruits boiled with sugar and water. Despite originating in Portugal, and most commonly made from Spanish Seville oranges, marmalade is now seen as a peculiarly British obsession. And in Britain, January is the month to make marmalade.
-
Front End
Modern React With Hooks
I first came across the phrase “modern React with Hooks” when reading the React team’s blog post that introduced the new React documentation site. The documentation had been completely rewritten to focus on modern React, with any mention of class components relegated to a legacy API reference section.