Şimşek Mert » Web Programlama

Ext JS Javascript Framework

Şimşek Mert — Sun, 02 Jan 2011 21:22:38 +0000

Bu bölümde, bir çok önemli özelliği ile ön plana çıkan ve benzer kütüphanelere göre çok daha kabiliyetli olan ve kullanıcı arayüzü açısından oldukça başarılı bir javascript çatısı olan Ext JS den ve özelliklerinden bahsedeceğim.

1.Bölüm

Gerekli dosyalar

Ext JS Kütüphanesi : Öncelikle http://www.sencha.com/products/js/download.php adresinden Ext JS kütüphanesinin en son sürümünü indirim. Ben bu yazıyı yazarken Ext JS nin indirilebilir en son sürümü 3.3.1 idi. Bu nedenle yazımızın devamında 3.3.1 diye bahsettiğimiz bölüm siz yeni bir sürüm ile çalışıyorsanız değişecektir.
Web Sunucusu : Ext JS kütüphanesi, istemci tarafında çalışan javascript dosyalarından oluştuğu için html dosyalar ile herhangi bir web sunucusu olmadan da tarayıcılar tarafından çalıştırılabilir. Fakat biz çalışmamıza bir web sunucusu ile devam edeceğiz. Windows üzerinde çalışıyorsanız windows işletim sistemlerine Apache Web Sunucusu, MySQL veritabanı sunucusu ve PHP web programlama dili desteğini otomatik olarak kuran bir kaç paket bulunmaktadır. Bunlardan ikisini aşağıda belirttim. Bunlardan birini kullanarak web sunucunuzu yapılandırabilirsiniz.
- AppServNetwork -> http://www.appservnetwork.com
- WampServer -> http://www.wampserver.com

Kurulum

Web sunucunuzu kurduysanız web sunucusu kurulum sırasında belirttiğiniz adresin içine www klasörü oluşturmuştur. Bu klasörün içine örnek uygulamamız için myApp isimli bir klasör oluşturalım. Bu klasör içine indirdiğimiz Ext JS kütüphanesini kopyalayalım.

myApp klasörünün içine geliştireceğimiz uygulamalara ait dosyaları tutmak için application adında bir klasör daha oluşturalım.

Şimdi ext-3.3.1 klasörünün içindeki dosya ve klasörleri inceleyelim.

adapter klasörü, prototype, jQuery, YUI and Ext JS gibi klasörlerin bulunduğu bir klasördür. Bu klasör ve içindekiler ileride daha detaylı incelenecektir.
resources klasörü, içerisinde görseller, css dosyaları vs bulunur.
ext-all.js dosyası, Ext JS nin bileşenlerinin bulunduğu javascript dosyasıdır.

Testing Ext JS Framework

Şimdi ilk html dosyamızı oluşturup ext kütüphanesini yükleyelim. Bunun için üç tane dosyanın bloğunda çağrılması gerekir.

ext-3.3.1/resources/css/ext-all.css
ext-3.3.1/adapter/ext/ext-base.js
ext-3.3.1/ext-all.js

Bun göre aşağıdaki html kodlarını sayfamızın bloğuna yerleştirelim.

Ext JS kütüphanesini test etmek için kütüphanemizin kullandığı onReady olayına bir dinleyici eklemek yeterlidir. onReady olayı tüm sistem yüklendikten sonra aktif olur. Örneğin, DOM kullanıma hazır hale geldiğinde kullanıcıya “Hoşgeldiniz.” diye bir mesaj verelim.

Buna göre, first.html olarak application klasörü içine oluşturduğumuz dosyanın içeriği aşağıdaki gibi olmalıdır.

Ext JS Library

Bu dosyayı web tarayıcınız ile çalıştırdığınızda aşağıdaki gibi “Hoşgeldiniz.” mesajı verilecektir.

2.Bölüm

Bu bölümde yeni bir uygulama ile bir pencere oluşturalım. Pencere oluşturmak için

win = new Ext.Window({
title: ‘İlk Pencerem’, //pencerenin bağlığını belirtir.
width:500, //pencerenin genişliğini belirtir.
height:300, //pencerenin yüksekliğini belirtir.
minimizable: true,
maximizable: true,
closeAction:’hide’,
});

kodlarını kullanmamız gerekir. Burada önemli olan new Ext.Window komutu ile yeni bir pencere oluşturmaktır. Diğer seçenekler pencerenin özelliklerini düzenlemeye yarar.

Pencereyi oluşturmak pencereyi göstermek için yeterli değildir. Pencereyi göstermek için ayrıca win.show() fonksiyonunu çağırmamız gerekir.

Bu durumda yeni html sayfamız aşağıdaki gibi olacaktır.

Ext JS Library – İkinci Örnek

Bu sayfayı ben second.html olarak kaydedip çalıştıdığımda aşağıdaki gibi bir görüntü oluştu.

Örnekler

Penceremize menü veya buton çubuğu eklemek istersek aşağıdaki kodu kullanabiliriz.

tbar: [{
text:'Yeni',
handler: function(){
Ext.Msg.alert('Bilgi', '"' + this.text + '"' + ' butonuna bastınız.');
}
},{
text: 'Sil',
disabled:true
}],

İndir | Gör

