-
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.
-
React Virtual Scroll
React Virtual Scroll 0.5.0 : Render Props
The 0.4.0 release of
react-virtual-scrollfocused on customization. Since then, I’ve learnt a lot from usingVirtualGridandVirtualListas building blocks for myreact-spreadsheetpackage. In particular, I learnt that the custom container component props introduced in 0.4.0 aren’t a good fit with modern React. -
React Spreadsheet
React Spreadsheet: Selection and Focus
I’m about to add support for editing data in my React spreadsheet component. Before I can do that, I need to be able to select the cell I want to edit. Before I can do that, I need to add some grid lines to make it easier to see where the cell boundaries are.