Learning React made me a better developer

After the entertainment industry shutdown in 2020, I had some time to learn more about current web development technologies. Previously, I would reach for the same set of tools to accomplish a web dev job, no matter what the requirements were. I used Django and jQuery for everything, and could crank out apps for Masque in a day or two. I found comfort in these technologies and the results were pretty good. I used VueJS in a freelance project and was amazed by it, but never spent the time to refactor my existing apps, or implement new apps using it at Masque.

During quarantine, I built three apps in multiple iterations with advanced features (real-time collaboration, hierarchical permission system, file sharing, chat, etc.) using React.

Since I was coming from jQuery, I had a little JavaScript knowledge, so I was able to spin up a project fairly quickly using the React guides. Building the front end of these apps entirely in JavaScript taught me so many more useful techniques that I now take back into my Python/Django work.

The first takeaway was the developer experience. Other than a few extensions in VSCode, there isn’t much of a Django specific development experience. The Create React App node script creates an environment that provides excellent linting, debugging and hot-reloading. I’ve now installed more Python tools in VSCode to help find unused imports, syntax errors and errors prior to reloading the page.

The second takeaway was immutability. Python is incredibly dynamic by design, and since I learned to code with Python, I may have developed some bad habits and anti-patterns. For example, I would consistently assign different types of objects to the same variable throughout a function or method and check its type at the end to determine the outcome (i.e: is it False or is it an object?). This makes debugging difficult and the code hard to read. In JavaScript, when there’s a “const” declared, I know that it’s not going to change throughout the function. The heavy use of the spread operator in JS to copy immutable objects to make state changes made its way into my everyday Python coding. There are certainly reasons to use dict.copy and dict.deepcopy, but I find myself using the **dict and *array syntax for simple copying, where previously I would use the dict methods or worse, looping through dict.items()!

The third takeaway was array methods with immediately invoked functions. These have always been available in Python, but there was no incentive for me to use them in Django since a standard forloop (or multiple nested forloops) usually would suffice. In React, I use the Array.map function a lot, and in doing so, I’m now using the map() with a lambda function in Python. There aren’t really any severe performance increases, but it makes my code easier to read and debug by using this succinct syntax.

I’m now a React disciple. I find building apps using React instead of Django template with jQuery or Vue to be so much easier to troubleshoot, architect and maintain. I still use Django or Flask as a Python API back end if it’s needed, but instead of reaching for the same set of tools each time, I’ll now develop using the best tool for the job.

MIDI to OSC app

At the start of the entertainment industry shutdown in March 2020, I was contacted by a lighting designer who needed an application to convert their MIDI controller’s input to OSC commands on a Windows PC to control LightForm and LightJams.

Due to the experience I had building the OSC Controller hardware device, the designer thought I would be able to create an app for him. Using my existing toolkit (Python), I found a tech stack that I was comfortable with: MIDI in Python, OSC in Python, combined with web technologies (HTML/CSS/Javascript).

Using the Python Eel package, I created a standalone application that launches a dedicated instance of Google Chrome and connects to the host computers i/o through Python. This selection of tools allowed me to create a portable executable program that would run on most PCs.

The program functions as designed, and solves the niche problem of not being able to run OSCulator on Windows!

See it on GitHub at https://github.com/matt-dale/MIDI_TO_OSC

Masque Sound RFID System

 

The Masque RFID concept started with George Hahn(the Masque Sound Director of Production) asking me to research various handheld long-range RFID readers to use throughout the Masque Sound warehouse.  What this research helped me discover was the world of UHF RFID inventory systems.  I designed a system that uses fixed readers rather than mobile readers that interrogate tags and record their locations to a PostgreSQL database and provide real-time alerts to workers for issues that the system finds.

That system description sounds simple enough, but it took a lot of asking “why” to get the results that George was looking for.   He was looking for a way to catch items that were not correctly scanned to a given show as a show was being loaded onto a truck.  His original plan included a handheld “wand” that would interrogate tags and would respond with their inventory status.  By moving this idea to a multiple fixed reader system, I was able to add another, more valuable(in hindsight) feature of asset location logging.

The search for both readers and tags was a long one.  Tags needed to be durable, small, versatile and cheap.  This requirement set wasn’t able to be satisfied with just one type of tag in the end.  Since Masque Sound owns a lot of metal rack mount assets, which are generally at least 1 3/4″ tall, we found a “universal” tag made by Metalcraft that read over 15 feet from a reader, and was small enough to fit on the side of a 1 rack unit asset.  It also allowed us to install the tags on other small metal assets, like direct boxes, LCD monitors and mixing consoles. 

For our large road cases, we found a very cheap paper tag in the “wet inlay” format, which read from over 15 feet from a reader and had a very large antenna surface area. These tags, from Avery Dennison RFID, are installed underneath the carpet lining of each road case that Masque owns. These tags are very durable due to their hidden installed location, and the large surface area of the antenna.  These tags will not read when installed on a metal asset, but they are much cheaper than the “universal” metal-mount tags.

For the smaller niche assets where the larger tags don’t fit, we use a smaller “universal” tag from Metalcraft and a smaller tag from Avery Dennison RFID.  These tags read over 10 feet away, but they work well in our environment.

 

 

See further posts on how this system integrates with all others in the Masque Sound Warehouse.

 

Masque Sound Operational Projects

Each of these projects assists in day-to-day operations to improve the efficiency of the sound shop with clean user interfaces and efficient design.

Masque Sound uses the Unibiz R2 rental software, so much of my programming is based around extending this software.

Third Stream Web App

This application provides a more intuitive and more advanced interface for interacting with the Oracle backed, Unibiz inventory software, R2.
Using webservices, stored procedures and direct database queries on multiple databases, this application provides asset tracking, order filling, inventory control, all with a cohesive databse that integrates with all my other applications.

