Jay / Projects

Hi, I'm Jay Gillibrand, a software developer with extensive experience in both frontend and backend development. I specialize in creating rich, accessible, and highly interactive user experiences. Here are a few notable projects that showcase my work.

Web: Extensive experience with rich web apps in React, TypeScript, Dojo, vanilla JavaScript
Java: REST services, multithreading, client‑server apps, web apps, OSGi and Eclipse plugins
LinkedIn: https://www.linkedin.com/in/jay-gillibrand
GitHub: https://github.com/gillibrand
Education: University of California, Irvine
BS in Computer Science

Keyframe Click

Keyframe Click is a way to visually create CSS property animations by placing Bézier curves on a timeline. I wrote this as a hybrid app: React for navigation, layout, and custom controls. Vanilla-JavaScript for a high-performance, interactive <canvas> timeline.

Try it now or view the source.

Keyframe Click web app adding a point to timeline — Editing a a CSS "spring" animation.

Global Configuration Management (GCM)

GCM manages versioned artifacts across apps in the IBM Engineering Lifecycle Management (ELM) suite. I wrote and maintained almost all of its web UI, many REST services, and some of the Java backend services.

I developed the GCM tree component to support lazy-loading, fast renders, animated changes, keyboard navigation, a11y, multi-select, drag-and-drop, and more.

GCM UI with open configuration tree — Editing a GCM tree containing streams from other apps.

Query Builder

I wrote the GCM query builder UI, plus the Java services to parse its internal domain-specific query language and convert that to database queries. It can search based on various attribute types and conditions, nest boolean conditions, and be edited with drag-and-drop as seen here.

query editor — A query with nested OR conditions.

History on Canvas

The GCM history history graph shows the different branches and baselines of a stream. I used <canvas> to draw the connections. The optional mini-map in the bottom right can pan around extensive graphs. There are several ways to collapse, filter, and navigate to accommodate thousands of nodes.

history view — Viewing changes since a baseline was created.

DOORS Next

IBM DOORS Next is a market leading requirements management tool where I contributed many frontend and backend bug fixes and serviceability improvements. I also had the opportunity to revamp its query builder component (aka, filters).

Carbon Query Builder

I revised the DOORS Next query builder to align it with the IBM Carbon Design guidelines, added support for nested AND/OR groups, drag-and-drop reordering, and enhanced accessibility and usability.

Inline Delete

The old design let you remove conditions with a single click. That was error-prone, so I added inline "Remove" confirmations that still kept the speed of editing users expected. A tiny, fun detail that went beyond the original requirements.

Report Builder

Report Builder creates and runs reports across the IBM ELM suite. I bootstrapped the project to replace its jQuery UI with a modern TypeScript/React UI. That included initial project setup with ESBuild and rollup, writing some of its core React components, and adding features like drag-and-drop to its cross-product table component.

Bulk Tag Editor

I built a React tag editor component for Report Builder that needed a variation to modify multiple reports at once. I worked closely with a UX designer on this version that uses menus, icons, and color to effectively communicate all changes that will happen. Keyboard friendly.

Synergy / Change

Rational Synergy and Rational Change are a closely related pair of version control and defect tracking tools.

Worked on the Synergy Java API from the new client to the legacy server.
Transitioned proprietary Change HTML widgets to Dojo widgets.
Wrote a robust Java sync service to mirror Change artifacts between databases.

Course Clear Web Component

A web component dialog that stylishly animates in. Inspired by Super Mario Maker. No dependencies. Available on npm. Try it out below.

To get a smooth animation curve, I also created a quick-and-dirty keyframe generator.

Background

Your message

Pix Grid for Playdate

A pixel art app for Playdate. Written in Lua. Available on GitHub.

pixgrid playdate app — A stern bunny drawn in Pix Grid.

URL Clown for Chrome

A Chrome extension for editing URLs. I needed this for work and existing extensions didn't handle hash parameter key-value pairs. Available on Chrome Web Store and Github.

Sublime Text Plugins

Before there was VS Code, there was Sublime Text. Here are a few Python-based plugins I made.

Expand Selection: A command to expand the text selection to outer JavaScript functions.
Make Bookmarklet: Converts the JavaScript text of a file into a single line javascript: URL bookmarklet.
Dojo Modules: Lists discovered Dojo modules and inserts their fully qualified names as module imports.

Mac Plugins

A few plugins for Mac software.

Change Case: An Alfred plugin to change text case.
Pinboard: A LaunchBar plugin to access Pinboard bookmarks.
Cycle Window Sizes: A Keyboard Maestro library to cycle through window sizes.