I decided I wanted a few LEDS to light up based on information I sent to the serial port with the Arduino linked up to. I wont go into a full tutorial right now, at some point I will come up with a fairly easy and simple tutorial for a beginners first Arduino circuit and post it here.

For the mo below is a video of my circuit in action. It works by the Arduino reading the data sent to the serial port from the MAC which can be any random long string of numbers between 0-2 as there is only 3 LEDS (e.g. 01212101010201212020). 0 is the Red LED, 1 is the Yellow LED and 2 is the Green LED and it will light up the LEDS relative to the numbers in the sequence received.

So far I can only tell that this orientation setting in CSS3 works on mobile safari as people tell me im a bit of a apple-fag these days. Anyway, the script I made comes down to the meta tags in the header which are used to swap out css files according to the orientation of the device, after detecting which device your using with PHP. Heres an example of the meta tags using the orientation setting:

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style/iPad/iPadPortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="style/iPad/iPadLandscape.css" />

Ive put up a live example here for you to test it out yourself before implementing it into your own code.

To checkout all the code including the PHP used to run the live example please download the zipped code here. Any questions about the code please leave them in the comments.

I developed this code after being inspired by a blog post I saw on a friends blog about Responsive Design at ImAFish.co.uk. After e-mailing him my code he followed up with a blog post about my code, so a thanks is in order there.

First of all I decided I needed a seriously eye catching CV that stood out from the crowd. To stand out from the crowd I was going to have to do something much more than your average word document. I thought that treating the CV as a piece of artwork instead would give it that zing it needed to catch someones attention.

I created my eye catching CV in Adobe Fireworks which is great for designing creative typography style graphics. As I was under away making my CV I was presented with the task of creating a winning Summary. I did really want to write that “I am just super awsume fantastico” but decided to go with a more professional approach.

Now my CV has the vibrancy of colour and the zing of tasteful design and layout it should stand out well in the thousands of CV’s that usually end up on an employers desk. Also to add an extra element to the CV I made a lovely version of it online which is nicely animated using my JavaScript skills. You can find it here.

Anyway, check out my CV online if your a reputable employer or if you have already had me in for an interview then thank you very much and enjoy the online version of my CV.

This is a recent project which I have spent most time thinking about and planning up until the frantic week long coding session to get it out there. The idea behind it is to allow users to obtain artwork for TV Shows they own within media centre software such as XBMC (Xbox media centre). The XBMC Media centre software allows you to set artwork manually for each show such as banners, logos and fanart but can be a rather tedious task to trawl multiple popular websites looking for the art you want. FanPics.tv to the rescue!. It scrapes artwork from multiple popular fanart databases and displays them in one easy to see place ready for you to browse and download as you see fit.

For the inner nerd keep reading for more technical information about the website… This websites interface and main workings have been built with a firm solid structure of jQuery and AJAX interfacing with a PHP backend. It does quite alot of work behind the scenes with searching for your requested show and pulling artwork from multiple different Public databases. All of this is done to make your life easier when looking for artwork and give you the option to get it all from one website in a few clicks.

Save your time searching for artwork and visit FanPics.tv now.

The entirety of this project is made in pure CSS and JavaScript/jQuery as coding with those languages is the easiest way to maintain compatibility across browsers. So I needed a way to scroll and animate between DIV layers in JavaScript at which point I found the custom jQuery function (.scrollTo) written by Ariel Flesler.

Using a heafty amount of my own nifty JavaScript and beatifull CSS skills I utalised this handy function to make my lovely scroller you see in the screenshot above. To try it out for yourself then click here

The features of my scroller are listed below

• Auto Scrolling
• Pause/Un-Pause Auto Scrolling
• Navigation Dots for Manual Scrolling
• Current Pane On View Showed with Color change of Navigation Dots
• MouseOver triggers current panes Label Animation
• Compatability with Mobile Devices/Tablets & Internet Explorer (IE7 >)
• Completely CSS and JavaScript/jQuery Only

