The Portfolio of Derek Brooks

Prototype

I haven't used it in many years, but Prototype was one of the first javascript frameworks that I learned - and like most people, it blew my mind. I couldn't believe how simple and concise javascript could be.

Here are 14 projects that I've worked on tagged Prototype.

derek.broox.com

Screenshot of derek.broox.com
derek.broox.com is my general home page, online scrapbook, and development playground. Its primary purpose is to catalog my life and allow me to play with various APIs and web development technologies. It serves up thousands of photos, check-ins, microblogs, blogs, maps, videos, and various other data from my life. Since 2001, it has been a constantly evolving web application.

v8 - latest version

This is the first version of my site that I completely rebuilt in a new language and platform. I moved the entire site from a containerized LAMP stack to a server-side-rendered (SSR) Nuxt.js application that relies completely on the Broox API to power its content. I chose Nuxt and SSR in order to keep my SEO and open graph / social sharing meta tags intact while still providing a speedy, asynchronous client-side browsing experience.

Philadelphia Marketplace

Screenshot of Philadelphia Marketplace
Philadelphia Marketplace is the shopping center located within Philadelphia International Airport. They hired Red Five to update their site, give them a content management system and also set up interactive maps for their shopping center. This was a pretty simple project from an engineering perspective. I was in charge of integrating the design into our CMS, writing a bit of javascript for the front-end, and finally, deploying the site.

Bix Produce

Screenshot of Bix Produce
Bix Produce is a produce distributor based in Minnesota. They became interested in my company, Red Five after seeing the produce site that we built for Loffredo. I was in charge of integrating the design we came up with into our SiteMan CMS, and also deploying the site for Bix.

Smithson Woodworks

Screenshot of Smithson Woodworks
Smithson Woodworks is a side project that was run by my cousin-in-law, Jon Smithson. One year we decided to trade, he'd build me a component rack for my entertainment center, and I'd help him get his stuff online. Jon sent me a logo and some photos of his work, I helped him by setting up a Wordpress site that integrated with a Flickr account. Jon simply uploaded photos and created albums on Flickr and those would become automatically mirrored to the portfolio on SmithsonWoodworks.com.

Holiday eCards

Screenshot of Holiday eCards
This is a microsite that I built as a marketing tool for malls owned by PREIT. It allowed people to customize and send flash-based cards to friends and family. It was also built so that a campaign could be coupled with a contest. For example, all cards sent to moms on mothers day could be eligible for a mall gift card. For delivering the cards, I wrote a small script using the WhatCounts.com API. This little application was a lot of fun to work on and a huge success for the associated malls.

v2 - latest version

The Holiday eCard microsite was brought back to life for the winter holidays in 2009. Only this time instead of supporting only 3 malls, it was to support ~40 malls. That said, there were many performance improvements and generalizing of the codebase. The site was a great success receiving several hundred cards.

West Bank

Screenshot of West Bank
West Bank is an Iowa based bank that my company, Red 5 Interactive, had been working with for years. When they came to us for a redesign, my assignments were to integrate our in-house CMS, build a couple plugins, and build functionality to capture a user's zipcode and display the appropriate location-based content. The plugins I built were based on previous functionality they had and wanted to retain: current loan/savings rates, alerts, and custom newsletters.

Iowa Alcoholic Beverages Division

Screenshot of Iowa Alcoholic Beverages Division
Iowa Alcoholic Beverages Division is responsible for the regulation and control of all alcohol and tobacco in the state of Iowa. The division has generated hundreds of millions of dollars for the state of Iowa. Our company, Red 5 Interactive had hosted IABD for years. Up until this rebuild, they were one of the very last Java based sites running on an ancient server stuck in a closet in the back of our office. As time went on, it became scarier and scarier to let their site remain live. Once showing IABD the physical server they were running on, talking them into a complete rebuild was no challenge at all. One of the most daunting parts of this rebuild was the task of migrating all their content. I heavily modified our internal Site Spider to accomplish this task. The client had around 400 pages and 700 files that were linked to (mostly PDF press releases). I had to completely crawl their site, import everything into our CMS and fix every link to work correctly. Given the fact that they had FTP access to the old server, things were a mess, and this was not a simple task. I'm talking about some serious site scraping madness! Being such a large site, this client came up with all kinds of awesome ideas for our CMS, which I was able to add-on and commit back to the repository for our other clients. After setting up our internal CMS and importing their hundreds of pages/files, I had to build a Javascript Fund counter to display on their homepage. Basically, the client takes their projected income, enters it into a custom tool that I built in SiteMan, and my JS did the math to determine how much money was being transferred to the state every second. It then dynamically animated a count-up on the homepage. I also built some fancy, custom (and totally dynamic) javascript dropdown navigation. Finally, I had to model and build a custom plugin to allow IABD to import CSV files of their alcohol products, stores, and tobacco compliance data. Then, I built functionality to browse and search all of this data on the front-end. At the time, Iowa Alcoholic Beverages Division was basically a test of all my skills. Sys admin, back-end development, front-end development, scraping, importing, and finally deployment.

