This is pretty exciting for me, and I think that after all of the hard work we put into that site the entire team at Odopod deserves a hearty congratulations… I’m really glad to see this site receiving the recognition that it deserves.

Also – it’s nice to see the CMS getting some of the attention – although I’m biased – because I wrote this one.

Yes, it’s true. I’ve resigned from position as Senior Developer for odopod. I really enjoyed my time there and I learned a great deal from both the partners as well as my colleagues – and I wish them all the best.

I just found myself increasingly drawn to my freelance work, as well as my various personal projects – most of which sit unfinished (including this website). I’m excited to have a chance to revive some old stuff, and introduce you to some of things Kiala and I have been busy dreaming up these past few months.

I’m very lucky to know a fantastic group of wonderfully successful people who have been able to provide me with steady work so far, but I’d always love to hear about new projects – you can reach me @ dane@doesnotvalidate.com.

I’ll be updating this site with my most recent launches – like this project that I worked on with the guys over at Instrum3nt for DC shoes, and the new Odopod site.

I’ve got some really exciting stuff happening in the next few weeks, and I’m very optimistic about the future. Thanks to everyone who helped get me here.

In the past few months I’ve launched a few projects – I’m planning an in-depth post about each of them, but for now here’s some images and links.

feliciaday.com

odopod.com

I can’t seem to get sorl thumbnail to play nice with transparent PNGs, it keeps adding weird black and grey backgrounds because it’s doesn’t maintain the alpha channel in it’s output.

Python’s PIL Module uses different versions of the Image.save() method depending on the format of the image being saved. sorl thumbnail uses the following call when it creates the final image output:

im.save(self.dest, quality=self.quality)

This call utilizes a parameter call quality which, according to the documentation is only available on JPEGs. Even changing the THUMBNAIL_EXTENSION in my settings.py file to “png” still didn’t make it maintain the alpha channel the way I had expected it to. Bug 56 is currently open for this issue at the sorl thumbnail project home.

The solution

I wanted to setup a way to pull the images off of the transparency resize them and then drop them on an opaque background of it’s own independent size.

So the first thing I did was to load in an image via PIL:

im = Image.open(filename)

So now that we’ve got our image we need to create the opaque background for it… right now we’ll just use a solid black one. Use the following PIL method call to create a background at an identical size to the original image:

bg = Image.new('RGBA', im.size, (0, 0, 0))

At this point I’ve got two images, im the logo file and bg the opaque black background. Using the PIL paste method I can stick there two together.

bg.paste(im)

which gives us the following image:

If you’re like me, you’re like – “WHAT THE HELL?!?! I just pasted a transparent PNG on a black background, why is it all white???” The answer is because you didn’t tell Python to maintain the alpha channel when it pasted.

The way that PIL deals with transparency when saving or pasting PNGs (that have a mode of “RGBA” or “P”) is to allow for a “transparency” parameter which is an integer from 0 – 255 which is sort of like a transparency tolerance for that image, and represents the “opaqueness” of the pixels to maintain transparency for. Since this is different for every image what we need to do is just maintain the value of the PNG we’re working with.

Note: that if you paste an “RGBA” image (WE ARE!), the alpha band is ignored in a paste. You can work around this by using the same image as both source image and mask – like we have below. More information at the PIL Handbook

Change the paste call to look like this:

bg.paste(im, (0, 0), im)

which produces this:

Read the rest of this entry »

This is one of the first projects I worked on with STRUCK over a year ago for laminate floor manufacturer Pergo.

While we were busy building the site – Pergo was purchased by another company, and we were never sure if the site was going to see the light of day.

Well today it finally launched.

The site is written on this massive .NET e-commerce engine and I was in charge of all of the backend programming work, as well as managing the .NET + AJAX + Flash integration points.

URL: http://na.pergo.com/

URL: http://www.timberlinelodge.com
Agency: Nemo
Role: Lead Developer
Technology: PHP / Wordpress

Featured in the Wordpress Showcase

The following code will let you create a custom “Wordpress Loop” that contains the post objects of the children of the current page.

