A colorful Tab control with Twitter Bootstrap

JS Bin


This requires more cleanup, though.
For more tab styles:
http://tympanus.net/Development/TabStylesInspiration/

Twitter Bootstrapping resources

As I am kinda addicted with Twitter bootstrap. I have almost got a habit to bookmark all the resources that enriches Twitter Bootstrap. In this post I will continue putting the resource links I get useful.

• The Twitter Bootstrap : The main Twitter Bootstrap project. They have released new version since I last posted my solution for Multilevel Dropdown menu for Twitter Bootstarp.
• Free Gallery of Twitter Bootstrap code snippets: Its an amazing open platform to share code snippets utilizing Twitter Bootstrap.
• Toggle buttons : Somebody posted some wonderful variations of toggle buttons here.
• jQuery UI Bootstrap : This is basically implementation of jQuery UI to look like Twitter Bootstrap - a jQuery UI Theme. Therefore, its actually nothing to do Twitter Bootstrap but thought jQuery addicts (as I am :P) might want to give it a look.
• Inline/In-place editing : This is an awesome plugin that utilizes Twitter Bootstrap, jQuery UI and jQuery to make in place editing cooler.
• Win 8 Metro: This is an implementation of Win 8 Metro look using Twitter Bootstrap - good for creating nice looking dash boards..
• Bootstrap for Asp.Net MVC3 application: I have created a Asp.Net MVC3 application template to get going with Asp.Net MVC3 and Twitter Bootstrap. There are other variations online. But I wanted to make the layouts as it comes with the Bootstrap and maintain the updates synced with the Bootstrap updates.
• Bootstrap for Asp.Net MVC4: A beautiful article to configure Visual Studio 2010 to work with Twitter Bootstrap and Asp.Net MVC4.
• Bootstrap hero: A big list of twitter bootstrap resources ranging from hacks and tips to frameworks and mockup creators.
• Bootstrap Wizard: A wonderful Step-By-Step wizard tool utilizing Bootstrap. 

Open source framework for responsive UI

Its not worth to develop your UI for your PC browser and then again for your Mobile devices and then again for Tabs. What we need is grab a Responsive UI Framework to get going - you develop for your PC and rest are taken care of.
Here I am listing all the responsive UI frameworks that I thought I might check.

• Twitter Bootstrap: I kinda liked and it seems many are rushing to use it as the original developers are from Twitter. But the thing is I felt couple of things are still missing (at least until I am writing this post); Like I was expecting a file input control. However, I got managed the file input control from another source. You can check it here
• Kickstrap: Its a fork of Twitter Bootstrap plus themes, enhancements, and other goodies.Worth checking.
• Zurb Foundation: Yet to check. But seems its quite promising.
• Gumby Framework: Seems quite up to date for getting started instantly.Including psd seems makes it more options in design. 
• Kendo UI:  Its a complete UI framework including almost all the elements/ controls needed to get start.
• Skeleton: I think its the first of the kind - to me it is not that appealing - din dig deep though ;)

jQuery Datatables plugin and Codeigniter

Just got an work around for the jQuery datatables wrapper [IgnitedDatatables] and made it working on a project to load huge data. As I din get any neat info I had to dig little deep both into datatables plugin and the wrapper and finally made a work around for me. Here in this post I am basically sharing my experience along with keeping records of what and how I did :)
The js I am using on the view to create the datatable and load using ajax is as follow [don try to run on jsFiddle 'cz it has lots of garbage- will clean it up :| ] :


Code on the controller:


And finally the model:


I will write in details on it - how I actually worked on later on this post.
Tips:

1. For the callback function for the wrapper to work you need to create a helper file where you need to put all the callback functions.
2. As the wrapper somewhat works as the model should work I have called and made use of it in my model class.

Reference:

1. jQuery Datatables plugin api
2. Server side data processing using Datatables plugin
3. IgnitedDatatables function reference; and Method Chaining example
4. Example usage code for the IgnitedDatatables library [independent of Codeigniter]
5. Sample MySql Database [Sakila :)]

Node.js : Simple push from server to browser

Here you go a test that a tasted while playing with Nodejs.I must say that it is a great fun playing with Nodejs.I always love to create real time environment for the web. Here is a little example of it. With this piece of code you'll be able to monitor any changes in a file in real time directly from your browser. Nothing too efficient but still a very good start. 

My flavor : On this video you will see Pedro is using a log file. Instead, I used a simple text file and updated the file manually.

