Javascript

chartist-js

Chartist JS – Simple Responsive Charts

If you are looking for a simple and easy to use responsive chart solution. Chartist JS may be exactly what you are looking for. Chartist JS was created by a community of developers who were unhappy with the current charting systems available today, so you know it’s gotta be good :)

Using Chartist JS is very simple. After you include the library in your project you can easily create bar charts, pie charts, line charts, and so much more. Checkout just how easy it is to create a simple bar chart below:

// Create a simple bar chart
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [5, 2, 4, 2, 0]
  ]
};
 
// In the global name space Chartist we call the Bar function to initialize a bar chart. As a first parameter we pass in a selector where we would like to get our chart created and as a second parameter we pass our data object.
Chartist.Bar('.ct-chart', data);

So, be sure to checkout this library if you are looking for a quick and easy solution for great responsive charts. http://gionkunz.github.io/chartist-js/

ninja-media-script

Ninja Media Script

Well, it’s been awhile since I’ve written a post. I hope to get back into my daily post routine :) In the meantime I’ve been fairly busy creating some new scripts and learning some new technologies. One of the latest scripts that I’ve written was a Viral Media Script that’s available on CodeCanyon. Feel free to check it out here.

The response has been great so far, I am reaching nearly 250 sales within the first couple months. It’s great to be able to continue to work on something that people care about. Whenever I’m working on updates during the weekend it’s a great feeling to know that I have users who are looking forward to these updates.

The script was built using Laravel 4 framework, Bootstrap 3, FontAwesome4, and jQuery.

Here are some of the screenshots of the script below:

ninja-media-script-screenshot-1 ninja-media-script-screenshot-2 ninja-media-script-screenshot-3

Be sure to check it out on the Envato page here: http://codecanyon.net/item/ninja-media-script/6822888

And I look forward to hearing your feedback :)

Detect if your browser supports WebSockets

WebSockets are great for creating a bi-directional connection between the server and the client. It’s also great for making some awesome real-time and interactive web apps. The only downfall with WebSockets is that they are not supported by all browsers. So, when the browser does not support WebSockets what do you do from there. Well, you can always use the Socket.IO library for resorting to long-polling if a browser does not support websockets. Here is an excellent resource for seeing which current browsers support WebSockets: http://caniuse.com/websockets

Unfortunately, when falling back to long-polling you may experience some server bottlenecks, because long polling on a lot of concurrent connections can be highly resource intensive.

So, maybe you just need a way to test and see if a browser supports websockets. Well, here is a simple example of how you can detect if WebSockets are supported in Javascript:

    if(window.WebSocket){
        // This browser supports websockets
    } else {
        // This browser does not support websockets
    }

Checkout a demo here

Below is the code used in the demo. Feel free to use it as you wish

<!DOCTYPE html>
<html>
<head>
 
</head>
<body style="text-align:center">
	<h2>Testing if your browser supports WebSockets</h2>
	<div id="supported"></div>
	<script type="text/javascript">
		var message = "WebSockets are not supported";
		if(window.WebSocket){
			message = "WebSockets are supported on your browser";
		}
 
		document.getElementById('supported').innerHTML = message;
	</script>
</body>
</html>

jQuery Tilt-Shift Effect on Images

Tilt-shift Photography is the use of camera movements most often used to create a selective focus or blur effect. You can think of the Tilt-shift effect similar to the blur effect used in Instagram. Take a look at the image below for an example of this effect.

Adding this effect on images of your website can be done easily using the Tilt-Shift jQuery Plug-in written by Noel Tock. Currently this awesome plug-in only works with Chrome and Safari 6, so be sure you are using one of those browsers. Simply add the library to your project and call $(‘.class_name’).tiltShift(); in your document ready function, and you are good to Go!

Be sure to head over to the demo page and give this plug-in a try or click on the image below to be taken to the demo.

Simple Chat with Node JS and Socket IO

So, I finally released my first tutorial on the Envato network called, ‘Simple Chat with Node JS and Socket IO’. So, if you are looking for an easy chat solution or possibly looking into learning more about Node JS or Socket IO, then this tutorial is for you. Be sure to head over to the tutsplus marketplace and buy my new video tutorial.

The tutorial contains 3 short videos containing about an hour of video walk-through and explanation. After completing the video series you will have created your very own web chat system.

The design and HTML elements are very basic. It was designed this way so that the chat system is easily customizable. You can take a look at the video preview below to see what we will be creating throughout this tutorial sequence:

If you are interested in checking out this full tutorial head on over to http://marketplace.tutsplus.com/item/simple-chat-with-node-js-and-socket-io/2616470 and purchase the video series tutorial for only $7. Feel free to leave some comments in this post or on the product page ;)

What is Socket.io?

In order to understand exactly what the socket.io project is and what it does, I think it is first important to understand WebSockets. WebSockets are a new HTML5 standard and web technology that allows bi-directional communication over a client/server connection. Usually the traditional way a client (user) communicates with the server is by opening a connection and then sending some data to the server and then the connection is closed. Well, with websockets a connection is always open, this allows the client and the server to talk back and forth with each other. This in return unlocks some amazing potential for developers to create some awesome real-time web apps, games, chats, analytics, and so much more. So, hopefully that clarifies enough about WebSockets.

Now, since WebSockets are fairly new to the web world, there are a lot of old browsers that do not support the new technology. That is where the socket.io library/project comes in to save the day. Socket.io is a node package that makes websockets and bi-directional communication between client/server compatible across all JavaScript enabled browsers.

