Never Use HTML Tables, Ever!

I know what you’re probably thinking, come on man…there are legitimate reasons for using tables on occasion, to display tabular data, etc.  Well, yes and no.  Agreed, there is the need for table like formatting and functionality however, tables bring with them some very bizarre remnants with regard to CSS, JavaScript interaction (especially with adding and removing rows, try a google search, you’ll see what I’m talking about) as well as a few other unmentionables used by a few ambitious developers out there.  So what do we do, never use them again…ever!  ”What?  Wha…what is this nonsense you speak of?” one might say and here’s my answer.

We don’t need to use tables, we can get table like functionality cleanly with none of the hassles of using true HTML tables especially with regard to JavaScript and CSS, and here’s how.

Replace all HTML tables with CSS styled equivalents.  Let’s take a look at a properly formatted HTML table, then we’ll look at how to replace it.  Consider the following:

Code   
<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td> 
        </tr>
    </tbody>
</table>

 

As we can see above this is a basic table using the HTML table tags along with thead and tbody.

Now, let’s take a look at the replacement:

First the markup:

Code   
<div class="table">
    <div class="thead">
        <div class="table-row">
            <div class="table-heading">
                <div class="table-cell">Heading 1</div>
                <div class="table-cell">Heading 2</div>
                <div class="table-cell">Heading 3</div>
            </div>
        </div>
    </div>
    <div class="tbody">
        <div class="table-row">
            <div class="table-cell">Row 1 Cell 1</div>
            <div class="table-cell">Row 1 Cell 2</div>
            <div class="table-cell">Row 1 Cell 3</div>
        </div>
        <div class="table-row">
            <div class="table-cell">Row 2 Cell 1</div>
            <div class="table-cell">Row 2 Cell 2</div>
            <div class="table-cell">Row 2 Cell 3</div>
        </div>
    </div>

Next, the style:

Code   
div.table {
    display: table;
}
 
div.table > div.thead {
    display: table-header-group;
}
 
div.table > div.tbody {
    display: table-row-group;
}
 
div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
    display: table-row;
}
 
div.table > div.thead > div.table-row > div.table-heading {
    display: table-cell;
    font-weight: bold;
}
 
div.table > div.tbody > div.table-row > div.table-cell {
    display: table-cell;
}

Now we have all the functionality of a table with none of the CSS styling issues and interacting with JavaScript is straight forward and simple.  The only real issue I see with this approach is the “div soup” that is seen in place of individual tags.  Additional styling attributes such as border, cell padding and cell spacing can be controlled using standard CSS properties such as border, padding, etc.

I’ve been implementing and using this approach for quite some time now with no issues and plenty of benefits.  Feel free to let me know your feelings about this approach.  Thanks.

D3 and jQuery Interoperability

D3 and jQuery utilize distinctly different approaches to node manipulation and internal array storage. However, there are mechanisms available for converting between D3 and jQuery, and vice versa.

D3 and jQuery Internals

Let’s assume the following HTML structure:

Code   
<div class="test-node">Test One</div>
<div class="test-node">Test Two</div>
<div class="test-node">Test Three</div>
<div class="test-node">Test Four</div>

Now let’s retrieve the “test-node” elements with jQuery:

Code   
var testNodes = $(".test-node");
console.log(testNodes);

Console Log

As can be seen above, jQuery stores the selected elements in a first level array, making elements accessible by testNodes[0...3] as expected.  Now let’s examine the D3 equivalent:

Code   
var testNodes = d3.selectAll(".test-node");
console.log(testNodes);

Console Log

When using D3, the selected elements get stored in a second level array making the elements accessible by testNode[0][0...n].

Converting from jQuery to D3

Code   
var $testNodes = $(".test-node");  //jquery
var testNodes = d3.selectAll( $testNodes.toArray() ); //d3
console.log(testNodes);

Console Log

The above first retrieves the nodes using standard jQuery selector syntax.  Next the “toArray()” method is called returning the native array of selected elements.  Finally the “d3.selectAll()” method is invoked using the native array as the argument.  This forces the native element array into the second level array of D3.

Converting from D3 to jQuery

Code   
var testNodes = d3.selectAll(".test-node");
var $testNodes = $(testNodes[0]);
console.log($testNodes);

Console Log

The above first retrieves the nodes using D3 selector syntax.  Next the first level D3 array is used as the argument passed into the jQuery selector.

Class Addition/Removal

Adding and removing a class in jQuery is pretty straightforward:

Code   
$(".test-node").addClass("selected"); //add class "selected"
$(".test-node").removeClass("selected"); //remove class "selected"

The same performed in D3 is performed using the following:

Code   
d3.selectAll(".test-node").classed("selected", true); //add class "selected"
d3.selectAll(".test-node").classed("selected", false); //remove class "selected"

Data/Datum

D3 has a very elegant data system whereby information can be bound to elements by use of the “datum()” method.

D3 Datum

Let’s examine the following:

Code   
var nodes = d3.selectAll(".test-node")
    .datum({key: "hello", value: "world"})
    .append("span");
 
console.log(nodes);

Console Log

The above example selects all of the “.test-node” div classed elements utilizing D3, initializes a data structure/object and passes this structure/object to the “span” elements which get appended to all the matching “.test-node” div classed elements.  This “datum()” method passes the data structure/object to the “span” elements using a property called “__data__”.  As displayed above, the __data__ property has the structure of:

Code   
__data__: {
    key: "hello",
    value: "world"
}

The “__data__” property can be accessed directly using second level array syntax (ie. d3.selectAll(“span”)[0][0...n].__data__) or it can be utilized as a default argument passed into nearly all D3 selector instance methods.  Let’s examine an instance method where this takes place:

Code   
var nodes = d3.selectAll(".test-node")
    .datum({key: "hello", value: "world"})
    .append("span")
    .text(function(d){
        return d.key + " " + d.value;
    });

In the above example, the only difference from the previous example is the instance method “text()”, whereby the argument passed is a function.  This function defines an argument “d” which D3 passes to these type of instance methods automatically.  The “d” argument being the actual data/datum used to initialize the “span” elements.  The body of the text function returns the string “hello world” using the data/datum, thusly setting the text of the “span” elements to “hello world”.

jQuery Data

jQuery has a simple mechanism for adding arbitrary data to elements by use of the “data()” method.  Let’s examine the following:

Code   
var nodes = $(".test-node")
    .append("span")
    .data("datum", {key: "hello", value: "world"});
 
console.log(nodes);
console.log($.cache);

Console Log

In the above example, the “.test-node” elements are retrieved, “span” elements are appended and the datum {key: “hello”, value: “world”} is added to the data.  The console output reveals that the datum is stored in the $.cache in jQuery.

Exchanging D3 Datum with jQuery

Now that we’ve seen how both D3 and jQuery store data/datum, let’s exchange D3 datum with jQuery:

Code   
//D3
var nodes = d3.selectAll(".test-node")
    .datum({key: "hello", value: "world"})
    .append("span");
 
console.log(nodes);
 
//jQuery
var $nodes = $(nodes[0]);
$nodes.each(function(){
    $(this).data("datum", $(this).prop("__data__"));
});
 
console.log($nodes);
console.log($.cache);

Console LogIn this example, we first select the “.test-node” classed elements using D3, append “span” elements using the datum/data specified.  Next, we create a jQuery selector using the first level array of the D3 selector.  Using the jQuery selector, the nodes are iterated over in “each” and the “data()” of the jQuery element is set to the “__data__” property of the D3 element.

Exchanging jQuery Data With D3

Now, let’s exchange jQuery data with D3 using a similar technique to the previous example:

Code   
//jQuery
var $nodes = $(".test-node")
    .append("span")
    .data("datum", {key: "hello", value: "world"});
 
console.log($nodes);
console.log($.cache);
 
//D3
var nodes = d3.selectAll($nodes.toArray())
    .datum({})
    .each(function(d){
        this.__data__ = $(this).data("datum");
    });
 
console.log(nodes);

Console LogIn the above example, the “.test-node” elements are selected using jQuery, the span child elements are appended and the “data()” method is used to store the “datum” {key: “hello”, value: “world”}.  Next, the D3 selector is populated using the “toArray()” method of the jQuery selector, the “datum()” method is used to initialize an empty data object and finally the nodes are iterated over and the __data__ property is populated with the jQuery data “datum”.

Conclusion

Both frameworks are very powerful and can live together in peace.  Information can be exchanged freely between the the two frameworks utilizing these or similar techniques.

Visualizing 3D Network Topologies Using Unity

