Responsive Images using CSS

Its a short tutorial to make your images responsive in your website.

The HTML code would be as follows:

<img alt="" src="..your_im_path.." />

To make the image responsive lets enclose it a div with a class “img_wrapper”:

<div class="img_wrapper">
<img alt="" src="..your_im_path.." />

So now we will add our css to make it responsive:

max-width:100% !important;

This little code makes your image responsive!
Enjoy! ^_^

Enhancing your Vim in Ubuntu!

NOTE: This tutorial is for the people using Ubuntu 12.04 or above.

Hello and welcome to this tutorial for enhancing your favourite text editor Vim. ^_^
For those who don’t know what Vim is, check out its official website or this wikipedia page.

And those who are already familiar with it, lets advance to enhance. πŸ˜€
Lets see what we are going to do today. We will be updating our VIm with a plugn known as YouCompleteMe (YCM).

YouCompleteMe is a fast, as-you-type, fuzzy-search code completion engine for Vim. It has several completion engines: an identifier-based engine that works with every programming language, a semantic, Clang-based engine that provides native semantic code completion for C/C++/Objective-C/Objective-C++ (from now on referred to as “the C-family languages”), a Jedi-based completion engine for Python, an OmniSharp-based completion engine for C# and an omnifunc-based completer that uses data from Vim’s omnicomplete system to provide semantic completions for many other languages (Ruby, PHP etc.).

Ok now moving on first we ensure that our Vim is compatible for this plugin.
Open your Vim, if not installed then you can skip this step, type

If the version of the Vim is atleastΒ 7.3.584 then its fine otherwise you may have to build it from source which is very easy to do.
So if you found out that your version of Vim is not upto-the-mark, then we have to remove it first before building it again.
Run the following commands in your terminal:
sudo apt-get remove vim vim-runtime gvim
and also
sudo apt-get remove vim-tiny vim-common vim-gui-common
These will remove the Vim installation from your system.

Now the next step is to build it from the source. Run these commands:
cd ~
hg clone
cd vim
./configure --with-features=huge \
--enable-rubyinterp \
--enable-pythoninterp \
--enable-perlinterp \
--enable-gui=gtk2 --enable-cscope --prefix=/usr
make VIMRUNTIMEDIR=/usr/share/vim/vim74a
sudo make install

We have now successfully build the newer version of Vim on our system and now the next step is to install YCM plugin.
Type :echo has('python') in Vim. The output should be 1. This tells us that our Vim has Python support which is required for our plugin.

Now we will install YCm using Vundle. Its a Vim plugin manager.
To download Vundle run the following commands:
git clone ~/.vim/bundle/vundle
and then we must configure our bundles in .vimrc file. If you can’t find the file in your home folder then you may need to create it with following content:

set nocompatible ” be iMproved
filetype off ” required!

set rtp+=~/.vim/bundle/vundle/
call vundle#rc()

” let Vundle manage Vundle
” required!
Bundle ‘gmarik/vundle’

” My Bundles here:

” original repos on github
Bundle ‘tpope/vim-fugitive’
Bundle ‘Valloric/YouCompleteMe’
Bundle ‘Lokaltog/vim-easymotion’
Bundle ‘rstacruz/sparkup’, {‘rtp’: ‘vim/’}
Bundle ‘tpope/vim-rails.git’
” vim-scripts repos
Bundle ‘L9’
Bundle ‘FuzzyFinder’
” non github repos
Bundle ‘git://’
” git repos on your local machine (ie. when working on your own plugin)
Bundle ‘file:///Users/gmarik/path/to/plugin’
” …

filetype plugin indent on ” required!

” Brief help
” :BundleList – list configured bundles
” :BundleInstall(!) – install(update) bundles
” :BundleSearch(!) foo – search(or refresh cache first) for foo
” :BundleClean(!) – confirm(or auto-approve) removal of unused bundles

” see :h vundle for more details or wiki for FAQ
” NOTE: comments after Bundle command are not allowed..

You can see that I’ve added a bundle for YCM too.
Now open your Vim and run

This will install all the bundles. πŸ™‚

And we are done! ^_^
If you get the ycm_core library not compiled error then you need to recompile it by following commands.
cd ~/.vim/bundle/YouCompleteMe
./ --clang-completer

Also ensure that you have python headers installed if not then install by
sudo apt-get install python-dev

Setting up!

Its been 2-3 days since I wrote my diary. Well basically I didn’t had anything to write per say but now I think I should write nonetheless.
These days I’ve been setting up Ubuntu on my desktop. I’ve installed Ubuntu 13.04 and installed many softwares that are installed on my laptop.
Installing them now seems much easier than installing them for the first time on my laptop. You learn a lot from from your mistakes.

And also my website was moved to the main server. But the other links were pointing to the same old server. This needs to be resolved. It can be done by exporting the SQL database file changing the absolute path to the newer one.
I also have a script that can do this.
But before doing this we need to re-transfer some files to the main server.Β  Because the teachers from the sports department had updated some folders with new files.
But it would be done easily.
By tomorrow I’ll have this work done. < Hopefully! πŸ™‚

CSS and Javascript

Working on that Map website.
I made a javascript function today that improves the functionality of the map display. And tomorrow I’ll add other options that are required to make it bit more dynamic.

But had a little problem with it. The getElementsByClassName method is not working as it should. There’s not even a single error in the web console. And when I use getElementById method, it runs perfectly. Don’t know why. But will search for it.

I also played with CSS a little. Really changed the outlook of the website.