Penceremize buton eklemek istersek aşağıdaki kodu kullanabiliriz.

buttons: [{
text:'Kaydet',
disabled:true
},{
text: 'Kapat',
handler: function(){
win.hide();
}
}],

İndir | Gör

Penceremize sekme eklemek istersek aşağıdaki kodu kullanabiliriz.

items: new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab:0,
border:false,
items: [{
title: 'Birinci Sekme',
html: 'Birinci sekmenin içeriği burada görüntülenir.'
},{
title: 'İkinci Sekme',
html: 'İkinci sekmenin içeriği burada görüntülenecek. Bu bölüme istediğiniz bilgiyi ekleyebilirsiniz.'
}]
}),

İndir | Gör

Bu eklemeleri birlikte de yapabiliriz.

İndir | Gör

FPDF Türkçe Fontlar

Şimşek Mert — Sun, 28 Nov 2010 22:07:41 +0000

FPDF, php ile pdf e dönüştürme aracı olarak kullanılan bir sınıftır. Fakat bu sınıf kullanılırken karşılaşılan en büyük sorunlardan birisi Türkçe karakter sorunudur.

Aşağıdaki linkte FPDF için kendi yaptığım Türkçe fontları bulabilirsiniz. arial_tr ve arial_tr_bold… Kolay gelsin

Fontları indirmek için tıklayın…

How To Optimize Your Site With GZIP Compression

Şimşek Mert — Sat, 24 Jul 2010 14:32:54 +0000

Compression is a simple, effective way to save bandwidth and speed up your site. I hesitated when recommending gzip compression when speeding up your javascript because of problems in older browsers.

But it’s the 21st century. Most of my traffic comes from modern browsers, and quite frankly, most of my users are fairly tech-savvy. I don’t want to slow everyone else down because somebody is chugging along on IE 4.0 on Windows 95. Google and Yahoo use gzip compression. A modern browser is needed to enjoy modern web content and modern web speed — so gzip encoding it is. Here’s how to set it up.

Wait, wait, wait: Why are we doing this?

Before we start I should explain what content encoding is. When you request a file like http://www.yahoo.com/index.html, your browser talks to a web server. The conversation goes a little like this:

1. Browser: Hey, GET me /index.html
2. Server: Ok, let me see if index.html is lying around…
3. Server: Found it! Here’s your response code (200 OK) and I’m sending the file.
4. Browser: 100KB? Ouch… waiting, waiting… ok, it’s loaded.

Of course, the actual headers and protocols are much more formal (monitor them with Live HTTP Headers if you’re so inclined).

But it worked, and you got your file.

So what’s the problem?

Well, the system works, but it’s not that efficient. 100KB is a lot of text, and frankly, HTML is redundant. Every ,

and

tag has a closing tag that’s almost the same. Words are repeated throughout the document. Any way you slice it, HTML (and its beefy cousin, XML) is not lean.

And what’s the plan when a file’s too big? Zip it!

If we could send a .zip file to the browser (index.html.zip) instead of plain old index.html, we’d save on bandwidth and download time. The browser could download the zipped file, extract it, and then show it to user, who’s in a good mood because the page loaded quickly. The browser-server conversation might look like this:

1. Browser: Hey, can I GET index.html? I’ll take a compressed version if you’ve got it.
2. Server: Let me find the file… yep, it’s here. And you’ll take a compressed version? Awesome.
3. Server: Ok, I’ve found index.html (200 OK), am zipping it and sending it over.
4. Browser: Great! It’s only 10KB. I’ll unzip it and show the user.

The formula is simple: Smaller file = faster download = happy user.

Don’t believe me? The HTML portion of the yahoo home page goes from 101kb to 15kb after compression:

The (not so) hairy details

The tricky part of this exchange is the browser and server knowing it’s ok to send a zipped file over. The agreement has two parts

The browser sends a header telling the server it accepts compressed content (gzip and deflate are two compression schemes): Accept-Encoding: gzip, deflate

The server sends a response if the content is actually compressed: Content-Encoding: gzip

If the server doesn’t send the content-encoding response header, it means the file is not compressed (the default on many servers). The “Accept-encoding” header is just a request by the browser, not a demand. If the server doesn’t want to send back compressed content, the browser has to make do with the heavy regular version.

Setting up the server

The “good news” is that we can’t control the browser. It either sends the Accept-encoding: gzip, deflate header or it doesn’t.

Our job is to configure the server so it returns zipped content if the browser can handle it, saving bandwidth for everyone (and giving us a happy user).

For IIS, enable compression in the settings.

In Apache, enabling output compression is fairly straightforward. Add the following to your .htaccess file:


# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

Apache actually has two compression options:

mod_deflate is easier to set up and is standard.
mod_gzip seems more powerful: you can pre-compress content.

Deflate is quick and works, so I use it; use mod_gzip if that floats your boat. In either case, Apache checks if the browser sent the “Accept-encoding” header and returns the compressed or regular version of the file. However, some older browsers may have trouble (more below) and there are special directives you can add to correct this.

If you can’t change your .htaccess file, you can use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top:


In PHP:

We check the “Accept-encoding” header and return a gzipped version of the file (otherwise the regular version). This is almost like building your own webserver (what fun!). But really, try to use Apache to compress your output if you can help it. You don’t want to monkey with your files.

