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
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.
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 reference.bayanbennett.com and will serve as an ever-evolving repository of information. Whenever I’m referencing things, I can point to reference.bayanbennett.com and the page could contain…
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.
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
tsc was run and someone exclaimed, "it works!" Hands have clapped, and then project development just moved on without a second thought.
The finished project is located here: https://www.bayanbennett.com/projects/rnn-typing-practice
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.
The following code is all within the…
Once there is enough of a reason to offload calculations into another thread, WebWorkers begin to shine.
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. …