Loffredo Fresh Produce

Screenshot of Loffredo Fresh Produce
Loffredo is a high-end produce company serving much of the Mid West. When our company was hired to rebuild their site, my assignments were to integrate our in-house SiteMan CMS, create some plugins, build in a fancy javascript fruit carousel, and of course deploy the site to our production server. The plugin I built for this site simply allowed Loffredo to manage branches and employees and allow site visitors to contact them. The fruit carousel I mentioned was a custom javascript animation that cycles through various fruits on the homepage.

SiteMan

Screenshot of SiteMan
SiteMan is a Content Management System that we built at Red 5 Interactive. It was originally built so that mall property owners could manage each of their mall property's websites. However, once we realized how powerful our system was, we decided to generalize the app so that we could deploy it for all of our clients. We rebuilt SiteMan to allow our clients to easily manage a single website or a group of websites. This way, a parent company could edit any of their child company websites, while employees of the child companies would only be able to see and manage their respective site. The front-ends of the sites managed by SiteMan were also completely extracted from SiteMan itself, which was great for 2 reasons. First of all, it allowed us to more easily keep all of our clients' systems up-to-date in that we were just updating SiteMan and not touching their presentation layer. Secondly, it also allowed us to launch new campaigns and designs for clients very quickly without touching the content management system. When we deployed SiteMan for a client it came with a core group of tools like user management, web page editing, file management, audit logs, etc. From there, custom tools could be added as plugins. These tools included functionality like, announcements, events, careers, photo galleries, stores, social networking, etc. We also built SiteMan in a way that allowed users to customize their tool layout. Any user could pick which tools they used the most and arrange them in a way to get a quick snapshot of the exact data that they were interested in. Tools could be added, removed, or sorted at any time - and everything remained just as they left it on their next visit. This application was very Javascript heavy, making extensive use AJAX, dialog windows, and WYSIWYG editing. As such, we had minimal page loads which provided a very streamlined experience for our clients. I am very proud and excited to have worked with such a great team on this app. It was so versatile and simple to keep pushing forward.

TMC Transportation

Screenshot of TMC Transportation
TMC, a local trucking company with some of the most beautiful trucks that I've ever seen, hired us to rebuild their website and enhance their web presence. I was in charge of modeling and building a system to manage employees, sales reps, and news. The sales rep data was fed to flash maps via XML. The careers page was built by consuming a remote XML feed.

iTunes Web Remote

Screenshot of iTunes Web Remote
In 2008, I bought a couple Airport Express modules to create an iTunes controlled whole-house-stereo. It was awesome until a terrible song would come on and I'd have to run upstairs to skip to a better tune. Apple quickly became aware of this problem and released an iTunes remote for iOS. However, at the time I didn't have any iOS devices and I couldn't justify spending a few hundred dollars for an ipod touch/iphone music remote. As such, I decided to build a remote of my own. Using PHP and AppleScript to communicate to iTunes, I was able to whip up a super light web-based remote that ran on my Mac. With "LAMP" running locally, I could visit the IP of my Mac from any device on my internal network and navigate my songs. At the time, I used this to switch songs via my blackberry, sidekick, a PSP, or even our Nintendo Wii. It was great for parties!

Glimcher

Screenshot of Glimcher
Glimcher is a premier real estate investment trust that manages malls and shopping centers across the United States. They came to my company, Red 5 Interactive, seeking a corporate website. My company had already built and launched this site by the time I began working on it, so my job was simply to enhance some features on both the admin and the front-end. Glimcher wanted a near real-time display of their stock price on the homepage. However, there weren't any great services to grab this information at the time, so I built a CRON scheduled script to scrape a couple quote sites and grab their stock price. Whenever the price was successfully grabbed, the price was written to a local file that was read by the website. Glimcher also wanted real-time stats on their leasing informational pages, so I added some functionality to display updates on leasable square feet, property count, etc. Finally, they wanted to be able to quickly show/hide all dynamic content on their website. I added some simple toggling as well as drag/drop sorting to any and all data in the CMS.

Team 46

Screenshot of Team 46
Team 46 is a group of service and avionics specialists working at the Des Moines Flying Service (DMFS). They hired our company, Red 5 Interactive, to make a micro-site for their technicians. The Team 46 micro site was pretty straight forward. They needed a way to blog, manage case studies, take service requests, and upload photos. For the blog, I simply installed an internal blog plugin that I'd previously built. Everything else in the CMS was custom programmed. There was nothing crazy about this app, but everything was built and deployed very smoothly.

The Bellevue

Screenshot of The Bellevue
The Bellevue is a building located in downtown Philadelphia that houses restaurants, shops, and a hotel. They hired my company, Red 5 Interactive to build an informational site for them. I built a small, custom content management system for this site allowing Bellevue to manage events and photo galleries. The photo galleries could be organized and sorted via drag and drop.