The Problem

I wanted to convert one of my web scraping applications I made in PHP to NodeJS. The application interacts with SOCKS4 and SOCKS5 proxies using PHP’s cURL bindings. Unfortunately there are no cURL bindings (or SOCKS protocol wrappers) written for NodeJS. NodeJS does come with an HTTP client module that can issue web requests, however it doesn’t support SOCKS proxies.

The Solution

Although there are no specific NodeJS bindings for cURL, we can still issue cURL requests via the command line interface. NodeJS comes with the child_process module which easily allows us to start processes and read their output. Doing so is fairly straight forward. We just need to import the exec method from the child_process module and call it. The first parameter is the command we want to execute and the second is a callback function that accepts error, stdout, stderr.

The Code

var util = require('util');
var exec = require('child_process').exec;

var command = 'curl -sL -w "%{http_code} %{time_total}\\n" "http://query7.com" -o /dev/null'

child = exec(command, function(error, stdout, stderr){

	console.log('stdout: ' + stdout);
	console.log('stderr: ' + stderr);

	if(error !== null)
	{
		console.log('exec error: ' + error);
	}

});

This returns the HTTP code and time it took for the request to be issued:

stdout: 200 0.710

Conclusion

Although NodeJS is still young and bindings haven’t been made for alot of C libraries, the code above shows how you can still interact with the functionality they provide. That being said, the number of NodeJS modules is growing weekly. Be sure to keep an eye on the module wiki and npm registry for a list of modules.

Installation

Installation is very simple provided you’re familiar with the terminal. There are three ways to install Cloud9:

1. If you’ve Git installed on your system then you can get the code repository directly from Github. Just enter the following command in your terminal:

git clone git://github.com/ajaxorg/cloud9.git

After Git checkout, enter the following command to install all the submodules and run the IDE:

bin/cloud9.sh

The editor will open in your default browser after all the submodules have been installed.

You can also install Cloud9 via NPM

npm install cloud9

or by downloading the source code from Github.

Review

Cloud9′s UI is similar to Eclipse IDE, so Eclipse users will find it simple and intuitive to use. While not as robust as Eclipse, it supports various features required in an IDE like Nested syntax highlighting, auto indentation, line numbering, bracket matching and debugging. Moreover, Cloud9 uses pure DOM methods along with virtual view port to render everything, the upshot being: no scalability problems. Nice! Note that DOM is used only for drawing purposes and does not store states. Plugins are also supported in Cloud9. In fact, various features like the filesystem, debugger, console and search are all basically plugins for Cloud9. On top of all this, users can also write extensions for Cloud9. This tutorial covers everything you need to know about writing extensions for Cloud9.

The biggest advantage of using Cloud9 is that you can rapidly develop and debug SSJS applications without any fuss. It’s true that you can find many JavaScript IDE’s on the Web, but most of them do not have good support for SSJS development. The fact that Cloud9 is built on top of Node.js makes it an ideal IDE for developing SSJS applications. That being said, it’s still buggy. Not only did it crash a couple of times while debugging, it’s also not completely stable on Safari and Internet Explorer7/8. Some other features missing from this IDE are code folding and source control integration. Still, judging by the exponential increase in its user base, there’s hope that these features will soon be available.

Final Verdict

So, the big question is: “Do we need another IDE for JS development?” Well, it all boils down to your requirements. There’s no need to switch to Cloud9 if you’re just working with Client-Side JS(CSJS). There are already some very good editors/IDE’s for CSJS like Aptana, Eclipse for JS, IntelliJS and Textmate. However, if you’re into SSJS development, I strongly recommend trying out Cloud9.

(And if you do take Cloud9 for a spin, we’d love to see your reviews in the comments section!)

Installation

Download the latest version from the CodeMirror website. As of today, it is version 0.62. After you unzip it you will see 3 directories – js, css and contrib. contrib holds parsers that other people have written such as the lua, python and PHP. css holds the color schemes for syntax highlighting and js contains the necessary scripts for CodeMirror to run.

