Hello.World

Current Version: 0.95

I don't use the WYSIWYG Editor that comes with WordPress 2.0, and as a result have been getting extremely frustrated with the lack of a spell-checker. So I decided to try and get one working, preferably using AJAX to make it as fast and user-friendly as possible.

I am now proud to present Visual.SpellCheck – an AJAX-based Spell Checker for WordPress. It includes the ability to:

• Highlight incorrectly spelled words
• List suggested words from the aspell dictionary
• List suggested words from your custom dictionary
• Allow new words to be added to your Custom Dictionary

The Spell Checker works in Firefox, Internet Explorer, Opera and Safari.

Demo

Here is a demo of Visual.SpellCheck. It should work fine in Mozilla browsers (including Firefox) and Internet Explorer. It will also function in Opera, although there are some small issues. Follow the instructions in the textarea itself, and feel free to edit it's contents and then test.

Installation

Follow these basic steps:

• Download this file: Visual.SpellCheck.zip (37Kb)
• Unzip the file on your computer.
• Upload the complete folder "Visual.SpellCheck" to your WordPress plugins directory (found in "/wp-content/plugins")
• Login to WordPress and go to the Plugins module
• Find the line that says "Visual.SpellCheck" and click "Activate"
• Change the permissions on the file Visual.Syntax/personal_dictionary/dict.txt" to "757″ so that the server can write to the file

Note: Pspell must be installed on the server for this to work. Also this plugin is not compatible with the WYSIWYG HTML Editor that comes with WordPress (TinyMCE comes with its own spellchecker anyway). You will have to disable the WYSIWYG and be using the old-style editor (textarea).

Credits

This project is based on code from Broken-Notebook. Thanks to Garrison who has modified his original code to allow the plugin to integrate with WordPress and minimise issues with future compatibility.

Known Minor Bugs

This is the only bug I am aware of – and it is pretty minor:

1. In Opera the popup menu that shows the suggested words always sits top-left of the textarea

If you are able to help with this that would be great.

ChangeLog

2006-02-04 - Firefox QuickTags conflict fixed. Now version 0.95
2006-02-04 - Public release of version 0.90

If you liked this plugin you can digg it here or please leave a comment.

There have been some very exciting developments from IBM over the last few weeks. Here are four areas of major interest to me:

AJAX Toolkit Framework (ATF) Project

In January 2006 IBM announced the ATF Project. The goal is to extend the Eclipse platform to allow for extensible frameworks and exemplary tools for building IDEs (integrated development environments) for the many different AJAX runtime offerings such as Dojo, OpenRico, and Zimbra. These tools will contain features for developing, deploying, debugging and testing AJAX applications, which is not so easy to do using development tools of today.

The tools built upon these frameworks will include some very exciting features:

• Enhanced JavaScript editing such as edit-time syntax checking;
• An embedded Mozilla web browser;
• An embedded DOM (Document Object Model) browser;
• An embedded JavaScript debugger.

Open Ajax Initiative

On February 1st IBM and other industry leaders announced the "Open AJAX" initiative to promote the adoption of AJAX technology. This project is going to see collaboration between BEA, Borland, the Dojo Foundation, Eclipse Foundation, IBM, Laszlo Systems, Mozilla Corporation, Novell, Openwave Systems, Oracle, Red Hat, Yahoo, Zend and Zimbra.

The goal? To promote Ajax's promise of universal compatibility with any computer device, application, desktop or operating system, and easy incorporation into new and existing software programs.

DB2 Express-C

On January 30th IBM introduced a free version of its DB2 database. DB2 Express-C is the same database as IBM's commercial offerings but the company places limits on what kind of hardware it can run on. It can be deployed on systems with two processor cores or up to two dual-core chips on AMD or Intel-based servers. The memory limit is 4GB but there are no limits on the size of database or number of users.

This move really follows the footsteps of Microsoft with SQL Server Express, and Oracle with Oracle 10g Express Edition.

Already the LAMP-based community is showing interest in using DB2. For example ActiveGrid has just released an edition of its front-end development tool and server software to work with DB2 Express-C. DB2 offers some exciting functionality not found in PostGres or MySQL, such as the ability to combine PHP with DB2's native XML capabilities.

PHP Collaboration Project

This is now old news, but late last year IBM joined forces with Oracle, MySQL, Intel, Actuate, ADP, FileMaker, Schematic, StepUp Commerce, OmniTI, 100days.de, SugarCRM, bebe.com, and Marco Tabini (publisher of PHP Architect Magazine) in the PHP Collaboration Project. The initial objectives of the project are:

• Zend PHP Framework: A Web application framework which will standardize the way PHP applications are built. The framework will accelerate and improve the development and deployment of mission-critical PHP Web applications
• Engagement with the Eclipse Foundation: Zend is joining the IBM founded Eclipse Foundation as a Strategic Developer. Zend is now proposing to lead a project focused on PHP within Eclipse

I for one am enjoying seeing IBM partnering with other companies and projects to help formalise the future of AJAX and a PHP Framework / toolset. I haven't decided about DB2 yet for my everyday projects – but I will be taking a look for sure.

Zimbra released the AjaxTK JavaScript development library last year. Running under the Mozilla Public License (MPL) developers can use this toolkit in their browser-based applications. The toolkit is actively used by Zimbra in developing the Zimbra Collaboration Suite, one of the most full-featured AJAX applications I have ever seen. Because of it's development in conjunction with a real-world application, and because of the number of widgets and JavaScript utilities included, AjaxTK may well be one of the most advanced JavaScript toolkits available at the moment.

There is a problem however – there is basically no documentation for using AjaxTK, other than an extremely technical overview of the framework in PDF format. There are currrently no online examples of the widgets being used (other than the demo of the Zimbra Collaboration Suite itself). And while you can download the toolkit from Zimbra, their examples are heavily tied into JSP which is a major problem for me because I have no intention of using JSP.

So – here is a small step toward helping the community to get started. Full credit goes to Xiris, Chouser, Zuser and especially Smies for their posts on the Zimbra AjaxTK Forums.

AjaxTK Tree Example

open example here

This is a standard DHTML tree, but it also demonstrates Drag 'n' Drop and custom Tooltips. Try dragging a contact from the top branch onto the label of the second branch.

AjaxTK Grid Example

open example here

This is an extremely full-featured example. It demonstrates tabs and a grid that has resizable columns, movable columns and column sorting. You can filter the listings on the left (which is fully client-side). And the grid listings are paginated, allowing you to open 3 pages of listings in the grid.

Download Examples and AjaxTK Library

The above examples and the full source code are available for download in a ZIP file (466kb). Once again, thanks to Smies for getting this working.

So … what do you think? How does this compare to other AJAX libraries in your opinion? To be fair to Zimbra, they have only fairly recently released this toolkit to the community and it is yet early days (like most AJAX projects). They have some very positive thoughts on what AJAX libraries should be able to acheive in the future, so hopefully this is an indication of where they will take AjaxTK…

If you liked this post you can digg it here.

The Zimbra team have posted an article with some very interesting tips on how to optimise your Javascript and CSS so that you can reduce the launch time of your website or application. There are detailed explanations of the methods used and a case scenario demonstrating a reduction in file-size of around 300-400%. You may pick up some good tips here…

Microsoft has released Beta 2 of the next version of Internet Explorer. This release is really aimed at developers/designers who want to test their current websites and web applications with the new software. Microsoft has posted checklists that can be used when testing the browser:

• Web Developer Checklist
• IT Professional Checklist

The browser is available for download right now. There is a list of FAQ's for the new release on the IEBlog website that you may want to read. Oh yes … and you need to have SP2 installed on Windows XP if you want to use IE7.

Go and have a play if you dare…

If you are like me you are still figuring out the best way to manage your favorite RSS feeds. Today I discovered Sage, a Firefox extension that lets you read your RSS and Atom feeds inside your browser – which makes sense to me. It is very simple to use and is not cluttered with features I don't need. Here are some of the features I like about it:

• Press "Alt-S" to toggle Sage on/off in the Sidebar.
• Press the magnifying glass icon to auto-discover feeds on the current page.
• Manage your list of feeds exactly like managing your bookmarks – you can sort them any way you like, rename them and place a seperator between them.
• This is probably my favorite feature – Sage very quickly renders a column formatted list of the posts to read. See the image posted above for an example. The look and feel of this layout can be customised via CSS – in fact there are additional styles already created for you to download.

Catching up on the latest via RSS is now a logical extension of my browsing experience thanks to Sage…

One question I have been asking myself when writing this blog is – should external links in my blog open a new window by default, or should it stay in the current window? What is considered "best practice" nowadays? So I decided to do a bit of research. As usual when it comes to such topics the opinions are many and varied, and everyone thinks they are right. So I decided to share with the world my conclusions.

I have decided that it is best practice to not open new windows to external sites by default. Why?

• New windows popping up can confuse inexperienced surfers who are used to the safety of the "Back" button. A new window does not retain the browser history of previous windows, thus rendering the Back button useless.
• Experienced surfers know how to open new windows or tabs – let them choose. Tip: In Internet Explorer and Firefox hold down the "shift" key when clicking a link to open it in a new Window, or in Firefox use the "ctrl" key to open in a new Tab.

