CSS Tab Designer

If you share the philosophy that time is a very important commodity while building applications, and that as much as possible, development time should actually go only to building the critical part of an application; the business logic, database design etc and not on mundane task or task that can easily be duplicated then you belong to my school of thought.

CSS Tab designer is a tool that enables you to maximize precious time in designing the user interface of a website/web application.

It is a software that helps in creating CSS based navigation list and tabs visually without having to spend time writing codes.

It so easy and so cool. On the fly, you are done creating the look and feel of your navigation, leaving you with time for other things.

With the CSS Tab designer you can:

• Quickly design your list visually


• Choose from a variety of styles/colors (60+ different designs/colors supported)


• Generate strict xhtml compliant code

I'm sure this is a tool that you will derive a lot of utility from.
It's free so you can go and download it straight away.

Zamzar:Online file conversion

If all you want to do is convert a file from one format to another, and you don't see the sense in installing a software for just that singular purpose, then zamzar is an application you will like.

zamzar is an Ajax application that enables you to upload a file and then convert it to the format of your choice. The conversion is done on their server, meaning you don't have to install anything on your computer.

At the moment, zamzar is in beta version and currently it supports over 150 different files conversion.

And if you have being looking for a way to make those PDF's editable, why not just use zamzar and convert them to MS WORD where you can edit them? Yeah, it can do that to.

so Go try it out.

Creating Objects Using Object Literal

This method offers a much more convenient way to create objects without first predefining a constructor function. This method could be viewed as one of JavaScript's strength because of how it makes the creation of object so easy.

The object literal is actually a list of property-value pairs enclosed in curly brackets and separated by colon.

The syntax look thus

var myvarobject = {'propert1':'value1','property2':'value2','propertyN':'valuen'};

To see this in action lets see how it is used in creating objects.
So if i want to create a monitor object with the following properties: make,screensize and color, i will write:

var mymonitor = {'make':'Dell','screensize':'19inches','color':'graphite'};
and i have my object created.
Once this is done, i could check to see if the object was successfully created.
Writing:
alert(mymonitor.make) should display 'Dell'. Other properties of the object can thus be accessed.

Creating Objects in Javascript 1.0 using constructor function.

Javascript offers various methods of creating objects and this method I am going to share is just one of them. Javascript 1.0 has two methods: the object literal method and the function constructor method (which this post is about). Javascript 2.0 to also comes with its own method of making objects. The choice of which method to use depends on your personal preference and the JavaScript version most of your audience will be running…Having said that, lets get down to business

The constructor method

This method imitates the process of first defining a class and then afterwards instantiate an object. So the first thing we are going to do is to define the class. The syntax of creating a class is similar to what you have when defining a function. So let say we want to create a class called ‘webdevelopers’ you will then write

function webdevelopers()
{

}
Since a class is supposed to be a template that objects are created from; a list of the properties peculiar to that class must therefore be listed. To do that you write

function webdeveloper(identity,location,technologies,portfolio)
{
this.identity = identity;
this.location = location;
this.technologies = technologies;
this.portfolio = portfolio;
}


So the next thing to do is to create an object from this class. To illustrate let me use my friend who is a web developer as an example. Here are some of his characteristics;
• His name is Tim
• He stays in lagos
• Php is one of the technologies he uses
• Searchnigeria.info is part of his portfolio

So to model him as an object I will just write

var Tim = new webdeveloper(‘tim’ , ‘lagos’ , ‘php’, ‘searchnigeria.net’);

And so I have a ‘Tim’ object.

To see if the object is well created, try to access the listed properties. For example, including this:

alert(Tim.location);
Should result into an alert box with the message “lagos”

What about adding methods to your objects? That is also easy
i.e if I want a method that will write my name in an alert box, I will need to add the following code to the function that defines the webdevelopers class:

this.saymyname = function myfunction() {alert('dade');}

So whenever I call the method by writing ‘this.saymyname()’ the function ‘myfunction()’ will be executed and i will have my name shout at you from the alert box.

CSS QUICKIE

This is a little tutorial on how to create that Centerd Content layout that we all love.Lonely Flower is a typical example of such design.
Its quite simple. First thing you need to do is to create the DIV element that will contain the contents and then give it the required dimension via your css. for example:

This is my HTML:
< div id='main_container'>< /div >

and this is my CSS:

div#main_container
{
width:700px;
height:600px;
background-color:#fff;
border: #eee thin solid;
}


With the above code you have your styled DIV. To now move it to the center, to the already defined style just add:

margin:auto;

This will move the DIV to the center of the screen and the reason this is so is because the 'auto' value given to the 'margin' property will autamically assign the required amount of margin space to all the four sides of the div; thereby pushing it to the center.

SPELL CHECKER

Was strolling one nice evening on the tangled web street of the internet looking for anything Ajax in nature when i stumbled upon Jacuba. Jacuba is free on line spell checker that works nicely. With its ajax implementation, it has a really nice desktop-App feel. Apart from the on-line checker, they've got some other products that could be useful to you depending on what you do.You can go and check to see what i mean.

Semantic Ajax

Some school of thoughts argues that Ajax discourages the creation of websites using semantic XHTML design, and the separation of contents from presentation. They believe Ajax promotes creation of presentation with JavaScript, thus going against the idea of presentation being apart from content.

Although this allegation might be true, I don’t think it’s an inherit flaw in Ajax. It is more of how people are using it. The philosophy of Ajax does not necessary calls for content being muddled up with presentation, in fact with the proper use of CSS, Ajax application can be built with contents separated from presentation.