Verify Your Compression

Once you’ve configured your server, check to make sure you’re actually serving up compressed content.

Online: Use the online gzip test to check whether your page is compressed.
In your browser: Use Web Developer Toolbar > Information > View Document Size (like I did for Yahoo, above) to see whether the page is compressed.
View the headers: Use Live HTTP Headers to examine the response. Look for a line that says “Content-encoding: gzip”.

Be prepared to marvel at the results. The instacalc homepage shrunk from 36k to 10k, a 75% reduction in size.

Try Some Examples

I’ve set up some pages and a downloadable example:

index.html – No explicit compression (on this server, I am using compression by default ).
index.htm – Explicitly compressed with Apache .htaccess using *.htm as a rule
index.php – Explicitly compressed using the PHP header

Feel free to download the files, put them on your server and tweak the settings.

Caveats

As exciting as it may appear, HTTP Compression isn’t all fun and games. Here’s what to watch out for:

Older browsers: Yes, some browsers still may have trouble with compressed content (they say they can accept it, but really they can’t). If your site absolutely must work with Netscape 1.0 on Windows 95, you may not want to use HTTP Compression. Apache mod_deflate has some rules to avoid compression for older browsers.
Already-compressed content: Most images, music and videos are already compressed. Don’t waste time compressing them again. In fact, you probably only need to compress the “big 3″ (HTML, CSS and Javascript).
CPU-load: Compressing content on-the-fly uses CPU time and saves bandwidth. Usually this is a great tradeoff given the speed of compression. There are ways to pre-compress static content and send over the compressed versions. This requires more configuration; even if it’s not possible, compressing output may still be a net win. Using CPU cycles for a faster user experience is well worth it, given the short attention spans on the web.

Enabling compression is one of the fastest ways to improve your site’s performance. Go forth, set it up, and let your users enjoy the benefits.

Fast, Effective PHP Compression

Şimşek Mert — Sat, 24 Jul 2010 14:15:35 +0000

PHP compression is an excellent method of conserving bandwidth and reducing client download times. We have already discussed an excellent method for CSS compression, and in this article we share a super-easy technique for compressing all PHP content without editing a single file.

Using two PHP files and two corresponding lines of .htaccess, it is possible to compress your PHP files via gzip-encoding. Browsers and other user-agents capable of interpreting gz-encoded data will employ the compressed content, while other user-agents will utilize the content uncompressed.

Before we begin, it is important to determine if your server employs output buffering. If so, it may not be necessary to compress content via this method. Also, this PHP compression technique requires PHP version 4.0.5 or better.

Now, create two PHP files, “gzip_start.php” and “gzip_stop”. Open gzip_start.php and add this:

Then, open gzip_stop.php and add this:

Save and upload both files to a convenient location on your server. The first file instructs the server to begin output buffering via gz-encoding. The second file instructs the server to transmit the buffered content to the user-agent, assuming it sends a header indicating its ability to process gzipped data.

Finally, we need a way to include first file at the beginning of each PHP document and the second file at the end of each PHP document. Rather than manually adding include() or require() functions to every PHP document, we will summon the mysterious powers of .htaccess to do it all automatically. Simply add the following lines to your .htaccess file:

# dual file includes for PHP compression
php_value  auto_prepend_file  /specify/full/path/to/gzip_start.php
php_value  auto_append_file   /specify/full/path/to/gzip_stop.php

Edit the path in each line, save and upload the .htaccess file to your server. These two lines will ensure proper inclusion of both files to every PHP document subject to their influence (i.e., the containing directory and all subdirectories). The auto_prepend_file function literally prepends data, while the auto_append_file function, well, you get the idea..

Alternate Method

For an even easier PHP-compression method, simply place the following code before the (X)HTML content in any PHP script:

In this case, the ob_flush() command is unnecessary as PHP inherently flushes the buffer. The script delivers gzipped content to capable browsers and uncompressed content to incapable browsers. It’s a win-win!

SQL Server, PHP and Truncating Text

Şimşek Mert — Sun, 20 Jun 2010 19:45:42 +0000

PHP and SQL Server are a powerful combination, however sometimes data stored in a text type column is truncated for no apparent reason after 4096 characters. Here’s how to fix the problem.

PHP can work with a large number of database systems, most common of which is MySQL. However, SQL Server is a very poweful alternative to MySQL, and well worth considering for larger projects.

However, settings for the mssql extension in PHP can easily be overlooked, resulting in strange behaviour. One of the most unusual problems I encountered on a recent project was that every time text was pulled from a column of type “text”, it was truncated at around 4000 characters.

If you are experiencing a similar problem, there are a few ways to work around it.

You need to increase the maximum size of a text column to be returned from SQL Server by PHP. You can do this with a simple SQL query:

SET TEXTSIZE 2147483647

Which you can run with the following PHP (best run just after you make a connection).

mssql_query("SET TEXTSIZE 2147483647");

A better way to work around the issue is to change the “textlimit” and “textsize” settings within php.ini, like so:

mssql.textlimit = 2147483647 mssql.textsize = 2147483647

In the above examples, I have used “2147483647″ (number of bytes) for the value. You don’t need to set it this high necessarily, however there is no real harm in doing so.

