JavaScript on bradleycarey.com

Checkbox Canvas: Images & Video

Tue, 17 Mar 2026 10:15:00 -0500

These two demos are the only ones in the series that process external input. One takes images, one takes live video. They’re also the only ones where a canvas element sneaks into the pipeline. The output still goes entirely to checkboxes; the canvas is just the fastest way to sample pixel data from a source that the browser won’t otherwise let you read directly.

The underlying algorithm in both cases is the same: Floyd-Steinberg error diffusion.

Checkbox Canvas: Games

Mon, 16 Mar 2026 21:00:00 -0500

Games are an interesting stress test for the 1-bit constraint. A simulation can skip frames and still look fine. A game can’t. Input latency matters, collision detection matters, and the player is paying close attention in a way that they aren’t when watching a visual effect. If the game loop is wrong, you notice immediately.

Both of these work. Unironically.

Pong (interactive) Link to heading

Two players. Left paddle: W and S. Right paddle: up and down arrow keys.

Checkbox Canvas: Visual Effects

Mon, 16 Mar 2026 10:30:00 -0500

Every effect here is the same underlying structure: for each checkbox, compute a number, threshold it to on/off. The interesting part is what function you use to compute the number. Pure math, no textures, no precomputed lookup tables, just trig per cell per frame.

Spirals Link to heading

Four modes that cycle automatically:

Checkbox Canvas: Simulations

Sun, 15 Mar 2026 19:45:00 -0500

The 1-bit constraint is most interesting when you stack it against a system with real state. These four demos are simulations. They evolve by rules, and the checkboxes just report what happened. The display isn’t the computation; it’s the readout.

Slime Mold Simulation (interactive) Link to heading

Physarum polycephalum is a slime mold that navigated mazes, solved the shortest path between oat flakes, and independently approximated the Tokyo subway network. It has no brain, no neurons, no central coordination. Researchers at Hokkaido University published a paper about it in Science in 2010 and everyone was appropriately unsettled.

Checkbox Canvas

Sun, 15 Mar 2026 12:00:00 -0500

At some point I asked myself: how bad of an idea is it to use HTML checkboxes as pixels?

From Many Repos to One: An Honest Nx Monorepo Migration Retrospective

Sat, 21 Feb 2026 00:00:00 -0500

Migrating a standalone Angular app to Nx is a one-liner: npx nx@latest init. Migrating many Angular repos to an integrated monorepo is not. We consolidated several large enterprise Angular apps and libraries into a single Nx monorepo in late 2023. Here’s what that actually looked like.

Problem Statement Link to heading

To share components across multiple frontend surfaces (a main web app, a Microsoft Office add-in, and a mobile app), we maintained multiple Angular libraries. Every time we needed to change a shared component, the workflow looked like this:

Weight Projector - Interactive Calorie Tracker

Mon, 16 Feb 2026 14:30:00 -0500

I wanted a simple way to visualize weight loss projections over time, and while sites like Losertown provide calculations, they only display results in an HTML table. I wanted something with a nice graph that shows the trajectory at a glance.

Try the Weight Projector

Features Link to heading

The Weight Projector calculates your weight trajectory over a full year based on your profile and daily calorie budget:

Quasicrystals in Your Browser

Sat, 12 Apr 2025 17:50:42 -0500

Click here to view the interactive demo Link to heading

Epilepsy warning: The demo contains rapidly changing patterns and colors which may trigger seizures in susceptible individuals.

What is a quasicrystal? From Matthias Matthiesen:

Quasicrystals are highly structured patterns which are not periodic. Unlike the crystalline structure of e.g. hexagons, a quasicrystal will never line up perfectly with a shifted copy of itself. Here such a structure is created as the interference pattern between 7 waves approaching the centre of the image at equal angles. The 2011 Nobel prize in Chemistry was awarded for the discovery of quasicrystals in chemical compounds.

Nx Angular Component Generation Schematic: Path Does Not Exist

