#javascript & ajax

[remelehane]

Promise-Based Validation

New Post has been published on Reme Le Hane

Promise-Based Validation

The concept of “Promises” has changed the way we write asynchronous JavaScript. Over the past year, many frameworks have incorporated some form of the Promise pattern to make asynchronous code easier to write, read and maintain. For example, jQuery added $.Deferred(), and NodeJS has the Q and jspromise modules that work on both client and server. Client-side MVC frameworks, such as EmberJS and AngularJS, also implement their own versions of Promises.But it doesn’t have to stop there: we can rethink older solutions and apply Promises to them. In this article, we’ll do just that: validate a form using the Promise pattern to expose a super simple API.What is a Promise? Promises notify the result of an operation.Simply put, Promises notify the result of an operation. The result can be a success or a failure, and the operation, itself, can be anything that abides by a simple contract. I chose to use the word contract because you can design this contract in several different ways. Thankfully, the development community reached a consensus and created a specification called Promises/A+.Only the operation truly knows when it has completed; as such, it is responsibile for notifying its result using the Promises/A+ contract. In other words, it promises to tell you the final result on completion.The operation returns a promise object, and you can attach your callbacks

http://www.remelehane.co.za/promise-based-validation/?Tumblr

[remelehane]

Real Time Chat With NodeJS, Socket.io and ExpressJS

New Post has been published on Reme Le Hane

Real Time Chat With NodeJS, Socket.io and ExpressJS

NodeJS gives me the ability to write back-end code in one of my favorite languages: JavaScript. It's the perfect technology for building real time applications. In this tutorial, I'll show you how to build a web chat application, using ExpressJS and Socket.io.Setup EnvironmentOf course, the first thing to do is get NodeJS installed on your system. If you are a Windows or Mac user, you can visit nodejs.org and download the installer. If you instead prefer Linux, I'd suggest that you refer to this link. Although I won’t go into further details on this, if you encounter any installation issues, I’m happy to help; just leave a comment below this post.Once you have NodeJS installed, you’re ready to setup the needed instruments.ExpressJS – this will manage the server and the response to the userJade – template engineSocket.io – allows for real time communication between the front-end and back-endContinuing on, within an empty directory, create a package.json file with the following content.{ "name": "RealTimeWebChat", "version": "0.0.0", "description": "Real time web chat", "dependencies":

http://www.remelehane.co.za/real-time-chat-with-nodejs-socket-io-and-expressjs/?Tumblr

[remelehane]

Creating a Multi-Page Site with Meteor

New Post has been published on Reme Le Hane

Creating a Multi-Page Site with Meteor

As with any web application, creating ...

http://www.remelehane.co.za/creating-a-multi-page-site-with-meteor/

[remelehane]

Drawing With Two.js

New Post has been published on Reme Le Hane - Front-end Web Developer

Drawing With Two.js

Advanced graphics are a big part of the web these days, but there are a couple of different renderers in the mix. You could use canvas, of course; but SVG and WebGL are also options. In this tutorial, we’ll review a relatively new drawing library, two.js, which provides one API that does the same thing with all three of those renderers. If you're ready, let's check it out!

Step 1 – Setting Up

The first step is to create a two instance and put it on the page. The Two contstructor takes an object with a number of parameters:

var two = new Two({ fullscreen: true });

In this case, we're using the fullscreen option, which makes the drawing area take up the entire browser window. If we wanted our drawing area to have a specific size, we could use the width and height properties instead; these both take a number for a pixel value. There's also the autostart parameter; if this is set to true, any animations will run right away when the page is loaded.

There's also the type parameter: this decides which renderer will be used. You can choose between canvas, SVG, and WebGl. You don't just type the name, though: you use a library constant of sorts: either Two.Types.canvas, Two.Types.svg, or Two.Types.webgl. Just to be clear, two.js will just default to using SVG; it doesn't do any kind of feature detection to see what the browser will support. You'll have to do that on your

http://www.remelehane.co.za/drawing-with-two-js/

[remelehane]

Cargo-Culting in JavaScript

New Post has been published on Reme Le Hane - Front-end Web Developer

Cargo-Culting in JavaScript

Cargo-cult programming is what a programmer does when he or she doesn't know a particular language or paradigm well enough, and so ends up writing redundant and possibly harmful code. It rears its head quite often in the land of JavaScript. In this article, I explore the concept of cargo-cult programming and places to watch out for it in JavaScript.

Dogmatic rules surface and spread, until they are considered the norm.