And why does this not happen with ASP? When you use Microsoft’s SQL Server ODBC driver and OLE DB Provider, textsize is automatically set to 2147483647 when a connection is made.

What is the maximum length of a URL?

Şimşek Mert — Tue, 16 Mar 2010 07:29:47 +0000

Although the specification of the HTTP protocol does not specify any maximum length, practical limits are imposed by web browser and server software.

Microsoft Internet Explorer (Browser)

Microsoft states that the maximum length of a URL in Internet Explorer is 2,083 characters, with no more than 2,048 characters in the path portion of the URL. In my tests, attempts to use URLs longer than this produced a clear error message in Internet Explorer.

Firefox (Browser)

After 65,536 characters, the location bar no longer displays the URL in Windows Firefox 1.5.x. However, longer URLs will work. I stopped testing after 100,000 characters.

Safari (Browser)

At least 80,000 characters will work. I stopped testing after 80,000 characters.

Opera (Browser)

At least 190,000 characters will work. I stopped testing after 190,000 characters. Opera 9 for Windows continued to display a fully editable, copyable and pasteable URL in the location bar even at 190,000 characters.

Apache (Server)

My early attempts to measure the maximum URL length in web browsers bumped into a server URL length limit of approximately 4,000 characters, after which Apache produces a “413 Entity Too Large” error. I used the current up to date Apache build found in Red Hat Enterprise Linux 4. The official Apache documentation only mentions an 8,192-byte limit on an individual field in a request.

Microsoft Internet Information Server

The default limit is 16,384 characters (yes, Microsoft’s web server accepts longer URLs than Microsoft’s web browser). This is configurable.

Perl HTTP::Daemon (Server)

Up to 8,000 bytes will work. Those constructing web application servers with Perl’s HTTP::Daemon module will encounter a 16,384 byte limit on the combined size of all HTTP request headers. This does not include POST-method form data, file uploads, etc., but it does include the URL. In practice this resulted in a 413 error when a URL was significantly longer than 8,000 characters. This limitation can be easily removed. Look for all occurrences of 16x1024 in Daemon.pm and replace them with a larger value. Of course, this does increase your exposure to denial of service attacks.

Recommendations

Extremely long URLs are usually a mistake. URLs over 2,000 characters will not work in the most popular web browser. Don’t use them if you intend your site to work for the majority of Internet users.When you wish to submit a form containing many fields, which would otherwise produce a very long URL, the standard solution is to use the POST method rather than the GET method:

...

The form fields are then transmitted as part of the HTTP transaction body, not as part of the URL, and are not subject to the URL length limit. Short-lived information should not be stored in URLs.As a rule of thumb, if a piece of information isn’t needed to regenerate the same page as a result of returning to a favorite or bookmark, then it doesn’t belong in the URL.

The Bookmark Problem

In very rare cases, it may be useful to keep a large amount of “state” information in a URL. For instance, users of a map-navigating website might wish to add the currently displayed map to their “bookmarks” or “favorites” list and return later. If you must do this and your URLs are approaching 2,000 characters in length, keep your representation of the information as compact as you can, squeezing out as much “air” as possible. If your field names take up too much space, use a fixed field order instead. Squeeze out any field that doesn’t really need to be bookmarked. And avoid large decimal numbers – use only as much accuracy as you must, and consider a base-64 representation using letters and digits (I didn’t say this was easy).In extreme cases, consider using the gzip algorithm to compress your pretty but excessively long URL. Then reencode that binary data in base64 using only characters that are legal in URLs. This can yield a 3-4x space gain, at the cost of some CPU time when you unzip the URL again on the next visit. Again, I never said it was easy!

An alternative is to store the state information in a file or a database. Then you can store only the identifier needed to look up that information again in the URL. The disadvantage here is that you will have many state files or database records. Some of which might be linked to on websites run by others. One solution to this problem is to delete the state files or database records for the URLs that have not been revisited after a certain amount of time.

Generating Random Numbers in JavaScript

Şimşek Mert — Sun, 09 Aug 2009 21:54:06 +0000

To generate random numbers with JavaScript we employ the random() method of the Math object. It returns a floating-point number between 0.0 and 1.0.
JavaScript Math object has several methods and we shall encounter three on this page – the first one being random().

var rand_no = Math.random();
alert(rand_no);

In the code above, the random() method returns the number which we store in the variable rand_no and display through alert(). Click to display a random number.
You’ll notice that each time you click the link a new random number is generated and displayed.

Now that we have our randomly generated number with JavaScript, let us see how we can use it in some of our applications.

How to use JavaScript random number

Suppose you want a random number between 1 and 100. How do you get it from the long decimal number thrown up by the random() method?

The first step is to multiply the long decimal random number generated by the random() method with 100.

var rand_no = Math.random();
rand_no = rand_no * 100;
alert(rand_no);

Click to get see a set of 10 random numbers.

The code above will give us a random number between 0 and 10. All numbers will be a little more than 0 and a little les than 100 – and they still have the long tail of numbers after the decimal. The next step involves another method of the JavaScript Math() object called ceil().

JavaScript ceil() method

The JavaScript ceil() rounds a decimal number to the next higher integer. Thus,

