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 topic.
-
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
Spreadsheets
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.