Hulu + AppleTV + Australia

Recently the quality of Usenet has gone quite far down hill. Despite being the oldest service for obtaining TV content I can think of, it seems it’s finally no longer small enough to go under the radar of big TV networks. So I’ve been looking for alternatives as of lately.

Having had a quick search around I noticed that Hulu were showing a majority of the TV shows I was getting from alternative sources throughout the internet. Hulu also comes standard on the AppleTV. The problem is that I’m in Perth in Western Australia and the service is limited to those users inside the United States. I knew this was not the most difficult thing to overcome. All I needed was decent and affordable VPN service. I looked around the forums and it appeared StrongVPN were sounding the most liked and recommended provider. They offer a massive range of account types as well as servers and locations to choose from.

So I’d overcome the first hurdle and now had a computer that appeared to be in the US. The issue was that usually to run a VPN you use software and this option was not available to me on the AppleTV. One choice would be to buy a VPN enabled router, however this can be expensive and often means you need to run all your Internet traffic through the VPN or select IPs and domains to route. The second and much better choice is to buy a router that can have the DD-WRT software installed on it. DD-WRT is a special Linux based firmware written for many popular routers. Most routers are far more powerful than the poor quality firmware they’re included with. With this option you flash a second routers firmware to be DD-WRT and have it physically connected to primary router/modem. Any device you want to run through the VPN would be connected DD-WRT router and the rest of your computers remain untouched and connected to existing router/modem. You can buy reloaded DD-WRT routers from their own website and even StrongVPN. I was pretty keen to get this whole thing going so I just checked the available range at my local OfficeWorks against the compatiable router list on the DD-WRT website. I picked up a WNR2200 for $100 AU (about $100 US).

routers

Flashing the router was as easy as downloading the software from DD-WRT and using the wizard to update the firmware in the routers management page. Once you’ve done that you simply need to set the WAN settings to those specified to you by StrongVPN. This is actually the only place I had any trouble. StrongVPN have a page on setting up PPTP on your DD-WRT router however their written and video descriptions differ greatly. This ment playing with the settings until they worked. Find below my settings that worked for me. The most important parts were having all three DNS set, PPTP encryption disabled and remembering to reset the router after changing the details.

PPTP

Hurdle two and perhaps the biggest is Hulu payment. As a second line of defence from people like myself, Hulu won’t let you use a non-US credit card for your payment. Game over you might think (as did I), but not the case.

hulucard

Just like everything these days, Hulu offer gift cards. How you get these cards is the next difficulty, because unfortunately I don’t have a wonderful solution yet. I got mine when I was just in the US (not a great solution you say). I’ve not tried it but there are some people selling the cards on eBay. As it’s untried BUYER BEWARE! If you do want to buy it this way I’d suggest making sure you get sent a scan of the card number and not just a number in an email as a string of characters (to ensure they’re not just generating the numbers somehow). The seller does appear to have good feed back though. Also ensure you create your account using Facebook and then it won’t ask you to initially enter a credit card.

That’s it. Sit back and enjoy your shows. One other thing to note is the server location on StrongVPN. They tell you to use the closest geographical location to yourself. For me that was the San Fran servers, however they let you do speed tests and I found the NY servers to be much, much quicker for me so I switched and have had no problems at all with buffering now.

done

WordPress Metadata Media Naming

A client of mine recently ran into a problem. He had a large number of professionally shot photography for his business. Over the years he had gotten into the good habit of renaming his photos so they were easy to manage. The problem was that WordPress’ media manager was naming the photos using metadata that had been attached to the images by the DSLR that shot them. In his case all images where being called ‘SONY DCR’. I essentially needed to remove the metadata title when the image was uploaded so WP wouldn’t use it as the title. After some searching I found exactly what I needed in wp_read_image_metadata.

add_filter( 'wp_read_image_metadata', 'custom_upload_name' );  

function custom_upload_name( $file )
{
    $file['title'] = "";

    return $file;
}

Pretty simple solution, but it works nicely. Just add this to your functions.php file.

Random Password Generator for MacOS 10.7

I recently downloaded from the App Store a wonderful tool called Little Ipsum. Simple system tray based app that would allow you to quickly and easily generate 1-3 words, 1-3 lines or 1-3 paragraphs of Lorem Ipsum. This was quite handy as my previous process was opening a new browser tab and heading to HTML-Ipsum, which is still an incredibly handy website but just too slow a process.

This got me thinking of other processes I frequently use websites for that could be replaced by a simple System Tray app. So I went looking for a random password generator. I generate a lot of passwords throughout the day. Some tools (I.e PHPMyAdmin) provide wonderful password generators inline, where as many others don’t. Sadly I couldn’t find anything as simple as I wanted on the App Store, so I saw this as an opportunity to brush up on my Cocoa coding skills. I honestly had not touched Xcode in 5-6 years, but this seemed like a simple enough project to get my hands dirty.

