This past afternoon, I came across this branch conversion by PJ Onori. In it, some fantastic ideas came up with different ideas on how to convey the abstract meaning of an icon and how to provide an indication on the current state.  I highly recommend that you read through it since it provides a lot of great insight into icon design in general.

While I am monitoring the stream, I also have to remember when it was the last time I pressed the save button in Microsoft Word and why I did such.  This seems obvious; however, looking at my own behaviors it was not.  There are 3 cases when I explicitly hit the save button (or as in one case “save as”).

1. Periodic Saving
2. Finished Editing or Writing
3. Creating a Copy

Why do we Save Periodically?

People save periodically because we all make mistakes and have all, more than likely, have lost work from a computer crash or power outage. Periodic saving ensures that the work we have lost is minimized to some degree.

Even though we all have done this, not all applications require us to do this.  Many cloud and mobile applications do not have an explicit save operation because they automatically save for you.  Open up applications like Evernote or even Microsoft’s OneNote and there is no explicit Save button.  Their constant saving in the background has diminished the need to explicitly save.  If you are not familiar with apps like this, you look for save; however, after learning that it does not exist and building the trust of it saving from using the product, the need evaporates.

Why do we Save when Finished?

We save when we are finished to make sure that the last of our work will be there when the next person reads the document.  We save because we are finished editing.  However, if we can detect when we have finished our work, why could we not save automatically?

This is the behavior exhibited by other auto-saving applications as well.  Apps like MindNode for iOS and Mac save automatically; however, when a person is finished, they press the explicit “done” button and move on.  Doing such turns into a more natural flow of opening, writing, and finishing with no interruptions or extra steps.

What about Saving a Copy or the Initial Save?

This falls into a different behavioral change.  In many business applications like Microsoft Word you create a new file and you do not name the document until you save it for the first time.  If the save button is removed or is automatic, we need to invert this flow and ask for the document name first or in a way that has a smart default.  If we ask for a name up front, we could also say that this new document is a copy or is based off of another document as well.

Is it REALLY that Simple?

While I feel like there are a few flaws that I’m not seeing in my analysis of this new workflow, I also see it being the success of apps like MindNode.  Save is turning into an antiquated operation that could be automated.  Save is noise to a writer that could be removed in order to ensure focus and flow are maintained.  So is it important to talk about the redesign of the save icon, or is it time we completely begin to question the need to save explicitly?  I’d love to hear your thoughts in the comments below.

New Theme Coming

One items I’m excited about is that I’m working on creating a new theme for the blog.  Having not created a WordPress Theme before, it’s been an interesting learning experience to say the least.  Here’s a screenshot of the design:

An concept of the new blog theme I’ll be rolling out soon.

New Blog Series

One of the largest pet projects I’ve been working on is refining how I do wireframes both at home and at work.  While this doesn’t sound exciting, it’s a different approach them many of the “responsive wireframe” tutorials that are popping up.  Expect to see more posts in the near future on how I’m using Node.JS and other technologies to provide a more meaningful story when wireframing.

Upcoming Presentation

Along with the blog posts, I’m in the process of creating a presentation for the Kansas City Developers Conference happening in early May.  Once such is done, I’ll be working on converting it into a narrated video for attendees and my wider blog audience as well.

More To Come

All in all, you can expect more content and general content coming in the near future.  It’s going to be a great 2013 – I just need to play a little catch up to make up the lost time.

The Current Trend

If you have never given a gift of an mp3, e-card, or e-book to someone for the holidays or other occasion, here’s a quick rundown that I’ve experienced in most retailers.

1. Locate the Digital Product
2. Add to Cart (or select “Gift this Product” on some retailers’ sites)
3. Fill out the Name, Email, and Message Information for the gift
4. Complete Purchase

The Current Issues

Now this is pretty straight forward and is fairly similar to the experiences associated with gifting physical goods.  However, there’s two big differences between the physical and digital stories.

1. Gift Notification Emails are delivered immediately.
2. Gift Contents are located in the body (and sometime subject) of the email.

By immediately providing notification that a person has received a digital gift, the responsibility for delivering the product on a specific date and time falls to the gift giver.  While this is the same concept of giving a gift physical to someone, it is more of a parallel of going to the store, finding the product, buying it, and wrapping it all while you are en route to the person who will receive the gift.