Just drop this code in your theme file:

<?php
    $project_list = get_posts('numberposts=5&order=ASC&orderby=menu_order&post_type=page&post_parent='.$post->ID);
 
    foreach($project_list as $post):
    setup_postdata($post);
?>
    <div class="post" id="post-<?php the_ID(); ?>">
    </div>
 
<?php 
    endforeach; 
?>

It seems simple, but one of the most troublesome tasks is to get a Flash fly-down (or drop-down) menu to reliably collapse when it sits over non-Flash content. Some browsers (IE) have trouble recognizing the change of control from the Flash Player application instance to the browser. For that reason Flash won’t always read when the mouse has moved outside the bounds of the Flash Player… worse still – it just receives no notification at all, which means that if you’re relying on Flash to read when the mouse has moved outside the bounds of the navigation – you’re out of luck.

Over the years I’ve come up with many tricks to help deal with this – some more effective than others. Today I found the best solution to date. It’s not 100% effective, but it’s much better than any of the other options that I used.

I decided to try using the jQuery hover method to detect when the mouse leaves the Flash’s containing DIV element in the DOM.

The AJAX code looked something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$('document').ready(function()
{
    $('#flashNavReplace').hover(
        function()
        {
	    //rollover functionality here
        },
        function()
        {
            getFlashMovie("flashNavReplace").jsCloseNavigation();
        });
});
 
function getFlashMovie(movieName) 
{
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];
}

and then the Flash side uses some code like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import flash.external.ExternalInterface;
 
/**************************************************************************
* 
* CONSTRUCTOR
* 
**************************************************************************/
public function TopNavigation()
{
    //setup the JS callback
    ExternalInterface.addCallback("jsCloseNavigation", jsClose);
}
 
function jsClose():void
{
    Logger.log("CALLED FROM JS");
    //close the nav
}

This works for me pretty much all of the time… I can break it if I really try, but it works great for normal usage.

In a current project I’m reading in a user’s Twitter feed and displaying it on the hompage of their Wordpress blog. I know that there are a thousand plug-ins that exist to do this exact thing, but I wanted to write my own.

Using the official Twitter API the contents of the individual were returned as plain text, meaning that all HTML links were totally dead. I wanted a way to automatically add the HTML to enable URL’s as well as twitter “@” profile links. I found some regular expressions and with some tweaking came up with these 2 functions.

To activate the URLs in block of text pass it to the following function:

function activateURLS($tweet)
{
    return preg_replace("@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@", 
        "<a href="$1" target="_blank">$1</a>", 
        $tweet);
}

To activate Twitter @ profile links using the following PHP block:

function activateTwitterProfiles($tweet)
{
    return preg_replace("/@([^ ,.!#$%^&]+)/", 
        "<a href="http://twitter.com/$1" target="_blank">@$1</a>", 
        $tweet);
}

They’re super easy to use, just call them like this:

activateTwitterProfiles(activateLinks($tweet->text))

Thought Wordpress nerds might find this useful, a function to retrieve a list of posts by passing in a custom filed key=>value pair, with an optional count parameter.

Just drop this in your “functions.php”:

function getPostsByMeta($key, $value, $count = -1)
{
    global $wpdb;
 
    $sql = "SELECT DISTINCT wp_posts.post_title,
    wp_posts.ID FROM $wpdb->posts,
    $wpdb->postmeta 
    WHERE $wpdb->posts.ID = $wpdb->postmeta.post_id 
    AND $wpdb->posts.post_status = 'publish' 
    AND $wpdb->postmeta.meta_key = '$key' 
    AND $wpdb->postmeta.meta_value = '$value' 
    ORDER BY post_date DESC";
 
    $sql .= ($count != -1) ? " LIMIT ".$count : "" ; 
 
    return $wpdb->get_results($sql);
}

and then you can use it like this:

$news_home = getPostsByMeta('_tb_post_section', 'News', 3); 
 
<?php foreach ($news_home as $news) : ?>
    <!-- OUTPUT TEMPLATED HTML -->
<?php endforeach; ?>