Came across a cool app last night called Awesome Note, a note taking and to-do list maker but with a twist! The app has an amazing interface and looks really smart! Check it out at the link below:

http://bridworks.com/

Back in February I wrote a post about Google Sync and how you can sync your Google Calendar and Contacts to your iPhone wirelessly using the exchange feature on your iPhone. Well Google have now added support for push mail to their sync feature! In their blog post they write about their decision to add this.

If you have already setup your Gcal and/or Gcontacts as per my guide here to your phone then adding the mail to it is super simple….

• Go to Settings
• Go to Mail, Contacts, Calendar
• Click on the Exchange account you currently have setup to your Gmail Cal and/or Contacts
• Flick Mail to Yes
• Now choose which folders you want to sync at the bottom of the current page

Now when you go to Mail from the home screen you will now have your Exchange account listed in your accounts list.

It’s really that simple! :) any probs let me know in the comments.

Google have just released there Chrome Frame, an ‘open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer’. This looks to be very promising and works with IE6 too!

Check it out here

Google has acquired spam blocking reCAPTCHA. Read the announcement from the Google blog here.

Okay so if you read my blog you will know I have already posted a tutorial showing you how to add your latest tweet to your website. Well this is part 2, and in part 2 we look at how to add your tweets to your blog/website in a much better way, using SimplePie.

SimplePie makes it so simple to pull in feeds from not only twitter, but any RSS feed, and it allows you to do this with many more options then my previous tutorial! Lets start by visiting http://simplepie.org and downloading the latest copy of SimplePie. Next, unpackage the zip and upload the file simplepie.inc to your server, now your ready to start coding!

Now either create or open your PHP page, then include the file at the top of the page using the following code…

require_once('simplepie.inc');

Now you need to tell SimplePie the URL of your Twitter Feed, you can do this by adding the following line of code…

$feed = new SimplePie('http://search.twitter.com/search.atom?q=from:USERNAME');

Make sure you change USERNAME to your own Twitter username. Next you need to add in another two lines (shown below). The first line is needed to make sure SimplePie is initiated, the second allows SimplePie to tell what kind of feed is been pulled (ATOM, RSS, etc).

$feed->init();
$feed->handle_content_type();

Thats the basic setup done and SimplePie should hopefully be pulling the feed to your website. Now we need to use this feed and display it correctly on the website. Firstly, here is the code in full that should be at the top of your page…

require_once('simplepie.inc');
$feed = new SimplePie('http://search.twitter.com/search.atom?q=from:USERNAME');
$feed->init();
$feed->handle_content_type();

Right lets get the Tweet displaying on the page! To do so, we are going to need to call the Tweet itself, the link to the Tweet and also the date the Tweet was Tweeted (alot of Tweets there I know lol). We do so by using a simple foreach loop, which I have listed below…

<?php foreach ($feed->get_items(0, 1) as $item): ?>
<p><?php echo $item->get_description(); ?> <span><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_date('D, M j, Y'); ?></a></span></p>
<?php endforeach; ?>

So lets explain the code! Earlier we set our feed URL to the value of $feed using SimplePie, now using the foreach loop we can use $feed->get_items(0, 1) as $item to call each tweet one at a time and pass it to the variable $item, which we can then do calls to get the information we need. The two numbers between the parentheses that you can see in the above block of code, can be changed to suit, I have explained what both are below:

• First number – this is the number of the item you want to start at. Remember that arrays begin with 0, not 1, so for this example, the most recent tweet will be called first. Changing this item to 1 will skip the latest tweet.
• Second Number – this is the number of items you want SimplePie to return. In this example I have it set to 1, which will only call one tweet.

Now we have our foreach loop setup and we know how to call each tweet, we need to do a few calls to get something displayed on the page. SimplePie has a huge list of functions that can be called, anything from calling Feed author right down to the Feed items date/time, etc, these can all be found here. For our Tweet we will require each items title, link and date. Using the SimplePie documentation, we can see that we need to call the functions within our foreach loop:

• get_description()
• get_permalink()
• get_date()

To call a function we need to use the following…

$item->FUNCTION_NAME();

Now we can introduce some HTML to sort out how the page will look. In this example, I have used simple paragraph tags and in between these tags I have called the title and the date of the Tweet. I wrapped the date with span tags so that I can then use CSS to shrink the text size and give more focus on the Tweet text. Finally the date is linked to the Tweet itself over at Twitter.

Now save it all, upload your files and try it out! Fingers crossed your page should be displaying x number of Tweets from your profile. I have included the source code below which you can download, if you have any problems then please leave a comment.

Download Source Files (.zip) | Demo

Facebook are stepping into deep Twitter territory by recently announcing that they will introduce @ replies to users posts and status updates, read the announcement here…

http://blog.facebook.com/blog.php?post=109765592130

I came across this cool new plugin for Firefox which lets you insert Latin text with a simple right click :) Install it now…

http://sogame.awardspace.com/dummylipsum/

If you tend to put a lot of PNG images on your websites like I do, then you will know how much of a pain IE6 is! IE6 can display PNG images but it doesn’t play to well with transparent ones, in fact, the transparency won’t work at all! To get around this I have been using the following css hack to display a GIF image in IE6…

background:url('../images/image.png') !important;
background:url('../images/image.gif');

The hack is the !important part of the CSS, because if you put !important after a line in your CSS, then it will take precedence regardless of what appears after it, except in IE! This means for all browsers the PNG is displayed, but for IE the second line containing the GIF is displayed.

This is a good solution for most, and I have used it to get around the IE6 problem on several sites I have designed. Fortunately, there is another option which uses JavaScript to let you display PNG’s properly in IE6, with working transparency!

The DD_belatedPNG script was so simple to setup and so far it has worked like a charm! I have not had chance to fully test it but from what I have seen, it looks good! Here’s how to set it up for your website:

1) Download the JS file from here.

2) Include the following script in the header of your website:

<!--[if IE 6]>
<script src="http://www.domain-name.com/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('');
</script>
<![endif]-->

3) Finally, the fix(”) part of the script requires you to include any classes or id’s from your CSS that have PNG images set as their background. See the example below:

<!--[if IE 6]>
DD_belatedPNG.fix('.class1, class2 img, .class3, div.class4');
<![endif]-->

As long as you have your CSS Selectors correct inside fix(”) then the PNG’s should now display correctly within IE6! If you need to test out your site in IE6 then you can use IETester which is free and can be downloaded from here.

I recently came across this cool about us page and instantly fell in love with the hover over effect they used on the images. Well anyways, I tought myself how to do this same effect and now I’m going to show you guys how to do it! It’s very easy to do but very effective! Here is another cool site that has also used a similar effect and I’m sure you will agree it really makes the page stand out!

For this tutorial, you will need to make two images, one which is the normal state (ie. the image which will display on the page when the mouse isn’t hovered) and also a hover over state for when the mouse is. Here are the two images I am going to use (of my funky dog charlie)…

The left image is what a user will see when the page is loaded. This image has been dimmed, but you can do whatever you want with it, for example, you could desaturate the image to have a grayscale to colour effect. The right image is the original, as you can see both are 280px by 280px in size.