Basic Usage

If we have a textarea with an id of code that we wanted to turn into a CodeMirror editor with a MirrorFrame(more on this later) then we would use the code below. Note that we need to specify where the parserfiles and stylesheets for the particular type of syntax (in this case javascript) are located.

  var textarea = document.getElementById('code');
  var editor = new MirrorFrame(CodeMirror.replace(textarea), {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true
  });

The result would be:

MirrorFrame

The MirrorFrame class extends the syntax highlighter and makes the editor feel more of a true editor – with a toolbar/buttons. You can find the source of the MirrorFrame implementation in js/mirrorframe.js. As an example we’ll take the ‘get current line number’ function. It references this which in our case is the current editor. There are alot of functions CodeMirror makes available (list here), you can write your own functions and attach them to a button in your own MirrorFrame editor.

  line: function() {
    alert("The cursor is currently at line " + this.mirror.currentLine());
    this.mirror.focus();
  },

CodeMirror

We can pass many configuration options to the CodeMirror class when we instantiate it such as whether we want line numbering and the size of tab width. An example below:

editor = CodeMirror.fromTextArea(textarea, {
content: textarea.value,
parserfile: ["parser/tokenizejavascript.js", "parser/parsejavascript.js"],
stylesheet: "css/editor_colours/jscolours.css",
path: "js/",
autoMatchParens: true,
width: '100%',
height: '100%',
textWrapping: false,
lineNumbers: true,
tabMode: 'spaces',
iframeClass: 'ifc',
indentUnit: 4
});

There are also 2 events available for the developer to use. onChange and initCallBack. initCallBack is called when the editor has loaded and is ready for the user to start entering code (remember an iframe is created, additional javascript files are loaded). onChange occurs whenever a change is made in the editor itself. If we wanted to build an on-the-fly code tester, and needed to fetch the code from the editor whenever the code in the editor changed, then we would do the following:

  var editor = CodeMirror.fromTextArea(textarea, {
    height: "350px",
    content: textarea.value,
    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
    stylesheet: "css/jscolors.css",
    path: "js/",
    autoMatchParens: true,
    onChange: function (n) { alert(editor.getCode()); },
  });

This was just a quick look at CodeMirror, but hopefully you can appreciate just how powerful it is. It could be used in your website’s admin interface to alter code on the fly, or be used in Titanium or AIR to create a desktop IDE in HTML/Javascript.

So, instead of looking for a pure AJAX solution, I decided to implement this functionality by using a combination of AJAX (for the localhost) and a traditional PHP POST request (for the web server). The trick here is to execute the AJAX call before the form is submitted – by catching the form submission event using JavaScript. Once the AJAX call is successful, we allow the default form submission to take place. In case there is an error with our AJAX call, we should stop the propogation of the traditional form submission too.

Ok, so let’s start off with a simple example – a no-frills form with a few fields.

<form method="post" id="webform" action="http://www.example.com/path/to/PHPscript.php">

<label for="firstname">first name:</label>
<input type="text" name="firstname" id="firstname" value="" />

<label for="lastname">last name:</label>
<input type="text" name="lastname" id="lastname" value="" />

<label for="email" id="l_email">email address:</label>
<input type="text" name="email" id="email" value="" />

<input type="submit" name="Submit" id="submit_butt" value="Submit" />
<input type="reset" />

</form>

When the above form is submitted as it is, the form contents will be sent to the PHP script in the webserver. As I mentioned earlier, what we need to do now is “catch” this form submission event and insert our AJAX call before that. Let’s see how we can do that now. We will be using jQuery for our JavaScript needs.