The technology that serves as the building blocks of Ajax clearly makes the creation of semantic Ajax application possible. This is because each building block is defined in its functions. And there is no reason why there should be overlapping of functions, if properly used.

I can divide the main components of any Ajax application into:

• The Asynchronous Components
• The Presentational Components
• The Content Components

And if each component is handled by the appropriate technology, then I see no reason why any Ajax application can’t be as semantic as required.

For example the Asynchronous components will be handled by JavaScript and the XmlHttp object.
The Presentational components should be handled by your CSS.
and the Content Components should be handled by the DOM, JavaScript and your XHTML.

It is when these three components are not properly separated that Ajax might be an aberration to semantic XHTML. For example using JavaScript for Presentational Components will not be good practice. Since CSS can style dynamically generated contents, there is actually no reason for using JavaScript instead.

So it’s all with the developer and not Ajax as a technology. With semantic XHTML, accessibility, and the separation of content and presentation in mind, you can still build your web application the Ajax way!

Application of the Month: 1st JavaScript Editor Pro

My application of the month is 1st JavaScript Editor Pro.

For writing JavaScript, I can say this is the best editor I have ever used; it does the job perfect.

I find the interface well layed out, friendly and intuitive.

Its Intellisense functionality is the most comprehensive I have come across so far for JavaScript, and I find that really helpful.

On top of it, it comes with an exhaustive inbuilt reference for Jscript, XHTML, CSS and Ajax.

I wanted an editor that will make authoring JavaScript easy and that is exactly what I got.

Things I have pet peeves with would have to start wth the applications splash screen! O'boy, isn't it the most ugly splash screen ever seen? Its very unimpressive. So also it the company's website Its just ugly! Its hard to reconcile such a useful software is created by a company with such an unimpressive website. I looked under the hood of the site

I guess when its comes to graphics, and general design, dudes over there are really wanting.

Another thing is that it seems folks at Yaldex are quite supportive of non-standard web practice. Take a look at their site and part of the code snippets that comes with the software and you will agree with me.

Apart from these, peeves, its a cool tool for anybody doing serious work with JavaScript. You can go and get a trial version.

My Comment on the Dojo ToolKit

The dojo toolkit is cool. It has a whole lot of functionality that comes in handy.

But one thing I would want those guys at Dojo foundation to do is to come out with a proper Documentation for the framework. Right now there exists nothing like Documentation. What you have, which is online, is absolutely nothing to write home about.

Instead of leaving developers with no other option but to start hacking the source codes so as to figure out how it works, I believe we will all be good for it if there is a comprehensive Documentation out there to download.

Using table.insertRow(): A word of advice

Only if I knew, I would have saved myself some countless hours of frustration…

Via JavaScript, you have an easy method of dynamically creating tables. The object representing the element has methods that easily helps in appending rows and cells. For example, lets say I have a variable otbody that is referencing the element, creating a row with three cells will be:

otbody.insertRow (0); //this creates the first row
otbody.rows[0].insertCell(0); //this makes adding cells possible
otbody.rows[0].cells[0].appendChild(document.createTextNode(‘Firstcell’));//populates the first cell
otbody.rows[0].cells[1].appendChild(document.createTextNode(‘Secondcell’));//populates the second cell
otbody.rows[0].cells[2].appendChild(document.createTextNode(‘Thirdcell’));//populates the third cell

What I did not know, which led to me wasting a lot of time, is that for this above code to work, the [otbody] object must be a child of the [table] object. What I did, which came out to be wrong, was that I attached the [otbody] to a [documentFragment] object and then append the [documentFragment] object to the [otable] object. I wanted a way of bunching the table’s content together so as to facilitate easy removal that was why I appended it to a [documentFragment] object; but that was wrong.

So to make the above code work, somewhere earlier in the source codes, I would have to include this:

otable.appendChild(otbody);

Tweaking Tinymce

Tinymce has a lot of cute functionality that is handy for email formatting but might become redundant when you want to format text to be sent as SMS. So how do you remove those function? Things like bullets list, underline and stuffs like that?

I had to do that recently and it is quite simple.
You navigate to the themes folder:
tinymce\jscripts\tiny_mce\themes

And to the particular theme you are using.
By default you have advanced, default and simple as the three themes option you have; although you can surely well come up with your own theme.

Once you are in the folder you will see a .js file titled: editor_template.js.
This file contains the HTML table used to format the textarea and a corresponding javascript function.
So to quickly disable any function you can just remove it from the function or just remove its corresponding HTML codes.
Using the later method, to remove the ‘redo’ function just look for this block of code:

< img src="{$themeurl}/images/redo.gif" title="{$lang_redo_desc}" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'Redo\')" >

And delete it.

Do this for the other functionalities you might not be needing

Tinymce

I am recently working on building a DHTML application that will interface with an sms and mailing service and I had to provide a nice neat and functional textarea where messages to be sent are to be formatted; this is where tinymce came in handy.

TinyMCE is a small WYSIWYG editor control for web browsers such as MSIE or Mozill that enables the user to edit HTML and TEXT contents in a more user friendly way.

What I really like about it is its simplicity and yet how it comes in so handy. It’s free, being released under the terms of GNU lesser General Public License so you can go grab a distribution anytime you need it.

4:49 A.m this cold Thursday morning, browsing from a friends PC, I finally did what I have been postponing all these days: start blogging on blogspot.

I had to make this decision after the server hosting my former blog was hacked; losing all my previous posts in the process.

I should believe that I have more stability here on blogspot...

4:53 A.m this cold Thursday morning, I finished my first post here on Blogspot.