Web app with tools to manage candidates and employees
iCIMS' platform combines web portals reaching millions of applicants with an administrative interface providing tools to thousands of HR professionals to manage these applicants.
I began at iCIMS using HTML and CSS to style clients' web portals to match their websites' look and feel, in addition to building custom web forms for their application processes. This forced me to "view source" on countless websites and build a strong foundation in understanding CSS cascade and working with production CSS in the wild.
Shortly afterward, I began contributing to the source code behind both of these products, making the underlying markup XHTML-valid, SEO and accessibility-oriented. I wrote new templates for the custom forms to take them from table-based layouts to CSS-based layouts to better separate the presentation layer.
Next came a large effort to convert the entire admin interface from IE-only compatibility to reach users on their browsers and platforms of choice. Making an actual front-end architecture and better separating concerns allowed us to implement a theming system for personalization of the UI. This helped the organization realize the value of front-end development and I became further involved in implementing new features.
Toward the end of my time at iCIMS, I became involved in prototyping and feature design, conducting guerilla usability tests to substantiate design decisions.
Graphical car comparison with the HTML canvas tag
AutoGraphs is a tool for comparing up to three cars visually by physical dimensions (something that may be handy for those who have to park in tight spaces). It also compares along the more common metrics such as fuel economy and performance, through interactive graphs and charts.
AutoGraphs is an early experiment with the HTML
canvas tag. HTML
was shortly after popularized by the Google
and HTML5 spec. At the time I was becoming too comfortable with the
downside of this is AutoGraphs is relatively devoid of animation or
slick transitions. It is however progressively enhanced from a simple
tabular comparison in browsers without
canvas support that can also be
activated by choice for the visually impaired. It is driven by JSON data
over XHR (AJAX) but the core functionality is accessible without
Popup plugin for MooTools
Blog on front-end web development and interaction design
My blog covers topics related to front-end web development and design, with occasional tutorials and demos. The inspiration comes from the helpful niche sites that were indispensable to me in my first years as a developer, and I hoped to give back to that community. Crafting every post also has the added benefit of coalescing my learnings for my own record.
The blog is custom-built and hand-coded from front to back on the CodeIgniter MVC framework. Although I was using the MVC pattern at the time for work, building every layer of this site (rather than just focusing on the client-side) helped me to fully understand it.
Because CodeIgniter is based on PHP, I've found it relatively easy to port over plugins from popular platforms like WordPress, such as the very useful Akismet.
Content-generation website for subject matter experts
GLG News is a website built in ASP.NET MVC where users who provide expertise are empowered to give their take on a current topic in the news and have it published to GLG's public website (link). This gives prospective clients a sample of the kind of expertise GLG makes available through paid membership, while also lifting the author's own profile on the web through the GLG brand.
The site provides rich text editing tools for authors to compose their analysis. A delicate balance has to be struck in terms of features available to content creators and consistency to be upheld on the reading experience on the other end. While we want to cater to every request from the content generator, care has to be taken to limit potentially destructive HTML and styles from making it through the UI.
FCKeditor, a third party rich text editor plugin, was used as the base of the text editors in GLG News, which are then themed and extended to allow for inline spellchecking. In a final proofreading step, the author is allowed to refine companies and stock tickers detected in the article, helping to make it more discoverable. Authors can also link to their Twitter or Facebook account to notify their friends and followers when each analysis has been posted.
Drupal theming and module development for an industry analysis site
Expert Matters is a media site built on Drupal 6 and meant to showcase content based on organic popularity and to categorize it intelligently based on automated feature extraction as well as manual editorial input.
I began work on Expert Matters along with consultants from Acquia who trained myself and a team of developers and me in Drupal development. Over a six-month period I became a full-fledged Drupal themer with some experience in module development through designing and implementing features from front to back-end.
I was able to learn a great deal from the back-end developers, and vice versa, as we all were new to the technology and patterns. In addition, my specialized area of theme-building was a challenging exercise as I worked with a design team used to completely custom-developed sites and pixel-perfect mockups.
Multimedia site on a single page with client-side routing
Navigation works via a
hashchange event which is a change in the
location bar detected by the browser, not the server. On every
some simple routing rules. The request is checked against a growing
cache of data on the client, and if it's not there it is fetched from a
web service and delivered as JSON, subsequently cached. The data then
hydrates jQuery HTML templates and appends these new elements to the
page, revealing them through transitions
The Shoshin Project also serves as a technical prototype in the direction of HTML5 mobile web apps, where a page refresh is an expensive action, and data should be pulled from the server only as needed and cached aggressively due to connectivity and bandwidth limitations.