@cremadesign/captcha NPM

Crema Captcha

I began developing this plugin in 2013 with a simple goal in mind: block spam without annoying users. Your clients don't want to decipher garbled words or play "Find the Storefront". They just want a simple contact form that works. Over several years, this project evolved from a disjointed medly of basic functions into a customizable pure javascript plugin with advanced captcha filters.

NPM Dependencies

Crema Captcha's build process requires NPM, Rollup, and a few plugins. This open-source setup allows us to write newer javascript with modern ES6 features such as import statements and tree-shaking unused functions. Rollup compiles everything to the dist/ directory using the following NPM plugins:

Node Resolve Plugin: Allows us to use external ES modules.
CommonJS Plugin: Allows us to use external CommonJS modules.
Babel Plugin: Transpiles ES6 code to ES5 code older browsers can understand.
Uglify: Minifies plugin JS for production.
ESLint: Validates syntax and code style.
Badwords: An array of obscene words for the profanity filter.
Rot: A rotational cipher that obfuscates the badwords array, so it doesn't show up in final output.
Replace: Inserts the obfuscated badwords array into our final output.

src/index.js is the main entry point for the JS compile script. So be sure to start there.

How to Build

The compiled JS plus its sourcemap is written to the dist/ directory.

Development

To compile your JS (excl. minification) whenever you make a change to a JS file. This will automatically compile changes to our captcha at captcha.test, but will not be added to Cremastrap.

yarn watch

Production

To compile your JS for production (incl. minification), run:

yarn build

How to Use

Adding it to a website is easy. See the init instructions on the official site: https://captcha.cremadesignstudio.com/

Credits

My build process was heavily inspired by three different build scripts:

Rollup Bundle and Watch: This author's recipe was used as the general framework for my setup.
Learn Rollup.js Part One: This informative guide explains Babel and the Rollup config more in depth.
Bootstrap: Bootstrap's build process introduced me to Rollup and gave me some basic ideas on packaging, such as banner.js and package.json.