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.
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.
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.
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
…
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.
Before diving in, I’ll mention a few apps that people may not realize are available in Ubuntu.
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.
File sharing integration with Dropbox on Ubuntu is pretty slick…
Procedurally generated noise is built into SpriteKit using SKTexture initializer noise functions:
To see it in action, checkout SpriteKitNoise Xcode project from my Swift Prototypes repository at GitHub.
Noise with smoothness may be color or grayscale, taking three parameters:
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.
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.
In App.svelte
create a canvas
element, and use Svelte’s bindings to link the DOM element to be passed into the createScene()
function.
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…
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…
Avant-garde experimental artist — creative professional leveraging technology for immersive experiences