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…

DevLog 005

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

DevLog 004

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…

DevLog 003

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

DevLog 002

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:

DevLog 001

I’m trying to make a new website, and this will be the first in a series of DevLogs about my development process as I build this website.

Video version of this post

The idea of the website came from the need to store information that isn’t necessarily deserving of an entire blog post. These posts cover some of the things that I’m currently doing as well as some fundamentals of software development.

The tentative name is and will serve as an ever-evolving repository of information. Whenever I’m referencing things, I can point to and the page could contain…

Implementing a basic queue in TypeScript & JavaScript

I see the code of a programmer
Be it good; or be it bad
Adding a queue will make me glad

While implementing optimizations, software developers may encounter performance issues that extend beyond a particular function or module. A potential problem in architecture, where two modules are tightly coupled, but have vastly different or unpredictable execution speeds.

Code doesn’t have to be a linear set of operations, in fact, your operating system would be running much slower if it weren’t for an uncomplicated design pattern: queues.

Photo by Michał Parzuchowski on Unsplash

What? Why?

Imagine a lineup of people outside of a popular donut shop. Each of them…

I once spent half a day debugging issues in a codebase only to discover that the cause was a horribly butchered TSConfig file. It looked like the file was pieced together with config options from random tutorials. As if, after the creation of the tsconfig.json file, tsc was run and someone exclaimed, "it works!" Hands have clapped, and then project development just moved on without a second thought.

Photo by Bradley Howington on Unsplash

After finally figuring out the cause of all the error messages, I thought, “ESLint has eslint:recommended and @typescript-eslint/recommended, there must be a recommended tsconfig out there."

Typing Practice w/ Machine Learning

Articles in this series:
1. Introduction
2. Pseudo-English
3. Keyboard Input
4. Inference Using Web Workers (You Are Here)

The finished project is located here:

The last post, Keyboard Input, was all about preparing the data that will be used to generate subsequent lines of characters. This article looks at how that input is used and how a line of text is generated using a TensorFlow model. Additionally, this model will be running entirely on a WebWorker.

To learn more about web workers, I’ve created a soft introduction here: Barebones Web Workers.

Photo by Michael Dziedzic on Unsplash

Setting Up the Worker

The following code is all within the…

Once there is enough of a reason to offload calculations into another thread, WebWorkers begin to shine.

Photo by Josue Isai Ramos Figueroa on Unsplash

For me, this happened when I was creating the RNN Typing Practice app, where I was doing inference with TensorFlowJS and didn’t want that heavy calculation to be handled on the main render process. The user would be trying to type a given sentence while calculations for the next sentence were made. If there was any impact on the user’s typing experience, it would make the app unusable. …

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

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