Network topology visualization can be performed using a wide variety of technologies ranging from simple 2D applications to complex 3D applications.  This approach utilizes the Unity (http://unity3d.com/) game engine to develop a network topology visualization in 3D complete with FPS controls in zero gravity and warp to zones.

Demo

Here’s an example of what the end product will look like: View Demo

Screenshots

Unity Topology Screenshot 4 Unity Topology Screenshot 3 Unity Topology Screenshot 2 Unity Topology Screenshot 1

Source Files

The entire Unity project and source files are available for download: Download Unity Topology Source

Layout File Format

Let’s get started, first a data format (or formats) needs to be chosen for loading the layout or topology data.  For my example I have chosen to use GraphML (http://graphml.graphdrawing.org/) being that Unity in C# directly supports XmlDocument.

The GraphML format I am using will support a collection of <node> and <edge> with standard and custom attributes:

Code   
<node id="node_1" x="0" y="0" z="0" name="156.145.220.128/25" ... />
Code   
<edge id="link_1" source="node_1" target="node_2" ... />

The node defines at the very least the node identifier which will uniquely identify the node in the topology map, the x, y and z which will become our Vector3 coordinates and the name attribute which will become the node label.

The edge defines at the very least the link identifier which will uniquely identify the link in the topology map, the source which identifies the source node of the link and the target which identifies the target node of the link.

Unity Setup

Next let’s define our basic Unity project structure.  Under the Assets folder, create the following subfolders:

  • Data
  • Materials
  • Prefabs
  • Scenes
  • Scripts

Unity - Topology Folders Once we have our basic folder structure setup, let’s create our 2 prefabs we will be using in our project, the Node prefab and the Link prefab.

The Node

Start by creating a new cylinder (GameObject -> Create Other -> Cylinder), size the cylinder down a little to make it look like and adding a Self-Illumin/Diffuse shader.  I made mine blue, however feel free to choose whatever color you wish.  Name the new object “Node”.

Unity - Node

Next add a new script and call it “Node” (Node.cs).  For the script we want to define a basic bit of logic to have our node text always facing the camera and a public string id:

 

Code   
using UnityEngine;
using System.Collections;
 
namespace Topology {
 
    public class Node : MonoBehaviour {
 
        public string id;
        public TextMesh nodeText;
 
        void Update () {
            //node text always facing camera
            nodeText.transform.LookAt (Camera.main.transform);
        }
    }
 
}

Add a 3D Text object (GameObject -> Create Other -> 3D Text), move the 3D Text just below the cylinder and move the 3D Text as a child of the Node object.  Next drag the reference into the Node Text (Text Mesh) property.

Unity - Node Properties

Finally drag the “Node” from the Hierarchy window to the “Assets/Prefabs” folder.  Then remove the “Node” object from the Hierarchy view.

The Link

For the link, create an empty game object (GameObject -> Create Empty), name it “Link” and add a new script called “Link” (Link.cs).  Within the script we’ll expose a few public properties such as id, source_id, target_id, etc; and define a LineRenderer which will be used to draw the line connecting the nodes.

 

 

Code   
using UnityEngine;
using System.Collections;
 
namespace Topology {
 
    public class Link : MonoBehaviour {
 
        public string id;
        public Node source;
        public Node target;
        public string sourceId;
        public string targetId;
        public string status;
        public bool loaded = false;
 
        private LineRenderer lineRenderer;
 
        void Start () {
            lineRenderer = gameObject.AddComponent<LineRenderer>();
 
            //color link according to status
            Color c;
            if (status == "Up")
                c = Color.gray;
            else
                c = Color.red;
            c.a = 0.5f;
 
            //draw line
            lineRenderer.material = new Material (Shader.Find("Self-Illumin/Diffuse"));
            lineRenderer.material.SetColor ("_Color", c);
            lineRenderer.SetWidth(0.3f, 0.3f);
            lineRenderer.SetVertexCount(2);
            lineRenderer.SetPosition(0, new Vector3(0,0,0));
            lineRenderer.SetPosition(1, new Vector3(1,0,0));
        }
 
        void Update () {
            if(source && target && !loaded){
                //draw links as full duplex, half in each direction
                Vector3 m = (target.transform.position - source.transform.position)/2 + source.transform.position;
                lineRenderer.SetPosition(0, source.transform.position);
                lineRenderer.SetPosition(1, m);
 
                loaded = true;
            }
        }
    }
 
}

Being that this script was a bit larger, I’ll walk through what it does.  First, the public properties; the “id” is the link identifier (ie. “link_1″), the “source” will become the source node reference, the “target” will become the target node, the “sourceId” will hold the id of the source node until the “source” property is populated and the same goes for the “targetId”.  The “status” will hold a value of either “Up” or “Down” and will be used to color the LineRenderer.  Within the “Start()” function, we create a new LineRenderer and color it according to the “status” property value setting its initial line positions to vectors (0,0,0) and (1,0,0) respectively.  The “Update()” method waits until the “source” and “target” properties are populated then sets the LineRenderer end points.  The “loaded” property makes sure this only happens once.

Finally drag the “Link” object from the Hierarchy window to the “Assets/Prefabs” folder.  Then remove the “Link” object from the Hierarchy window.

Controller

Add a new empty game object (GameObject -> Create Empty) and name it “GameController”.  Create a new script called “GameController” (GameController.cs).  This script will be responsible for loading the layout file, creating Nodes and Links and handling general UI updates.

 

Code   
using UnityEngine;
using System.Collections;
using System.Xml;
using System.IO;
 
namespace Topology {
 
    public class GameController : MonoBehaviour {
 
        public Node nodePrefab;
        public Link linkPrefab;
 
        private Hashtable nodes;
        private Hashtable links;
        private GUIText statusText;
        private int nodeCount = 0;
        private int linkCount = 0;
        private GUIText nodeCountText;
        private GUIText linkCountText;
 
        //Method for loading the GraphML layout file
        private IEnumerator LoadLayout(){
 
            string sourceFile = Application.dataPath + "/Data/layout.xml";
            statusText.text = "Loading file: " + sourceFile;
 
            //determine which platform to load for
            string xml = null;
            if(Application.isWebPlayer){
                WWW www = new WWW (sourceFile);
                yield return www;
                xml = www.text;
            }
            else{
                StreamReader sr = new StreamReader(sourceFile);
                xml = sr.ReadToEnd();
                sr.Close();
            }
 
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.LoadXml(xml);
 
            statusText.text = "Loading Topology";
 
            int scale = 2;
 
            XmlElement root = xmlDoc.FirstChild as XmlElement;
            for(int i=0; i<root.ChildNodes.Count; i++){
                XmlElement xmlGraph = root.ChildNodes[i] as XmlElement;
 
                for(int j=0; j<xmlGraph.ChildNodes.Count; j++){
                    XmlElement xmlNode = xmlGraph.ChildNodes[j] as XmlElement;
 
                    //create nodes
                    if(xmlNode.Name == "node"){
                        float x = float.Parse(xmlNode.Attributes["x"].Value)/scale;
                        float y = float.Parse (xmlNode.Attributes["y"].Value)/scale;
                        float z = float.Parse(xmlNode.Attributes["z"].Value)/scale;
 
                        Node nodeObject = Instantiate(nodePrefab, new Vector3(x,y,z), Quaternion.identity) as Node;
                        nodeObject.nodeText.text = xmlNode.Attributes["name"].Value;
 
                        nodeObject.id = xmlNode.Attributes["id"].Value;
                        nodes.Add(nodeObject.id, nodeObject);
 
                        statusText.text = "Loading Topology: Node " + nodeObject.id;
                        nodeCount++;
                        nodeCountText.text = "Nodes: " + nodeCount;
                    }
 
                    //create links
                    if(xmlNode.Name == "edge"){
                        Link linkObject = Instantiate(linkPrefab, new Vector3(0,0,0), Quaternion.identity) as Link;
                        linkObject.id = xmlNode.Attributes["id"].Value;
                        linkObject.sourceId = xmlNode.Attributes["source"].Value;
                        linkObject.targetId = xmlNode.Attributes["target"].Value;
                        linkObject.status = xmlNode.Attributes["status"].Value;
                        links.Add(linkObject.id, linkObject);
 
                        statusText.text = "Loading Topology: Edge " + linkObject.id;
                        linkCount++;
                        linkCountText.text = "Edges: " + linkCount;
                    }
 
                    //every 100 cycles return control to unity
                    if(j % 100 == 0)
                        yield return true;
                }
            }
 
            //map node edges
            MapLinkNodes();
 
            statusText.text = "";
        }
 
        //Method for mapping links to nodes
        private void MapLinkNodes(){
            foreach(string key in links.Keys){
                Link link = links[key] as Link;
                link.source = nodes[link.sourceId] as Node;
                link.target = nodes[link.targetId] as Node;
            }
        }
 
        void Start () {
            nodes = new Hashtable();
            links = new Hashtable();
 
            //initial stats
            nodeCountText = GameObject.Find("NodeCount").guiText;
            nodeCountText.text = "Nodes: 0";
            linkCountText = GameObject.Find("LinkCount").guiText;
            linkCountText.text = "Edges: 0";
            statusText = GameObject.Find("StatusText").guiText;
            statusText.text = "";
 
            StartCoroutine( LoadLayout() );
        }
 
    }
 
}

So now time for the walk through.  The 2 public properties nodePrefab and linkPrefab define the prefabs to be used when creating nodes and links.  The 2 Hastables, nodes and links define the collection which will hold the live instances of the prefabs “Node” and “Link”.  The GUIText objects will reference the loading status displayed on the screen, the count of nodes and the count of links.  The nodeCount and linkCount hold the actual numeric values for the count of nodes and links.  The “LoadLayout()” method handles the loading of the GraphML file, it loads the xml file into a string, populates an XmlDocument object and iterates over the <node/> and <edge/> elements.  When a <node /> is encountered we instantiate a Node object and populate its members and same goes for <edge /> with respect to populating a Link.  Once all the “Node” and “Link” objects have been created, the “source” and “target” members of the “Link” object are replaced with the living references of “Node” through the call to “MapLinkNodes()”.  The “Start()” method instantiates the nodes and links Hastables, resets the GUIText objects and starts a coroutine call to “LoadLayout()” which allows for returning control back to the Unity platform and preventing UI lock up.

Next, lets’ add the GUIText objects.  Create a GUIText object for LinkCount, NodeCount and StatusText at a minimum.  Next place the GUIText objects in the Game view to their relative positions.

Unity - Game View

Make these GUIText objects a child of GameController and add drag the references to the GameController script references.

Unity - GameController Hierarchy

Unity - GameController

 Camera

Click on the Main Camera object and add a new script “CameraController” (CameraController.cs).  In this script we’ll add basic controls for WASD, Control, Space and Wheel/Scroll controls.

 

Code   
using UnityEngine;
using System.Collections;
 
[AddComponentMenu("Camera-Control/Move ZeroG")]
public class CameraControlZeroG : MonoBehaviour {
 
    public float speed = 5f;
    public GUIText movementSpeed;
 
    private Vector3 move = new Vector3();
    private Vector3 cluster1 = new Vector3(1960, 1791, 2726);
    private Vector3 cluster2 = new Vector3(2042, 1579, 4254);
    private Vector3 cluster3 = new Vector3(2692, 81, 2526);
    private Vector3 cluster4 = new Vector3(531, 2317, 3776);
    private Vector3 cluster5 = new Vector3(-587, 2043, 2194);
 
    void Start(){
        //set to first cluster position
        transform.position = cluster1;
    }
 
    void Update () {
        move.x = Input.GetAxis("Horizontal") * speed * Time.deltaTime;
        move.z = Input.GetAxis("Vertical") * speed * Time.deltaTime;
 
        move.y = 0;
        if (Input.GetKey ("space")) {
            move.y = speed * Time.deltaTime;
        }
 
        if (Input.GetKey ("left ctrl")) {
            move.y = -speed * Time.deltaTime;
        }
 
        //adjust speed with mouse wheel
        speed += Input.GetAxis("Mouse ScrollWheel");
        if (speed < 5)
            speed = 5;
 
        movementSpeed.text = "Move Speed: " + speed;
 
        move = transform.TransformDirection(move);
        transform.position += move;
 
        //set warp to cluster controls
        if(Input.GetKey("1")){
            transform.position = cluster1;
        }
 
        if(Input.GetKey("2")){
            transform.position = cluster2;
        }
 
        if(Input.GetKey("3")){
            transform.position = cluster3;
        }
 
        if(Input.GetKey("4")){
            transform.position = cluster4;
        }
 
        if(Input.GetKey("5")){
            transform.position = cluster5;
        }
    }
}

Walking through the above code, we define 2 public properties, speed which will hold the speed of movement through the zero gravity environment and GUIText movementSpeed which displays our current movement speed.  Next we define a Vector3 for move which will be used as the movement vector.  The following cluster[1-5] members define areas of the Topology which we’ll allow the camera to quickly jump to, feel free to replace these with your own coordinates.  The “Start()” function places our camera at the first cluster position (the largest cluster).  The “Update()” function first updates the move vector to move the camera in a direction.  The “space” check will change our “y” movement upward.  The “left ctrl” changes our “y” movement downward.  The “Mouse ScrollWheel” changes our overall movement speed, then we display the speed in the GUIText.  The final modifications are made to the camera’s transform position.  The GetKey() calls for 1 through 5 warp our camera to the cluster[1-5] positions.

We’ll also want to import a standard asset from the Unity “Character Controller” set.  Click Assets -> Import Package -> Character Controller, deselect everything, then online select “MouseLook.cs”.

Unity - Import Asset

 

This will import the “MouseLook.cs” script which we’ll need to add to the Main Camera (Add Component -> Camera-Control -> Mouse Look).

Putting It All Together

Lastly, build, deploy and check it out.  One thing to keep in mind is that the layout.xml in the Data directory (/Assets/Data/layout.xml) does not get deployed with the build.  You will need to manually copy this file out to your build/deploy directory.  Hopefully you won’t have any errors and will be able to view the 3D topology in all of its beauty and splendor.  Have fun!

Edit Over SSH Using Any Locally Installed Editor

Ever find yourself needing to edit remotely over SSH and just wish you could use your favorite locally installed editor?  Yeah VI and EMACS are great, but sometimes don’t you just wish you could have your full workspace open without having to SCP/FTP files around.  Well, you can and here’s how you do it.

Mac/Linux Instructions:

Install the sshfs client according to your specific Linux version

CentOS/Fedora

root@computer:$ yum install sshfs

Debian

root@computer:$ apt-get install sshfs

Mac OS X

This command assumes that you have MacPorts installed. If you do not, install from here: Install MacPorts

user@computer:$ sudo port install sshfs

 

Next create a directory which will be used to access the remote files:

root@computer:$ mkdir remote_files

 

Finally mount the remote server and directory to our local directory “remote_files” replacing “username”, “remote-server” and “some-directory” with your real world values.  This syntax is very similar to that used by scp:

root@computer:$ sshfs username@remote-server:/some-directory remote_files

 

Assuming that the credentials supplied to the sshfs command were correct, you should now have a remotely mounted drive by the name of “remote_files”.

Now open your favorite editor and browse to “remote_files”, all your remote files are available to you as if they were local.  Code on!

Windows Instructions:

Begin by downloading win-sshfs at: https://code.google.com/p/win-sshfs/downloads/list

Install and be aware that a reboot may be required (you may want to bookmark this page so you can get back to it after the reboot).  You can just leave the default install options the way they are.

After it has been fully installed and your machine possibly rebooted, lauch wins-sshfs if it hasn’t been launched already.  Next click on the wins-sshfs icon in the task tray.

wins-ssh tray

Next you’ll be presented with a dialog, click the “Add” button and fill out the details of the remote server to connect to.  Ensure you select the correct Drive Letter to use for this remote connection.

wins-ssh-window-1

Next click “Save”, then click “Mount”.

Assuming you didn’t have any credential errors you will have a newly mapped drive available to you.  Open your favorite editor and begin editing remote files on the drive like they are local.  Code On!

Create jQuery Plugins: The Easy Way

If you’re a solid user of jQuery or just a tinkerer you may have thought to yourself “I have a great idea for a jQuery plugin”.  Your next steps of course would probably be to look at the jQuery documentation and eventually to have a look at someone else’s jQuery plugin source code.  In doing so you may have said to yourself or aloud “From what depths of perdition hath this code been spawned!”  I’ve seen quite a few jQuery plugin source files and they are, how do I put this delicately…written like crap a lot of the time.  Truth is, there’s an easy and elegant way to build jQuery plugins.

Let’s start with a simple example.  Let’s say you want to build a plugin that changes the color of all the nodes referenced by a selector.  In other words $(“.make-me-red”).red(); a very simple approach with the plugin actually called “red”.  Here’s the code:

Some simple HTML

Code   
<div class="make-me-red">One</div>
<div class="make-me-red">Two</div>
<div class="make-me-red">Three</div>

 

The jQuery plugin code

Code   
$.fn.red = function(){
    $(this).css("color", "red");
}

 

Invoke the plugin

Code   
$(function(){
    $(".make-me-red").red();
});

 

Yes, yes, magical…I know.  That’s all there really is to it, let’s walk through the plugin code.  The “$” or “jQuery” reference has an object called “fn”, functions bound to this object are accessible from the returned selector array.  The “this” variable referenced in the function body contains all the elements matching the selector at the time of the call.  The “css()” method call applies the style attribute with color=”red” to all matching selector elements.  Easy peasy, now let’s try something a bit more useful.

Let’s create a jQuery plugin that makes use of options being passed in and performs something semi-useful, not too useful, just semi-useful.  Check it out:

Some simple HTML

Code   
<div class="make-me-move">Hi There!</div>

 

The jQuery Plugin Code

Code   
$.fn.jiggle = function(options){
 
    //setup default options
    var defaultOptions = {
        duration: 500,
        amount: 10
    };
 
    //apply passed in options to default options
    options = $.extend(defaultOptions, options);
 
    //divide the time into fourths
    var d = options.duration/4;
 
    //animate the element
    $(this)
        .css("position", "relative")
        .animate({left: -options.amount}, d)
        .animate({left: -options.amount}, d)
        .animate({left: -options.amount}, d)
        .animate({left: -options.amount}, d)
        .animate({left: 0}, d);
}

 

Invoke the plugin

Code   
$(function(){
    $(".make-me-move").jiggle();
});

 

Now that was a bit more complex, let’s walk through it.  This plugin is called “jiggle”, wonder why.  The first change here is the options variable being passed in.  This variable allows the plugin to be configurable from the calling code.  In this instance we have exposed the duration (in milliseconds) and the amount (movement).  The first thing we do is set default values to handle the case that the calling code does not pass anything, this is the purpose of the “defaultOptions”.  Next we make a call to $.extend to override any default values passed into the plugin from the calling code by way of “options”.  We then set options to the merged result of “defaultOptions” and “options” (where “options” overrides “defaultOptions”), that way we have a single reference to all the values we will use.  Finally, we animate the elements by changing the css position and making subsequent calls to the animate method.  Now let’s invoke the same call again with custom values passed in by way of “options”

Code   
$(function(){
    $(".make-me-move").jiggle({
        duration: 1000
    });
});

 

Implementing options the way we have in our plugin code allows us to optionally (pun intended) pass some, all or none of the values into the calling code.  With this example we have set the duration to 1 second (1000 milliseconds).  Simple.

Hopefully this quick start will help propel you into the halls of fame in the jQuery plugin community, and if not, that’s cool too :)  Thanks for reading.

Understanding JavaScript Promises In jQuery

You may or may not have heard the new buzz about promises being introduced into JavaScript and if you don’t know what they are, you’re not alone.  I’ll attempt to explain what they are and why you should or maybe shouldn’t care about them.  First let’s understand what promises are.

Promise defined: “The Promise interface represents a proxy for a value not necessarily known at its creation time. It allows you to associate handlers to an asynchronous action’s eventual success or failure. This let asynchronous methods to return values like synchronous methods: instead of the final value, the asynchronous method returns a promise of having a value at some point in the future.”

Basically, it allows you to setup chaining for a value or values and determine a functional response.  For example, let’s say you need to get two values from two separate AJAX calls, but you don’t want to proceed unless both have loaded correctly and if either fails, you want to bail out of the entire thing.  Although not an optimum approach, this will serve as a more or less real world problem.  Consider the following code:

 

Code   
var first_call = false;
var second_call = false;
 
//make the first call
$.ajax({
    url: "/some/page",
    success: function(data){
    //set a success variable
    first_call = true;
});
 
//make the second call
$.ajax({
    url: "/some/other-page",
    success: function(data){
    //set a success variable
    second_call = true;
});
 
if(first_call && second_call){
    //we're good to go - do something
}
else{
    //ruh roh - bail out!
}

 

Now obviously, the above code isn’t fantastic but it will suit our needs for now.  Let’s walk through it.  The first ajax call if successful sets the first_call variable to true and the same goes for the second.  If all is good, we can proceed and do what we need to, otherwise we execute our bail out code.  So now let’s check out the same functional code executed with promises:

Code   
$.when( $.ajax("/some/page"), $.ajax("/some/other-page") )
    .done(function(first_call, second_call){
        //we're good to go - do something
    })
    .fail(function(){
        //ruh roh - bail out!
    });

So, looking at this latest example we see not only is the code much more compact, but now we can chain even more calls together, no use of outside variables for state checking and still we end up in the same place.  This is the power that promises provide you.  In the above example, we have implemented jQuery’s $.when call which will take a list of operations as the arguments.  For each operation, it will return the value into the done() function as the ordered arguments (ie. done(first_call_data, second_call_data, …)).  If a failure occurs for any of the calls, the fail() method is invoked where we can make use of our bail code and either try again, display an error message, etc.  If we wanted to add more calls to this promise we would do so by adding them directly to the when() function and creating the corresponding argument in the done() method.

Code   
$.when(
    $.ajax("/some/page"),
    $.ajax("/some/other-page"),
    $.ajax("/some/other-other-page"),
    $.ajax("/and/so/on")
    )
    .done(function(first_call, second_call, third_call, fourth_call){
        //we're good to go - do something
    })
    .fail(function(){
        //ruh roh - bail out!
    });

We can continue to chain $.when calls together to simply an otherwise complex system of dependencies.  Promises also provide us with a way of implementing our own custom promise behavior by taking advantage of methods such as .reject() .resolve() and .state().  However, this is a bit beyond the scope of this article.  For more information regarding jQuery promises have a look at:

Promise - http://api.jquery.com/promise/

Deferred Object - http://api.jquery.com/category/deferred-object/

JavaScript Worker Threads

Ever find yourself needing to do some number crunching, or create an off time rendering hook or perhaps just needing to create a separate thread for some other purpose, this is how you do it.  First things first, we need to create a separate javascript file which will house our thread execution code.  In this example, let’s create a file called “thread.js” and add the following:

Code   
function Thread(){
    var _ref = this;
    var _running = null;
 
    _ref.start = function(){
 
        //execution code
        function execute(){
            self.postMessage({
                cmd: "console.log",
                value: "Execute called..."
            });
        }
 
        _running = setInterval(execute, 1000);
    }
 
    _ref.stop = function(){
        clearInterval(_running);
    }
}
 
var thread = new Thread();
 
self.onmessage = function(e){
    thread[e.data.cmd](e.data.args);
}

So here’s what happening in this file.  We’ve created a class called “Thread” and created public methods “start” and “stop”.  Just for an example of functionality we’ve added an execute method loop which is invoked by a setInterval call every second (1000ms).  The “_running” variable is assigned the interval handle and cleared when the “stop” method is called.  Within the “execute” method the postMessage method is called which sends the message over the wall to our main execution script which we will detail below.  Lastly, we create an instance of the Thread class and create an “onmessage” handler to deal with incoming messages sent to our Thread class from over the wall in our main execution script.  Here, the Thread instance variable is invoked with the “cmd” parameter as the method and the “args” parameter as the arguments passed to the invoked method.  So here’s the main execution script that we will use to create an instance of the thread:

 

Code   
//create a worker thread
var worker = new Worker("thread.js");
 
//handle messages sent from Thread
worker.onmessage = function(e){
    switch(e.data.cmd){
        case "console.log":
            console.log(e.data.value);
            break;
    }
}
 
//start the Thread
worker.postMessage({cmd: "start"});
 
//stop the Thread after 5 seconds
setInterval(function(){
    worker.postMessage({cmd: "stop"});
}, 5000);

 

So let’s walk through the main script.  We create a instance of the “Worker” class and pass in the script we are going to use as our worker thread, in this case “thread.js”.  Next we setup an onmessage handler to receive messages sent from within our Thread.  Next we send a message with the cmd parameter set to start which over the wall evaluates to “thread.start()”.  Lastly, we setup an interval callback to be invoked after 5 seconds (5000ms) to stop the Thread.  Pie, right?  So now what if we want to add a method to the Thread class that takes in parameters and sends a value back to our main script…let’s do it:

Code   
function Thread(){
 
    //existing code omitted here...
 
    _ref.foo = function(args){
        self.postMessage({cmd: "console.log", value: args});
    }
}

So now we’ve added the method “foo” with arguments “args” and in turn we post a message back over the wall to the main script returning the “args” passed in as the value.  Now, let’s add the code to invoke it within our main script:

Code   
//existing code omitted here...
 
worker.postMessage({cmd: "foo", args: "bar"});

All we’ve done here is add another “postMessage” call with a “cmd” parameter of “foo” and an “args” parameter of “bar” which evaluates to “thread.foo(‘bar’)” on the other side of the wall within our Thread class.

D3 Drag And Drop

Implementing drag and drop in D3 (http://d3js.org/) is a pretty simple task when you know how to do it, the following is a walkthrough from setup to execution and the events along the way.

First thing we are going to want to do is setup our drag behavior.  This is the object that will be responsible for handling the actual drag and drop, events and will be added to the call chain of the objects of which we want to allow the drag and drop behavior.

Code   
var drag = d3.behavior.drag();

The above statement initializes a new instance of the drag behavior.  We can use it to bind this behavior to the call chain of other objects.  Let’s assume we want to allow all nodes having class “draggable” to have this drag and drop behavior.  To do this we simply add the drag behavior we just instantiated to the call chain of the objects:

Code   
var drag = d3.behavior.drag();
d3.selectAll(".draggable").call(drag);

It’s that simple, now all objects containing the “draggable” class will now have this behavior.  But what if we need to do something a bit more complex?  What if we need to have other things happen along the way, update other areas during a drag, initialize or change variables on start and end drag.

Code   
var drag = d3.behavior.drag()
    .on("dragstart", function(){
        //do some drag start stuff...
    })
    .on("drag", function(){
        //hey we're dragging, let's update some stuff
    })
    .on("dragend", function(){
        //we're done, end some stuff
    });

As you would expect, each on(…) call defines a hook into the event chain of the drag behavior allowing you to customize the behavior as you see fit.

Quick Start Embedding Lua In C++

Lua is a pretty straight forward simple scripting language that can be implemented in a number of languages.  Today I’m going to show you how easy it is to embed Lua in C++.  First thing you’re going to need to do is create a sane build environment by installing the Lua programming language and development packages.  Depending on the OS and version you are using this can vary, for simplicity sake I’m going to assume your using linux with RPM support and I’ll be using the 5.1 version of Lua.

First let’s download and install the Lua packages:
(Please note these are the 64-bit library versions, you may need a different version depending on your distro and architecture)

user@computer:$ cd /usr/src
user@computer:$ wget http://dl.fedoraproject.org/pub/epel/5/x86_64/lua-5.1.4-4.el5.x86_64.rpm wget http://dl.fedoraproject.org/pub/epel/5/x86_64/lua-devel-5.1.4-4.el5.x86_64.rpm
user@computer:$ rpm -i lua-5.1.4-4.el5.x86_64.rpm lua-devel-5.1.4-4.el5.x86_64.rpm

 

Next let’s create a host application to execute our Lua code:

user@computer:$ mkdir lua-host
user@computer:$ cd lua-host

 

Create a lua-host.cpp file and add the following contents:

Code   
extern "C" {
    #include "lua.h"
    #include "lauxlib.h"
    #include "lualib.h"
}
 
#include "stdio.h"
 
int main(int argc, char ** argv){
 
    //iterate all files and execute
    for(int n=1; n<argc; n++){
        const char * file = argv[n];
 
        //create a new lua state
        lua_State * L = luaL_newstate();
 
        //open all libraries
        luaL_openlibs(L);
 
        int s = luaL_loadfile(L, file);
 
        if(!s)
            s = lua_pcall(L, 0, LUA_MULTRET, 0);
 
        //show any errors
        if(s){
            printf("Error: %s \n", lua_tostring(L, -1));
            lua_pop(L, 1);
        }
 
        lua_close(L);
    }
 
    return 0;
}

Now let’s examine the above C++ code.  The first thing we do is iterate over the passed in arguments in this case expected to be file names (ie. ./lua-host test.lua). For each passed in file we create a new state or context for the execution of the Lua script files.  Next we make a call to openlibs which allows access to all the standard Lua libraries from the passed in files.  Next, we check the return value of the loadfile call to ensure everything is still a go, then we invoke pcall which executes the chunk of code contained within the file.  Lastly, we check for any errors that might have occurred and display them, then close that instance of the Lua state.  Wash, rinse, repeat for all the files passed in along the command line.

Now, let’s go ahead and compile the lua-host application.

user@computer:$ g++ lua-host.cpp -o lua-host -llua

 

Hopefully if all when well and you are sans typos, you should now have a shiny new lua-host executable at your disposal. So next, let’s test it.

Start by creating a simple “Hello World” script in Lua, create a new file called “hello_world.lua” and put the following in it:

Code   
print("Lua says: Hello World")

 

Next, let’s execute the “hello_world.lua” file against our new host application:

user@computer:$ ./lua-host hello_world.lua

 

You should receive the following:

user@computer:$ ./lua-host hello_world.lua
Lua says: Hello World

Booyah! Well that was easy. Now how about adding a custom function in C++ that can be make callable from Lua. This is actually very simple as well.

Let’s modify our “lua-host.cpp” file and add a custom method called “hello”:

Code   
extern "C" {
    #include "lua.h"
    #include "lauxlib.h"
    #include "lualib.h"
}
 
#include "stdio.h"
 
//new custom hello method
int hello(lua_State * L){
    printf("C++ says: Hello World\n");
 
    return 1;
}
 
int main(int argc, char ** argv){
 
    //iterate all files and execute
    for(int n=1; n<argc; n++){
        const char * file = argv[n];
 
        //create a new lua state
        lua_State * L = luaL_newstate();
 
        //open all libraries
        luaL_openlibs(L);
 
        //register new custom method
        lua_register(L, "hello", hello);
 
        int s = luaL_loadfile(L, file);
 
        if(!s)
            s = lua_pcall(L, 0, LUA_MULTRET, 0);
 
        //show any errors
        if(s){
            printf("Error: %s \n", lua_tostring(L, -1));
            lua_pop(L, 1);
        }
 
        lua_close(L);
    }
 
    return 0;
}

So what did we just do? We defined a new “hello” method and had it’s implementation just do a printf of “C++ says: Hello World”, then in the body of the main method we added a call to lua_register(L, “hello”, hello), which as you might have guessed registers the “hello” method as “hello” in Lua. This simply maps the hello() Lua call to the C++ hello method.

Now let’s compile it:

user@computer:$ g++ lua-host.cpp -o lua-host -llua

Hopefully once again no typos. Next, let’s update the “hello_world.lua” and add a call to the new C++ “hello” method.

Edit the “hello_world.lua” file and ensure it has the following:

Code   
print("Lua says: Hello World")
hello()

Now that we have the new “hello” method call added to our Lua script, let’s execute it in our host application:

user@computer:$ ./lua-host hello_world.lua
Lua says: Hello World
C++ says: Hello World

Booyah part 2! Now we’ve successfully added a custom method to our Lua host application. I think the last thing we should do is make the custom method a bit more intelligent. Let’s add parameters to the function and a return value.

Once again edit the “lua-host.cpp” file and modify to the following:

Code   
extern "C" {
    #include "lua.h"
    #include "lauxlib.h"
    #include "lualib.h"
}
 
#include "stdio.h"
 
//new custom hello method
int hello(lua_State * L){
    printf("C++ says: Hello World\n");
 
    //get the count of arguments passed to the hello function
    int argc = lua_gettop(L);
 
    //iterate the arguments as display them
    for(int n=1; n<=argc; ++n)
        printf("argument received - index: %d - value: %s\n", n, lua_tostring(L, n));
 
    //let's return a value - it's the answer to the universe
    lua_pushnumber(L, 42);
 
    return 1;
}
 
int main(int argc, char ** argv){
 
    //iterate all files and execute
    for(int n=1; n<argc; n++){
        const char * file = argv[n];
 
        //create a new lua state
        lua_State * L = luaL_newstate();
 
        //open all libraries
        luaL_openlibs(L);
 
        //register new custom method
        lua_register(L, "hello", hello);
 
        int s = luaL_loadfile(L, file);
 
        if(!s)
            s = lua_pcall(L, 0, LUA_MULTRET, 0);
 
        //show any errors
        if(s){
            printf("Error: %s \n", lua_tostring(L, -1));
            lua_pop(L, 1);
        }
 
        lua_close(L);
    }
 
    return 0;
}

 

Now let’s compile it:

user@computer:$ g++ lua-host.cpp -o lua-host -llua

Finally, let’s add some parameters to our “hello” call in Lua and check the return value.

Edit the “hello_world.lua” file and ensure it has the following:

Code   
print("Lua says: Hello World")
r = hello("booyah!", "biscuits!")
print("The value returned from the hello call was: ", r)

So we’ve added two parameters to our C++ “hello” call, “booyah!” and “biscuits!”. We’re also storing the return value in the variable “r” and displaying it by way of the print() call. Now, let’s run it and see what we get:

user@computer:$ ./lua-host hello_world.lua
Lua says: Hello World
C++ says: Hello World
argument received - index: 1 - value: booyah!
argument received - index: 2 - value: biscuits!
The value returned from the hello call was: 42

Perfection is the key! Hopefully that wasn’t too confusing and will help you get started in implementing Lua into your applications. Let me know if you have any issues or questions in the comments below.

Web Development – Pushing The Change Forward Now

For years web developers have been forced to cater to the lowest denominator, this usually being the most featureless non-compliant browser available.  With web compliant standards available to the public and a consortium of propeller heads to keep these standards in check, I believe it’s time for a change.  As web developers I think it’s time that we no longer develop for the weakest, I think it’s time we develop for the strongest most feature rich browser(s) out there and don’t look back at browsers that take it upon themselves to go off on their own direction or that don’t want to evolve with the times.  For too long developers have been forced to implement terrible code just to make the site somewhat presentable on horrific browsers.  I say from this point forward we develop for the the strongest browser and force non-compliant browsers to either catch up or get out of the game, enough is enough (yeah…I’m looking at you Microsoft).

I know in hearing this there are some that will say the same ‘ol same “Well, our company is standardized on browser (x) and we can’t change…blah blah blah”.  In this case, the problem isn’t the browser, it’s your director or
CTO that needs to be changed.  Changed with a person who has windows in his/her office and can look outside and realize “Oh hey, it’s not the 90′s anymore”.  People, do not standardize on old browsers, it is the most ridiculous thing you can do.  I’ve also heard the argument of “Well…we are standardized on this browser because it’s secure and…blah blah blah”.  No!  It isn’t, updates to browsers exist for a reason, because security flaws get found and fixed.  Update all of your browsers to the latest version or close to it, do the research, do your job.

If we all only developed for what we believed the strongest browser to be (In my case it’s Google Chrome, for more reasons than I can count) the other browsers would be forced to catch up and be compliant, otherwise people wouldn’t use them…unless for some reason they are mentally deficient.  But that is beside the point, build for the future, not the past.  It’s time to start forcing the hand of these companies, we are web developers, we are innovators, we are the future of connectedness and it’s time to start moving forward.