Blogging Developer

LightBox for Videos - CeeBox: jQuery Plugin for Displaying Flash Videos with an Overlay

blogging developer — Thu, 12 Nov 2009 14:03:00 +0200

Videobox is a small script that enables showing videos from YouTube, MetaCafe and Google Video on the page with an overlay. Unfortunately, this Lightbox for Videos is written for mootools library. In order to display flash on an overlay within the page, VideoBox isn't the option for jQuery Framework users. On the other hand, jQuery plugin Thickbox is nice but doesn't work with flash movies.

CeeBox creates a lightbox-like overlay for images, image, html via ajax and iframe, and flash movies. CeeBox is an easy-to-use plugin: videos will be displayed in a popup simply by adding "ceebox" to a link (for example: to a YouTube movie page link). CeeBox supports popups for Google Video, YouTube, Metacafe, Vimeo, Dailymotion, iFilm, and Facebook videos.

Ceebox - creates a lightbox-like popup overlay for images, image, html via ajax and iframe, and flash movies

You can create gallery next/prev buttons for any type of content images/videos/html by applying ceebox on a parent element with links underneath.

Ceebox handles links automatically:

Links to images are created as image popups
Links to video sites are created as auto-embeded video player popups (supports Google Video, YouTube, Metacafe, Vimeo, Dailymotion, iFilm, Facebook videos and swf files.)
Links to html pages on the same domain are added as ajax Links to html pages on another domain are added as an iframe.
Title attribute is used for the caption/header on the popup.
Galleries are created automatically by applying CeeBox to a parent object with links underneath

You can find more details and play with demos here.

Special Downloads

C# wrapper for Google Closure Compiler
jQuery Plug-in for Preloading CSS Images
Compress Viewstate in ASP.NET 2.0(VISUAL STUDIO PROJECT)
Parse/Get QueryString with Client-Side JavaScript
ASP.NET sitemap generator (VISUAL STUDIO PROJECT)

User Friendly, Readable Timestamp Formatting with CuteTime - jQuery Plugin

blogging developer — Wed, 11 Nov 2009 15:28:00 +0200

Formal timestamp formats have already been avoided by most of the online social services. Instead of displaying "2009-11-11 15:33" or "Thu, November 11,2009 15:33PM", they use more user friendly, warmer and more readable time formatting like "2 minutes ago" or "4 days ago".

Instead of formal time formatting, Twitter uses more readable timestamp formatting

CuteTime is a jQuery plugin that provides easy conversion of timestamps to formats much cuter. It also has the ability to dynamically update and/or automatically update timestamps on a controlled interval.

While there are other similar tools out there written in JavaScript, PHP and C#, this plugin does exactly what it promisis.

If used as function, a string containing a cuter version of the provided time stamp is returned.

CuteTime jQuery Plugin can be used as a function.

CuteTime jQuery Plugin can also be used via selectors. In this case, it replaces the text of the provided object with CuteTime.

CuteTime jQuery Plugin can also be used via selectors.

You can get more details about the plugin and download it from here.

CSS Based Javascript Free Cross-Browser Pagination with Tooltips

blogging developer — Wed, 11 Nov 2009 11:17:00 +0200

Blogs, forums, online slide presentations etc. mostly use simple previous - next text links for navigation. All other fancy, more useful pagination techniques need Javascript code or images. Yesterday, I came across to a new completely CSS based, Javascript and image free pagination example.

CSS Based Javascript Free Pagination with Tooltips

This cross-browser pagination technique is supported by:

Internet Explorer 6 or higher
Firefox 1.0 or higher
Chrome
Opera
Safari

More details and a demo can be found here.

Google Closure Compiler vs. YUI Compressor - Comparing the Javascript Compression Tools

blogging developer — Mon, 09 Nov 2009 13:54:00 +0200

I have written couple of articles on Google's Closure Compiler:

In terms of Javascript Compression, the most widely used tools are: JSMIN, the DOJO Compressor, Dean Edwards’ Packer and YUI Compressor. The YUI Compressor is designed to be 100% safe and yield a higher compression ratio than the other tools listed above. That’s why most of the JavaScript Frameworks use YUI Compressor to minimize their Javascript code.

On November 5th, Google announced Closure Compiler for Javascript compression. The strongest part of the Closure Compiler is that it does not only remove whitespace but also it rewrites Javascript Code to make it smaller. It also optimizes your Javascript code to perform better.

In this post, I compared the compression performance of YUI Compressor and Google Closer Compiler using the well-known Javascript Frameworks - Mootools, JQuery and Prototype:

Comparing YUI Compressor and Closure Compiler - the values given in the chart are bytes

Comparing YUI Compressor and Closure Compiler - Compression Percentage

The comparison results show that Google Closure Compiler minimizes code size about 20-25% more than YUI Compressor by providing nearly 60% compression.

Using Google Closure Compiler with PHP 5

blogging developer — Mon, 09 Nov 2009 13:17:00 +0200

Recently, I have written a C# wrapper for Google Closure Compiler to use with ASP.NET for on-the-fly JavaScript compression. For those who want to use the Closure Compiler with PHP, Bohuco.net has an article showing how to use the Google Closure Compiler over its RESTful API with PHP5.

$script = file_get_contents('http://www.domain.com/scripts/script.js');
$ch = curl_init('http://closure-compiler.appspot.com/compile');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, 'output_info=compiled_code&output_format=text&compilation_level=SIMPLE_OPTIMIZATIONS&js_code=' . urlencode($script));
$output = curl_exec($ch);
curl_close($ch);

You can find more details on using Closure Compiler with PHP 5 here.

C# Wrapper for Google Closure Compiler - Compressing Javascript Files on-the-fly with ASP.NET and Closure Compiler

blogging developer — Sun, 08 Nov 2009 08:36:00 +0200

On November 5th, Google released Closure Compiler for Javascript optimization. The strongest part of the Closure Compiler is that it does not only remove whitespace but also rewrites Javascript Code to make it smaller. It also optimizes your Javascript code to perform better. You can find more details and all of its features on my previous article: Closure Compiler – Javascript Compiler by Google.

During my tests, Closure Compiler reduced Javascripts more than 60%. Considering, the size of Javascript files that modern websites have and the reduction before HTTP compression, Closure Compiler is really useful.

Closure Compiler comes with a Java based command line tool and a RESTful API. RESTful API works great and very fast. API can be used with a MSBuild or NAnt script to automatically compress Javascript files.

I wrote a C# wrapper for the Google Closure Compiler:

C# wrapper for the Google Closure Compiler

The Closure Compiler has three compilation levels:

WHITESPACE_ONLY: just removes whitespace and comments from the Javascript
SIMPLE_OPTIMIZATION: performs compression and optimization that does not interfere with the interaction between the compiled JavaScript and other JavaScript. This level renames only local variables.
ADVANCED_OPTIMIZATIONS: achieves the highest level of compression by renaming symbols in your JavaScript. When using ADVANCED_OPTIMIZATIONS compilation you must perform extra steps to preserve references in other Javascript files

Below is an example of using the Google Closure Compiler C# wrapper with ASP.NET

