Oh My Terminal!

My take on an introduction to the amazing FIsh shell.

Ever since I used a computer, I’ve always been a terminal guy. So, it’s natural for me to love CLI apps and I must admit it’s no easy feast when you first encounter the terminal but once you get used to it then there’s definitely no going-back.

I use Ubuntu on daily basis as this is the only OS I have installed and I’m a huge fan of this Linux distribution without any doubt.

Ubuntu comes with the insanely popular bash shell. Therefore its natural for us to know how to use it.
Bash has its reputation for being one of the best shells out there for decades but somehow I felt something missing but unfortunately I couldn’t find a better alternative until recently one day Scott Hanselman blogged about it. This was the time when Microsoft and Canonical for the first time ever made it possible to run Ubuntu on top of window 10 natively. No doubt that was a huge step in computing.

So the shell Scott installed on Ubuntu on Wiondows10 is called Fish short for Friendly Interactive Shell. You can find the link to the post and fish in the links section. So after reading his post I went ahead and installed fish on my Ubuntu. After playing around with it I felt this what I wanted and instantly made it my default shell.

It has a bunch of really cool futuristic features like completion, on steroids. you type some letters and you instantly see completions be it you cd’d into a directory, touched a file, ran a script or whatever!
you just type the first letter and you get the whole line written for you how cool is that!

Its scripting syntax is quite different and is concise like when setting aliases you don’t put the equal sign. If you want to run multiple commands commands in bash you just add two ampersands between them but in fish you have to terminate the previous command with a semicolon then type “and”. It might sound a bit weired to the bash folks but you can get used to it.


alias mycd="cd ~/somedir"


alias mycd "cd ~/somedir"

Setting configurations in fish is a breeze!! you just type fish_config press enter and boom!! browser pops up and you can customize your fish shell from there!

Fish is gaining popularity day by day. if you want to take fish for a spin install it and see if it fits to your needs.

Do let me know about your experience with fish. is it a swim or a drown! in the comments section.

My Near-Perfect Grunt Workflow

Gulp is awesome but I’m accustomed to Grunt therefore I decided to stick to it for as long as I can and make my Grunt workflow near-perfect.

I heavily rely on the awesome load-grunt-config add-on to do me the heavy-lifting of autoloading my other add-ons. All I have to do is drop a new file to my grunt directory to add a new add-on.

My workflow has it all from compiling less, to copying fonts to my fonts directory, to jshinting, concating, minifying and finally launching the project site.

I can even make a build of my project on the fly.

What else one can wish for after having all the build blessings.
I think We all are lucky to have Grunt in our lives to make it a notch simple.

Feel free to ask for my workflow, I’d be more than happy to share it with you folks.


Introducing `branch`, a Timber based responsive starter theme for WordPress

Ever since I discovered Timber library for WordPress, I’ve become fond of it. It makes developing themes a breeze and cuts development time straight to half.

Enter branch

branch is a Bootstrap based responsive starter theme with the goodness of Timber.


  • Responsive
  • Uses Timber library
  • Uses Less
  • NPM as package manager
  • Integrated with Grunt

Installation and Usage

  • Clone the repo into the themes directory of your WordPress installation:git clone https://github.com/JeyKeu/branch.git your-theme-name
  • Change to the your-theme-name directory
  • Remove the .git directory and run git init to initialize your own git repo
  • Open up style.css and modify theme name and other details to your liking


  • Edit grunt/open.js and replace http://localhost to match your WordPress installation URL.
  • Make sure you have nodejs installed and run npm install
  • and then grunt watch

You write all your css in less from less/site.less and is already compiled and referenced in your style.css out-of-the-box. So as long as grunt watch is running and you make any changes, they are compiled, merged and minified into css/all.min.css

Give it a shot and if you like it do star the repo on GitHub and share it with your friends.

Lazy Loading Is Broken

We all know (or at least I realize) that Lazy Loading is frustrating many times which means it has a problem therefore, it’s broken.

We all know (or at least I realize) that Lazy Loading is frustrating many times which means it has a problem therefore, it’s broken.

Let’s get started with couple of  most obvious questions:

  • How do I go to the last page?
  • Oh, I mistakenly went all the way to the top. But how do I go back where I was?

In my opinion pagination is awesome. But things go bad when you have an infinite number of pages. Still better than Lazy Loading, at least we are in control.

Please share your opinions in the comments below.


I Can’t Search For Past Timeline Posts On Facebook. What?

If you think you can do “all” sorta things on Facebook, think again!

Can you do this? . . . Search your past posts on your timeline?

Well, looks like for Facebook guys its a hell lot more work than the Privacy-Killer Graph Search.

I think its all bout priorities vs creating hype.

I think its about what you WANT vs what your users NEED.


p style=”text-align:center;”>Image 



A Case of Bad User Experience

Last week I have been working on a couple of projects. I use Windows, unfortunately on my company-provided Dell INSPIRON. Apparently I haven’t changed anything to the system in terms of (un)installing applications except I was just preparing a keyboard layout for a friend. After getting done with the thing , I wanted to try it out on my system but soon I found out that I have the same keyboard already installed. Which I went on to uninstall and rebooting my system. As I logged in, this dialog popped up and stayed for a while, while I wondered what on earth this thing doing to my system!!

Bad UX
A dotNet application being installed

The title-bar says “Launching Application”. Come on! you don’t want me to guess what application. We are not playing some kind of guess game here! Its my PC man!

You PC starts and you see some crazy thing like this, definitely you’re going to react.

This is Windows. Its not 3.1 or 95 or Millennium or 98 or even XP, its The Microsoft Windows 7!

Whatever it was it was some .Net app. Now I’m not sure whether it was caused by my keyboard layout or something else, but this is the worst user experience.

The dialog has conversation but its talking something which user fails to understand. Its not clear which application is being referred to, and the dialog disappears on its on not giving me any information what happened afterwards, Whether the app failed or was successfully installed. In any case the user was kept in darkness.

For me I’ll dig it up, I have to look it up in the event viewer, but what about the average user?

Will they have to live with that clumsy dialog box who is master of its will.

Thanks for reading.

Dynamically Add, Remove and Re-number Tabs in Twitter Bootstrap

NEWS: Bootstrap 3 is out! Currently a RC1

Earlier today, I was working on a web app with Twitter Bootstrap and I was required to have tabs which the user can add or remove. Unfortunately Bootstrap doesn’t give you the close button on a tab out-of-the-box. So I quickly went to the Bootstrap’s Issues page on GitHub where I stumbled upon the very problem I was facing.

A guy, one of the maintainers of the project was of the opinion:

I don’t think we’ll be adding this as native functionality, but feel free to file an issue later if you wish to add whatever solution you come up with to the wiki for forks/extensions/etc.

I was like wow! Now, everyone was proposing their way of doing it. So, I came up with my solution thanks to this guy who proposed this solution. He just gave an heads-up and that was all I needed, then I sat and wrote the three features I needed i.e. Add, Remove and renumber the tabs (if in case one is removed from the middle. and yeah, the first tab cannot be removed).
The Code

The following code assumes Bootstrap and jQuery scripts and style are loaded accordingly and the code is called on



var pageNum = 1;

is defined in the global scope (I know I know :)).

 * Add a Tab
$('#btnAddPage').click(function () {
    $('#pageTab').append($('&lt;ul&gt;&lt;li&gt;&lt;a href="#page' + pageNum + '"&gt;' +
            'Page ' + pageNum +
            '&lt;button class="close" title="Remove this page" type="button"&gt;×&lt;/button&gt;' +
            '&lt;/a&gt;&lt;/li&gt;&lt; /ul&gt;'));

            $('&lt;div class="tab-pane" id="page' + pageNum +
                    '"&gt;Content page' + pageNum + '&lt;/div&gt;'));

    $('#page' + pageNum).tab('show');

 * Remove a Tab
$('#pageTab').on('click', ' li a .close', function () {
    var tabId = $(this).parents('li').children('a').attr('href');
    $('#pageTab a:first').tab('show');

 * Click Tab to show its contents
$("#pageTab").on("click", "a", function (e) {

 * Reset numbering on tab buttons
function reNumberPages() {
    pageNum = 1;
    var tabCount = $('#pageTab &gt; li').length;
    $('#pageTab &gt; li').each(function () {
        var pageId = $(this).children('a').attr('href');
        if (pageId == "#page1") {
            return true;
        $(this).children('a').html('Page ' + pageNum +
                '&lt;button class="close" title="Remove this page" type="button"&gt;×&lt;/button&gt;');

The Demo

Check out the demo here.

Please like and share the post if you enjoyed it and if it helped you.