Michael Doyle | Blog

jQuery – A Beginners Guide

Long time, no post! Freelancing, tight deadlines, christmas, etc.

What is it?

jQuery is a javascript framework, it all happens on the client side, and allows developers to enhance the user experience of a website. Scrolling, sliding, fading, etc. it has a lot of cool features that can really add to the overall feel of a website. I've just done my first tuorial tonight and it seems all pretty straight forward.

Here's a short, interesting interview with Karl Swedberg (he runs learningjquery.com):

• http://carsonified.com/blog/dev/jquery/karl-swedberg-on-jquery/

Tutorials

I've used MooTools (another javascript framework) before and found it nice and pleasant to use. Since then, everyone has been raving about jQuery (actually, I'm about 6 months late here), so I looked up a beginners guide to it. The tutorial I did is located here:

• http://woorkup.com/2009/11/22/jquery-for-beginners-making-your-website-cool/

Here's the result of the tutorial (I changed it a little)

Here's a tutorial on how to build  an image/content slider:

• http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider/

Or you could try searhing twitter for a list of up to date tutorials

• http://twitter.com/#search?q=jquery%20tutorial (it really is a testament to it's popularity when you see the amount of tutorials)

jQuery Plugins

Tripwiremagazine has a list of some plugins for jQuery that are useful (although some can be achieved with css). Here is the link:

• http://www.tripwiremagazine.com/2009/11/is-top-rated-jquery-plugins-the-best.html

Noupe also has a larger list of plugins:

• http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html

Or you can learn how to create your own:

• http://woorkup.com/2009/11/19/jquery-lesson-series-how-to-implement-your-first-plugin/

Overuse

I've come across a lot of sites that use jQuery just for the sake of it, it does make a site look a little slicker but only when used right. When its overused, it can get really tiresome and completely removes it's impact. I've seen a few sites with only one UI element utilising jQuery that really impressed me.

Conclusion

This is the first time I've used jQuery, and I'm really impressed. The huge interest and large amount tutorials make it look like it's hear to stay. It has easily overtaken MooTools and Scriptalicious and it's developer base is growing rapidly.

Flash – Cheat Sheet

Flash can be a little slow to navigate around, luckily alot of common functions have keyboard shortcuts. I made this Flash Cheat Sheet for all common shortcuts to shorten development time.

I didn't write the cheat sheet. I formatted this page, so you can print it out in a nice readable pdf version (there's also a .png version).

Flash Cheat Sheet - PDF (1.6MB)

Flash Cheat Sheet - PNG (320Kb)

If there's any mistakes, or anything that I've left out, let me know and I'll fix it.

Web Testing – Fixing Layout Problems in IE

Here's a great resource on some simple steps to take when fixing bugs in IE6.

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

One extremely handy tool mentioned in the article is IETester. It's a program that renders websites in IE 5.5 to IE8.

CSS – The Four Bubbles Model

Woorkup has an interesting css coding methodology, it's a top down model which has 4 stages.

• The first stage resets HTML elementes
• The second stage defines the main css elements (#header, #container, etc.)
• The third stage defines custom classes (.right_align, .border, etc.)
• The fourth stage deals with redundant coding; removal and optimising

I definitely give my thumbs up to this method. The article goes into greater detail and is located:

http://woorkup.com/2009/10/09/a-methodic-approach-to-css-coding-four-bubbles-model/

Web Design – Wireframing (A Beginners Guide)

Smashing magazine had a lengthy post about wireframing (which I mentioned previously), BuildInternet have a crash course on wireframing.

http://buildinternet.com/2009/09/why-your-next-website-should-be-designed-with-wireframes/

In the article, a great online wireframing application is recommended called HotGloo. Signup is required, but it is free and you get your own subdomain name which allows you to share your projects with clients.

Web Design – Free PSD Templates

Here's an article that provides over 70 PSD web Templates:

http://www.instantshift.com/2009/09/17/70-ultimate-round-up-of-free-psd-website-templates/

Inspiration – 12 Tips for Creating a Great Portfolio

Noupe has a good article covering some essential tips for portfolios. THere's also a showcase section of good portfolios with the pros and cons of each.

http://www.noupe.com/design/12-tips-for-creating-a-great-portfolio-site.html

Design – PSD Files for Designers

Hongkiat has a great list of PSDs for use in web design. Objects include mp3 players, monitors, computers, icons, etc.

http://www.hongkiat.com/blog/60-high-quality-photoshop-psd-files-for-designers/

Wordpress – Cheat Sheet

Here's a great cheat sheet (pdf) for wordpress:

http://ekinertac.com/?p=259

PHP – Retrieve and display your recently listened to tracks from last.fm

I've been playing around with retrieving my recently listened to tracks from last.fm so that I can use it on my portfolio. Last.fm provides an XML file of recently listened to tracks, so I wrote a php function to retrieve them. Below is the script, it's just basic HTML at the moment so that it can be properly stylised. I've commented all the code so you can see how it works.

//enter your last.fm username
$username = 'spahndirge';
//in seconds, how long to wait until your recently listened tracks are checked for new entries
$time = 300;
//this is the URL of the last.fm xml file of your profile
$lastfmFile = "http://ws.audioscrobbler.com/1.0/user/$username/recenttracks.xml";
//the number of tracks you want to display, this can't be above 9
$numOfTracks = 5;
 
function getTracks($username, $time, $lastfmFile, $numOfTracks) {
//this will be the local xml file written to your server
$myLocalFile = $username.'.xml';
//if the local xml file doesn't exist or if local xml file is older than the time set
if ((!file_exists($myLocalFile)) || (time()-filemtime($myLocalFile)>$time)) {
	//get the last.fm xml file and place it into the contents variable as a string
	$contents = @file_get_contents($lastfmFile);
	//open the local file or create it if it doesn't exist
	$temp = fopen($myLocalFile, "w");
	//write the contents of the lastfmFile to the local file
	fwrite($temp, $contents);
	//close the file
	fclose($temp);
}
//grab the local xml file and place it into the xml variable
$xml = @simplexml_load_file($myLocalFile);
//create an unordered list of the track name and artist from the local XML file
print "
<ul>";
	for ($t = 0; $t <= $numOfTracks; $t++) {
		print "\n
<li><a href=\"".$xml->track[$t]->url."\" target=\"_blank\">".$xml->track[$t]->name." - ".$xml->track[$t]->artist."</a></li>
 
";
	}
	print "</ul>
 
";
}
 
getTracks($username, $time, $lastfmFile, $numOfTracks);

It isn't the most efficient code, but it works!

I set the time to 300 seconds (5 minutes), it's around the average time it takes to listen to a song. This is to reduce server load and loading times; there's no point in checking for a new song every minute or two.

If you have any improvements on the script, let me know.