Andrew Hall

BLOG

1 comments

Regain control of Twitter with 3 Chrome Extensions

Twitter can often be a sea of confusion and irrelevant tweets.

Here are the 3 extensions that have really helped me to tame my Twitter feed.

1) Web Marker

This is my favourite. If i’m at home, I normally read Twitter on my iPhone or on iPad via Twitteriffic. Other times, I read Twitter on the web.

Tweet marker is a service that lets you sync all these services together, so if you read tweets on your phone morning, then check Twitter on your desktop at lunchtime, you’ll easily see where you got up to.



(Here, the blue line indicates where I last read up to on my phone)

2) Open Tweet Filter

This extension is great for filtering out things you don’t want to see.
For example:

  • foursquare checkins
  • certain subjects (X Factor, US Elections)
  • YouTube videos
When you install the extension, you get an extra button in the Twitter toolbar titled “Filter”. You simple enter a list of words that you want to filter on and the extension will remove any tweets which contain that word.

3) English Tweets Only (see edit)

Some of the people I follow also speak French and German but I didnt want to see these tweets in my timeline. However, I didn’t want to unfollow them as they also tweeted in English too.
This extension helps to clear the clutter by stripping tweets I wont understand.

EDIT: I was using the Microsoft Translation API for this and it seems you now have to pay for this! So annoying! Does anyone know a free translation API?



What extensions do you use for Twitter? Let me know in the comments!

1 comments

Using the Dribbble API for a digital photo frame

After producing the script to scrape FFFFound, I was thinking of some other services to use for a variety of images.
As well as FFFFound, I like to check on what’s happening at Dribbble too.
Dribbble is a site for people to show of their work, that may still be in development, for other designers to comment on.

I used the dribbble api to get the data from dribbble’s servers in JSON format.

Below is my commented script, so steal if it you like and it’s on github too:

 
<?
 
set_time_limit(0);
mkdir("images");
 
//loop through pages
for ($i=1;$i<=30;$i++){
 
	//Query API and convert to PHP object
	$results = json_decode(file_get_contents("http://api.dribbble.com/shots/popular?page=".$i));
 
	//Loop through JSON
	foreach ($results->shots as $img){
 
		//Clean up URL from API
		$img = strstr($img->image_url, '?', true);
 
		$x++;
 
		//resizing code to fit the frame from 400x300
		$thumb = imagecreatetruecolor(640, 480);
		if (strcasecmp(substr($img,strrpos($img,".")),".jpg")==0){
 
			$source = imagecreatefromjpeg($img);
		}
		if (strcasecmp(substr($img,strrpos($img,".")),".gif")==0){
			//ignore if animated gif
			if (is_ani($img)){
				continue;
			}
			$source = imagecreatefromgif($img);
		}
		if (strcasecmp(substr($img,strrpos($img,".")),".png")==0){
 
			$source = imagecreatefrompng($img);
		}
 
		imagecopyresized($thumb, $source, 0, 0, 0, 0, 640, 480, 400, 300);
 
		// Output
		imagejpeg($thumb,"images/$x.jpg");
 
	}
 
}
 
 
 
function is_ani($filename) {
    if(!($fh = @fopen($filename, 'rb')))
        return false;
    $count = 0;
    //an animated gif contains multiple "frames", with each frame having a 
    //header made up of:
    // * a static 4-byte sequence (\x00\x21\xF9\x04)
    // * 4 variable bytes
    // * a static 2-byte sequence (\x00\x2C) (some variants may use \x00\x21 ?)
 
    // We read through the file til we reach the end of the file, or we've found 
    // at least 2 frame headers
    while(!feof($fh) && $count < 2) {
        $chunk = fread($fh, 1024 * 100); //read 100kb at a time
        $count += preg_match_all('#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s', $chunk, $matches);
   }
 
    fclose($fh);
    return $count > 1;
}
 
 
?>

Disclaimer: This is meant for personal use only. I don’t encourage using the script to scrape pictures for any purpose other than to view the images.

0 comments

Worlds Slowest Lift!

In September 2010, I sliced a tendon in my foot and had to have tendon repair surgery. Because of this, I was in a cast and on crutches for what seemed like ages.

I then returned to work, but my desk being on the first floor meant that I had to use the lift. It really is the world’s slowest lift:

0 comments

Peterborough Day to Night Timelapse Video

In November 2011, I got an iPhone 4S but my iPhone 3GS was still in fairly good working condition – So I was looking at ways I could use it before sending it off to be recycled.

I decided I could leave it on the window sill of my office taking pictures of the view from my flat to the Cathedral and across Peterborugh city centre including the main train line.

I started the camera taking pictures using a Timelapse app before I went to work, and then turned it off when I got home. After a bit of editing, I came up with the video below.

0 comments

Mrs Cat vs Turkey

