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;