SBala

Internet Explorer is finished. End of story. If there was any hope for the buggy browser from Redmond waiting to surprise thousands of developers, it has now been put to rest by the onslaught of JavaScript performance increases. While Internet Explorer is still catching up on trying to render CSS correctly, its primary competition - Webkit and Gecko - are speeding ahead. The Browser Wars are alive again, and this time IE is not invited to party.

It started ten months ago when I noticed Minefield (Firefox's Nightly Build) renderring pages faster than anything I had used before. I read into it - Mozilla had developed a new JavaScript interpretation engine called SpiderMonkey, which improved performance on top of the improved memory consumption and an "Awesome Bar" interface. I thought Firefox had just won. I was wrong.

It was after Firefox 3's glory was made public to the world on a record-setting launch date that WebKit announced some very interesting news. They unveiled Squirrelfish.

SquirrelFish is a register-based, direct-threaded, high-level bytecode engine, with a sliding register window calling convention. It lazily generates bytecodes from a syntax tree, using a simple one-pass compiler with built-in copy propagation[...]

SquirrelFish’s bytecode engine elegantly eliminates almost all of the overhead of a tree-walking interpreter. First, a bytecode stream exactly describes the operations needed to execute a program. Compiling to bytecode implicitly strips away irrelevant grammatical structure. Second, a bytecode dispatch is a single direct memory read, followed by a single indirect branch. Therefore, executing a bytecode instruction is much faster than visiting a syntax tree node. Third, with the syntax tree gone, the interpreter no longer needs to propagate execution state between syntax tree nodes.

After the introduction of Squirrelfish, WebKit and Safari seemed much more appealing; until Google unveiled their Chrome Browser. Google Chrome uses the WebKit rendering engine for HTML and CSS, but opted to create a separate JavaScript implementation for performance. Google's V8 JavaScript Engine increases performance by compiling JavaScript to native machine code before running it, rather than to a bytecode or interpreting it. Thus, JavaScript applications will run at the speed of a compiled binary.

As if Chrome's V8 engine were not an advancement enough, Firefox's TraceMonkey JavaScript engine took shape in their beta version of Firefox 3.1. TraceMonkey utilizes a technique called tracing to speed up JavaScript performance. Tracing involves watching for commonly-repeated actions (such as loops, function calls, or type checking) and tries to optimize their resulting native code into the lowest number of actions. The performance war didn't end here either, however.

SquirrelFish, not to be outdone, was reincarnated into SquirrelFish extreme.

SquirrelFish Extreme uses four different technologies to deliver much better performance than the original SquirrelFish: bytecode optimizations, polymorphic inline caching, a lightweight “context threaded” JIT compiler, and a new regular expression engine that uses our JIT infrastructure.

Opera is left out from the JavaScript optimizations, but Internet Explorer improvement is nonexistent in the realm of standards-compliant browsers. With very little known as to what exactly the future will hold, it is still certain that web development will entail newer, faster, and more exciting enhancements.

When making any sort of web application, a backend interface is a must-have, and nothing makes this more user-friendly than a non-HTML implementation for the text areas in the interface. Below is a list of 5 different, solid content editing methods - each with their own style and featureset; and best of all, they are all free. Without further ado, here is the list (in no particular order).

1. Nice Edit

NiceEdit is a standalone JavaScript WYSIWYG implementation that uses some of the beautiful FamFamFam Silk Icons for its interface. It takes simple textareas and converts them to a fully functional and familiar interface with a fair bit of functionality. The full panel includes text decorations, paragraph alignments, WYSIWYG lists, font sizes, font families, indenting, support for images, links, subscripts and superscripts, horizontal rules, a format remover, and a view for HTML source editing.

2. FCK Editor

The FCK Editor is very similar to NiceEdit minus the "lightweight". FCK is a solid (and large) editor with a ton of customization options and buttons. FCK, unlike NiceEdit, is not meant to simply create content for the web; rather, the FCK editor aims at bringing the feature-rich environment of desktop word-processing to the web through JavaScript. When fully configured, it has buttons for editing the source, saving, adding pages, previewing the page, selection of templates, copy, cut, paste (supports pasting from MS Word), undo, redo, find, replace, select all, remove format, forms, checkboxes, radio buttons, text fields, text areas, selection fields, buttons, image buttons, hidden fields, text styling, subscripts and superscripts, blockquotes, lists, indentations, links, pictures, Flash-based content, tables, smileys, printing, and spell-check.

3. TinyMCE

TinyMCE is probably the most popular and the most widely recognized JavaScript-based WYSIWYG editor around. It is used extensively in many Content Management Systems and has a very robust feature-set that rivals the FCK Editor. It has all of FCK's features, but has a plugin library and a wide userbase. A few extra buttons that TinyMCE has on top of FCK's offering is a button for non-breaking spaces, special characters, page breaks and a full-screen mode.

4. MarkDown

While Mark It Up adds HTML tags, MarkDown uses its own unique markup system that is easily understandable and requires much less work to both read and edit. It is a natural flow that is entirely text-based and does not use any sort of interface for publishing. This is a similar approach to Wiki Syntax, but (in my opinion) easier to learn and understand. It is hard to explain before you see it in action, so pay the Daring Fireball a visit.

5. Mark It Up

Where TinyMCE, FCK, and NiceEdit are WYSIWYG, Mark It Up is more of WYPISWYG (what you press is what you get). Mark It Up doesn't entirely ditch HTML, but makes using HTML as an editing format much easier. Instead of actually rendering changes made to the text inside of the text area, Mark It Up simply shows the tags, which is very useful if you like fine-tuning the HTML content of the content. It also works very well as a complement to blog comment forms due to its small set of buttons. It is based on jQuery, which is a put-off for some, but a major benefit for others (all dependent on whether or not you already use jQuery - chances are, you do). But wait! There's more! Mark It Up even works as a BBCode, Wiki Syntax, Textile, Dotclear, and Markdown Syntax editor.

I wrote a post not too long ago about Firebug, Dragonfly, and the developer tools the web development community has grown to love and appreciate. Firebug, Dragonfly, Internet Explorer Developer Toolbar, and that thing on Safari all share one thing in common: they are  extension of their corresponding browsers and when testing on a different browser it is often times hard to find the plugin needed, or tedious to get accustomed to a new interface. When things get dry in cross-browser bug fixing and DOM/CSS inspection, the new smaller kid in town is planning on saving the day - Firebug Lite. Unlike it's older brother, Firebug Lite is a chunk of JavaScript intended to be added to a web page that is being developed and provides an interface for debugging without the need of any extensions.

It's rather simple to use Firebug Lite. All you need to do is add in the script at http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js.

There is also an offline method to use Firebug Lite as well as a bookmarklet for use during web development.

There are tons of other little features built into the tool, so go ahead and enjoy another method of debugging.

When doing any form of web development, the end goal is always a smooth interface for a user. When making both the server-side code that generates a page or the frontend interface template, problems are sure to follow. Maybe an accidental typo in the JavaScript bricked the interface, or the small snippet of CSS went horribly wrong; whichever the case, a tool that can show the hierarcheal progression of HTML elements and their associated pieces of CSS and DOM code enable a faster approach to debugging since you will know which chunk of code is creating the problem.

When debugging, there are multiple tools that allow you to take a look under the hood of any web page. My personal favorites are the ones that integrate with browsers. Depending on which browser you use, your choice will vary. If you are using Internet Explorer, I suggest getting Firefox.

For the brave souls developing and debugging for Internet Explorer, Microsoft offers a toolbar with some tools that come as close to the Firefox or Opera debugging experience as you can find on Internet Explorer. The screenshots say everything that needs to be said.

Opera's Dragonfly, which is currently in an alpha stage of development, is a fairly robust tool that provides debugging tools for JavaScript, CSS and DOM inspection, and error detection. Although the Opera browser itself is not released under an Open Source license, the Dragonfly debugging tools are available under the BSD license. It is still a product in Alpha, and there are many features under development.

The second alpha release is the next step towards Opera Dragonfly 1.0. Look forward to new features such as DOM editing, improved JavaScript thread handling, XHR and HTTP monitoring, improved keyboard navigation, and translation into a number of languages in subsequent releases.

*Note: Dragonfly provides tools such as integrated validation in a single extension whilst Firefox requires two extensions for a similar functionality. A single extension provides a further integrated interface and cohesive sets of tools. This is hardly a drawback for choosing Firebug, but merely a slight benefit for Opera users.

Lastly, and most certainly not least, the excellent combination of Firebug and the Web Developer toolbar demonstrate the power of Firefox - its extensions. There really isn't much to say. Firebug provides the similar tool-set of CSS and DOM inspection paired with error detection. The web developer toolbar has many nifty tools such as a ruler for measuring pixels on a page and built in validation for external and local files.

That's right, Mootools 1.2 is out and about. It was released three days ago, but I wanted to have some time to play with it before I really made any comments about it.

One of the new features of Mootools that is receiving a bit of attention lately is Swiff. Swiff lets you combine Flash and JavaScript to do things MooTools can't do itself. The interaction between JavaScript and Flash is a great medium of user interaction with rich media. Variables can be passed onto Flash and then they can receive manipulation through a possible system of user interaction; then, the values can be returned back to the JavaScript and further manipulated. Swiff also allows for JavaScript to select and recognize the loading of Flash files, and base its interactions with the Flash file on the loading status.

Another feature of Mootools 1.2 is Hash. It allows for a sort of translation (hashing) from one string to another, and it supports practically every Array method. Hashes are now used as a data type throughout the Mootools framework. Hash itself resembles Abstract from Mootools 1.1, but it is designed in a more powerful-yet-streamlined fashion.

var hash = new Hash({ 'a': 'one'});
hash.get('a');
//this snippet of code associates the string "one" with "a"; and when "a" is passed as an argument, the function returns "one"

Element Storage was also introduced into Mootools, and allows for the introduction of various properties associated with a specific element. These properties are also recallable after being associated. Element Storage is basically an external Hash that stores all the custom properties and events for every element that is interacted with. Every element that Mootools interacts with or traverse over receives a unique ID. This id is actually attached to the element and then serves as it's key in the Element.Storage Hash. This is a major performance boost because it acts as a sort of caching mechanism.

var element = $('someElement');
element.store('effectInstance', new Fx.Tween(element, 'color'));
//this code example associates and retrieves an effect instance to the element with an id of "someElement"
element.retrieve('effectInstance');

Apart from the changes stated above, some of the functions are being renamed, and the addition of pseudo or CSS3 selectors makes Mootools take advantage of newer browser capabilities. Of course, the CSS3 selectors themselves cannot be used for production - so they are more of an experimental step into the abyss for now.

$$('p:contains("find me")');
//this code shows the magic of CSS selectors by scanning all elements and selects those containing the text "find me"

One of the function renames that I originally groaned upon hearing the news was Fx.Style and Fx.Styles - these two effects were going to be renamed to Fx.Tween and Fx.Morph. This seemed rather pointless, but apart from the rename of the functions, they added some useful features. The chainability of the effects has been simplified and enhanced, and the effects can be spontaneously paused and resumed throughout their duration with the call of a simple function. Another advantage of the new effects is that an element can be Morphed to match the CSS properties of another element or CSS declaration.

var morphMe = new Fx.Morph('someElement', { 'duration': 400 });
//transition someElement to a text color of black and a width of 600
morphMe.start({ 'color': '#000', 'width': 600});
//transition someElement to the properties defined in the .warning rule in a stylesheet
morphMe.start('.content');
//transition someElement to look the same as a paragraph that has the content class inside the element whose id is container
morphMe.start('#container p.content');

MooTools MooTools 1.2: It's Official!