Sun, 06 Oct 2024 15:48:48 -0500

A few years back, I successfully migrated several Angular libraries and applications from individual projects to a monorepo using Nx. Nx is a great tool for managing multiple projects and libraries in a single repository.

Nx provides many schematics to generate code and migrate existing code. One of the most common tasks is generating a new Angular component. However, I encountered an issue where the schematic was unable to resolve the path where it was supposed to generate the code.

Handling Case-Insensitive Query Parameters in Angular

Fri, 15 Dec 2023 13:42:39 -0500

After searching through Google and StackOverflow and finding nothing, I decided to write my own reusable class to handle case-insensitive query parameters in Angular. I hope this helps someone else!

How to Use It Link to heading

Using it is as easy as:

import { ActivatedRoute } from '@angular/router';
import { CaseInsensitiveParamMap } from '../case-insensitive-param-map';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  // subscribe to query params changes:
  this.activatedRoute.queryParams.snapshot.paramMap
    .subscribe((params) => this.handleQueryParamsChanged(new CaseInsensitiveParamMap(params)));
}

private handleQueryParamsChanged(paramMap: CaseInsensitiveParamMap): void {
  const returnUrl = paramMap.get('returnUrl');
  // Returns the value of the first query param named 'returnUrl' case-insensitively
  // See the test suite below for more examples
}

Or if you don’t want to subscribe to changes, you can use the snapshot:

Safely migrate from hash-based routing to modern routing in Angular

Fri, 15 Sep 2023 17:45:40 -0400

If you have an old angular app that is still using hash-based routing via the HashLocationStrategy, you can safely migrate to modern PathLocationStrategy routing without breaking existing bookmarks or SEO.

Add this snippet to your AppComponent > ngOnInit:

