Sometimes it’s necessary, or nice, to be able to directly embed an image in code. Like a modern form of ASCII art, you then don’t have to distribute icons and images with your source, because the image is in the source itself. The method uses Base64 encoding. See the RFC for Data URI.

“Base64″ format used by MIME-encoded documents such as electronic mail messages with embedded images and audio files.

To convert a PNG (for example) image to Base64, you will need some utility. base64 is an open-source converter that does just this.

Do the configure, compile jig:

$ ./configure
$ make
$ sudo make install

Then encode your image:

base64 -e my_image.png my_image.png.base64


Open the my_image.png.base64 file in a text editor and then copy it into your code. An example is shown below, written in Javascript.

const png_image_src = 'data:image/png;base64,'+
'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAANbY1E9YMgAAABl0' +
'RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGAUExURcDYv1C8WdPrtIDAeWqk' +
'Oqnd2VLWaOX0x7ftwZzZlIjGxr7gxanLkdfu1FumybHSsJ3Cutbyx4S9fm2paMrq0Lfo1L/a' +
'o6PHiozL11aZJpnW2oG0ZLTcm5zjvovbvM3qtcror2q5vUaIRHLGZWWkR0aQGSR/BYy5baHY' +
'imrbd/z+/HO9bPb69m29xHy8c2OeMUGJPZDThZPPi3ivdGazzZbBgCuCEd3x2jaICs7ksqLZ' +
'mTp/N6zwtWu/YLDWvZHHeqLS0affzKfvsWDYpn7CvJHJh0+cSGWbY6PQka/Xkvj894W2a4DQ' +
'qIrDhF+hQ8fexJDN24PYgYGzWnXJy6zXpp3Fm5jCg37NdI++dWejWmCwVnSrT6nuyTuLELvh' +
'pV2gO6DSwI3qnd3wv6rQxK/fz1OZxrTvtaLim3rRr+bv5TuCN+jw557FiK7NlWzRkHDGhHLd' +
'fnHWmm2zx7Xe1m21zW65z9Ts0HTHaHrGb3vJb3yvVbTaxVGUTITLtV6w0////94DUpYAAACA' +
'dFJOU///////////////////////////////////////////////////////////////////' +
'////////////////////////////////////////////////////////////////////////' +
'//////////////////////////////8AOAVLZwAAAQxJREFUeNpiqAcCc87wcuVKTl4Qm6G+' +
'XstKOU6eu9ouxNbICySgZajBzluWUuzgkOyqpwMUsNJIEuQVYWUNkOCysxeqZzBXZk+z4RCV' +
'kiopquVUcPNn4JSRd4oRkZAwUSwsKPAQN2YIZ0pPFBUpNQnWZGNj0xOrYShPCtSUdeTTlXNm' +
'0WcUtjRgUE4Kz5Plq0vVzWAJkoy0zGKokDeU4+JjYWHRr+KJVhVTYjDylMn34WPJzeXhiRBX' +
'sXBnKIti0tZW1M9VV/eWlg6LV2Oo943wZHaR5BEXz/EOUzHTYajXEfZWSJBUVY2NN1UxywR5' +
'TsfYIFRAQIDfws8sG+xbICGsZG2tpKamBWQDBBgAU049f2kd9aAAAAAASUVORK5CYII=';

var my_link = document.createElement('a');
my_link.title = "Go to example.com"
my_image = document.createElement('img');
my_image.src = png_image_src;
route_image.border = 0;
my_link.href  = "http://example.com";
my_link.appendChild(my_image);

document.body.insertBefore(my_link, document.body.lastChild);

You find the need to determine the locations of your visitors, and you wonder how to do this? Surely it’s impossible. Alas, it is not. Services like HostIP provide the ability to locate your users given their IP address. The slick way to do this is via javascript. Unfortunately, the HostIP API doesn’t provide a JSON interface.

But of course, the response is in XML, so you’re also wondering how to parse this XML response for something meaningful? The answer is the DOMParser and namespaces. There is a really nice function, getElementsByTagNameNS that allows you to parse out elements given a namespace. I kept trying getElementsByTagNameNS("gml","name"), which didn’t work. The answer seems to be that you need to include a valid uri for the namespace.

var dom = new DOMParser ( ) .parseFromString ( responseText,
                            "application/xml" ) ;

var location = dom.getElementsByTagNameNS (
   "http://www.opengis.net/gml", "name" ) [1].firstChild.data
    if location == " ( Unknown city ) "
        return "";

When developing a website using Ajax, Javascript, and DOM manipulation, debugging is often relegated to just hitting Refresh to see if it worked. Your node doesn’t update, something times out, and you’re not sure what caused it. Putting in alert() everywhere has gotten you tired of hitting enter a hundred times on every page refresh.

Enter some really nice web application development tools. Most of these use Firefox, and modify the user-centric application into a developer’s tool.

The Web Developer Firefox Extension is probably the most well known/common. It adds a toolbar that allows you to quickly and easily inspect a webpage’s layout, disable cookies, view source, modify the css on the fly, or do browser teting. It’s indispensable for developing your own site’s layout as well as understanding how other site layouts are handled.

Firefox comes with the DOM Inspector, which is a separate window you can pull up to select and inspect DOM elements of a page, traverse the tree, and dynamically change node attributes and values. This is nice if you want to check out what the class or ID is of a page element, especially with dynamically added elements (i.e. via Javascript) where they aren’t visible in the page’s source.

For checking CSS errors, Javascript errors, and POST/GET requests returned to your browser, check out Firebug (via Behind the Times). It sits in the bottom menu-bar of Firefox and shows a counter of errors on a per-page basis (rather than the Javascript Debugger which is built into Firefox, which shows all errors received to the entire Firefox application, not just the current page). Firebug is very useful for watching incoming Ajax requests. Just be careful, this can eat up a lot of memory when left active on sites with lots of errors (e.g. GMail, which typically runs up in the thousands of errors very quickly)

Even heavier application development and debugging may lead you to the Venkman Javascript Debugger. It is a full Javascript development and debugging environment where you can pull up all of the javascript files, view variables, set breakpoints, run an interactive console, etc. It’s pretty big and complex, so you probably want to check out tutorials like Learning Venkman.

The last tool is not Firefox specific, but is a special build of Apple’s Safari and KHTML engine which provides a very nice DOM inspector: Safari/Webkit Web Inspector.

Happy debugging!

Here is a tutorial on how to use javascript to change a site’s favicon (via Ajaxian).

The favicon shows up in your bookmarks, in the address bar, and on the tabs of loaded pages in a tabbable-browser. Being able to dynamically switch the favicon on a page promotes the favicon to the ability to be used as a “Status Monitor” of a webpage. For example, I am uploading a bunch of files to a website, the favicon can show an “uploading” icon, and then a green “complete” icon when it’s done. I can then return to the page to carry on whatever I was doing now that the upload is complete.

Or perhaps I have a webpage open to my weblog stats, or server statistics. The color of the icon can be updated to alert me to notifications and messages. A news site could change the icon when there is a new and pertinent story that I may want to read.

Personally, when I think Yahoo! I think “Bubble-Yum Bubble Gum”. It’s good in an AOL kind of way. A useful portal for general populace, but it’s always too icky, overloaded, and feature-poor for my tastes. This is in-spite of the fact that the president and CEO is a fellow Alum.

However, Yahoo! has really suprised me and released some very cool developer resources.

• Design Patterns - numerous UI concepts, descriptions, and implementations for various application tasks
• User Interface Library - collection of JS, DHTML, site elements for websites
• Yahoo! User Interface Blog (rss)
• Browser grading chart for following standards

- via vanderwal.net