8-bit art is a proud tradition at AppNeta, from our chat emoticons to our open-source logos. To pay tribute, as well as to keep clueless visitors from accidentally roaming around our office, I decided to make an 8-bit sign. First, I converted the logo to an 8-bit design. Then, inspired by the dimensional artwork of Eric Daigh, I constructed the sign from pushpins.
I used over 3000 pushpins. The hardest part was matching available pushpin colors to the logo’s brand guideline colors. Also, keeping my cat from eating the pushpins. Also, hanging it. We used spare ethernet cable looped around the pipes in the office.
CSS3 WordArt allows users to generate WordArt-like text styled with CSS3. WordArt was a feature in older versions of Microsoft Office that generated stylized text. Its wide availability and user-friendliness led to broad use (and abuse) in signage, logos, and presentations. The unique presets are immediately recognizable typographic relics of the late 90s/early 00s.
I recreated as much of the original WordArt styles as possible using only CSS (LESS, to make things a little more DRY). This included text background gradients and tiles, 3D effects, shadows, and funky-ass transforms. I also reproduced the original WordArt creation interface using JS and CSS to replicate the experience of selecting, creating, and resizing a piece of WordArt. Due to the experimental nature of the CSS properties used therein, CSS3 WordArt only reliably works in Chrome.
I spoke at the Boston Node.js Meetup at Bocoup in fall 2013 about how I built PETBOT, and how other people could construct similar nodebots. Most of the talk focused on the challenges of running Node on a Raspberry Pi and the utility of websockets for real-time communications. I also gave a quick overview of TBone.js, AppNeta’s in-house JS framework, and how I used it to sync PETBOT’s state across multiple servers.
PETBOT only crashed into the wall once, BTW.
PETBOT is a low-budget telepresence robot I built for the AppNeta office, consisting of an iPad mounted on a lightweight chassis powered by a toy RC car. To move PETBOT, users control it from a web UI using the arrow keys. Its low latency, long battery life, and especially the flashing police light make PETBOT a fun and easy way for remote employees to telecommute into the office.
The car is controlled by a radio transmitter wired to a Raspberry Pi running a local node.js server. Commands are sent via socket.io through the web UI & second node.js server hosted remotely on Heroku. The local server connects to the remote server as a socket.io client, thus allowing commands to be sent to the Pi from anywhere in the world with very low latency.
Pageguide.js is a small JS tool for creating flexible, adaptive walkthroughs for web applications. After joining the Tracelyics team at AppNeta, I took over the project, handling feature requests, bug reports, and community contributions. In order to keep the tool current, I significantly overhauled the code to enable dynamic functionality within single-page apps. I also built out a suite of unit tests and benchmarks.
I joined the TraceView team (formerly Tracelytics) at AppNeta in February of 2013. TraceView is a full-stack application tracing and monitoring tool. It receives request data from customers’ application servers, processes it, and displays actionable insights to customers through a variety of innovative data visualizations.
TraceView was a uniquely exciting place to work because I learned a TON about customers’ architectures. Because we traced various languages, stacks, and frameworks, we needed to research and support numerous different technologies, even ones we didn’t use natively, in addition to the tools we used to build our app. I learned about MongoDB when building a query fingerprinter, JVM architecture when graphing JMX host stats, the importance of ntpd when solving distributed hosts’ clock skew display issues, and much more.
I worked on the application team as a full-stack engineer, but did most of my work on the frontend. On the server side, my projects included request trace analysis, MVC development in Pylons, database schema design, a JSON parser/lexer. On the client side, I architected & built autosynced RESTful JS models, designed and built data-heavy visualizations, modularized templates, established a style guide and genericized sitewide CSS. I also did significant design and UX work for new features.
Tomquest was a city-wide scavenger hunt and surprise party I organized for my boyfriend Tom’s 24th birthday. Ending a scavenger hunt with a surprise party was difficult: since I didn’t know how long the hunt would take to complete, I couldn’t set a specific time for the party guests to arrive. Furthermore, how could I hide clues in very public places (one ran as an advertisement in an alt-weekly newspaper) without curious randos figuring them out?
I wrote a bare-bones Django app to handle the logistics of the hunt. Clues, which were hidden throughout the city, included QR codes and passwords, which unlocked hints to find the following clues. As soon as Tom scanned a QR code for a particular clue, the app emailed all the party attendees to let them know of his progress.
simple-share is a small jQuery plugin that uses icon fonts in conjunction with social media sites’ unpublished share URLs to create simple, elegant, unobtrusive share buttons and links. Most of Upstatement’s clients requested social sharing buttons for their websites, but they didn’t like the out-of-the-box buttons provided by those services. Thus, we ended up creating our own assets for share buttons, which was wasteful. Furthermore, I ended up digging for the services’ share URLs so I could reproduce the native buttons’ functionality. simple-share helped eliminate some of this frustration.
I gave a general audience talk at Harvard’s Web Working Group about how to plan, design, build, test, and launch a basic web application. I stressed iterative development and collaboration among developers, designers, and product folks, using examples from Upstatement’s development of Glyphosaurus. The slides got a little mangled on Slideshare, but they’re still (mostly) understandable.
Glyphosaurus is a typographic database for sharing and discovering letterforms from around the world. It provides an easy interface for uploading, cropping, and tagging images of letterforms. Users can browse and search (by letters or tags), follow other users, and favorite glyphs.
The application is built on Django with masonry.js on the frontend. Users can authenticate via Twitter or Facebook with OAuth (or just use their own emails). I used PIL for cropping, resizing, and processing user-submitted images. Images are batch uploaded to S3 with boto. We also created a mobile app in Phonegap, but it didn’t get approved for the iOS App Store. Tough luck.
As part of a partnership between Boston College and the US Social Security Administration, Upstatement was commissioned to create Squared Away, a series of calculators, articles, graphs, and checklists to help people make sound financial decisions.
Most of my work on Squared Away was on the calculators and graphs. We did not use any charting libraries (yeah, I know, not my decision), so the charts are constructed entirely using JS and CSS. User input is passed through predictive economic models to help users visualize their finances and plan for the future. Additionally, I helped build the site itself using PHP, wrote a search interface using Sphinx, and styled pages responsively using SASS.
Upstatement created the website for Mount Auburn Cemetery, a historical site and nonprofit located in Cambridge, MA. As primary developer on the project, I was responsible for building out the site in WordPress, styling the pages from mockups, and building some fun JS widgets, but the most interesting parts of the project were the API tie-ins.
Mount Auburn has an on-premise touchscreen kiosk visitors can use to locate specific graves. The kiosk’s software was custom-built and undocumented. I managed to 1) determine how to pass queries to its endpoints from an AJAX search interface, 2) parse the response, 3) translate the proprietary geographic coordinates from the response to standard lat/lon, and 4) display the grave location on Google Maps.
Additionally, the Friends of Mount Auburn host numerous events. Site administrators needed a tool that would allow them to create ticketed events. I wrote custom WordPress functionality to hit the Eventbrite API, so site administrators could create, modify, and monitor events from within their own admin panel. The site also retrieves data from Mount Auburn’s on-premise weather station.
Upstatement helped One Laptop Per Child (OLPC) update, build out, and improve its web presence to reflect its humanitarian efforts to provide laptops to children in developing countries. As part of the overhaul, I built out a number of interactive animations, including an SVG map (using Raphael.js) of the countries served by OLPC.
Yoshimi Battles the Pink Robots was a student project, a collaboration among myself, MaCherie Edwards, and Rose Heydt for CS 349: Games. It’s our interpretation of the Flaming Lips’ album of the same name: the story of a girl named Yoshimi tasked with saving the world from killer robots. The game allows players to experience the album first-hand from Yoshimi’s perspective while the tracks play alongside it.
I wrote all the code for the game. MaCherie and Rose designed, created, and animated the sprites and backgrounds. We built the game in approximately two weeks while all maintaining full courseloads. Because of this, it’s a little rough, but for two weeks worth of work, I think it’s not half bad.
All Together Now is student work, submitted as my final project for ARTS 255: Dynamic Interface Design. I created & animated a Flash video accompaniment for the Beatles song All Together Now. To get the keyframes right, I did quite a bit of dancing in the mirror.
The snack bag is a handbag of mine, constructed from hundreds (830, to be exact) of cellophane wrappers from candy, chips, and other snacks. I folded the wrappers together into chains, sewed the chains together into sheets, and then sewed the sheets together into a bag. I added a zipper and riveted on some handles. I made it in 2009; it is still in excellent shape today!
During the summers while I was in high school and college, I taught various courses at College for Kids, a summer enrichment program at Westfield State College. One such course was Trashin’ Fashion, wherein I taught kids how to make clothing, jewelry, and accessories from things they could find around the house. One of the class projects was a folded snack wrapper bracelet similar to gum wrapper chains. My students and I had a lot of fun making these. As I observed the bracelets, I realized they could be sewn together to make sheets. That’s how I got the idea for the bag.
Disclaimer: I know you can buy these bags at museums now. I had never seen one before I designed and made my bag.