SBala

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 was considering purchasing Opera's Wii Internet Channel the other day. Considering, until some web surfing revealed that the browser could not access Hulu. At first I was rather perplexed as to why Opera of all software makers would bundle an outdated version of Flash with their browser. I was furious for a while because it is absolutely unacceptable to advertise yourself so heavily as a feature-rich software package and be outdated. Until I realized Opera wasn't at fault.

The problem lies in Adobe's policies regarding the use of Flash on platforms other than the standard Windows, OS X, and Linux. In order to run Flash on a platform such as the Wii, the Flash SDK is needed. Adobe for some odd reason decided to keep their Flash SDK at version 7, which is poor judgement especially considering the rich content delivered through Flash on very popular web sites such as Youtube cannot be accessed on increasingly popular platforms such as game consoles and mobile devices.

When will a true open platform arise that delivers content on multiple platforms without locking users into version discrepancies? The answer is rather ambiguous because of the lack of a true open medium of rich content delivery. JavaScript is great, but the limits to JavaScript are within the boundaries of user and browser interactions. The medium of video delivery is still Flash. Microsoft's attempt at a walled garden, Silverlight, will not fix any issues with regards to platform independence. Adobe and Microsoft have different goals. Adobe wants more people using Flash, while Microsoft wants more people using Windows. Silverlight is treated as an addition to Windows rather than a standalone medium. For now, Flash is the winner; and in all righteousness Flash should be the winner.

The problems with Flash are also numerous when considering the fact that it simply requires a download. The primary reason Adobe received such high market penetration on their latest Flash version (97%) is the constant hassle of multiple websites presisting that a visitor downloads Flash. By no means is Flash a bad technology, but if it were more open, browsers would be able to ship with innate Flash functionality. If it works for Six Apart and Google, it should work for Adobe.

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!

Recently, I fell in love with PivotX - the new beta version of the Pivot blogging platform (CMS). However, as soon as I tried to really experiment with the platform, its beta nature truly surfaced. After tweaking the configuration, much of the administrator interface was instantly nuked due to a bug of some sorts. It wasn't a PHP error, but rather the ingenious system of only-necessary Javascript inclusion malfunctioned, causing none of the Javascript to be inserted onto the page. This was a fatal injury for the PivotX interface, since it is built almost entirely off jQuery's amazing utilities. This sort of unusable administrator interface occurred multiple times. After some futile attempts to figure out what was the cause of the issue in the first place, since I had changed multiple configuration options at once, I was frustrated with the system. I am glad to say, however, that I have not lost hope for the amazing system. In fact, I had some great experiences with the beta before it went sour. Its caching and data handling is amazing, and the interface is much to my liking - and a lot more fluid than the Wordpress interface. Although I have switched back to Wordpress for now, I am awaiting the time I can run the converter script for good.