So a couple of hours later, most of which was spent watching Youtube user AppleProgramming super helpful videos I had my app. As simple as it is I haven’t greatly tested it, but it all seems to be working well. My only issue remaining is the Preferences window doesn’t seem to display at the front when initialised, but that’s not the end of the world.


6CM Password Generator 1.0 for MacOS 10.7 (47kb)

Ajax Driven WordPress Website (Server Side)

I recently built a website for a designer where he requested the entire thing be Ajax driven and WordPress managed. I have built websites like this in the past using both Drupal and WordPress. In the past however I feel I have made the process overly complicated on the client side, often requiring huge amounts of Javascript to display pages. Using different code for different layouts etc. In hindsight this was a bad idea for several reasons. Firstly search engines might not see the same layout as you are showing the user. Same goes for people with Javascript turned off. Large quantities of additional and unnecessary Javascript need to be written. Finally it is a much longer development process from the method I chose this time.

Though this method was more difficult from the client side of scripting, it was much simpler from the server side perspective. I would create a page in WordPress called Ajax. Then write a custom template that would take a $_GET parameter of ‘URL’, get the post ID from the URL, get the post by that ID and simply pass the post object back as a JSON object. This is very simple (1-2 lines of code), except when you come to laying out your pages and need to specify where each individual div should go. To call it was simple, http://yoursite.com/ajax?URL=/about. To maintain it was a nightmare!

What I wanted this time was the ability to create the entire website just as I would without AJAX in mind. Style all the pages and create whatever templates I need using CSS and HTML. This saves a great deal of time when just doing little things. Believe me a refresh without AJAX is always much quicker than with, and if you think how many times you refresh when developing it makes a massive difference. Then I would in a similar way to my original method create a WordPress page called Ajax which I’d pass a $_GET parameter of URL to. However instead of grabbing the post as an object I would have the template grab the entire page content as a browser would receive it. This means any styles, template structure and custom fields will already have been applied and formatted. I’d simply need to fish out the divs I want and pass them back as a JSON object. Then simply replace the existing ones on the page. For me this meant just taking out the #main div and replacing the existing one. You also need to extract some other elements for styling reasons. I for example needed the classes listed in the body tag too.

You will require a really great PHP script to retrieve and extract the DOM elements in your AJAX called Simple HTML Dom. Below is my AJAX template class. There is almost zero error checking.

<?php
/*
Template Name: Ajax Post
*/

include("wp-content/themes/6cm/scripts/simple_html_dom.php");

// URL
if(isset($_GET['url'])) {
	$url = $_GET['url'];
	if($url != "") {
		// Get post
		$post = get_post(url_to_postid($url));
		// Add paragraphs
		$post->post_content = wpautop(do_shortcode($post->post_content));

		// Get entire page
		$html = file_get_html(get_bloginfo('url') . $url);
		// Extract just <div id="main">...</div>
		$ret = $html->find('div[id=main]', 0);
		// Extract <body> classes
		$body = $html->find('body', 0);
		$body_class = $body->class;
		// Get page scripts
		// $script = $html->find('head script', 1);

		// Create JSON Array
		$json_return = array();
		$json_return['html'] = $ret->innertext;
		$json_return['post_object'] = $post;
		$json_return['body_class'] = $body_class;
		// $json_return['script'] = $script;

		// Print JSON
		print json_encode($json_return);
	}
}
else {
	print 0;
}
?>

Next step is to implement a Javascript/jQuery deep linking script like Asual to write deep links. This allows users to easily make their way to specific pages and not experience the one page woes of Flash websites. You’ll also need to implement jQuery AJAX functions to call and replace content when links are change.

I’ll return shortly to write about my Client side scripting for this project. Hope this can be helpful for someone.

Adding Automatic XBMC Library Update with Sabnzbd Post Processing

I’ve previously written a post about my home theater setup using an AppleTV, Plex, Sickbeard and Saznzbd+. This was all fine, however just before Christmas I thought I’d splash out and get myself a dedicated HTPC. There were a few issues with my previous setup. Firstly it appeared that the Plex for AppleTV wasn’t really being very well supported, and as new iOS versions were being released they weren’t getting Plex support. Using the older versions of the iOS was part of the problem. Secondly I didn’t want to always have a second computer in my house always running, acting as my Plex server.

So I decided to spend some money and get a HTPC. I still had two choices, to build my own or to buy a Mac Mini. I ended up building, but I have to say it was a bad choice. I only saved a small amount compared to the Mini, and despite the fact that I can add extra peripherals it’s unlikely I will. All the hassle you go through trying to make it silent, getting remotes to work correctly and installing an OS already makes it more expensive in my mind.

