• A React Application inspired by InstaCart.
• A side panel allows navigation among departments.
• Clicking images brings up a detailed modal diaglog with complex quantity form handling.
• This application is built using the latest version of React Hooks and React Router.

• A pair of websites for managing file uploads of CSV files.
• The front-end is a React web site, that has a login button on the Navbar that brings up a Modal that includes Account Registration.
• The back-end is a Python/Django web site that handles the REST API and account management.
• After an account registration form is filled on the back-end, an email is sent with a link to activate the account.

A website created for City College class CNIT132A: "Advanced HTML & CSS". These topics are described in detail on the Assignments page:

• Site performance optimization
• Responsive design and media queries
• SASS Preprocessor and CSS Custom Properties
• Semantic HTML, Accessibility, ARIA, and Micro-data
• CSS Flexbox, CSS Grid, and CSS Animations

Please view the "About" page for an illustrated history of my programming career.

• Three.js is a 3D graphics library for JavaScript.
• I created an Animation Framework that sits on top of Three.js, and used it to illustrate the principles behing the classic Merge Sort algorithm.
• On this website, I created another Animation Framework that allows you to add CSS-like keyframes for Canvas graphics.
• This web page describes the classic Heap algorithm using the Canvas animation.
• This web page describes the classic Breadth First Search algorithm using the Canvas animation.

• This chat application allows multi-user interaction via web-sockets.
• The back-end is a Node Express application run on an Ubuntu Virtual Private Server.
• The front-end is a React application run on shared hosting.
• A Sqlite database stores all messages, and retrieves them on page reload.
• The Express Server uses express-validator middleware for the API, and sanitize-html middleware for the sockets.
• Sample messages are humorous quotes from ABC's hit show "Desperate Housewives".

• The React App we developed at Tremor Video to preview our projects.
• This Miracle Grow ad is a typical interactive video ad. Here it is displayed as it would appear on a mobile phone.
• Click the "play" icon in the center to start the video.
• A clickable banner slides into view from the lower left corner. Click exactly on the banner to pause the video and display the "Products" page.
• From here, you can click the buttons "Find Online", "Find Locally", or "Video".
• Note: the "Find Locally" link does not work on this demonstration app, but on an actual device would display a list of locations, and clicking any location would then open up the default maps app with a pinpoint showing the store.
• After the video completes, a variety of other ad samples are displayed.

• Mocha is a popular JavaScript testing framework. Mochawesome is a project that converts the output Mocha tests into JSON, and the Mochawesome Reporter uses this JSON as a input to a React application to display the results.
• I forked these projects and added features to display additional data describing the Mocha tests.
• Then I wrote several hundred Mocha tests to illustrate many fine points of the JavaScript language from the MDN documentation.
• The tab buttons along the top navigate among JavaScript categories.

• My presentation at the ForwardJS JavaScript conference in San Francisco February 2019.
• The custom video advertisement platform I helped develop at Tremor Video, uses a semi-transparent Canvas overlay with event handlers to allow a user to navigate scenes of the advertisement.
• I developed a set of features that add Mobile-friendly handlers for creating swipeable and scrolling panels for Canvas elements.
• The interactive video advertisement for Burberry is shown in slide 4. After the video loads, click "Click to Explore", to reveal an autoscrolling panel of fashion models. Swiping or mousewheeling on the panel rapidly navigates the infinite scroll. Clicking on an image navigates to a exploded graphic of the clothing items, and then clicking an item adds it to your cart on Burberry.

• The key to a extensible and maintainable backend system is a well-crafted object model.
• This project is a Node backend for playing the game battleship. The game is represented using an object-oriented design for Ships, Tiles, Board, Moves, and Game.
• I wrote a comprehensive Mocha test suite with 100% code coverage.
• Documentation is a must for any software project. I used ESDOCs convert in-code annotations into collection of web pages for every object, method and property.

• D3 is a feature-packed low-level graphics library, that is not user-friendly. I wrote D3QuickGraph to simplify creating graphs with a options for auto-scaling, line styles, symbol styles, grid styles, legends and more.
• D3QuickGraph-React is a react wrapper around D3QuickGraph, which has input forms to change the line style and grid.
• Click the Gear icon to reveal the forms.
• Click the Info icon to open the extensive ESDOCs for D3QuickGraph.
• There are many more features in D3QuickGraph than those demonstrated here.