-
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
TypeScript
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.
-
React Virtual Scroll
React Virtual Scroll : Scroll Options and Display List
It’s time for more enhancements to
react-virtual-scrolldriven by requirements fromreact-spreadsheet. If that seems a bit dull, don’t worry, things get wild by the time we reach the end. -
React Spreadsheet
React Spreadsheet: Event Handling
Last time we got basic selection with a focus cell working. The only way of selecting something is by typing a cell reference into an input box.