So, basically, people were typing too fast on the screen’s number buttons – and that would execute a zoom. Turns out, with a little bit of jQuery, you can get rid of this annoying problem.

$(body).on('touchend', '.number-keys', function(e) {
    e.preventDefault();
    e.target.click();
});

Here, you just watch for touch-end on the body, limit that to your number-keys (or any selector you want), and prevent the touch end – and instead issue a click. That way it’ll work like a standard tap and not a double-tap and zoom.
Keep in mind, it’s probably best practice to only disable this on areas that need it – not the entire body – because then you’re removing some of the usability of your page.

I’ve had a lot of experience hiring programmers, so I thought I’d take a look at this fellow’s cover letter. After quickly reviewing it, I realized it was just a shortened version of his resume and maybe one personal paragraph. This won’t do! I wanted him to be successful.

The Connection Letter

Really, the cover letter should be called the connection letter. Whether it’s the email that is sent with an attached resume, or an actual letter attached to the resume, the purpose of this letter is to connect to the recipient. Automated systems scan the resume for keywords – and sometimes the HR department does a cursory glance over it to make sure it passes a few filters – but that cover letter is really what connects with the hiring manager.

When a hiring manager reviews your resume with a cover letter – they have two choices: read the cover letter and then the resume, or skip over the letter and just look for qualifications. You have precious few seconds to grab attention with this cover letter (come to think of it, it’s like a marketing webpage in that way). So, make them count. Otherwise, they’re going to do what I did a lot: skip over the cover letter and scan the resume to see if this is an extremely well qualified candidate – because they sure can’t write.

The Three Steps

So, you know you have to grab attention, but what else do you need to do? Add clarification beyond the resume details and share your personality. We all know that the official hiring stance is to hire the best qualified person for the job, but managers are hiring based on personality also. The power of the team is stronger than just the individual, so you must be a good fit – and someone that they want to spend at least 8 hours of their life with every day.

So, let’s get into the three steps – or three parts of the connection letter.

Step 1: Grab Attention

Those first few sentences are where you need to get the attention of the reader. But, how do we do that? Simple – we focus on their needs at this exact moment.

See, we know that the reader has a very big problem, and since they’re reading resumes right NOW, they’re focusing on that right now. We actually have the upper hand because we know exactly what the focus of the reader is: they need to solve a problem – and that problem is getting some more work done.

I bet you thought I’d say getting a great programmer on the team? Nope – the actual need is getting more work done. The programmer is just the path to get to the solution. So often I see programmers begin their cover letter with descriptions of their history or their qualifications. But, that doesn’t meet the need – the need is to get more work done. The solution is to get a good programmer in there to reduce the workload. So, we know exactly what we have to do.

First step is to connect with the need. You may want to talk about the work load, connect with them about their busy schedules, etc. Whatever fits your personality style. The point is to stay away from “I” and focus on them. Bonus points if you do a bit of research and can actually address particular needs they might have. The end of this is to transition to how you can fit that need.

Step 2: Indirectly Fit Their Need

This is where you can to speak about yourself. Here you can share a summary of your experience. And even better yet, if you can find a way to relate a personal project or a work project to the current business, that’s great! This is the place to quickly summarize the resume, but more so to add additional detail on a few key points that relate to this position.

This means that you need to be intimately familiar with the job posting. A standard cover letter will not suffice for this step. You must take the time to tailor your qualifications to fit this position – otherwise you’re just summarizing your resume and bragging. And, I bet you’d rather get the job than just brag to the hiring manager.

I’ve heard from some programmers in the past that they’re too busy applying to write custom cover letters. Hogwash! Hogwash I say! There are two things wrong with this statement. First, if you’re job hunting, you have the time. Instead of working 8 hours today, you’re just applying for jobs. Trust me, you have the time. Put away the PS4, xBox, Cheetos and self-pity, plop yourself down in front of this computer, and write write write!

The second reason this statement irks me is because of the quality vs quantity argument. If you’re so busy applying for so many jobs like this, chances are you’re applying for the wrong jobs. Slow down and focus on the ones that you may be a good fit for. If you invest the time in pitching just a few jobs, those will work out for you. Trust me, I received a lot of resumes when I was hiring for programmers – but the ones that actually stood out were the ones that I saw took time to invest in their cover letter and resume. See, if you can’t take the time to invest in the application process, I don’t know if I’ll trust you to spend the proper time doing the work.

