Galen Grover

Serving fonts with @font-face

Galen — Sat, 12 Nov 2011 18:20:24 +0000

@font-face allows you to use any font on your web page. It is supported by all major browsers, and has actually been supported by Internet Explorer for a long time.

To use @font-face, first you have to make sure that your server is returning the correct mime types for fonts. Here are the correct mime types:

WOFF – application/x-font-woff
TTF – font/ttf
OTF – font/otf
EOT – application/vnd.ms-fontobject
SVG – image/svg+xml

To do this in apache, add this to your .htaccess file:

AddType font/ttf .ttf
AddType application/vnd.ms-fontobject .eot
AddType font/otf .otf
AddType application/x-font-woff .woff
AddType application/vnd.ms-fontobject .svg

In IIS:

Open IIS manager
Right click your server and click properties
Click Mime Types
Add the above mime types

Now in your css file add the font with @font-face.

@font-face {
    /* Name of the font */
    font-family: 'font name'; 
 
    /* This is for IE */
    src: url(/css/fonts/font.eot);
 
    /* This is for all other browsers */
    src: local('font name'),
    url(/css/fonts/font.woff) format('woff'),
    url(/css/fonts/font.ttf) format('truetype'), 
    url(/css/fonts/font.svg) format('svg');
}

The browser will go through the fonts in the src descriptor until it successfully loads one.

You are all set to use your font now. Use your new font just like you would any other font.

h1 {
    font-family: 'font name', verdana, sans-serif;
}

More Info

Mozilla @font-face article

Cross-Origin Resource Sharing

Bulletproof @font-face syntax

Defining bold, italic, etc… font faces

How to make a custom ringtone or text message sound for iPhone IOS 5

Galen — Sat, 08 Oct 2011 08:07:21 +0000

Add the audio file to your iTunes library
Right click the file in your library and click “Create AAC Version”
Drag the newly create file from your library onto your desktop
Change the extension of the file from .m4a to .m4r
Finally, drag the .m4r file into your device in iTunes

The file will be available in the ringtones portion of the Ringtone and Text Tone sound setting.

AJAX Requests with PHP

Galen — Thu, 08 Sep 2011 17:28:50 +0000

Recently I’ve seen a lot of questions on stackoverflow about how to detect/respond to AJAX requests. It’s actually quite simple. Most of the major players in the javascript framework will send a specific header(X-REQUESTED-WITH) to the requested page. You can check this header to detect AJAX requests.

if (
    isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) &&
    strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest'
) {
    // AJAX request
}
else {
    // Normal request
}

You can add this to your request object or define a constant

define(
    'IS_AJAX_REQUEST',
    (bool)isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest';
);

Example usage

// Get an array of contacts for a user
$contacts = Contacts::getForUser( $user_id );
 
// If the page was requested via ajax, json encode the array and exit the script
if ( IS_AJAX_REQUEST ) {
    die( json_encode( $contacts ) );
}
 
// Normal request, require the view
require( 'views/contacts.php' );

Frameworks verified to use the X-REQUESTED_WITH header: Prototype, Jquery, Dojo, Mootools, YUI

Managing sensitive data in git projects

Galen — Wed, 17 Aug 2011 22:35:56 +0000

Many of my projects have files that contain usernames/passwords for various services (e.g. MySQL). For a public project on Github, this is unacceptable. Here is a solution:

Make a duplicate of the file named _sample and remove the sensitive data from it.
Add a line to your .gitignore file to untrack/ignore the file.
If the file was previously tracked you must untrack it with
```
git rm --cached <filename>
```

The sensitive file will not be added to your future commits.

Linking GitHub commit messages to issues

Galen — Sat, 19 Mar 2011 22:33:49 +0000

When performing a GitHub commit you can link the commit message to an issue:

git commit -m "fixed bug, closes #1"

Adding this closes will close the issue and link the commit message to the newly closed issue.

Alternate syntaxes:

Closes GH-1.
Closes gh-1.