Above is a couple of pictures of the new site. Now when you fancy a wallpaper of a movie that has just come out or any movie for that matter, simply head on over to PixelGrafters and you should be able to find it with all its artwork for you to play with.

I did something rather clever with PixelGrafters to make it faster. The processing of the front page latest released movie results is processed by my home servers as a automated task and saved to a file which is automatically loaded remotely from the webpage. This means the content is always up to date without having to slow your experience down by getting the results live.

Ive also taken the time to get PixelGrafters its own page on facebook here. Its also on twitter here.

Whats left to do with PixelGrafters? There’s a few little fine tweaks needed and ironing out to fully make sure users don’t experience random errors. Im also thinking of adding trailers embedded into the page and I want to get proper integration of social networks.

Recently I have also taken the opportunity to start writing the odd post for a website called 12stix. They provide the web with quick easy and to the point fixes of general techno annoyances and issues. Take a look at the linked website and the pages and then maybe For fun you can also send me some love if you like for PixelGrafters via www.we-loveit.com/PixelGrafters

Unfortunately The images provided by Rotten Tomatoes are kind of pathetic. So I want to keep getting the images from TheMovieDB but grab lists of these movies from Rotten Tomatoes. This is easier said than done. To accurately reference a movie on TheMovieDB a “IMDB-ID” is required which is not given out by Rotten Tomatoes which is a shame. I came up with a solution which will be on the most part completely accurate, I haven’t found it fail yet or pick up the wrong movie.

What I did was found a way to search TheMovieDB by the exact movie title pulled from Rotten Tomatoes and constrain the search by the year the movie was released also pulled from Rotten Tomatoes. I didn’t think it would be accurate enough at first but it certainly seems to do the trick. This now allows me to view the list of Movies I wanted with much better quality artwork. Im going to wack into the post the code below.

Bear in mind the PHP snippet below is just the code to display movies in a way I wanted which is combined from 2 of Rotten Tomatoes Lists from the API and then using PHP to filter out the movies not released this year allowing to display just the most popular movies being released in your local multiplex. Also I haven’t commented it yet as its still subject to change due to PixelGrafters being in development right now.

Please feel free to use this code and please credit me if you do. Thanks

