Designing a Logo: The Creative Process

blog header img
The humble logo – small, pretty and simple. But nestled somewhere in those few pixels lies the power to make or break a business. That’s some heavy weight for such a little guy.

Having just finished working on an identity for a project my agency is involved with, I thought documenting the evolution of the logo from conception to completion along with how I personally go about designing logos would make a pretty sweet blog post. So without further ado, Designing a Logo- the Creative Process.


Continue reading

Using SQLite with NHibernate for Unit Testing

Fast, automated unit testing is a vital component of any development project.  At Storm we use NUnit with TestDriven.NET from within Visual Studio to run our test suites as we develop.  We also use NHibernate with SQL Server for the data access layer of our applications.  To ensure each of our unit tests is atomic it is necessary to setup and teardown a new copy of the database for each test or series of tests.  With an SQL Server instance of a seperate box, this can be painfully slow once your test library reaches even a moderate size.  To speed things up, we’ve moved to in-memory SQLite.  Here’s how!


Continue reading

Exclude yourself from your Google Analytics reports data

If you’re like me then you spend a fair amount of time clicking around your own website, looking for errors, things to improve and what to do next.  You also probably Google for yourself, checking your rankings for your core keywords.  Whilst your happily doing this, Google Analytics is busy recording each page view and search referral.  If you do not have a huge volume of traffic (or you really love browsing your own site!) your actions will start to pollute your analytics reports and skew your data – making it harder to get real value from the data.  So what do you do?

Well, the good news is that you don’t have to stop looking at your own site!  Google Analytics provides a method to exclude sources of traffic from the reports.  You can opt to ignore all traffic from an IP address or hostname.

From here I’ll assume you have a static IP address.  If you’re on a standard ADSL line you can use a service like DynDNS to assign your connection a hostname and use that instead.

Filtering Your Google Analytics Reports

1. Log in to Google Analytics and select your account from the list.  Next, pick from the list of profiles and click the ‘Edit’ button in the Actions column to the right side.

2. On the ‘Edit Profile‘ page, scroll down to the ‘Filters Applied to Profile‘ box.  Hit the ‘+ Add Filter‘ button.

3. You want to ‘Add new Filter for Profile‘.  Give the profile a nice name like ‘Exclude traffic from the office‘.  You want to create a ‘Predefined Filter‘. Leave the first drop-down as ‘Exclude‘, set the second drop-down to ‘traffic from the IP addresses‘ and leave the last drop-down as ‘that are equal to‘.  Then enter your IP address in the boxes that appear and hit ‘Save Changes‘.

Filter to exclude traffic from an IP address

4. The filter will only apply going forwards, it will not back date and update existing data in your reports.

Note of Caution

I set this up for Storm many months ago and forgot all about it.  Recently I was testing some new Event Tracking code and getting very frustrated when it wouldn’t work.  Of course, I was being excluded from the reports!  Don’t make the same mistake!

Google getting into the Web Fonts game?

Earlier today I was on Smashing Magazine when I saw something strange in my status bar.  As I watched the hostnames flash by as the page loaded, pulling in resources from numerous sources, my eyes stuck on one in particular: fonts.googleapis.com. So, I pulled up the source of the page and  right there, on line 3, was a link element pulling in CSS from fonts.googleapis.com!  The request is for a font called ‘Droid Sans’ in regular and bold.

<link href='http://fonts.googleapis.com/css?family=Droid Sans:regular,bold' rel='Stylesheet' type='text/css'/ >

I dug a little deeper and had a look at the source of that CSS file and found:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g')
       format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw')
       format('truetype');
}

From this evidence it’s looks very much like Google is getting into the font serving business alongside current providers such as: TypeKit and Fonts.com.  You have to assume that this is bad news for those guys as Google is highly likely to be offering this service for free, where a subscription is currently required for high volume use.

Update: Google has now officially announced this as the Google Font API with the Google Font Directory – you heard it here first!

However, it turns out this isn’t  a move to dominate the Fonts market – instead this is a collaboration.  Google has been working with TypeKit to produce the WebFont Loader – A JavaScript API to make loading web fonts faster.  Google have posted an example of using the new API – perhaps controversially, it introduces a little bit of noise into your CSS.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

However, the new loaded is able to load fonts from both Google and TypeKit simultaneously:

WebFont.load({
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
    typekit: 'myKitId'
  });

A move that will drastically improve the load times of web fonts as users being to have a cached version of the webfont.js file in their browser! Currently, each TypeKit user has to include a unique JavaScript file on their site, eliminating any caching potential.

Setting up a 1&1 Windows Server VPS as a Web Server

Storm has had some serious issues with our 1&1 VPS recently, as a consequence, we’ve had to restore our server piece by piece from backups and documentation.  By default, a 1&1 VPS is not ready to serve web pages (this isn’t terribly handy for web servers!) so we needed to tweak a few settings to bring it to life.  This short guide should help you configure your server and get started serving web pages!

1. Start the required Windows Services

This first task is to start the services required to run a web server:

  • Start > Administrative Tools > Services
  • Find ‘FTP Publishing Service‘ and double click it.  Set the start type to be ‘Automatic’ and hit ‘Start’.
  • Find ‘World Wide Web Publishing Service‘ and double click it.  Set the start type to be ‘Automatic’ and hit ‘Start’.