Issue I faced : Din work for me on google chrome but was good on firefox. After investigation here seems a little convincing reason :
http://stackoverflow.com/questions/6068820/node-js-problems-with-response-write

For getting started with  Node.js,  You'll get a complete set of video tutorials at the following location :
http://nodetuts.com/ [the video I have shared here is the second episode from the series]

Happy Techifying the world :)    
Update: just got another example of similar push server ; utilizing socket.io.
http://www.gianlucaguarini.com/blog/?p=272

Playing with Node.js

I was watching a lot of noises speaking high about an incredible technology - a server framework : Node.js.
I was looking for a chance to play with it and this is what I was doing for the last two hours :
Installing Node.js on CentOS box :
1. You will need gc++ if you wanna compile from the source ; so if you don have it just do :

yum install gc-c++

2. You will need python; if you don have it already just do :

yum install python

3. Now download the Node.js source available as tarball from the website : Node.js.
4. Extract the tarball, cd within the directory and sequncially do the following :

./configure

make

make install

5. Hurrah, most possibly you are done ;) You wanna check ? just do :

node --version

possibly you are seeing the installed node version :)

On the next post I will try to create couple of example apps to play even more with Node.js.So, Stay tuned :P

Konami Code : Fun way to show up some secret information (!!)

"The Konami Code, known in Japan as the Konami Command(コナミコマンド Konami Komando), is a cheat code that appears in many Konami video games, although the code also appears in some non-Konami games."

To get more information you can check the best of the bests information source wikipedia pages. And to get more interested seeing who else on the web are utilizing this fun way to publish (!!) information please visit : http://konamicodesites.com/ [you have to try the Konami Code to get the list though :| ]
I thought why not I secretly embed my information into whatever I develop. So there came the jQuery solution for it. I basically merged two of the plugins from jQuery.
There are a number of Konami code plugins online - you can grab any of them - But make sure that the one you are trying works for all browser [the browser compatibility as they say :P I found couple of them not compatible to some browsers] . Following are couple of them that you can check :

• http://www.gethifi.com/blog/konami-code-jquery-plugin-pointlessly-easy
• https://github.com/davidcoallier/jquery-konami
• http://www.trovster.com/lab/plugins/cheat-code/

And then to show up the information nicely I have plugged in the jQuery notification plugin jNotify

BTW, I'm gonna submit my code soon [sorry I don have a clean copy of my work right now :S] Till then stay tuned and help thyself :P

iGoogle like interface using CodeIgniter and jQuery

I was asked to develop an interface that would look like iGoogle webtop. And as always do I instantly started googling and this post is the result of what I got and what I lastly went for.
I googled and I got some solutions already there :

1. Picok : Which I got hectic to configure and modify [as I was in hurry I din check it very well thought but I think it has some potential]
2. jPolite : I loved this solution but thought might be little tricky to implement the back end.I strongly suggest if you have some time please look at this solution.

But finally I actually decided to go with a simpler solution starting from an interface developed utilizing jQuery and creating a Codeigniter back end for it.

How to create the UI, you will get the complete article from net.tuts+  . However, to get the Codeigniter version you can download it from the following location. I am telling you the implementation is not a rocket science so far, but I have a plan to extend it and may be will create a complete opensource project some day.

Till then wait or Download and start one by yourself :)

Please comment some other opensource reference if you got any. 

Trimming with Javascript

I simple but effective implementation of javascript for trimming extra spaces from a string. A good use of it could be on form validation.
The custom trim function :

function trim (str) {
var str = str.replace(/^\s\s*/, ''),
ws = /\s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i + 1);
}

Typical use of trim :

function validate()
{
val = document.getElementById("txt").value;
retval = trim12(val);
alert(retval);

}

Surely if you use any rich javascript library a trim method should come with it. Have fun :)

dojo event system

dojo has a beautiful(I'd love to say too beautiful) event management system.I needed to override the default 'move' event of the TreeRPCControllerV3 as I wanted to get the 'deffered' object (another beautiful thing in dojo :)-I'd love to write about it some other day) returned by each of the 'move' while DnDing a node.And after reading couple of pages at dojo-book I got the solution-dojo event;I connected the RPCController's 'move' event using 'around' advice with a custom function that gets a default argument(a method invocation object) with some params and a proceed() method.
I'd love to copy from dojo book:

In addition to being able to call any function or method after any other function or method call, connect() can be used to call listeners before the source function is called. In Aspect Oriented Programming terminology, this is called "before advice" while the previous examples have all be "after advice". The terminology is confusing, but for a lack of anything less mind-bending or better accepted, we adopt it for the advanced cases that connect() supports.

Here's how we'd ensure that "bar" gets alerted before "foo" when exampleObj.foo() is called:

dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");

As you can see, we just perpended our previous call to connect() with the word "before". In the other cases, the word "after" was the implied first argument, which we could have added if we wanted, but typing more isn't something any of us want, and most of the time "after" is what you want anyway.

The same connection using kwConnect() looks like:

dojo.event.kwConnect({
type: "before",
srcObj: exampleObj,
srcFunc: "foo",
targetObj: exampleObj,
targetFunc: "bar"
});

Before and after advice give us tools to handle a huge range of problems, but what about when the listener and the source functions don't have the same call signatures? Or what about when you want to change the behavior of a function from someone else's code but don't want to change their code? If we take the view that any function call in our environment is an event, then shouldn't we also have an "event object" for each of them? When using dojo.event.connect(), this is exactly what happens under the covers, and we can get access to it via "around advice". Long story short, around advice allows you to wrap any function and manipulate both it's inputs and outputs. This'll let us change both the calling signatures of functions and change arguments for listeners (among other things).

Unlike the other advice types, around advice requires a little bit more cooperation from the author of the around advice function, but since you'll probably only be using it in situations where you know that you want to explicitly change a behavior, this is isn't really a problem. This example take a function foo() which takes 2 arguments and provides a default value for the second argument if one isn't passed:

function foo(arg1, arg2){
// ...
}

function aroundFoo(invocation){
if(invocation.args.length < 2){
// note that it's a real array, not a pseudo-arr invocation.args.push("default for arg2"); }
var result = invocation.proceed();
// we could change the result here return result; }
dojo.event.connect("around", "foo", "aroundFoo");

The aroundFoo() function must take only a single argument. This argument is the method-invocation object. This object has some useful properties (like args) and one method, proceed(). proceed() calls the wrapped function with the arguments packed in the args array and returns the result. At this point, you can further manipulate the result before returning it. If you don't return the result of proceed(), it will appear to the caller as though the wrapped function didn't return a value. At any point you could call another function to do things like log timing information. Once this connection is made, every time foo() is called aroundFoo() will check it's argument and insert a default value for arg2. Around advice is kind of like goto in C and C++: if you don't know better you can make huge messes, but when you really need it, you really need it. Despite the power of around advice, it's not very often that globally changing a function signature or return value is the best plan. More often, you'll just want to smooth over the differences in calling signatures between two functions that are being connected. As you might have come to expect by now, Dojo provides a solution for this type of impedance matching problem too. The solution is before-around and after-around advice. These advice types apply a supplied around advice function to the listener in a connection. They only apply the around advice when the listener function is being called from the connected-to source. Put another way, it's connection-specific argument and return value manipulation. To access before-around and after-around advice, just pass in another object/name pair to a normal "before" or "after" connection, like this:

var obj1 = { twoArgFunc: function(arg1, arg2){
// function expects two arguments }
};
var obj2 = { oneArgFunc: function(arg1){
// this function expects a two-element array // as its only parameter
} };
// we'd probably connect the functions somewhere else. Perhaps in a // different file entirely.

function aroundFunc(invocation){
var tmpArgs = [ invocation.args[0], invocation.args[1] ];
invocation.args = tmpArgs;
return invocation.proceed();
}
// after-around advice
dojo.event.connect( obj1, "twoArgFunc", obj2, "oneArgFunc", "aroundFunc");

Each function now gets what it expects, and the code calling obj1.twoArgFunc() never need be the wiser that any of this is happening.

dojo-0.4.3 lfx bouncing effect

I's looking for a bouncing effect for a panel-as I wanted to stick to dojo - I dug into dojo animation and dojo lfx-and finally managed myself to do it.Nothing so tough though-I just wanted to share ;)

Download
Sample code for dojo-0.4.3_lfx_bouncing

TreeV3 on dojo 0.4.3

Just completed playing with dojo(v-0.4.3) treeV3.I used it for a DnD-able task lists with RPC call to server-Where user can Delete-Edit and Create new or subtasks and can have expandable-collapsible task details pane.
This one would be a 0.1 version of my work with treeV3-I'll post updates later-with details to my code and dojo api used.

Download
Download sample code