Despite the trials of this build I finally got it all up and running just as I wanted. It’s an Ubunutu machine running XBMC. Of course it also has Sickbeard and Sabnzbd. I thought today I’d share something that I should have done day one of my build and that’s getting XBMC to update when a new show is completed downloading in Sab. Unfortunately unlike Plex which updates itself (very efficiently), XBMC will only do so when you tell it to. Luckily Sabnzbd comes with the ability to run user defined scripts after post-processing. We’ll first need to install ‘xbmc-send’, a command line tool that allows us to send commands to XBMC.

sudo apt-get update
sudo apt-get install xbmc-send

Having done this you can test it is working by sending the following command.

xbmc-send –a "Notification('Message', 'Hello World')"

You will see a notification appear on the screen in XBMC.

Next we need to create a shell script to do our update command.

#!/bin/bash
# Update XBMC Library
/usr/bin/xbmc-send -a "UpdateLibrary(video)"

Just use your favorite text editor to save the script somewhere. I created a directory where my Sabnzbd ‘complete’ and ‘incomplete’ directories are. Next in Sabnzbd head to ‘Configure > Profiles’ and enter your scripts directory in the ‘Post-Processing Scripts Folder’. Finally go to ‘Configure > Categories’ and under your ‘TV’ and ‘Movies’ choose your script from the drop down and save.

Image Fade In with jQuery (UPDATED)

I often find it a much nicer effect to have images fade in when they’ve finished loading, opposed to watching them build on screen. This is super easy to do with a bit of jQuery and CSS, but I’ve always had an issue that I only today discovered a work around for.

Imagine you have a gallery with 10 images all loading for the first time together. I’ve used a unordered list in this example, but you could use whatever markup you wanted for your own gallery.

<ul id="gallery">
 <li><img src="image_1.png" alt="" /></li>
 <li><img src="image_2.png" alt="" /></li>
 <li><img src="image_3.png" alt="" /></li>
 <li><img src="image_4.png" alt="" /></li>
 <li><img src="image_5.png" alt="" /></li>
...
</ul>

Having created our list of images, lets put some simple CSS in place to give the appearance of loading. To do this we set the images to visibility to hidden and the list items’s background to an ajax loading gif.

#gallery li { background: url('loading.gif') no-repeat center center; }
#gallery li image { visibility: hidden; }

Finally we need some jQuery to fade the images in once they’ve finished loading. I will start with the jQuery I have always used and then discuss its problems and a solution.

jQuery("#gallery img").load(function() {
	jQuery(this).css("opacity", 0).css("visibility", "visible").animate({opacity: '1'}, 'fast');
});

The problem with the above method is caching. Most modern browsers will make an effort to cache images and large files. When you first load this page this will all work perfectly. The browser will begin loading images for the DOM and in the mean time your script will have been initialized and jQuery will be watching for your images to complete loading. The problem is that the second time you load this page most of those images will now will be cached by the browser. Your browser will load your images long before your script is even called. Your script will essentially sit forever waiting for a call to say the images have finished loading, but never receive one. The solution is to include an .each() function to the .load(). This each can check if an image is already complete and if so just manually call .load().

jQuery("#gallery img").one('load', function() {
    jQuery(this).css("opacity", 0).css("visibility", "visible").animate({opacity: '1'}, 'fast');
}).each(function() {
    if(this.complete) {
        jQuery(this).load();
    }
});

UPDATE:

I previously didn’t have the “jQuery(this).load();” wrapped in braces, which seems to cause problems in IE. This seemed to fix it however on my path to solve the IE problem I came to a point where I could no longer create it.

WordPress CCK – Getting close to Drupal

Recently I’ve been required and requested to use WordPress more and more. When I started I was somewhat reluctant. My first WordPress sites were built over 4 years ago and since then I’ve changed CMS more often than I’d like to admit. I liked certain features of WordPress, such as its ease to update and basic layout in the backend. However I was always in the constant search for the best CMS. Each present their own unique, but great qualities, but for me Drupal won out. I could do just about anything I wanted in Drupal – but this came with the draw back, Drupal is so customisable that you often spend hours just creating a good base setup. Essentially Drupal was king to me because of one specific module, CCK. The module that allowed you to create custom nodes and assign them custom content types. It was an amazing tool that could aid you in any requirements a client could throw at you. The module was so good that in Drupal 7 CCK became part of Drupal itself.

I remember when WP 3 came out that I read a few articles about how WordPress had added the ability to create custom content types. I was excited, but annoyed by the labour intensive process it would require to implement such things. Today however I feel I have finally found that sweet spot that means WordPress and Drupal are almost on the same level from my development point of view. There are a number of plugins for WordPress now available to help you create and manage custom content types from the backend. Further more there are also some amazing tools to aid you in creating advanced custom fields for these newly created or existing content types.

