My Journey Through Open Source

Image credit: Autumn road by Patrick Tomasso

The feeling of working on open source is strangely unique and fulfilling. You feel as though you’re contributing to a greater good comprised of a network of brilliant people from all around the world. It’s a sensation that I rarely feel in my general work as a software engineer, and it reminds me of why I got into programming in the first place.

Towards that end, I’d love to share some of the open source projects that I’ve worked on, with the hope that they will inspire someone out there to do the same!

Whether it’s finding a cool project that you’re interested in, forking it, and contributing back (guide), or if you want to get better at publishing your own open source projects, I encourage you to get out there and start committing!

Most of these projects focus on JavaScript, broken down into the following categories:

• Node.js
• React
• Puppeteer
• FFmpeg
• Crawling
• Graphics
• Koa
• Misc

Node.js

• update-markdown-jsdoc — Updates a markdown document section with jsdoc documentation. Useful to automatically update a library’s readme with API docs.
• update-markdown-usage — Updates a markdown document section with CLI usage info via --help. Useful to automatically update a CLI’s readme with Usage docs.
• abstract-object-storage — Collection of useful utilities for working with Google Cloud Storage.
• p-cache — Decorator to memoize the results of async functions via lru-cache.
• random — Seedable random number generator supporting many common distributions.
• id-shortener — Efficient id / url shortener for Node.js backed by pluggable storage defaulting to redis.
• node-compat-require — Easily allow your Node program to run in a target node version range to maximize compatibility.
• async-await-parallel — Node.js module with simple concurrency control for awaiting an array of async results.
• snapchat — Node.js client for the unofficial Snapchat API
• ip-set — Efficient mutable set data structure optimized for use with IPv4 and IPv6 addresses. The primary use case is for working with potentially large IP blacklists.
• rect-cover — Computes a transform between two rects just like background-size: cover. (demo)
• rect-contain — Computes a transform between two rects just like background-size: contain. (demo)
• github-is-starred — Checks if a user has starred a particular GitHub repo.
• github-is-starred-cli — CLI to check if a user has starred a particular GitHub repo.
• webtorrent — Streaming torrent client for the web. ⚡️ (demo) (contributor)
• ow — Function argument validation for humans. (contributor)
• awesome-lint — Linter for Awesome lists. (contributor)

React

• create-react-library — CLI for easily publishing modern react libraries. ⚡

Create React Library (CRL) is easily one of my favorite and most used open source projects. It’s kind of like Create React App (CRA)’s younger sibling. It even uses CRA under the hood for example usage and local component development.

• react-modern-library-boilerplate — Boilerplate and CLI create-react-library for publishing modern React modules with Rollup and example usage via create-react-app.

Example of using create-react-library to create a reusable React component npm package.

• react-background-slideshow — Sexy tiled background slideshow for React 🔥 (demo)
• react-starfield-animation -Canvas-based starfield animation for React ✨ (demo)
• react-particle-effect-button — Bursting particle effect buttons for React 🎉 (demo)
• react-particle-animation — Canvas-based particle animation for React 🌐 (demo)
• react-block-image — React replacement for img with more control + fallback support. 🌃 (demo)
• react-mp3-recorder — Microphone recorder for React that captures mp3 audio 🎵 (demo)
• react-before-after-slider — A sexy image comparison slider for React. (demo)

Puppeteer

• awesome-puppeteer — A curated list of awesome puppeteer resources.
• puppeteer-render-text — Robust text renderer using headless chrome.
• puppeteer-render-text-cli — CLI for robust text renderer using headless chrome.

Example output png produced by puppeteer-render-text.

• puppeteer-email — Email automation driven by headless chrome.
• puppeteer-email-cli — CLI for email automation driven by headless chrome.
• puppeteer-instagram — Instagram automation driven by headless chrome.
• puppeteer-instagram-cli — CLI for Instagram automation driven by headless chrome.
• puppeteer-github — GitHub automation driven by headless chrome.
• puppeteer-github-cli — CLI for GitHub automation driven by headless chrome.

FFmpeg