Math.ceil(2.456)		//gives 3
Math.ceil(46.9)		//gives 47
Math.ceil(0.0006)		// gives 1

To remove numbers after the decimal and provide us with an integer between 1 and 100, we will pass the random number generated by random() to ceil().

var rand_no = Math.random();
rand_no = rand_no * 100;
rand_no = Math.ceil(rand_no);
alert(rand_no);

Click to generate a random number between 1 and 100.
The above set of statements can also be shortened to:

var rand_no = Math.ceil(100*Math.random())
alert(rand_no);

JavaScript generates random numbers based on a formula. In a sense this is not random because if you know the formula, you know which number will come up next. However, this works fine for the web applications you will develop.
Get a list of 20 randomly gerenated numbers between 1 and 100.

What if you want random numbers between 0 and 10?
The question is important. Because if we use the above code, it will simply not work. Since ceil() always returns the next higher integer, all random number that are between 0 and 1 will be converted to 1.
We will learn about another JavaScript method to solve this problem.

Math.floor() method

The floor() rounds a number down to the lower integer. Thus:

Math.floor(2.456)		//gives 2
Math.floor(46.9)		//gives 46
Math.floor(0.0006)		// gives 0
Math.floor(1.0006)		// gives 1
Math.floor(0.932)		// gives 0

But this throws up another problem. Number between 0.9 and 1.0 will all be rounded down (after multiplying with 10) to 9!
The solution lies in multiplying the random number generated by random() with 11 – one number more than the range.

var rand_no = Math.floor(11*Math.random())
alert(rand_no);

List of 20 random number between 0 and 10.

Random number from a given range

To generate random numbers from a given range, follow the steps below:

Get number between 0.0 and 1.0 from random() method.
Multiply it with the difference of upper value and one less than the lower value of the range.
Use floor() to convert it into an integer
Add the lower value of the range

var rand_no = Math.floor((10-4)*Math.random()) + 5;
alert(rand_no);

The code above generates a random number between 5 and 10. Just to prove that this works beautifully click to get a list of 20 random number between 5 and 10

25 Excellent jQuery Tips

Şimşek Mert — Fri, 10 Apr 2009 17:15:57 +0000

Introduction

jQuery is awesome. I’ve been using it for about a year now and although I was impressed to begin with I’m liking it more and more the longer I use it and the more I find out about it’s inner workings.

I’m no jQuery expert. I don’t claim to be, so if there are mistakes in this article then feel free to correct me or make suggestions for improvements.

I’d call myself an “intermediate” jQuery user and I thought some others out there could benefit from all the little tips, tricks and techniques I’ve learned over the past year. The article also ended up being a lot longer than I thought it was going to be so I’ll start with a table of contents so you can skip to the bits you’re interested in.

1. Load the framework from Google Code
2. Use a cheat sheet
3. Combine all your scripts and minify them
4. Use Firebug’s excellent console logging facilities
5. Keep selection operations to a minimum by caching
6. Keep DOM manipulation to a minimum
7. Wrap everything in a single element when doing any kind of DOM insertion
8. Use IDs instead of classes wherever possible
9. Give your selectors a context
10. Use chaining properly
11. Learn to use animate properly
12. Learn about event delegation
13. Use classes to store state
14. Even better, use jQuery’s internal data() method to store state
15. Write your own selectors
16. Streamline your HTML and modify it once the page has loaded
17. Lazy load content for speed and SEO benefits
18. Use jQuery’s utility functions
19. Use noconflict to rename the jquery object when using other frameworks
20. How to tell when images have loaded
21. Always use the latest version
22. How to check if an element exists
23. Add a JS class to your HTML attribute
24. Return ‘false’ to prevent default behaviour
25. Shorthand for the ready event

1. Load the framework from Google Code

Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it’ll load very quickly from Google’s CDN and most importantly it’ll already be cached if the user has visited a site which delivers it from Google Code.

This makes a lot of sense. How many sites out there are serving up identical copies of jQuery that aren’t getting cached? It’s easy to do too…

Or, you can just include a direct reference like this…

Full instructions here

2. Use a cheat sheet

Not just a jQuery tip, there are some great cheat sheets out there for most languages. It’s handy having every function on a printable A4 sheet for reference and luckily these guys have produced a couple of nice ones..

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/

3. Combine all your scripts and minify them

OK, a general JavaScript tip here. But any big project that uses lots of jQuery probably uses lots of plugins (this site uses easing, localScroll, lightbox and preload) so it’s usually applicable.

Browsers can’t load scripts concurrently (well, most can’t, yet), which means that if you’ve got several scripts downloading one at a time then you’re really slowing down the loading of your page. So, assuming the scrips are being loaded on every page then you should consider combining them into one long script before deploying.

Some of the plugins will already be minified, but you should consider packing your scripts and any that aren’t already. It only takes a few seconds. I’m personally a fan of Packer by Dean Edwards

4. Use Firebug’s excellent console logging facilities

If you haven’t already installed Firebug then you really should. Aside from many other useful features such as allowing you to inspect http traffic and find problems with your CSS it has excellent logging commands that allow you to easily debug your scripts.

Here’s a full explanation of all of it’s features

My favourite features are “console.info”, which you can use to just dump messages and variables to the screen without having to use alert boxes and “console.time” which allows you to easily set up a timer to wrap a bunch of code and see how long it takes. They’re all really easy to use too…

