Links Of The Week: jQuery

1 March 2010

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

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

Makes me wanna start up an online jQuery Particle Illusion:

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:

A nice list of plugins from Blarnee:

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

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

Like Star Trek? Me too:

Tutorials Overview

7 March 2009

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.





"How Old Is The Internet" Widget

23 November 2008

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:


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 '));

Download a .zip file with a finished HTML example.

eBook Collection: JavaScript

2 August 2008

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.

8 Ways To Speed Up Your Web Site

12 July 2008

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.


... <!-- css, js -->
<?php flush(); ?>
... <!-- 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.

Get Adobe Flash playerPlugin by wordpress themes