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.

Image for post
Image for post
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 were clapped, and then project development just moved on without a second thought.

Image for post
Image for post
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: 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.

Image for post
Image for post
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.

Image for post
Image for post
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. โ€ฆ


Building a site with React, but that doesnโ€™t have JavaScript in the final build is a paradox.

Image for post
Image for post

Requirements

I had a special case come up where I needed to build a site that:

  • Only had static HTML
  • Didnโ€™t have any JavaScript whatsoever

Weapon of Choice

React still was an attractive option due to its composability and the widespread availability of libraries. Other JS libraries (Vue | Angular | Svelte) might work as well, but I am not familiar with their SSR capabilities.

Being familiar with GatsbyJS, itโ€™s out-of-the-box SSR feature seemed like a good fit for the requirements. Alas, although there are plugins likeโ€ฆ


Typing Practice w/ Machine Learning

Disclaimer: although this series is about machine learning, this post wonโ€™t have any in it.

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

The finished project is located here: https://www.bayanbennett.com/projects/rnn-typing-practice

Image for post
Image for post
Photo by Peppy Toad on Unsplash

Requirements

  • Displays an area that the user will have to activate
  • Displays a sequence of letters
  • Receives keyboard inputs
  • Compares input to the current letter
  • Progresses from one letter to another with the correct input
  • When the cursor reaches the end of the line, it moves onto the next line.

Letters

Requirements met:

  • Displays a sequence of letters

I was curious toโ€ฆ


Typing Practice w/ Machine Learning

Articles in this series:
1. Introduction
2. Pseudo-English (You are here)
3.
Keyboard Input
4.
Web Worker Inference

The finished project is located here: https://www.bayanbennett.com/projects/rnn-typing-practice

Image for post
Image for post

Objective

Generate English-looking words using a recurrent neural network.

Trivial Methods

Before settling on using ML, first I had to convince myself that the trivial methods did not provide adequate results.

Random Letters

const getRandom = (distribution) => {
const randomIndex = Math.floor(Math.random() * distribution.length);
return distribution[randomIndex];
}
const alphabet = "abcdefghijklmnopqrstuvwxyz";const randomLetter = getRandom(alphabet);

Unsurprisingly, no resemblance to English words. The character sequences that were generated were painful to type. โ€ฆ


I first came across the concept of embeddings while developing the RNN typing practice app.

Even though I am just beginning to understand the range of uses for embeddings, I thought it would be useful to write down some of the basics.

First, letโ€™s look at what I knew before embeddings, one-hot vectors.

Image for post
Image for post
Photo by Awesome Sauce Creative on Unsplash

Refresher on one-hot vectors

Remember one-hot vectors? No? Well do you remember unit vectors from math class? Still no? Okay โ€” assume that we have three labels, [๐ŸŽ, ๐ŸŠ, ๐ŸŒ]. We want to represent these values in a way that machines can understand. โ€ฆ


Typing Practice w/ Machine Learning

In this series:
1. Introduction (You are here)
2. Pseudo-English
3. Keyboard Input
4. Web Worker Inference

The finished project is located here: https://www.bayanbennett.com/projects/rnn-typing-practice

Image for post
Image for post
Photo by Sergey Zolkin on Unsplash

Iโ€™ve never been a good typist. My backspace button has been weathered about as much as my space bar. I usually average about 70 wpm, 80 if Iโ€™ve brewed a fresh pot of coffee. I so envy those that can sit down at a desk and simply type at 120 wpm. Witnessing it in person, I can almost see a stream of thoughts cascading from their forehead and flowing through the keyboard onto their screen.

Makingโ€ฆ


Suggested reading: Production GatsbyJS: API Files

const pluginsReducer = (acc, [resolve, value]) => {
if (value === true) return [...acc, resolve];
if (value.constructor && value.constructor.name === "Object")
return [...acc, { resolve, options: value }];
if (Array.isArray(value))
return [...acc, ...value.map(options => ({ resolve, options }))];
return acc;
};
module.exports = Object.entries(plugins).reduce(pluginsReducer, []);
Image for post
Image for post
Photo by John Barkiple on Unsplash

Problem

Gatsby was designed to use two types in the gatsby-config plugins array:

  • A String like "gatsby-plugin-react-helmet"
  • An Object like { resolve: "gatsby-source-filesystem", options: /* Some Options */ }

When using 10+ plugins it can make configs hard to read. This is especially the case when you have the sameโ€ฆ

๐๐š๐ฒ๐š๐ง ๐๐ž๐ง๐ง๐ž๐ญ๐ญ

My goal is to serve humanity and to bring happiness to others. I want to understand the problems around us and help find solutions. https://www.bayanbennett.com

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