this.router.events
  .pipe(filter((event) => event instanceof NavigationStart && /^\/#/.test(event.url)))
  .subscribe((event: NavigationStart) => this.router.navigateByUrl(event.url.replace('/#', '')));

Note that router.navigate will strip any query params. I used router.navigateByUrl instead.

You can now safely turn off useHash:

RouterModule.forRoot(routes, { useHash: false })

Now, if you hit a URL like https://example.com/#/foo/bar, the router will automatically redirect to https://example.com/foo/bar. This will allow you to incrementally migrate your app to modern routing without breaking existing links.

Serving an Angular CLI App over HTTPS Made Easy

Thu, 24 Aug 2023 10:49:47 -0400

I’ve discovered a simpler method than those discussed in this Stack Overflow post for serving an Angular CLI app over HTTPS using office-addin-dev-certs. Don’t be fooled by the name, these certs work for any local development!

Generate the certificates by running the following command and click “Yes” to trust them when prompted:
- npx office-addin-dev-certs install --days 365
You’ll find the generated certificates (localhost.crt and localhost.key) in your home folder ~\.office-addin-dev-certs
- Copy them to your angular project: cp ~\.office-addin-dev-certs\localhost.* .
- Don’t forget to add them to your .gitignore
Use these certificates with Angular by running:
- Run ng serve --ssl --ssl-key localhost.key --ssl-cert localhost.crt

Alternatively, add them to your angular.json so you can run ng serve as usual:

Bypass Angular interceptors using HttpContext factory + HttpContextTokens

Tue, 15 Aug 2023 00:37:53 +0000

If the HttpClient is being used within a dependency outside of your control (such as a 3rd party lib) you can still use the HttpContextTokens that were added in Angular v12 by using a HttpClient factory provider. You can scope this to individual modules or components using the providers array:

1. Add DisableInterceptorHandler + token (disable-interceptor.handler.ts) Link to heading

import { HttpContextToken, HttpHandler, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';

export const DISABLE_INTERCEPTORS = new HttpContextToken<boolean>(() => false);

@Injectable()
export class DisableInterceptorHandler extends HttpHandler {
  constructor(private httpHandler: HttpHandler) {
    super();
  }

  handle(req: HttpRequest<unknown>) {
    return this.httpHandler.handle(
      req.clone({
        context: req.context.set(DISABLE_INTERCEPTORS, true),
      }),
    );
  }
}

2. Provide the handler in either your `component`/`module`/`service`/whatever `providers` array Link to heading

  providers: [
    DisableInterceptorHandler,
    {
      provide: HttpClient,
      useFactory: (handler: DisableInterceptorHandler) => new HttpClient(handler),
      deps: [DisableInterceptorHandler],
    },
  ],

3. Enforce the HttpContextToken in your interceptor Link to heading

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { DISABLE_INTERCEPTORS } from './disable-interceptor.handler';

@Injectable()
export class AuthenticationInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (request.context.get(DISABLE_INTERCEPTORS) === true) {
      return next.handle(request);
    }

    return next.handle(request).pipe(
      // add your typical interceptor logic
    );
  }
}

Make dynamic PrimeNG table columns conditionally editable

Tue, 10 May 2022 16:11:00 -0400

The PrimeNG table component is a powerful data visualization tool and is a great free alternative to AG Grid.

Table columns can be defined dynamically using the *ngFor directive. However, if you do this there is no apparent way to conditionally mark a column as editable!

There is actually an undocumented pEditableColumnDisabled boolean directive that can be used to control if a cell is editable or not. The only documented directives are pEditableColumn and pEditableColumnField.

NgBootstrap Datepicker - US Date Formatter - Improved edition

Fri, 18 Sep 2020 00:00:00 +0000

In a previous post, I outlined my strategy of using the ng-bootstrap datepicker with a formatter for US dates (mm/dd/yyyy).

In this post, I will provide an updated version. Check the specs below for specifics on improvements. Among these are:

Allows basically any separator (including none at all!)
Works with or without zero padding months or days
Allows entry of double digit years, which will then assume 19XX or 20XX depending on the breakpoint that is set (40 is used below - check tests for details)

us-date-parser-formatter.ts Link to heading

import * as _ from 'lodash-es';
import { NgbDateStruct, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';

@Injectable()
export class DateParserFormatter extends NgbDateParserFormatter {
  private shortYearBreakpoint = 40;

  parse(value: string): NgbDateStruct {
    if (!value) { return null; }

    let dateParts: string[];
    if (/^(?:\d{6}|\d{8})$/.test(value)) {
      dateParts = /(\d{2})(\d{2})(\d{2}|\d{4})$/.exec(value).slice(1, 4);
    } else if (/^\d{1,2}[-\/]\d{1,2}[-\/](?:\d{2}|\d{4})$/.test(value)) {
      dateParts = value.split(/[-\/]/);
    } else {
      return null;
    }

    let year = _.toInteger(dateParts[2]);
    if (year < 100) {
      year += year <= this.shortYearBreakpoint ? 2000 : 1900;
    }
    return { year, month: _.toInteger(dateParts[0]), day: _.toInteger(dateParts[1]) } as NgbDateStruct;
  }

  format(date: NgbDateStruct): string {
    return date ? `${_.padStart(date.month.toString(), 2, '0')}/${_.padStart(date.day.toString(), 2, '0')}/${date.year}` : '';
  }
}

us-date-parser-formatter.spec.ts Link to heading

import { DateParserFormatter } from './date-parser-formatter';

describe('DateParserFormatter', () => {
  let parser: DateParserFormatter;

  beforeEach(() => {
    parser = new DateParserFormatter();
  });

  describe('When a string of the format m/d/yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1/2/34')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mm/dd/yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01/02/1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format m/d/yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1/2/1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format m-d-yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1-2-34')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mm-dd-yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01-02-1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format m-d-yyyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('1-2-1934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mmddyy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('010234')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mmdd19yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01021934')).toEqual({ year: 1934, month: 1, day: 2 });
    });
  });
  describe('When a string of the format mmdd20yy is parsed', () => {
    it('it returns the correct date object.', () => {
      expect(parser.parse('01022034')).toEqual({ year: 2034, month: 1, day: 2 });
    });
  });
  describe('When an invalid string with alpha characters', () => {
    it('it returns null.', () => {
      expect(parser.parse('abc')).toBeNull();
    });
  });
  describe('When a valid string with additional invalid chars', () => {
    it('it returns null.', () => {
      expect(parser.parse('123456abc')).toBeNull();
    });
  });
  describe('When an invalid string with numeric characters', () => {
    it('it returns null.', () => {
      expect(parser.parse('12345')).toBeNull();
    });
  });
  describe('When a struct is formatted', () => {
    it('it returns a string in the format mm/dd/yyyy', () => {
      expect(parser.format({ year: 1934, month: 1, day: 2 })).toBe('01/02/1934');
    });
  });
  describe('When a falsy value is formatted', () => {
    it('it returns an empty string.', () => {
      expect(parser.format(undefined)).toBe('');
    });
  });
  describe('When a short year is greater than 40', () => {
    it('it assumes 1900s.', () => {
      expect(parser.parse('1/2/41')).toEqual({ year: 1941, month: 1, day: 2 });
    });
  });
  describe('When a short year is less than or equal to 40', () => {
    it('it assumes 2000s.', () => {
      expect(parser.parse('1/2/40')).toEqual({ year: 2040, month: 1, day: 2 });
    });
  });
});

