I’ve been using it for a few weeks now and it has been so much more stable than 1.4.x – I pretty much bypassed that whole release as it was full of bugs and was a step backwards for jQuery in my opinion. 1.5.x has proven to redeem itself and proven to be faster and more stable then the previous 1.4.x release. Fingers crossed it stays that way and I don’t run into any major compatibility issues. 1.4.x was particularly unstable IE7.

You can get more details or download jQuery from jquery.com

Instead of re-writing all the new features and speed improvements jump on the official release site for more details:

http://jquery14.com/day-01/jquery-14

Be sure to read the backwards incompatibilities at the bottom just to make sure nothing will break when you upgrade.

I’ll post a review once I’ve had a chance to put it through it’s paces properly.

Web Form Validation

This plug-in is one that I will be using quite often. It takes the hassle out of coding a validation script for your web forms and works with 1 simple line of code. You can easily set which fields are required and what type of field it is in the form via simple meta data in the tag. You can also easily change the look of the error messages via css.

Farbtastic Color Picker

More then just looks, this color picker is so easy to install you feel like you’re cheating! Works brilliantly and puts the hex straight into any input field ready for you to use in your web app.

Flash

This plugin makes adding flash a little bit simpler and can easily handle your version checking for you.

Simple Page Peel

You’ve seen it everywhere, the ugly flash thing in the corner where you rollover it and it peels the page back to reveal some crazy offer. Well here is a jQuery implementation for it but unlike it’s flash brothers its not ugly!

Cookies

Mmmmm, yum! No wait, this is the browser kind. This plugin gives you a simple way to create and delete cookies using Javascript.

Stylesheet Switcher

Speaks for itself, you can easily switch between CSS stylesheets.

Curvy Corners

Want cross browser curves without the hassle of corner images? This is for you. Not as smooth as the CSS3 code but it’ll work across all modern browsers.

What is a Javascript Library?

Anyone who’s ever done serious coding with Javascript knows that to get code to work cross-browser is a nightmare. Internet Explorer likes one way, Safari another, and Firefox another. It can be quite time consuming. This is where the Javascript libraries come to save the day! Hurray! Javascript libraries take the hassle out of coding for cross browser by extending Javascript so you don’t have to waste time developing for each browser.

So which one to choose?

There are two main Javascript libraries which are really in play, those are Prototype and jQuery. There is also MooTools, however it is not anywhere near as widely used as Prototype and jQuery. That’s not to say it’s not as good, but I’m just going to compare the two leaders. It is important to note, there is no right or wrong answer, there is just preferences

Prototype – The Grandfather

It’s older but wiser. The key focus of Prototype is that it’s not really  designed to re-work the way Javascript is written, but to make your code more stable across more browsers and extented Javascript’s capabilities . Prototype builds on what’s already in Javascript, so you generally still get to do Javascript coding. It doesn’t build in fancy effects etc like jQuery does, it has it’s little sister scriptaculous to do that for it. One issue with Prototype is size, jQuery is available minified and gzipped, so it’s ready to go at 19kb. Prototype doesn’t have this available which is definitely hurting it’s numbers with younger developers. To gzip javascript yourself using PHP see my gzip script here.

So why have I dubbed it “The Grandfather” and will this effect future development?

The problem with Prototype is it is becoming less and less active whilst jQuery becomes more and more active. More and more sites are switching to the hip young jQuery. Key switchers here are Twitter, Digg, NBC and the list goes on. So is the lack of progress going to affect it’s future? Right now no, but fast forward a year from now, if it’s still as inactive as it is now as newer browsers come out it’s going to quickly die out.

Prototype is still very stable and well featured, so it’s not to be overlooked.

jQuery – The Cool Guy

In contrast to Prototype, jQuery is built to reshape how Javascript is written and make it faster to write scripts. In short it does the hard work for you. jQuery is now the most widely used and supported Javascript library out there. There are literally hundreds of plugins, possibly thousands and the support is only growing. According to SlickSpeed jQuery is significantly faster than Prototype, with the latest release said to be much much faster again. We’re only talking milliseconds so it’s not necessarily a huge deal but it’s always better to shave off time where possible.  It can take a bit of getting used to if you’re an advanced Javascript developer, but it seems like it will be of benefit in the long term. If you haven’t learnt Javascript before, jQuery can make it easier for you to get started making great scripts today.