//Code By Tristan Bettany - TristanBettany.co.uk
//Script Designed For PixelGrafters.co.uk
//Please Credit Me if used - Thanks
<?PHP
	$date = date('d-m-Y');
	$split = explode("-", $date);
	$year = $split[2];

	$TMDB_APIKey = "Your TheMovieDB API Key";
	$RT_APIKey = "Your Rotten Tomatoes API Key";

	$RT_NewReleases = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/opening.json?apikey=' . $RT_APIKey . '&country=UK';
	$RT_InTheatres = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=' . $RT_APIKey . '&country=UK';

	$session_A = curl_init($RT_NewReleases);
	curl_setopt($session_A, CURLOPT_RETURNTRANSFER, true);
	$return_A = curl_exec($session_A);
	curl_close($session_A);
	$NewReleases = json_decode($return_A);
	if ($NewReleases === NULL) die('Error parsing json');
	$movies_A = $NewReleases->movies;

	$session_B = curl_init($RT_InTheatres);
	curl_setopt($session_B, CURLOPT_RETURNTRANSFER, true);
	$return_B = curl_exec($session_B);
	curl_close($session_B);
	$InTheatres = json_decode($return_B);
	if ($InTheatres === NULL) die('Error parsing json');
	$movies_B = $InTheatres->movies;

	foreach ($movies_A as $NewRelease) {
	$TMDB_Echoed = false;
		if ($NewRelease->year == $year) {
			if ($NewRelease->posters->detailed != "http://images.rottentomatoescdn.com/images/redesign/poster_default.gif") {

				$title = urlencode($NewRelease->title);
				$TMDB_URL = 'http://api.themoviedb.org/2.1/Movie.browse/en/xml/'. $TMDB_APIKey .'?order_by=release&order=desc&per_page=10&page=1&query=' . $title .'&year=' . $NewRelease->year;
				if(!$xml = simplexml_load_file($TMDB_URL)) exit('Failed to open '.$TMDB_URL);
				$movieCount=0;
				foreach($xml->movies->movie as $movie) {
					if ($movieCount == 1){
						break;
					}
					$imdb_id = $movie->imdb_id;
					$imageCount=0;
					if ($imdb_id != "") {
						foreach($xml->movies->movie[$movieCount]->images->image as $image) {
							if ($image['type'] == 'poster') {
								if ($image['size'] == 'original') {
									$hiRes_Link[$movieCount] = $image['url'];
								}
								if ($image['size'] == 'cover') {
									$medRes_Link[$movieCount] = $image['url'];
								}
							}
							$imageCount++;
						}
						if (isset($medRes_Link[0])) {
							echo '<a target="_blank" href="' . $hiRes_Link[0] . '">';
							echo '<img width="185" height="278" src="' . $medRes_Link[0] . '" ></img></a>';
							$TMDB_Echoed = true;
							ob_flush();
							flush();
						}
					}
				$movieCount++;
				}

				if(!$TMDB_Echoed){
					echo '<a href="' . $NewRelease->links->alternate . '">';
					echo '<img width="185" height="278" src="' . $NewRelease->posters->detailed . '"></img></a>';
					ob_flush();
					flush();
				}
			}
		}
	}

	foreach ($movies_B as $InTheatre) {
	$TMDB_Echoed = false;
		if ($InTheatre->year == $year) {
			if ($InTheatre->posters->detailed != "http://images.rottentomatoescdn.com/images/redesign/poster_default.gif") {

				$title = urlencode($InTheatre->title);
				$TMDB_URL = 'http://api.themoviedb.org/2.1/Movie.browse/en/xml/'. $TMDB_APIKey .'?order_by=release&order=desc&per_page=10&page=1&query=' . $title .'&year=' . $InTheatre->year;
				if(!$xml = simplexml_load_file($TMDB_URL)) exit('Failed to open '.$TMDB_URL);
				$movieCount=0;
				foreach($xml->movies->movie as $movie) {
					if ($movieCount == 1){
						break;
					}
					$imdb_id = $movie->imdb_id;
					$imageCount=0;
					if ($imdb_id != "") {
						foreach($xml->movies->movie[$movieCount]->images->image as $image) {
							if ($image['type'] == 'poster') {
								if ($image['size'] == 'original') {
									$hiRes_Link[$movieCount] = $image['url'];
								}
								if ($image['size'] == 'cover') {
									$medRes_Link[$movieCount] = $image['url'];
								}
							}
							$imageCount++;
						}
						if (isset($medRes_Link[0])) {
							echo '<a target="_blank" href="' . $hiRes_Link[0] . '">';
							echo '<img width="185" height="278" src="' . $medRes_Link[0] . '" ></img></a>';
							$TMDB_Echoed = true;
							ob_flush();
							flush();
						}
					}
				$movieCount++;
				}

				if(!$TMDB_Echoed){
					echo '<a href="' . $InTheatre->links->alternate . '">';
					echo '<img width="185" height="278" src="' . $InTheatre->posters->detailed . '"></img></a>';
					ob_flush();
					flush();
				}
			}
		}
	}
	echo '</ul>

';
?>

^ PixelGrafters Admin Panel ^

The idea was simple, ban nasty bots and send them 403 errors and allow good ones to crawl as normal. I started off with a little re-search on the practises of bad bots. It turns out that mostly a bad bot will do spoofing of useragents so you cant block them that way through the robots.txt and do the opposite of the rules you lay down in the robots.txt file most of the time. This made me think I could trap them with some “honey traps”.

The first idea was to deny access to a directory in robots.txt and then when the bot visits that directory they get banned. To ban them I needed to store all data about them so with some nifty PHP I logged all possible info the server could give me and did a reverse DNS lookup on them which is only 1 single function in PHP (nice!). After storing that data if they come back with the same IP address they will still be banned and sent a 403 error.

This is IP address specific and if they come back with a different IP address they will be allowed but if they act in the same way eventually they will be banned again and the owners of the BOT should eventually run out of IP addresses to use I imagine.