Step 3: Confidently Submit Yourself

The last section of the cover letter is to do the ask. A lot of us programmers are used to working in the background and not having to do a lot of sales. Some of us are introverts. And by and large, many of the most talented programmers just don’t act confidently enough when it comes to the application process.

You’ve worked hard to get to this point, so it’s time to show it. Instead of asking if it’s ok for a phone call or response, carefully tailor your last few sentences into a confident requests for times that you can chat with the hiring manager. The subtle difference here is that you’re showing that you know you’re a fit for the position and you have every intention of moving forward. There was nothing that turned me off from a candidate more than their lack of close at the end. It almost seemed like they weren’t interested in the position by the time they got to the end of the letter. I’ve seen it shift from a job-seeker to job-hirer and back and forth market. But, regardless of who “has the power,” it’s important to understand that this is a two way conversation with give and take on both sides. You are planning on spending a third of your life here for the foreseeable future, so act like it!

Bonus Step: The PS

When you apply to a programming job, you should be ready to stand on your merits alone. Just because a friend referred you doesn’t necessarily mean that the hiring manager should look upon you more fondly. In fact, it can be a distraction. So instead, I suggest using any referral as your PS. Once you’ve (hopefully) successfully made your case to have the hiring manager move past your cover letter and truly evaluate your resume, this is where you drop the last bomb on them. Your referral.

The best way to put this is something that just mentions the referral had good things to say or thought you’d be a great fit. You may even joke about having to buy them lunch or something in return for the great connection they’ve made. But, point being, it should be a light-hearted name-drop and not a demand. I’ve seen people use phrases like “so and so recommended me, so you know I’m good.” Woah! Hell no – don’t do that.

End Notes

I know there is a lot of competing information out there, especially from higher level educational institutes about what a cover letter and a resume should be. I really believe that these people are trying their best to give a good answer to the millions of applications out there. But, programming is different, programmers are special. This job is hard and there is a lot of competition. Remember, you’re not writing a cover letter, you’re writing a connection letter. This is the time to share your personality, to make connections with the hiring manager, and to show you care about the position. Now, start writing better cover letters and win those jobs!

So, I don’t have a need for it for this particular site – but maybe you do? Check out the Scroll and stop demo in jquery.

The Code

The mark-up is very simple. Just a div, and a UL of terms:

<div id="hero">Let's make software <ul id="scroller"><li>stream-lined.</li><li>effective.</li><li>simple.</li></ul></div>

Next, let’s look at the very small amount of CSS required:

#hero {
    font-size: 5rem;
}
#hero ul {
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    height: 6rem;
    overflow: hidden;
}

First, set the size of the font so we know what size the scrolling box will need to be. Then, position our UL aligned vertically, with no padding or margin, and cut it off after the first word with the height/overflow styles.

Finally, we need to have some javascript to rotate these. I used jQuery to save some time – but this could be done without it as well.

var $scrollingUL = $('#scroller');

function scroller(element)
{
    var $nextSibling = $(element).next();
    if ($nextSibling.length) {
        setTimeout(function() {
            $scrollingUL.animate({
                scrollTop: $scrollingUL.scrollTop() + $nextSibling.height()
            }, 400, function() {
                scroller($nextSibling);
            })
        }, 5000);

    }
}

scroller($('#hero ul li:first-child'));

Let’s look over the pieces here first. (Just a reminder – if you’re making a bigger project, you might want to encapsulate this functionality into a module.) First, get a reference to the scoller UL. Since the function is ran multiple times, I don’t want to search for that item each time. Next, call the scroller() function with an element: the first element in the scroller ul. The function gets the next sibling, and if it exists, sets a time-out to animate it to the next position – afterwards it calls itself. (Yay recursion).

TWO NOTES First, instead of using local storage, you could also use a cookie. And second, my project already had jQuery in it – it’s not required for this solution.

var $blockList = $('.block-list');
if ($blockList.length && window.localStorage) {
    $(window).on('unload', function () {
        var scrollPosition = $blockList.scrollTop();
        localStorage.setItem('blockListScrollPosition', scrollPosition);
    });

    var position = localStorage.getItem('blockListScrollPosition');
    if (position) {
        $blockList.scrollTop(position);
    }
}

In this example, the div (or really any element) has a class of ‘block-list’ to be used by this snippet. Here’s the outline of the functionality:

First, get the element that has .block-list as a class.
Next, if it exists and localStorage is available, do the functionality.
The functionality is to add an unload handler on the window object. When the user leaves the page, the scroll top position will be set into local storage.
Finally, any time there is a stored value for the scroll position, the element is scrolled to that position.

So, when it came to generating this documentation, I wanted to make sure that I didn’t have to do too much work. So, I configured PHPStorm with external tools over SSH using vagrant configurations to do this.

Let’s have a quick look:

Setting up the Tools

First, install phpDocumentor to your virtual machine. I happened to have mine installed as a global binary on this project vm.

Second, install apiDoc using npm.

Next, Go to the PHPStorm preferences > Tools > Remote SSH External Tools.

Click the + button to add a new tool:

• Enter php doc as the name. You can group it differently if you’d like.
• Leave most of the options at defaults. I chose to leave it as Current Vagrant. (if you don’t have this option, you might not have vagrant installed in this project. You may want to choose a default remote interpreter instead.)
• I entered phpdocumentor as the program because I have it installed as a global command. This might be something like “php path/to/phpdoc/bin” if you have it installed with composer.
• Finally, I put my parameters in the parameters input box. You can set your own based on the phpdocumentor cli options, but mine basically says the source code directory (-d) and the output location (-t)

Click OK and you’re good to go for phpdocumentor.

The same configuration can be done with apiDoc. For parameters, I used “-i /path/to/api.php -o /path/to/api/doc/output”.

After you save this, you now have external tools available to use in PHPStorm. You simply have to click on the Tools menu, hover over External tools, and choose your tool from the menu. (Note, if you have used vagrant, it may ask you to confirm you’d like to use the current vagrant instance each time you run the tool.) Also, if you chose a different group for the commands, the menu will be different.

But, maybe it’s because I’ve been using them for a long time that I always favored global installs vs composer based installs. But, maybe that’s wrong now?

Let me trace the history…

Many years ago, there was this tool called PEAR. Ok, I’m being slightly silly – but I “grew up” using tools like PEAR to install my tools globally. But, I was never a fan of this because I didn’t like the idea of installing something to the global file system (like a framework) that would be shared among all my projects. What if I wanted to upgrade the framework in one project but not all of them all at once?

So, I used PEAR for tools that I somehow thought should be shared (like PHPUnit) and downloaded individual components / their versions by hand and versioned them into my project.

Then, as PHAR become more common, I tended to shift my thoughts to downloading a .phar file, renaming it to look like a binary, and marking it executable. Still, it was still global.

I remember recently looking at installing PHPUnit on a new project and seeing the composer – based install.

A knee jerk reaction was to ignore that install and install it to the filesystem globally instead. Why would I want to duplicate this code to my local working directory when I would be using it among many projects?

Perhaps by now, you’re seeing the flaw in my reasoning. I gotta admit – I was still being old-school and stubborn.

So, on my most recent project, I use apt-get to install PHPUnit. All was good and fine until I did a –version on the command line tool – for some unknown reason.

PHPUnit 3.7.28 by Sebastian Bergmann.

Ruh roh – all this time, I had been looking at the docs for the newest 4.x version of the platform, 4.6 stable.

Now, I think I finally get it. Let me summarize for those who have been dense for years like me:

– Harddrive space and bandwidth are cheap. There is no need to share the install of a library for those reasons.
– Always read/document and test against a known version. If you don’t include the library as a declaration (I’m looking at you composer.lock file), you can’t guarantee what version of the library you’re using.
– Don’t be stubborn – change with the times. Sometimes, when everyone’s doing it someway (composer require phpunit/phpunit), there’s a reason why

Anyway… at my last job, we were contemplating making a PDF reading solution that would easily scale, work on multiple devices, and allow advertisements along side of them. I left before we began this project, but it hasn’t ever left my mind.

I decided to do a quick proof of concept. Turns out Imagick with PHP will convert PDF to jpeg really quick and easy. So, I wrote the following PHP class to work with this.

namespace AaronSaray;

class PDFViewer
{
    /**
     * @const string the location of the PDF files in relation to this class
     */
    const PDF_DIR = '/pdf';

    /**
     * @const string the cache location
     */
    const CACHE_DIR = '/pdf/cache';

    /**
     * Get the PDF files
     * @return array
     */
    public function getPDFList()
    {
        return glob(__DIR__ . self::PDF_DIR . '/*.pdf');
    }

