atom thoughts

If you need to force images to fit within your web page layout you really only have two options:

• Resize images on the server.
• Resize images on the client.

Resize images on the server

If you have the resources, resizing on the server is probably the best solution depending on your requirements. This solution requires server-side software to manipulate the images and store the altered image for future reference. For Ruby, the RMagick library does an excellent job with this. However, manipulating images on the server is a very expensive operation. If you are on a shared server, like I am, this may not be an option for you. But don’t worry, there is an alternative below.

Resize images on the client

The other option for resizing images involves using Javascript on the client-side to resize them on the fly. This solution has two drawbacks:

• It requires Javascript.
• It requires downloading the full image, whereas the server-side resizing will result in much smaller image sizes.

If these two drawbacks are ok with you, then read on :)

To resize the images, you need to first create a javascript function to do the resizing. Feel free to use this one that I wrote:

function resize(which, max) {
  var elem = document.getElementById(which);
  if (elem == undefined || elem == null) return false;
  if (max == undefined) max = 100;
  if (elem.width > elem.height) {
    if (elem.width > max) elem.width = max;
  } else {
    if (elem.height > max) elem.height = max;
  }
}

This function has been tested successfully against IE 6 and Firefox 1.5 (if you can verify this against others, please let me know and I will update this list). One thing worth mentioning is that only the longest side of the image needs to be resized to fit your maximum size. The aspect ratio will still be maintained by the web browser.

The resize function expects an image id and an optional maximum size. For this to work properly, the resizing must only occur after the image was loaded. This can be enforced by using the onload attribute of the image tag.

So, in pure HTML, this could be called like so:

<img id="some_image" onload="resize('some_image')" src="some_image.jpg" />

And in Ruby on Rails, this would look like:

<%= image_tag('some_image.jpg', {:id => “some_image”, :onload => “resize(’some_image’)”}) %>

Enjoy!

I just ran across this interesting implementation of Javascript windows:

http://blogus.xilinus.com/pages/javawin

They were written using the Prototype javascript library. They are so slick looking I am tempted to find a use for them in one of my side projects real soon.

Bookmarklets allow you to add some advanced functionality into a web browser bookmark using just standard Javascript. Many sites, such as del.icio.us are using them to allow users to post information about pages they are viewing back to the site. The Gift Hat Bookmarklet does the same sort of thing by allowing users to post back gifts to their Gift Hat while they are browsing the web.

Today, I am going to walk you through the technique of creating a bookmarklet so you can provide this great functionality to your users.

There are really two parts to a well-designed bookmarklet:

1. The bookmark
2. The bookmarklet.

The bookmark

The bookmark is the part that the user will actually add as either their favorite or bookmark within their browser. The only purpose of this piece is to dynamically load the bookmarklet into the currently viewed webpage. So let’s dive right into the code:

var x = document.getElementsByTagName('head').item(0);
var o = document.createElement('script');
if (typeof o != 'object') o = document.standardCreateElement('script');
o.setAttribute('src', 'http://gifthat.com/javascripts/bookmarklet.js');
o.setAttribute('type','text/javascript');
x.appendChild(o);

This code will basically just insert a new javascript tag into the header of the current page and set the src of that javascript to the bookmarklet.js we specified. You will of course want to replace the http://gifthat.com/javascripts/bookmarklet.js with a link to your bookmarklet.

To make this bookmarkable, we need to make a few more changes to the code above:

• remove all line feeds
• add javascript: to the front of it
• add void(0); to the end of it to prevent it from displaying the result of the x.appendChild(o) statement;

The end result is this (NOTE: I added newlines to make it more readable but this should all be on one line):

javascript:var x = document.getElementsByTagName('head').item(0);
var o = document.createElement('script');
if (typeof o != 'object')
  o = document.standardCreateElement('script');
o.setAttribute('src', 'http://localhost:3000/javascripts/bookmarklet.js');
o.setAttribute('type','text/javascript');
x.appendChild(o);
void(0);

Just add that line in as a bookmark in your browser and you should be all set with your bookmark.

The bookmarklet

The bookmarklet is the portion that will be dynamically inserted and executed within the page the user is currently browsing. By keeping this code in a remote javascript file, you have the added benefit of easily upgrading all of your users to whatever bookmarklet changes you make in the future. You could in theory skip this step and just stick everything in the bookmark, but that would not be nearly as flexible.

To create your bookmarklet, you just need to create a javascript file somewhere on a publicly viewable webserver. I put mine in http://gifthat.com/javascripts/bookmarklet.js (Note: this will be up once I release the next version of the Gift Hat).

Then you can just put your Javascript code into your bookmarklet and it will be executed as if it were always a part of the page the user is browsing. One of the more common types of bookmarklets are as follows:

location.href='http://gifthat.com/gift/post?url=' +
encodeURIComponent(location.href) + '&name=' + encodeURIComponent(document.title)

This will redirect the browser to a page and pass along the current webpage’s URL and title.

There are almost limitless possibilities of what you can do in a bookmarklet.

Happy Bookmarkleting!

References: Much of the bookmarklet code was adapted from this post

I am just putting on the finishing touches of the next generation of the GiftHat.com. Thanks to a lot of good feedback this new version of the Gift Hat will include some great new features. Here is a quick list of the most notable ones:

• Support for username-based urls in the form of:
  http://gifthat.com/<your username>
• Group support so you can keep your friends and family conveniently linked to your Gift Hat page. This includes pretty group urls in the form of:
  http://gifthat.com/group/<your groupname>
• Simplified data entry. All forms within the Gift Hat only require the bare minimum to get the job done. For instance, to add a Gift to your Gift Hat all you need is a name for the gift.
• Improved tagging support.
• An all new look and feel, including a new Hat logo and new icons. Here is a sneak peak:

I just started using FeedBurner to keep track of how many people are subscribed to my blog feeds.

To be honest, I was expecting to only see myself and one or two others, but I am happy to say that there are currently 7 of you and counting! I know, not earth shaking numbers but more than I was expecting considering I am just starting out. Thanks for tuning in.

Before FeedBurner, I really didn’t have any visibility into who was reading this. So, if you are in that boat and want some visibility into your readers, I recommend checking it out.

I have tried my best to avoid needing to have a custom IE css file. This has involved many painful hours over the past few years of finding creative ways to write my HTML and CSS in just the right way to ensure that every browser is happy.

However, I have finally thrown in the towel on one particular annoyance I am having where my tabs are 1-2 pixels off in IE on a new layout I am working on for the GiftHat.

Thankfully, a post on the IE blog pointed me towards a method that doesn’t involve hacking the CSS in ways that are guaranteed to break in future IE versions. You can just add a simple line into your HTML file like so:

<!--[if IE]>
  <link href="ie-fix.css" media="all" rel="Stylesheet" type="text/css" />
  <![endif]-->

Then only IE will include this CSS file.

For futher reading, I also found this great article on the subject:
http://www.positioniseverything.net/articles/ie7-dehacker.html

Thankfully, I don’t usually have to play with different fonts too often. But whenever I do, I always fall back on this very useful and free font viewing tool for Windows called AMP Font Viewer. Check it out.

I just ran across this great visual diagram of the prototype javascript library:

http://www.snook.ca/archives/prototype.png

It was put together by Jonathan Snook and is a great cheat sheet if you are working with the prototype library.

There are a ton of great plugins for Firefox that make Web development a whole lot better. I really don’t know how I managed without them.

My most recent addition is called FireBug, which provides a number of great features including:

• Javascript and CSS error notification.
• Inspection tools for HTML, the DOM, CSS and events.
• A Javascript command line.
• XmlHttpRequest spying (which is great for AJAX debugging).

Some of my other favorite Firefox web development extensions include:

• Web Developer – This should be in every web developer’s tool box. It provides a ton of different utilities for doing things such as disabling cookies and javascript, informational tools such as highlighting elements within your page, tools for validating your HTML and CSS, and way too much more to list.

• DevBoi – A one stop shop for all of your reference documentation needs. It includes the docs for HTML, CSS, DOM, Javascript and also has add on packs for Ruby On Rails, PHP and XUL. Be sure to install the offline version if you want to be able to access these without internet access.

• IETab – This is a great tool for viewing your page in IE from within Firefox. It will open the page in a new tab that is rendered using the IE engine. Pretty slick.

If you have any that you think I missed, I would love to hear about them.

I just recently ran across another nice thing you can do with Ruby on Rails that I thought others may find useful. I have developed a few different Rails apps and in several cases, I have found that I really needed a way to perform some process in the background outside of the web server. This could serve a variety of purposes, such as for slicing and dicing your data into reports or performing some resource intensive tasks.

Ruby On Rails provides a simple way to take advantage of your existing Rails code from the command line. For this example, let’s say we want to create a script called do_something_magical. So, we can just create a file in the scripts directory of our Rails app and call it do_something_magical.rb. Then, at the top of this script, just add this one line to make your script run within the Ruby On Rails environment:

require File.join(File.dirname(__FILE__), '../config/environment')

Now this script will be able to access all of your other Rails code. For instance, to include your secret_ingredients model, you can just require it like so:

require 'secret_ingredients'

Likewise, if you have a magic_maker dependency in your lib directory you can include it as follows:

require_dependency 'magic_maker'

I found this to be a great time saver when I need to do some heavy lifting with my existing Ruby On Rails code.