I recently made a component that displays the recent updates to reference.bayanbennett.com. 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.
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.
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
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.
Workers have something called a
WorkerGlobalScope that is…
I’ve been using a pattern for
React.Context that has worked well for me and I thought it would be something worth sharing.
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…
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:
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…
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.
NextJS has a fancy-schmancy way of dynamic routing via a…
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:
In the last post I created a React component that intercepted and formatted the arguments for
In this post I’ll be upgrading from a simple
<textarea> to something that is designed to show code.
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.
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…
In the last post we looked at:
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.
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. …
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…
I want to create a new GitHub project from the website that I made in my previous DevLog: https://bayanbennett.medium.com/how-i-started-a-website-d2a34547bc57