1. Need to Standardize Your Framework Widgets? Try a Builder!

    UPDATE: Some of you have asked how this might work as a jQuery plugin so I created a set of HTML, CSS and Javascript files to illustrate this.  While they aren’t referenced here, they are available in the github repository linked below.

    If you have ever worked on a mid-sized to large-sized site that had heavy dependencies on a front-end framework like Bootstrap or Foundation, chances are likely you had multiple instances of widgets being implemented all over the codebase.  In some cases, if the development team that implemented these widgets was small, the development structure could be standardized.  However, with many teams going full stack these days, the chance for the same widget to be implemented in two different ways, sometimes with different auxiliary frameworks, by two or more different developers becomes much greater.  A solution that I would like to propose is something I call my Abstraction Builder (essentially metaprogramming).

    The main concept to my Abstraction Builder is this: abstract the HTML to a point where it’s as minimal as possible and allow a Javascript builder object to do the manual development, including implementing any auxiliary frameworks as needed, such as for specific use case event listeners.

    Consider the Bootstrap 2.3.2 carousel widget.  Just the basic HTML, without ANY content, looks something like this:

    <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <!-- Carousel items -->
    <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

    It’s easy to see how this can get complicated and messy fast with anything more than a simple image carousel and thus gives a huge window of opportunity for multiple developers to implement the carousel as they see fit (sometimes even incorrectly).  However, this can all be avoided with a Javascript builder (NOTE: the necessary links to github and codepen will also be explicitly listed at the end).  

    Let’s take a look at what a developer would need to implement if they used my paradigm.  First, the Javascript:

    document.addEventListener("DOMContentLoaded", function(e) {
    	var smartCarousel = new SmartCarousel({
    		'carouselId' 	 : 'mySmartCarouselID',
    		'showIndicators' : true,
    		'showControls' 	 : true,
    		'intervalDelay'  : 1000

    I have an object which is newed up and takes as a parameter an object of configurations.  As you can see these configurations include things like whether or not to show the indicators (small dots at the top), whether or not to show the control arrow and the amount of milliseconds in the interval delay.  Next, the HTML:

    <div id="mySmartCarouselID">
    <div><img src="img/slide1.png" /></div>
    <div><img src="img/slide2.png" /></div>
    <div><img src="img/slide3.png" /></div>
    <div><img src="img/slide4.png" /></div>
    <div><img src="img/slide5.png" /></div>

    That’s it!  Everything else is being controlled by the CSS, the framework (in this case Bootsrap) and the builder.  The HTML stays, nice, clean and concise and the SmartCarousel object takes care of the rest.  One little nicety you’ll notice if you check out the github is that the builder “sniffs” the page for Hammer.js, the multi-touch gesture framework I’ve chosen to use.  If it’s present, then touch events are added, if not, those events are not added.

    Please note the syntax used in the Javascript SmartCarousel.js file.  I’ve tried to adhere to raw Javascript as much as possible so that this example is portable for anyone who wishes to use it.  Given that Bootstrap Javascript is a jQuery plugin, I was forced to use jQuery in a few places.  However, the example is not about using Bootstrap or jQuery but about what you can do with this paradigm.  Additionally, while I chose to use Hammer.js, you are by no means limited to this framework.  Again, the purpose was to show what can be done, not what should be done.

    I hope you found this helpful. If you have any additional questions (given that I’m writing this with two hours sleep over the past two days), please let me know. I’ll be glad to update and answer accordingly.


    jQuery: http://www.jquery.com/

    Bootstrap: http://www.getbootstrap.com/

    Foundation: http://foundation.zurb.com/

    HammerJS: http://eightmedia.github.io/hammer.js/


    Github: https://github.com/mTorbin/frameworkWidgetBuilder

    Codepen: http://codepen.io/mtorbin/pen/ouaKp


  2. Moto X People App Contacts Not Matching Up to Phone App Contacts? Here’s a Fix That Worked For Me!

    Ever since moving to Android, I’ve had this really annoying problem.  My Gmail contacts that were listed under my People app looked great but the contacts listed under my Phone app were all screwed up.  In some cases, there were duplicate entries or there were entries of people I no longer wanted.  When I logged into my Gmail, everything appeared to be fine.

    Today I finally decided to do a bit of digging.  I figured that those extra contacts had to be listed somewhere.  As I looked at my Contacts list, I noticed something interesting at the bottom; there was an option for “Other Contacts”.  When I opened this group, lo and behold, there were all the junk contacts!

    In order to fix my problem, I did the following:

    1. Select all of the junk and duplicate contacts in Other Contacts.
    2. Click the “Add to My Contacts” button at the top of the Gmail window.
    3. Click the My Contacts link.
    4. Under the More menu, choose “Find & merge duplicates…” or merge duplicates manually.
    5. Rinse and repeat.

    Once I did this I noticed that my contacts were all nice and clean!  I’m not entirely sure how those dupes got in there, but I’m sure glad they’re gone.


  3. Add the Iconic “Konami Code” to your Web Site

    So the other day I was pondering the Konami Code.  For those of you who don’t know what that is, you can learn all about it here.  The basic idea is that there is a certain sequence of key strokes (or in the case of Konami, button presses) that when pressed in the right order, produced some type of hidden feature.  So I thought that this would be a neat little feature to add to a web site via Javascript.  Sure, this has been done many times before, but this is my take on it.

    Step 1: Download the Script

    I’ve gone ahead and put the source code up on my GitHub account, available for anyone who would like to use it.  I created a public repository appropriately called “konami”.

    Step 2: Install the Script In Your Web Page

    I won’t go into the nitty gritty here (we can save that for the README.md on Github), but I will walk you through adding this script to your web page.  Adding the KonamiCode object to your web page is very easy.  All you have to do is create an instance of the object in your DOM as such:

    var kCode = new KonamiCode({
        success: function(){window.location.href = "http://www.doctorbin.com/";}

    Notice that the object takes one object as it’s parameter.  There are three total parameters of the passed in object that you can set, but the most import is “success”.  This parameter is the function that you would like to have invoked if the proper sequence of keys strokes is pressed.

    Step 3: Read the Forthcoming README.md

    Like I said above, I’m going to put all of the nitty gritty details in the README.md file located in the Github repository.  However, if you’re fairly fluent in Javascript, you should be able to read the source code without much issue.  I’ve also included a minified version if you simply want to use the script in your web site.

    Step 4: Enjoy!!

    The script is GPL which means you can use it, modify it, change it, abuse it, whatever.  If you think of a really cool modification for it, please feel free to add it to the repository.  Have fun!


  4. How to Install the Latest Version of NodeJS, NPM and Express on the Raspberry Pi

    [Quick Update: This was re-tested with 0.11.7 and failed.  0.11.3 was then re-tested and worked.  I haven’t tried all of the versions in-between but know that there maybe some that do not work.]

    So, for full disclosure, my last post on which I wrote about how to set up the Raspberry Pi was really a precursor to this one that I wanted to write all along.  There are a ton of posts/blogs/videos/chatter about how to set up NodeJS on the Raspberry Pi, but I found that a lot of them are either outdated or unnecessarily involved.  The best one I’ve found thus far and the one that I’m using for the basis of this blog, is written by Matt Rüedlinger.  So before I continue, Matt, THANK YOU THANK YOU THANK YOU THANK YOU.  You are the inspiration for this blog post.  

    Please note that this blog post assumes that you have properly set up your Raspberry Pi with the Raspbian “wheezy” image and have SSH enabled.  If you do not, please take a moment to read my earlier blog post, Super Easy Install of Raspbian “wheezy” on the Raspberry Pi Using a Mac.  With that, let’s jump right in.


    1. Create a node directory under the /opt directory.  This is where we’re going to store our version of node:
      sudo mkdir /opt/node
    2. Go to http://nodejs.org/dist/ and find the latest distro with a linux arm version.  At the time of this writing, 11.3 was available.  The file you are looking for will be named something like node-v0.11.3-linux-arm-pi.tar.gz but it will have the words “linux” and “arm” in the name.
    3. Right-click on the .gz file and copy the full path.
    4. SSH into your Raspberry Pi
    5. Use wget to pull the path you just copied:
      sudo wget http://nodejs.org/dist/v0.11.3/node-v0.11.3-linux-arm-pi.tar.gz
    6. Use tar to unstuff the .gz file you just downloaded:
      tar xvzf node-v0.11.3-linux-arm-pi.tar.gz
    7. Copy the contents of the unstuffed directory to the /opt/node directory we created earlier:
      sudo cp -r node-v0.11.3-linux-arm-pi/* /opt/node
    8. This next part is where Matt and I deviate.  I’m a fan of making things easy.  Had we been installing NodeJS on a desktop or laptop, we would be able to use node from the command line simply by typing “node [COMMAND]”.  This was how I set that up.  We’re going to create a symbolic link to both node and npm and put those links in /usr/local/bin:
      sudo ln -s /opt/node/bin/node /usr/local/bin/node
      sudo ln -s /opt/node/bin/npm /usr/local/bin/npm
    9. Now restart the .bashrc as follows:
      source ~/.bashrc
    10. Now that .bashrc has been restarted, let’s verify that not only did our symbolic link work, but we have node and npm properly installed.  First type node -v to see the installed version of node and then type npm -v to see the installed version of npm.  You should see something like the following:
      pi@raspberrypi ~ $ node -v
      pi@raspberrypi ~ $ npm -v


    Please note that this next section is completely optional.  However, if you’re new to NodeJS or you simply enjoy using Express as a framework, stay tuned for more!

    1. To install Express, simply enter the following on the command line:
      sudo npm install -g express
      You may see some warnings, that’s OK for now. If you want to dig in further, you can review them and fix them at your leisure.
    2. With Express properly installed, it’s now time to create our working directory.  However, we’re going to let Express do that for us.  The working directory that we’re going to create will be /var/www though depending upon your setup, the directory www may or may not exist yet.  For the purposes of this tutorial, we are assuming it does not yet exist.  Simply type the following into the command line:
      cd /var
      sudo express -e www
    3. There are several flags you can set and depending upon what you prefer, many combinations.  To see all of them, type express —help in the command line.  You should see something like the following:
        Usage: express [options]
          -h, --help          output usage information
          -V, --version      output the version number
          -s, --sessions     add session support
          -e, --ejs           add ejs engine support (defaults to jade)
          -J, --jshtml       add jshtml engine support (defaults to jade)
          -H, --hogan       add hogan.js engine support
          -c, --css           add stylesheet  support (less|stylus) (defaults to plain css)
          -f, --force         force on non-empty directory
    4. Once Express successfully creates the necessary directory structure, the last step before we turn the sucker on is to jump into the www directory and let npm add the finishing touches.  We do this as so (please note that I’ve chosen to add sudo to the command which deviates from what Express shows.  Without sudo permissions, npm will not be able to install all the dependencies properly:
      cd www && sudo npm install
      Again, you should see some warnings which you are welcome to go back and correct but they will not impact this process.
    5. Once npm is done, it’s finally time to flip the switch and see if we made Frankenstein or a flub:
      node app.js
      If all goes well, you should see the following message:
      Express server listening on port 3000
    6. Go out to your Raspberry Pi’s ip address at port 3000 and if you created Frankenstein, you should see something like this:image

    Congratulations!  You have successfully installed NodeJS, NPM and Express on the Raspberry Pi!  There’s only a few last steps:

    1. Walk in to a room where your parents/wife/sister/brother/uncle/nephew is seating
    2. Ball your hands into fists
    3. Raise your arms slowly above your head and shout the following victoriously:

      IT… IS…ALIVE!!!!!


    As I mentioned earlier, Matt Rüedlinger and his awesome blog are the true inspiration for my own take on the process.  Please take a moment to visit Matt’s blog, read his posts and comment.  The dude is seriously smart (and his name isn’t that bad either):

    Matt’s Blog: http://blog.rueedlinger.ch/


  5. Super Easy Install of Raspbian “wheezy” on the Raspberry Pi Using a Mac

    There’s a lot of tutorials out there on setting up the Raspberry Pi with the latest version of Raspbian “wheezy”, some more difficult than others.  I thought it might be helpful if I walked through my setup process which combines a number of tips and tricks I’ve learned from others.  If this helps you, please take a moment to visit the original authors of the tips and tricks who helped me out (their links are below).  Ok, so let’s dive right in.


    1. A Raspberry Pi: Either Rev A or Rev B will work but for this tutorial, I’m using a a Rev B
    2. An 8gb or greater Class 10 SD Card: Any brand will work but I strongly suggest you consider the Class 10 over the Class 4 for speed.  Also, while an 8gb will probably do the trick, for a few more bucks I suggest the 16gb.
    3. A Wired Keyboard/Mouse
    4. An HDMI Cable: Monoprice has these guys super cheap and frankly, they’re very useful to have around.
    5. A Micro USB Power Adapter: The Raspberry Pi most likely will not power off your laptop.
    6. An Ethernet Cable


    1. Stick the SD Card in your Mac
    2. Open  Applications > Utilities > Disk Utility
    3. Select the SD Card
    4.  Choose Erase and set the format to ExFAT.
    5. Format the SD Card


    1. Download the latest Raspian “wheezy” image here.
    2. Open Applications > Utilities > Terminal
    3. Determine which Volume is the SD Card: This is accomplished by using the df command (“Display Free space”) and using the -h argument (“Human readable”):
      df -h
      As you can see in the example below, my SD Card is listed as /dev/disk3s1:


    4. Unmount the SD Card: This is done using the diskutil command (DISK UTILity) and providing the unmount paramater as well as the full location of the SD Card.  For the above example this would be:
      diskutil unmount /dev/disk3s1
    5. Copy the IMG File to the SD Card: This is done by using the dd command (while the real meaning appears to be “Data Description,” I tend to like to use “Duplicate Data” because it’s easier for me to remember):
      sudo dd bs=1m if=/path/to/img/file of=/dev/rdisk3
      There’s a few things to note here.  First, notice that we’re invoking the use of the super user via sudo.  This is required unless you’re already logged in as root.  Secondly, we have three parameters which I’ve outlined below:
      • bs: This stands for “block size” and you’ll notice we’re setting this to “1M” or 1 megabyte.  This means we’re going to duplicate the data in 1 megabyte chunks.
      • if: This stands for “input file” and should be the path to the IMG file you downloaded.
      • of: This stands for “output file” and should be the path to your SD Card.  One very important thing to note is how the SD Card is now being referenced (“/dev/rdisk3” in the example above).  The partition number has been dropped and a lowercase “r” has been placed in front of the word “disk”.
      This last portion will take some time so I suggest you get up and stretch, watch some videos or go play Minecraft.


    1. Insert the SD Card into the Raspberry Pi
    2. Plug in the Keyboard, Mouse, Ethernet and HDMI Cables
    3. Plug in the Micro USB Power Adapter

    Yay!  You should see your Raspberry Pi come roaring to life!  While this next part can arguably be done without the keyboard, mouse and monitor, I would like to remind the reading audience I didn’t name this post “Mildly Advanced Install…”.  I like to use the keyboard, mouse and monitor because it’s quick, easy and you are going to be unplugging them in a few steps anyways so patience is key here.  The first thing you’ll see is the Raspberry Pi boot up into the configuration menu, known as raspi-config:


    I could spend entire blog posts on each of these settings but to make this nice and short, here are my suggestions:

    • Expand Filesystem: YES
    • Enable Boot to Desktop: If you want to have the option of using the Raspberry Pi as a desktop computer, then you might want this enabled.  Otherwise, leave it as is.
    • Advanced Options > Memory Split: If you’re not going to boot into the desktop, reduce this to 16.  Otherwise leave it as is.
    • Advanced Options > SSH: Enable
    • Advanced Options > Update: You can do it now or later; I suggest now.

    When you’re done making changes, choose <Finish>.  Depending upon the changes you requested, you may or may not be asked to reboot.  I suggest you manually reboot anyways:

    sudo reboot

    At this point you can safely unplug the keyboard, mouse and monitor (see, that wasn’t so bad!) since you can now SSH from your Mac.


    I want to take a moment to thank all of the folks whose ideas I used in this tutorial.  I could not have written this without their help (even if they don’t know it).  If this even remotely helped you, please take a moment to visit their sites, videos, blogs, etc. and give them the attention they deserve:

    Version3Tech “Tutorials: Raspberry PI SD card setup using a Mac”: http://www.youtube.com/watch?v=jxAcvEsPkd8

    HubCityLabs “Unlocking your new Raspberry PI’s 512MB of Memory!”:


  6. My First Week with a Republic Wireless Phone

    So I’m rounding out week one with a Republic Wireless phone.  For the most part, it’s been a very positive experience.  There are a few things I’d like to point out:

    • If you choose to go with the Motorola Defy XT (your only choice at the moment) get at least an 8gb micro sd card to replace the 4gb one the phone comes with.
    • You’ll want to install most of your apps on the micro sd card as the phone won’t be able to hold much of anything.
    • All of the apps I tested the phone with worked well including Ingress, Bejeweled, 1Password, Evernote, VEVO, Slacker Radio, Waze, Beejive, Facebook and Google+ (obviously).
    • Cellular calls worked great and without issue.  Callers reported clarity was more than acceptable.
    • My bluetooth headset attached without issue.
    • The phone jumped between Wifi and Cellular very quickly and did not take an extraordinary amount of time to reconnect as I went through tunnels on the BART.


    There are some concerns with WiFi calling.  I’m trying to debug the issue properly so I know what actions to take.  That being said, I’ve mentioned the issue in the forums and Republic Wireless is currently still BETA so they are working the kinks out.  Some of the commenters have said it completely destroys the call, while others say it’s just an annoyance.  My personal experiences have been that the caller cannot hear me at all or have reported the call quality to be “very broken”.  As per a suggestion, the router I’m using was upgraded and I’ll have to retest and repost.  FWIW, I did notice today that when I got closer to my home, the phone jumped to the WiFi network and quality did not diminish.


    Having officially tested two networks by leaving myself messages, I can say that all calls appeared to be clear.  The two calls that I made through the Airport Wireless network with Comcast as the ISP were a bit worse off but not terrible.  The next step will be to test these calls with another individual(s), preferably on each of the major networks and see what their opinion is of the call quality.


  7. Mailbox for iOS Review and Why You CAN Achieve Inbox Zero On Your Own

    And So It Begins…

    Earlier this year, a new app was announced called Mailbox which seemed to take on instant fame, virtually overnight.  Among it’s many claims was the easy ability to help you achieve that zen-like state of Inbox Zero.  If you are not familiar with Inbox Zero (or for that matter Merlin Mann), I can sum it up very briefly.  To paraphrase Merlin, “email is just a medium, so process to zero.”  I submit to you that while this app is nice, you do NOT need it to achieve Inbox Zero.  In fact, one link will be all you need!

    Read More


  8. UPDATE: So I eventually did to the front of the line.  Exited I booted up the app and was instantly dismayed when I ran into this issue.  It seems a number of people have had this same issue, and for some, the fix was easy.  For others like myself, I emailed support and I’m waiting… again.

    UPDATE 2: Some app, not sure which one, created four custom labels in my Gmail with names liked “Draft” and “Trash”.  Those were causing conflicts even though they were set with IMAP on.  I deleted those and got right in.  Review coming soon…


  9. I am gearing up to write a complete review on the Mailbox iPhone app and why you don’t need it if you’re only goal is to achieve Inbox Zero.  Unfortunately, as you can see, I still have a bit more waiting to go. :(


  10. The arguments.callee Debate

    OK, I’ll admit I can sometimes be “late to the game” on some things.  Specifically, I realize that the whole arguments.callee/singleton design pattern/deprecation in Javascript debate is about two years old.  However, I think this is one of those things that generally is worth mentioning (and consequently giving more fuel  and attention to).

    As many of you know, I started a new gig at VEVO this past June as a web developer.  In other words, I’m moving away from Actionscript and more towards Javascript.  Don’t get me wrong; I’m still true to my AS3/PHP/OOP roots but JS is where it’s at right now so I needed to make a change.  One of the things I needed to figure out first is how to convert my design patterns over to JS, specifically the infamous Singleton.  Given the fact that JS is a loosely typed language, this wasn’t going to be easy.

    After much research, I created the following example:

    function SingletonClass(nme,clr){
    	if (arguments.callee.instance){return arguments.callee.instance;}
    	arguments.callee.instance = this;
    	this.name = nme;
    	this.color = clr;
    SingletonClass.prototype.setColor = function(clr){
    	this.color = clr;
    SingletonClass.prototype.setName = function(nme){
    	this.name = nme;
    var singleton1 = new SingletonClass('firstSingleton','black');
    console.log('(singleton1): My name is ' + singleton1.name + ' and my color is ' + singleton1.color + '.');
    var singleton2 = new SingletonClass('secondSingleton','green');
    console.log('(singleton2): My name is ' + singleton2.name + ' and my color is ' + singleton2.color + '.');
    console.log('(singleton1): My name is ' + singleton1.name + ' and my color is ' + singleton1.color + '.');

    This works beautifully, with one small exception; arguments.callee has been deprecated.  If you’re like me, you’re immediately thinking, “WHAT?????” right about now.  After a bit of research, I found the following but reports:

    However, this doesn’t solve the problem.  The fact is, currently this is deprecated so if you want to create a true Singleton, a bit of adjustment is necessary.  Given that, I came up with the following:

    var SingletonInstance;
    function SingletonClass(nme,clr){
    	if(SingletonInstance){return SingletonInstance;}
    	SingletonInstance = this;
    	this.name = nme;
    	this.color = clr;
    SingletonClass.prototype.setColor = function(clr){
    	this.color = clr;
    SingletonClass.prototype.setName = function(nme){
    	this.name = nme;
    var singleton1 = new SingletonClass('firstSingleton','black');
    console.log('(singleton1): My name is ' + singleton1.name + ' and my color is ' + singleton1.color + '.');
    var singleton2 = new SingletonClass('secondSingleton','green');
    console.log('(singleton2): My name is ' + singleton2.name + ' and my color is ' + singleton2.color + '.');
    console.log('(singleton1): My name is ' + singleton1.name + ' and my color is ' + singleton1.color + '.');

    Yes, this is not necessarily the same thing but if you run it, you’ll see that it does indeed accomplish the same goal.  I wanted to share this so that others who are looking for a Javascript Singleton pattern “starter kit” can hopefully use my work as a launch pad.