In October 2010, we got 2 rescue cats from the Cats Protection League – Neo (Mr Cat) and Cici (Mrs Cat).

They were very timid and jumpy as they has been rescued and rehomed twice. We decided to take them as a pair instead of splitting them up as they had been together a long time.
Fast forward 12 months and the cats are now settled and calm in the flat. Will sit us on and occasionally, even let us pick them up.

The video below shows just how far they’ve come on and Cici (Mrs Cat) was playing witha turkey toy that we got her for Christmas:

0 comments

Tendon Repair Surgery on my foot!

In September 2010, I walked through a glass door whilst on holiday. I was taken to hospital on a ladder in the back of a Land Rover!

After coming back to the UK and having tendon repair surgery (twice, as I re-ruptured the tendon falling over), my foot was in a bit of a state!

I took pictures everyday to track the progress of my foot - Here is the outcome of those photos, put together in a stop motion video:

 

A couple of questions from YouTube:

Did it hurt after surgery?
Yes, it bloody did – still does sometimes. I will never be able to bend my big toe down again, but I am not a monkey, so I reckon I’ll be fine.

Did you need a cast because they told me i need a cast after they’re done?
Yeah. I had a cast on for about 8 weeks after. Which was annoying! Couldn’t shower, so bathed with my leg in the air!


If you have a questions, feel free to leave a comment below!

1 comments

Scraping FFFFound.com for a digital photo frame

The Plan

A few years ago my girlfriend bought me a digital photo frame for Christmas. Since then, we have been on lots of holidays and have plenty of memories to display on the photo frame.

However, being the geek that I am, I decided I could put it to better use!

I love ffffound.com. If you’ve never heard of ffffound, it’s an image bookmarking site and always has some really interesting photos on there. I could waste literally hours looking at all the pictures on there (Ok I have wasted hours on there!). So I decided to make my digital photo frame display images from FFFFound!

I quickly thought of some criteria:

  • No images that are “too square” – It’s a waste of space on the digital photo frame (Which is 16:9)
  • No animated gifs – The Frame doesn’t support these!
  • No nude pictures – Not too bothered about this, but then I might have to explain why there’s a topless woman on my photo frame!

I decided to use PHP to do this as I could knock something up really quickly:

<?
 
set_time_limit(0);
mkdir("images");
 
 
for ($i=0;$i<3000;$i+=25){
 
$contents = file_get_contents("http://www.ffffound.com?offset=$i");
 
//find all images and not thumbnails
preg_match_all("/http:\/\/img\.(.*?)\" /smi",$contents,$match);
 
    foreach ($match[0] as $img){
 
	$img = substr($img,0,-2);
 
	$size = getimagesize($img);
 
	//if image isnt too square
	if ($size[0]-($size[0]*0.2)>$size[1]){
		$x++;
 
		//resize to a ration where the image will fit in the frame
		if ($size[0]/$size[1]>1.50){
			//resize to width
			$ratio = 720/$size[0];			
		}else{
			//resize to height
			$ratio = 480/$size[1];	
		}
 
 
		//resizing code
		$thumb = imagecreatetruecolor($size[0]*$ratio, $size[1]*$ratio);
		if (strcasecmp(substr($img,strrpos($img,".")),".jpg")==0){
 
			$source = imagecreatefromjpeg($img);
		}
		if (strcasecmp(substr($img,strrpos($img,".")),".gif")==0){
			if (is_ani($img)){
				continue;
			}
			$source = imagecreatefromgif($img);
		}
		if (strcasecmp(substr($img,strrpos($img,".")),".png")==0){
 
			$source = imagecreatefrompng($img);
		}
		imagecopyresized($thumb, $source, 0, 0, 0, 0, $size[0]*$ratio, $size[1]*$ratio, $size[0], $size[1]);
 
		// Output
		imagejpeg($thumb,"images/$x.jpg");
 
 
	}
 
 
    }
 
}
 
 
 
function is_ani($filename) {
    if(!($fh = @fopen($filename, 'rb')))
        return false;
    $count = 0;
    //an animated gif contains multiple "frames", with each frame having a 
    //header made up of:
    // * a static 4-byte sequence (\x00\x21\xF9\x04)
    // * 4 variable bytes
    // * a static 2-byte sequence (\x00\x2C) (some variants may use \x00\x21 ?)
 
    // We read through the file til we reach the end of the file, or we've found 
    // at least 2 frame headers
    while(!feof($fh) && $count < 2) {
        $chunk = fread($fh, 1024 * 100); //read 100kb at a time
        $count += preg_match_all('#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s', $chunk, $matches);
   }
 
    fclose($fh);
    return $count > 1;
}
 
 
?>

Any updates will be on github

Note: I couldn’t do the nudity filter. It was possible but took far too long per image, so I decided to scrap it.

