Loading...
A creative web developer who loves to combine fresh technology with intuitive design to deliver effective and engaging experiences.

Firstborn.com

Advertising Agency Website Reboot Lead Front-End Developer

Revamped the digital agency's flash experience with a completely responsive HTML5 website.

  • TLDR
  • Responsive website designed to communicate company's overall culture and showcase work.

    I made the front end.

  • Tech
  • TypeScript
  • Laravel
  • Sass
  • RequireJS
  • Team
  • Two Developers
  • One Producer
  • Tons of Designers
  • Timeline
  • December 2013 – April 2014
  • 5ish Months
  • Responsibilites
  • Front-end Development
    (Desktop, Mobile)
  • Quality Assurance
    (IE8+, Mobile Browsers)
  • Analytics Implementation
    (Omniture SiteCatalyst, Google Analytics)
  • About the Project
  • After having the same flash-based website for about seven years, digital ad agency Firstborn decided it was time to move on and enlisted their best developers to execute the designs.

    With myself on front end and Ziad Hilal commanding the back end, we developed the site in about five months. This time included execution of designs, execution of re-designs, content creation, and QA.

  • About the Tech
  • Understanding the potential longevity of the site, I knew that creating a clean, maintainable codebase was integral. With that in mind, I chose to use TypeScript on the front end. TypeScript affords features such as structure, strict-ish typing, and error checking. These aid in maintaining code quality, even if code is modified by multiple developers.

    Beyond its safe coding features, TS allowed easy creation and extension of multiple classes, breaking down functionality into sensible modules. By compartmentalizing several commonly used functions/features and refining them through iteration, ultimately a small framework covering everything from debug logging to DOM animation was created.

  • Items of Note
  • AJAX is used to load/display pages across the site, with an elegant fallback to normal link behavior if history.pushState is not supported (IE9-).

  • Window events such as resize and scroll are bound to the window only once, and handled through a central module (the WindowController). The WindowController accepts bindings to these events, and then fires them when necessary later on (using requestAnimationFrame as the loop).

  • The Project Archive page uses a search/filter system based entirely in memory on the front end. Data is passed in from the back end, and search/filters are operated upon that data. The DOM is only affected once the list of result ID's is ready. This relieves pressure on the backend and allows faster search results on the front end.

  • Animation in the site is driven through "Walt," a small set of tools animate elements using CSS3 animations. Combined with Animate.css, adding/modifying animations in the site becomes a breeze. This is a tool originally developed for an older project which has been refined quite a bit, and I continue to use it in most (if not all) of my projects.

  • Homepage – features full-screen carousel
  • Awards – Prominent awards can be 'featured', along with search/filter functionality.
  • What We Do – All content is editable via a customized CMS.
  • Careers – CMS-controlled listing of open positions.
  • Work – Example of a project page. Carousel images and animation behavior can be directed entirely through CMS controls.
  • 404 – The black hole spins!
  • Mobile Homepage
  • Mobile Awards
  • Mobile What We Do
  • Mobile Careers
  • Mobile Work

Twig

Mobile Web Garden Monitor Lead Developer

An Arduino-based plant-monitoring system that educates users how to grow their plants using data from their plants.

  • TLDR
  • Little gadget hooks up to a mobile site to display stats and recommendations in real time. I did a lot of the development.

  • Tech
  • Arduino
  • PHP
  • SQL
  • Backbone
  • Sass
  • Team
  • Three Developers
  • Four Designers
  • One Industrial Designer
  • Timeline
  • September 2012 – May 2013
  • 9 Months (Two RIT Quarters)
  • Responsibilites
  • Lead Development
  • Organized code and maintained standards
  • About the Project
  • Twig is a system for learning how to keep your plants growing.

    Using the Arduino-based device to monitor the environment around the plant, Twig can determine whether or not the plant is getting the light, water, and warmth that it needs. If the plant requires action, the user is notified.

    Twig was created with a team of eight other designers and developers for our RIT Senior Team Project. We created the physical Arduino device, the HTML5 mobile web app, and the promotional website over the course of 15 weeks.

  • Backbone
  • Using Backbone as the framework helped with establishing necessary functionality (routing, event delegation, etc) as well as providing a MVVM structure.

    However, the framework was unfamiliar to most of the dev team, which ended up costing time and ultimately sacrificed code quality.

  • Mobile Web App
  • Opting to create a mobile web app using HTML5 versus building a native app was a matter of familiar territory; our dev team was most comfortable working in the web environment.

    Also, the option of responsive design allowed the opportunity to develop a desktop counterpart to the app.

  • Arduino
  • Working with the physical aspect of the project was fairly easy; using a Wifi shield and some sensors, the Twig data was being reported to our servers in no time.

    The incredible ease of use of the Arduino soft/hardware will allow for extension of the Twig system (if we were to add more sensors, etc).

  • Twig allows users to track multiple plants. The at-a-glance notification system makes checking your garden easy.
  • Sensor readings are easy to read, and a Canvas-based history graph lets users see how their plants have felt over time.
  • Page from project brief outlining general flow of information.
  • Promotional/Desktop Site
  • Our Industrial Designer created a physical prototype for use in marketing materials.
  • Twig featured a complete user/profile system.
  • Add A Plant screen shown here.
  • Dashboard screen shown here.

Inline Editor

