I start off with a fresh project and make a UI library (that only has one basic component) using TypeScript, ReactJS, and Styled Components. I also make a basic NPM package that can be used locally to test the UI library.
In this project we're going to create the simplest…

Creating a GitHub project is easy with WebStorm. Semantic Versioning with Conventional Commits are a powerful combination.
Although it's nice that people can read my posts…

Used NextJS' getStaticPaths to get all the paths for the code snippets and getStaticProps to pass on the content of the code snippet to the template, which in turn passes it to the code editor.
In the last post, through some code metamorphosis I converted…

What does a big GatsbyJS project look like?
Suggested reading: Production GatsbyJS: Plugins What's the problem? Sometimes…

I used react-markdown to render my markdown files in ReactJS. Each code block in each markdown file is injected into a code editor so that it can be interactive.
In the last post I used  files as a source…

Displaying keys and detecting keystrokes using JavaScript and React for a typing practice app.
Disclaimer: although this series is about machine learning, this post…

Contexts should be in their own files and grouped together in a contexts folder. Contexts should only export two things, a hook to consume the context and a higher-order component to provide the context.
I've been using a pattern for that has worked…

I put CodeMirror version 6 into a React component.
In the last post I created a React component that…

Two patterns for implementing retrying and exponential backoff that return promises
Suggested Reading: Sequential and Parallel Asynchronous Functions When you don…

What's running on BayanBennett.com
The last time I updated my website was probably about…

Reflecting on the past 5 years of being a software engineer
Over the past 5 years, I've learned a thing…

A key component to any JS project is learning how to convert between callbacks and promises
One of the basic techniques required for building things in…

Using a machine learning algorithm to generate English-like words that are specifically difficult for you to type
Articles in this series: Introduction Pseudo-English Keyboard Input Inference…

The simplest way to use web workers, with or without Webpack.
Once there is enough of a reason to offload calculations…

How to build a completely static site using React and Styled Components
Building a site with React, but that doesn't have…

Increasing the readability and flexibility of the plugins section of gatsby-config
Suggested reading: Production GatsbyJS: API Files Problem Gatsby was designed…

Added custom styling to CodeMirror v6 using CodeMirror extensions and Material UI's theme object.
In the last post I wrapped CodeMirror v6 with a…

I embedded some metadata in my markdown files using the markdown frontmatter format. After parsing this data, I included it in my NextJS pages. I also optimized the hydration time by handling some of the markdown processing during the build.
I recently made a component that displays the recent updates…

A queue is a tool that can be used to decouple a module that runs quickly from one that runs slowly.
I see the code of a programmer Be it good…

Using a recurrent neural network to create pseudo-English words
Articles in this series: Introduction Pseudo-English Keyboard Input Inference…