Compress googleClosure = new Compress();
string script = googleClosure(Server.MapPath("~/script.js");

Download Closure.cs

Get Closure.cs

jQuery Multiday Datepicker - jQuery Calendar Plugin for Selecting Consecutive Days

blogging developer — Sun, 08 Nov 2009 06:42:00 +0200

Recently, we examined two jQuery date picker plugins: jQuery UI DatePicker Plugin and jQuery Date Range Picker Plugin. jQuery UI's Date Picker plugin enables users to select one and only one day from a selectable date range. On the other hand, jQuery Date Range Picker Plugin simplifies selection of a date range.

jQuery Mutlday Calendar Plugin enables selection of pre-specified number of consecutive days

jQuery Multiday Calendar Datepicker Plugin is an animated datepicker calendar for multi-day selection with multi-month display. It allows selection of pre-specified number of consecutive days by providing a sequence of side by side residing months.

You can find more details about the plugin here.

Closure Compiler - Javascript Compiler by Google - Compress Javascript with Closure Compiler

blogging developer — Fri, 06 Nov 2009 13:29:00 +0200

Yesterday, Google introduced Closure Tools (announcement) to enable easy creation of web applications. The tool set contains: Closure Compiler, Closure Library and Closure Templates.

Closure Compiler is a Javascript optimizer that compiles javascript code into a compact, high performance form. The compiler does more than a standard Javascript compressor. The Closure Compiler reduces the size of your JavaScript files and makes them more efficient, helping your application to load faster and reducing your bandwidth needs. Moreover, it removes dead code, rewrites the code to improve code running speed on browsers' Javascript engines. It also checks syntax, variable references, variable types and warns about Javascript errors.

Closure Compiler by Google - reduces the size of your JavaScript files and makes them more efficient

As mentioned before, Closure compiler is more than a standard Javascript compressor. Using it results having a less buggy and easier to maintain code.

The compiler also offers a Firebug extension, named Inspector, for better debugging.

You can use the Closure Compiler as:

An open source Java application that you can run from the command line.
A simple web application.
A RESTful API.

Closure Compiler by Google does more than removing whitespace.

You can find more details here. Also, tool can be used online at: http://closure-compiler.appspot.com/home.

jQuery Date Range Selector - An Easy to Implement jQuery Date Range Selector Plugin

blogging developer — Fri, 06 Nov 2009 11:49:00 +0200

Previously, I wrote about a jQuery Date Picker Plugin from jQuery UI. With minDate and maxDate properties, you can restrict the range of selectable dates with in the DatePicker. However, we sometimes need users to choose a date range. Filamentgroup modified the jQuery UI's Datepicker control and created a new plugin for quickly selecting a date from a list of preset dates/ranges.

Filamentgroup's Date Range Picker control simplifies selecting a range of values where the data set is very large or the high or the low end is unknown by "All dates before..." and "All dates after..." links. It also automatically controls the number of calendars needed for choosing a range. For example: you only need one calendar to choose "All dates before", but you need two calendars to select a custom date range.

jQuery Date Range Picker Plugin by FilamentGroup

Date Range Picker plugin requires jQuery and jQuery UI Datepicker. It also uses the jQuery UI CSS Framework as well as one additional custom CSS file. You can find more details about the plugin here.

jQuery Datepicker Plugin - Highly Configurable Datepicker from jQuery UI

blogging developer — Fri, 06 Nov 2009 07:57:00 +0200

For a couple of days, I have been working on finding the best-looking and the most customizable calendar and datepicker controls. Previously, I wrote about two calendar controls: iCal like Calendar with jQuery and FullCalendar - jQuery Event Calendar with Ajax.

jQuery UI provides abstractions for interaction and animation, advanced effects and themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

The jQuery UI Datepicker is a highly configurable jQuery datepicker plugin. The date format and language can be formatted, the selectable date ranges can be restricted and optional buttons and other navigation options can be added easily.

jQuery UI's Datpicker Plugin

By default, the datepicker is tied to a standard form input field. Focus on the input opens an interactive calendar in a small overlay. Choosing a date, clicking elsewhere on the page or hitting the Esc key closes the control. If a date is chosen, feedback is shown as the input's value. It can also be used as an inline calendar, by simply attaching the datepicker to a div or span.

You can also use keyboard shortcuts to control the datepicker:

page up/down - previous/next month
ctrl+page up/down - previous/next year
ctrl+home - current month or open when closed
ctrl+left/right - previous/next day
ctrl+up/down - previous/next week
enter - accept the selected date
ctrl+end - close and erase the date
escape - close the datepicker without selection

jQuery UI's Datpicker Plugin enables multiple month display

The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures.

More details can be found here.

jQuery Week Calendar - An Easy to Implement Google Calendar like jQuery Calendar Plugin

blogging developer — Fri, 06 Nov 2009 07:37:00 +0200

Previously, I posted about a monthly calendar jQuery Plugin: FullCalendar. FullCalendar is a jQuery plugin that provides full-sized, drag and drop capable calendar. It utilizes Ajax to fetch events on the fly. It is easily configurable to use custom feed format and also has an extension for Google Calendar. More details about FullCalendar can be found here.

jQuery Week Calendar is another jQuery Calendar plugin similar to FullCalendar. It provides a simple and flexible way of including a weekly calendar control in to your web pages. It is an extension of jQuery and jQuery IU plugin. jQuery Week Calendar is similar to Google calendar.

jQuery Week Calendar Plugin - A Google Calendar Like Week Calendar

The jQuery Week Calendar features:

a weekly grid for calendar events.
calendar events can be supplied as an array or a function returning JSON.
calendar events can be dragged, dropped and resized.
configurable timeslots
readonly calendars
custom date formatting
direct modification of individual events (create, update, delete...)

Dependencies:

jQuery 1.3.2
jQuery UI 1.7.x for drag, drop, resize

The plugin is compatible with Firefox 3.x, Safari 3.1+, Internet Explorer 7+ and Google Chrome.

The look and feel of the plugin is simple but easily editable by adding stylesheet that overrides colors.

Usage, implementation details and demos can be found here. I highly recommend checking out the FullCalendar plugin for monthly calendar view.

Powerful ASP.NET CMS Solution: Kentico CMS

blogging developer — Thu, 05 Nov 2009 16:45:00 +0200

Kentico CMS is a powerful, flexible and complete content management system which provides a complete set of features with an affordable price.

Kentico CMS – built on the Microsoft ASP.NET platform - comes with an easy-to-use WYSIWYG editor for creating/editing the content for building web sites, blogs, community sites, intranets and online stores. It has various modules that make building any type of website and manage its content possible. It comes with an API that allows you to script operations such as creating a new document, user, or editing an existing document. The API is great for integrations with any 3rd party software.

Kentico CMS WYSIWYG Editor

Kentico CMS lets you create and maintain articles, newsletters, forums, blogs, polls, news, wikis, product listings, FAQs, and knowledge-base articles. It also comes with a module for implementing e-commerce functionality into your website with support for search-engine optimization (SEO). In addition, Kentico generates SEO-friendly URLs, has full-text search support, a powerful role-based security system. Also, it supports multiple languages including Chinese and languages written from right-to-left such as Hebrew and Arabic.

Kentico CMS promises to fix any bug within 7 days, and in addition they plant a new tree with the name of the bug reporter. You can find more details here.

Kentico CMS for ASP.NET is available in four editions: Free, Professional Edition, Enterprise Edition and Social Networking Edition. The core features are the same for all these editions, but some advanced features are not available in the Free and Professional editions. The free edition have no time limitation and can be used for commercial purposes without aqny extra cost. It can be downloaded from here.

Kentico CMS is available in four editions

Besides TRIAL and FREE editions, the Virtual Lab service allows users to test Kentico CMS on-line for 7 days, without the need of installing anything on users’ local PC. To sum up, Kentico CMS is a powerful, flexible and reliable content management system, used by more than 4000 web sites in 83 countries and the clients include Microsoft, Brussels Airlines, Vodafone, Audi, Mazda, Subaru, Samsung, Gibson, Bayer, ESPN, Guinness, DKNY, Abbott Labs, Medibank Private (Australia), Ireland .ie and others.

Creating an iCal like Calendar with jQuery

blogging developer — Thu, 05 Nov 2009 16:00:00 +0200

I wrote a blog post about FullCalendar recently. (FullCalendar: jQuery Event Calendar with Drag'n Drop, Ajax Fething and Google Calendar Integration). I have just come a cross with an astonishing calendar that looks like iPhone's calendar application: iCal.

iCal style calendar with jQuery

This calendar is built with CSS and jQuery. It also features a lightweight Coda-like effect for event descriptions. You can find more details about the calendar here.

FullCalendar: jQuery Event Calendar with Drag'n Drop, Ajax Fetching and Google Calendar Integration

blogging developer — Thu, 05 Nov 2009 13:37:00 +0200

jQuery is a fast and concise Javascript Library that simplifies document traversing, event handling, animating and Ajax interactions for rapid web development.

FullCalendar is a jQuery plugin that provides full-sized, drag and drop capable calendar. It utilizes Ajax to fetch events on the fly. It is easily configurable to use custom feed format and also has an extension for Google Calendar. The calendar is highly customizable and has support for user event triggering for window resize, loading, day click, event click, event drop, etc.

FullCalendar - jQuery Calendar Plugin with Drag'n Drop and Ajax Capabilities

FullCalendar comes with the following available views:

month view
week view
day view
agenda week view
agenda day view

Crop Images with jCrop: Cross-Browser jQuery Pluging for Image Cropping

blogging developer — Tue, 03 Nov 2009 12:23:00 +0200

jQuery Plugin, jCrop provides an easy and quick way to add image cropping functionality to your web applications. jCrop combines ease of use of a plug-in and cross browser and cross platform DHTML cropping engine.

jCrop: jQuery Image Cropping Plugin

jCrop Features:

Attaches any image in the HTML
Supports aspect ratio locking
Supports min. and max. sizes
Supports callback events
Supports CSS styling

As mentioned earlier, jCrop is cross-platform and compatible with Firefox 2+, Safari 3+, Opera 9.5+, Google Chrome, Internet Explorer 6+.

How To Create Strong Passwords – Tips on increasing your online security

blogging developer — Mon, 02 Nov 2009 20:44:00 +0200

Creating strong passwords is key to your online security. Since the computers trying to hack passwords are getting more powerful everyday, passwords you are using could be the weakest link you are using.

Password cracking tools use one of the following approaches:

Guessing – using personal information (ex: using date of birth, phone number as password)
Dictionary Attacks – using single words found in dictionaries as password
Bruce Force Attack – trying every possible password

A brute force attack will always be successful if there is no limit to the number of attempts. In order to delay a brute force attack, a strong password should be chosen.

Guide to Strong Passwords:

A strong password should:

Contain 8 or more characters
Combine letters, numbers and symbols
Be easy to remember, but should not contain any easy to guess personal information

You should:

avoid sequences (ex: abcdef) or repeated characters (ex: 55555)
avoid look-a-like substitutions of numbers or symbols (ex:p@ssword)
not use your login name as password
avoid using the same password for all accounts

How to Add Functional Tooltips to your Form Elements Easily - Embedding jQuery Tooltips in Form Fields

blogging developer — Thu, 29 Oct 2009 16:12:00 +0200

I believe that tooltips are one of the most important and useful Javascript widgets on the web. Many libraries and plug-ins are available for jQuery that enable easy implementation of tool tips: qTip, SimpleTip, jQuery Tooltip, EZPZ Tooltip, jQuery Input Floating Hint Box, HTML ToolTip, Orbital Tooltip, Tipsy, ClueTip, jTip, BeautyTips, Hovertips, BetterTip, jqTooltip...

I love using tool tips in forms. An automatic appearing box with hint, when user focuses on an input increases the usability of the form. I have used many tooltip plugins but recently I have discovered an easy-to use one: Tooltip Plug-in from jQuery Tools. It is really easy to use and can be customized. It can contain any HTML Element such as images, links and tables. Beside the default effect "slice-up and toogle", you can easily built your own effects.

Tooltip Plug-in from jQuery Tools

For basic usage: each tooltip should be specified in the title attribute of each form element.

Tooltip Plug-in from jQuery Tools - each tooltip should be specified in the title attribute of each form element

With advanced features, you can customize tooltip's appearance and dimensions with CSS. Moreover, the positioning of the tooltip can be modified easily.

Tooltip Plug-in from jQuery Tools - Example

jQuery.popeye: A Lightbox Alternative

blogging developer — Thu, 22 Oct 2009 16:45:00 +0200

Lightbox is the first unobtrusive script that allowed us to display enlarged versions of images embedded in web pages without displaying pop-ups or leaving the page. Basically, lightbox adds a semi-transparent layer to the page which contains the enlarged image centered.

jQuery.popeye: A Lightbox Alternative

jQuery.popeye is an image gallery which is an alternative to the famous Javascript Lightbox, that offers consistent look & feel with the rest of your website. When compared to other Lightbox alternatives, it is more integrated into the flow of the web page. It offers a box with a small preview image with caption, the possibility to flip trough an array of more thumbnails and to show an enlarged version in the same place.

jQuery.popeye: A Lightbox Alternative

The plugin transforms an unordered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state. The compact box has fixed, automatically calculated dimensions. The width and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area.

Click here for a demo

Top 7 Easy-to-Apply Tips to Improve Your Web Site Performance

blogging developer — Mon, 14 Sep 2009 09:38:00 +0200

A lot of articles have been written on website performance optimization lately but I want to share my hands-on-experience and important articles on the subject.

There are two types of performance:

Server Performance
Perceived Performance

Server Performance is associated with the number requests that a server can handle at a time and the time needed to process these requests. On high volume websites, since it determines the number of users a machine can serve before additional server is needed, this performance aspect is very important.

Perceived Performance is the speed of websites in visitors’ perspective. Even if the server performance is high, a site may appear slow to a visitor because of slow client-side performance.

This article focuses perceived performance tuning by supplying reasons for poor client-side performance and details out how we can achieve better client-side performance.

1. Make Fewer HTTP Requests

A dedicated team focused on quantifying and improving the performance of Yahoo! Products worldwide conducted experiments to learn more about optimizing web page performance. They discovered that popular sites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to get components in the HTML document.

Each bar represents a specific component requested by the browser - Only 10% of 2.4 seconds is spent for downloading the html of Yahoo.com

Since browsers spend approximately 80% of the time fetching external components such as scripts, style sheets and images. Reducing the number of HTTP requests has the biggest impact on improving website performance. Moreover, it is the easiest way to make a performance improvement.

UPDATE How To: Minimize HTTP Requests – The Most Important Guideline for Improving Web Site Performance article focuses on ways of minimizing HTTP Requests to maximize web site performance.

2. Enforce Caching

If you examine the preferences dialog of any modern Web browser (like Internet Explorer, Safari or Mozilla), you’ll probably notice a cache setting. This lets you set a section of your computer’s hard disk to store copies of web pages, images and media for faster browsing.

This cache is especially useful when users hit the back button or click a link to see a page they’ve just looked at. Also, if navigation images throughout a site are the same, they’ll be served from browser's cache.

Internet Explorer Cache Settings

Web caching is useful for three important reasons:

Reduce user-perceived Web-site delays,
Reduce network bandwidth usage,
Reduce server loads.

The Yahoo! Performance Team conducted another experiment to understand the difference between an empty cache (browser requests all the components to load the page) and full cache (most of the components are found in the disk to load the page and the HTTP requests corresponding to these components are avoided).

Loading Yahoo.com with full cache

Loading with an empty cache took 2.4 while loading with a full cache took 0.9 seconds. The full cache page view had 90% fewer HTTP requests and 83% fewer bytes to download than the empty cache page view.

3. Use HTTP Compression

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by making fewer http requests. On the other hand, the end-user's bandwidth speed, Internet service providers are beyond the control of the development team. However compression reduces response times by reducing the size of the HTTP response.

In the case of HTTP compression, a standard gzip or deflate encoding method is applied to the payload of an HTTP response, significantly compressing the resource before it is transported across the web.

HTTP Compression is implemented on the server side as module which applies gzip algorithm to responses as the server sends them out. Any text based content such as static HTML content, style sheets, JavaScript. It is usually possible to cache the static content in order to avoid repeatedly compressing the same file. On the other hand, dynamic content such as .asp, .aspx, .php files must be recompressed before served. This means that there is trade off to be considered between processor utilization and payload reduction.

If the primary goal is bandwidth savings, the strategy should be to compress all text-based output. Ideally, this should include static text files (such as HTML and CSS) and files that produce output in text media MIME types (such as ASP and ASP.NET files), as well as files that are text based but of another media type (such as external JavaScript files).

Bloggingdeveloper.com utilizes gzip compression. 74% bandwidth is saved by compression.

4. Increase the Number of Parallel Requests

As I mentioned earlier, browsers are able to download two or four components on parallel per hostname. So we may increase the number of parallel downloads by using additional aliases such as images.bloggingdeveloper.com. According to the results of experiments conducted by Yahoo! Performance Team, using too many hostnames increases the amount of simultaneous HTTP requests but it will also increase the amount of DNS requests which affects the performance negatively. The Performance Team mentioned a strong balance between the number of parallel HTTP requests and required DNS requests to be performed of 2 to 4 hostnames. For higher number of hostnames, you may negatively affect the performance.

5. Place StyleSheets into the Header

Web developers that care about performance want browser to load whatever content it has as soon as possible. This fact is especially important for pages with a lot of content and for users with slow Internet connections. When the browser loads the page progressively the header, the logo, the navigation components serve as visual feedback for the user.

When we place style sheets near the bottom part of the html, most browsers stop rendering to avoid redrawing elements of the page if their styles change.

6. Put Scripts to the end of Document

Unlike StyleSheets, it is better to place scripts to the end of the document. Progressive rendering is blocked until all StyleSheets have been downloaded. Scripts cause progressive rendering to stop for all content below the script until it is fully loaded. Moreover, while downloading a script, browser does not start any other component downloads, even on different hostnames.

7. Make JavaScript and CSS External

Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. Inline JavaScript and CSS increases the HTML document size but reduces the number of HTTP requests. With cached external files, the size of the HTML is kept small without increasing the number of HTTP requests.

Additional Reading

Browser Cache Usage – Exposed! by Tenni Theurer
What the 80/20 Rule Tells Us about Reducing HTTP Requests – by Tenni Theurer
Maximizing Parallel Downloads in the Carpool Lane - by Tenni Theurer

Links for 2009-09-11 [del.icio.us]

Sat, 12 Sep 2009 00:00:00 PDT

Image Preloading Deeply - CSS/Javascript/jQuery
Browsers load images after an HTTP request is sent for them either by <img> tag or through a javascript call. If you have a javascript function that changes an image on mouseover, you have to wait while the image is retrieved from the server. This would be disturbing when users have a slow internet connection or when the images being retrieved are very large. Although most of the browsers store images in the local cache so that subsequent calls to them are responded immediately, there is still a delay in the first time the images are needed.
Image Preloading: Javascript or CSS – Comparing the techniques
For better display and visitor interaction, image preloading must be implemented in some cases. Previously we focused on two techniques to achieve image preloading in the following posts: Image Preloading with Javascript Preloading Images Using CSS Today, I would like to compare these two methods to understand the safest and easiest method for preloading images:
jQuery Colorize - Plugin for Alternating Table Row Color/Column Color
When displaying tables in web pages, alternating the background color of each row can increase readability. The jQuery plugin Colorize helps us to alternate table rows and columns, add highlight effect on mouse over and colorize a row/column on mouse click.

Image Preloading Deeply - CSS/Javascript/jQuery

blogging developer — Fri, 11 Sep 2009 13:34:00 +0200

Browsers load images after an HTTP request is sent for them either by <img> tag or through a javascript call. If you have a javascript function that changes an image on mouseover, you have to wait while the image is retrieved from the server. This would be disturbing when users have a slow internet connection or when the images being retrieved are very large. Although most of the browsers store images in the local cache so that subsequent calls to them are responded immediately, there is still a delay in the first time the images are needed.

Image preloading is a technique of caching images to speed up their display by using browser’s cache even before they are needed.

Recently, we focused on image preloading deeply with the following posts:

How to: Image Preload: Javascript (jQuery) or CSS – Comparing the techniques

blogging developer — Fri, 11 Sep 2009 12:06:00 +0200

For better display and visitor interaction, image preloading must be implemented in some cases. Previously we focused on two techniques to achieve image preloading in the following posts:

Today, I would like to compare these two methods to understand the safest and easiest method for preloading images:

Preloading with Javascript:

In order to preload images with Javascript, browsers should support Javascript and it should be turned on. Without Javascript, the preloading will not happen and each time the image is needed, it will be fetched. If the preloaded images will be used on image effects such as rollovers or other effects that require Javascript, preloading with Javascript is the best choice. That way, for browsers that are not supporting Javascript, the images will not be preloaded.

The Javascript preloading code can be placed anywhere in the page including the HEAD area of the page. If all preloading is done with JS, most of the search engine spiders won’t index the images.

Preloading with CSS:

Preloading with CSS will work even if the browser’s Javascript is turned off. The CSS preloading section should be placed in the BODY of the HTML.

Search engine spiders indexes the images when they are preloaded with CSS.

Notes on Image Preloading:

Users with slow Internet connection speeds will navigate away if you preload too many or too large images before page content is displayed.

The JavaScript and the CSS/HTML image preloading code can be used on the same web page at the same time.

Both techniques can be used more than once on the same web page to preload additional images at different points.

Preloading Images Using CSS

blogging developer — Fri, 11 Sep 2009 11:56:00 +0200

Preloading images decreases page load time and enhance user experience. In the previous articles: Image Preloading with Javascript and Image Preloading with jQuery, we focused on techniques to preload images using Javascript.

In this post, I would like to focus on another image preload technique using CSS. And on another post, I compared two image preloading techniques to understand advantages and disadvantages of both method - Preloading Images: Javascript or CSS – Comparing the techniques

Image preloading with CSS can be achieved by a simple <div> with style “display:none;” containing all <img> tags of images to be preloaded.

The CSS preloading code must be in the BODY area of the HTML code. It will not work in the HEAD section. The optimum position depends on how the preloaded images will be used. If the images will be used sometime after the web page has finished loading, the preload <div> can be placed below the page content. If the images will be used immediately, such as automatic background image change, the preload <div> should be placed on the top section of the BODY area.

Image Preloading with Javascript

blogging developer — Fri, 11 Sep 2009 11:38:00 +0200

Image Preloading is a technique, often used in navigation graphics and image rollovers, to load images and put them in the browser's cache before they are needed. In this post, we will focus on the Javascript technique to implement image preloading. Also, check another Javascript image preloading technique on Image Preloading with jQuery

The Javascript Image() Object

The simplest way to preload an image is to instantiate a new Image() object in Javascript and pass the URL of the image you want to preload.

For example, if you want to preload an image, simply create a new javascript Image() object and place the script in the head section of the page to ensure it runs as soon as the page loads.

PreLoading Multiple Images with Javascript Arrays

In practice, you will need to preload more than just one image to smooth effect on image rollovers. A Javascript array of images can be preloaded as:

The JavaScript image preloading code may be placed anywhere in the HTML source code. If placed in the HEAD section, images would be loaded before any of the page content is displayed. Also consider checking another image pre-loading technique with CSS at Preloading Images Using CSS

jQuery Colorize - Plugin for Alternating Table Row Color/Column Color

blogging developer — Thu, 10 Sep 2009 14:24:00 +0200

When displaying tables in web pages, alternating the background color of each row can increase readability. The jQuery plugin Colorize helps us to alternate table rows and columns, add highlight effect on mouse over and colorize a row/column on mouse click.

Colorize - jQuery Plugin for alternating table row colors

The plugin is easier to implement when compared to CSS and Javascript alternating table row color techniques and highly customizable. More details about plugin parameters and the demo can be found at:

COLORIZE – JQUERY TABLE PLUGIN

Image Preloading with jQuery

blogging developer — Thu, 10 Sep 2009 10:06:00 +0200

Pre-loading images is the key point to prevent the flickering while rendering a cool JavaScript driven animation, rollover, Ajax loader or toggle effect. If the script which is replacing an image pauses to wait for another image to load, the effect became useless. Image preloading which is pretty simple with jQuery is the solution:

PRELOADING ARRAY OF IMAGES:

The code snippet that is around the Internet for some time provides image preloading:

jQuery.preloadImages = function() {
   for(var i = 0; i<arguments.length; i++)
   {
   jQuery("<img>").attr("src", arguments[i]);
   }
}

In order to use the above function, an array of image urls should be provided:

$.preloadImages("image.gif", "/themes/images/BD/image2.png", "/themes/images/BD/flicker.jpg");

PRELOADING CSS IMAGES WITH JQUERY

I’ve just discovered another jQuery function (plug-in) that pre-loads images which are referenced in CSS files. The script from the Filament Group iterates through each rule in stylesheets attached to the page and if a rule contains an image URL, it loads the image ensuring it’s available before using it.

Download the plug-in

jQuery Plug-in for Preloading CSS Images

To use this plugin, call $.preloadCssImages(); when the DOM is ready. Like this:

$(document).ready(function()
{
$.preloadCssImages();
});

Disabling Right Click (context menu) with jQuery

blogging developer — Thu, 10 Sep 2009 09:17:00 +0200

There are a lot of examples of javascript code snippets to disable right click on web pages. However, jQuery makes it a lot easier:

$(document).ready(function()
{
   $(document).bind("contextmenu",function(e){
   return false;
   });
});

Top 3 jQuery Tips for Beginners

blogging developer — Wed, 09 Sep 2009 21:43:00 +0200

Hot Tip #1: Access Elements by Javascript Array Indexing

Application of a selector creates a Javascript array which can be used for accessing DOM elements with array index easily.

For Example:

var element = $("img")[2];

will set the variable element to the second <img> element in the matched set of document's all <img> elements.

Hot Tip #2: Create Union of Elements with Multiple Selectors

Union of multiple selectors can be created by listing selectors separated by commas 'n a s'ngle call to $()

For Example:

$("img,p")

will match all <img> and <p> elements, while the following matches all <div> elements with a title attribute and all <img> elements with alt attributes.

$("div[title],img[alt]")

Hot Tip #3: Be Careful with not() and remove() methods!

.not() method removes elements from the matched set while the .remove() method removes the elements in the matched set from the HTML DOM.

Get Querystring with JavaScript - Parse/Get QueryString with Client-Side JavaScript

blogging developer — Fri, 11 Jul 2008 10:00:00 +0200

Get URL Parameters (QueryStrings) using Javascript

Nearly all server-side programming languages have built-in functions to retrieve querystring values of a URL. In web browsers you can access the querystring with client-side JavaScript, but there is no standard way to parse out the name/value pairs. So here is a function to return a parameter you specify. The following javascript code snippet facilitates Javascript's built in regular expressions to retrieve value of the key. Optionally, you can specify a default value to return when key does not exist.

function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return qs[1];
}

The getQuerystring function is simple to use. Let's say you have the following URL:

http://www.bloggingdeveloper.com?author=bloggingdeveloper

and you want to get the "author" querystring's value:

var author_value = getQuerystring('author');

Download querystring.js

Get querystring.js

If you execute code shown in the above line, the author_value will be bloggingdeveloper. The query string is parsed by the regular expression and the value of the author_value parameter is retrieved. The function is smart in a couple of ways. For example, if you have an anchor in your URL like our example URL above does (#top) the getQuerystring() function knows to stop before the # character. Also, if a requested parameter doesn't exist in the query string and the default value is not specified as a function parameter then an empty string is returned instead of a null.

Javascript Delayed Redirect

blogging developer — Fri, 27 Jun 2008 12:53:00 +0200

Time delay in url redirection may be useful for the following conditions:

Refresh a web page in every specified seconds.
For displaying an "Update you Bookmark" page when a page Url has ben changed.

The html and JavaScript code for url redirection with delay is given below:

<html>
<head>
<script type="text/javascript">
function delayedRedirect(){
window.location = "/default.aspx"
}
</script>
</head>
<body onLoad="setTimeout('delayedRedirect()', 3000)">
<h2>You'll be redirected soon!</h2>
</body>
</html>

The JavaScript function setTimeout is the most important part of the code given above. Javascript setTimeout function calls delayedRedirect function after 3 seconds (3000 miliseconds).

You may find more details of setTimeout() method in JavaScript setTimeout Function - JavaScript Timing Events

Setting Focus Using Javascript to an Input Field (Textbox) / Form Field / Html Element (Textbox) when the Page Loads

blogging developer — Fri, 27 Jun 2008 11:15:00 +0200

The javascript code below shows how to set the focus on an Input Field / Form Field / Html Element (Textbox) when the page is loaded.

<html>
<head>
<script type="text/javascript">
function setFocus()
{
     document.getElementById("name").focus();
}
</script>
</head>

<body onload="setFocus()">
<form>
       Name: <input type="text" id="name" size="30"><br />
       Surname: <input type="text" id="surname" size="30">
</form>
</body>

</html>

Consider also checking the following post which describes 3 techniques on setting focus on page load after postback or after submit.

Set Focus on Page Load / After Postback / After Submit in ASP.NET 2.0 and ASP.NET 3.5 - Setting Focus to an ASP.NET Control

Blogging Developer — Mon, 23 Jun 2008 15:58:00 +0200

In ASP.NET 1.x, it is not possible to programmatically set focus to a web server control without using the JavaScript's focus() function after submit (on Page Load / after Postback). You may find the details on how to set focus to web controls in ASP.NET 1.x in one of my previous articles: Set Focus After PostBack in ASP.NET 1.x - Setting Focus to an ASP.NET Control

However, in ASP.NET 2.0 and in ASP.NET 3.5, there are three ways to dynamically set the focus to a specific control using just one line of code.

METHOD 1 – Set Focus in ASP.NET 2.0/3.5 Using Page’s SetFocus() Method After Submit (on Page Load / after Postback)

You pass the control ID as the parameter and call the Page.SetFocus(control) method, which enables you to set the focus to a particular control immediately after a page is initiated,loaded or postbacked.

void Page_Init(object sender, EventArgs e)
{
SetFocus(ControlToSetFocus);
}

METHOD 2 – Set Focus in ASP.NET 2.0/3.5 Usign Web Controls’ Focus() Method After Submit (on Page Load / after Postback)

Or you can call the Focus() method that is available to all web controls. You can call it in the Page_Load event. For example, if you have a TextBox web control called Textbox1, you may simply call:

TextBox1.Focus();

METHOD 3 - SET FOCUS in ASP.NET 2.0/3.5 Using DefaultFocus Property After Submit (on Page Load / after Postback)

ASP 2.0 web forms also have a property called DefaultFocus. By setting the DefaultFocus property, you can set the focus to a desired control when page loads.

For example, the code below will automatically set the focus on TextBox2 when the web form is loaded:

Set Focus After PostBack / After Submit / on Page Load in ASP.NET 1.x - Setting Focus to an ASP.NET Control

Blogging Developer — Mon, 23 Jun 2008 10:18:00 +0200

Management of control focus is one of the common tasks when building web applications with effective and friendly user interface. In order to set focus on a certain control such as textboxes, buttons dropdowns after postback / after submit / on Page Load in ASP.NET 1.x, we can use a dynamic javascript block that facilitates Javascript’s focus() function.

private void SetFocus(String controlID)
{
// Build the JavaScript String
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script language='javascript'>");
sb.Append("document.getElementById('");
sb.Append(controlID);
sb.Append("').focus()");
sb.Append("</script>")

// Register the script code with the page.
Page.RegisterStartupScript("FocusScript", sb.ToString());
}

For the above code, you need to pass the control’s id as the parameter, then define the Javascript function in a string variable then call the Page class to register the script.

JavaScript substring vs. substr with Examples - The Difference Between JavaScript String Extraction Functions

blogging developer — Sat, 21 Jun 2008 12:10:00 +0200

When you write JavaScript, you need to know what string manipulation methods/functions are available. In the previous posts JavaScript substr Function and JavaScript substring Function, we gave examples on usages of the two most common javascript string functions. You can also find the details below:

JavaScript substring() Method

JavaScript substring is used to take a part of a string. The syntax of JavaScript substring method is given below:

stringObjectToTakeAPartOf.substring(start-index,stop-index)

start-index: (Required - Numeric Value) - where to start the extraction
stop-index: (Optional - Numeric Value) - where to stop the extraction

Notes about Javascript substring:

If start-index is equal to stop-index, JavaScript substring returns an empty string.
If stop-index parameter is omitted, JavaScript substring extracts characters from start-index to the end of the string.
If parameters are 0or NaN, the parameters are threated as 0.
If parameters are greater than the string's length, the parameters qill use string's length.
If start-index > stop-index, then the JavaScript substring function swaps 2 parameters.

substring Example:

The output of the above code is:

o wo

JavaScript substr() Method

The JavaScript substr() method works slightly different. Instead of the second parameter being an index number, it gives the number of characters. The syntax of JavaScript substr() is given below:

stringObjectToTakeAPartOf.substr(start-index,length)

start-index: (Required - Numeric Value) - where to start the extraction
length: (Optional - Numeric Value) - how many characters to extract

Notes about substr:

To extract characters from the end of the string, use a negative start-index. (Internet Explorer returns the whole string which is wrong.)
If the length parameter is omitted, JavaScript substr method extracts to the end of the string.
substr() is not supported by Netscape 2, Netscape 3, Internet Explorer 3 and Opera 3.

JavaScript substr Example:

The output of the above code is:

o wo

Since JavaScript substr() is not cross-browser, I never use it.

JavaScript parseFloat() Function with Examples - Converting Strings to Numbers

Blogging Developer — Fri, 20 Jun 2008 14:35:00 +0200

The JavaScript parseFloat() function, parses a string and returns the first floating point number in the string.

The parseFloat() function determines if the first character in the string argument is a number, parses the string from left to right until it reaches the end of the number, discards any characters that occur after the end of the number, and finally returns the number as a number (not as a string).

Only the first number in the string is returned, regardless of how many other numbers occur in the string.

If the first character in the string is not a number, the function returns the Not-a-Number value NaN.

Here are some examples about Javascript parseFloat() method:

document.write("<BR>" + parseFloat("15"))
document.write("<BR>" + parseFloat("12.12345"))
document.write("<BR>" + parseFloat("45.00000000"))
document.write("<BR>" + parseFloat("23.348 44.218 55.405"))
document.write("<BR>" + parseFloat(" 55 aardvarks"))
document.write("<BR>" + parseFloat("Year 2002"))

The outputs will be:

15
12.12345
45
23.348
55
NaN

Javascript parseInt() Function with Examples - Converting Strings to Integers

Blogging Developer — Fri, 20 Jun 2008 14:08:00 +0200

The JavaScript parseInt() function parses a string and returns the first integer in a string.

There are two arguments one of which is mandatory string argument that is the string which is parsed to return the integer. The other argument is the optional radix argument that specifies the base of the integer and can range from 2 to 36. For example, 16 is the hexidecimal base (0123456789ABCDEF).

If no radix argument is provided or if it is assigned a value of 0, the function tries to determine the base:

If the string begins with "0x", the radix is 16 (hexadecimal)
If the string begins with "0", the radix is 8 (octal). This feature is deprecated
If the string begins with any other value, the radix is 10 (decimal)

After determining if the first character in the string argument is a number, the parseInt function parses the string from left to right until the end of the number or a decimal point is encountered, then it discards any characters that occur after the end of the number (including a decimal point and all numbers after the decimal point), and finally it returns the number as an integer (not as a string).

Only the first integer in the string is returned by the parseInt() function, regardless of how many other numbers occur in the string. This function does not return decimal points nor numbers to the right of a decimal.

If the first non-whitespace character is not numeric, the function returns the Not-a-Number value NaN.

Here are some examples of JavaScript parseInt() Function

document.write("<BR>" + parseInt("15"))
document.write("<BR>" + parseInt("12.12345"))
document.write("<BR>" + parseInt("45.00000000"))
document.write("<BR>" + parseInt("23.348 44.218 55.405"))
document.write("<BR>" + parseInt(" 55 aardvarks"))
document.write("<BR>" + parseInt("Year 2002"))

The output of the code above will be:

15
12
45
23
55
NaN

window.history with Examples - JavaScript History Object - History Object's Methods and Properties

Blogging Developer — Thu, 14 Feb 2008 00:01:00 +0200

The JavaScript History object - property of the window object - contains an array / list of previously visited URLs. In this article, we will look at the history object properties and methods, length, current, next, previous properties, back(), forward() and go() methods along with syntax and examples.

Mostly, JavaScript history object is used to simulate the browser's back button:

window.history

window.history property has the return value as an array which contains items with details of the URL's visited within that browser window/tab. The JavaScript history object is a JavaScript object and not a DOM object. The JavaScript runtime engine automatically creates this object.

window.history Properties

history.length

The length property of the history object returns the number of elements in the history list.

General syntax of length property of history Object:

history.length;

An example to understand the length property of history object:

history.current

This property contains the complete URL of the current History entry.

General syntax of current property of history Object:

history.current;

history.next

The next property of history object contains the complete URL of the next element in the History list. This functionality or the URL visited is the same as pressing the forward button or menu.

General syntax of next property of history Object:

history.next;

history.previous

The previous property of history object contains the complete URL of the previous element in the History list. This functionality or the URL visited is the same as pressing the back button or menu.

General syntax of previous property of history Object:

history.previous;

window.history Methods

history.back()

The back() method of the history object loads the previous URL in the History list. The functionality results are the same as pressing the previous button of the browser.

General syntax of back method of history Object:

history.back();

history.forward()

The forward() method of the history object loads the next URL in the History list. The functionality results are the same as pressing the forward button of the browser.

General syntax of forward method of history Object:

history.forward();

history.go()

If the programmer wishes to load a specified URL from the History list, then the go method of history object can be used.

General syntax of forward method of history Object:

history.go(number);

history.go(URL);

The back method seen above is the same as history.go(-1) in terms of go method of history object. The forward method seen above is the same as history.go(1).

How To: Minimize HTTP Requests – The Most Important Guideline for Improving Web Site Performance

Blogging Developer — Thu, 31 Jan 2008 20:37:00 +0200

In my previous article 7 Easy-to-Apply Tips to Improve Your Web Site Performance, I described methods to achieve better client-side performance. The conclusion of the article was: “The most important and effective way to improve web site performance is to make fewer HTTP Requests.”

Since browsers only are able to download two components on parallel per hostname, and every HTTP request has an average round-trip latency of 0.2 seconds, that causes a 2 second latency alone, if the site is loading 20 items, regardless of whether they are style sheets, images or scripts. (On an average broadband connection with a browser capable of downloading two components at a time).

Since browsers spend approximately 80% of the time fetching external components such as scripts, style sheets and images. Reducing the number of HTTP requests has the biggest impact on improving website performance. Moreover, it is the easiest way to make a performance improvement.

This article focuses on ways of minimizing HTTP Requests to maximize web site performance.

1. Image Maps

Image Maps are used to combine multiple images into a single image and specify regions to assign a specific action to each region. The overall size is about the same, but reducing the number of HTTP requests speeds up the page.

There are two types of image maps:

Client-side: When a user activates a region of a client-side image map with a mouse, the pixel coordinates are interpreted by the user agent. The user agent selects a link that was specified for the activated region and follows it.

Server-side: When a user activates a region of a server-side image map with a mouse, the pixel coordinates of the click are sent to the server-side agent specified by the href attribute of the A element. The server-side agent interprets the coordinates and performs some action.

Client-side image maps are preferred over server-side image maps for at least two reasons: they are accessible to people browsing with non-graphical user agents and they offer immediate feedback as to whether or not the pointer is over an active region.

For details: Image Maps

The main navigation of bloggingdeveloper.com utilizes image maps. If you examine the source of this page, you will see the following code:

2. CSS Sprites

Another method for reducing the number of image requests is combining images into a single image and using CSS background-image and background-position properties to display the desired image part.

You may find detailed information about CSS sprites in CSS Sprites: Image Slicing’s Kiss of Death.

Bloggingdeveloper.com utilizes CSS Sprites on the rating stars.

3. Combine External Script/StyleSheet Files into a Single File

Number of HTTP requests may be reduced by combining all scripts into a single script and similarly combining all external stylesheets into a single stylesheet.

While combining external files reduces the HTTP requests, it hardens the maintenance of these files. However, combining these files as a part of build process is a good practice. Moreover, if you have variety of pages that use a different set of scripts and stylesheets, you should not combine them into a one big file which is inefficient since the page downloads more JS and CSS than it needs.

Conclusions:

If you want to improve your site’s performance, reducing the number of HTTP requests in your page is the first place to start. This is the most important guideline for improving performance.

Compress Javascript with compressjavascript.com - Free Online Javascript Compression Tool

Blogging Developer — Sun, 27 Jan 2008 21:46:00 +0200

Internet Applications with Web 2.0 features make heavy use of JavaScript. As rich web applications are being built with larger JavaScript, the need for JavaScript compression to keep bandwidth and page load times as small as possible by decreasing the size of the files served is becoming more important.

CompressJavascript.com takes your JavaScript code and compresses it by removing comments, whitespace, line feeds, and by shortening function parameters and variable names. This will reduce the script size, and may help your pages load faster and reduce bandwidth consumption.

Compress JavaScript at http://www.compressjavascript.com

Themes for Ajax Control Toolkit's Tab Control

Blogging Developer — Tue, 22 Jan 2008 09:30:00 +0200

Matt Berseth created five themes for the AjaxControlToolkit's Tab control using the images from dynamicdrive.

Themes for Ajax Control Toolkit Tabs

Check the related blog entry (Five AjaxControlToolkit Tab Themes created from DynamicDrive.com) for demo and download.

JavaScript: Array Length Property

Blogging Developer — Sat, 19 Jan 2008 23:00:00 +0200

The length of any Javascript array can be found by using its length property. Moreover, the length property can be used to loop through array elements. Array numbering starts from 0 in Javascript. Therefore, name_of_the_array[1] is the second element of the array. As a result, the last element of the array is the total size of the array minus 1.

var myarray = ['a', 'b', 'c', 'd'];

Getting the first element of a Javascript Array:

document.write(myarray[0]);

This will display a as the first element of the array.

Getting the last element of a Javascript Array:

document.write(myarray[myarray.lenth-1]);

This will display d as the last element of the array.

Looping through the elements of a Javascript Array:

var myarray = ['a', 'b', 'c', 'd'];
for(i=0;i {
document.write(myarray[i]);
}

This will display abcd.

Assigning a value to Javascript Array Length Property

If we assign a value to length property of the array which is less than the actual length of the array, the elements after the assigned length are lost.

Check the following example:

var myarray = ['a', 'b', 'c', 'd'];
myarray.length=2;
document.write(myarray[myarray.lenth-1]);

We lost the last two elements by assigning a value smaller than the actual length of the array. Therefore, the example above will display b.

Array Length Browser Incompatiblity

The following code returns 4 in Firefox and 5 in IE.

var myarray = ['a', 'b', 'c', 'd',];
document.write(foo.length);

The extra comma on the end of the array causes the interpretation difference. IE interprets this as an additional element with an undefined value. Firefox ignores it.

The ECMAScript standard says:

Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the Array and increases the index of subsequent elements. Elided array elements are not defined.

According to the standard the interpretation of IE is correct. However, you have to be careful to write your code compatible to all browsers.

document.lastModified - How To: Display the Last Modified Date of a Document using Javascript - Javascript's document.lastModified Property

Blogging Developer — Fri, 18 Jan 2008 16:22:00 +0200

Displaying the last modified date of a web page using Javascript is just a matter of diplaying the document.lastModified property of Javascript.

document.lastModified;

In order for this property to work, the server has to send the information to the browser. which is widely supported by the browsers nowadays.

When a server does not send a lastModified date information to the browser, Netscape and Opera give a last modification date of 01/01/1970 at 00:00:00 hrs, while Internet Explorer gives today. So it is always a good practice to test the server if it is sending the necessary information to the browser before using this script.

document.lastModified

document.write(document.lastModified);

outputs: 18/01/2008 16:43:32

The terminal server has exceeded the maximum number of allowed connections – Error in Remote Desktop Connection (mstsc)

Blogging Developer — Fri, 18 Jan 2008 11:15:00 +0200

Remote desktop connections remain active until the logged in user selects "Log Off" from the Start Menu. If a user closes the remote desktop window without logging off, the user will still remain logged on.

Only up to two simultaneous Remote Desktop connections are allowed by default and active and disconnected sessions are calculated in this connection limit.

If a third simultaneous attempt is made to login to the server "The terminal server has exceeded the maximum number of allowed connections" error will be shown to the user, and they will be unable to complete the login process.

Fortunately, there is a way around this:

Click OK to the error message.
Type mstsc /v:xx.xx.xx.xx /f –console into Start – Run replacing xx.xx.xx.xx with the remote IP
Login with Administrator account.

This will connect you to the remote computer.

JavaScript: null vs. undefined - The Difference between null and undefined

Blogging Developer — Tue, 25 Dec 2007 17:14:00 +0200

JavaScript is different from other programming languages by containin both undefined and null values, which may cause confusion.

null is a special value meaning "no value". null is a special object because typeof null returns 'object'.

On the other hand, undefined means that the variable has not been declared, or has not been given a value.

Following snippets display 'undefined':

// i is not declared anywhere in code
alert(typeof i);

var i;
alert(typeof i);

Although null and undefined are slightly different, the == (equality) operator considers them equal, but the === (identity) operator doesn't.

JavaScript Array.Join vs String Concatenation - Avoid String Concatenation's Major Hit on Performance

Blogging Developer — Mon, 17 Dec 2007 16:45:00 +0200

Doing many string concatenation operations can be a major hit on performance even in Javascipt.

Using + to concatenate string pieces into a huge string is not the correct and the only way. Since string concatenation results in too many intermediate strings and concatenation operations, it performs poorly.

A better approach for string concatenation is using Array.join(), which joins all array elements into one string:

var tmp = [];
for (/* each piece */)
{
tmp.push(piece);
}
str = tmp.join('');
return str;

This method doesn't suffer from the intermediate strings, and executes faster with high number of concatenation operations.

JavaScript setInterval Function - JavaScript Timing Events

Blogging Developer — Sat, 17 Nov 2007 00:17:00 +0200

JavaScript features a couple of methods that lets you run a piece of JavaScript code (javascript function) at some point in the future. These methods are:

setTimeout()
setInterval()

In this tutorial, I'll explain how setInterval() method works, and give a real world example. You may find the details of setTimeout() method in JavaScript setTimeout Function - JavaScript Timing Events

setInterval()

window.setInterval() method allows you to specify a piece of JavaScript code (expression) that will be triggered again and again in every specified number of miliseconds.

Syntax

var t = setInterval ( expression, timeout );

The setInterval() method returns a numeric timeout ID which can be used to refer the time interval to use with clearInterval method. The first parameter (expression) of setInterval() is a string containing a javascript statement. The statement could be a call to a JavaScript function like "delayedAlert();" or a statement like "alert('This alert is delayed.');". The second parameter (timeout), indicates the number of miliseconds to pass before executing the expression.

Example

The doSomething() function will be called in every 5 seconds until it is cancelled.

clearInterval()

If you want to cancel a setInterval() then you need to call clearInterval(), passing the internal ID returned by the call to setInterval().

JavaScript setTimeout Function - JavaScript Timing Events

Blogging Developer — Fri, 16 Nov 2007 23:42:00 +0200

JavaScript features a couple of methods that lets you run a piece of JavaScript code (javascript function) at some point in the future. These methods are:

setTimeout()
setInterval()

In this tutorial, I'll explain how setTimetout() method works, and give a real world example. You may find the details of setInterval() method in JavaScript setInterval Function - JavaScript Timing Events

setTimeout()

window.setTimeout() method allows you to specify a piece of JavaScript code (expression) will be run after specified number of miliseconds from when the setTimeout() method is called.

Syntax

var t = setTimeout ( expression, timeout );

The setTimeout() method returns a numeric timeout ID which can be used to refer the timeout to use with clearTimeout method. The first parameter (expression) of setTimeout() is a string containing a javascript statement. The statement could be a call to a JavaScript function like "delayedAlert();" or a statement like "alert('This alert is delayed.');". The second parameter (timeout), indicates the number of miliseconds to pass before executing the expression.

Example

<html>
   <head>
      <script type="text/javascript">
        function delayedAlert()
        {
         var t=setTimeout("alert('You pressed the button 5 seconds ago!')",5000)
        }
      </script>
   </head>
   <body>
      <form>
         <input type="button" value="Display Delayed Alert"
                onClick="delayedAlert();">
      </form>
   </body>
</html>

An alert box will be shown 5 seconds later when you clicked the button.

clearTimeout()

Sometimes it's useful to be able to cancel a timer before it goes off. The clearTimeout() method lets us do exactly that. Its syntax is:

clearTimeout ( timeoutId );

where timeoutId is the ID of the timeout as returned from the setTimeout() method call.

JavaScript Url Redirect with Delay using setTimeout

Blogging Developer — Fri, 16 Nov 2007 20:19:00 +0200

Time delay in url redirection may be useful for the following conditions:

Refresh a web page in every specified seconds.
For displaying an "Update you Bookmark" page when a page Url has ben changed.

The html and JavaScript code for url redirection with delay is given below:

<html>
<head>
<script type="text/javascript">
function delayedRedirect(){
window.location = "/default.aspx"
}
</script>
</head>
<body onLoad="setTimeout('delayedRedirect()', 3000)">
<h2>You'll be redirected soon!</h2>
</body>
</html>

The JavaScript function setTimeout is the most important part of the code given above. setTimeout function calls delayedRedirect function after 3 seconds (3000 miliseconds).

You may find the details of setTimeout() method in JavaScript setTimeout Function - JavaScript Timing Events

location.href vs. location.replace - The Difference Between JavaScript Url Redirection Methods

blogging developer — Fri, 16 Nov 2007 19:18:00 +0200

JavaScript offers several ways to display a different page in the current browser window.

Redirecting visitors with Javascript is straightforward. The simplest way is to use one of the methods given below.

location.href Method

Including the following script will immediately redirect visitors to the URL entered.

location.replace Method

Including the following script will immediately redirect visitors to the URL entered.

The difference between location.href and location.replace

The difference between location.href and location.replace is that the former creates a new history entry on the visitor's browser meaning that if they hit the back button, they can get in a 'redirection loop' which is usually undesirable and may have unwanted side effects.

Also consider checking the post that focuses on Javascript redirection with delay at JavaScript Url Redirect with Delay using setTimeout

How To: Compress ViewState in ASP.NET 2.0 - ViewState Compression with System.IO.Compression

blogging developer — Thu, 15 Nov 2007 13:07:00 +0200

ViewState is the built-in structure for automatically retaining values between multiple requests for the same page in ASP.NET. In other words, ViewState technology saves/restores page state between postbacks. On the other hand, this technology comes with an overhead that affects performance especially during page load since the state data is maintained in a hidden field.

Reducing ViewState Size

We can completely disable viewstate by setting EnableViewState to false in the page directive but you need extra programming effort for you to take care of the page state. It is a good idea to disable ViewState for the controls that do not actually need it such as Literals and Labels by setting EnableViewState to false. But this do not entirely solve the problem.

Compressing ViewState

ASP.NET 2.0 comes with the System.IO.Compression namespace, which contains classes with functionality to compress/decompress streams. In ASP.NET 1.1, developers must use third party compression tools such as ICSharpCode.SharpZipLib to compress viewstate.

Compressing/Decompressing using GZipStream

The following class contains two methods for compressing and decompressing a stream.

using System;
using System.Data;
using System.Configuration;
using System.IO;
using System.IO.Compression;

public static class CompressViewState
{
    public static byte[] Compress(byte[] data)
    {
        MemoryStream output = new MemoryStream();
        GZipStream gzip = new GZipStream(output,
                          CompressionMode.Compress, true);
        gzip.Write(data, 0, data.Length);
        gzip.Close();
        return output.ToArray();
    }

    public static byte[] Decompress(byte[] data)
    {
        MemoryStream input = new MemoryStream();
        input.Write(data, 0, data.Length);
        input.Position = 0;
        GZipStream gzip = new GZipStream(input,
                          CompressionMode.Decompress, true);
        MemoryStream output = new MemoryStream();
        byte[] buff = new byte[64];
        int read = -1;
        read = gzip.Read(buff, 0, buff.Length);
        while (read > 0)
        {
            output.Write(buff, 0, read);
            read = gzip.Read(buff, 0, buff.Length);
        }
        gzip.Close();
        return output.ToArray();
    }
}

You need to save this class in a .cs file in the App_Code directory.

Utilizing the CompressViewState Class

In order to compress the ViewState of a web page, you have to override the two methods LoadPageStateFromPersistenceMedium and SavePageStateToPersistenceMedium.

The folowing code creates a BasePage class which inherits from System.Web.UI.Page, and web pages using the following Base Page class as the base class utilizes ViewState compression. The BasePage class adds an additional hidden field __COMPRESSEDVIEWSTATE, to store the compressed ViewState.

using System;
using System.IO;
using System.IO.Compression;
using System.Collections;
using System.ComponentModel;
using System.Web.UI;
using System.Configuration;
using System.Threading;
using System.Globalization;
using System.Text;

public abstract class BasePage : System.Web.UI.Page
{
    private ObjectStateFormatter _formatter =
        new ObjectStateFormatter();

    protected override void
        SavePageStateToPersistenceMedium(object viewState)
    {
        MemoryStream ms = new MemoryStream();
        _formatter.Serialize(ms, viewState);
        byte[] viewStateArray = ms.ToArray();
        ClientScript.RegisterHiddenField("__COMPRESSEDVIEWSTATE",
            Convert.ToBase64String(
            CompressViewState.Compress(viewStateArray)));
    }
    protected override object
        LoadPageStateFromPersistenceMedium()
    {
        string vsString = Request.Form["__COMPRESSEDVIEWSTATE"];
        byte[] bytes = Convert.FromBase64String(vsString);
        bytes = CompressViewState.Decompress(bytes);
        return _formatter.Deserialize(
            Convert.ToBase64String(bytes));
    }
}

Demo

Demo project contains two web pages. You may compare the compression performance using the demo project.

Download Compressing View State Visual Studio Project

An online demo web page without viewstate compression.
An online demo web page with viewstate compression.

If you view the HTML of the page with viewstate compression, the __VIEWSTATE field is empty, while our __COMPRESSEDVIEWSTATE field contains the compressed ViewState, encoded in Base64.

ViewState Compression Performance

After few tests using the demo project, ViewState size is reduces by 40 - 60% resulting shorter response times for users and less bandwidth need for site owners.

Compression, decompressing, encoding and decoding data is a quite heavy work for the server so while you are saving from bandwidth and offering shorter response times for users, you are having a performance hit on the server's hardware.

JavaScript substr Function

blogging developer — Sat, 10 Nov 2007 13:05:00 +0200

When you write JavaScript, you need to know what string manipulation methods/functions are available.

JavaScript substr() Method

The substr() method extracts a specified number of characters in a string, from a start index. The syntax of substr() is given below:

stringObjectToTakeAPartOf.substr(start-index,length)

start-index: (Required - Numeric Value) - where to start the extraction
length: (Optional - Numeric Value) - how many characters to extract

substr Example:

The output of the above code is:

o wo

Since substr() is not cross-browser, I never use it. Instead, I use the javascript's substring() function.

Links for 2007-10-17 [del.icio.us]

Thu, 18 Oct 2007 00:00:00 PDT

Visual Studio Tip: Stop Loosing the Clipboard Data Accidentally
I frequently type Ctrl+C instead of Ctrl+V on a blank line and loose the data on the clipboard by copying a blank line. Today, I discovered a VS option to disable cut and copy commands on blank lines when there is no selection. You may find the opti

Links for 2007-09-20 [del.icio.us]

Fri, 21 Sep 2007 00:00:00 PDT

IZWebFileManager - Advanced ASP.NET 2.0 Online File Manager Server Control
IZWebFileManager is a web based file manager server control for Microsoft IIS web servers, written for ASP.NET 2.0. It is compatible with most-used browsers like Internet Explorer, Firefox and Netscape. Its features include: copying, moving, renaming,

Links for 2007-09-17 [del.icio.us]

Tue, 18 Sep 2007 00:00:00 PDT

Convert, Parse and TryParse Methods - Comparing String to Numerical Conversion Methods
.Net provides several different ways to extract integers from strings. In this article, I will present the differences between Parse, TryParse and ConvertTo.

Links for 2007-09-12 [del.icio.us]

Thu, 13 Sep 2007 00:00:00 PDT

Using JavaScript with ASP.NET
ASP.NET provides a powerful server-based programming model with its postback architecture that allows performing all the work on the server while ensuring security and compatibility. The most significant weakness of postback architecture is its overhead.
Cross-Browser JavaScript Events - Commonly Supported Events that are Safe to Use
The combination of JavaScript and HTML is called as DHTML (Dynamic HTML). Since not all browsers support the same level of DHTML, the events you can use and the way events work vary from browser to browser. The following table contains the JavaScript
Limiting the File Upload Size in ASP.NET
By default, the maximum size of a file to be uploaded to a server using the ASP.NET FileUpload control is 4MB. You cannot upload anything that is larger than this limit. To change this size limit, you have to make some changes in the application's web.con

Links for 2007-09-10 [del.icio.us]

Tue, 11 Sep 2007 00:00:00 PDT

7 Easy-to-Apply Tips to Improve Your Web Site Performance
lot of articles have been written on website performance optimization lately but I want to share my hands-on-experience and important articles on the subject. There are two types of performance: * Server Performance * Perceived Performance
How To: Minimize HTTP Requests – The Most Important Guideline for Improving Web Site Performance
n my previous article 7 Easy-to-Apply Tips to Improve Your Web Site Performance, I described methods to achieve better client-side performance. The conclusion of the article was: “The most important and effective way to improve web site performance is

Links for 2007-09-08 [del.icio.us]

Sun, 09 Sep 2007 00:00:00 PDT

Absolutely Pluggable Application-Wide Error Logging Facility for ASP.NET Web Applications - ELMAH
After taking a web application online, you need to track exceptions and errors effectively in order to debug problems. ELMAH (Error Logging Modules and Handlers) is an application wide error logging facility which is completely pluggable therefore it can