here’s an example (hover over #9 in the commit message)

Changing the marker icon in a Google Fusion Table

Galen — Fri, 12 Nov 2010 03:27:10 +0000

By default, when displaying a Fusion Table, the marker icon is a small red dot. To get a normal marker icon follow these steps:

Go into the admin of your Fusion Table
In the menu go to Visualize > Map
Above the map click the link “Configure styles”
In the left menu of the window that pops up click the “Marker icon” link
There are a bunch of options, but if you just want to change all of the marker icons, under the “Fixed” tab select the marker you want to use
Click “Save”

Making wordpress parent navigation items unclickable with jquery

Galen — Sun, 18 Jul 2010 23:17:18 +0000

I’m developing a new site that has a navigation that is built dynamically via wordpress’ wp_list_pages function

  wp_list_pages('sort_column=menu_order&title_li=&exclude=6'); ?>

Navigation items that have submenus (css dropdowns) are still clickable, but for this website they have no content. I wanted a way to make those items unclickable. I was unable to find any way with wordpress’ api, but I did find a way with jquery.

$('#navigation_ul > li > a').filter(
    function() {
        return $(this).siblings().length > 0
    }
).attr( 'href', '#' )
 .attr( 'onClick', 'return false' );

All navigation links that have submenus will have their href to ‘#’, and onClick set to ‘return false’.

Accessing dictionaries inside lists with Django templates

Galen — Wed, 02 Jun 2010 17:15:21 +0000

Today while working on the new SVO i ran into an issue with the coding of breadcrumbs. I wanted to pull the breadcrumb code out of each page template and put it into the header template.

This is what i had originally in each template:


    Home>
    Videos>
    {{ video.company.name }}>
    {{ video.name }}

This quickly became annoying, repeating this code in every page’s template. I decided to create a list of dictionaries inside each view to represent the breadcrumbs:

breadcrumbs = []
breadcrumbs.append( { 'home':reverse( 'home' ) } )
breadcrumbs.append( { 'skaters':reverse( 'skaters' ) } )
breadcrumbs.append( { index:'' } )
return render_to_response('index.html', {...'breadcrumbs':breadcrumbs})

Then in my template i loop the list and dictionary:

<p id="breadcrumbs">
{% for breadcrumb in breadcrumbs %} #this loops the list
	{% for text, link in breadcrumb.items %} #this extracts the dictionary inside each list
		{% if link %}
			<a href="{{ link }}">{{ text|capfirst }}</a><span class="bc_sep">></span>
		{% else %}
			<strong>{{ text|capfirst }}</strong>
		{% endif %}
	{% endfor %}
{% endfor %}
</p>

CSS & Javascript image preloader

Galen — Mon, 22 Mar 2010 01:55:55 +0000

While building a photo gallery for a client I ran into an issue where the photos took too long to load and clicking thumbnails before all the photos loaded resulted in ugly transitions.

My solution was to put a semi-transparent “shield” (containing a loading animation) over the gallery. The user will be able to see the images loading, but will be unable to click anything until all images are loaded and the shield is hidden.

Explanation follows the code.

Here’s the html. This goes inside the div that contains your gallery.

…and the CSS:

#gallery_loader {
    position:absolute; /* Position the wrapper at the top left corner */
    top:0;
    left: 0;
    width:100%; /* cover the entire width of your gallery */
    height:100%; /* cover the entire height of your gallery */
    overflow:hidden; /* hide anything that might overflow */
    z-index:999; /* make sure the shield is on top over everything */
}
#gallery_loader div { /* the actual shield */
    position:absolute; /* Position the shield at the top left corner of the wrapper */
    top:0;
    left:0;
    width:100%; /* Take up the entire wrapper */
    height:100%; /* Take up the entire wrapper */
    background: #fff;
    opacity: .8; /* .8 = 80% opacity for all non-ie browsers*/
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* This and the next style are for IE */
    filter: alpha(opacity=80);
}
#gallery_loader img {
    position:relative;
    display:block; /* Need this so we can center the image */
    margin: 150px auto 0 auto; /* Set this to whatever looks good */
    padding: 30px; /* Adjust to your needs */
    background: #fff;
    border: 1px solid #333;
    -moz-border-radius:5px; /* Round corners in mozilla browsers */
    -webkit-border-radius: 5px; /* Round corners for webkit browsers */
}

Put this inside an included javascript file. This will wait until the page is loaded entirely (images and all) and then fade the loader out. Requires jquery.

$(window).bind("load", function() {
	$('#gallery_loader').fadeOut();
});

#gallery_loader is positioned absolutely and placed on top of everything else (z-index:999). It’s set to take up the entire width/height of its parent. Next comes the shield that will actually do the “blocking” of everything in the gallery. The shield is opacited and set to take up the entire width/height of the wrapper. Finally the animated loading image is loaded and centered.

As you can tell from the HTML, the actual shield is not the container of the loading animation gif. This is because the children of transparent elements can’t be more opaque than their parents. In other words if we put the loading image inside the transparent “shield” (which has an opacity of 80%) it would have a max opacity of 80%. To fix this we put the “shield” underneath the loading image and opacitate it. Here’s a good page on opacity.

Note: If you’re having issues where the loading gif isn’t loading immediately add this right after the opening of your body element

...

This will cause the loading gif to load first.

Here is where i obtained my loading gif

Creating a Mac pandora dashboard widget

Galen — Sun, 27 Dec 2009 17:50:00 +0000

In safari (must use safari) go to pandora.com and login or signup
Go to file->Open in dashboard
Select the main pandora window and adjust the edges to fit the area you want
Click Add on the top right of your screen
On the widget click the i on the bottom right and uncheck the only play audio in dashboard option