What is new in Firefox 3

The closest rival to Microsoft's Internet Explorer is ready to get an upgrade. Browser developer Mozilla has announced June release for its popular browser, Firefox.

Firefox 3 promises to add several new features that will enhance the users browsing experience as well as make it for secure. In fact, Mozilla claims that Firefox 3.0 will run twice as fast as the previous version while using less memory.

So, here's a peak into all the added features users will find in Firefox 3.0.

Firefox 3 adds several new features that will make it more secure against online frauds, forgeries, viruses and Trojan.

1.Security

An important addition is One-click site info where the users can click the site favicon in the location bar to see who owns the site and to check if their connection is protected from eavesdropping.

Also, the Identity verification is prominently displayed in the new version. When a site uses Extended Validation (EV) SSL certificates, the site favicon button will turn green and show the name of the company users are connected to.

The new version has enhanced malware protection which warns users when they enter a site which can install viruses, spyware, trojans or other malware.

Version 3 also lets users to access Web Forgery Protection page that displays the content suspected of web forgeries.

Also, the new version promises secured data protection. User's bookmarks, history, cookies, and preferences will now be stored in a transactionally secure database format which will prevent data loss even if their system crashes.

2.Improved Javascript Engine


According to Firefox team, improvements to the JavaScript engine as well as profile guided optimization has enhanced the performance of Firefox 3.0.

The new Firefox 3.0 will enable web applications like Google Mail and Zoho Office to run twice as fast compared to Firefox 2. Also, SunSpider test from Apple shows improvements over previous releases.

3.Performance


Firefox 3 endeavours to reduce the amount of memory used over a Web browsing session.

Memory cycles are broken and collected by an automated cycle collector, a new memory allocator has been added to reduce fragmentation, a large number of leaks have been fixed, and caching strategies have been tuned.


4.Add-ons

Also, the new version of Firefox automatically checks new add-ons and plugins and will disable older, insecure versions.

The new version promises to make users browsing experience more organised and clutter-free.

An information bar replaces the old password dialogue so that users can now save passwords after a successful login. The add-ons whitelist has been removed making it possible to install extensions from third-party sites in fewer clicks.

The revised Download Manager will make it easier to locate downloaded files, and users can search the name of the website where the file came from. Also, the users will be able to resume downloads after restarting the browser or resetting their network connection.

Simplifying add-on installation, the new version will make it possible to install extensions from third-party sites in fewer clicks.

Also, in case a user wants to install Firefox add-ons, the new Add-ons Manager will also display a list of recommended add-ons and downloads from the Firefox website.

5.Zoom


Another feature that adds volume to the new version is Full page zoom. This functionality will let users zoom in and out of entire pages, scaling the layout, text and images, or optionally only the text size. Users settings will be remembered whenever they return to the site.

6.Activity


Another new feature, called activities, allows users to highlight text on a page, click on it, then instantly send it to another site, like a mapping, e-mail or blogging service.The new version promises to make users browsing experience more organised and clutter-free.

Multiple text selections can be made with Ctrl/Cmd; double-click drag selects in "word-by-word" mode; triple-clicking selects a paragraph.

7.Bookmark


Next time a user wants to add a bookmark the new Firefox will make the task easier for him. He will be able to add bookmarks from the location bar with a single click. A dropdown box will let him name it, choose a folder to put it in as well as add a tag to categorise it.

There will also be a Smart Bookmarks Folder from where he can access his recently-bookmarked and tagged pages, as well as his most-frequently visited pages.

Another feature called Places Organiser will help the user view, organise and search through all his bookmarks, tags, and browsing history with multiple views and smart folders to store his frequent searches.



8.New Developer Tools


Firefox 3.0 has several developer tools too. Like there are new tools for graphics and font handling.

New graphics and text rendering architectures in Gecko 1.9 provides rendering improvements in CSS, SVG as well as improved display of fonts with ligatures and complex scripts.

Regarding colour management, Firefox 3.0 will be able to adjust images with embedded color profiles. There's also offline support option that aims to enable web applications to provide offline functionality.

Just simple css code of 7 lines for Rounded corner : without any images

Css Code:

.rtop, .rbottom{display:block; }
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px; background:#9BD1FA;}
.r2{margin: 0 3px; background:#9BD1FA;}
.r3{margin: 0 2px; background:#9BD1FA;}
.r4{margin: 0 1px; height: 2px; background:#9BD1FA;}
.contain{background:#9BD1FA;text-align:center;}


HTML Code:

<div id="container" style="width:100px;">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div class="contain">Ashok Sudani</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>

For Example:

Ashok Sudani

Javascript in 600 Seconds

Breakdown...

Basic Types

var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
var sqString = 'This is also a string';

Javascript is a dynamically typed language. Variables are declared with the keyword var. Common simple types are supported.

Arrays

var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];

Javascript has built-in collection objects. The Array object is a dynamically typed sequence of Javascript values. They are created with the bracket notation [] or with the new operator on the Array object (e.g. new Array(5)).

Property Maps

var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
                      "two": "two",
                      "three": 3.0};

Along with Arrays are the Object objects. They act as property maps with strings serving as keys to dynamically typed data.

Access

// Dot notation property access
window.alert("Homogenous map property \"one\" "
            + homogenousMap.one);
// Subscript notation property access
window.alert("Homogenous map property \"two\" "
            + homogenousMap["two"]);

Assignment

homogenousMap["one"] = 10;
homogenousMap.two = 20;

Removal

delete homogenousMap["one"];
delete homogenousMap.two;

Iteration

for (var key in heterogenousMap) {
   window.alert("Heterogenous map property \""
                + key
                + "\" = "
                + heterogenousMap[key]);
}

Functions

var callable = function (message) { // <-- notice assignment
   window.alert("Callable called with message = "
                + message);
}


function createClosure(initial) {
   var res = function () {
       initial = initial + 1;
       window.alert("Closure with modified state "
                    + initial);
   }
   return res;
}

function callCallable(f, x) {
   f(x);
}

function composeCallables(f, g, x) {
   f(g(x));
}

Functions are first-class objects. That means that they can be created dynamically, stored, passed and returned just like any other value.

Objects

function MyObject(name, value) {
   this.name = name;
   this.value = value;
}

Javascript supports prototype based object orientation. Not a class type but an object constructor is created for new objects with particular properties. In the example above the this keyword used to reference the ''current instance'' of the object. The this object is essentially a property map with members accessed (and initialized) in this example with the dot notation.

The object constructor, MyObject, is an object constructor not in how it's defined, which looks like any other Javascript function, but in how it's ''invoked''.

    var my = new MyObject("foo", 5);

The new operator before the function invokes the function with a newly construced object as this and returns that the initialized object.

Object Prototype

Part of what makes a language object oriented is that data not only has properties but also ''behaviors''. Also known as: member functions; methods; and object messages. To implement a member function in Javascript one would be tempted to write something like what's below based on the member initialization exampled above.

function BadObject(data) {
   this.data = data
   this.memberFunction = function () {
       // ...functions on data...
   }
}

While the code above will work without error, it does create a new closure for each member function for each new instance of the object. What's really required is a class level function that works on instance data. But remember, Javascript objects aren't class based but prototype based. So how do we implement "class" level member functions? (Skip to Implementation) Better yet, how do we implement "class" level members functions in general?

Enter the prototype member.

The internal object member, prototype, has language defined significance in that it is used for resolving property names if the property isn't found in the current property map. It's considered internal because, while the instance's prototype member is ''inherited'' from the ''constructor's'' prototype member, it cannot be accessed directly from the object instance itself. The defined prototype member is a property map itself which holds members for property name resolution. Consider the example below:

 var parentPropertyMap = {"bar": "I'm the bar"};

// Define the constructor with inheritable properties
function ChildObject(foo) {
    this.foo = foo;
}
ChildObject.prototype = parentPropertyMap;

childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");

// Prints "childPropertyMap1.foo = I'm the foo1"
window.alert("childPropertyMap1.foo = "
  + childPropertyMap1.foo);

// Prints "childPropertyMap2.foo = I'm the foo2"
window.alert("childPropertyMap2.foo = "
  + childPropertyMap2.foo);

// Prints "childPropertyMap1.bar = I'm the bar"
window.alert("childPropertyMap1.bar = "
  + childPropertyMap1.bar);

// Prints "childPropertyMap2.bar = I'm the bar"
window.alert("childPropertyMap2.bar = "
  + childPropertyMap2.bar);

The member foo is an instance member added to the instance's property map during construction:

 function ChildObject(foo) {
    this.foo = foo;
}

while bar is in the constructor's prototype:

 var parentPropertyMap = {"bar": "I'm the bar"};
...
ChildObject.prototype = parentPropertyMap;

which is ''inherited'' during the new operation:

 childPropertyMap1 = new ChildObject("I'm the foo1");
childPropertyMap2 = new ChildObject("I'm the foo2");

In other words, the member, bar, is shared across all instances of ChildObject.

Therefore, by implementing the prototype member of the constructor function, we can think of the constructor function itself as the "class" object. Complete with static class functions:

 function ClassObject() {}
ClassObject.staticClassFunction = function(x) {
    return x * 2;
}

static class variables:

 function ClassObject() {}
ClassObject.staticClassVariable = 5;

shared member variables:

 function ClassObject() {}
ClassObject.prototype.sharedMember = 5;

and of course, shared member functions:

 function ClassObject(x) {
    this.x = x;
}
ClassObject.prototype.memberFunction = function(x) {
    return x * this.x;
}

Member Function Implementation

function Message(message) {
   this.message = message;
}

Message.prototype.show = function() {
   window.alert("Message.show() with message = "
                + this.message);
}

Example Code

//////////////////////////////////////
// Basic Types
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";

///////////////////////////////////////
// Array
var emptyList = [];
var homogenousList = [1, 2, 3];
var heterogenousList = ["one", 2, 3.0];

///////////////////////////////////////
// Property Map
//
var emptyMap = {};
var homogenousMap = {"one": 1, "two": 2, "three": 3};
var heterogenousMap = {"one": 1,
                      "two": "two",
                      "three": 3.0};

///////////////////////////////////////
// Functions as values
//
var callable = function (message) { // <-- notice assignment
   window.alert("Callable called with message = "
                + message);
}

function createClosure(initial) {
   var res = function () {
       initial = initial + 1;
       window.alert("Closure with modified state "
                    + initial);
   }
   return res;
}

///////////////////////////////////////
// Functions as arguments
//
function callCallable(f, x) {
   f(x);
}

function composeCallables(f, g, x) {
   f(g(x));
}

///////////////////////////////////////
// Objects
//
function MyObject(name, value) {
   this.name = name;
   this.value = value;
}

///////////////////////////////////////
// Objects with Member Functions
//
function Message(message) {
   this.message = message;
}

Message.prototype.show = function() {
   window.alert("Message.show() with message = "
                + this.message);
}

///////////////////////////////////////
// Demo Utilities
//
function quote(message) {
   return "\"" + message + "\"";
}

///////////////////////////////////////
// HTML Invoked demonstration
//
//
function main() {
   window.alert("Integer = " + intValue);
   window.alert("Float = " + floatValue);
   window.alert("String = " + stringValue);

   for (var item in emptyList) {
       window.alert("Empty list item = " + item);
   }

   // Script style index iteration
   for (var i in homogenousList) {
       window.alert("Homogenous list item = "
                    + homogenousList[i]);
   }

   // C style index iteration
   for (var i=0; i < heterogenousList.length; ++i) {
       window.alert("Heterogenous list item = "
                    + heterogenousList[i]);
   }

   // Dot notation property access
   window.alert("Homogenous map property \"one\" "
                + homogenousMap.one);
   // Subscript notation property access
   window.alert("Homogenous map property \"two\" "
                + homogenousMap["two"]);

   for (var key in heterogenousMap) {
       window.alert("Heterogenous map property \""
                    + key
                    + "\" = "
                    + heterogenousMap[key]);
   }

   callable("(Function value invoked)");
   closure();
   closure();

   callCallable(closure);
   composeCallables(callable, quote, "My Message");

   var my = new MyObject("foo", 5);
   window.alert("MyObject my.name = " + my.name);
   window.alert("MyObject my[\"value\"] = " + my["value"]);

   var msg = new Message("bar");
   for (var key in Message.prototype) {
       window.alert("Message prototype member \""
                    + key
                    + "\" = "
                    + Message.prototype[key]);
   }

   window.alert("Message msg.message = " + msg.message);
   msg.show();
}

40 Unique Resources for JavaScript Coders

Are you an advanced JavaScript coder looking for more sites to sharpen your coding prowess? Maybe you’re a web designer wanting to double as a developer (or at least know enough to add a bit of rich content into your designs). Either way, if you’re looking for more information on the topic of JavaScript, the following resources are worth a gander.

Reference, Resources, & Tutorials

DevGuru - JavaScript Quick Reference

DevGuru provides an extensive list of JavaScript syntax, alphabetized similar to a glossary for easy scanning and searching.

TechCheatSheets.com - Javascript Cheat Sheets

A roundup of 10 JavaScript cheat sheets in one place; includes cheatsheets for frameworks such as jQuery and Prototype.

Google Groups - comp.lang.javascript

If you’re looking for a community of JavaScript’ers comp.lang.javascript is an active and helpful community of developers.

jQuery for Designers

jQuery for Designers is geared towards designers who want to learn about the jQuery library to add more dynamic content in their designs.

Freetechbooks.com - Free Online JavaScript Books

In this collection, you’ll be able to download 5 excellent e-books on the topic of JavaScript, all for free.

DZone

Although not purely a JavaScript resource, DZone regularly features articles, tutorials, resources, and news about JavaScript.

W3Schools - JavaScript Tutorial

W3School’s section on JavaScript offers beginning to advanced JavaScript topics.

15 Days Of jQuery

Straight off the home page, 15 Days of jQuery has "Fantastic tutorials and example code that takes you from zero to hero in no time flat".

The "Mootorial"

//clientside’s tutorial on the mootools framework has a built-in console for you to try out JS code.

Premade Scripts/Code

AjaxDaddy

A collection of downloadable DHTML scripts. AjaxDaddy provides a demo for the featured scripts.

MiniAjax.com

Another site with a collection of DHTML and Ajax code, similar to AjaxDaddy.

JavaScript Kit

Here, you’ll find downloadable scripts, as well as tutorials and guides on JavaScript.

Dynamic Drive JavaScript code library

DHTML scripts organized into 16 categories including Calendars, Image Effects, Links & Tooltips, and more.

DHTMLgoodies.com

Yet another place to get your fix of DHTML/Ajax scripts. They also have a fairly nice and straight-forward Ajax basics tutorial.

4umi useful Javascript

A "database" of useful scripts and code snipplets that are updated fairly often.

Articles & Blog Posts

The Most Complete AJAX Framework and JavaScript Libraries List(124+)

The title pretty much says it all — it’s a huge list of JS frameworks/libraries.

The seven rules of unobtrusive JavaScript

This excellent article outlines seven things to keep in mind when trying to develop unobtrusive JavaScript solutions.

How simple is making your javascript unobtrusive? Easy as Pie.

A basic introductory article on "unobtrusive JavaScript.

The Top 40 Free Ajax & Javascript Code for Web Designers

A list of scripts geared towards web designers (i.e. not a lot of manual coding involved).

How to choose a JavaScript framework

Outlines a few considerations when deciding which JS framework is right for you.

Efficient JavaScript

An article on quick tips for optimizing your JavaScript code.

Ten Javascript Tools Everyone Should Have

A list of JS code snipplets recommended to have in your coding arsenal; among them are numeric sorting and working with cookies.

Serving JavaScript Fast

Optimal tips for serving/loading your JavaScript libraries quickly.

The Great Browser JavaScript Showdown

A comparison of the top 4 web browsers (IE7, Firefox 2, Safari 3.0.4, and Opera 9.5) when it comes to handling JS.

Quick guide to somewhat advanced JavaScript

A guide on Object-Oriented JavaScript coding.

Blogs & News

John Resig - Blog

John Resig is the creator/lead developer of jQuery and author of "Pro Javascript Techniques".

> JavaScript">Ajaxian - JavaScript

Ajaxian is a news site about Ajax and Rich Internet Applications. Over 850 stories have been tagged under the JavaScript topic.

Snook.CA - JavaScript Category

Snook.CA is Johnathan Snook’s site on the topic of web development. He writes about JavaScript, as well as other web dev topics.

Ajaxlines

Ajaxlines provides news and resources on the topic of Ajax. It currently has 140+ posts tagged under JavaScript.

QuirksBlog

QuirksBlog is part of JavaScript guru/web developer Peter-Paul Koch’s QuirksMode.org. His book ppk on JavaScript is an excellent book to own.

Ajaxonomy - Blogs

Ajaxonomy is a wonderful resource for JavaScript’ers interested in Ajax and other web technologies. It has many posts tagged with JavaScript.

Ajax Bestiary - A JavaScript Field Guide

Ajax Bestiary is a regularly updated blog on JavaScript.

Awesome Frameworks/Libraries

Prototype JavaScript framework

Prototype was one of the first popular frameworks. Several libraries and frameworks are based on Prototype (or still require it).

jQuery

jQuery is lightweight, elegant, and touted as one of the easiest JS frameworks to use.

mootools

My personal favorite.

The Yahoo! User Interface Library (YUI)

A big and extremely robust JavaScript toolkit by Yahoo!.

JavaScriptMVC

JavaScriptMVC is a relatively new but very promising framework that offers a lot of unique components and features not found in other frameworks.

script.aculo.us

A robust effects library that’s been used by top websites such as Digg, Feedburner, and Apple; requires the inclusion of Prototype.

Ext JS

Another solid framework; it does have a restrictive license for commercial purposes. Check out the Web Desktop demo.

MochiKit

MochiKit is a robust library that offers a lot of utility functions and effects classes.

Dojo

Dojo is another framework to consider. visit the Spotlight section on the website to see real companies using Dojo.

Additional Resources

Author’s note - April 16, 2008. After the publication of this article, I recieved several recommendations from readers about additional resources that didn’t make the list. I’d like to add even more excellent JavaScript resources worth taking a look at. I’ll add more as suggestions come along.

• Learning jQuery - a multi-author weblog dedicated to sharing information about jQuery. It’s geared at all levels of JS coders wanting to learn about jQuery.
• Mastering JavaScript — concept and resource guide - A great list of resources pertaining to grokking JS.

Ref: http://sixrevisions.com/resources/40_resources_for_javascript_coders/