My Interactive Resume – Part 1

Here is my first quick pass at an online resume:
http://CWestify.com/resume/

There are plenty of times when we want to add everything to our resume to let potential employers know our worth but it can be difficult to know how to really summarize everything.

Project Search

There are times when we want these potential employers to be able to browse our projects with ease, perhaps searching through them by keywords. For that reason I added a search which populates the typeahead suggestion box with keywords for my projects.
Resume - Project Search Section

Even though I ended up coding everything from scratch just because I wanted to challenge myself, it’s easily conceivable that one could do this using bootstrap and a typeahead plugin. My project information is actually stored away in JavaScript:

var projects = [
  {
    title: 'CWestify.com',
    description: 'A site full of custom code written in PHP and JS primarily containing small online apps such as the Emoji Search.',
    url: 'http://cwestify.com/',
    dates: [new Date('2015/01/01')],
    keywords: ['PHP', 'JavaScript', 'YourJS', 'HTML', 'CSS', 'HTML5', 'CSS3', 'MySQL'],
    languages: ['PHP', 'JavaScript', 'HTML', 'CSS', 'MySQL']
  },
  {
    title: 'CWestBlog.com',
    priority: true,
    description: 'My blog which showcases a lot of the JavaScript solutions I have come up with over the years.  This site gets thousands of visits every week due to the specificity of the solutions I have posted.  Besides JavaScript I also wrote articles about Python, CSS3, Java, VBScript, mathematics and much more.',
    url: 'http://cwestblog.com/',
    dates: [new Date('2011/03/31')],
    keywords: ['JavaScript', 'PHP', 'YourJS', 'HTML', 'CSS', 'HTML5', 'CSS3', 'Excel', 'node.js', 'Java', 'Python', 'Math', 'Blog', 'Wordpress', 'VBScript', 'JSON', 'VBA', 'HTA', 'MySQL'],
    languages: ['PHP', 'JavaScript', 'HTML', 'CSS', 'MySQL']
  },
  ...
];

As you can see I store the keywords for each project in an array. The keywords for all of the projects are then put into an array and their frequency is kept with each keyword.

Hiding Contact Information from Bots

Of course, if you want to put your resume online it is important that you take steps to hide your contact info from bots/web-scrapers. For that reason I decided to use reCAPTCHA. In order to actually see my contact information the user will have to click through the step(s) of reCAPTCHA.
Resume - Contact Info with CAPTCHA

Conclusion

I personally am mostly happy with how my interactive resume turned out, but I do have ideas for how to improve it:

  1. Make it mobile friendly.
  2. Add buttons that will allow me to pick and choose what I want printed if I decide to print it out.
  3. Change the design to make it a little more poppy but at the same time still professional.

Let me know if you have any other ideas of how to make an online version of a resume better and more interactive. 😎

JavaScript Snippet – isValidVarName()

Now Available in YourJS

Recently I was working on a function which needed to determine whether or not a string could be used as a variable name. Variable name validation can get tricky so instead of using a crazy regular expression which includes all keywords (which may change over time) and instead of testing for strange unicode characters which are rarely used for variable names, I decided to leverage the JavaScript Function constructor:

The above function takes the string in question and returns true if the string can be used a variable name. If the string can not be used as a variable name false is returned.

Some may wonder why I’m doing the following:

varName.replace(/[\s\xA0,\/]|^$/g, '.')

The reason I included the above replacement is to avoid false-positives in the case of an empty string, extra spacing, commas, and forward slashes.

Security

Others have attempted to make the same function using the evil eval() function which allows for JS injection. Even though the Function constructor can also be used for evil, when supplying arguments it does prevent you from doing JS injection by making sure the arguments don’t have parentheses.

Examples

The following is an example of what will happen when running for the function for a number of strings:

console.log(isValidVarName(''));           // -> false
console.log(isValidVarName('3'));           // -> false
console.log(isValidVarName('3d'));          // -> false
console.log(isValidVarName('D3'));          // -> true
console.log(isValidVarName('D3 '));         // -> false
console.log(isValidVarName('D3,Q'));        // -> false
console.log(isValidVarName('D3/*Qs*/'));   // -> false
console.log(isValidVarName('D3Q'));         // -> true
console.log(isValidVarName('var'));         // -> false
console.log(isValidVarName('true'));        // -> false
console.log(isValidVarName('undefined'));   // -> true
console.log(isValidVarName('null'));        // -> false
console.log(isValidVarName('coolio.pop'));  // -> false
console.log(isValidVarName('coolio'));      // -> true
console.log(isValidVarName('coolio_pop'));  // -> true
console.log(isValidVarName('$'));           // -> true
console.log(isValidVarName('$á'));          // -> true
console.log(isValidVarName('áÑ'));          // -> true
console.log(isValidVarName('_'));           // -> true

Here is a similar example hosted on JSBin:
JS Bin on jsbin.com

Game – Where’s the Nose that Knows?

I noticed that lately there has been interest in finding a panda in a large array of snowmen in this post. There was also this post where you have to find a cat amidst a great deal of owls. I started thinking about how I could make a similar game that is randomly generated. I ended up with the following HTML5 version in which you have to either find the one face with a nose or the one face without a nose:

Here is a link to the actual page. Let me know what you think! 😎