The first iPhone was launched in June of 2007. The second iPhone 3G, launched in July 2008. And now Apple iPhone 4G is available in the market from June 24th 2010 in Europe and US.

iPhone 4 is going to be launched in India in coming September. The gadget has been very successful in western markets and is selling like a hot cake. Indian gadget freaks are desperately waiting for the gadget to arrive in the country.

Though there were several issues reported to Apple but there is no confirmation from Apple site yet.

The Apple iPhone 4 features FaceTime, which supports video calling, and Apple’s new Retina 960×640 pixels display, the highest resolution display ever built into a phone, according to the company, multitasking. In addition, HD video recording, Apple’s A4 processor, a 3-axis gyro and up to 40% longer talk time – in an all-new design of glass and stainless steel. Apple added that the new iPhone is the thinnest smartphone in the world, at 9.3 millimeters. The iPhone 4 features the new LG LCD Display technology called In-Plane Switching technology (IPS) for enhanced viewing experience.

iPhone 4 operates its functionality on iOS4, the latest software developed by Apple for its mobiles. The software enables the device to run more than one program simultaneously.

The cost of this new device in western markets is set at $199 and $299 for 16GB and 32GB respectively. For Indian users, the 16GB version of the device is expected to cost around Rs. 35,500 while the 32GB version will be priced at around Rs. 40,000.

Vodafone already announced that it is all set to bring the iPhone 4 to the Indian market in the coming months.

As and when I see the source code of the blog, it makes me feel bit older, showing WordPress version 2.6.2 only.

Saw that line saying “WordPress 2.8.4 is available! Please update now.” I did the same last night and now my blog looks younger then before.

Really like the new features:

• Drag-and-drop widgets admin interface
• Syntax highlighting and function lookup built into plugin and theme editors
• Allow the dashboard widgets to be arranged in up to four columns
• Support timezones and automatic daylight savings time adjustment
• JS script loader Improvements
• New Widgets API
• Menu reordering via plugin

There are other features too, you can find all at http://codex.wordpress.org/Version_2.8

Introduction
First and far most, we should say thanks to John Resig and his team to make our life so easier then before by making jQuery, most demanding and powerful JavaScript framework and it’s expanding phenomenally that gives the proof of dominancy of jQuery framework.

Why jQuery
So why do I need to extend jQuery?

Here we go; no library is full filling all the requirements so does jQuery, so there should be some mechanism to add sets of useful methods called as plugins for your specific requirement, which we can say in the basic terminology calling your external methods into your structure but it doesn’t give you the power of leverage existing code base.

Let’s say, by creating a new jQuery commands, we automatically inherit the use of powerful selector mechanism and can use all the jQuery methods and indeed it’s a good practice to make reusable code.

There is a pretty good documentation and guidelines available on jQuery Plugins/Authoring page.

Step1
Let’s start making our first jQuery plugin; we call our plugin as “disable”, we make our plugin to disable the form elements and then we will extend our default options using $.extend utility method to enable the required once and will add a toggle method also.

We will follow the guidelines as provided on jQuery.com so we will save our plugin as jquery.disable.js

// plugin definition
$.fn.disable = function() {
 	// plugin implementation code goes here.
};

$.fn.disable means that we are extending the $ wrapper with a function called disable.

Step2
Let’s wrap into self executed anonymous function and will pass out jQuery alias in the parentheses, why it so, it’s because of author may have used $.noConflict() after using this technique there will not be any conflict between other library.

