Projects

Of course I’ve done a lot more projects than are listed here. But each of these is either a personal favorite or I am particularly proud of.

The Quad – Internal Communications Application

(quad.bates.edu) This is a single page application aimed at communicating with internal audiences. The daily announcements and events are also compiled into an email which is sent to the entire student body, faculty, and staff. The entire main page is created with javascript, gathering the data from a different source for each module, then composing everything in a visually cohesive way. The data is put together by php on the server side, which in turn gathers it from various sources such as WordPress custom post types (for the announcements), a third-party events application, a third-party athletics web service, a WordPress feed of dining menu items.

The application is complex with a variety of systems and WordPress plugins working in tandem to produce the email, the web application, and provide a system for student and staff to submit announcements and manage what goes into the email each day.

The interface for the email editor is built within the WordPress framework, but primarily with ajax. It uses the exact backend code to produce the email within the admin page, then a javascript layer provides the managing capabilities.

The floating bar at the top provide quick filters for the editor to see what’s been approved and what hasn’t. 

The color code at the left of each item shows it’s status.

Hovering over an item displays the quick action buttons which change an item’s status via ajax.

The items are draggable which provides a quick way to control what order announcements will show up in the email. In this picture, an announcement is getting dragged, but it’s hard to tell because there’s no cursor visible. Silly screenshooting program.

This application responds to various screen sizes and adjust the display accordingly. While this is commonplace, the dynamic paging for the columns of announcements was a real pain to get correct so that it worked on any screen size and adjusted the number of pages and so forth. 

Bates College Campus Map

(bates.edu/map) Using Google Maps as the base code, I added the entire campus map to a custom map implementation. The map includes buildings, accessibility data, parking information, emergency phone locations, etc. There’s an “as-you-type” search feature which limits the buildings/departments displayed in the list and selects the item if there’s only one left. There are also numerous filters for parking types,  building types, and for other stuff on the map. Oh, and a beacon icon showing your current location.

This was my first real javascript project.

More coming soon…