Each tile in the screenshot is a link to a full fledged application, some of which are detailed below.

The Windows 8 design style was adopted to get users used to the “Windows Store” style application before the company wide upgrade to Windows 8. This style guide was created using the PureCSS framework.

While this first iteration of the application is still in use and is the flagship of my development, the new, more streamlined version ThirdstreamV2 has a much more modern look, although it uses Bootstrap to handle its styling.

 

Mobile Asset Management Apps

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This application was designed to give users a mobile way to check asset status throughout the warehouse. We use a Bluetooth barcode scanner that mounts to back of an iPod Touch and incorporated it into the mobile site.  By making the app web based, we are able to use this app on many devices including Android devices.  This app uses AudioJS to playback sounds corresponding to the statuses of the assets that are scanned.  Additionally, “bad scans” are logged to a database table and displayed on a dynamic sign in the manager’s office.

Another application was developed to record asset location information in the warehouse. Using pre-existing shelf location barcodes I created a database that
records the asset’s current shelf. The app simultaneously uses a custom Unibiz stored procedure that writes the shelf location to a field in R2. The R2 field is always the most current location, but asset location history is saved in the Thirdstream database.

Dynamic Signs

The “R2Today Screens” are a set of 5 different signs that are displayed throughout the warehouse on large LCD monitors. These provide a consolidated list of outgoing orders for the various departments. It is updated in realtime with direct queries to the Oracle inventory database.

The design inspiration came from airport/train station arrival/departure screens. It uses color and scrolling statuses to keep warehouse workers up-to-date on what work needs to be done.

Speaker Testing System

The purpose of this system is to automate as much of the speaker testing process as possible to increase warehouse efficiency.

The user interface is programmed using IronPython and connects to the Audio Precision APx API.
The app accepts a barcode scan of the speaker then:

– opens the test procedure,

– checks the status of the asset,

– provides setup prompts for the procedure,

– runs the procedure,

– saves test result data,

– saves asset location data,

– saves test history records

and updates the asset’s information in the R2 inventory system

All with one barcode scan.

RMA System

This system allows clients to enter information about their items that they need to send back to the warehouse. It incorporates an email system to alert the repairs manager and the necessary project managers. There is an admin system for the repairs manager to enter details about a particular RMA. This gives the clients a better idea of the status of their returns and lets them know shipping information.  This system is built on Bootstrap V2 and Django 1.10.

Scheduling System

This system is a permissions based calendar with resource/task assignment. It houses the company’s vacation calendar and projects.

The custom interface allows management to see long term workload and day-to-day planning. The front end was designed by Sean Colandrea.

The daily view shows the work to be completed for each day and provides a quick report generator for the manager to run meetings.

“SMURF” scanner interface

Andy Leviss(Duck’s Echo Sound) created a hardware device for scanning the RF spectrum into a CSV file. I created this user interface which takes file and venue information and automatically emails the results to Masque Sound for analysis and frequency coordination.

This uses Tkinter for the UI and pySerial for connection to the hardware device over USB.

Trucking System

Masque was using a paper and bulletin board method for trucking dispatch requests.  There were too many human errors with this system, so I built a simple dispatching system that requires users to enter the correct information.  The system continues to print dispatches on paper for the drivers to carry, but creates a traceable, searchable history for auditing.

Reporting System

Tracking the shows that have Masque equipment on Broadway became a fun way of testing how healthy the business is.  I developed a simple database reporting app that creates a nice metrics application.

Purchasing System

Masque previously used paper/pencil and spreadsheets to keep track of purchase requests and statuses.  This was handled by one employee who was overworked and needed help.  I built this application directly with this employee to make his job simpler and easier to track the millions of dollars of equipment that he purchases for the company.  The system sends notification emails and texts when requested items are ordered, delivered or received, and connects to APIs on FedEx, UPS and DHL to get delivery status updates.

Physical Inventory System

This system was built to accommodate more frequent inventory counts.  The previous method was to use an outside vendor to capture the data, then spend days importing the data back into R2.  By creating a custom solution that works on smart phones, we are able to conduct cycle counts, and format the data correctly prior to importing into R2.  The flexibility that this system offers gives more validity to the availability feature in R2.

RFID Inventory System

I designed and deployed an RFID inventory system at Masque Sound that uses Alien ALR-9680 readers and an assortment of RFID tags to track high value equipment through the warehouse.

The system was created to aid in asset tracking and inventory control and supplements the current barcode system in use. The various readers around the warehouse connect to a PostgreSQL database and through the Twilio API provides text message updates to alert of asset issues.

An alarm system is setup in two locations to provide immediate feedback to a shop employee in the area.
Using the GPO of the readers, a strobe light is turned on and a sound is played until the offending condition is addressed.

Loading Dock RFID System

This system is integrated with the Third Stream web application and the R2 inventory system. The user interface is a touch screen mounted on the wall near the loading docks. When a truck driver is loading a truck, they press the “Use Dock” button and the system goes into inventory control mode. As items pass through the loading dock, the CAEN Ion RFID reader verifies that each item has been properly documented in the R2 inventory system. It also updates a location history record in Third Stream. If the system finds a “bad” asset, a flashing light is set off, the item is displayed on the user interface and a warning message is texted to the shop foreman, the inventory control manager and me. This allows one of us to fix the bad item without stopping the truck loading.

When the system is not using the loading docks, it goes into “watch” mode. Every item that is seen on any one of its 16 antennas gets an asset history location record in Third Stream for asset tracking.

The user interface is programmed using IronPython to create a C# Winforms application. It connects over TCP to the CAEN RFID reader.