Category Archives: Blog

All blog posts on the front page.

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. :cool:

HTML Hack – Making Any Element Focusable

Recently I have been working on making a simple snake game and wanted to know what my options were for capturing keyboard events other than simply adding event listeners to the body, document, or the window. Amongst the obvious reasons for avoiding adding event listeners globally, I just want to make a prototype that will create one canvas element which will capture keyboard events. After doing a quick Google search I found this awesome article saying that it is possible to make any element focusable.

For example make an element as innocuous as a <div> element focusable by simply defining it’s tabIndex attribute:

  • Clicking on me will give me the focus!
  • Clicking on me will do nothing because I have no tabIndex.

The above focusable and non-focusable <div>‘s are produced by this code:


  • Clicking on me will give me the focus!
  • Clicking on me will do nothing because I have no tabIndex.

As you can see, only the <div> with a set tabIndex is truly focusable. I plan on using this cool hack to make my game’s canvas focusable. I hope you find this neat trick useful as well! :cool: