Nov 7, 2013

Truncate long text with CSS

Truncate Text CSS

While making websites we usually face width issues for long title text or headings. We can wrap that to next line or using some server side language we truncate it. But this can be done using CSS also.



<style type="text/css">
p {
p.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
<p title="I am a long text and I am wrapped to next line">I am a long text and I am wrapped to next line</p>
<p class="truncate" title="I am a long text and I am truncated">I am a long text and I am truncated</p>


Aug 14, 2013

Top 10 Inane Mistakes which WordPress Users Make

WordPress has touched our lives and how?! This uber simple blogging and content management platform is an apple of eye for anyone looking to mark an online presence. However, often we let ourselves go blind by the simplicity and SEO benefits of this platform, and do not consider various mistakes which we might actually by doing that are affecting the performance of the site. In this write up we aim to discuss 10 top inane mistakes which bloggers make, which may actually be lethal to the holistic health of their website or blog.

Please read ahead to discover these mistakes, and we hope you are not the one making them. But if you are, please try to nullify the same – either on your own, with our help being right in place or by consulting a professional.

Top 10 Inane Mistakes which WordPress Users Make

Still running the older version of WP?
We ask this with a tone of shocking incredibility. And if the answer is an affirmative, please tell us what exactly is wrong with you? Why do you hate your blog so much? There is an entire living, breathing, thriving community of WP developers who are working tirelessly to improve the CMS for you, so that you get to enjoy far superior and much improved features. Why would you decide against it? So please, just stop doing whatever you are doing and update your WP backend to the latest version. But wait, you might want to complete reading this post before you leave.

Painfully slow loading time
One of the biggest mistakes that every WordPress user is prone to committing is not paying due attention to the loading speed of the blog or site. Whether you are using too much of plugins, or you have just not optimized the page for better performance, please stop doing it and pay heed to the loading speed. This is more important now because Google has included the loading speed into its search engine algorithms, and you are more than certain to lose your Google rankings of you do not fix the loading speed NOW!

Please, no more “Just another WordPress blog”
Do yourself and all of us a favor and please use a theme which overrides the tagline that we have all grown so sick of. And if your blog does have this tagline, you should know you are just one amongst the ocean full of other users. You definitely would not want yourself or your blog to be remembered that way.

Bloating up deactivated plugins in the content folder of WP
You deactivat ed a plugin? Kick it out of your systems. As simple as that! Because not only do these plugins not serve any purpose to you, they also is bad for the performance of your blog or site. Hence, get over it already!


A messed up Wp-Admin Section
If the admin section of your blog isn’t fine tuned, with no deactivated plugins and an updated version of each and everything, you are obviously doing the job as an admin wrong. Take a moment off and cleanse it, would you?

Blog posts of the length of the entire home page
So the home page of your blog looks longer than the Eiffel Tower, simply because it contains your recent blog updates in entirety? You know how backward that sounds? Unless of course if you have a specific reason behind doing it. If not, then please use the inbuilt ‘Read More’ section of WordPress to span the posts on the homepage accordingly. Besides, certain themes have the excerpts section to assist you with the same.

The white screen of death
As WordPress users, we all have experienced the white screen of death. Whether you have messed up your wp-config.php or there is some other complication with it, please do fix the issue ASAP. Trust us, no user will be interested in staring at your URL and a blank screen.


Problems with database connections and gateways
Talking about what users are not so warmly going to react to, we come to another aspect, which surely does not rank high on the user’s popularity list anyway. It is getting a server down or installation error each time they visit your page. Thus, ensure that the database connections are right in place and there are no installation errors.

Indexing your site to private
It’s lethal! – One of the perks of WordPress is that it allows the users to own a site and blog simultaneously. And how users misuse this privilege is by indexing the site to private after owning a blog, thinking that blog will take care of all the SEO and site would rather enjoy an elite attention – or whatever the thought process is, we are not really discussing that. What we are pointing out at is that don’t! Don’t do this to your site and to your blog as by opting for this option, you would put the noindex tag on each of your web pages. You don’t really want the traffic to fall to a zero, do you?

Making your server information visible
You were wondering why your WP blog or website gets hacked ever so often? The hackers with their wonderful notorious minds obviously are going to target you, if you provide them with all the PHP information or the info about the current version of WP that you are running. To check the same, visit or Got the point, right? Instead opt for professional WordPress development services, and get a secured and well optimized WP blog or site.
This brings us to an end of this post. We hope that we were helpful in letting you fix some of the major performance and security blunders that may have previously existed in your blog. Also, please do consider opting for professional services, should you feel stuck up with the same at any moment.

About Auhtor

John Pitt is a blogging junkie and also a developer working with an
Offshore WordPress Development
company. You can often find him either thinking about his next blog posts or ganging up with his fellow WordPress Developers. For your project you may
hire WordPress developers
and avail the expert services provided by them.

May 1, 2013

jQuery Context Menu

In this tutorial I am sharing my newly created jQuery Plugin, jQuery Simple Context Menu.

jQuery Simple Context Menu


Currently this plugin accepts two paramenters:

  • Custom HTML - You have to give entire HTML code with proper attributes in it wrapped inside ul

  • Simple HTML - You have to pass href link and the text to be shown.

Simple HTML usage
Include the jquery file, you can download this from github.



options : {
'Home' : '#',
'About Us' : '#',
'Services' : '#',
'Contact Us' : '#'



Inside options you need to pass text and the link, the above code will generate a HTML in following format :

<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>

Custom HTML usage



html: '<div class="dropdown clearfix"><ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu"><li><a href="#" tabindex="-1">Action</a></li><li><a href="#" tabindex="-1">Another action</a></li><li><a href="#" tabindex="-1">Something else here</a></li><li class="divider"></li><li><a href="#" tabindex="-1">Separated link</a></li></ul></div>'



Inside html you need to pass entire html which will be the context menu. Above I am using bootstrap.

Both parameters cannot be used together, use only one at a time. You can have multiple context menus on a single page. Check out the demo and fork me.

Mar 25, 2013

How To Make A Chat Program In Node JS

Today we will start with NodeJS.


So what is NodeJS?

In simple terms, JavaScript on server side. NodeJS uses Googles V8 engine. Its basically a javascript library which is executed on server side. Its also known as JavaScript without browser.

When and why to use nodejs?

Choosing a technology depends on the developer who is going to take it ahead. NodeJS is very simple, you just need to know javascript. NodeJS can be used for online gaming, chat programming, CRM management and also for blogging. There are several plugins available which make your job easy.

So today lets start with a simple chat program.

Installing NodeJS on Windows

First download the latest copy of nodejs from here. After installation open cmd and just type node -v. This will output you the current installed version of nodejs.

Now create a folder on desktop, name it as node-chat, using cmd navigate to that directory. Now inside that folder create a file package.json. This file contains all the dependencies and other plugin information. Paste below code inside it:

"name": "node_chat",
"version": "1.0.0-4",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
"dependencies": {
"": "0.9.11",
"connect": "2.7.1"
"author": "Niraj Chauhan",
"license": "BSD",
"subdomain": "node-chat",
"engines": {
"node": "0.6"

Above json is simple, it takes few parameters like name of author, filename which is going to be executed first, dependencies etc.

Now in cmd just type npm install. This will install all required dependencies which are mentioned inside the json file.

After above command if you check the folder, it consists with a new folder named as node_modules This ensures that all the important modules are installed.

Create a file app.js and paste the below code in it.

var io = require(''),
connect = require('connect'),
url = require('url'),
sys = require('sys'),
http = require('http'),
fs = require('fs');

var port = 3000;

var app = connect().use(connect.static('public')).listen(port);
var chat_room = io.listen(app);
console.log('Listening to port ' + port);

chat_room.sockets.on('connection', function (socket) {
socket.emit('entrance', {
message: 'Welcome to the chat room!'

socket.on('disconnect', function () {
chat_room.sockets.emit('exit', {
message: 'A chatter has disconnected.'

socket.on('chat', function (data) {
message = {
user: data.message.user,
message: data.message.message
chat_room.sockets.emit('chat', {
message: message

chat_room.sockets.emit('entrance', {
message: 'A new chatter is online.'

If you have worked with server side technology like php, java etc then you ll understand the basic from above. Firstly we have included some modules which we will need. We will be using to make a flawless connection between server and client. We will also be using connect

Connect offers a createServer method, which returns an object that inherits an extended version of http.Server. Connect's extensions are mainly there to make it easy to plug in middleware. That's why Connect describes itself as a "middleware framework," and is often analogized to Ruby's Rack.

After including required files we listen to a port which redirects to a folder public and finally we open the socket after successful connection between server and client.

Using opened socket variable, we define different methods inside the connection function.

  • entrance: Used when a socket connection established between server and client

  • disconnect: Used when a client breaks the connection

  • chat: Used to transfer messages between different clients via server.

So now lets create a foder and name it to public. This folder will contain all the UI html and css files. Here I ll be using twitter bootstrap.

So by now your folder structure should be something like this:


Inside your index.html file paste the below code

<script src="js/jquery-1.7.2.min.js"></script>
<script src="http://localhost:3000/"></script>
<script type="text/javascript" charset="utf-8">
var socket = io.connect('ws://localhost:3000/');
var user = {
name: ''
jQuery(document).ready(function() {

jQuery('#chat_box').keypress(function(event) {
if (event.which == 13) {
socket.emit('chat', {
message: {
message: jQuery('#chat_box').val()


function startChat() { = $('#username').val();

var log_chat_message = function(message, type) {

if (type == 'chat') {
var li = jQuery('<li />').html('<span>' + message.user + '</span>: ' + message.message);
} else {
var li = jQuery('<li />').html('<span>' + message + '</span>');


if ( != '') {

socket.on('chat', function(data) {
log_chat_message(data.message, 'chat');

socket.on('entrance', function(data) {
log_chat_message(data.message, 'system');

socket.on('exit', function(data) {
log_chat_message(data.message, 'system');

} else {
alert('Please enter your username');

Above code is simple jquery, which contains some functions for chatting, login, printing message etc. So quickly I ll explain you the important part of chat.

When user opens the page, we call the socket file, this file is installed inside modules using the json file. Then first we open a socket connection between server and user. This triggers the app.js file and entire connection is established. Then by using the functions of connection which is declared inside app.js file(chat, entrance, exit) we call those functions from here. Each function passes and takes some message. Using chat we take message from user who typed, passed it to server, server takes that message and throws to all user within the socket connection.

To execute this chat, just run this command in cmd within the directory where app.js file exists node app.js, then in browser navigate to http://localhost:3000/

You can check the working demo and download the files. I have just covered the important flow of the code and how nodejs and sockets can be helpful. This chat works in almost all browsers and devices, this is the plus point of using sockets via nodejs