So which to choose?

Ultimately it’s up to you, if you can’t decide, you can use both. I myself have been using Prototype for sometime and it is implemented in just about all of my sites AND I have built my own set of functions to compliment it. Having said that, the temptation to trial jQuery has gotten too great so I will be using both for a period of time before weening out Prototype now that jQuery can do pretty much all that Prototype can do, plus do it some of it easier.

They’re both great libraries and each have their pros and cons. jQuery is just hitting more of the pros today.

Download Prototype here

Download jQuery here

What is it?

To learn how to find the loop, it would be good to know what it does, and it’s purpose within a template. Loops are used in virtually all computer programming languages, it’s purpose it to repeat a set of tasks. Basically, you could code the same thing 10 times or use a loop to repeat the action 10 times. In WordPress, loops are used to get each blog article, or piece of information from the database, then read it out in HTML. This is how you see multiple articles presented on your blogs homepage without the code being in the template for each article. “The Loop” will generally only be on the index.php page of your template.

Finding the loop…

Every PHP programmer will program their template differently which means each loop is different. to combat this I’m going to attempt to arm you with the basics of PHP so that you can understand the workings of the code and find “the loop”.

Reading PHP

Lets start with separating the PHP from the HTML. It is important to recognise the difference between PHP and HTML, PHP being what’s known as a “Server-Side Language” and HTML being a “Client-Side Language”. PHP is run on the server, hence the term “Server-Side Language” – All PHP scripts are read by the server before any information is sent to the web browser for the “client” to see. HTML being “Client-Side” is read by the web browser on the clients side – using their computer resources, not the servers. “Server-Side” scripting will always be processed first on the server, then the information will be sent the “Client-Side” so it can present the information to you.

Finding the PHP is fairly easy. All PHP is enclosed between either of the following:

<?php
	// PHP script here
?>

<?
	// PHP script here
?>

Both <? php & <? do the exact same thing, just one is shorter than the other. ?> will signal the end of a set of PHP scripting. So to find “the loop” you need to look within these.

The start of the loop!

The proper term for the most commonly used “loop” in WordPress is a “while loop”. The most commonly used “while” codes will look like this:

while (have_posts()) : the_post();
if (have_posts()) : while (have_posts()) : the_post();

This is the start of “the loop”. It’s effectively telling the server “while there is new posts, do the following”. Not too different to standard English. The “if” on the second code is first asking “if there is a post, then do the while loop”.

It might be an idea to mark this spot for reference, so after the PHP script put a HTML comment like follows:

<?php while (have_posts()) : the_post(); ?>
	<!-- Start of the loop -->

The end of the loop!

Now we’ve found the start of “the loop”, we need to find the end. This should always look as follows:

endwhile;

This will end the content that is being “looped”.

Lets mark the end of “the loop” with a HTML comment once more but this time above the PHP script like follows:

	<!-- End of the loop -->
<?php endwhile; ?>

Okay so now you have found “the loop” the content within where you have marked is inside the loop, anything outside this script area is “outside the loop”. HTML within this loop will behave as normal HTML however it is just repeated multiple times.

So there we have it – finding “the loop” in a nutshell. “The loop” will generally only be on the home page and there should only be one loop, if you find multiple loops, use your HTML knowledge to find which is the correct loop for what you are trying to do.

If you use the prototype javascript framework there is a call built in! Handy…

Here’s the code for Prototype users:

var pos = $("elementID").viewportOffset();
var x = pos[0];
var y = pos[1];

Nice and easy…

For those of you who don’t use prototype, below is a function you can use to get the X & Y coordinates relative to the page (viewport).

The Function:

function viewportOffset(forElement) {
	var valueT = 0, valueL = 0;<
	var element = document.getElementById(forElement);
	do {
		valueT += element.offsetTop  || 0;
		valueL += element.offsetLeft || 0;
		if (element.offsetParent == document.body) break;
	} while (element = element.offsetParent);
	element = forElement;
	do {
		if (element.tagName == 'BODY') {
			valueT -= element.scrollTop  || 0;
			valueL -= element.scrollLeft || 0;
		}
	} while (element = element.parentNode);
	return [valueL, valueT];
}

This is a modified function from the prototype framework.

Calling The Function:

var pos = viewportOffset("elementID");
var x = pos[0];
var y = pos[1];

I tried several of the functions on various blogs etc none of them seemed to return anything but 0 in Safari. The above has been tested and works in the latest versions Safari, Firefox, IE and Opera.

Enjoy!

The Solution

Use javascripts RegExp to convert your variable before parsing it through the replace function.

var regex = new RegExp(yourvariable, “g”);
return yourstring.replace(regex, “replaced”);

It’s quite an easy solution, no major hair pulling involved!

I’ve released version 1.1.1 of my gzip php script for Javascript and CSS which is a minor updates and adds a few handy new features. You can get the latest version of the script here. You can read the release notes here. ]]> http://www.thewebdevelopmentblog.com/2008/12/script-new-version-of-gzip-for-javascript-css-now-available/feed/ 2 http://www.thewebdevelopmentblog.com/2008/11/tipscript-gzip-compression-script-for-javascript-and-css-updated/ http://www.thewebdevelopmentblog.com/2008/11/tipscript-gzip-compression-script-for-javascript-and-css-updated/#comments Sun, 02 Nov 2008 09:21:11 +0000 Jason Stockton http://thewebdevelopmentblog.com/?p=140 Today I’ve updated my gzip compression for javascript and CSS script to fix a security flaw. If you’re using V1.0 I advise you update to V1.1 which is available here. You can read the release notes here.

Browsing around I looked at various benchmarking results, some old, some recent to see how the browsers were fairing. Only they don’t seem to agree with each other, and using some in real life, browser that are supposed to be speedy are actually visually slower than the ones that are supposedly slower. None of it makes sense. On my search I found a few speed testing tools I could use myself, yet again, it didn’t add up.

One test I tried was benchmarking tool posted on Google. In the test apparently bigger is better… My tests came up as follow…

Safari 3 – 190

Opera 9.6 – 199

Firefox 3 – 208

Chromium – 2297 (Chromium is a port of Google Chrome Beta for Mac)

Given these results you’d think that Chromium was lightning fast compared to the others. In real use on a Javascript intensive site of mine, Chromium choked as did Firefox 3, however Safari and Opera were blazing fast. So I re-read the site because I was thinking maybe I misread. I didn’t, it still said bigger is better.

It’s got me thinking why? I studied the tests for about 2 minutes then I spotted a pattern in the ones that seemed to perform better. The test on Google ran 5 tests through 5 different test engine of different script sizes. Generally the browsers varied at speeds in each test, but there was some strange happenings with the browsers that scored highest. They didn’t seem to score so high in the big tests in comparison to the small test scripts. Here are my findings….

Safari 3 – 121 + 411 = 3.4x better

Opera 9.6 – 121 + 571 = 4.7x

Firefox 3 – 193 + 253 = 1.3x

Chromium – 2561 + 2984 = 1.16x

What this shows is even though the browsers may be faster at little jobs, once you start using intense Javascript some browsers tend to slow where as the ones that appear quicker in real use are the ones who’s performance increased compared to the initial shorter scripts. My theory is Safari and Opera are actually faster at more intense scripting, compared to Firefox and Chromium which are better at less intense scripts.

So after all that I think it’s safe to say different browsers perform differently depending on what the Javascript task it’s performing. If it benchmarks better it won’t necessarily mean better performance on your particular script. If all else fails do some tests!

NOTE: These tests were run on an iMac 2.8GHz Intel Core 2 Duo with 2GB SDRAM running Mac OS X 10.5.5 with various tabs open in each browser. Test result will vary on different systems. Chromium shouldn’t be used as a benchmark for Google Chrome as the port is significantly slower than the real version of Google Chrome.