• New windows opening up are a big problem for the visually impaired whose speech-to-text software may not have been warned of the window change, or they have missed hearing the warning that a new window was opened.

Of course, there are always exceptions to the rule. In some situations opening a new browser window is the logical thing to do – but not for every link by default.

If you do…

When/if you do want to open a new Window keep in mind that the target attribute of the <a> tag is deprecated, and will prevent your pages from validating in HTML 4.01 Strict, XHTML 1.0 Strict, or any future version. There are a number of alternative methods around – most of them using JavaScript. Here is the method I recommend:

Here is a sample link using this code.

Why is this recommended method? It achieves our objective of opening a new window, but it also:

• Preserves the href element for Search Engines
• Users who want control can still right-click
• The link can still be Bookmarked or added to the browser Favorites
• Your code will validate

—————

So … future external links on this blog will not open a new window by default. And on the odd occasion it is a good idea, I will use the method outlined above.

If you have any thoughts on this topic I would love to hear them…

XHTML 2.0 is the W3C's effort to fix inherent problems with HTML and to meet the growing requirements of web-based solutions. XHTML 2.0 takes the move toward XML to the next level and will try to acheive the following design goals:

• Use XML as much as possible: Where a language feature already exists in XML, don't duplicate or reinvent it.
• Structure over presentation: Thanks to CSS stylesheets, you no longer need explicitly presentational tags in HTML.
• Make HTML easier to write: Remove some of the needless idiosyncrasies of HTML.
• More accessibility, device independence: Make as few assumptions as possible about the way a document will be read.
• Improved internationalization.
• Better forms: Long overdue improvements are required!
• Reduce the need for scripting: Include typical scripting usages in HTML itself.
• Better semantics: Make it easier to integrate HTML with semantic Web applications.

Of particular interest to me is the goal of XHTML 2.0 to provide a declarative format for specifying user interfaces in a similar way to Mozilla's XUL or Microsoft's XAML. W3C will also define XBL2, a declarative language that provides a binding between custom markup and existing technologies. XBL2 will essentially give programmers a way to write new widgets for Web applications.

If you want to prepare yourself for the future an article on IBM Developer Works suggests the following:

• Get serious about using CSS, and try to remove all presentational markup.
• Think about how you can deploy microformats in your pages. (Microformats are a way to make human-readable elements in Web pages carry semantics that computers can interpret too. They are a bridge between today's HTML-based ad-hoc semantics and tomorrow's RDF-compatible XHTML 2.0 metadata.)
• If you've not done so already, get experience with XHTML 1.0.
• Experiment with the X-Smiles browser, an experimental platform with early support for many of the W3C's new client technologies such as XHTML 2.0, SVG, XForms, and SMIL 2.0 Basic capabilities.
• If you create new client systems based on XHTML-like functionality, seriously consider using XHTML 2.0 as your starting point.

XHTML 2.0 is not likely to become a W3C Recommendation until 2007, according to W3C HTML Working Group Roadmap. Now is the time to start reading and experimenting with XHTML 2.0 – and prepare for the future!

For the full article from IBM Developer Works click here.

I found an interesting article on PHP and XUL being used to power LeMonde.fr – a leading information website in France. It is an excellent example of PHP and XUL being used at Enterprise level – and a nice case study to read about if you use these tools.

The site receives around 68,000 subscriptions monthly and an average of 70,000,000 (million) page views. Not bad. The entire website is powered by PHP, and they use XUL/PHP combined to power their Content Management System. The following statements highlight the benefits from using these technologies:

The system is now powerful, using 4 Linux servers at 20% cpu while it was using 4 Sun servers at 70% cpu before. Development time has been divided by 2 and number of bugs by 3, in addition to the excellent documentation and support available in both XUL and PHP Communities.

You can read the full article here.

I only just wrote an article on Console² and I found something better – FireBug. FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

FireBug is fairly simple – it adds a console to the bottom of every web page in Firefox. It enables the following features:

• Mouse-over DOM Elements on the page
• Type in JS expressions into the command line for execution
• Inspect AJAX (XMLHttpRequest) responses as text or XML
• Only show errors for the current page – previous data is cleared
• Display JavaScript, CSS or XML Errors
• Show a red dot in the Status Bar to indicate errors on the current page
• Set preferences on what errors you want to see

If you are a developer you can even get your page to write directly to Firebug – instead of using "alert()" or other methods for debugging. There is even a tutorial on how to do this.

Yup, you have to install this one…