NgBootstrap Datepicker - US Date Formatter mm/ff/yyyy

Thu, 18 Jun 2020 00:00:00 +0000

If you have used Angular and Bootstrap then you are probably familiar with ng-bootstrap.

The default formatter that the datepicker uses is the ISO8601 format (yyyy-mm-dd). The docs have a sample that show you how to format the date as dd/mm/yyyy. I have adapted that sample to use the format that is the most widely used in the US (mm/dd/yyyy). Hope you find it useful!

us-date-parser-formatter.spec.ts Link to heading

import { UnitedStatesDateParserFormatter } from './us-date-parser-formatter';

describe('UnitedStatesDateParserFormatter', () => {
  let sut: UnitedStatesDateParserFormatter;

  beforeEach(() => { sut = new UnitedStatesDateParserFormatter(); });

  describe('Parsing', () => {
    it('should parse null undefined and empty string as null', () => {
      expect(sut.parse(null as any)).toBeNull();
      expect(sut.parse(undefined as any)).toBeNull();
      expect(sut.parse('')).toBeNull();
      expect(sut.parse('   ')).toBeNull();
    });

    it('should parse valid date', () => {
      expect(sut.parse('05/12/2016')).toEqual({ year: 2016, month: 5, day: 12 });
    });

    it('should parse non-date as null', () => {
      expect(sut.parse('foo/bar/baz')).toBeNull();
      expect(sut.parse('2014/bar')).toBeNull();
      expect(sut.parse('2014/11/12/15')).toBeNull();
      expect(sut.parse('5/7')).toBeNull();
    });
  });

  describe('Formatting', () => {
    it('should format null and undefined as an empty string', () => {
      expect(sut.format(null)).toBe('');
      expect(sut.format(undefined as any)).toBe('');
    });

    it('should format a valid date', () => {
      expect(sut.format({ year: 2016, month: 10, day: 15 })).toBe('10/15/2016');
    });

    it('should format a valid date with padding', () => {
      expect(sut.format({ year: 2016, month: 10, day: 5 })).toBe('10/05/2016');
    });

    it('should return empty string for invalid dates', () => {
      expect(sut.format({ year: 2016, month: NaN, day: undefined } as any)).toBe('');
      expect(sut.format({ year: 2016, month: null, day: 0 } as any)).toBe('');
      expect(sut.format({ year: null, month: null, day: 1 } as any)).toBe('');
    });
  });
});

us-date-parser-formatter.ts Link to heading

import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import * as _ from 'lodash-es';

@Injectable()
export class UnitedStatesDateParserFormatter extends NgbDateParserFormatter {

