Converting to the EM Camp

During my perilous adventures in responsive development, I spend way too much time tweaking percent values for various elements so they fit nicely on a particular device screen. I've found that setting everything to use a percent value can cause the interface to look nice on one device but blow up on another. So, I started reading up on using another type of measurement for device sizes - the EM.

1 em is equal to the font-size of the targeted element. 16px is the default if no font-size is specific in the document. Using ems instead of percents in upper levels of the document tree has helped my interfaces look more consistent between devices.

Here's a good article on using the em measurement:
http://www.impressivewebs.com/understanding-em-units-css/

Invisible Bullet Points Problem

I had an unordered list that had pesky bullets that would not display. The list was set to "display: block;" so why wasn't it showing up within its parent element? I tried fiddling with the "display" CSS setting of the ul element and its list items but no luck. I started searching for CSS attributes specific to li elements and found the list-style-position CSS attribute.

When I set this attribute to list-style-position: inside, the bullet points showed up nicely within the document. Setting "inside" ensures that the list items flow within the parent element, so no bullet points are hidden.

Here is a reference to this attribute from MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

Avoid Stubborn Image Caching in Javascript

Recently I had to solve an issue a client was having where an image I had replaced in an app was still showing up in place of the new one. The image was pulled in via Javascript and the iPad browser was stubbornly caching it. I found a neat little trick that works around the caching issue:

If you add a randomized parameter to the image path, the server that holds the image will check for a new one each time. In this case, I used a time stamp.

1. Generate a timestamp: var stamp = new Date().getTime();
2. Include the timestamp with the img path: "image.png?time=" + stamp;

Dual Booting with Windows 7 and Fedora 17

This is for anyone who has a Windows 7 machine and is interested in setting it up to dual boot Fedora 17. It is my hope that reading this will save you the four nights of head-scratching that I went through as a newbie to the process. 

1. Get yourself a Live CD of Fedora. You can download it here. Once you have the image downloaded, burn it to a CD using software like ImgBurn.
2. Get a Live CD of a partitioning program like Partition Wizard.
3. Download and install EasyBCD.
4. Put in the Live CD of the partitioning program and reboot your machine.
5. Once the CD boots, you should be presented with an interface that shows you how your hard disks are partitioned - how they are split up into multiple drives like C: and D: for Windows. 
6. You should be able to shrink partitions to create Unallocated Space. Be careful to leave enough room for Windows though.
7. If the Unallocated Space is a primary partition, convert it to a logical partition. Now you should be able to create new partitions with this space. If not, then you may need to convert an adjacent partition to a logical partition as well. 
8. Out of the Unallocated Space, create the following partitions:
1. /boot - 250 MB
2. swap - Read this for recommended size.
3. / - Remaining space
9. After applying the changes, reboot your PC with the Fedora Live CD.
10. Once the Live CD version of Fedora boots, you should be able to select "Install to Hard Disk" from the desktop. The only tricky part to the installation process is setting the partitions you created to the proper types. You will need to set the boot partition to "/boot", the swap partition to "swap", and the other partition to "/" which is root. 
11. Once the installation process is done, boot into Windows and run EasyBCD.
12. In EasyBCD, go to "Add/Remove Entries", choose the "Linux" tab from the bottom-half of the EasyBCD screen, and then choose the partition that you installed Fedora to earlier from the drop-down menu, then press "Add Entry" to save the changes. You should be able to set the boot preference and boot screen wait time with this tool.
13. Reboot! You should see a screen allowing you to choose between Windows 7 and Fedora. Now you can boot between the two!

Brain Hacking with Caffeine

A few weeks ago I went to a meetup for coders and someone there said that caffeine actually programs your brain. Curious to know what he meant, I did some refreshing on my brain knowledge and came up with the following suggestion:

In your brain is are chemicals called neurotransmitters. These are transferred between the cells (called neurons) of your brain to communicate messages. There are two key neurotransmitters that caffeine affects. The first of these is called dopamine. Dopamine is released into your brain to communicate the feeling of pleasure and it is needed for motor functions. Essentially, it reinforces us to continue doing whatever we are doing. When dopamine is released, it floats around in the space between neurons (called synapses) until it locks into dopamine receptors of neurons. When this chemical latches to a receptor, we get a nice happy feeling.

Illustration of a synapse between neurons.

When all of the dopamine receptors have been filled, enzymes are released to clean up the remaining dopamine that's floating around. After all, a healthy brain is a tidy one! Caffeine slows down this process so the extra dopamine hangs around longer. During that extra time the dopamine floats around, you feel more uplifted. However, when there is too much dopamine hanging about, you end up with uncontrollable movements which could explain the jittering people do when they're high on caffeine. Since dopamine levels control muscle movement, higher dopamine can also lead to a higher pulse.

The other neurotransmitter affected by caffeine is adenosine. This neat little brain chemical is responsible for helping us sleep. When adeonsine is released into the brain, it binds to adenosine receptors, much like dopamine. When this neurotransmitter finds a neuron slot to bind to, it makes us feel drowsy by slowing that neuron's activity. It just so happens that caffeine looks like adenosine to the brain, so it takes adenosine's seat in the neuron by binding to its receptor instead. Caffeine doesn't slow down the neuron so the effects of the sleep-inducing adenosine are staved off - if only temporarily.

So you can see where one might get the idea that caffeine programs your brain. Personally, I'd call it hacking.

Integer Intrigue

Today I ran into a problem when trying to run an SQL insertion query into a table that had columns like the following:

database.customer:

cu_id: int(11)
cu_otherID: int(11)
cu_name: varchar(255)
...

Some insertions would work and others did not even though the data was coming from the same source. I managed to narrow the problem down to the cu_otherID field. I noticed that in a successful query, the value was inserted as-is (for example, the value 1005423522) but in an unsuccessful query the value inserted was not the same as the value from the source data (for example, the value 5442231112). For some reason, the cu_otherID for the unsuccessful queries was always 2147483647.

You see, the thing about integers is that they take up space in memory; 32 bits in this case. The first bit is known as the sign bit, which determines if the value is positive or negative. When the sign bit comes into play, the integer is known as a signed integer and has a maximum value of 2147483647. When the sign bit is not used, the integer is called an unsigned integer and the maximum value of a 32 bit unsigned integer is 4294967295.

Here's an illustration of a 32-bit integer in memory:

Image Source

So, back to the issue. It's obvious now that the insertion is putting in the maximum int value for the cu_otherID because the value from the source data is above the max. Making the int unsigned would give a higher threshold, but it still doesn't cut it for many of the values. In this case, I defaulted to changing the cu_otherID field into varchar like so:

ALTER TABLE customer MODIFY cu_otherID varchar(255);

Now the values in the cu_otherID column can be strings of up to 255 characters. No worries about limits there!

Untrusted Time

You've no doubt come across a page like the one above. I did when I recently plugged my desktop back in to get it running for my wife. Normally, I'm able to jump around the web in Firefox as soon as the desktop picks up on an internet connection. However, no matter where I went, this page popped up. I checked Windows Firewall and didn't see the websites being blocked. I checked AVG and saw that it still had the typical settings. So what was up?

After an amount of time that's too embarrassing to note here. I decided to stop being lazy and change the system clock to the current time. To my surprise, the officer in the yellow box left me alone immediately. Who knew he just wanted to be on time?