console.time('create list');
for (i = 0; i < 1000; i++) {
   var myList = $('.myList');
   myList.append('This is list item ' + i);
}
console.timeEnd('create list');

In this instance I’ve deliberately written some very inefficient code! In the next few tips I’ll show you how we can use the timer to show some improvements which can be made.

5. Keep selection operations to a minimum by caching

jQuery selectors are awesome. They make selecting any element on the page incredibly simple, but internally they have to do a fair amount of work and if you go mad with them you might find things starting to get pretty slow.

If you’re selecting the same element time and time again (in a loop for example) then you can just select it once and keep it in memory while you manipulate it to your heart’s content. Take the following example where we add items to an unordered list using a loop.

for (i = 0; i < 1000; i++) {
   var myList = $('.myList');
   myList.append('This is list item ' + i);
}

That takes 1066 milliseconds on my PC in Firefox 3 (imagine how long it would IE6!), which is pretty slow in JavaScript terms. Now take a look at the following code where we use the selector just once.

var myList = $('.myList');
for (i = 0; i < 1000; i++) {
   myList.append('This is list item ' + i);
}

That only takes 224 milliseconds, more than 4x faster, just by moving one line of code.

6. Keep DOM manipulation to a minimum

We can make the code from the previous tip even faster by cutting down on the number of times we insert into the DOM. DOM insertion operations like .append() .prepend() .after() and .wrap() are relatively costly and performing lots of them can really slow things down.

All we need to do is use string concatenation to build the list and then use a single function to add them to your unordered list like .html() is much quicker. Take the following example…

var myList = $('#myList');
for (i=0; i<1000; i++){
   myList.append('This is list item ' + i);
}

On my PC that takes 216 milliseconds , just over a 1/5th of a second, but if we build the list items as a string first and use the HTML method to do the insert, like this….

var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
   myListItems += 'This is list item ' + i + '';
}
myList.html(myListItems);

That takes 185 milliseconds, not much quicker but that’s another 31 milliseconds off the time.

7. Wrap everything in a single element when doing any kind of DOM insertion

OK, don’t ask me why this one works (I’m sure a more experienced coder will explain).

In our last example we inserted 1000 list items into an unordered list using the .html() method. If we had have wrapped them in the UL tag before doing the insert and inserted the completed UL into another tag (a DIV) then we’re effectively only inserting 1 tag, not 1000, which seems to be much quicker. Like this…

var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
   myListItems += 'This is list item ' + i + '';
}
myListItems += '
'; myList.html(myListItems);

The time is now only 19 milliseconds, a massive improvement, 50x faster than our first example.

8. Use IDs instead of classes wherever possible

jQuery makes selecting DOM elements using classes as easy as selecting elements by ID used to be, so it’s tempting to use classes much more liberally than before. It’s still much better to select by ID though because jQuery uses the browser’s native method (getElementByID) to do this and doesn’t have to do any of it’s own DOM traversal, which is much faster. How much faster? Let’s find out.

I’ll use the previous example and adapt it so each LI we create has a unique class added to it. Then I’ll loop through and select each one once.

// Create our list
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
   myListItems += 'This is a list item';
}
myListItems += ''; myList.html(myListItems);  

// Select each item once
for (i = 0; i < 1000; i++)
{
   var selectedItem = $('.listItem' + i);
}

Just as I thought my browser had hung, it finished, in 5066 milliseconds (over 5 seconds). So i modified the code to give each item an ID instead of a class and then selected them using the ID.

// Create our list
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
   myListItems += 'This is a list item';
}
myListItems += '';
myList.html(myListItems);  

// Select each item once
for (i = 0; i < 1000; i++) {
   var selectedItem = $('#listItem' + i);
}

This time it only took 61 milliseconds. Nearly 100x faster.

9. Give your selectors a context

By default, when you use a selector such as $(’.myDiv’) the whole of the DOM will be traversed, which depending on the page could be expensive.

The jQuery function takes a second parameter when performing a selection.

jQuery( expression, context )

By providing a context to the selector, you give it an element to start searching within so that it doesn’t have to traverse the whole of the DOM.

To demonstrate this, let’s take the first block of code from the tip above. It creates an unordered list with 1000 items, each with an individual class. It then loops through and selects each item once. You’ll remember that when selecting by class it took just over 5 seconds to select all 1000 of them using this selector.

var selectedItem = $('#listItem' + i);

I then added a context so that it was only running the selector inside the unordered list, like this…

var selectedItem = $('#listItem' + i, $('.myList'));

It still took 3818 milliseconds because it’s still horribly inefficient, but that’s more than a 25% speed increase by making a small modification to a selector.

10. Use chaining properly

One of the coolest things about jQuery is it’s ability to chain method calls together. So, for example, if you want to switch the class on an element.

$('myDiv').removeClass('off').addClass('on');

If you’re anything like me then you probably learned that in your first 5 minutes of reading about jQuery but it goes further than that. Firstly, it still works across line breaks (because jQuery = JavaScript), which means you can write neat code like this…

$('#mypanel').find('TABLE .firstCol').removeClass('.firstCol').css('background' : 'red').append('This cell is now red');