Results

When I ran the script, and requested 3000 images, only 1216 met the criteria and took up 55 meg in total. I decided to to just use 10 meg worth, as this would find on the internal memory. – This is still more than 200 images. I have the frame set to change the image every hour, so this is fine for now and if I get bored, I can just scrape the site again for some fresh images.

Pictures: (From the actual frame in the dark)


Video:

Overall I am really happy with how this went and I finally got round to using my digital photo frame too!

Disclaimer: This is meant for personal use only. I don’t encourage using the script to scrape pictures for any purpose other than to view the images.

0 comments

How to add a new Page in WordPress

What are Pages?

In WordPress, you can write either posts or pages. When you’re writing a regular blog entry, you write a post. Posts automatically appear in reverse chronological order on your blog’s home page. Pages, on the other hand, are for static content such as “About Me,” “Contact Me,” etc.

 

  1. Login to the Admin Console at www.domainname.com/wp-admin
  2. Write a page by going to Pages > Add New.


  3. Add a Title
  4. Add the body of the page
  5. Click the Publish button to publish your page or the Submit For Reviewbutton if your posts need to authorised.



How to change a Page address

The address of the page will be set automatically based on the title you enter. If you want to change this you can do the following:

  1. Go to Pages > Edit.
  2. Click Edit under the name of your page.
  3. See the permalink under the title, and click the Edit link to change it.
1 comments

How to create a new Post in WordPress

To write a new post:

  1. Log in to your WordPress Administration Panel at www.domainname.com/wp-admin
  2. Click the Posts tab.
  3. Click the Add New Sub Tab
  4. Start filling in the blanks.
  5. As needed, select a category, add tags, and make other selections from the sections below the post. Each of these sections is explained below.
  6. When you are ready, click Publish or Submit for Review if you need to have your post reviewed.

 

Descriptions of Post Fields

Title 

The title of your post. You can use any words or phrases. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hypens/dashes, and other typical symbols in the post like “My Site – Here’s Lookin’ at You, Kid.” WordPress will clean it up for the link to the post, called the post-slug.

Post Editing Area 

The blank box where you enter your writing, links, links to images, and any information you want to display on your site. You can use either the Visual or the HTML view to compose your posts.

Preview button 

Allows you to view the post before officially publishing it.

Publish box 

Contains buttons that control the state of your post. The main states are Published, Pending Review, and Draft. APublished status means the post has been published on your blog for all to see. Pending Review means the draft is waiting for review by an editor prior to publication. Draft means the post has not been published and remains a draft for you. If you select a specific publish status and click the update post or Publish button, that status is applied to the post. For example, to save a post in the Pending Review status, select Pending Review from the Publish Status drop-down box, and click Save As Pending. (You will see all posts organized by status by going to Posts > Edit). To schedule a post for publication on a future time or date, click “Edit” in the Publish area next to the words “Publish immediately”. You can also change the publish date to a date in the past to back-date posts. Change the settings to the desired time and date. You must also hit the “Publish” button when you have completed the post to publish at the desired time and date.

Publish box 

Visibility – This determines how your post appears to the world. Public posts will be visible by all website visitors once published. Password Protected posts are published to all, but visitors must know the password to view the post content. Private posts are visible only to you (and to other editors or admins within your site)

Permalink 

After you save your post, the Permalink below the title shows the potential URL for the post, as long as you have permalinks enabled. (To enable permalinks, go to Settings > Permalinks.) The URL is generated from your title. In previous versions of WordPress, this was referred to as the “page-slug.” The commas, quotes, apostrophes, and other non-HTML favourable characters are changed and a dash is put between each word. If your title is “My Site – Here’s Lookin’ at You, Kid”, it will be cleaned up to be “my-site-heres-lookin-at-you-kid” as the title. You can manually change this, maybe shortening it to “my-site-lookin-at-you-kid”.

Save 

Allows you to save your post as a draft / pending review rather than immediately publishing it. To return to your drafts later, visit Posts – Edit in the menu bar, then select your post from the list.

Publish 

Publishes your post on the site. You can edit the time when the post is published by clicking the Edit link above the Publish button and specifying the time you want the post to be published. By default, at the time the post is first auto-saved, that will be the date and time of the post within the database.

Post Tags 

Refers to micro-categories for your blog, similar to including index entries for a page. Posts with similar tags are linked together when a user clicks one of the tags. Tags have to be enabled with the right code in your theme for them to appear in your post. Add new tags to the post by typing the tag into the box and clicking “Add”.

Categories 

The general topic the post can be classified in. Generally, bloggers have 7-10 categories for their content. Readers can browse specific categories to see all posts in the category. To add a new category, click the +Add New Category link in this section. You can manage your categories by going to Posts > Categories.

1 comments

How to Test Web Applications

