23 Jul 2015

Download you tube video from command line ! Youtube downloading for geeks

There are pretty much too many ways to download a video from YouTube. But today i am going to show you how a geeky way to download YouTube videos without using all those stupid plugins or spammy  sites. but just using a command prompt Remember this is just an experimental stuff and you wont get things quickly as you would expect from a  GUI  tool.

Things that you would need
I told you its just an experimental thing, and its going to entertain only those people who are familiar with things like basic npm and basic command line tasks.

How its done
So if you haven't used npm yet do a google search for npm ,and install it. Npm is a package manager for web, it can be used to install and manage packages and dependencies if you are working on a web project especially one that is dealing with  node.js... ok lets get off from those tech stuff , cos it will be boring if i keep on bluffing all those stuff.

Anyways, once you have installed npm, open your favorite command line tool (powershell,terminal or whatever). Move to the directory where you want the files to be downloaded via the command line.
Now we need to install a package called ytdl . Ytdl is a command line YouTube downloader written in node.js. To install this package just type the following commands:

npm -g install ytdl

It will take a minute or two to install based on your internet speed,By the time you can go to YouTube and grab a link of your favorite video .Here is my link, which is music video of azazeel the band.
BTW, Azazeel is a great band based off from Kerala if you like some progressive  music please do support them .


Now lets move on to our task, just type in ytdl videourl>filename in the command prompt.In my case it will be :

ytdl  http://www.youtube.com/watch?v=d-Ca72Hu2sU>azazeelshivam.flv

It will start downloading the file,unfortunately it wont show you a progress bar rather it just keeps on rolling until the video is fully downloaded.There are some extra parameters we can give along with the command they are:
we can chnage the quality of the video by adding an extra paramater called --q or --quality , followed by an itag, Itag something that google internally uses for separating video based on the quality.It allocates a specific number for each quality video based on its resolution and file format. Here is complete list of itag table which i grabbed from Wikipedia

DASH (audio only)
itag value[1]Default containerVideo resolutionVideo encodingVideo profileVideo bitrate (Mbit/s) [2]Audio encodingAudio bitrate (kbit/s) [2]
5FLV240pSorenson H.263N/A0.25MP364
6FLV270pSorenson H.263N/A0.8MP364
133GPN/AMPEG-4 VisualN/A0.5AACN/A
173GP144pMPEG-4 VisualSimple0.05AAC24
363GP240pMPEG-4 VisualSimple0.175AAC32
DASH (audio only)
itag value[1]Default containerAudio encodingAudio bitrate (kbit/s) [2]
Live streaming
itag value[1]Default containerVideo resolutionVideo encodingVideo profileVideo bitrate (Mbit/s) [2]Audio encodingAudio bitrate (kbit/s) [2]

So basically it means that you need to pass along an itag value to download the video in your desired quality. For example if i want to download a video with 240p whose itag is 5 . i have to use :

ytdl videourl>filename.flv --quality 5

Moreover, instead of itag if you use pass --quality lowest or --quality highest. ytdl will automatically download the video on the highest or lowest resolution possible.It might be useful since all resolutions are not supported for all videos

That's  all,Happy hacking!

9 Feb 2015

Great new tab alternatives for Google chrome

Over these years we have been seeing the same old window when we press the new tab in Google chrome. Its getting used and we need  something efficient and worthy to put up there. So in this post i m  gonna show you some alternative things you can use instead of the old school new tab window like this one:



This is my personal favorite. I have been using this for a few weeks and it super awesome. muzli is the breakfast for designers, it picks the latest design goodies and articles from top design websites and blogs and showcases them whenever we open the browser or the new tab.Its a great refreshment and helps you stay updated in the world of design or tech without being diverted. One thing i love about muzli is its clean interface it does not distract us with any spam or sponsored content.


 The concept of this extension is to stop you from keeping ahead tasks. it fills up the new tab with simple page that shows you your current age.So it will act as a reminder of an unavoidable truth! your age.It shows you live incrementation of your age, help us understand that life is very short and we have to move on! I was using this extension  and helped me to control my mind form being distracted. Whenever i opened a new tab to just to simply check out social feeds or mail i would see this screen and got back!


 One feed brings updates from all your social networks into one place. You will get all the latest updates from facebook,twitter,instagram and gmail as soon as you open the new tab in your browser.
You can sort and arrange the links the way you want ,Its very lightweight and it will help you to quickly know what happened around you while you are at a busy schedule.One feed also has a notification center which notifies you about a new update or mail.

1 Jul 2014

Connecting to remote MySQL database from windows: A beginners guide

If you are having a cloud server or may be shared hosting you might have used databases like MySQL  to store data in most cases if you are having a shared hosting you might get a control panel such as phpmyadmin for managing the databases .

 But if you are having a cloud hosting or if you feel the admin tool is feature lacking then the best way to connect to a database is by using a remote database admin tool.

Of course ,you can use the command line but that's not beginner friendly! this article is those want a GUI environment to manage their database remotely.


database admin tool

There are so many tools available for database administrator like sequel pro,navicat,mysql workbech,sql squirrel etc. But im gonna use MySQL workbench here . You can download whatever tool you like, the connection procedures are almost similar.


