-
Front End
Typecheck All The Things
Something weird happened the other day. I opened up one of my unit tests in VS Code to refresh my memory on how a component worked. VS Code reported that the test file had four TypeScript errors. I checked another unit test. That had errors too.
-
Front End
Bootstrapping Storybook
Last time, we had a look at Vitest browser mode and Playwright component testing. I was looking for a tool to help with component and integration testing of my React components.
-
Front End
Component Testing with Playwright and Vitest
Last time we added Playwright to our toolbox for end to end testing. We already had Vitest for unit tests. Now we need to decide on a solution for integration and component testing.
-
AWS
AWS re:Invent 2024
As ever I’m spending the week after re:Invent gorging on YouTube videos at 1.5x speed. This year I’m trying to use my time as efficiently as possible. I want to find more nuggets of gold and less corporate filler.
-
Front End
Bootstrapping Playwright
I’m ready to add browser based automated testing to my InfiniSheet project. Before we get into the details of getting my chosen tool up and running, let’s have a quick reminder of why we need it.
-
InfiniSheet
InfiniSheet: Chore Updates
Last time, I decided that I needed some additional tools for browser based automated testing. Before I can do that, I should really make sure all my existing dependencies are up to date.
-
React Virtual Scroll
React Virtual Scroll : State Considered Harmful
Last time, I was tearing my hair out because I’d broken the core paged virtual scrolling functionality in the big 0.6.0 update.
-
React Spreadsheet
React Spreadsheet: Decoupled Rendering
I rebuilt my
react-virtual-scrollpackage from the ground up. I couldn’t make traditional virtual scrolling work properly with the new React 18 rendering API or Chrome’s GPU accelerated compositor. So I switched to an approach that decoupled rendering of a window onto a virtualized grid from scrolling it. -
React Virtual Scroll
React Virtual Scroll 0.6.x : Consciously Uncoupling
As we discovered last time, traditional virtual scrolling implementations don’t work properly. Both React and the Chrome browser prioritize responsiveness when scrolling. New frames can be displayed before virtualized components have a chance to render updated content. Content appears torn or goes blank.
-
React Virtual Scroll
React Glitchy Virtual Scroll: Deep Dive
How can this be happening? I’m doing everything in my power to ensure that the visible content in my virtualized components is rendered before the browser paints. I’m using the legacy React render method which ensures that the DOM is updated immediately when an event is handled. I’ve restructured my spreadsheet component to ensure that everything is rendered before React returns to the event loop.