We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there’s a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives being that they don’t have the community behind them to drive growth and the developer that uses multiple micro-frameworks has to work with inconsistent APIs.  To each their own;  I don’t have a strong feeling either way, as it depends on the project.

One nice resource I recently stumbled upon is dat.gui. dat.gui advertises itself as a lightweight controller library that allows you to easily manipulate variables and fire functions on the fly.   That’s a pretty general statement but dat.gui appears to be a very general framework.  The premise is object and property management within a GUI panel.  Let’s take a look at how dat.gui can be used.

dat.gui‘s niche is in listening to and controlling data such that it can be visualized into charts or other graphics.  Creating a new DAT.GUI instance provides a new sliding pane for which to add controls to:

// Create an instance, which also creates a UI pane
var gui = new DAT.GUI();

With the pane ready, new controls can be added.  Fields can be of type string, number, boolean, or function, with a number slider available depending on options passed to it.  Here’s how you can create a field of each type:

// My sample abject
var obj = {
	name: "David Walsh",
	num: 23,
	winner: true
};

// String field
gui.add(obj, "name");

// Number field with slider
gui.add(obj, "num").min(1).max(50).step(1);

// Checkbox field
gui.add(obj, "winner");

Since properties are changed directly on the object itself, there’s not “setter” and so dat.gui provides a listen function to do just that — list for changes:

// Listen to changes within the GUI
gui.add(obj, "name").onChange(function(newValue) {
	console.log("Value changed to:  ", newValue);
});

// Listen to changes outside the GUI - GUI will update when changed from outside
gui.add(obj, "name").listen();

Those are the dead basics of the dat.gui library.  Note that I’ve not yet mentioned what the result looks like.  That’s because it’s up to you to create the visual aspects based on property values.  The demo that ships with dat.gui is a very creative dot-based constant animation.  The animation magic lies within the FizzyText function.  FizzyText is a more sizable function that does the animation, but let’s take a look at the dat.gui code:

var fizzyText = new FizzyText("david walsh");
var gui = new DAT.GUI();

// Text field
gui.add(fizzyText, "message");

// Sliders with min + max
gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step

// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);

// Boolean checkbox
gui.add(fizzyText, "displayOutline");

Tinker with the pane fields and the animation instantly changes!

JavaScript, more than any other language, seems to provide the most ability to make powerful changes with very little code.  dat.gui is proof of that.  The demo provided here is the same demo provided within the dat.gui repository, mostly because topping the effect would be a hell of a feat.  When you get a few moments, go play around with dat.gui — it’s really … dat … good.

dat.gui: Exceptional JavaScript Interface Controller is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

The basic setup is the same as a traditional form upload within the browser;  a FORM element with an INPUT of file type:

<form method="post" action="mootools-upload.php" enctype="multipart/form-data" id="uploadForm">
<div>
	<div class="formRow">
		<label for="file" class="floated">File: </label>
		<input type="file" id="file" name="file[]" multiple><br>
	</div>

	<div class="formRow">
		<input type="submit" name="upload" value="Upload">
	</div>
</div>
</form>

This setup allows file uploading even if JavaScript is not enabled.  (Note to IT snobs:  get over yourselves and turn JavaScript back on)

The CSS

The “drop zone” and “progress bar” areas can be easily styled in any fashion you’d like.  My sample CSS looks like this:

.droppable {
	border: #ccc 1px solid;
	border-radius: 8px;
	background: #eee;
	color: #666;
	padding: 20px;
	margin: 10px;
	clear: both;
	text-align: center;
}

.droppable.hover {
	background: #ddd;
}