    /**
     * Creates an image list by either processing the pdf or retrieving them from the cache
     *
     * @param $filename
     * @return array
     * @throws \Exception
     */
    public function getImageList($filename)
    {
        $filePath = __DIR__ . self::PDF_DIR . "/{$filename}";
        if (!is_readable($filePath)) {
            throw new \Exception($filePath . ' was not readable.');
        }

        $dirName = substr(basename($filePath), 0, -4);
        $cacheLocation = __DIR__ . self::CACHE_DIR . "/{$dirName}";
        $globPattern = $cacheLocation . '/*.jpg';

        $files = glob($globPattern);
        if (empty($files)) {
            $this->processFileToImageCache($filePath, $cacheLocation);
            $files = glob($globPattern);
        }

        return $files;
    }

    /**
     * Write a rendered PDF to the cache.
     *
     * @param $filePath
     * @param $cacheLocation
     */
    protected function processFileToImageCache($filePath, $cacheLocation)
    {
        if (!is_dir($cacheLocation)) mkdir($cacheLocation);

        $imagick = new \Imagick();
        $imagick->setResolution(150,150);
        $imagick->readImage($filePath);
        $imagick->writeImages($cacheLocation . '/rendered.jpg', true);
    }
}

Simply put, you’ll call one function to get a list of PDFs – and then you can feed a PDF to the other function to make it write it to the cache – or read it from the cache.

Finally, add in a little jQuery:

$(function() {
    $('#pdf img:first-child').show();
    $('#pdf').on('click', function() {
        var visibleImage = $('img:visible', $(this));
        var nextImage = visibleImage.next();
        if (nextImage.length == 0) {
            nextImage = $(visibleImage.siblings()[0]);
        }
        visibleImage.fadeOut();
        nextImage.fadeIn();
    })
});

This simply will skip through the images one by one on click – and restart from the beginning. Not particularly pretty, but it’s just a proof of concept.

Check out the demo here.

I was using a simple HTML5 input of time…

<input type="time" name="the-time">

At first, the user would enter something like “4:00 PM” – which I’d convert to 15:59:59 on the backend. When I reloaded the page, it now reflected “3:59:59 PM” in the input field.

Then, the user would go to edit the time to say… “3:30:00 PM” and they’d get the following error in Chrome:

“Please enter a valid value. The two nearest valid values are…” – that didn’t make any sense to me.

Well, turns out that every number field in html5 spec is using step=1 on the input fields – however, time is using step=60 – as in 60 seconds. (I guess the authors preferred minutes over seconds). The spec clearly defines this – but I guess I just missed that part.

Hopefully it saves you some time too – in the end, this is what I changed my input field to – and it worked!

<input type="time" name="the-time" step="1">

I wanted to see how easy this actually was. I was surfing around on one of my favorite websites, Milwaukee Biz Journal, and I saw this article: MKE City Building Values. I thought, that slideshow seems like a great source of data I’d like to see in sortable, mappable information.

tl;dr Top Milwaukee Building Values Fusion Table

First thing’s first, I created a Google Drive Spreadsheet (looks like you can upload your own data as well if you want.) I made it have columns for the name of the building, the address, the 2015 value, 2014 value, and an image from the original article (Thanks MKE Biz Journal!)

Next, I scanned a tutorial about Fusion tables located here: About Fusion Tables – and clicked to make one.

And this is where we begin!

Selecting the Source

I chose to use a Google Drive Spreadsheet.

Validating the Layout

Yup, everything looks good. I really like the option of choosing the header / label row too. Sometimes you might want to make a report from data farther down on a street.

Adding the Meta Data

I think its important to give attribution to sources when you use them. Here, I did so with MKE Biz Journal.

Click Finish!

The first result

As you can tell – it’s pretty boring right now. But, let’s make it a little bit more user friendly. I’ve decided to rename the columns to ‘Source Data’, ‘Cards’ and ‘Building Locations.’ When I clicked on the locations tab, however, it decided to do all the geo-location:

That only took a little while – and then I had my map. But it was WAY zoomed out. AND I couldn’t find my locations anywhere. Turns out there is an option on the left to select which column you want to map. It had defaulted to “Name” – so I chose address – and then it re-geocoded. This actually re-focused it – closer to Wisconsin, but that’s not perfect yet. Turns out, I had to center and zoom the map manually – but that was fine.

