May be old but it contains lots of jQuery tricks and tutorials links:

http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

JQuery plugin to rotate images made in pure Javascript + HTML5 <canvas> element and VML in IE:

http://wilq32.googlepages.com/wilq32.rollimage222

Makes me wanna start up an online jQuery Particle Illusion:

http://wilq32.blogspot.com/2009/02/wilq32particles.html

http://wilq32.googlepages.com/Wilq32.Particles.html?text=Tycoon

Looking to rotate some glitter animations I found this jQuery plugin. Impressive. I could even use it. But I’ll stick with animated gifs. Check it out:

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

A nice list of plugins from Blarnee:

http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/

And another animation list from Blarnee. The concept coding is really interesting:

http://blarnee.com/wp/jquery-animation-tutorialized/

jQuery sparkle. I’ve seen this concept on just a few sites. Really underrated. Why use Flash? Check it out:

http://blarnee.com/wp/how-to-create-impressive-animations-in-jquery-with-animate/

Like Star Trek? Me too:

http://erikfriend.com/jquery.beam/

Over the course of years, I have written a series of tutorials, ranging from JavaScripts tricks to AdSense money-making tutorials. Here is a quick table of contents of all tutorials I’ve written.

JavaScript

• JavaScript TV Prompter
• Pragmatic Progressive Enhancement Programming
• JavaScript Switch Menu
• JavaScript Character Counter For Text Areas
• “How Old Is Ithe Internet” Widget
• Cross Browser Client-Side Persistent Storage
• Client-Side Form Validation Using JavaScript
• Numerical Integration Using JavaScript
• JavaScript Terminal Tutorial
• jQuery Tabs
• JavaScript Tutorials (3)
• JavaScript Centered Popup Window

PHP

• How To Test PHP/MySQL Offline
• PHP GD Thumbnails
• Include Remote Files With PHP
• Harvest Emails From Text File
• PHP Random Images With Links
• How To Add A “Page loaded in…” Feature
• PHP Debugging
• Passing Variables In PHP5
• PHP register_globals
• PHP5 Database Upgrade
• 40+ Tips For Optimizing Your PHP Code
• How To Check Link Popularity in Google & Yahoo With PHP
• PHP Tutorials (2)

CSS

• CSS Menu Showcase
• CSS Design Tips

Apache

• 5 Module Rewrite Tutorials

The Internet appeared in 1983. More detailed discussions on this subject are outside the scope of this article. We will learn how to create a JavaScript widget showing how old is the internet.

First of all, we need to write a prototype function of a date. As the JavaScript code is wrapping a bit weird with my theme, here is the finished .js file:

time.js

As the function is included in the head (either external or included), all we need to add is:

<script type="text/javascript">
	var oPast = new Date(1983, 1, 1, 0, 0);
	document.write(oPast.toTimeSinceString(6, ',  ', ' and '));
</script>

Download a .zip file with a finished HTML example.

I decided to share all my eBooks on programming. This week is JavaScript.

JavaScript is a scripting language most often used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but be easier for non-programmers to work with.

Although best known for its use in websites (as client-side JavaScript), JavaScript is also used to enable scripting access to objects embedded in other applications.

• Wrox – Professional JavaScript for Web Developers
• Wiley – Making Use of JavaScript
• Wiley – JavaScript in 10 Simple Steps or Less
• Wiley – JavaScript Bible – 5th Edition
• Wiley – For Dummies – JavaScript for Dummies – 4th Edition
• Slides – JavaScript Basics and HTML DOM
• Slides – Introduction to JSON (JavaScript Object Notation)
• Slides – Client-Side JavaScript
• Slides – AOP and FP in JavaScript
• Sams – Pure JavaScript – Second Edition
• Sample – The Book of Javascript – Chapter 1
• Sample – Sitepoint – The JavaScript Anthology
• Sample – Heilmann – Unobtrusive JavaScript
• Sample – Designing with JavaScript – Chapter 1
• Que – Complete Idiot’s Guide to JavaScript – Second Edition
• Primatech – JavaScript Programming for the Absolute Beginner
• O’Reilly – JavaScript Application Cookbook
• O’Reilly – Access Database Design and Programming – Second Edition
• McGraw-Hill – How to Do Everything with JavaScript
• Goodman – JavaScript Bible 5th Edition – IE4+ DHTML DOM Quick Reference
• Goodman – JavaScript Bible 5th Edition – Browser Objects Quick Reference
• eBook – JavaScript 1.1
• eBook – Introduction to JavaScript
• Cheat Sheet – JavaScript
• Article – Webworks – Advanced JavaScript
• Article – Synchronous Randomization with JavaScript Arrays
• Article – Quickstart Tool – JavaScript
• Article – Numerical Integration Using JavaScript
• Article – JavaScript Object Oriented Programming
• Article – Introduction to JavaScript – Part 1
• Article – Introduction to JavaScript – Part 2
• Article – Evolving JavaScript 2.0
• Article – Dynamic Websites Without Safety Risks
• Article – Client-Side Form Validation Using JavaScript
• Article – A (Re)introduction to JavaScript
• Apress – Beginning JavaScript with DOM Scripting and AJAX

1. Put stylesheets at the top

This is a common practice, however there are some web sites which embed stylesheets, especially using the @import command somewhere else in the page. This is not good, as the page renders progressively, that is we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

2. Put scripts at the bottom

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname.

In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations. That will make your web pages load faster.

3. Make JavaScript and CSS external

Yes, we all know this but we don’t respect it all the time. Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

4. Flush the PHP buffer

This was new to me, too, and I will start using it in my themes, if tests and benchmarks prove to speed things up. I found it while trying to validate, optimize and speed up my blog.

When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example:

... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

5. Preload components

Preload may look like the opposite of post-load, but it actually has a different goal. By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you’ll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.

However, you should first ask yourself if the visitor really wants to go to the next page.

6. Use subdomains for static components

When the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there. Images, JavaScript and CSS. Use this measure only if you have a huge web site with lots of requests and database access.

7. Choose <link> over @import

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.

In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

8. Don’t scale images in HTML

Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need

<img width="100" height="100" src="/tag/javascript/image.png" alt="" />

then your image (/tag/javascript/image.png) should be 100×100px rather than a scaled down 500×500px image.