Typically when writing a XOR check in JavaScript you would do something like…

if (( foo || bar ) && !( foo && bar )) { }

The issue with this approach is that it can be very verbose when not in psudo code or you will have to convert each expression into a boolean value prior to the check to get it as small as the above example.

In order to start working towards a better solution we first need to define our desired outcome. Wikipedia explains an exclusive or (XOR) to be a logical operation that outputs true whenever both inputs differ (one is true, the other is false).

So with the truth table above we can now check out alternative approaches. As it turns out the quirkyness of JavaScript can actually help us clean this up. Because using the NOT (!) operator on a string will typecast it to false we can actually reduce the above if check to…

if (!foo != !bar) { }

So lets create an output table for this new technique to see if it works as expected.

Works great and with a lot less keystrokes!

Thanks for reading! If you have any questions or comments please feel free to comment below or mention me on twitter @fromanegg.

When making a carousel it’s a common practice to not only include navigational arrows outside of the carousel but to also allow the user to click on the left and right side of the photo to navigate forward or backwards. This is typically accomplished by placing two absolutely positioned elements on top of the photo and listen for clicks on those elements to control navigation.

This is going to work as intended until you try it in IE. This is because transparent links aren’t clickable in Internet Explorer < 10 requiring us to resort to yet another IE workaround.

Note - this will work properly in all versions of IE if you’re changing the browser mode in the IE10 developer tools. I strongly suggest not testing for older versions of IE using the ‘Browser Mode’ setting in the IE 10 dev tools as there are more than a few things which will fail in the real browsers that don’t in the simulator.

Visit here for a demo in < IE 10 and again in any other browser to see it working.

There are a few techniques that we can use to make IE recognize the clicks on our anchor tags. The first is to add a transparent 1px background to the anchors. This is going to add another http request, albeit a small one, possibly delaying the loading of the page.

background-image: url("1px.gif") 0 0 repeat;

Second is to add one of the following fake url to a background image on the trigger elements. While these will get it working in IE it will cause chrome to throw a console warning that it ‘Failed to load resource’ or ‘Resource interpreted as Image but transferred with MIME type text/html: “about:blank”.’ neither of which are ideal.

background-image: url("iehack:///");
-or-
background-image: url("about:blank");

And finally, by setting the background color on the anchor tags and then setting the opacity to 0 we are able to get the desired functionality without any of the side effects previously mentioned.

background-color: #ffffff;
filter:alpha(opacity=0);
opacity: 0;

Update: Thanks to an idea from Geo Fili in the comment section you can also embed a 1x1px transparent image into the css.

background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

This technique works in all of the modern browsers and I was able to test it successfully back to IE7. If you have the ability to test in IE6 feel free to comment below and let us know if it works there too. And as always If you are having any issues feel free to comment below or mention me on twitter @fromanegg. Thanks for reading!

If you find yourself needing to run Linux-only-software for development of some kind but would prefer to work in the host OSX operating system for whatever reason instead of the VM then this guide is for you.

An updated version of this post can be found here: Use Ubuntu on Mac OS with Multipass

At the time of writing I am using OSX 10.7.5 and Ubuntu 12.04 [Update: Also works with OSX 10.7.5 and Ubuntu 13.04, OSX 10.10.5 and Ubuntu 14.04] inside of a Parallels 8.0 VM. But as long as the host and VM have IP’s assigned then you shouldn’t have any huge issues. To verify this, open up a terminal window in the host and VM and enter:

ifconfig

One of the network interfaces should have an address similar to 192.168.1.100 - If each machine has a different IP assigned then continue on. If not then you will first have to set your network up to assign those IP’s.

Ubuntu VM Setup

Install the NFS server.

apt-get install nfs-kernel-server

Then we are going to create a pseudo filesystem where we will share our users home directory from.

mkdir -p /export/your-user-name

We need to add these directories to the access control list for export to NFS. Open up /etc/exports in your favorite text editor and add the following:

/export    192.168.1.0/24(rw,fsid=0,insecure,no_subtree_check,all_squash,async,anonuid=1000,anongid=1000)