Rapid-revision Copy Editing Tool Designer + Developer

An easy-to-use tool allowing on-the-fly copy editing and formatting within actual web pages.

  • TLDR
  • WYSIWYG copy editor. I created it as an extra tool for another project.

  • Tech
  • TypeScript
  • PHP
  • Sass
  • RequireJS
  • Timeline
  • 2 – 3 weeks
  • About the Project
  • Tasked to create a simple internal website that would have a ton of copy changes, I decided to create a tool to help facilitate that. My solution was an inline editor that allowed users to double-click copy and edit it on the spot.

    Using a simple PHP backend with a "flatfile database", changes were saved to disk as they're entered. Before deploying the finalized website, all changes made by users are compiled into static files.

  • TypeScript
  • This was the first project I used TypeScript on. It was neat.

    It runs off of contenteditable attributes and stuff.

  • Editable fields can be shown/hidden via the toolbar. Here, grey lines indicate fields with original values, where red lines indicate values which have been modified.
  • Text formatting and styling (underline, bold, color) can be applied on-the-fly as copy is edited.
  • Modifications can easily be reverted via the toolbar. Toolbar also includes features for overlaying comps to more precisely match designs in development.

InDaLab

Real-time Visual Seating Chart Designer + Developer

A single-page web app for the RIT New Media Lab to let students hang out, even when they're not on campus.

  • TLDR
  • A single-page site for students to connect and see who's in the lab. I created it for fun in about six hours.

  • Tech
  • JavaScript
  • PHP
  • tlk.io
  • Timeline
  • 6 Hours
  • Responsibilites
  • Design & Development
  • About the Project
  • Just a simple website idea I had floating around for a while. Students outside the lab had no way to find out who was in the lab, thus InDaLab was made to remedy the issue. Students can sign in to computers in the lab, chat, and set custom status messages for themselves. A mobile counterpart also allows for students to check in while on the go.

    The project was more of an exercise in rapid development for myself; the website was finished within a total of about six hours.

  • Database
  • In order to avoid the hassle of setting up a SQL database and sorting all the queries and what not, I decided to go with a flat file database instead. This direction was mostly chosen with the intent to create an easily-deployable build.

    This approach was well-suited for the functions needed for IDL; the back-end simply serves the file to be parsed on the front-end. Simple session variables are stored in the files, mainting a low-bandwidth requirement.

  • tlk.io
  • In order to keep the development time low, I decided to use an external resource to handle the chat section. Tlk.io provides registration-less chatting, as well as a 'sign-in with Twitter' function.

    While getting the chat implemented was a breeze, the downside came with the lack of admin privileges; without the ability to censor inappropriate text, the chat can be sort of a loose cannon. For the target audience, this solution worked fine, but for an environment that needs to be more tightly controlled, not so much.

HiveMind

Multiplayer Real-Time Mind Mapping Designer + Developer

A collaborative mind-mapping tool for the browser. Users create, share, and edit word webs in real-time with others.

  • TLDR
  • Create word-association maps in real-time with others using your browser. This was a project I did for fun while in college.

  • Tech
  • JavaScript
  • PHP
  • SQL
  • SVG
  • Timeline
  • Four Weeks
  • Responsibilites
  • Design & Development
  • About the Project
  • Small personal project I worked on in my own time. My fellow students and I had no way to brainstorm online, and after finding that there was no free software that could offer this, I decided to go ahead and just make my own.

    The chart graphics are powered through VivagraphJS, an open-source graphic libray, and the rest is controlled through JS (with PHP in the back end). This project was interesting for me because not only did I have to hack through the Vivagraph lib, but creating the cross-browser sync was a new feat for me, as well.

  • SVG
  • Using VivagraphJS essentially cornered the project into using SVG, as the entire system runs off of SVG elements. While this boosted performance, manipulating elements became much more difficult (finding siblings and attaching events, in particular). This was more a matter of lack of familiarity on my part than an issue with the lib/SVG.

  • Splash Screen – Features an animated web containing all word connections in the database.
  • Maps are updated in real-time across each browser instance.
  • The use of SVG allows Hivemind to work on mobile platforms such as iOS 6+.

RIT Post Secret

Submission-driven Event Site Designer + Developer

Anonymously submitted text/images confess personal secrets, which are showcased for all visitors to see.

  • TLDR
  • A single-page site detailing event info, along with a user-driven 'post your own secret' section.

  • Tech
  • JavaScript
  • PHP
  • SQL
  • Timeline
  • Two Weeks
  • Responsibilites
  • Design & Development
  • About the Project
  • PostSecret is a community mail art project in which people mail their secrets anonymously on a homemade postcard, which are later printed in PostSecret books or posted on the PostSecret website. Frank Warren, the creator of PostSecret, held a discussion event at RIT in the Fall of 2011.

    The website was created as a promotional tool to advertise the event. By recreating the Post Secret experience, we hoped to utilize word-of-mouth publicity in order to increase ticket pre-orders.

  • Post-Mortem
  • Dealing with anonymous nature of the site was a new adventure. After receiving a few unsettling secrets, the site had to be altered to (subtly) ask for credentials in the event someone needed to be identified.

    Asking for identification upset some users, though overall the site did not see a decline in submissions/views. Overall, the secret submission experience was a hit, despite some bumps in the road.