Right now we have these sorted, we will look at the code. First thing you need to do is display your image. The code below is a simple list containing one item. Inside this item, there is an image tag, which will be used to display the image in ‘normal state’. I have a hyperlink around the image tags, you will need to replace the hash (#) with the URL that you want the image to click through to. For this demo I have labelled the UL with a class of .img_list and the list item as .image_one. Finally, you will also see below that an empty span with the class of .rollover has been inserted between the A tags. This span essential, because this is what the jQuery uses to show the second ‘hover over’ image.

1
2
3
4
5
6
7
8

<ul class="img_list">
 <li class="image_one">
  <a href="#">
   <span class="rollover"></span>
   <img src="images/img_off.jpg" alt="" width="280" height="280" />
  </a>
 </li>
</ul>

Next, open your stylesheet and add the following…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

ul.img_list {
	display:inline;
	float:left;
	height:280px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}	
 
li.image_one a {
	display:block; 
	width:280px; 
	height:280px; 
	position:relative;
}
 
li.image_one a .rollover {
	display:block; 
	position:absolute; 
	top:0; 
	left:0; 
	width:280px; 
	height:280px; 
	background:url(images/img_on.jpg);
}

The CSS above sets the ‘hover over’ image as the background image on the span contained within the list item .image_one. This span is then floated directly on top of the ‘normal state’ image using absolute positioning. So if you load up your page now, you will see that you have a list item that contains two images, but you will only be able to see the image img_on.jpg.

Now we have these two images in place, we will use jQuery to do the effect. The first thing you must do and this is super important, is to include jQuery between your header tags! Without this the effect won’t work. If you are new to jQuery, then it is the same as including any JS file on your page, just use the following line of code…

1

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

The next block of code also needs to go between your header tags, and is what does the effect when the mouse is hovered over the image. We need to start of with the following line…

1

$(document).ready(function(){

All this does is checks to see the page is loaded before performing the lines of code that come below it. Next you will need to add the following…

1

 $(".rollover").css({'opacity':'0'});

This is fairly obvious as to what it does, it assigns anything with the class rollover to have an opacity of 0%. Basically it hides the element with that class, so in this case, it will hide the span inside the list item. This will mean that when the page is loaded, the user will be left with the dimmed image, which is how we want it to be.

Next we need the following code, which will check for when the mouse cursor is hovering over our image…

1
2
3
4
5
6
7
8

$('.img_list a').hover(
	function() {
		$(this).find('.rollover').stop().fadeTo(500, 1);
	},
	function() {
		$(this).find('.rollover').stop().fadeTo(500, 0);
	}
)

The functions above will only action when the mouse is hovered over any hyperlink within any item that has the class img_list assigned to them.

The first function deals with the over function, ie, when the mouse moves over the image, and once this occurs, the span which has previously been set to 0% opacity, is faded back in to show on screen. Now when the mouse moves off the images, the second function occurs, which sets this same span back to 0% opacity.

Here is the full block of code you should have in your header…

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

<script type="text/javascript">        	
$(document).ready(function(){
 
    //Set opacity on each span to 0%
    $(".rollover").css({'opacity':'0'});
 
	$('.img_list a').hover(
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 1);
		},
		function() {
			$(this).find('.rollover').stop().fadeTo(500, 0);
		}
	)
 
});		
</script>

You should now have a working fade effect when you hover over your image. You can customize the fade effect to be quicker or slower as you wish and you can also set to what opacity the image fading in shows at. It is really easy to change the settings on the fade, I will briefly show you below…

1

fadeTo(SPEED, OPACITY);

The SPEED setting can be either a string or a number. String values are predefined and can be either “slow”, “normal”, or “fast”. Numerical values are displayed in number of milliseconds to run the animation (e.g. 1000).

The OPACITY value has to be a number between 0 and 1. You can also use decimal point, for example, 0.50 would be the same as 50% opacity. Below are two links which will explain the Hover and Fade effects in a bit more detail…

http://docs.jquery.com/Events/hover
http://docs.jquery.com/Effects/fadeTo

Thats the end of the Tutorial, any questions then please comment this post and I will get back to you asap. You can download the source files from this tutorial below, as well as a live demo.

Download Source Files (.zip) | Demo

If you own a 13″ MacBook like me, then you will know the resolution for the screen differs from that of 90% of PC Laptops, and therefore, the most common of Desktop wallpapers come in 1024 by 768 format. Here is a compilation of some of my favourite 1280 by 800 wallpapers I have collected along the way! I haven’t been able to put a source or author on any of these because I have downloaded them at various times so if one of the wallpapers listed is your creation, then comment me and I will add it on for you! :) Anyways, here is the collection….

Another 10 to follow soon :)