That’s it… It’s simple enough. I may have been a little intimidated when I first started working with Socket IO, but after I started getting rolling I realized it was not that difficult and then I really started having fun with it ;) So, I would encourage anyone who may seem a little intimidated by NodeJS or WebSockets not to be. You just got to dive in, and once you do… It’s so much better than you would have guessed!

Resources:
WebSockets on Wikipedia
NodeJS Website
Socket IO Website

Keeping your Node Server running Forever

Yeah, it’s really cool that you can start your node server from a terminal window by typing ‘node server.js’, but then you close the terminal or disconnect and your node server is no longer running… Well, wouldn’t it be great if you were able to keep your Node servers running forever? That’s exactly what you can do with the tool ‘Forever’.

Forever is super easy to install:

$ [sudo] npm install forever

You may want to add this globally by adding ‘-g’ at the end of that command.

So, after you have installed forever, you can simply get a Node JS server running forever by typing:

$ forever start server.js

And just like that your server.js Node will be running forever. You can easily list out all your servers that are running with the following command:

$ forever list
  0 server.js [ 24611, 24596 ]

The command will list the current index, server file, and the process ID’s.

Then to stop the server you would simply enter:

$ forever stop 0
Forever stopped process:
  0 server.js [ 24611, 24596 ]

By passing in the index of the current running server, ‘Forever’ will stop that server.

And there you go! It’s as simple as that. You can checkout the github repot for full documentation at: https://github.com/nodejitsu/forever/

Additionally for a great article about the Forever CLI tool, checkout NodeJitsu’s article on keeping a node JS server up with forever.

What is NPM?

When getting started with Node JS you may hear the term NPM being used often (usually lowercase ‘npm’). What exactly is it and how can you use it?

Well… npm stands for Node Package Manager and it is an online repository for open source Node.JS projects. This repository is used to store and retrieve Node Packages, such as SocketIO, RequireJS, and many other open source Node projects. You can search through the directory at: http://search.npmjs.org/

Adding a node package to your node project is as simple as opening up a terminal command, navigating to a directory, and then typing ‘npm install package_name’. You’ll have to install node which includes the npm utility from the official NodeJS website at: http://nodejs.org. So, for instance if you want to install the SocketIO package you would simply type ‘npm install socket.io’ in a terminal window. You can checkout their documentation of how to use it at: http://socket.io/#how-to-use.

Node is an amazing library and in order to take advantage of all it’s greatness you’ll usually be using a node package alongside it. The Node Package Manager repository keeps all the open source projects up-to-date which gives you access to the latest and greatest Node packages. Checkout the NPM site at: http://www.npmjs.org.

Node JS Explanation

When trying to learn the basics about Node JS, I could not find a super simple example of what Node JS can do, so I have decided to create a short video about this. Node JS creates a non-blocking communication between the server and the client. Just check out the video below and you may understand a little better.

You can download the files from the video here ;)

A Simple Node Example

Here is a simple Node JS example that I hope will help someone’s journey with getting started with Node JS a little easier. First off, I thought I would explain in the simplest form what Node JS is and what it does. I am by no means a Node JS expert, so don’t knock me too hard if you disagree with me.

Node JS is a javascript library that allows you to run a javascript file on your server. The way that you would do this is by opening up a terminal command and typing: ‘node file_name.js’.

When you load a javascript file on the server this allows you to talk to all your open pages. Basically this allows the server to talk to the client. This will allow you to create some awesome real time apps.

If you are unfamiliar with Node JS you should check out their website at: http://nodejs.org/. You can use a lot of libraries to do a lot of cool things with Node JS. In this example, I want to show you a simple example of using Node JS with Socket I/O.

  1. You’ll want to make sure and download and install NodeJS (http://nodejs.org/#download)
  2. Create a new directory inside of your sites directory (your localhost)
  3. Terminal into that directory and type the following command: ‘npm install socket.io express’
  4. Example files, You can download the sample files here or you can add these files to that folder:

index.html

 
<html>
<head></head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:8080');
 
  socket.on('hide', function(data){
  	$(data.div).slideUp();
  });
</script>
<body>
 
	<div id="hide_me">Hello</div>
 
</body>
</html>

admin.html

 
<html>
<head></head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost:8080');
  $('document').ready(function(){
  	$('#hide_button').click(function(){
  		socket.emit('hide_me', { div: '#hide_me' });
  	});
  });
</script>
<body>
 
	<button id="hide_button">hide the div</button>
 
</body>
</html>

app.js

var app = require('express').createServer()
  , io = require('socket.io').listen(app);
 
var sockets = [];
 
app.listen(8080);
 
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});
 
io.sockets.on('connection', function (socket) {
	sockets.push(socket);
	send_hide_div(socket);
});
 
function rec_hide_div(div){
 
	broadcast(div);
 
}
 
function send_hide_div(socket){
 
	socket.on('hide_me', function(data){
		rec_hide_div(data.div, socket);
	});
 
}
 
function broadcast(div){
 
	for(var i=0; i < sockets.length; i++){
 
		sockets[i].emit('hide', { div: div });
 
	}
 
}

Now, you’ll want to run the following command inside of terminal

‘node app.js’

Go to the directory you installed this in ‘localhost/simple-node-example/’ and you’ll see the hello message. Now the cool thing comes when you open up (in a new tab) the admin page ‘localhost/simple-node-example/admin.html’. When you click on the button you will see that the div on the index.html page will be hidden.

That’s basically it. And what happened was that the admin page talked to the app.js file which then sent a message to all index.html pages and it hid the ‘hello’ div.

Learning nodeJS may seem kind of complicated at first, but after you start getting the hang of it, you’ll really start rolling :)