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/

PHP – How to Debug In PHP

Carsonified has a good blog entry about how to debug in PHP. It outlines the 4 php error types, using var_dump() and recommends some tools to help with debugging.

http://carsonified.com/blog/dev/how-to-debug-in-php/

Server Side Scripting – A Comprehensive guide to .htaccess

I came across a great resource on the various uses of .htaccess, details on how to:

• Create custom error documents
• Blocking users/sites by referrer
• Redirects
• Preventing hotlinking
• Preventing directory listing

These and more can be found at:
http://www.javascriptkit.com/howto/htaccess.shtml

Windows – See what programs are accessing the Internet

Discovered a handy windows command that displays all active internet connections. This can be really handy for spyware/adware/malware/virus checking. It works on Vista and XP. Here's what to do:

1. Click Start - Run
2. Type "cmd"
3. In the command prompt type "netstat -b"

A list of results like the following should appear that look like this:

The table lists the following:

• Proto: The protocol being used by the process
• Local Address: The local address of the process
• Foreign Address: The remote address of the process
• State: Which state of connection the process is in
• PID: The process identifier (Each process is given an ID, this can be siaplyed in Task Manager by customizing the columns of the processes tab, click here to see a tutorial)
• The name of the process: This is the name of the process which is trying to access the network, it is placed in square brackets, i.e.  "[application_name.exe]"

If the name of the process doesn't look familiar check a site like ProcessLibrary, this will list what each process does.

A more indepth article covering netstat is located here:

http://commandwindows.com/netstat.htm

Video – Online Aspect Ratio/Pixel Dimensions Calculator

Been working more with video recently, doing some stop motion animation for a local artists' video. Found this handy calculator for reference:

http://www.digitalrebellion.com/aspect_calc.htm

PHP – Select Menu with Current Month Selected

Here's a PHP class that displays the current month in a select menu list of months:

<?php
$curr_month = date("m");
$month = array (1=>"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$select = "
<select name=\"month\">\n";
foreach ($month as $key => $val) {
    $select .= "\t<option val=\"".$key."\"";
    if ($key == $curr_month) {
        $select .= " selected=\"selected\">".$val."</option>\n";
    } else {
        $select .= ">".$val."</option>\n";
    }
}
$select .= "</select>
 
";
echo $select;
?>

I found this script on: http://www.finalwebsites.com/forums/topic/select-menu-with-current-month

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.