Home > clean_cv

clean_cv

Clean_cv is a project mainly written in JAVASCRIPT and RUBY, it's free.

App to display CVs using the Clean CV template

h2. Introduction

This application allows registered users to manage their CVs, and guests to search and browse them. The initial intention was to create a professional looking CV/resumé using a theme template I discovered on themeforest.com, called Clean CV. Rather than just updating the Word version of my CV, I wanted to show prospective clients that I have a solid grasp of the latest web development techniques. It also gave me an excuse to play with Ruby and Rails, and check-out the current gem/plugin landscape.

I have adopted techniques for progressive enhancement to enable dynamic features where the browser's capabilities allow it. This way, user's with the latest browsers get the best experience, but older browsers can still access all the apps functionality. To achieve this, the app uses a technique known as Unobtrusive JavaScript, which separates behaviour from markup, in the same way it is best practice to keep style separate to markup using CSS. This is particularly pertinent at this time (Sep 2010) as the browsers adopt the HTML 5 specification differently.

h2. Dependencies

All the necessary gems are unpacked in the vendor directory except mysql and rmagick which need to be installed separately. For PDFKit you will also need to install WebKit's HTMLtoPDF binary and change the initializer to point to it's installation path.

h2. Model Associations

I wanted to use all variations of model associations/relationships as possible to make it more realistic (a common frustration with technology demos is they often aren't), so there are 1 to 1, 1 to many, and many to many relationships.

bc. .-------------. SocialMedia '-------------' 1 has one 1 .--------. has many .---------. has many .----------------. Person -------------------< Company ---------------< Responsibility '--------' 1 '---------' 1 '----------------'
includes
.------.
1 ^ *
.----------.
Category has many .---------. has many .------.
'----------' '-----------------< Project ---------< Task
1 V 1 '---------' 1 '------'
has many V
*
has many .-------. has and belongs to many
'---------< Skill >----------------------------------'
1 '-------' *
has many .--------.
'---------< School
      1      * '--------'

h2. Features

Uses Devise for authentication, which is Rack based, uses Warden and is extremely modular

Uses Declarative Authorization for role-based authorization, which provides a DSL to write authorization rules at both controller and model level

Registered users can manage any number of CVs that they create

Unregistered users can search and browse all CVs by name, email and job title (more search filters to come)

Uses Paperclip to allow registered users to upload a photo for each CV, but doesn't require it

Uses ImageMagick to create 100x100px thumbnail of uploaded photo, which is centered regardless of the original's aspect ratio

Uses PDFKit, which in turn uses WebKit's wkhtmltopdf to dynamically generate PDFs on the fly

Allows users to add links to the Flickr, Facebook, LinkedIn and Twitter accounts

Allows users to add a link to a Google map of their location

Progressively enhances functionality dependent on the browser's capabilities

Everything still works when JavaScript is switched off

Everything looks reasonable in IE7 (IE6- users should expect things to look crap if they use crap)

Work experience and education are displayed in date descending order

Only the first project listed for each company is displayed by default to reduce information overload

Uses Google Visualization area chart to provide a timeline of the number of months for each year spent with each company

Person skills, company responsibilities and project tasks can be re-positioned using drag and drop (when polymorphic notes are implemented, I intend to allow drag and drop between models as well as scopes)

Skills can be associated with projects for quick lookup

Uses JQuery UI with the Aristo theme, if JavaScript is enabled, to display and post forms using AJAX with submit buttons removed from the form and replaced in the button panel for consistency

Skills are summarized by category for quick lookup

Uses Uniform with the Aristo theme to provide a quality, consistent look and feel to file upload, checkbox, radio and select input controls

Allows nested attributes in forms with parent-child relationships i.e. when creating a person, you can add work experience, skills and schools which offers a more natural workflow

Disables nested attributes if JavaScript is not enabled

Uses the new data-xxx attributes of HTML 5 to add new child associations to models

Uses SASS and blueprint to help manage styles

Uses the latest HTML 5 boilerplate template

Uses Formtastic to make forms quick and easy, as well as consisten

Uses Friendly ID with slugs to make friendly URLs at the Person scope

Uses nested resources to scope access for RESTful routes

Uses downloadable fonts packaged using Font Squirrel (Aller and Gentium)

Places flash messages from XHR in X-Message header and uses PNotify to display Growl-like

Uses custom JQuery highlight effect when changing project tabs

h2. Future Improvements

Initially I had responsibilities associated with projects, but decided that they were really related to the company, not the project. I added tasks to projects but the data structure was exactly the same, consisting of id, timestamps, description and position (for ordered listing). I now realize that I could have used a polymorphic relationship, named the association note(s) and added them to company and project instead. This could then be taken further and applied to any of the other models i.e. skill.notes or category.note

h2. To Dos

Update technical skills by category summary table on XHR skill update

Update work experience timeline on XHR company update

Update education timeline on XHR school update

Add rating to skills

Add training section for professional qualifications

Add references section

Enable invitations for references to referees with role-based access control

Polymorphic notable list item associations

Make skills and projects taggable

Enable has and belongs to many categories associations

Enable categories to have sub-categories and act as tree

Enable AJAX search with search form displayed in modal dialog

Provide version history and publish flags

Upgrade to Rails 3

Enable full-text search using Sphinx, Solr or Ferret

Provide support for OAuth with Devise

Use Blueprint link icons

Optimize SASS and CSS files

Improve print CSS for PDF copy

Auto-paginate index search results using JQuery

Write specs with Cucumber, WebRat, RSpec, Shoulda and Mocha

Write JavaScript tests using Blue Ridge test framework

Use HAML DOM IDs

Open project panel after it's re-positioned making it current

Add new company or school to correct position for start date

Enable create new skill within project form

Uses context-aware tooltips to access options but they stay out of the way and position dynamically

h2. Fixes

h3. v1.1

Fixed selects created from templates, postponing uniform binding until they're cloned from the template