.uploadList {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uploadItem {
	overflow: hidden;
	border-bottom: #BCBCBC 1px solid;
	margin: 0 20px;
	padding: 3px;
}

.uploadItem span {
	overflow: hidden;
	width: 150px;
	float: left;
	display: block;
}

a.addInputRow,
a.delInputRow,
.uploadItem a {
	display: inline-block;
	background: url(add.png) no-repeat;
	height: 16px;
	width: 16px;
	text-indent: -999px;
}

.uploadItem a {
	float: left;
	display: block;
	padding-left: 20px;
	background-image: url(delete.png);
}

a.delInputRow {
	background-image: url(delete.png);
}

.progress {
	margin: 5px 0;
	height: 15px;
	border-radius: 3px;
	background: #545A74;
}

Since we have (unfortunately) become accustomed to the ugly INPUT type=file, my only CSS advice is to make sure you make not only your “drop zone” apparent but explain that the user should drag and drop.

The MooTools JavaScript

Arian has provided 3 JavaScript classes within his mootools-form-upload repository:

• Form.Upload:  The main worker class, detecting the browser capabilities and building a file uploader based on those features
• Form.MultiFileInput:  A class which builds and manages the list of files to be uploaded.
• Request.File:  Manages the FormData object, sends files, and reports progress.

Another resource, iFrameFormRequest, can be included in case the user is rocking a legacy browser.  With the resources above added to the page, let’s set up our drag and drop file uploader:

window.addEvent('domready', function(){
	
	// Create the file uploader
	var upload = new Form.Upload('file', {
		dropMsg: "Drop files here",
		onComplete: function(){
			alert('Files uploaded!');
		}
	});

	// Use iFrameFormRequest, which posts to iFrame 
	if (!upload.isModern()) {
		new iFrameFormRequest('uploadForm', {
			onComplete: function(response){
				alert('Files uploaded!');
			}
		});
	}

});

We start by creating an instance of Form.Upload, passing it the INPUT node and the class options.  The onComplete option is most important, as it represents the event that fires when all uploads have completed, allowing you to notify the user.

For more customizable uploads, like notifications for progress and success, you can pair Form.MultipleFileInput and Request.File directly:

// From ReadMe.md

// the input element, the list (ul) and the drop zone element.
var input, list, drop;
// Form.MultipleFileInput instance
var inputFiles = new Form.MultipleFileInput(input, list, drop, {
    onDragenter: drop.addClass.pass('hover', drop),
    onDragleave: drop.removeClass.pass('hover', drop),
    onDrop: drop.removeClass.pass('hover', drop)
});

// Request instance;
var request = new Request.File({
    url: 'files.php'
    // onSuccess
    // onProgress
});

myForm.addEvent('submit', function(event){
    event.preventDefault();
    inputFiles.getFiles().each(function(file){
        request.append('url[]' , file);
    });
    request.send();
});

This solution would be good for using detailed progress bars.

Outstanding work once again by Arian.  His contribution to the MooTools JavaScript framework has been priceless, and he continues that effort with his drag and drop file upload system.  These classes prove the power of MooTools and the advancement of browsers today.  Give your users the elegant option of drag and drop uploads!

Drag and Drop MooTools File Uploads is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The JavaScript

The parent object provides a reference to the main window from the child.  So if I have an iFrame and console the parent within it, the console will read:

// Every two seconds....
setInterval(function() {
	// Send the message "Hello" to the parent window
	// ...if the domain is still "davidwalsh.name"
	parent.postMessage("Hello","http://davidwalsh.name");
},1000);

Since we now have hold of the window, we can postMessage to it:

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
},false);

The directive above triggers the iFrame to send a message to the parent window every 3 seconds.  No initial message from the main window needed!

window.postMessage Tip: Child-To-Parent Communication is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce placeholder support.

Last week I showed you how you could style selected text with CSS. I’ve searched for more interesting CSS style properties and found another: INPUT placeholder styling. Let me show you how to style placeholder text within INPUTelements with some unique CSS code.

The CSS

Firefox employs a different pattern than Safari and Chrome. Each property name is self-explanatory though:

/* all */
::-webkit-input-placeholder	{ color:#f00; }
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

You will only want to employ the most basic of styles to the placeholder. Color, font-style, and font-variant are probably the styles you will want to employ. Go too far with your placeholder styling and you may create the animated GIF of input styles. Note that Mozilla Firefox doesn’t support placeholder styling until version 4.

Styling elements with the placeholder attribute is something you don’t need to do but could be just another one of those small details that sets your website apart from other websites. Hopefully IE9 and Opera soon follow suit in allowing styling of placeholder text within INPUT elements…or expose their API for doing so!

HTML5 Placeholder Styling with CSS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we’ve been making use of over the past few years. This new API provides a method to push messages from client to server efficiently and with a simple syntax. Let’s take a look at the HTML5 WebSocket API: its use on the client side, server side, and an outstanding wrapper API called Socket.IO.

What is the WebSocket API?

The WebSocket API is the next generation method of asynchronous communication from client to server. Communication takes place over single TCP socket using the ws (unsecure) or wss (secure) protocol and can be used by any client or server application. WebSocket is currently being standardized by the W3C. WebSocket is currently implemented in Firefox 4, Chrome 4, Opera 10.70, and Safari 5.

What’s great about the WebSocket API that server and client can push messages to each other at any given time. WebSocket is not limited in its nature the way that AJAX (or XHR) is; AJAX technologies require a request to be made by the client, whereas WebSocket servers and clients can push each other messages. XHR is also limited by domain; the WebSocket API allows cross-domain messaging with no fuss.

AJAX technology was a clever usage of a feature not designed to be used the way it is today. WebSocket was created for the specific purpose of bi-direction message pushing.

WebSocket API Usage

Focusing on the client side API only (because each server side language will have its own API), the following snippet opens a connection, creates event listeners for connect, disconnect, and message events, sends a message back to the server, and closes the connection.

// Create a socket instance
var socket = new WebSocket('ws://localhost:8080');

// Open the socket
socket.onopen = function(event) {
	
	// Send an initial message
	socket.send('I am the client and I\'m listening!');
	
	// Listen for messages
	socket.onmessage = function(event) {
		console.log('Client received a message',event);
	};
	
	// Listen for socket closes
	socket.onclose = function(event) {
		console.log('Client notified socket has closed',event);
	};
	
	// To close the socket....
	//socket.close()
	
};

Let’s take a look at the individual pieces of the snippet above. The argument provided to WebSocket represents the URL to the address listening for socket connections. onopen, onclose, and onmessage methods connect you to events on the socket instance. Each of these methods provides an event which gives insight as to the state of the socket.

The onmessage event provides a data property which contains the body of the message. The message body must be a string, so serialization/deserialization strategies will be needed to pass more data.

The syntax is extremely simple which makes using WebSockets incredibly easy…unless the client doesn’t support WebSocket. Internet Explorer does not currently support WebSocket. There are a few fallback transports that you can use if the client doesn’t support WebSocket:

• Flash – Flash can provide a simple alternative. The obvious drawback is that Flash is not installed on all clients, and in the case of the iPhone/iPad, cannot be.
• AJAX Long-Polling – AJAX long-polling has been used for quite a while to simulate WebSocket. It’s a technology that works but isn’t optimized for message sending. I wouldn’t call AJAX long-polling a hack but it’s simply not an optimal method.

Wouldn’t it be great if an API was available that would provide WebSocket event handling, fallback transports, and a server side solution, all within one API? Luckily Guillermo Rauch has created Socket.IO.

WebSocket with Socket.IO

Socket.IO is a WebSocket API created by Guillermo Rauch, CTO of LearnBoost and lead scientist of LearnBoost Labs. Socket.IO will use feature detection to decide if the connection will be established with WebSocket, AJAX long polling, Flash, etc., making creating realtime apps that work everywhere a snap. Socket.IO also provides an API for NodeJS which looks very much like the client side API.

Client – Socket.IO Setup

Socket.IO is available for download at GitHub. You can include the socket.io.js file or you can pull Socket.IO from CDN:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

With Socket.IO available in the page, it’s time to create a Socket:

// Create SocketIO instance, connect
var socket = new io.Socket('localhost',{
	port: 8080
});
socket.connect(); 

// Add a connect listener
socket.on('connect',function() {
	console.log('Client has connected to the server!');
});
// Add a connect listener
socket.on('message',function(data) {
	console.log('Received a message from the server!',data);
});
// Add a disconnect listener
socket.on('disconnect',function() {
	console.log('The client has disconnected!');
});

// Sends a message to the server via sockets
function sendMessageToServer(message) {
	socket.send(message);
}

Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports. Transports include:

• WebSocket
• Flash Socket
• AJAX long-polling
• AJAX multipart streaming
• IFrame
• JSONP polling

You may set any of the Socket.IO instance’s options with a second argument to the constructor. Options include:

• port – the port to connect to
• transports – an array containing the different transport types in order by preference []
• transportOptions – an object with additional properties to pass to the transport

Socket.IO also provides the usual connect, disconnect, and message events that the native WebSocket API provides. Socket also provides an on method which wraps each event type, much the way Node does.

NodeJS – Socket.IO Setup

The server side solution provided by Socket.IO allows unification of the client and server side APIs. With Node, you create a typical HTTP server but then pass the server instance to SocketIO. From there, you create connection, disconnect, and message listeners much the way you did on the client side.

A sample server side script would look very much like this:

// Require HTTP module (to start server) and Socket.IO
var http = require('http'), io = require('socket.io');

// Start the server at port 8080
var server = http.createServer(function(req, res){ 

	// Send HTML headers and message
	res.writeHead(200,{ 'Content-Type': 'text/html' }); 
	res.end('<h1>Hello Socket Lover!</h1>');
});
server.listen(8080);

// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);

// Add a connect listener
socket.on('connection', function(client){ 
	
	// Success!  Now listen to messages to be received
	client.on('message',function(event){ 
		console.log('Received message from client!',event);
	});
	client.on('disconnect',function(){
		clearInterval(interval);
		console.log('Server has disconnected');
	});

});

You can run the server portion (assuming you have NodeJS installed) from command line with:

node socket-server.js

Now your client and server can push messages back and forth! Within the NodeJS script, you can create a periodical message sender using some simple JavaScript:

// Create periodical which ends a message to the client every 5 seconds
var interval = setInterval(function() {
	client.send('This is a message from the server!  ' + new Date().getTime());
},5000);

The server side script will push a message to the client every five seconds!

dojox.Socket and Socket.IO

Persevere creator Kris Zyp has created dojox.Socket. dojox.Socket wraps the WebSocket API in an API consistent with Dojo and provides a long-polling alternative if the client doesn’t support WebSocket. Here’s how you can use dojox.Socket on the client side and Socket.IO on the server side:

var args, ws = typeof WebSocket != 'undefined';
var socket = dojox.socket(args = {
	url: ws ? '/socket.io/websocket' : '/socket.io/xhr-polling',
	headers:{
		'Content-Type':'application/x-www-urlencoded'
	},
	transport: function(args, message){
		args.content = message; // use URL-encoding to send the message instead of a raw body
		dojo.xhrPost(args);
	};
});
var sessionId;
socket.on('message', function(){
	if (!sessionId){
		sessionId = message;
		args.url += '/' + sessionId;
	}else if(message.substr(0, 3) == '~h~'){
		// a heartbeat
	}
});

dojox.socket.Reconnect has also been created to automatically reconnect if the socket loses connection. Look forward to dojox.Socket debuting in Dojo 1.6.

Practical Applications

There are many practical applications for WebSocket. WebSocket is ideal for most client-to-server asynchronous purposes, chat within the browser being the most prominent. WebSocket is used to day by most many companies because of its efficiency. Socket.IO is in use by many organizations and was very popular at the Node KnockOut contest.

WebSocket Resources

There’s not a great deal of information available about WebSocket so I’ve rounded up a few helpful resources:

• Socket.IO Website
• WebSocket on Wikipedia
• Start Using HTML5 WebSockets Today
• WebSockets.org
• Dojo WebSocket
• State of WebSocket Support
• Opera WebSockets Test Suite

Take a moment to download my demo and visit the resources provided above. The WebSocket API is the future of asynchronous messaging; Socket.IO is the best available resource for WebSocket in NodeJS and within the browser. Let me know your thoughts on WebSocket as I’m curious to know if you’re as excited as I am by this new API!

WebSocket and Socket.IO is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The MooTools JavaScript

Element.NativeEvents.message = 2;
Element.Events.message = {
	base: 'message',
	condition: function(event) {
		//if(event.type == 'message') {
		if(!event.$message_extended) {
			event.data = event.event.data;
			event.source = event.event.source;
			event.origin = event.event.origin;
			event.$message_extended = true;
		}
		return true;
	}
};

Regardless of whether or not the event type is within the Element.NativeEvents.message object, its value always matches what’s provided by the browser, minus the “on” prefix.  With that in mind, creating a “custom” message event with “message” as the base is the way to go.  The condition portion of the custom event is met by the type being “message,” so the only check is that the event hasn’t been handled already.  If the condition is met, I move references to the data, origin, and source to the event object’s first level to mimic the tradition message event. As an added bonus, if existing properties are undefined, I set their value to false.

The power of custom MooTools events is awesome.  window.onMessage is rarely used due to IE6 and IE7′s crap and the lack of use case so onMessage may not be worth adding the code to Core.  If you do, however, need this functionality…here you go!

Supporting the onMessage Event in MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

One of the big reasons I’me excited about HMTL5 is that features are being implemented that have been long overdue.  We’ve been using placeholders forever but we’ve needed to use JavaScript to do it.  We’ve been making entire blocks clickable like links but we’ve needed to use JavaScript to do it.  WebKit recently implemented HTML5′s async attribute for SCRIPT tags.  We’ve been accomplishing this task with a variety of JavaScript hacks but this new attribute will allow us to prevent blocking in an easy way.

async – The HTML

As I mentioned above, it’s as easy as adding an attribute:

<script async src="siteScript.js" onload="myInit()"></script>

The truth is that if you write your JavaScript effectively, you’ll use the async attribute to 90% of your SCRIPT elements.

defer – The HTML

Safari has also added a defer attribute:

<script defer src="siteScript.js" onload="myInit()"></script>

Very similar to the async assignment.

async & defer – What’s the Difference

This WebKit blog post explains the difference between defer and async best:

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

Who Supports async and defer?

Also from the Safari blog:

In addition to upcoming versions of WebKit-based browsers, Firefox has long supported the defer and onload attributes and support for async was added in version 3.6. Internet Explorer has also long supported the defer attribute. While async is not yet supported, support for the onload attribute was added in version 9.

async FTW!

Seeing that WebKit had implemented async put a huge smile on my face.  Blocking is a huge bottleneck for every website and the ability to easily direct a script to load asynchronously should speed up the web!

HTML5′s async Script Attribute is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Syntax

The syntax is as basic as a text input;  instead, you set the type to “email” or “url”:

<!-- email -->
<input type="email" pattern="[^ @]*@[^ @]*" value="">

<!-- url -->
<input type="url" value="">

Using the new HTML5 pattern attribute, you can also provide a regular expression to validate the email  and URL addresses against.  I’ll save those specifics for another post.

The Advantages to Using type=”email” and type=”url”

There are a few advantages to using these special INPUT types:

• You may easily style all email INPUT elements with input[type=email]
• You may easily style all url INPUT elements with input[type=url]
• This INPUT type could be considered more semantically correct.
• Mobile accessibility:  if your user is browsing with an iPhone and they arrive at a special email input, the iPhone will display a keyboard with the @ symbol provided on the primary screen.  If the INPUT is of type “url”, the iPhone will display the “.com” button on the primary keyboard screen:
  
  

Input on this…Input…Type

At first I disliked the idea of using different type attribute values per field but after more thought, the accessibility and usability enhancements provided a great boost.  What do you think?

HTML5′s “email” and “url” Input Types is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

You’ll notice that all you need to do is add a placeholder attribute with the generic text of your choice.  Nice that you don’t need JavaScript to create this effect, huh?

Checking for Placeholder Support

Since placeholder is a new capability, it’s important to check for support in the user’s browser:

function hasPlaceholderSupport() {
	var input = document.createElement('input');
	return ('placeholder' in input);
}

If the user’s browser doesn’t support the placeholder feature, you will need to employ a fallback with MooTools, Dojo, or the JavaScript toolkit of your choice:

/* mootools ftw! */
var firstNameBox = $('first_name'),
	message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
	focus: function() {
		if(firstNameBox.value == message) { searchBox.value = ''; }
	},
	blur: function() {
		if(firstNameBox.value == '') { searchBox.value = message; }
	}
});

placeholder is another great addition to the browser and replaces the oldest snippet of JavaScript in the book! You can event style HTML5 placeholders!

HTML5′s placeholder Attribute is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

HTML5 Code

<body>
	<a href="/about-page.php">
		<div class="article">
			<h1>About David Walsh</h1>
			<p>
				I'm a 27 year old Web Developer and jQuery & MooTools Consultant working from Madison, Wisconsin. I am Founder and Lead Developer for Wynq Web Labs. I don't design the websites, I just make them work.
			</p>
		</div>
	</a>
</body>

There you have it.  A simple A element wrapping DIVs, H1‘s, and P‘s.  Note that you may not wrap A elements with larger A elements.

What Do You Think?

I have mixed feelings about wrapping block-level elements with A tags.  Taking a quick look at the HTML makes me feel as though the code is dirty or wrong.  On the flip side, we’ve been using JavaScript to skirt around doing this for a long time.  My Clickables class aims to accomplish this task.  Using HTML to make something clickable is more natural and doesn’t require JavaScript.  I guess my question is:  how do you feel about this practice?  Will you use it right away?  Please share!

HTML5: Wrap Block-Level Elements with A’s is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.