I’ve spent most of my life working on graphics engines and back-end systems in the cloud. The last serious front-end work I did was building an MFC UI for a Windows desktop application. Which was over 20 years ago. However, every back end needs a front end, so I need to be a full-stack developer. This is my journey to get up to speed with modern front-end development.
For a step by step look at building a modern React front-end package, check out my React Virtual Scroll project.
-
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.
-
Front End
Styling React Components with CSS
I had just started turning my stub
react-spreadsheetpackage into a real one, when I ran into a dilemma. What was I going to do about styling my new spreadsheet component? -
Front End
Vitest Monorepo Setup
I was about to get started turning my stub
react-spreadsheetpackage into a real one, when I noticed a new Vitest related warning from VS Code. -
Front End
Bootstrapping TypeDoc
Last time I gave up on using API Extractor to generate API Reference Documentation. API Extractor creates Markdown with embedded html tags as an intermediate format. It simply wasn’t compatible with GitHub Pages hosted sites.
-
Cloud Architecture
Front End
InfiniSheet
InfiniSheet Architecture
I’ve been working on my spreadsheet project for many months now. I started with very high level thinking and paper explorations of possible data structures and algorithms. Then I went to the other end of the scale and built a React virtual scrolling package that you could use to build the frontend for a large spreadsheet.
-
Front End
Bootstrapping API Extractor
I’m using TSDoc comments to provide IntelliSense based documentation for my open source project. Now I want to do more. Enter API Extractor.
-
Front End
Bootstrapping ESLint
I’ve added some TSDoc based comments to my open source project. TSDoc has an ESLint plugin that checks for syntax errors in your TSDoc comments. I’d like to try it out, which means getting ESLint off the ground first.
-
Front End
Bootstrapping TSDoc
Last time I left you with the realization that documentation is a good thing and that I should probably write some. We all know that “nobody reads documentation”, so my main focus is on writing documentation that sneaks up on you and jumps out just as you need it.
-
Front End
Bootstrapping NPM Provenance with GitHub Actions
I’m putting my money where my mouth is. NPM provenance statements are great. Everyone should publish packages with a provenance statement. Including me.
-
Front End
Cloud Architecture
Supply Chain Provenance
Many of us first became aware of the risks of a supply-chain attack with the SolarWinds hack of 2020. Attackers compromised the build system belonging to SolarWinds, the creator of popular network monitoring tool Orion.
-
Front End
Bootstrapping GitHub Actions
My monorepo is up and running. I can build, test, version and publish packages from my machine. However, what happens if I miss a step? How do I make sure that I keep on top of build quality?
-
Front End
Bootstrapping NPM Publish
I figured out how to build usable library packages. Now I just have to work out how to get them published.
-
Front End
Bootstrapping NPM Package Build
I have my monorepo up and running for local development. However, I still haven’t figured out how to build usable library packages, or even what should be in them.
-
Front End
InfiniSheet
Bootstrapping a Lerna Monorepo
So far, all the front-end development work I’ve done has been in the repo I created when bootstrapping Vite. It’s starting to feel a little restrictive.
-
Front End
Vitest Mocking Time
Last time we achieved a significant increase in code coverage by unit testing the effect of scroll events. As a reminder, here’s what our coverage looked like when we finished up.
-
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.
-
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.
-
Front End
Bootstrapping Vite
I’m ready to dive into front-end development. First, I need to make some choices. What tooling and frameworks should I use?
-
Front End
Spreadsheets
React Virtual Scroll
Paged Infinite Virtual Scrolling
I’m working on a cloud spreadsheet system. It will support spreadsheets with millions of rows and columns. Potentially far more data than will fit into client memory, particularly a web client. Which means I need a front end implementation that can handle that.
-
Databases
Front End
Event Sourced Database Grid View
When we started on this journey, I told you that there was an easy way and a hard way to implement a database backed grid view. I then spent the next six posts in this series taking you through different variations of the hard way.