Chris BoscoWork

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 canvas allows you to draw shapes programmatically with JavaScript and was shortly after popularized by the Google Chrome browser and HTML5 spec. At the time I was becoming too comfortable with the MooTools JavaScript framework so I wanted to build something sophisticated in vanilla JavaScript without relying on a toolkit. 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 JavaScript enabled.

View AutoGraphs →

Popup plugin for MooTools

OpenBox is an easy-to-implement in-page popup window, similar to the popular image gallery tool, Lightbox, except that OpenBox can present any type of content. OpenBox uses unobtrusive Javascript and is powered by the lightweight MooTools Javascript framework.

OpenBox is highly configurable and is targeted towards web designers who are comfortable with CSS and HTML and have a little exposure to Javascript (OpenBox does all the heavy lifting).

View OpenBox →

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.

View CB-Sides →

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

The Shoshin Project is a CMS-driven media website that contains interviews and analysis from industry leaders collected into editions by theme. The creative direction is a brochure-like experience with graceful transitions between pages and navigation states. In order to deliver that experience, The Shoshin Project is a single-page web app in a browser, driven entirely by JavaScript. I built the JavaScript architecture behind the site and helped design the transitions between states.

Navigation works via a hashchange event which is a change in the location bar detected by the browser, not the server. On every hashchange, an appropriate JavaScript controller gets called based on 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.

There is certainly an SEO concern with a JavaScript-driven website, and this is mitigated by following Google's AJAX crawling standard and providing fallback HTML snapshots of the web pages to search engines. The AJAX crawling convention from Google is gaining traction and has been implemented by sites such as Twitter and Facebook.

Serbo-Croatian translation available courtesy of Jovana Milutinovich from WebHostingGeeks.com

View The Shoshin Project →