$(document).ready(function(){
$("#webform").submit( function()
{
var success = -1;

$.post("localScript.php",
{
firstname: $("#firstname").val(),
lastname: $("#lastname").val(),
email: $("#email").val()
},

function(response){

if(response.status == "0")
success = false;
else
success = true;

}, "json");

var d = new Date();
var t = d.getSeconds();

while(success==-1)
{
var d = new Date();
if(d.getSeconds() - t > 4)
{
success = false;
break;
}
}

return success;
});
});

We set-up an event handler using jQuery, which fires whenever the form is submitted. We then make an AJAX call to the localhost to submit the form contents. We have a callback function which checks the status of the AJAX call. In case, any error occurs on the localhost, an error code can be returned (in our case, the status value will be 0) and we have to stop the form submission by returning “false” from the event handler function. This will stop the default action of the submit button, i.e. it will prevent the HTTP form submission.

This is achieved using a hack. Since the script will not wait for the callback function to return, the next statement, i.e. the “return” statement will be executed immediately after the $.post() call is made to the server. However, we cannot return from the function without knowing whether the operation on the backend succeeded or not. Since, JavaScript does not natively have any sleep()-like function, we have to force our script to get into a blocked state using a while() loop. We then manually terminate the while loop if we did not hear back from the server within a “few” seconds. In our example we have defined the timeout to be 4 seconds. In case we don’t hear from the server within this time, we will terminate the form submission by returning a “false”. This elaborate hack is required to ensure that we do not proceed to the next stage without knowing what happened to the data we submitted to the localhost.

If everything goes well in the localhost, the contents of the form will be processed and stored in the localhost database by the PHP script we have called using AJAX. The submit event handler will then return “true”. This would in turn cause the form to be submitted to the PHP script on the remote server, as defined in the action attribute of the <form> tag. Once the form is submitted, the browser requests, and loads this PHP script. The PHP scripts recieves the form contents as POST variables and saves them (by perhaps, storing them in a database).

We are not done yet, though. We still have to send the user back to a page on the localhost once the PHP script has finished processing and storing the form contents. We do that by:

$redirect_url = "http://localhost/path/to/some/page";
header( 'Location: ' . $redirect_url );
exit;

It is important that the header() is called before any actual output is sent to the browser. For example, you should not have any echo statement, or raw HTML output before calling the header().

That’s about it! Now we are really done! In most cases, you will notice that this entire process is so slick that your user would hardly notice the redirection from the page on the webserver to the page on the localhost! I have put together a barebones HTML page containing the code fragments above, which you can download for your reference and use from here.

The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.

The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.

The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.

:

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in  in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources

:

• Make your markup clean
• Don’t fear to java script RIA is future. Jquery might be good place to start (and possibly end of search).
• Keep a tab on latest, fresh and trust worthy tips, tricks, trends, news etc related to web development.
• Get benefit and give benefit by being active part of revolution in web development. Join the wiki maintained by web developers for web developer from Google.
• Know more about standards, stick to them and force them upon you, make web development your passion and web standards your religion.

• It’s not how much and what you know; but what you can do with what you know, which’s important.

• Ability to implement Polymorphism, Inheritance, private, public namespaces, static methods etc is no guarantee you are a good OO developer.

• OOP is useless if you don’t use it to create good software design (architecture).

• Using packages, classes, etc does not guarantee good software design.

• When designing your software, think of it as an electronic device you are designing.

• Sketch out the ‘electronic device’. Label the different components, list their functionalities.

• Stay hungry, stay foolish.

That’s it for today. I hope you are blessed with more knowledge, and the ability to make the best use of them.  Adios!

We are going to start writing the PHP code to process the form. This is fairly basic stuff, using $_POST to get the values from the form, then checking them against pre-assigned values, if they match, then echo approved, if they don’t then echo denied.

So at the end of this stage, you will have an HTML form set up and this PHP file. You can enter the username Panzer and the password of query7 into the form and it will return Logged in.

Next tutorial, the fun part, the AJAX!

It might take a little while to finish up so i might not be posting much over the next week (sorry) but it will be worth it in the end.