Black MIDI Impossible Music

Computers cannot replicate a human experience until they can appreciate music.

Recently I was listening to a program discussing artificial intelligence, sentience, and recognition of consciousness. It was suggested that to replicate a human experience required aspects of augmenting mental state, such as consumption of alcohol of drugs.

Through the ages humans of every culture have expanded mental states through meditation, ritual, spiritual quests, or consumption of drugs — these inducing visions, hallucinations, or changing perception or reality. Reports of this activity extend into the animal kingdom.

Thinking along these lines leads to questioning other aspects — what would artificial…


Photo by Maria Teneva on Unsplash

Copy clipboard data between between React apps in multiple windows.

Multiple windows in Electron don’t share the same data model, and must use inter process communication to share data.

Even though all windows come from the same application, each window is an instance of BrowserWindow containing a unique Chromium web view. Sending messages between windows is similar to tabs or windows in a web browser.

In a web browser, you can communicate using BroadcastChannels.

After defining a channel, posted messages dispatch events for listeners:

const channel = new BroadcastChannel("mychannel");// Send a message:
channel.postMessage("Hello, world");
// Receive a message: channel.onmessage…


Photo by PAUL SMITH on Unsplash

How to remove a decimal, with consideration to performance.

In the following examples, I’ll use Math.PI for the number: 3.14159

Bitwise double not operator

This removes everything after the decimal, as bitwise operators convert operands to signed 32-bit integers. This works for numbers or strings, returning a number.

~~Math.PI

Bitwise or operator

Again here, bitwise operators convert operands to signed 32-bit integers.

Math.PI | 0

Signed right shift operator

And again, any numeric operand is converted to an integer.

Math.PI >> 0

parseInt

Parse the value as an integer — note that if the value is not a string, it’s first converted to one using the toString() abstract operation.

parseInt(Math.PI)

Math.trunc

Math’s truncation…


Photo by Patrick on Unsplash

In benchmarking the goal is to understand which operation is significantly outside the set — the outlier that is much faster, or much slower.

Though still in early stages, I’m launching a new initiative: a curated set of performance benchmarks, with tooling for profiling.

For starters, I’m introducing a new npm module: jsbenchmark

JS Benchmark

JavaScript performance benchmarking

Getting Started

To install, execute:

npm i jsbenchmark

Then, import into a project as:

import * as JSBench from "jsbenchmark";

Usage

This package can benchmark individual tests, or a suite of test cases for comparison.

Defining a Test Suite

To benchmark multiple test cases for comparison, add them to a test…


Photo by israel palacio on Unsplash

Curated commands for the advanced user of git.

Dry Run

Use the --dry-run flag for a summary of actions for a git command.

Before executing the following examples, it’s a good idea to first take a dry run to understand what the result will be.

Backup Repository

Create a backup of your repository as a git-bundle:

git clone git@github.com:org/repo.git --mirror
git bundle create repo.bundle --all

Confirming Branch Merge

List branches that have been merged into master:

git branch --merged master

List branches merged into HEAD:

git branch --merged

List branches that have not been merged:

git branch --no-merged

This applies only to local branches; or, use:

  • -a


Photo by Luke Stackpoole on Unsplash

Front end developers easily fall into premature optimization traps, but why… and should they?

It’s an embattled world of ever changing landscapes — ecosystems of evolving trends with constantly rolling dependency chains resulting in thousands of JavaScript files obscured within node modules.

There’s a lot to consider — HTML reflow of the DOM, repainting, rendering contexts in variations of canvas and WebGL, or vector graphics in SVG. Aspects of CSS like transitions. And of course JavaScript…

As if managing cross-browser and cross-platform compatibility wasn’t enough, each environment has its own performance implications and unknowns.

For starters, everything is abstracted. HTML rendering is obscured by an engine like WebKit, with JavaScript obscured by engines like…


CODEX

Photo by Nick Fewings on Unsplash

Sorting an array with numerical values can result in a less than intuitive result when compared alphabetically. Consider the following example:

const list = ["N1", "N10", "N100", "N2"]
list.sort();

The above would result in the following order:

0: "N1"
1: "N10"
2: "N100"
3: "N2"

Instead, it would be desirable to sort an array with numerical values in order, like macOS Finder, producing:

0: "N1"
1: "N2"
2: "N10"
3: "N100"

For this, I’ve created a new NPM module to apply a natural sorting using either a sort comparer or utility function for array sorting.

Getting Started

To install, execute:

npm i…


Photo by Mathew Schwartz on Unsplash

Using Julian date, you can calculate the current phase of the moon by finding the lunar age as a percentage through the lunar month.

In lunar calendars, a lunar month is the time between two identical syzygies. This is the equivalent of 29.53059 Earth days.

Start by obtaining Julian date:

const getJulianDate = (date = new Date()) => {
const time = date.getTime();
const tzoffset = date.getTimezoneOffset()

return (time / 86400000) - (tzoffset / 1440) + 2440587.5;
}

With Julian date, calculate days or percentage through the lunar month:

const LUNAR_MONTH = 29.530588853;const getLunarAge = (date = new Date())…


Photo by Alex Block on Unsplash

Navigating the complexities of Storybook with React CRA, Redux, Material UI theming, proxies, and routing can be tricky.

Storybook is invaluable for developing and testing UI components in isolation, enabling rapid prototyping while forcing critical thinking to the API of your components and containers.

Initial Setup

Setting up Storybook with React is simple using the npx sb init command. For example, to scaffold a Create React App with Storybook, simply execute the following:

npx create-react-app my-app
cd my-app
npx sb init

There’s been some issues recently with Storybook and CRA — you may have encountered babel errors after executing npx sb init

Jason Sturges

Avant-garde experimental artist — creative professional leveraging technology for immersive experiences

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