This will run the services we need to act as a web server and FTP server.  Setting the start type to Automatic means that the services will start automatically should the server restart.

2. Relax the Windows Firewall to allow communication with the world

Next, we need to let our server communicate with the outside world!

  • Start > Control Panel > Windows Firewall
  • Go to the ‘Advanced’ tab
  • Hit the ‘Settings’ button in the top section ‘Network Connection Settings’
  • Check ‘FTP Server‘, ‘Web Server (HTTP)‘ and (if required) ‘Secure Web Server (HTTPS)‘.
  • Hit ‘OK’ and exit the firewall

3. Enable IIS to server ASP.NET pages

If you do not complete this step then you will receive an error 404 Page Not Found message when trying to view a .aspx page, but will be able to view .html pages perfectly fine.  From the Microsoft help page for this error:

“By default, when IIS is installed on any version of the Windows Server 2003 family, IIS only serves static content (HTML). ”

  • Run IIS, expand the server node, and then click on Web Service Extensions.
  • From the list of extensions, click on the one that you want to enable. You’ll probably want ASP.NET v2.0.x and possibly ASP.NET v4.0.x.
  • Click the Allow button.

You should now be able to serve dynamic web pages from your server – happy hosting!

Automated Backups

As an aside to this post, you’ll also want a solid backup plan in place for if (when) 1&1 blows your server up.  I wont go into detail here as that’s another post, but I will point you at some very useful applications.

SyncBack – Free or Paid
The free version of SyncBack has everything you need to get started.  It allows you to create scheduled tasks to backup your files locally and remotely – with email reports should the process fail.  Storm has nightly, weekly and monthly jobs copying all local files to a central C:\Backups directory (we keep multiple copies incase the newest copy is corrupt).  We then have another nightly job which uses FTP to send the current Nightly copy back to our office.

ExpressMaint – Free
This is a community project to replicate a utility that was available with SQL Server 2000 for SQL Express 2005 and 2008.  ExpressMaint allows you to schedule backups of your SQL Server databases.  Storm has a batch file which is run as a nightly task.   This dumps the databases to the C:\Backups directory from where the SyncBack FTP job handles sending a copy back to our office.

The Haversine Formula in C# and SQL: Distance between two points

Storm was recently asked to create a local office finder for a client.  We used the Google Maps API to geo-locate the offices, storing their lat/lng co-ordinates in a database.  Each time a customer performs a search for their town or post code we use the same process to their lat/lng co-ordinates as well.  Now we have the information we need, but how you find out which offices is closest to the customer?  We use the Haversine Formula.


Continue reading

Using the Google Maps API to get long/lat co-ordinates from a postcode or address

Storm were recently asked to create a local office finder for franchised business VoIP provider, Datasharp. The client requested that the user should be able to enter their postcode or town/city and be informed where their nearest branch was.  To make this possible we would need the latitude and longitude co-ordinates for each office and the customer, but how do you get the co-ordinates from the address?


Continue reading

Convert an angle in Degrees to Radians in C#

I was recently using Google Maps API geo-location lookups to get the longitude and latitude of an address entered by the user.  I wanted to find the distance between a two co-ordinates using the Haversine Formula.  To do this I needed to convert my lat/lng co-ordinates into radians.  This seemed like an excellent opportunity to create a new extension method to add to Storm‘s library of re-usable code.


Continue reading

Send Email with Cmd+Enter in Apple Mail on Mac OS X

I used Mozilla’s Thunderbird email client for several years before switching to the faster, cleaner Mail application that Apple ships with OS X.  Over those years I became used to using Cmd+Enter to send the mail I was composing – especially if it was a quick back and forth that didn’t require proof reading.  When I switched to Mail I discovered that this key combo didn’t work and there was no obvious way of setting it up.  However, that all changed when I discovered Keyboard Shortcuts in System Preferences!

Setting up a custom keyboard shortcut is actually very simple!  This simple walk-through shows you how to set one up.

Step 1: Open ‘System Preferences‘ and select the ‘Keyboard‘ section under the Hardware heading

Keyboard options in System Preferences

Step 2:  Select ‘Application Shortcuts‘  from the list on the left of the screen and then click the ‘+‘ button underneath the list of current shortcuts

Add the new shortcut under Application Shortcuts

Step 3: You will be given a form to enter the details of your new shortcut.  Click on the Application drop-down list.

The command creation form

Step 4: Select ‘Mail‘ from the list of Applications.

Select Mail from the Application list

Step 5: Enter the exact word ‘Send‘ into the Menu Title box.  Click in the Keyboard Shortcut box and press the key combination you want to use to send mail.  Here I have used Cmd + Enter.

Menu Title is Send

Step 6: You’re all done!  The shortcut should appear in your list of Application Shortcuts.  To check it works, fire up Mail and try it out!

Success! The new Send command for Mail is in the list

Step 7: Enjoy the benefits of your increased productivity having saved those vital milliseconds it took to reach for the mouse!

Do you have any killer Mail shortcuts that boost your productivity?  If so, please share them in the comments!