Testing Web applications is very different to testing Windows based applications and this document aims to identify key areas of testing, error reporting and common issues in this area.

It is also designed to cut down on time required to gather required information so that more time can be spent fixing issues.

This is not designed to be a definitive guide, but more of a starting point for web testing.

How to Setup for Testing

Internet Explorer

IE Dev

IE Developer Toolbar

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en



This toolbar from Microsoft aids developers in gaining quick access to the code and enables them to change things on the fly for testing as well as debugging JavaScript etc.

It docks to the bottom of the window, once activated from the tools option.

Also ensure that under Tools->Options->Advanced that “Disable script debugging” is unchecked

Note: IE8 has its own debugger built in, and therefore this toolbar does not need installing but ensure the “disable script debugging” is unchecked. If trying to track down a problem, which is not displaying or showing in the normal browser, click “Start Debugging” in the Debugger after choosing it from the menu or pressing F12.

Firefox

firebug

Firebug

https://addons.mozilla.org/en-US/firefox/addon/1843



Firebug is an addon to Firefox and is extremely useful in debugging Web Applications.
Once installed, firebug adds a panel to the bottom of the browser, which can be activated by clicking the firebug icon in the bottom right. It can also be removed to a floating window.

Safari

safari

Like IE8, this is built into the browser. Choose Preferences, Advanced, then select the “Show Develop menu” option. This then adds similar options to Chrome (see below) and also opens in a floating window.

Chrome

chrome

Chrome has a built in debugging console, so I simply recommend that you open this prior to testing.

To do this, click on Page Menu->Developer->JavaScript Console and you will see the dialog open in a floating window:

Things to Test

As well as standard test plans; there are other points that should be specifically tested:

SQL injection

SQL injection is a trick to inject SQL queries/commands as an input via web pages. Many web pages take parameters from web users and make SQL queries to the database. Take for instance when a user logs in: the web page uses an SQL query to the database to check if a user has valid name and password. With SQL Injection, it is possible for us to send a crafted user name and/or password field that will change the SQL query and thus grant us access to other data.

All form fields that communicate with a database (e.g. Login Form, Add User, Save Settings) are potentially vulnerable.



For more details and for how to test please see:

http://www.securiteam.com/securityreviews/5DP0N1P76E.html

http://en.wikipedia.org/wiki/SQL_injection

Spurious and Foreign Characters

Some characters can cause websites problems – These include, but are not limited to commas, quotes, double quotes, ampersands and brackets.

This is because these characters are used within the coding language itself to terminate strings and function names etc.

The code then does not know what to do with these additional characters and throws an error. These errors can be a simple display issue, or the whole application can crash.



These items need to be tested within areas that then display within the web application. For example, username, configuration options and titles are ideal locations to try and enter these characters to see if the field handles them correctly.



Foreign characters can often be changed into their relevant HTML codes that can start with ampersand or hash causing the same issues as above.

Spelling

Obvious, but needs checking as there are still spelling mistakes in many Web Applications.

Common Issues between browsers

As well as the issues identified above, there are often differences between the ways that browsers display the same information:

Spacing + Rendering

Often Internet Explorer will decide to display padding and margins on HTML elements differently to other browsers. Therefore, it is important that all web applications look similar and correct in different browsers. This does not have to be exactly the same, but must look correct in isolation.

Languages and Character Display

Different browsers should display character sets the same but there can also be some differences in rendering of characters.

More people visited the World Wide Web Consortium (W3C) website using Firefox or Chrome than Internet Explorer in Oct 2010. This shows that this is a very important area to look at.


Client Side vs. Server Side Errors

There are 2 different types of errors you will encounter when testing web applications:

Server Side Errors

These errors will normally stop the application from working all together and you will receive an error message on the screen. This could be something like an error connecting to the database or an error in the code itself.

In many Web Applications, when a Server side error occurs, they display a friendly message to the users instead of the actual error message, although the full error message is sometimes also accessible.


Client Side Errors

Client Side Errors

These errors normally do not stop the whole application from working and the error will normally not appear within the actual webpage.

These errors may cause functionality errors, e.g. tabs not closing or buttons not working.

Client side errors are trapped in the debugging tools relevant for each browser detailed in this document.


How to report a problem to a Developer

The first and most important things to note when reporting are the exact steps taken to reproduce the issue – including relevant details. E.g., The username you are entering or the name of the user you added when the problem occurred or other data you have entered into a form.

Also, important to note is the Browser Type (e.g. Internet Explorer, Firefox), the browser version (available from Help->About) and the Operating System as there are often subtle differences between using the same browser but on different Operating Systems.

If an actual error occurs, then we need the error message too:

For a client side error, you can copy the error from one of the debugging tools listed at the top of this document.

For server side errors, we need the full details sent back from the server – if available.