Smallcaps is not the same as uppercase. Even if you can simulate smallcaps using uppercase letters (similar to simulating italics or bold), fonts that employ smallcaps are specifically created to maintain proper balance and weight.

Furthermore, it’s important to use glyphs as intended with proper formatting. This is a small detail, but in the CNN example, a double-hyphen is incorrect. An emdash should be used instead and without the spaces. Many CMSes and blogging software, WordPress included, are able to convert typographic shorthand like double– and triple-hyphens and convert them to their proper glyphs. An old but timeless article: Typography Matters covers this topic. Also it wouldn’t hurt to look at print style guides such as the Chicago Manual of Style.

Also not mentioned but useful to know is to make sure that when using justified text (most everything is on the web is flush-left), that it should be used in combination with hyphenation. See wp-Typography for example.

As for the top-10 list (I disagree that Dreamweaver should be on the list), it’s important that the imagery is consistent. The Photoshop icon sticks out like a sore thumb. Also if the list is ordered, it would make sense to provide some way to indicate that it is ordered like numbers. That sets it apart from an itemized list.

I like Georgia since it is one of the better looking serif fonts among the web core fonts. However, since this is supposed to be a post about modern typography, the author should have mentioned upcoming font-embedding technology that would allow the use of much better looking fonts than Georgia.

Obtained a dynamic DNS hostname from DynDNS. Even though my IP address doesn’t change all that often, it is dynamic. Therefore, there’s no guarantee that the IP would work. This was an extra precaution I wanted to take. Plus it gave me something easier to remember.

Installed LogMeIn. I did not require any of the features you get in the pay version. This allowed me to start/stop software as needed and manage the pictures captured by the webcam. Other remote admin services would work as well. VNC is a great alternative.

Flashed my router with the Tomato firmware. The WRT54G stock firmware doesn’t let you forward the magic packet to use wake-on-LAN to turn on a computer. Tomato lets you log into the admin interface and send the packet to any MAC address on the LAN side of the network. I did this just in case the power went out and I needed to turn-on the computer again.

I tried out two different webcam servers for Windows, Broadcam and TinCam. Broadcam is much easier to setup and will automatically setup port forwarding if your router supports UPnP, but it is limited to live video. TinCam has a lot more features, but it isn’t as user-friendly and you have to manually open up a port on the router. Both have trial periods, but are fully functional during the trial period. I tried setting up a Linux webcam server, but a lack of GUI or an easy to use config file meant it was faster to use Windows. I did not test any Mac webcam servers since my MacBook was coming with me. I ultimately settled on using TinCam day-to-day because I could schedule it to record a pic every 5 minutes of every hour (e.g., 1:00, 1:05, 1:10, and so on). Furthermore, the date and time of day is used for the filename. TinCam won’t let you capture pictures and run the video server simultaneously. You can run the image server though which updates every 5 seconds. So if you need an image log and live video, neither will work for you.

With the image server, I was able to watch what was on the webcam currently. In order to see the log, I installed Dropbox. Then I configured TinCam to save the captured images in a Dropbox folder. Now I can see a picture log not just on my laptop but also on my iPhone using the Dropbox app. This was VERY convenient. Furthermore, the app overlays the filename so I can see when the pic was taken.

Finally, I installed Skype on the computer with the webcam so I could occasionally talk to the cat. I created an account specifically for this. I configured Skype to auto-answer and maximize when video is initiated. Though I think as comforting as a familiar sound is to a pet, the cat appeared both excited and confused hearing a disembodied voice.

That’s how I mashed up available hardware and software to keep an eye on my cat while I was gone.

It’s built using WordPress, but you wouldn’t know it by looking at it. This way I can add and remove samples easily. I opted to go with a (mostly) single-page site. There’s a second page for a contact form. jQuery and various plugins handle the dynamic features. I definitely prefer this over what I had before.

Feel free to check it out by clicking the Portfolio link above.

Adding a product to a Magento (ver. 1.3.1) shopping cart is accomplished through an HTTP GET request. It will look like or similar to this:

/path/to/app/checkout/cart/add?product=[id]&qty=[qty]