In addition to the speedy delivery of digital gifts, there’s also a lack of surprise in terms of what the gift contains.  While it can be argued that receiving and opening an email could invoke a surprise and delight response, receiving a plain-text email that says someone sent you a gift of a new mp3 album is like receiving an unwrapped gift in person.  It’s a surprise and a delight to receive something but there’s practically zero anticipation and excitement compared to experiencing a wrapped gift.

A Different Approach

So how can we address these trends that burden the giver and provides a lackluster response to the recipient?

1. Specifying a Date and Time of Gift Delivery

The first thing we can do is provide a way for the person buying the gift to specify when the gift should be delivered.  This would allow them to make the purchase well in advance of the event without having to remember to do everything right beforehand.

2. Make the Email Notification Fun

The next thing would be to allow the purchaser a way to select an email template that may correlate to the theme of the event.  This HTML email template could provide an image of a gift and still provide the To/From/Message information that accompanies gifts from e-commerce sites.  In addition, the subject line needs to be generalized in order to not give away the gift’s contents.  This has a potential of being affected by spam filters; however, I’m confident something could be figured out that’ll work without being flagged.

3. Only reveal the gift on the website.

Along with the email, another thing that comes to mind is that the product that was gifted should only be exposed once the person “opens the gift”.  This call to action from the email would direct the person to the website in a similar fashion to the current “download your gift now” links that are common.  The difference is that it wouldn’t be a direct download link but a landing page showcasing the product the person has received.

4. Provide a “Thank You” reply

Lastly, on this new landing page where the person finally receives the gift, give them the option to send the gift giver a “Thank You” message.  This doesn’t have to be anything beyond a traditional Contact form; however, can provide one additional piece to the experience that is completely about sentimental value.  In the event that the site allows anonymous gifting, such would also allow a way of providing thanks without violating the trust of anonymity.

The presentation is below if you’d like to listen to it (link, slides):

Overall, the talk focused on 3 important pieces of a job prospect’s journey; locating an opening, becoming marketable, and the interview process. Each of these things are important and many people make mistakes in one or all of them.

Locating a Position:

I’m very opinionated when it comes to this section. If you want to find a job that’ll make you happy you need to do your research. In my opinion, job sites like Monster.com and CareerBuilder.com are really only good to identify what skills are being looked for in the area and what companies are looking at a baseline. Job sites rarely give you any indication about the personality and culture of the company, though. I’m also not a fan of recruiters. While there are many good recruiters out there (or so I hear), most get paid based on putting you into a job, not necessarily the job you truly want or need. I’ve had a couple bad run ins when using recruiters to the point where I’ll never use them again. The same goes with LinkedIn. With a few rare instances, I view LinkedIn as nothing more than a Job Site ran by Recruiters.

Which leads us to the option of going out, meeting people, and building your network. Networking provides you an easy way to connect to people who work for companies that you may or may not want to work with. They can tell you about good companies and bad ones. Also, you can begin to learn about your future coworkers and them you through networking. This is a double edge sword though. If you think your future coworker is a total jerk, why would you want to work for that company and deal with him or her every day? Likewise, if they think the same way about you, they may be less prone to provide a positive review. This means that you always have to be yourself and ensure that you are a person that other people want to get to know better.

Personal Branding

This takes us to the next important piece of landing a job. You have to give others a reason to hire you. Your resume is the weakest form of personal marketing that you have available to you. I highly recommend starting a blog if you do not have any web-presence yet. Blogs are fantastic for a number of reasons:

1. Blogs provide a place where you can control your story
2. Blogs provide a place for you to chronicle your trials in your fields
3. Blogs provide a central hub for your other online presences

Anyone who has blogged for a while can tell you how beneficial blogging can be. It provides a place for you to control who you are on the web. You don’t have to worry about fitting onto a single page or anyone trying to cram you into their specific template and under their own logo. You are yourself on your blog.

It also allows you to write about what problems you’ve solved (within proper non-disclosure agreements of course). If you’ve fixed some problem at some point, blog about it. One thing that I learned early on was that I will ALWAYS encounter that issue again later. In the rare chances that I don’t, others will and being able to point them somewhere instead of trying to reiterate yourself again helps keep things consistent and shows that you can provide a resource to others.

Lastly, blogging provides you the platform to pull in content from other sources. If you code, you can link out to your Github or similar code repository. If you present, you can talk about your presentation and link out to your slides on Slideshare. If you do video, there’s YouTube and Vimeo. And, in the case of this post, if you do just sound/audio recordings, there’s SoundCloud and Audioboo. These are all things that you can put onto your resume and use to spring board more content for your blog. The more content you have, the more people will come to your site and the better you’ll become as a writer and a job seeker.