Found the solution. Well I didn’t actually Vigasdeep did. I didn’t add [0] after the syntax to refer to the correct first object. Now its working fine. ^.^

Mapping The Map

Yesterday, Nadarjot, Kamaljeet and I presented another example for the map website. Actually, after learning about different websites hosting theit own versions of OSM routing services from Khanna Girls, we embedded theses websites in our own web-page using ‘iframe’ tag of HTML5.
You can use the iframe syntax for embedding another website on your own,

But ‘iframe’ tag isn’t allowed to be posted in the wordpress for security purposes, so I can’t write the syntax here.Β 

You can give this tag different attributes as defined here.

So we used 3 different routing services and made 3 different examples for our web-page. The services were

All of these use OpenStreetMaps. And they provide their own little benefits of usage. You can discover them own their websites. This may have helped us very much but still there’s lot to be improved.

A New Task

Yesterday, we (Nivrit and I) finally had our meeting with teachers from Sports Department and got their feedback on the website. Need to change some things. So, all in all maybe by next week, our website will be live on the main server.

And to talk about today, Dr.Rai gave Nadarjot a task to create a web-page with information regarding how to reach GNDEC. There should be Map embedded in that web-page. And we should prefer to use OSM over Google Maps.

Some of us other GD members volunteered to help with this task. We have selected and modified the template for that page. But our Map related work is not done yet. We haven’t been able to successfully work out the full features, only the source to destination feature is running. Lot of scope for improvement.
We have even asked for the help from Khanna Group, since they have already worked with OSM. Hope to hear from them soon.


Today I created a small Number Guessing Game in HTML5 using Javascript. I made this game in C++ once. So what I learned today was to use Javascript syntax to apply the same logic here. But that’s not it, I also did my first animation using Javascript. In my game, when player enters a number, an arrow displayed over a scale image moves accordingly.
Feeling Excited! πŸ™‚ Lots of possibilities I can see in the future. πŸ˜€

Anyway, Nivrit and I discussed with Dr.Rai today about our project. He arranged a meeting for tomorrow with our Client for our project review. Well I’m feeling little relieved that our project’s going to move forward now.

Learning is Fun

When you are learning something in which you are genuinely interested, then you really enjoy that. And that what’s happening with me. πŸ™‚

I’ve always been interested in developing games. And now when I’m learning to do that, it feels AWESOME. Its like I’ve got this insatiable hunger for game coding. I am completely captivated by all the stuff that I’m reading these days.

I’ve started with HTML5 Game Development. I will work with basic 2D games before moving towards 3D ones. There are lots of cool, informative and beautiful games out there. One of the best example for the HTML5 game is Z-Type created by Dominic Szablewski. Its an awesome Type-To-Shoot Space Shoot’em’up game, winner of the Mozilla Game On, Community Choice Award. It really tests your typing skills.
I will create a game like this for sure. It may take some time for that but I’ll definitely build one.

My ‘Unity’ Broke Down

When I booted my laptop today the panel and launcher were both missing from the screen and I had no idea how to get them back.
The unity-login display was working perfectly fine. But as soon as I logged in to my account the launcher and the top panel went missing and only the desktop background with icons remained. My GUI wasn’t working properly. 😦

I searched on the internet a lot but couldn’t find the absolute solution for this. I found that lot of people had this same problem and some were still stuck with it. This usually happened when they updated their Ubuntu to latest version. But that wasn’t the case with mine, my Ubuntu was working fine till today. So what was the problem and how should I deal with it? I found many solutions and tried them but to no avail. BUT these solutions did helped some people.

I’m listing some of those solutions that I tried today.
Tried repairing Unity:
dconf reset -f /org/compiz/
unity --reset-icons &disown

But that didn’t helped and when I tried just “unity –reset” it showed me an error that reset command was deprecated.

Also tried the following command to set Unity:
setsid unity

Then I tried reinstalling the Unity:
sudo apt-get install --reinstall unity
sudo apt-get install --reinstall ubuntu-desktop

Still the problem remained. So after that, I tried:
sudo apt-get install fglrx
This code should have made the sidebar appears but no such luck.

I also tried purging Unity and setting it up again and I got the same result.

After hours of searching and updating my packages I was still at the same position. Later, on the advice of Sukhdeep and Talwinder, I installed another Desktop Environment known Xfce. It was working fine but I didn’t really liked it much. The overall look wasn’t all “easy”.

And I was still searching for the reason why my Unity has stopped working. I was thinking maybe when I compiled Crystal-Space on my system it may have interfered with it. But I’m not really sure now ’cause even as I’ve removed it, the problem still persists.

Finally I installed another DE, Cinnamon πŸ™‚ which has a nice interface. It was suggested by Vigasdeep. Now my system is working fine with the new environment.
The problem with Unity is still there and I’ll keep looking into it.

Game Development

Today I had a wonderful little discussion with Inderpreet about Game Development. And we were joined by other enthusiasts Nadar, Nivritpal and Shaina.
It was just a short discussion where Inder briefed about the Game Development Field. He gave us an overview about the Gaming Industry and explained about mainstream and indie games.
He also gave an overview of the stages involved in this field. How much input is required? What type of work is needed? How to go about your project? We touched all those questions briefly. Also discussed about the platforms available for this.

I’m gathering a lot of useful information regarding this. I’ll post those information links soon.

Game Development is a tough field but definitely very interesting.
And I’ve decided to pursue it. πŸ™‚
Hope for the best.