There are other map configuration options too. The default placeholder was a simple dot – but I wanted the familiar balloon. So, I chose that option. On the left hand, choose Feature Map -> Choose feature styles. You’ll see something like this:

The next thing I wanted to do was configure the info window. This is on the left side too: Feature Map -> Change Info Window. I decided I would want the name, address, values and picture to be in the info window. By default, it renders all of the information automatically like shown below:

I decided to write my own HTML to customize the view. You can click on the custom tab and do the following:

<div class='googft-info-window' style='height: 11em; overflow-y: auto'>
<img src="{Image}" style="float:right; height: 10em; margin-left: 0.5em"/>
<b>{Name}</b><br>
{Address}<br>
<hr>
2015: ${2015}<br>
<span style="color: #aaa">2014: ${2014}</span><br>
</div>

Ugh – inline style. But, what can ya do?

Anyway, this makes a pretty good looking info window for our purposes.

Final Part

Click Tools -> Publish and choose to change the visibility. You must make this public so you can share it or embed it. I chose the option to make it visible to anyone with a link.

So again, here is your link!

Top Milwaukee Building Values

First of all, a little background. I just called a volunteer organization and offered to work with the team. The person who answered the phone was very confused, very gruff, and in the end, told me to email someone before hurrying off the phone. Needless to say, if that’s the caliber of person that runs the organization, I don’t want to participate!

So, let’s get into the tips – to make sure you never have to worry about getting volunteers again.

Secret Shopper Program

The first steps to solving a problem is identifying it. Sometimes, when you’re so close to a specific task or process, it’s hard to identify the weaknesses. If you find yourself confused about why your on-boarding, marketing or attraction system is not working, it might be time to do a secret shopper program. Find a trusted colleague or a friend of a friend who can play the part: give them the standard material, and see what happens.

In the end, you may even actually get a new volunteer! – But even if you don’t, you’ll get valuable advice from their brand new experience. They might tell you that your handout material or call to action on your website didn’t connect with them. Perhaps they’re even confused on what they would be doing if they chose to volunteer. They might even be scared thinking they don’t have the right skills to be successful. Grab all this information – and make small, incremental changes to your program!

Be a Spy / Ask for Help

We all know there are precedents for thriving, successful volunteer organizations. Sometimes it’s just as simple as asking a similar organization what really helps them entice new volunteers. Most non-profit organizations are willing to share this information for each other – after all, we’re all trying to make a better world.

If you can’t seem to get that information directly, it’s ok to be a spy. Jump on their website, give them a call, and TAKE NOTES. Figure out what they’re doing right – compare your organization to theirs. Sometimes the differences require a large investment – I understand that. But most are just process, communication and idea changes – and those can be cheap or even free!

Communicate the Value and Requirements, Kindly

The genesis of this article came from that phone call I mentioned above. I really felt rubbed the wrong way, but I’m persistent. I’m going to call at a different time, email, and continue my volunteering streak. But, not everyone is like me. You don’t want to lose any volunteers, not even 1!

So, what concerns do volunteers have when they call? Let’s figure it out:

What volunteering options are available?
Don’t assume the volunteer is familiar with the organization. You may ask “Do you have a specific opportunity in mind, or would you like to learn more about all the options?”

Assure the volunteer that they are qualified.
A lot of volunteers, especially first time ones, may not think they can do what you’re asking. Obviously, there are some options that do require advanced skills, but for the most part, non-profits just need qualified volunteers that have a little time available. Ask about the volunteer’s background – and then give them assurance that they would be a great fit – even if they don’t ask about it.

Speak clearly, treat volunteers with respect.
Remember, this is a cross between an interview and a sales opportunity. And, for the most part, the power is with the potential volunteer. Treat them with respect, go above and beyond, and communicate clearly and accurately. Remember, you need to get these volunteers in the door – because as we all know, there are high turnovers in great volunteers – because they’re desperately wanted elsewhere too!

Final Thoughts

Volunteer organizations are HARD to run. Trust me, I’ve started one – nothing was harder than getting people to help you with the work. So, make sure you’re following these three simple steps and you should see your stats jump up!

Have questions about your volunteer organization? Need help figuring out what you’re doing wrong OR RIGHT? Let me know – I’d love to share stories with you and provide you some fresh eyes and feedback.