A key component to any JS project is learning how to convert between callbacks and promises
Promise Promise ➡ Callback Bonus: NodeJS util.promisify and util…

What does a big GatsbyJS project look like?
js gatsby-config.js gatsby-node.js gatsby-ssr.js…

The browser's console output can't be read. MDN's interactive examples override the browser's console.log, formats the arguments for the webpage, and then calls the original console.log. I created a component in React that accomplishes the same thing.
js/editor-libs/console-utils.js. It has some rules…

The simplest way to use web workers, with or without Webpack.
s the browser equivalent to NodeJS's Worker threads. It…

A useful method for processing non-blocking calls in sequence or in parallel
in the array resolves. https://nodejs.org/en/docs/guides…

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.
and not imported using the NodeJS module system. To read…

How to build a completely static site using React and Styled Components
widespread availability of libraries. Other JS libraries () might work as…

I put CodeMirror version 6 into a React component.
be attached to a DOM node, so we'll add…

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.
the frontmatter as a or node. will parse the / into…

I converted an array of file paths into a tree and used a recursive React component to display it. That way, visitors to the site can have a straightforward way to navigate between all the pages in the site.
different schema. Instead of each node being an object with…

Increasing the readability and flexibility of the plugins section of gatsby-config
disable plugins based on the node environment. In this example…

Using a recurrent neural network to create pseudo-English words
from Wikipedia and created a JSON file that mapped the…

How I start a simple project from some example code and create a proof-of-concept. The idea is to create a website that I can use to create interactive reference pages.
to start with a Next.js project with Material UI…

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 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…

Took advantage of WebWorkers' independent scope to intercept console methods away from the page context. This way, code can be evaluated individually. I also used the Proxy class to intercept all calls to all console methods.
In this series I created a webpage with multiple code…

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 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…

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