/export/your-user-name    192.168.1.0/24(rw,nohide,insecure,no_subtree_check,all_squash,async,anonuid=1000,anongid=1000)

To avoid having to set up authentication because we are only sharing locally you will need to set these directories to have 777 permissions.

sudo chmod -R 777 /export

Now lets link our home directory to the export directory.

mount --bind /home/your-user-name /export/your-user-name

To avoid from having to re-mount that directory every time we restart the VM open up /etc/fstab and add the following:

/home/your-user-name    /export/your-user-name    none    bind  0  0

And finally, you’ll need to export the shares and restart your nfs server

sudo exportfs -a
sudo service nfs-kernel-server restart

OSX Setup

On the OSX side things are very simple. First lets create the directory we are going to mount our remote home directory into.

sudo mkdir ~/linux-vm

And now we mount the NFS to the directory. Be sure to substitute the following IP for the one of your Ubuntu VM.

sudo mount -t nfs 192.168.1.100:/export /Users/your-user-name/linux-vm

If you get an error that reads ‘Operation not permitted’ then you can try the following.

sudo mount -t nfs -o resvport 192.168.1.100:/export /Users/your-user-name/linux-vm

And now when you enter that directory you should see the home directory of your user on your VM. I hope that these steps help get you up and running in no time.

Problems - Solutions

Stale File Handle - Try un-mounting and re-mounting the NFS.

sudo umount -f /Users/your-user-name/linux-vm
sudo mount -t nfs 192.168.1.100:/export /Users/your-user-name/linux-vm

Could not open a connection to your authentication agent - When trying to run ssh-add after sshing into your VM. You are probably missing the required environment variables to run ssh-add.

exec ssh-agent bash

If you are having any issues feel free to comment below or mention me on twitter @fromanegg Thanks for reading!

Yesterday I had an array of objects which needed to be inserted into another array at a specific index point.

// Array #1
["a", "b", "c"]

// Array #2
[1, 2, 3, 4, 5]

// Desired outcome
[1, 2, "a", "b", "c", 3, 4, 5]

But none of the native array methods allowed me to insert an array of values into an array. Splice comes close but it takes a comma delimited list of values, not an array of values. Conveniently however you can still use the native splice function using apply to achieve the desired result.

var arrayOne = ["a", "b", "c"],
    arrayTwo = [1, 2, 3, 4, 5],
    index = 2;

// We want to push the starting index and the number of values we want
// to delete (in this case 0) onto the beginning of the first array.
arrayOne.unshift(index, 0);

// Next we want to apply the native splice method to arrayOne under
// the context of arrayTwo
Array.prototype.splice.apply(arrayTwo, arrayOne);

// [1, 2, "a", "b", "c", 3, 4, 5]
console.log(arrayTwo);

Anyone who has put together a website with high-DPI displays in mind has likely used the {prefix}-device-pixel-ratio CSS media query and then specified the background images independently under each different media query. This can not only get tedious but media queries also split the display rules for a single element into multiple locations in your stylesheet. You can get away from this separation by using the SASS CSS preprocessor and the @media directive which allows you to keep your element media query rules with the element styles. Also available is the recently released css function called image-set() available under the -webkit- prefix.

background-image: -webkit-image-set(
  url(image1x.jpg) 1x,
  url(image2x.jpg) 2x
);

The image-set() CSS function tells the browser that it can choose from multiple images to display depending on the pixel-ratio. Not only will the browser download only the appropriate image but it will also properly scale it.

background-image: url(image1x.jpg);
background-image: -webkit-image-set(
  url(image1x.jpg) 1x,
  url(image2x.jpg) 2x
);

As I’m sure you can already guess, but at the time of this writing the support for this CSS function is very limited so you should use a fallback similar to the one posted above. At the time of writing this is in the CSS4 working draft and is supported in Safari 6 and Chrome 21+ but there is no doubt that the others are working towards an implementation as well.

Have you used this function? Plan to use it in your application? Let me know how it goes - comment below or mention me on twitter @fromanegg. Thanks for reading!