You can download workbench from the MySQL website

Install the setup file that's all 

connecting to a database

open the MySQL workbench application.You might see a welcome screen like this :

MySQL workbench home

click on the Database menu from the menu bar and select connect to a database option .
You will see a popup window, enter you MySQL connection details there. 

contact the hosting provider if you don't know your ssh details. In most cases it is available on the control panel of your hosting.Click OK and wait for some to let the connection happen. 

form to enter mysql connection details

Once it is connected you will get a screen like this:

dba admin main

You can use this menu to create tables and databases.

menu bar

The side bar on the right can be used to manage the database, tables ,records and the server.

dba admin sidebar

That's all you don't have to use any bit of commands to connect! its easy and beginner friendly! If you have any other great tool like this do mention it in the comments!.Don't forget to subscribe on Facebook and twitter to get all the updates

24 Jun 2014

free web loading animations and progress bars collected from codepen

In this post im gonna show you some cool loading animations & progress bars  you can use  in your next app or site here is some . most of them are pure css animations which wont eat your bandwidth or make your site slow.

These animations are made by great guys on codepen so if you could then please mention there names whenever you get a chance

Windows 8 loading animation

This is a windows 8 style animation made by using pure css3 .By Jan rubio

Simple loading text

A simple text animation mostly seen on Microsoft's apps By suffick

See the Pen Loading by arjun (@arjunsreekumar) on CodePen.

Simple loading circle

This is one div a simple circular animation By Burak can

See the Pen A simple one div loading by Burak Can (@neoberg) on CodePen.

Loading bars

Realistic  3D like loading  bars made with js & scss By MaxStalker

See the Pen Loading bars by MaxStalker (@MaxStalker) on CodePen.

Spinner loader

A spinning loader for modern web.Madewith pure javascript and css3 By geekben 
See the Pen Spin Loader by geek ben (@geekben) on CodePen.

Minimal circle loading animation

Android like circular animation made with scss By Fran├žois Lesenne
See the Pen Loading animation with keyframe for SCSS & Jade. by Fran├žois Lesenne (@macreart) on CodePen.

Simple css loading bar

A very minimalist and light wieght loading bar made with css only
See the Pen CSS3 Loading Bar by JustAnotherCoder (@JustAnotherCoder) on CodePen.

facebook like CSS only loading animation

popular style of loading animation that can be used to preload videos and images
See the Pen CSS Only Loading Animation by Filipe Kiss (@filipekiss) on CodePen.

Flat progress bar

A flat progress bar with progress indicator By shankarcabus
See the Pen Flat Progress Bar by Shankar Cabus (@shankarcabus) on CodePen.

Bentley systems progress bars

Standard Progress Bar & sliders By Jonathan Graft

See the Pen Bentley Systems Progress Bar & Sliders by Jonathan Graft (@FlyersPh9) on CodePen.

 follow me on twitter or like the facebook page to get all the new updates!

11 Jun 2014

top bookmark managers for great collectors

Managing bookmarks are one of the tedious task for tech savvy people and and especially for those who are working with the internet, the default book mark manager that comes with Google chrome is really nice however its really difficult to filter through the book marks once its filled with a huge list .

Here is the solution,use a custom 3rd party bookmarking application.I have compiled a list of top 10 book marking apps that i have personally used so far to arrange the bookmarks effectively.

The  applications are listed here based on my personal preference and if you have a suggestion please comment them below


This is one of the best apps . and i have been using it.It gives us a web magazine feel to our bookmarks it sorts the bookmarks based on the content like videos, articles,documents etc into separate sections automatically .The app also sports a very smart search that sorts down pages using hash tags. this Google chrome extension is the best when you are collecting  data for your next project.we can create collections and share it with other users and also we can create private bookmarks .


This was my old favorite and it was really minimal and easy to use. pocket was formerly called read it later and it provided a simple way to collect all the bookmarks and save them in the cloud. One of the keyfeatures of this app was that it was cross device and cross browser combitable .Pocket has an android app whichcan be used to get all the bookmarks in your mobile or tablet..
The app also had a premium account which had features like saving a bookmark permanently and better search and library etc .


This app is only available for google chrome it helps us to save bookmarks as tiles with  screenshots.The reason why i have added this chrome only app is because of it's minimal feel and awesome features.we can create and organise the bookmarks in folders and search for them using tags and labels . 


This is a real good app when it comes to text articles.articles. Readability converts webpages into a clean view for easy reading. I use this app to collect news and article that i keep to read later. Readability removes all the extra stuff from a page like the buttons navigation ads etc and gives a well typed comfortable reading environment.

Thanks for reading the post and don't forget to subscribe via facebook & twitter. and.. if you have any suggestions pls comment it below.

10 Jun 2014

Icons fonts over png?Free icon fonts for your next web project.

what is it?

Back in old days whenever we designed a website we sliced up all the psd templates and grabbed the icons and placed them in a separate folder.This is really a time consuming process and also it just decreases the page load speed.If you have noticed , most of the new sites are using icon fonts instead of old school png's or gifs,One of the pouplar and free icon set is the fontawesome it's a free project and it available on github