I also wanted to create a Admin Panel for any BOT that wasn’t automatically caught by a honey trap. This would allow me to ban manually. This prompted a re-structuring of the database and system I started with to contain 4 tables. One for nice bots (google etc), one for banned bad bots, one for locations IP address had been to, and one for unassigned visits.

This was massive and took a long time and quite a bit of debugging to make it work how I wanted. but now I can log all locations of where a visitor has been and I can move them to other tables assigning them as either a banned bot, or nice bot and drop all the info about their visits from the system altogether.

As far as I can tell now this is flawless, I still need to add in a few more honey traps as nasty bots are intentionally looking for files on the server such as “/wp-login.php” so they can attempt to hack peoples wordpress accounts. This will simply be a regular expression that checks for similarity to certain patters in the URL and if they are obviously looking for stuff they shouldn’t be they will be banned, haha.

As far as looks goes with the Admin Panel, I made it look all pretty with my usual CSS skills. I made each visit log in what looks like a table but is actually an un-ordered list. Then each list item has a drop down which I made with MooTools jQuery API so you can see more info such as locations the visitor has been to when expanded. Then theres the links on the right for managing bans and deleting data etc. The Image at the Top of the Post is the Admin Panel.

Previously PixelGrafters was using the PHP cURL() function to return search results from themoviedb.org in XML and then provide the massive amount of filtering needed to get rid of the junk submitted to its open and free to use database. The filtering is necessary to provide the user a much more user friendly view of information about a requested movie. Also it acts similar to basic AI allowing PixelGrafters to auto select a movie for you based on your search terms.

Now though I have improved the method for returning results making PixelGrafters much faster and it will also make it nicer to browse when the site is finished. It seems before I was taking the long and hard way of doing it when there was a much more simpler option I hadn’t thought of. Just incase anybody else is wondering how to pull search results from themoviedb.org fairly simply then heres some PHP code below. Ill explain it first.

Briefly this code is going to give you the thumbnail image for each movie in the search results from themoviedb.org of a query passed through the url like so… www.mydomain.com/myquery.

$URI = $_SERVER["REQUEST_URI"];
$URI_VARS = explode("/", $URI);
$query = $URI_VARS[1];

$APIKey = "Sorry I cant give my API key away";
$file = 'http://api.themoviedb.org/2.1/Movie.search/en/xml/'
	 . $APIKey . '/' . $query;
if(!$xml = simplexml_load_file($file))
{
    exit('Failed to open '.$file);
}

$movieCount=0;
foreach($xml->movies->movie as $movie)
{
	$imageCount=0;
	foreach($xml->movies->movie[$movieCount]->images->image as $image)
	{
		if ($image['size'] == 'cover')
		{
			echo '<img src="';
			echo $image['url'];
			echo '" ></img>';
			echo '<br/>';
		}
		$imageCount++;
	}
$movieCount++;
}

In Detail what this does is it will request the URI (the string of data after the .com or .co.uk etc), split it up to get the data after the forward-slash and treat that data as your search query. Then its going to set the remote location to themoviedb.org’s API with your API key and the query you passed. Then it will load the XML from that location into a simplexml object. Once successfully doing that it will loop through each movie in the search results and then each image in each movie and each time it finds an image of the size “cover” in the XML it will echo the image to the page.

I hope thats of any use to anybody trying to code something funky using themoviedb.org’s API. Enjoy and the new PixelGrafters will be out soon.

This design works well for me being a web developer as its not too flamboyant, its straight to the point and I made something similar to a tag cloud which you tend to find on blogs to highlight my skills on the left side of the card. I would say its simple, yet elegant.

I designed the card in photoshop I think Ive produced a fairly good result. It should satisfy the visually impaired as well as some people can struggle reading black text on a white background. I myself find it much easier to read the White on black side but that could be just because my computer monitor is an LED screen and is about as bright as looking directly at the sun.

Anyway, I hope my design gives many of you plenty of inspiration. If so then leave a comment.