← Back to work

Faze.js

Faze.js is a small, focused open-source utility library inspired by Lodash. I created it as a learning project to understand modular library design, bundling and documentation generation.

"If you build it, he will come" Field of Dreams

Overview

Faze provides a handful of lightweight helpers that solve common problems without the size or surface area of a larger utility library. The project is written in vanilla ES modules with a small build pipeline so it can be consumed in both modern bundlers and as a browser-ready bundle.

Motivation

At the time I wanted a tiny set of utilities that I could reason about and maintain myself. The goals were:

  • Keep the API tiny and ergonomic
  • Ship a UMD/ES build so it works in multiple environments
  • Auto-generate documentation from JSDoc comments

Implementation

Faze is organised as a set of named exports in individual files, then composed into a single entry point for distribution. Key implementation notes:

  • ES module source files for tree-shake-friendly imports
  • Webpack for bundling a compact browser-ready build (generates dist/faze.min.js)
  • JSDoc comments used with documentation.js to create the project docs

Example usage:

import { clamp, debounce } from 'faze';

const clamped = clamp(150, 0, 100); // 100
const debounced = debounce(() => console.log('debounced'), 200);
Faze.js Screenshot

Packaging & Deployment

The project uses Webpack to produce a browser-ready bundle. Running npm run build will compile the sources and output dist/faze.min.js which can be included directly in a webpage. During development the build can be run in watch mode.

Quick start from the repository:

git clone https://github.com/tomkiernan120/Faze
cd Faze
npm install
npm run build

You can then include dist/faze.min.js in a page or open test/index.html to try the unit tests/demo.

Documentation can be generated from JSDoc comments using documentation.js if you want to keep docs in sync with source, and the demo site can be hosted on GitHub Pages.

Learning Objectives

By working through this project you should be able to:

  • Design a small, maintainable JavaScript library using ES modules
  • Configure Rollup to output multiple module formats (ESM + UMD)
  • Configure Webpack to output appropriate module formats (UMD / ESM) and build targets
  • Write JSDoc comments and generate documentation with documentation.js
  • Publish a static documentation site to GitHub Pages
  • Keep bundle size small and APIs minimal for easier maintenance

Lessons Learned

  • Small APIs win: fewer functions made the surface easier to maintain and document.
  • Tooling matters: bundler configuration affects consumers, so testing both ESM and UMD builds is important.
  • Tooling matters: bundler configuration affects consumers, so testing builds (UMD / ESM) is important.
  • Documentation automation saves time and keeps docs in sync with code.

Try it

Visit the demo and docs: Faze demo.

If you want the sources or to try the build locally, clone the repo and run the build script in the project root (npm run build).

Conclusion

Faze started as a learning exercise but turned into a useful reference for me on small library design, tooling and documentation automation. It remains a snapshot of lessons learned early on and a paper trail of the problems I wanted to solve at the time.