Author: Nate Dillon

Touch Icon Sketch Template

When did touch icons get so complicated? It had been a while since I last made a touch icon, so when I recently wanted to add one to a project, I decided I better double check the sizes of icons that I needed to make.

I remembered reading a useful article about touch icons in the past called “Everything you always wanted to know about touch icons”, which I was able to find again. I had thought there were only two sizes of icons that I needed, but I was surprised to find that the article had been updated with a recommendation to produce nine icons to account for various versions of iOS and Android.

In order to make this easier on myself (both now and in the future), I decided to make a handy Sketch template that I’ve linked to below. The final code needed in the HTML <head> should look like this:

<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Download Template

Virtual Host Rewriting in MAMP

While developing Drupal websites locally, I found it to be somewhat of a pain to sync all of the uploaded files (specifically images) from the server to my computer. In some cases, this could be hundreds of megabytes worth of files to download, but without downloading them, my local version of the site would look incomplete with missing images.

I primarily use MAMP for local development, and it turns out that MAMP PRO has an option to add additional virtual host parameters to each individual site hosted locally within the app. Using this feature, I am able to add a rewrite rule to have the MAMP look for photos on the live site when they don’t exist locally, removing the need to download the files onto my computer.

Continue reading Virtual Host Rewriting in MAMP

Oscar Ceremony Design Work

I loved the design of the 87th Academy Awards ceremony last night, and it looks like I wasn’t the only one. Bloomberg Business reported that the design work was done by Henry Hobson, a live action director and graphic designer. It turns out that I’ve seen some of his work before in a few other title sequences, such as the one from The Walking Dead.

Oscars Sound Editing Title

I particularly loved the typography used throughout the Oscars. One other little detail I really liked was how the titles used for the best sound editing nominees looked like an audio timeline.

You can see more of Henry Hobson’s work by checking out his website or by following him on Twitter.

Update: Art of the Title has a much better writeup of the 87th Academy Awards, along with an interview with Henry Hobson.

The Problem With E-mail Apps

A few weeks ago I ran across an article on The Verge titled “The best Gmail app for the iPhone is now made by Microsoft”. The article talks a lot about the new Microsoft Outlook app (a rebranding of the recently purchased Acompli app), but there was one quote that really stuck out to me:

…nobody wants to just give me an email client for my phone: everyone’s gunning to reinvent the entire experience and revolutionize the speed and efficiency of my communications.

That quote really summarizes my frustration with all these new e-mail apps. I don’t need someone to “reinvent” my e-mail experience. I don’t want to turn my e-mail into a to-do list. I just need someone to make an e-mail app that does e-mail well.

I did end up trying the new Outlook app for iPhone and still found it to be lacking in one major area: it seems to only be able to add one label per message, much like standard folders. The whole point of Gmail having labels instead of folders is so that messages can have multiple labels and thus can be found in multiple locations. Oh well, the search for a good e-mail app continues.

An Event Apart Orlando: Special Edition 2014

My notes from An Event Apart Orlando: Special Edition 2014 at Disney’s Contemporary Resort in Walt Disney World.

Continue reading An Event Apart Orlando: Special Edition 2014

Messages History Location

At some point Apple decided to remove the option in the Messages app to choose the location to save chat history. Ever since that change, I always seem to forget where my chat history is saved. Here is where chat history is now stored:

~/Library/Containers/com.apple.iChat/Data/Library/Messages/Archive

Update

The location of the Messages history has moved in Yosemite. Here is the new location:

~/Library/Messages

That directory contains the Messages chat history, as well as all attachments.

Testing Mobile Sites Locally with xip.io and MAMP

Update: I wrote these instructions using MAMP PRO 2, and I just noticed that it looks like version 3 has some kind of xip.io support built in.

Testing mobile websites locally can be done by simply resizing the browser window on your computer, but sometimes you just want to test the experience on an actual mobile device. One of the easiest ways I’ve found to do this is to use xip.io, a service created by 37signals. What is xip.io?

xip.io is a magic domain name that provides wildcard DNS for any IP address.

This allows you to have a real domain to use for each of your local virtual hosts. If you use MAMP PRO for local development, this service makes it super easy to test each of your sites on mobile. To do this, check out the instructions below.

Note: I think this will only work with MAMP PRO, because you need access to the virtual hosts feature. Also, your computer and mobile device(s) will need to be on the same local network.

Instructions

  1. Set up your project in MAMP just like normal.
  2. Get your local IP address. In OS X, you can do this by opening “System Preferences” and selecting “Network”. Under the “Status” on your connected network device, it will show your IP address. Be aware that if your router uses DHCP to assign IP addresses, the address may change after rebooting or reconnecting your computer.
  3. Now go to the “Hosts” tab, and select the virtual host that you would like to test. There is an “Aliases” box under general settings. Add a new xip.io alias using your local IP address. For example, if you have a project called “mysite” and your IP address is 10.0.0.1, you would enter something like this: 
     mysite.10.0.0.1.xip.io
  4. Now open the address you set as your alias in a browser on your mobile device.

That’s all there is to it. Now you can test your full site locally from any other device on your local network. I’ve also found this method helpful for sharing my current progress with co-workers in my office. This is a really great solution for testing on multiple devices without having to push code up to a server.

Accessing Drupal Site Name and Menus in Templates

When I am creating a custom Drupal site, I like to hard code a few things into the templates, such as the site name and menus. This prevents the client from doing something like accidentally moving the menu blocks into a different region, and it also gives me more control over the HTML markup.

In Drupal 7, there are two ways that I have found to access this system data within the templates. I am going to walk through an example of each method in which I will add the following elements to my page.tpl.php template file:

  • My site name
  • The main menu
  • A custom menu named “Secondary menu” (which has a machine name of “menu-secondary-menu”)

Method 1

The first method involves setting up some variables in the template.php file and then accessing those variables in the page.tpl.php file.

In the template.php file:

function newhopeks_preprocess_page(&$variables) {
    $variables['site_name'] = filter_xss_admin(variable_get('site_name', 'Default Site Name'));
    $variables['main_menu'] = menu_main_menu();
    $variables['secondary_menu'] = menu_navigation_links('menu-secondary-menu');
}

In the page.tpl.php file:

<h1><?php print $site_name; ?></h1>
<?php
    print theme('links__system_main_menu', array('links' => $main_menu));
    print theme('links__menu_secondary_menu', array('links' => $secondary_menu));
?>

Method 2

The second method bypasses the template.php file and accesses the data directly.

In the page.tpl.php file:

<h1><?php print filter_xss_admin(variable_get('site_name', 'Default Site Name')); ?></h1>
<?php
    print theme('links__system_main_menu', array('links' => menu_main_menu()));
    print theme('links__menu_secondary_menu', array('links' => menu_navigation_links('menu-secondary-menu')));
?>

Related Resources