Interview Time

So you’ve landed the job and are going in for the interview. Now what to do? I recommend 3 things:

1. Research the Company again
2. Review Yourself and Blog again
3. Write Questions to ask the Company Representatives

The first thing you want to do is research the company you have an interview with once again. How did you find the position and company again? Why did you want to apply here again? Who told you about it? All of these things will help you with the near ubiquitous question of “what brought you to Company XYZ?”. Having names of people even if they didn’t refer you can help you get in the door too. If you follow coworkers on Twitter or via their blogs, this can provide other talking points about those people and some of the things that you’ve seen through them.

Secondly, an interview can be thought of as a presentation about yourself. Presenting really stresses a lot of people out; however, you know the topic forwards and backwards because no one knows you better than yourself. With that said, it doesn’t hurt to review your blog and your various content streams. Find out what items are most popular and try to draw reasons why that is. Think of why you wrote or created that content in the first place. All of these things provides you with stories to tell in the interview and can illustrate your trials and accomplishments easier.

Lastly, ask questions back to the person interviewing you to validate that this truly is a company that you want to work for. In the recording above, I talk about how I did an interview at a “pretty decent company”; however, after getting past the lobby, it quickly turned into a place I didn’t want to work at. Asking questions is a way to confirm this as well. One question I like to ask is what I call the “sick child question”. It simply states “If an employee has a sick child and has to stay home with them for a 1/2 day or so, what is the company policy on such things?” Does the company allow them to work remotely, make up the hours, require a sick/vacation day to be taken or tapped into, or just hopes the child gets better and the person returns when they can? Each of those 4 answers can paint the company in a completely different light when it comes to how it handles life issues that will come up. Even if you don’t have children or anyone you take care of, life events will happen and knowing that the company understands that over having strict policies is a huge item when finding a great place to work.

One Final Note

If you don’t like the job that the interview covers, then don’t accept it. While there are cases where you NEED a job and the income; if such isn’t the case then taking the time to do the research and make sure that you will be happy with your next job is important. So many people dream of a job or career different than what they are currently in yet settle into a less than perfect job. A dream job always changes and thus we’re always chasing it; however, we can make sure that we’re always pursuing it properly without back tracking.

I encourage you to listen to the entire presentation since there are a number of stories and additional tips held within. In addition, if you have questions leave comments or talk to me on Twitter (@JamesEggers) or Google+ (James Eggers) and I will see what I can do to help.

Using Scripts with NPM

NPM has the ability to run custom scripts at various times of different commands is offers.  For example, defining a test script will be ran when someone runs npm test <package>. NPM provides with a number of pre-defined hooks in which scripts that can be used out of the box to automate a number of processes.  In addition to these pre-defined hooks, you can define your own labels in order for the scripts so that they can be ran manually using the run-script command.

For example, if you wish to have a custom script to be executed after someone installs a module for the first time, your package.json file may have the following section defined:

"scripts": {
    "test": "mocha tests/luhn-tests.js -R spec"
    , "install": "node bin/client-install-directions.js"
}

The above snippet of a package.json file, install tells NPM that a script is provided to be ran after someone types in npm install <package>.  This script will be ran automatically which can be used to help configure an environment or, as in this case, provide instructions on how to install the module into a client-exposed JavaScript directory for client-side usage.

Using Custom Scripting Hooks

Using the default events can provide a lot of helpful hooks into NPM for automation and providing additional information to the consumer; however, you can define your own hooks that can be ran with NPM’s run-script command.  Let’s modify the snippet to illustrate this point:

"scripts": {
    "test": "mocha tests/luhn-tests.js -R spec"
    , "install": "node bin/client-install-directions.js"
    , "update": "node bin/client-install-directions.js"
    , "client-install": "node bin/client-install.js"
}

In this modified version, 2 additional lines were provided. First, we added update to do provide the same instructions as install so that a person updating the package will have the same experience as that of a fresh install. Secondly, we added a client-install script which isn’t automatically used by NPM. To run this custom script, we just need to use the following command:

npm run-script <package> client-install

This will tell NPM to look in the scripts section of the package.json file for the pacakge and execute the client-install script.  By defining scripts in this manner, it allows for a number of utility scripts to be implemented without the need of globally install additional shell commands like some modules require.

