Sometimes you need to separate what goes on the page with information that is needed to generate the page.

Accompanying video

I recently made a component that displays the recent updates to My first attempt at doing it was absolutely the wrong way of doing it. The purpose of this post is to help others avoid this mistake.

File Timestamps Not Tracked by Git

How I used NextJS, MaterialUI, and a recursive React component to make a page tree

Accompanying video

Although I’ve added a swath of features to the reference site that I’m working on, there are a few glaring omissions from the feature set. Chiefly, the absence of a mechanism for navigating between pages. The nested structure of the pages naturally points to a similar structure of navigation, a tree.

Exploring Material UI’s Tree

Since I’m using Material UI, it’s only natural to look at their existing tree implementation. It consists of a top level <TreeView> component and can have <TreeItem> child components, which themselves can have <TreeItem> children.

<TreeItem />

and using the JavaScript Proxy class

Accompanying video

In this series I created a webpage with multiple code editors. However, the problem is: running the code in one editor would update the output of both editors with the same result. Obviously, this would confuse any user. The issue is that I was intercepting the page’s console methods, and there was no clean way to distinguish which code editor was logging to the console.

Once I had some more time to think about the problem, I recalled that I could use Web Workers since they had their own scope.

Looking at Web Workers

Workers have something called a WorkerGlobalScope that is…

Structure, a hook, and a higher order component

Video version of this post

I’ve been using a pattern for React.Context that has worked well for me and I thought it would be something worth sharing.

Folder Structure

Create a new folder to house the projects’ context variable. This way all the contexts that are in use in a project can be neatly accessible from the same folder.

I’ll be making a folder for my context since I’ll be adding more files to it in the future. The context that I will be creating is a facade for communicating with the future code runner that will run on a web worker…

Using react-markdown to turn code blocks into code editors

Video version of this post

In the last post, I used .js files as a source for code snippets for generated pages in NextJS. I have two problems with this approach:

  • Only one code block per page.
  • Difficult to add additional (non-code) content to the page.

This could limit the effectiveness of the page as a resource for software engineers. The objective isn’t to recreate MDN, rather, to provide users with a brief overview with interactive examples.

I thought of making a separate markdown file for the contents of the page, but then I realised that I could just map…

Reading .js files and injecting the code as page content

Video version of this post

In the last post, through some code metamorphosis, I converted our humble little caterpillar of a text editor into a beautiful butterfly of a code editor.

There is one problem with the project: it only has one page. Obviously, there’s a need to have hundreds or thousands of pages.

I could just copy and paste the same page repeatedly, but that will become difficult to scale and maintain. I need to take the common aspects of the page and then abstract it into a template.

Dynamic Routing in NextJS

NextJS has a fancy-schmancy way of dynamic routing via a…

Creating a uniform style and colour palette

In the last post I wrapped CodeMirror v6 with a react component. However, it still looked like a plain <textarea> when it should be looking like a code editor.

CodeMirror’s base setup has a grocery store’s worth of extensions to get started with full-fledged code editor. I have a much humbler objective, so I picked out the two extensions that I thought would be applicable to my use case:

  • @codemirror/highlight
  • @codemirror/matchbrackets

CodeMirror on its own is oblivious to code syntax and requires a set of rules to label segments of code. …

Bringing a non-React project into a React project

In the last post I created a React component that intercepted and formatted the arguments for console.log and console.error.

In this post I’ll be upgrading from a simple <textarea> to something that is designed to show code.

What Should I Use?

After mulling over a few different options, even considering making something from scratch, I decided that CodeMirror would be the best fit for short code snippets.

Fortunately, CodeMirror v6 is out and it’s a fantastic opportunity to try it out.

Creating the Editor Component

The editor component will live in src/components/editor/index.tsx. For now, it will be an empty react component.

import React from "react";export const…

Is it wizardry or trickery?

Video version of this post

In the last post we looked at:

  • Uploading from WebStorm to GitHub
  • Semantic Versioning
  • Conventional Commits

In this post, we want to resume developing our code editor. The basic objective is to create a box that the user can enter some code and, with the touch of a button, can see the result of their code.

First Iteration Behaviour

The first implementation was design around the eval function, the result of which would be displayed in the result pane. Putting in a string “hello” would result in hello being displayed. …

Photo by Chris Ried on Unsplash

GitHub, Semantic Versioning, and Conventional Commits

Video version of this post

Although it’s nice that people can read my posts and watch my videos, sometimes it’s better to be able to look at the source code itself. So, I’ve made the rational decision to share my code on GitHub a bit earlier than usual.

There won’t be much coding here, so it’s going to be a noticeably short post.

You’ll see why…

Creating a GitHub Project from WebStorm

I want to create a new GitHub project from the website that I made in my previous DevLog:

𝐁𝐚𝐲𝐚𝐧 𝐁𝐞𝐧𝐧𝐞𝐭𝐭

My goal is to serve humanity and to bring happiness to others. I want to understand the problems around us and help find solutions.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store