That URL is output by the template helper:

$this->getAddToCartUrl($_product)

Since adding a product to the shopping cart is nothing more than a GET request, then all that needs to be done is queue up the URLs of the desired products, make each request in order, and then reload the page when done.

First, in app/design/frontend/ / /template/catalog/product/list.html, I first added checkboxes to allow customers to select which products they want and also hidden fields for storing the URLs to add the product and text fields for the quantity.

<input type="checkbox" class="input-checkbox add" name="add_<?php echo $_iterator; ?>" id="add_<?php echo $_iterator; ?>" />
<input type="hidden" name="url_<?php echo $_iterator; ?>" id="url_<?php echo $_iterator; ?>" value="<?php echo $this->getAddToCartUrl($_product) ?>" />
<?php if(!$_product->isGrouped()): ?>
     <input type="text" class="input-text qty" name="qty_<?php echo $_iterator; ?>" id="qty_<?php echo $_iterator; ?>" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" />
<?php endif; ?>

I added this code within the loop that generate the HTML for the product line items for the list. Next, I added the JavaScript that does the actual processing, also within the list section right after the script block that contains: decorateList('products-list', 'none-recursive').

<script type="text/javascript">
    function processNext(urls, i) {
        var next = i + 1;
        $('processing-text').update('Processing item ' + next);
        if (next < urls.size()) {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                processNext(urls, next);
              }
            });
        } else {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                window.location.reload();
              }
            });
        }
    }

    function addItemsToCart() {
        $('add-items-to-cart').hide();
        $('waiting').show();

        var addToCartUrls = [];
        $$('input.add').each(function(e){
            if(e.checked == true) {
                var id = e.readAttribute('id').split('_')[1];
                var qty = Number($('qty_' + id).value);
                if (qty < 1) qty = 1;
                addToCartUrls.push($('url_' + id).value + 'qty/' + qty);
            }
        });

        if (addToCartUrls.size() > 0) {
            processNext(addToCartUrls, 0);
        } else {
            $('add-items-to-cart').show();
            $('waiting').hide();
            alert('Please check off the items you want to add.');
        }
    }
</script>

At the bottom of the list I added a submit button.

<div style="margin-bottom:5px; text-align:right;"><button id="add-items-to-cart" class="form-button" onclick="addItemsToCart()"><span><?php echo $this->__('Add Items to Cart') ?></span></button><div id="waiting" style="height:22px; display:none; line-height:22px;"><span id="processing-text">Processing...</span> <img src="<?php echo $this->getSkinUrl().'images/wait22trans.gif'; ?>" width="22" height="22" style="display:inline; vertical-align:middle;"/></div></div>

Clicking the button calls the function addItemsToCart(). The function hides the button to prevent a double click and unhides the status message. Next, the function determines which checkboxes are checked. For each checked checkbox, the function finds the corresponding URL field and quantity field, concatenates the two values, and stores the new URL in an array. If the length of the array is greater than 0, then the function calls processNext(), otherwise it displays an error message and resets the submit button.

The function processNext() first updates the processing message. The function takes the array of URLs and an index, and then creates an AJAX GET request using the URL at the given index in the array. If the AJAX request completes, it calls processNext() with the same array but with an incremented index while the index is less than the array length. If the incremented index is greater than the array length, then that ends the processing and the function reloads the page.

That’s it. If there is anything wrong with the code, it assumes that all the GET requests will complete. Unfortunately, given the time constraints there was no time to account for the scenario where a GET request fails.

1. The mysql gem will error out if you use:

   gem install mysql

   You need to use:

   gem install mysql -- --with-mysql-config=/usr/lib/mysql/mysql_config

2. If you use capistrano, the apache user needs write access to the folders under shared. chown -R FTPUSER:psaserv shared should do the trick

3. For setting up actionmailer, make sure delivery_method is set to :sendmail.

4. Some gems/plugins have external dependencies and may fail silently, for example Paperclip which depends on ImageMagick. yum install ImageMagick will fix that. Is there a way to check for these sort of dependencies similar to config.gem?