(function($) {
	$.fn.disable = function(){
	// plugin implementation code goes here.
})(jQuery)

Now we extend our default options because we will be using the same method to enable the disabled once.

Our plugin invoke code goes like this with native jquery framework and plugin call:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Extending jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.disable.js"></script>
<script type="text/javascript">
$(function(){
	$("input[type=text]").disable();
});
</script>
</head>

We are using attribute filter here, which will find out all input elements with a type of text on the page and then it will disable all the input elements.

Step3
So far so good; you can further look into http://www.learningjquery.com/2007/10/a-plugin-development-pattern which gives more insight about plugin development.

(function($) {
	$.fn.disable = function(options){
	// plugin defaults
	var defaults = {
		disabled: true
	};
	// Extend our default options with those provided.
	var opts = $.extend({}, defaults, options);
		return this.each(function(){

		})
})(jQuery)

$.extend() extend one object with one or more others, returning the original, modified, object. This is a great utility for simple inheritance.

Then the each() method is called to iterate over each element in the wrapped collection and return the same, inside that function, this is the collection of wrapped DOM elements that needs to be operated upon.

There is a pretty good reference on http://www.visualjquery.com/ about all the jQuery API reference in a nice format compare to http://docs.jquery.com/
Step4
Now we are pretty close to it.

(function($) {
	$.fn.disable = function(options){
	// plugin defaults
	var defaults = {
		disabled: true
	};
	// Extend our default options with those provided.
	var opts = $.extend({}, defaults, options);
		return this.each(function(){
			if(typeof this.disabled != 'undefined')
				this.disabled = true;
		})
	}
})(jQuery)

We just try to find out each and every html element disabled attribute, if it does exist then set it true.

We return the results of the each() method (the wrapper) so that our brand new disable() method will support chaining like many of the native jQuery methods. We’ll be able to write

$("input[type=text]").disable().addClass("blink");

We are done with the disable functionality now just make it configurable so that we can enable the elements when needed.

Just change the call and place disabled: false as parameter which indeed over write the default option, which is set true initially.

$(function(){
	$("input[value=Enable]").click(function(){
		$("input[type=text]").disable({disabled: false})
	});
});

We just need to make a small check; we are checking disabled parameter value in if condition which is set false in the current scenario then it goes into the else part which enables our disabled elements.

Step 4
We can further enhance our plugin; let’s extend another method which will toggle the disable state, its pretty straight forward, we just reduced our code using ternary operator instead of making 4 lines of code.

We just checking disabled attribute to true, if it’s then set it to false other wise disabled it.

$.fn.extend({
	disableToggle: function() {
		return this.each(function(){
			this.disabled = this.disabled == true ? false : true;
		})
	}
})

Plugin code:

(function($) {
	$.fn.disable = function(options){
	// plugin defaults
	var defaults = {
		disabled: true
	};
	// Extend our default options with those provided.
	var opts = $.extend({}, defaults, options);
		return this.each(function(){
			if(typeof this.disabled != 'undefined' && opts.disabled != false){
				this.disabled = true;
			} else {
				this.disabled = false;
			}
		})
	}
	//Prototype Methods: extending it with check, uncheck, disableToggle
	$.fn.extend({
		disableToggle: function() {
			return this.each(function(){
				this.disabled = this.disabled == true ? false : true;
			})
		}
	})
})(jQuery)

HTML code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Extending jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.disable.js"></script>
<script type="text/javascript">
$(function(){
	$("input[type=text]").disable();
	$("input[value=Enable]").click(function(){
		$("input[type=text]").disable({disabled: false}) //enable them
	});
});
</script>
</head>
<body>
 <h1>HTML Form</h1>
    <fieldset>
      <legend>Form</legend>
      <div>
        <form id="testForm" action="">
          <div>
            <label>First Name:</label>
            <input type="text" name="text" class="fields" value="Mohammed"/>
          </div>
          <div>
            <label>Last Name:</label>
            <input type="text" name="text" class="fields" value="Arif"/>
          </div>

          <div>
            <label>Dropdown:</label>
            <select name="dropdown">
              <option>One</option>
              <option>Two</option>
              <option selected="selected">Three</option>
              <option>Four</option>
              <option>Five</option>
            </select>
          </div>

          <div>
            <label>Check box group:</label>
            <input type="checkbox" name="cb" value="cb.1"/>One
            <input type="checkbox" name="cb" value="cb.2" checked="checked"/>Two
            <input type="checkbox" name="cb" value="cb.3"/>Three
          </div>

          <div>
            <label>Radio group:</label>
            <input type="radio" name="radio" value="radio.1"/>One
            <input type="radio" name="radio" value="radio.2" checked="checked"/>Two
            <input type="radio" name="radio" value="radio.3"/>Three
          </div>

          <div>
            <label>Text area:</label>
            <textarea name="textarea" rows="5" cols="20"></textarea>
          </div>

          <div>
    <input type="button" value="Enable" />
          </div>
        </form>
      </div>
    </fieldset>
</body>
</html>

We are done with the very first plugin of yours, there are whole lots of opportunities to improve and shorten your code, and we can further enhance it but it is just a reference to give you a heads up about one of the power full feature of jQuery framework, of course you should unit test your code also.

If you have questions, enhancement anything related to this plugin just write your thoughts.

Thanks for reading!

Flock is a social networking browser based on Mozilla Firefox; flock was founded in 2005 based in Redwood City, CA. Flock is an open source company. Flock is available for Windows, Linux, and Mac OSX in 12 languages, looks impressive on the first instance.

Flock 2.0 beta has been released on June 16, 2008, based on Firefox 3.0.

“Now our users can experience the best of both worlds with all of the performance and security improvements of Firefox 3, combined with Flock’s unique social browsing experience” as said by Shawn Hardin, CEO of Flock.

So what does social networking browser mean?

Let’s analyze the features and services of Flock; it supports web services like bookmarking, photo sharing, social networking, blogging etc.

Flock Toolbar

Flock toolbar hold cool features like my word, people sidebar, media bar, feeds, webmail, favorites, accounts etc.

After investigating for 15 days, need to get the better blogging platform for our client who wins lastly? Guess guys!

Professionally TypePad, due to the client demand because they are not willing to spend money creating new infrastructure like setting up Apache/MySQL for WordPress on their environment.

TypePad doesn’t need all that, they host on their own, and you just need to map your domain in the last to give the pointing URL, sounds better.

There is another Six Apart product called MovableType, based on the same technology, you can configure it on your own server but comparing WordPress its bit tricky to install and relatively larger file size (4MB), MovableType is good for web developers who knows XHTML/CSS etc, MovableType supports plugins too as does WordPress. Anyway TypePad is far better then MovableType due to ease in configuration and their built in support system

TypePad:

Let’s come to the point now, it’s been a month or so using TypePad to me, getting lot more things day by day, might not be aware all the features of TypePad but done quit a good research so far.

Features:

• Mobile phone support, can blog from your mobile
• Offers a comprehensive list of widgets and you can create your own too
• Multi user support in TypePad Pro, depends upon your need, it costs a good amount when you need multiple administrator for single blog
• Good for commercial blogging because of cost factor.

TypePad has got some flaws too like blog backup management, it’s not really up to the mark, and it doesn’t have any automatic backup plan though they have given some instruction to do it up to the certain level.

You can’t customize your template 100%, there are restrictions at times, and they should spend some more time to improve it, if you don’t care about look then go for TypePad.

WordPress:

One of the best free blogging software I have ever seen, it’s usable, easy to learn, waste community of users, tons of plugins support and many more things.

WordPress really doesn’t need much while setting it up first time, due to their comprehensive documentation a support.

Features:

• It’s all free
• you can use it your own domain
• Cool plugins management
• Dozens of gorgeous themes
• No mess up in the code when you add sidebar widgets
• Support privacy options and even doesn’t indexed it for SEO, if you have private blog
• Performance is far better then any other blogging tool, which I like most

There are numbers of features which we can talk about, truly mind blowing open source software, which is indeed liked by most of the bloggers.

There is an excellent blogs comparison chart available at: http://www.ojr.org/ojr/images/blog_software_comparison.cfm

For new bies, it’s a good start to learn blogging jargon http://www.ojr.org/ojr/stories/050714gardner/

Google Chrome: the Google Browser

Google announced today that they will release their own browser tomorrow, code named Google Chrome. Beta version will be launched tomorrow morning only, initially available only for Windows.

Google Chrome is open source and based on WebKit, which is the same engine used by Safari and Adobe AIR. This is really good news because just the thought of yet another browser with different JavaScript and CSS engines to test every site and web app is really unpleasant.

Features

• An address bar with auto-completion features called “omnibox.”
• The V8 JavaScript virtual machine, advertised as significantly faster than existing JavaScript engine implementations.
• A privacy mode, called “Incognito”.
• Web applications can be launched in their own browser window without an address bar and toolbar.
• Chrome includes an automatically updated phishing and malware blacklist using the Google Safe Browsing API.
• Uses the WebKit Rendering Engine.
• Puts individual tabs and plug-ins into separate processes, for security and accountability.
• Integration of Gears.

Take out a look on the official Google Blog at http://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html

Get the Google Chrome Comic Book.

Will keep posting you more findings about Chrome.

http://javascript.weblogsinc.com/2006/08/06/javascript-outside-of-the-browser/

After reading the above article, questions comes in mind, why JavaScript outside the browser?

So let’s go through on some points which strongly recommend the future of “the world’s most misunderstood programming language”.

1. JavaScript will be treated as a significant programming language in the upcoming days
2. JavaScript speed and performance, of course would be increasing in the future of ECMAScript 4th edition
3. Increasing popularity of HELMA* using Rhino, it’s not as popular yet as it should be, would be hearing soon in the future about HELMA
4. Major enhancement of some JavaScript Engines like Rhino*, SpiderMonkey*
5. Popularity of Tamarin*

*Helma: It is an open source web application framework for fast and efficient scripting and serving of your websites and Internet applications.

*Rhino: Rhino is an open source JavaScript engine. It is developed entirely in Java and managed by the Mozilla Foundation. The Foundation also provides an implementation of JavaScript in C known as SpiderMonkey.

*SpiderMonkey: SpiderMonkey is the code name for the first ever JavaScript engine, written by Brendan Eich at Netscape Communications, later released as open source and now maintained by the Mozilla Foundation. SpiderMonkey is also the JavaScript engine for Yahoo! Widgets.

*Tamarin: Tamarin is a JavaScript engine written in C++. It currently implements Adobe ActionScript™ 3 (a superset of ECMAScript Edition 3) and is embedded within the Adobe® Flash® Player 9. Tamarin will be extended to support ECMAScript Edition 4 and will be used by both SpiderMonkey and the Flash Player.

Can say that, JavaScript is going to be next full fledged Object Oriented Programming Language which not only serves the web pages but also would be capable to do the task outside the browser in more efficient way.

Cheers
Mohammed Arif

Defining an object is via literal notation. Supported in JavaScript1.2 and above, it’s a more robust form of creating an object on the fly.
Neat and clean approach to write reusable, readable and maintainable JavaScript code.

Show Love to the Object Literal:
http://ajaxian.com/archives/show-love-to-the-object-literal

Object literals beauty lies in Namespaces, which reduces the number of global variables in your pages. It uses a technique known as branching, which allows you to use common utility
functions without worrying about browser sniffing.

That’s where Singleton Design Pattern comes into the picture, as far as I know, it is the most widely use design pattern these days in JavaScript world.

Using global variables in your page presents a huge risk, and a namespace created with a singleton is one of the best ways to remove those global variables. I stuck many times using global variables and also consume good amount of memory.

Core JavaScript 1.5 Guide:Literals [Some basics of literals]:
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Literals

Got some interesting feedback on IE 7 on CSS 2.1 compliance though I don’t have IE 7 beta 2.0 installed at my box.

Chris Wilson, Internet Explorer 7 and CSS 2.1 compliance:

http://www.gtalbot.org/ BrowserBugsSection/ MSIE7Bugs/ CWilsonMSIE7AndCSSCompliance.html

MSIE 7 bug collection sites:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Even only Peter-Paul Koch reported 73 bugs in IE 7 and the list goes on when will be navigating on.

There are some fixed bugs in IE 7 also in the end of given page after clicking on “Show fixed bugs in IE 7″ button.

Note: All articles have got demo pages also, you can check it out yourselves.

Let us know more feedback on IE 7 specially ‘good’ one.

Are you ready for next gen HTML5 with DOM interface?

I am amazed even removing iframe from XHTML 1.0 “strict mode” they have included it once again in HTML5 with better control.

For the lovers of Web Forms 2.0:

Design a form that uses autocompletion (intellisense for me) like we do using AJAX (not up to that) could work in simple HTML elements.

Example:

<input type="url" name="location" list="urls"/>
<datalist id="urls">
<option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">
</option><option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
</option><option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
</option><option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
</option><option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
</option><option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</option></datalist>

…if user type ‘www.w3′, and UA* had found that it’s already had visited http://www.w3.org/Consortium/#membership and http://www.w3.org/TR/XForms/ in the recent.

There are many more, surly you will love it as I am.