• awesome-ffmpeg — Curated list of awesome ffmpeg resources with a focus on JavaScript. 👻
• ffmpeg-concat — Concats a list of videos together using ffmpeg with sexy OpenGL transitions.
• ffmpeg-gl-transition — FFmpeg filter for applying GLSL transitions between video streams (gl-transitions). This is a more low-level C++ version of ffmpeg-concat that extends ffmpeg itself.

ffmpeg-concat OpenGL transitions demo (also applies to ffmpeg-gl-transition)

• ffmpeg-probe — Wrapper around ffprobe for getting info about media files.
• ffmpeg-generate-video-preview — Generates an attractive image strip or GIF preview from a video.

GIF created with ffmpeg-generate-video-preview.

• ffmpeg-extract-frame — Extracts a single frame from a video.
• ffmpeg-extract-frames — Extracts screenshots from a video using ffmpeg.
• ffmpeg-extract-audio — Extracts an audio stream from a media file.
• ffmpeg-on-progress — Utility for robustly reporting progress with fluent-ffmpeg.
• ffmpeg-cli-flags — A comprehensive list of all ffmpeg commandline flags.
• get-mp3-duration — Computes the duration of an mp3 buffer in node or browser. (demo)
• p-exiftool — Wrapper around exiftool for reading metadata from many different file types.
• gif-extract-frames — Extracts frames from GIFs including inter-frame coalescing.

Example extracted frames from a GIF via gif-extract-frames.

Crawling

captcha-solver handles many different types of captchas, including Google’s reCAPTCHA v2.

• captcha-solver — Library and CLI for automating captcha verification across multiple providers.
• parse-email — Parses mime-encoded email messages.
• parse-otp-message — Parses OTP messages for a verification code and service provider.
• sms-number-verifier — Allows you to spoof SMS number verification.
• getsmscode — API client for getsmscode.com.

Graphics

Before & After demo of the primitive algorithm reconstructing an image with 500 random shapes.

• primitive — Reproduce images from geometric primitives. (demo)
• primitive-cli — CLI to reproduce images from geometric primitives.
• phash-im — Perceptual image hashing via imagemagick.
• phash-gif — Perceptual GIF hashing for easily finding near-duplicate GIFs.
• dissolve — Cool 2D dissolve effect generator. (demo)

Demo of dissolve effect generator.

Koa

• koa2-mongoose-crud — Koa 2 CRUD middleware for Mongoose models.
• koa-micro — Koa 2 microservices with batteries included.
• koa-api-boilerplate — Koa 2 API boilerplate with batteries-included.

Misc

• Milton — C++ Rendering Framework w/ MLT, bidi path tracing, etc. and OpenGL Previews (undergrad thesis project from Brown ‘09).

(Milton) The same scene rendered using ray tracing (top left), path tracing (top right), bidirectional path tracing (bottom left), and MLT (bottom right). The brute force path traced version in the top right should be seen as a correct, reference image. Note the lack of caustics on the floor and lack of indirect illumination in the ray traced version. Discrepancies in the bidirectional path tracing and MLT renders are due to differences in tone mapping as well as implementation issues with correctly handling specular paths.

• Mipscope — Cross-platform IDE for students learning assembly on the MIPS architecture. The focus is on a convenient debugging environment, including a visual, reversible debugger.
• Gravity-spritekit — iOS n-body simulation visualized with metaballs. Physics and graphics provided by SpriteKit.
• Gravity-cocos2d — iOS n-body simulation combined visualized with metaballs. Physics and graphics provided by cocos2d.

Gravity visualization demo (Gravity-spritekit, Gravity-cocos2d).

Conclusion

I’ve had a lot of fun creating all of these open source modules & demos. The open source community is thriving, especially for JavaScript & NPM.

Hopefully, one or more of these projects will spark your curiosity to fork & experiment… or you’ll go on to create your own open source projects that are better than mine! 😜

And finally, follow me on github if you want more awesome open source goodness!

Before you go…

If you liked this article, click the 👏 below, and share it with others so they can enjoy it as well.