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…

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…

Introducing a new npm module: pixi-graphpaper

Ruled graph paper — a PIXI.Sprite instance able to be added to the display list via addChild().

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…

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

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…