CODEX

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…

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())…

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…

CODEX

In this walkthrough, I’ll start with some common developer bits for those pursuing game development; otherwise, jump to the 3D or Video section.

As well, I’ve put together a video demonstrating these steps:

But first, let’s start with some general app.

General Applications

Before diving in, I’ll mention a few apps that people may not realize are available in Ubuntu.

Google Chrome

Personally, I’m not a huge fan of Firefox that comes packaged with Ubuntu desktop. It’s a matter of preference — some use Chromium, but note that Google Chrome browser is available.

Dropbox

File sharing integration with Dropbox on Ubuntu is pretty slick…

Procedurally generated noise is built into SpriteKit using SKTexture initializer noise functions:

• noiseWithSmoothness — Creates a new texture whose contents are procedurally generated colored noise data
• vectorNoiseWithSmoothness — Creates a new texture whose contents are procedurally generated directional noise data

To see it in action, checkout SpriteKitNoise Xcode project from my Swift Prototypes repository at GitHub.

Noise With Smoothness

Noise with smoothness may be color or grayscale, taking three parameters:

• smoothness — How similar neighboring texels will appear in the texture
• size — Bounds of the texture in points
• grayscale — If true, all components of the texel with be randomized equally

…

As a followup to my last post on 3D with Svelte and Three.js, here’s a similar example incorporating Svelte with the Babylon.js engine.

Follow along, or checkout the repository on GitHub.

Creating the Solution

First, scaffold the project using npx degit to setup Svelte’s template by executing the following command in a terminal:

npx degit sveltejs/template svelte-app

Continue by adding the babylonjs package:

npm add babylonjs

Npm will add Babylon.js and automatically install packages.

App.svelte

In App.svelte create a canvas element, and use Svelte’s bindings to link the DOM element to be passed into the createScene() function.

It’s important to note that this…

Updating some demo apps, I wanted to build with something fast and lean — less boilerplate than React to add clarity to examples, yet with the power of live reload, package management, and bundling.

Interested in trying Svelte, I was surprised by the simplicity and cleanliness of the environment and toolchain.

Electron apps seem classically one window, with one instance of a web application running. This is frustrating, even if you just want multiple instances of the same app running.

In my project, I wanted to easily open multiple instances similar to Visual Studio Code’s File ≫ New Window.

This example is based on Electron React Boilerplate as the initial project scaffolding.

Under app/main.dev.js there’s logic for just one mainWindow — first expand that to be a JavaScript Set of windows. Replace mainWindow instance of BrowserWindow with a new reference to hold all windows

const windows = new Set();

In the…