The perks

 here is why you must use icon fonts
  • first of all icon fonts are much lesser in size than a  regular png .The complete fontawesome package is just 401 kb while a single png can be more than that . 
  • You get better control over the icons. Icon fonts are way more customisable than the regular fonts we can change the color,the shadow,background,and virtually anything that's possible with css
  • Free in all means unlike png's these icons are mostly open source projects so you have lesser copyright issues and hence you can use then in your commercial projects .Even if it's paid you will a get a whole bunch of icons for just the half price.
  • Much,much scalable  icon fonts are mostly like your illustrtor files they can be easily resized to any platform without having the fear of making your icons looked blured out or bulged up.
  • Retina ready  if retina display is going to be the future then these icons are just fine for them.

How to use it?

  there are many icon packages avialable for free download if you wanna checkout them then this github page  has some nice set free icon fonts hosted in github all of them are free.

So here i will just show you how to install fontawesome into your website or app:
  1.  downlod the icon package from the fontawesome homepage http://fortawesome.github.io/Font-Awesome/
  2. link the font awesome css/scss into your site. example
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Once you are done with that , you insert an icon to anywhere like this:
    <i class="fa fa-camera-retro"></i> fa-camera-retro The class name is specific to each icon , in this example we are calling a camera icon with the class " fa fa-camera-retro" . To find out the class name of other icons you can use this link http://fortawesome.github.io/Font-Awesome/icons/
  4. for example if we call that icon we would get an ouput like this : other examples: fa-adjust fa-cog fa-folder-open fa-taxi fa-cutlery fa-bookmark-o fa-coffee fa-check-square-o fa-bolt

That's all hope you can use fontawesome for your next big project. if you wanna learn more about icon fonts you can checkout this link https://github.com/showcases/icon-fonts

Do follow our twitter and Facebook pages to keep updated with all the new posts!

18 May 2014

Full page repeating grid pattern with pure HTML5 canvas

In this article iam going to show you a technique i use to generate pattern backgrounds without using images.
The patterns are dynamically generated using html 5 canvas.

To see the demo of a sample html5 pattern click here

Ok lets get started with a making a similar one.

first of all open up a basic html file like this

 <canvas id = "canvas">

The html 5 canvas tag is called in this page with an id of "canvas". Now,for resolving browser issues lets add a very basic css reset to eliminate margins and padding's that are predefined in the browsers.
*{ margin:0px; padding:0px; }

Ok now the core code comes in , this some basic JavaScript to control the canvas elements

      var a = document.getElementById("canvas");
      var ctx = a.getContext("2d");
        var width = window.innerWidth;
        var height = window.innerHeight;
         a.width = width;
         a.height= height;
         var i;
         var x,y;
         var  limit_h = height/10;
         var  limit_w = width/10;
                         ctx.strokeStyle = "white";
                          ctx.fillStyle = "#acd200";
lets understand what is actually happening here first of all we use a built in JavaScript selector to select the element with the id "canvas", next retrieve the necessary drawing context for the canvas element.

After that we stored the height and width of the current browser window in  two variables called height and width.

we set the width and height of the canvas equals to the width and height of the canvas so that the grid must not appear handicapped when the users have different screen resolutions

Now we got the width and height of the canvas,but we need to set  a limit for the grid or else the loop will go on continuously and it will keep on eating the system resources. We cannot set the limit to static number since it would make our grid appear differently on various resolutions , moreover it would give our page a handicapped feel.

To fix that problem we used two variables limit_h and limit_w which basically means the gap between the each block , which is dynamically calculated by dividing the height and width of the page by 10, so that it would give a 10px margin .

Next we use a for loop to fill each block with a block and eventually fill the whole page with such grids/
The limit of the for loop is set to limit_w so that the loop should stop after the page is filled.

you can  play with values on the code pen demo page to get your own results.

Thanks for reading the tutorial . don't forget

14 Apr 2014

A simplified way to draw circles and arcs in HTML5 canvas

Hi folks, i recently found a new technique of drawing arcs and circles without using the confusing radian system. The arc drawing function of the html5 canvas API has the following  syntax;

contextVariable.arc(x,y,radius,startAngle,endAngle, clockwise);
where contextVariable refers to the the variable in which you stored the getcontext("2d") thing and  arc is the function name x,y are the coordinates and radius as it should be, the radius of the circle and
startAngle,endAngle being the staring and ending angles; initially when i saw the syntax i too thought hey? it's very easy. But the problem really started when i decided to test it out.

20 Nov 2013

youtube channels Every web developer must subscribe to.

Hi friends today i will list out some really awesome and useful channels from youtube that helped me a lot to learn new stuff related to webdesign and development.

I was a subscriber and regular viewer of these channels ever since i started to learn web development.
You can get regular screen cast's and sessions that are really useful for quickly understanding things off.

One of the good features of video tutorials are that they are most often taught by industry professionals or people who are really dedicated to this field so while watching those videos you can quickly grasp some workflow techniques or really useful tips n tricks or even shortcuts they use.