Electrical Trades Job Calls Database

A dashboard for tracking employment trends in the Construction sector.

It displays data relevant to the various classifications of members represented by the union about available jobs. Users can search by date, worker classification and company. Returned results can be filtered further in order to glean information about specific types of construction projects.

React Chart.js

Job Calls API / Database / Scraper

An API that returns JSON data pertaining to the employment of workers in the electrical and communications trades.

A Node script uses Puppeteer to automatically sign into the IBEW Local Union 353 website, parse the DOM and extract information about jobs available to electricians, line workers and communications workers. Each day the script writes the selected HTML elements to a new JSON file. This data is then used to populate a Postgres database. The API returns JSON data after receiving requests at any of three endpoints.

Node Express.js Postgres Knex.js Puppeteer Shell scripts

ETJC DB Auth System + Email Alerts

Authentication and authorization for the job calls app. Users can create an account and receive Email alerts about job postings.

A special thanks is owed to the Web Dev Simplified and the Stoic Programmers Youtube channels whose tutorials guided me through building the auth system.

JSON Web Tokens Auth HTML Email SendGrid API

Pixel Text Renderer

A reusable React component that renders a string to a canvas element. The section headings on this page are rendered with the vanilla JS version.

Try it out!

npm i react-pixel-text-renderer

Pixel Character Editor

This utility application can read, preview, modify and save character definition files for the Pixel Text Renderer. Because manualy writing [0, 1, 2, 3, 5, 9, 10, 11, 12, 13, 14, 15, 20] for the letter P isn't much fun.

React Styled Components Browser File API

Image Destroyer

An experiment in direct pixel manipulation of images pulled from a NASA image API. Image destroyer renders images on a grid of div elements, and can draw text of arbitrary length to the display.

When I took CS50 in 2020, I was fascinated by a series of projects related to iterating through information that represented images. My background in photography probably accounts for this fascination. Looping through image data made me feel close to the material of the image itself in a way that was familiar from my days spent in the darkroom and in photoshop. I wanted to continue to explore image manipulation using javascript.

Vanilla JS HTML CSS

Canvas Destroyer

A refactored, more performant implementation of Image Destroyer using canvas elements. Capable of rendering text from strings and embedding a 'secret' image in another image.

There is a famous 16th century oil painting by Hans Holbein called The Ambassadors. It contains an unusual element - an anamorphic skull. When viewed straight on, this skull is illegible. It looks like an oblique stain across the painting's surface. When viewed from the correct angle however, the skull can be seen.  Similarly, Canvas Destroyer creates a pixel array which renders different images depending on the width of the area that the data is mapped into.

Vanilla JS HTML CSS

High Voltage Analog

HVA takes a string of arbitrary length and renders it on a grid of 14 segment displays. The display can be customized by adding or removing 14 segment modules.

This is the evolution of one of the first things I built with javascript. I love archaic technology and analog electronics. It was a fun exercise in manual DOM manipulation and CSS styling.

Vanilla JS HTML CSS

Smart Brain

The fullstack final project in the Zero to Mastery Complete Web Developer course.

When given the URL to an image, Smart Brain connects to an image recognition API which returns coordinates for faces in the image. It uses a relational database to store user information and securely hashes login credentials.

React Node Express.js Bcrypt Knex.js Postgres

Ben Eater's 8-Bit Breadboard Computer

A programmable computer built on breadboards out of rudimentary TTL integrated circuits. It has 16 BYTES of RAM for programs and data.

This was my bridge between an interest in electronics and exposure to programmable logic controllers in the electrical trade on the one hand, and programming on the other. This kit gave me so much insight into how computers work at the hardware level. Building this literally entails defining the bit patterns (ie instructions!!) that the machine responds to.

Assembly Adruino Electronics C++