  parse(value: string): NgbDateStruct | null {
    if (value != null) {
      const parts = value.split('/');
      if (parts.length === 3 && this.isNumber(parts[0]) && this.isNumber(parts[1]) && this.isNumber(parts[2])) {
        return { month: _.parseInt(parts[0]), day: _.parseInt(parts[1]), year: _.parseInt(parts[2]) };
      }
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date && this.isNumber(date.day) && this.isNumber(date.month) && this.isNumber(date.year)
      ? `${this.padNumber(date.month)}/${this.padNumber(date.day)}/${date.year}`
      : '';
  }

  private isNumber(value: any): value is number {
    return !isNaN(_.parseInt(value));
  }

  private padNumber(value: number) {
    if (this.isNumber(value)) {
      return `0${value}`.slice(-2);
    } else {
      return '';
    }
  }
}

2023 Update Link to heading

Note the usage of the lodash parseInt function in the above code. This can be replaced by the ES5 version of parseInt in modern browsers.

Chicken tornado - A PixiJS experiment

Mon, 14 May 2018 00:28:02 -0400

I was bored and decided to see what PixiJS is all about. Sooo… I made a tornado of chickens.

Confused? No worries! Once you see the demo you will be even more confused!

Seizure warning. 200 multicolored chickens violently spinning will grace your screen.

Click here to unleash the chicken tornado Link to heading

Book Review: JavaScript: The Good Parts by Douglas Crockford

Sun, 10 Mar 2013 18:50:08 -0400

JavaScript, which was originally thrown together over a span of 10 days, has its share of bad parts. Of course, many of these have been remedied over the years thanks to ECMA standards process and the creation of high performance JS engines such as Google’s V8. Enter the highly divisive and opinionated book from the original JS guru, Douglas Crockford.

I thoroughly enjoyed this book and felt that I learned so much from it even though it is a shorter book. Though it is necessary to state that this book is not for JS beginners. The main thing that I did not enjoy are the reliance upon the railroad diagrams, which are not very intuitive to anyone who has previously not implemented some sort of context-free grammar (which I would wager is a majority of JS programmers).

JavaScript on bradleycarey.com

Checkbox Canvas: Images & Video

Checkbox Canvas: Games

Pong (interactive) Link to heading

Checkbox Canvas: Visual Effects

Spirals Link to heading

Checkbox Canvas: Simulations

Slime Mold Simulation (interactive) Link to heading

Checkbox Canvas

From Many Repos to One: An Honest Nx Monorepo Migration Retrospective

Problem Statement Link to heading

Weight Projector - Interactive Calorie Tracker

Features Link to heading

Quasicrystals in Your Browser

Click here to view the interactive demo Link to heading

Nx Angular Component Generation Schematic: Path Does Not Exist

Handling Case-Insensitive Query Parameters in Angular

How to Use It Link to heading

Safely migrate from hash-based routing to modern routing in Angular

Serving an Angular CLI App over HTTPS Made Easy

Bypass Angular interceptors using HttpContext factory + HttpContextTokens

1. Add DisableInterceptorHandler + token (disable-interceptor.handler.ts) Link to heading

2. Provide the handler in either your component/module/service/whatever providers array Link to heading

3. Enforce the HttpContextToken in your interceptor Link to heading

Make dynamic PrimeNG table columns conditionally editable

NgBootstrap Datepicker - US Date Formatter - Improved edition

us-date-parser-formatter.ts Link to heading

us-date-parser-formatter.spec.ts Link to heading

NgBootstrap Datepicker - US Date Formatter mm/ff/yyyy

us-date-parser-formatter.spec.ts Link to heading

us-date-parser-formatter.ts Link to heading

2023 Update Link to heading

Chicken tornado - A PixiJS experiment

Click here to unleash the chicken tornado Link to heading

Book Review: JavaScript: The Good Parts by Douglas Crockford

2. Provide the handler in either your `component`/`module`/`service`/whatever `providers` array Link to heading