I quite like Advanced Custom Fields and Custom Post Type UI, but as I say there are many out there.

I also quite liked a little article I read on Randy Jensen’s blog. He’s written a post and included a download for 3000 icons you can use when creating custom content types and the source you can add to your themes functions.php to have theme appear.

Just keep in mind however Drupal is still way more extensive that WP, so do some research before starting any project.

Invaluable Developer Tools

There are some obvious tools I feel no web developer today could get by without using (mostly Firebug). Here’s another one for Firefox based developers, Wappalyzer.

It’s a simple tool that shows information about pages you’re currently browsing and what technologies have been used to create the site. It even shows the types of analytic and advertising software a site might be using.

Highly recommended!

WordPress Security

Not to long ago I watched some Lynda tutorials and read up on WP security. Basically as with many things on this blog I am posting this information here as a reference that I can use in the future.

Backing up

Plugin – BackWPUp
Description – Back up both files and db to any number of locations. Cron controlled for automatic backups.

Random Passwords

The best password is a completely random generated one. Use a website or tool to automatically generate passwords. I like http://onlinepasswordgenerator.com/

Keep an eye out as I’ve noticed that many of them are hilariously crude despite their random nature. Might be awkward giving some to clients.

wpconfig.php Restrictions

Restrict access to wpconfig.php using .htaccess. Simply add under your existing rules,

#PROTECT WP-CONFIG
<Files wp-config.php>
Order Allow, Deny
Deny from all
</Files>

Also ensure you’ve limited your file permissions to 640 or 644.

 Set Secret Keys in wp-config.php

Don’t forget when you are initially setting up your site to set the secret keys located in your wp-config.php. WordPress provides a generator such as https://api.wordpress.org/secret-key/1.1/salt, but check your config as it will have the most current address.

Database Prefix

Don’t use the default database prefix. Essentially should someone access your db using code injection, it is much more difficult for them to be malicious if db tables don’t have regular names.

Admin Login

In the more recent versions of WordPress you have been given the option of choosing your admin user name. Don’t use ‘admin’! It’s basically giving attackers a head start on accessing your website. Not only do they know one username, but they know the most powerful users username.

Directory Views

By default many hosting companies and Apache installs come with directory list disabled, but always ensure this is true. Should you find that you can list directories with no index.php/html or main.php/html then you can block this in the .htaccess. Simple add the following,

#Add to top of .htaccess
Options -Indexes 

Removing Version Numbers

Another leg up you can give attackers is letting them know what version of WP you are running. If your client is hesitant or unwilling to upgrade their WP version they are putting themselves at risk. The older the version, the more likely someone has identified a security issue at some point. A good idea is to remove all notification to visitors of the sites version. By default your WordPress theme will print something in the header to the tune of ,

<meta name="generator" content="WordPress 3.2.1" />

You can easily remove this by adding the following PHP to your functions.php.

// remove version number from head & feed
function disable_version() {
	return '';
}
add_filter('the_generator', 'disable_version');
remove_action('wp_head', 'wp_generator');

Secure the Login Page

A weak point of WordPress is that the admin login page essentially allows for unlimited attempts. This makes it very easy for a bot to sit for as long as it likes trying to access your account. Install the Login Lock plugin.

This plugin allows you to limit login attempts, block IP’s, force password updates at intervals, force strong password selection policies and force global password reset should you ever need to.

Detect Malicious Code

Finally there is an amazing plugin called Exploit Scanner. This allows you to scan all the files in your WP install and look for malicious code that may have been injected and remove it.

That’s it for now. I’ll try and update this as I learn more or find better plugins. Good luck.

Moving a WordPress Website

WordPress is great don’t get me wrong, but the fact that they don’t seem to think or care that it’s possible that you’ll want to develop on a different domain to the one you finally take live annoys me. Drupal requires almost zero config to take from dev.example.com to just example.com. WordPress on the other hand seems to be a lot of work.

There are a couple of guides in the Codex if you’re looking to move a site, but I thought I’d add a help piece of code (with a warning) that I use every single time.

UPDATE wp_posts SET post_content = replace(post_content,"http://dev.example.com","http://example.com");
UPDATE wp_posts SET guid = replace(guid,"http://dev.example.com","http://example.com");
UPDATE wp_options SET option_value = replace(option_value,"http://dev.example.com","http://example.com");

My warning is to remember to copy any ‘Text’ widgets your site has before proceeding. For some reason if you change the links in a text widget and the new domain length is different to the original it will delete the text widget’s content completely.

Good luck.