In the Wild

If you want to see an example of this in action, three packages that I’ve authored have been updated to include these new scripts.  Feel free to review them and provide any feedback on how I can make the experience better.

• Luhn (1.0.5) – Credit Card (Mod10) Validation (npm, github)
• ABAValidator (1.0.4) – Routing Number Validation (npm, github)
• DateValidator (1.0.5) – A Simple Day, Month, Year Date Validator (npm, github)

Enter Requiredir()

To address this scenario, I created requiredir (npm, github).  Where as Node’s require() function imports in a single module, requiredir() will import in a directory’s worth of modules using a similar syntax.

var requiredir = require("requiredir");
var routes = require("./routes");


The above snippet provides will import in all modules located in the ./routes directory.  When each module is imported, it becomes a named property on the (in this example) routes object.  So, if we had a module that managed all routes for the product pages and the customer pages of a site, those modules could be accessed in the following way.

var productRoutes = routes.products;
var customerRoutes = routes.customers;

At this point, you can use each module as if you had called require() for each individually.  However, there are a few additional features for requiredir().

var moduleCount = routes.length;
var routeArray = routes.toArray();

There may come a scenario when you want to sequentially access modules that were imported in a fashion similar to an Array. For this reason, I added the toArray() function and use it in my migration utility that I’ll write about next.

Other Details

While that’s pretty much all there is to know about requiredir, there are two other things I need to point out.

1. It does not import modules or any file whose filename starts with a ‘.’ (i.e. hidden files on Mac and Linux).
2. requiredir() does not do a recursive import. If you have directories within directories that need to be imported, those will need to be a separate require() or requiredir() depending on your situation.

Beyond all of that, the only thing left is to simply install it from npm and have some fun with it.

npm install requiredir

My next post will be talking about Monarch my migration utility that uses this requiredir module. So if you are looking for an example of how requiredir is in use, stay tuned.

luhn (npm, github) provides this algorithm (known as the luhn or mod10 algorithm – wikipedia) for validating credit card numbers into a simple script that can be reused in both your browser and node.js applications.

Installation

Installing luhn is simple thanks to NPM.  To install it, simply type the following command.

npm install luhn

Using with Node.js

Once the package is installed using NPM, using the luhn is as simple as importing in the module into your code.

var luhn = require("luhn").luhn;
var is_valid = luhn.validate("1234567890123456"); // returns false

Using with JavaScript

One goal I had when writing luhn was to ensure that it can be used both client and server side. Being able to use it in both places ensure that you can write your validation code once and reuse it wherever.

UPDATE – 09 Aug. 2012: the module has been updated to utilize NPM more to make client-side installation easier than manually copying the script from node_modules or referencing directly from node_modules. Typing in the following command will prompt you for a client-side installation directory and then will automatically copy the script to your JavaScript source directory.

npm run-script luhn client-install

To use the luhn in object from a client’s browser, you simply have to reference the script using a typical <script> tag and then use pretty much the same as above.

<script type="text/javascript" src="path/to/luhn-min.js"></script>
<script type="text/javascript">
var luhn = window.luhn;
var is_valid = luhn.validate("1234567890123456"); // returns false
</script>

Summary

The luhn module is still in its early stages and I’m always looking for feedback.  If you have any suggestions or find any bugs, please submit them to the issue tracker over on github and I’ll see what I can do to get them updated. In addition, if you are looking for information on test credit card numbers to use, please refer to this link from PayPal.

Installation

Installing ABAlidator is simple thanks to NPM.  To install it, simply type the following command.

npm install ABAValidator

Using with Node.js

Once the package is installed using NPM, using the ABAValidator is as simple as importing in the module into your code.

var aba_validator = require("ABAValidator").ABAValidator;
var is_valid = aba_valdiator.validate("123456789"); // returns false

Using with JavaScript

One goal I had when writing ABAValidator was to ensure that it can be used both client and server side. Being able to use it in both places ensure that you can write your validation code once and reuse it wherever.

UPDATE – 09 Aug. 2012: the module has been updated to utilize NPM more to make client-side installation easier than manually copying the script from node_modules or referencing directly from node_modules. Typing in the following command will prompt you for a client-side installation directory and then will automatically copy the script to your JavaScript source directory.

npm run-script ABAValidator client-install

To use the ABAValidator in object from a client’s browser, you simply have to reference the script using a typical <script> tag and then use pretty much the same as above.