Making a habit of using chaining automatically helps you to cut down on your selector use too.

But it goes further than that. Let’s say that you want to perform several functions on an element but one of the first functions changes the element in some way, like this…

$('#myTable').find('.firstColumn').css('background','red');

We’ve selected a table, drilled down to find cells with a class of “firstColumn” and coloured them in red.

Let’s say we now want to colour all the cells with a class of “lastColumn” blue. Because we’ve used the find() funciton we’ve filtered out all the cells that don’t have a class of “firstColumn” so we need to use the selector again to get the table element and we can’t continue chaining, right? Luckily jQuery has an end() function which actually reverts back to the previous unaltered selection so you can carry on chaining, like this…

$('#myTable').find('.firstColumn').css('background','red').end().find('.lastColumn').css('background','blue');

It’s also easier than you might think to write your own jQuery function which can chain. All you have to do is write a function which modifies an element and returns it.

$.fn.makeRed = function() {
   return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');

How easy was that?

11. Learn to use animate properly

When I first started using jQuery I loved the fact that it was easy to use the pre-defined animations like slideDown() and fadeIn() to get some really cool effects incredibly easy. It’s easy to take things further though because jQuery’s animate() method is very easy to use and very powerful. In fact, is you look at the jQuery source code you’ll see that internally those methods are just shortcuts which use the animate() function.

slideDown: function(speed,callback){
   return this.animate({height: "show"}, speed, callback); },
   fadeIn: function(speed, callback){
      return this.animate({opacity: "show"}, speed, callback);
}

The animate() method simply takes any CSS style and smoothly transitions it from one value to another. So, you can change the width, height, opacity, background-color, top, left, margin, color, font-size, anything you want.

This is how easy it is to animate all your menu items grow to 100 pixels high when you roll over them.

$('#myList li').mouseover(function() {     $(this).animate({"height": 100}, "slow"); });

Unlike other jQuery functions, animations are automatically queued, so if you want to run a second animation once the first is finished then just call the animate method twice, no callback necessary.

$('#myBox').mouseover(function() {     $(this).animate({ "width": 200 }, "slow");     $(this).animate({"height": 200}, "slow"); });

If you want the animations to happen concurrently then just put both styles in the params object of a single call, like this…

$('#myBox').mouseover(function() {     $(this).animate({ "width": 200, "height": 200 }, "slow"); });

You can animate any property that’s numeric. You can also download plugins to help you animate properties that aren’t, like colors and background colors

12. Learn about event delegation

jQuery makes it easier than ever to attach events to elements in the DOM unobtrusively, which is great, but adding too many events is inefficient. Event delegation allows you to add less events to achieve the same result in many situations. The best way to illustrate this is with an example…

$('#myTable TD').click(function(){     $(this).css('background', 'red'); });

A simple function which turns cells in a table red when you click on them. Let’s say that you’ve got a grid with 10 columns and 50 rows though, that’s 500 events bound. Wouldn’t it be neater if we could just attach a single event to the table and when the table is clicked have the event handler work out which cell was clicked before turning it red?

Well that’s exactly what event delegation is and it’s easy to implement…

$('#myTable').click(function(e) {     var clicked = $(e.target);     clicked.css('background', 'red'); });

‘e’ contains information about the event, including the target element that actually received the click. All we have to do is inspect it to see which cell was actually clicked. Much neater.

Event delegation has another benefit. Normally, When you bind a handler to a collection of elements it gets attached to those elements and those elements only. If you add new elements to the DOM which would have been matched by the selector then they don’t have the event handler bound to them (are you following me?) then nothing will happen.

When using event delegation you can add as many matching elements to the DOM as you like after the event is bound and they work too.

13. Use classes to store state

This is the most basic way of storing information about a block of html. jQuery is great at manipulating elements based upon their classes, so if you need to store information about the state of an element then why not add an extra class to store it?

Here’s an example. We want to create an expanding menu. When you click the button we want the panel to slideDown() if it’s currently closed, or slideUp() if it’s currently open. We’ll start with the HTML

              click me     
                            Menu item 1
             Menu item 2
             Menu item 3

Very simple! We’ve just added an extra class to the wrapper div which serves no other purpose other than to tell us the state of the item. So all we need is a click event handler which performs slideUp() or slideDown() on the corresponding panel when the button is clicked.

$('.button').click(function() {      var menuItem = $(this).parent();     var panel = menuItem.find('.panel');      if (menuItem.hasClass("expanded")) {         menuItem.removeClass('expanded').addClass('collapsed');         panel.slideUp();     }     else if (menuItem.hasClass("collapsed")) {         menuItem.removeClass('collapsed').addClass('expanded');         panel.slideDown();     } });

That’s a very simple example, but you can add extra classes for storing all sorts of information about an element or HTML fragment.

However, in all but simple cases it’s probably better to use the next tip.

14. Even better, use jQuery’s internal data() method to store state

It’s not very well documented for some reason but jQuery has an internal data() method which can be used to store information in key/value pairs against any DOM element. Storing a piece of data is as simple as this…

$('#myDiv').data('currentState', 'off');

We can amend the example from the previous tip. We’ll use the same HTML (with the “expanded” class removed) and use the data() function instead.

$('.button').click(function() {      var menuItem = $(this).parent();     var panel = menuItem.find('.panel');      if (menuItem.data('collapsed')) {         menuItem.data('collapsed', false);         panel.slideDown();       }     else {         menuItem.data('collapsed', true);         panel.slideUp();     } });

I’m sure you’ll agree this is much neater. For more information about data() and removeData(), see this page…

jQuery internals

15. Write your own selectors

jQuery has loads of built-in selectors for selecting elements by ID, class, tag, attribute and many more. But what do you do when you need to select elements based upon something else and jQuery doesn’t have a selector?

Well, one answer would be to add classes to the elements from the start and use those to select them, but it turns out that it’s not hard to extend jQuery to add new selectors.

The best way to demonstrate is with an example.

$.extend($.expr[':'], {     over100pixels: function(a) {         return $(a).height() > 100;     } });  $('.box:over100pixels').click(function() {     alert('The element you clicked is over 100 pixels high'); });

The first block of code creates a custom selector which finds any element that is more than 100 pixels tall. The second block just uses it to add a click handler to all those elements.

I won’t go into any more detail here but you can imagine how powerful this is and if you search google for “custom jquery selector” you’ll find loads of great examples.

16. Streamline your HTML and modify it once the page has loaded

The title might not make a lot of sense but this tip can potentially neaten up your code, reduce the weight and download time of your page and help your SEO. Take the following HTML for example…

               This is field number 1
     
               
         This is an error message
      
 
               This is field number 2
      
              
          This is an error message

That’s an example of how a form might be marked up, modified slightly for illustrative purposes. I’m sure you’ll agree it’s pretty ugly and if you had a long form you’d end up with a fairly long ugly page. It’s be nicer if you could just put this in your HTML.

This is field 1
  This is field 2
 This is field 3
 This is field 4
 This is field 5

All you have to do is a bit of jQuery manipulation to add all the ugly HTML back in. Like this…

$(document).ready(function() {     $('.field').before('');     $('.field').after('
         
          This is an error message
'); });

It’s not always advisable to do this, you’ll get a bit of a flash as the page loads, but in certain situations where you’ve got a lot of repeated HTML it can really reduce your page weight and the SEO benefits of reducing all your repeated extraneous markup should be obvious.

17. Lazy load content for speed and SEO benefits

Another way to speed up your page loads and neaten up the HTML that search spiders see is to lazy load whole chunks of it using an AJAX request after the rest of the page has loaded. The user can get browsing right away and spiders only see the content you want them to index.

We’ve used this technique on our own site. Those purple buttons at the top of the page drop down 3 forms, directions and a google map, which was doubling the size of our pages. So, we just put all that HTML in a static page and use the load() function to load it in once the DOM was ready. Like this…

$('#forms').load('content/headerForms.html', function() {     // Code here runs once the content has loaded     // Put all your event handlers etc. here.             });

I wouldn’t use this everywhere. You have to consider the trade offs here. You’re making extra requests to the server and portions of your page might not be available to the user right away, but used correctly it can be a great optimization technique.

18. Use jQuery’s utility functions

jQuery isn’t just about flash effects. The creator has exposed some really useful methods which fill a few gaps in JavaScript’s repertoire.

http://docs.jquery.com/Utilities

In particular, browser support for certain common array functions is patchy (IE7 doesn’t even have an indexOf() method!). Jquery has methods for iterating, filtering, cloning, merging and removing duplicates from Arrays.

Other common functions that are difficult in Javascript include getting the selected item in a drop down list. In plain old JavaScript you’d have to get the

Şimşek Mert » Web Programlama

Ext JS Javascript Framework

1.Bölüm

Gerekli dosyalar

Kurulum

Testing Ext JS Framework

2.Bölüm

Örnekler

FPDF Türkçe Fontlar

How To Optimize Your Site With GZIP Compression

Wait, wait, wait: Why are we doing this?

So what’s the problem?

The (not so) hairy details

Setting up the server

Verify Your Compression

Try Some Examples

Caveats

Fast, Effective PHP Compression

Alternate Method

SQL Server, PHP and Truncating Text

What is the maximum length of a URL?

Microsoft Internet Explorer (Browser)

Firefox (Browser)

Safari (Browser)

Opera (Browser)

Apache (Server)

Microsoft Internet Information Server

Perl HTTP::Daemon (Server)

Recommendations

The Bookmark Problem

Generating Random Numbers in JavaScript

How to use JavaScript random number

JavaScript ceil() method

Math.floor() method

Random number from a given range

25 Excellent jQuery Tips

Introduction

Table of Contents

1. Load the framework from Google Code

2. Use a cheat sheet

3. Combine all your scripts and minify them

4. Use Firebug’s excellent console logging facilities

5. Keep selection operations to a minimum by caching

6. Keep DOM manipulation to a minimum

7. Wrap everything in a single element when doing any kind of DOM insertion

8. Use IDs instead of classes wherever possible

9. Give your selectors a context

10. Use chaining properly

11. Learn to use animate properly

12. Learn about event delegation

13. Use classes to store state

14. Even better, use jQuery’s internal data() method to store state

15. Write your own selectors

16. Streamline your HTML and modify it once the page has loaded

17. Lazy load content for speed and SEO benefits

18. Use jQuery’s utility functions