Cargo-culting is sometimes defined as "the extreme adherence to the form instead of content." The form, in programming, being the syntax, paradigms, styles and patterns that we employ. The content being the abstract thing that you are seeking to represent through your code — the very substance of your program. A person with lacking understanding in an area is likely to copy the form of others without truly understanding, and thus their content — their program — can suffer.

Cargo-culting is curiously common in JavaScript, probably because of the general low barrier to entry in the front-end development world. You can whip up an HTML page with a bit of JavaScript in seconds. As a result, there are many people who become sufficiently proficient in these technologies to feel comfortable creating and imposing rules on themselves and others. Eventually, other newcomers copy these rules. Dogmatic rules surface and spread, until they are considered the norm:

Always use strict equality operators

Never use eval

Always use a single var declaration per scope

Always use an IIFE – it “protects” you

A rule continues to spread until a programmer is only using a given

http://www.remelehane.co.za/cargo-culting-in-javascript/

[remelehane]

Real Time Chat With NodeJS, Socket.io and ExpressJS

New Post has been published on Reme Le Hane - Front-end Web Developer

Real Time Chat With NodeJS, Socket.io and ExpressJS

NodeJS gives me the ability to write back-end code in one of my favorite languages: JavaScript. It's the perfect technology for building real time applications. In this tutorial, I'll show you how to build a web chat application, using ExpressJS and Socket.io.

Setup Environment

Of course, the first thing to do is get NodeJS installed on your system. If you are a Windows or Mac user, you can visit nodejs.org and download the installer. If you instead prefer Linux, I'd suggest that you refer to this link. Although I won’t go into further details on this, if you encounter any installation issues, I’m happy to help; just leave a comment below this post.

Once you have NodeJS installed, you’re ready to setup the needed instruments.

ExpressJS – this will manage the server and the response to the user

Jade – template engine

Socket.io – allows for real time communication between the front-end and back-end

Continuing on, within an empty directory, create a package.json file with the following content.

{ "name": "RealTimeWebChat", "version": "0.0.0", "description": "Real time web chat", "dependencies":

http://www.remelehane.co.za/real-time-chat-with-nodejs-socket-io-and-expressjs/

[remelehane]

Promise-Based Validation

New Post has been published on Reme Le Hane - Front-end Web Developer

Promise-Based Validation

The concept of “Promises” has changed the way we write asynchronous JavaScript. Over the past year, many frameworks have incorporated some form of the Promise pattern to make asynchronous code easier to write, read and maintain. For example, jQuery added $.Deferred(), and NodeJS has the Q and jspromise modules that work on both client and server. Client-side MVC frameworks, such as EmberJS and AngularJS, also implement their own versions of Promises.

But it doesn’t have to stop there: we can rethink older solutions and apply Promises to them. In this article, we’ll do just that: validate a form using the Promise pattern to expose a super simple API.

What is a Promise?

Promises notify the result of an operation.

Simply put, Promises notify the result of an operation. The result can be a success or a failure, and the operation, itself, can be anything that abides by a simple contract. I chose to use the word contract because you can design this contract in several different ways. Thankfully, the development community reached a consensus and created a specification called Promises/A+.

Only the operation truly knows when it has completed; as such, it is responsibile for notifying its result using the Promises/A+ contract. In other words, it promises to tell you the final result on completion.

The operation returns a promise object, and you can attach your callbacks to it by

http://www.remelehane.co.za/promise-based-validation/

[remelehane]

Meet the Connect Framework

New Post has been published on Reme Le Hane - Front-end Web Developer

Meet the Connect Framework

Newcomers to NodeJS typically find its API difficult to grasp. Luckily, many developers have created frameworks that make it easier to work with Node. Connect is one such framework. It sits on top of Node’s API and draws the line between comfort and control.

Think of Connect as a stack of middleware. With every request, Connect filters through the layers of middleware, each having the opportunity to process the HTTP request. When T.J. Holowaychuk announced Connect, he said there were two types of middleware. The first is a filter.

Filters process the request, but they do not respond to it (think of server logging).

The other type is a provider, which responds to the request. You can incorporate as many layers of middleware as you want; the request passes through each layer until one of the middleware responds to the request.

Basic Syntax

First, you need to install the Connect package through npm:

npm install connect

Now create a server.js file, and add the following code:

var connect = require("connect");

The connect variable is a function that returns a new Connect application. So, our next step is to create that app:

var app = connect();

You don’t need to create an app variable for most of your applications. The functions involved in creating an application (connect() and use()) are chainable:

connect() .use(/* middleware */) .use(/* middleware */) .listen(3000);

The use() function adds a layer of middleware to the application, and the listen() function tells our application to begin accepting connections on the specified port (3000 in this example).

Let’s start with something simple:

http://www.remelehane.co.za/meet-the-connect-framework/