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


CODEX

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


Image for post
Image for post
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())…

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


CODEX

Unity and Blender for 3D game development, modeling, animation, and video editing using robust free tools with Ubuntu

Image for post
Image for post

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…


Image for post
Image for post

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

  • noiseWithSmoothnessCreates a new texture whose contents are procedurally generated colored noise data
  • vectorNoiseWithSmoothnessCreates 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


Image for post
Image for post

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.

App.svelte

It’s important to note that this…


Image for post
Image for post

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.


Image for post
Image for post
Photo by Daniel von Appen on Unsplash

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…


Image for post
Image for post
Photo by Mathew Schwartz on Unsplash

With JavaScript, the finest granularity of time resolution is milliseconds.

Therefore, understanding how much time is spent in an individual line of code requires an approach providing enough measurable time.

For example, how fast can we compute a Math.log10() operation?

Simply putting timers around this operation would return 0ms — no measurable time taken. In fact, I have to call this operation 100,000 times before receiving a meaningful time of 2 to 3 milliseconds.

Some browsers feature high resolution time stamps, such as Google Chrome, in which fractional milliseconds can be reported.

But to achieve accuracy, multiple samples…

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