<script type="text/javascript" src="path/to/aba-validation.js"></script>
<script type="text/javascript">
var aba_validator = window.ABAValidator;
var is_valid = aba_valdiator.validate("123456789"); // returns false
</script>

Global Objects Are Bad

I’m not a fan of adding objects into the global scope (or window object) in my JavaScript code. Inside of the aba-validation.js class, I have allowed for a namespace to be generated and used if the developer wishes to do such.  If namespace remains undefined, the ABAValidator object will be placed into the global scope.

To add a namespace for the client-side implementation of DateValidator, simply modify the first line of date-validator.js like the following:

window.MyNamespace = window.MyNamespace || {};
var namespace = window.MyNamespace;

Now, when it’s being consumed by the client side JavaScript, it’d be referenced in the following manner.

<script type="text/javascript">
var aba_validator = window.MyNamespace.ABAValidator;
var is_valid = aba_valdiator.validate("123123123"); // returns true
</script>

Summary

The ABAValidator module is still in its early stages and I’m always looking for feedback.  If you have any suggestions or find any bugs, please submit them to the issue tracker over on github and I’ll see what I can do to get them updated. In addition, if you are looking for information on test routing numbers to use, please refer to this Stackoverflow question on the subject.

One of the shortcomings that I found on a recent project was the lack of a simple date validator for ensuring that a date is valid for a provided day, month, and year. There are a few packages on NPM that would suffice; however, they were huge and ultimately too large if I wanted to share them with the user’s web browser.  So I decided to create my own and share it on NPM.

DateValidator (npm, github) is just a simple date validation module that works both in Node.js on the server as well as in a client’s browser.  It isn’t fancy at the moment; however, provides a simple way to validate things like a date of birth or free form date fields.

Installation

Installing DateValidator is simple thanks to NPM.  To install it, simply type the following command.

npm install DateValidator

Using with Node.js

Once the package is installed using NPM, using the DateValidator is as simple as importing in the module into your code.

var date_validator = require("DateValidator").DateValidator;
var is_valid = date_valdiator.validate("2012", "02", "31"); // returns false

Using with JavaScript

One goal I had when writing DateValidator was to ensure that it can be used both client and server side. Being able to use it in both places ensure that you can write your validation code once and reuse it wherever.

UPDATE – 09 Aug. 2012: the module has been updated to utilize NPM more to make client-side installation easier than manually copying the script from node_modules or referencing directly from node_modules. Typing in the following command will prompt you for a client-side installation directory and then will automatically copy the script to your JavaScript source directory.

npm run-script DateValidator client-install

To use the DateValidator in object from a client’s browser, you simply have to reference the script using a typical <script> tag and then use pretty much the same as above.

 
<script type="text/javascript" src="path/to/date-validator.js"></script>
<script type="text/javascript">
var date_validator = window.DateValidator;
var is_valid = date_valdiator.validate("2012", "02", "31"); // returns false
</script>

Global Objects Are Bad

I’m not a fan of adding objects into the global scope (or window object) in my JavaScript code. Inside of the date-validator.js class, I have allowed for a namespace to be generated and used if the developer wishes to do such.  If namespace remains undefined, the DateValidator object will be placed into the global scope.

To add a namespace for the client-side implementation of DateValidator, simply modify the first line of date-validator.js like the following:

window.MyNamespace = window.MyNamespace || {};
var namespace = window.MyNamespace;

Now, when it’s being consumed by the client side JavaScript, it’d be referenced in the following manner.

<script type="text/javascript">
var date_validator = window.DateValidator;
var is_valid = date_valdiator.validate("2012", "02", "31"); // returns false
</script>

Summary

The DateValidator module is still in it’s early stages and I’m always looking for feedback.  If you have any suggestions or find any bugs, please submit them to the issue tracker over on github and I’ll see what I can do to get them updated.

One of the presentations that I gave on that day focused on getting people familiar with Chrome’s development tools.  While this is a topic I could present for 2-3 hours, the time slot was only an hour so the content had to be truncated a bit.  If you are curious to see the presentation, please feel free to check out the recording below.

Due to technical difficulties with the camera, the last 10 minutes of the presentation were not recorded.  The primary item that was discussed during that time was Chrome’s SourceMap feature that allows a combined, minified version of JavaScript to be remapped to the original files; be it JavaScript, CoffeeScript, or Clojure.  You can see a demo of SourceMaps from this article on Html5Rocks.