Youtube Video Downloader for Ubuntu/Linux

Ever wondered how you can download your favorite Youtube videos on your Linux box? If you are a crazy geek like I am (at least, some say so), you might have tried searching for your favorite Youtube videos on the browsers’ cache folder while it was still playing in the browser window! With the changing architectures or the structures of some of the so-called modern browsers, that method cannot be employed easily anymore, if not impossible to.

This leaves you with no other option but to go for a video downloader app. Earlier I’ve tried using a few apps for the task (I don’t remember those apps’ names exactly), I couldn’t chose one as my favorite. Recently, while browsing through some of the Ubuntu forums, I came across one more Youtube video downloader called, youtube-dl

You can install it easily from the default repositories. I am using Ubuntu 11.10 on my machine and I believe this works the same in other versions or flavors, as well. So, installing is pretty much simple:
sudo apt-get install youtube-dl

youtube-dl is a command-line tool, with a simple-to-use syntax. Though all of the previously used apps have had provided a nifty UI, I liked this CLI. On its simplest form, it looks like:
youtube-dl video_url

One of most interesting feature that I found useful is that, as an argument to youtube-dl, you can pass a batch-file containing the links to the videos.
youtube-dl -a batch_file_containing_urls

A sample batch-file would like:

DownloadList

Since the above step is non-interactive, it dumps the downloaded videos to a file named by the corresponding Youtube Video IDs which is quite meaningless, unless you are ready to rename each file manually. So, you can let that job be done by the app itself! Just specify -t or -l option to use the video’s title as its file name.

Another feature is that it provides you the option to resume a partially downloaded file, too.
youtube-dl -c video_url

For more options and fine-tuning your download, you can always consult self-explanatory man pages & documentations.

Create a Sleek-looking “Socialize” Page in Minutes Using CSS3

We’re on vacation now. No matter what I’ve learned in these holidays, but I surely did learn how to use Twitter – gaining as much information as I can – go on reading the links that have been tweeted. In the process, once I came across a website (actually I’ve forgotten the name, apologies) where I observed the “Find Us on…” page whose simple & aesthetic design caught me by surprise.

I can’t tell you exactly how the design was implemented but I was pretty much sure that no images were used on designing the page. So, since I’m also trying out some new features of CSS3 these days, I started to implement it my way and here’s the final outcome of it.

iSocialized on Chrome

When you hover on the text, the links transition to their specified colors with a nice fading effect. Looks simple, doesn’t it? And, it is! Take a look at the final output of the project here.

So let’s get started – iSocialized!

Here, I’ve used the “direct approach”, specifying everything on the source itself. So, the source may look bit lengthy and weirder!

First of all the markup. Just create a basic one with a few <div> & the anchor (<a>) tags to your social (or anything you wish) sites. Let’s call this as index.html:

<!DOCTYPE html>
<html>
	<head>
		<title>iSocialized!</title>
		<link href="scripts/style.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<div class="header">
			<span id="iSoc">iSocialize</span>
		</div>
		<div class="networks"><hr /><br />
			<a id="twitter" target="_blank" href="http://twitter.com/iChandhan/">TWITTER</a><br />

			<a id="fb" 		target="_blank" href="http://facebook.com/chandan.v.tagadur">FACEBOOK</a>&nbsp;
			<a id="tumblr" 	target="_blank" href="http://chandanv.tumblr.com">TUMBLR</a><br />

			<a id="wp" 		target="_blank" href="http://chandanv.wordpress.com">WORDPRESS</a><br />

			<a id="pt" 		target="_blank" href="http://fusionconfusion.posterous.com">POSTEROUS</a>&nbsp;
			<a id="gp"	 	target="_blank" href="https://plus.google.com/109770672342455174302">GOOGLE+</a>&nbsp;
			<a id="flickr"	target="_blank" href="http://flickr.com/photos/chandanv/">FLICKR</a><br /><br /><br /><hr />
		</div>
		</div class="footer">
			<span id="or"><b>or else you can just</b></span> <br />
			<a href="mailto:chandanv89@gmail.com" id="mail"><span id="light">SEND ME</span> MAIL</a>
		</div>
	</body>
</html>

I’ve used three divs, two for the titles and another for the content. And few links to my social sites.

Now, its time for some styling! First, the common styles that are common to all the elements of the document:

body{
	background : url(&quot;../images/texture.png&quot;);
	margin : auto 10px;
	padding : 50px;
	text-align : center;
	font-family : 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
	text-shadow : 1px 1px 1px #bbb, -1px -1px 0px #fff;
	min-width : 1000px;
}

letter_press I’ve used a light pattern as the background and everything else’s just as obvious as they look. With the text-shadow property, I’ve given the “letter-press” effect for the texts. The first set of values provides a dark-grey drop-shadow and the second set of values gives a white shadow, completing the 3D effect.

What I want is a few subtle effects. I’ve used the CSS transitions to achieve just that. Here’s the styling of our links:

a{
	color : #eaeaea;
	margin : 1px;
	padding : 1px;
	text-decoration : none;
	text-transform : uppercase;

    transition : all 0.75s ease-out;
    -moz-transition : all 0.75s ease-out;
    -o-transition : all 0.75s ease-out;
    -webkit-transition : all 0.75s ease-out;
    -ms-transition : all 0.75s ease-out;

	-webkit-mask-image : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.4)), color-stop(50%, rgba(0,0,0,.7)), to(rgba(0,0,0,0.8)));
	-moz-mask-image : -moz-linear-gradient(top,rgba(0,0,0,0.5),rgba(90,90,90,0.7));
	-o-mask-image : -o-linear-gradient(top,rgba(0,0,0,.5),rgba(90,90,90,1));
	-ms-mask-image : -ms-linear-gradient(top, rgba(0,0,0,.5),rgba(90,90,90,1));
	-ms-mask-image : filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
}

a:active{
	text-shadow : none !important;
	-o-text-shadow : none !important;
	-moz-text-shadow : none !important;
	-webkit-text-shadow : none !important;
}

The mask-image property is used to add a light, transparent gradient over the text. As of now, I’ve succeeded to get this working on just the webkit-based browsers, a sad thing :( The :active clause is just to make sure that when a link is being clicked, there would be no text shadows for the links.

Till now, we’ve added effects common to all the elements. Now, what we are going to do is, apply the styling to individual links, such that each link has a different hovering color.

#twitter{
	font-weight	: lighter;
	font-size		: 170px;
    line-height	: 170px;
}
#twitter:hover	{ color: #2298CB; }

#fb, #tumblr	{ font-weight: lighter; font-size: 70px; padding-bottom: -20px; line-height: 10px; }
#fb				{ font-weight: 700; }
#fb:hover		{ color: #3B5998; }
#tumblr:hover	{ color: #2C4762; }

#wp				{ font-weight: 900; font-size: 106px; line-height: 120px; }
#wp:hover		{ color: #463; }

#pt,#gp,#flickr	{ font-weight: 100; font-size: 46px; line-height: 18px; padding-bottom: 20px; }
#pt				{ font-weight: 500; }
#pt:hover		{ color: #FFC575; }
#gp:hover		{ color: #c11; }
#flickr			{ font-weight: 900; padding-bottom: 40px; }
#flickr:hover	{ color: #e38; }

We are now done with the anchor tags and their styling. Let’s spice up our two titles.

hr{	width: 60%; color: #ddd; background-color: #fff; }

#iSoc, #or{
	background		: url(&quot;../images/texture.png&quot;);
	position		: relative;
	font-family	: &quot;Myriad Pro&quot;, Calibri, Helverica, Arial, Sans-Serif  !important;
	font-size		: 22px;
	color			: #777;
	padding		: 5px 30px;
	padding-top	: 10px;
	top				: 25px;
	margin			: 1px auto;

	border			: 1px solid #ddd;
	border-top		: 1px solid #fefefe;
	border-left	: 1px solid #fefefe;
	border-bottom	: none;
	border-radius	: 30px;

	box-shadow			: 1px 1px #ccc;
	-o-box-shadow		: 1px 1px #ccc;
	-moz-box-shadow		: 1px 2px #ddd;
	-webkit-box-shadow	: 1px 1px #ccc;

	text-shadow		: -1px -1px 1px #fff;
	-moz-text-shadow	: -1px -1px 1px #fff;
	-o-text-shadow		: -1px -1px 1px #fff;
	-webkit-text-shadow	: -1px -1px 1px #fff;
}

#or{ top: -24px; font-variant: small-caps; }

#mail{
	font-size			: 100px;
	font-weight		: 900;
	text-shadow		: inherit;
	text-transform	: uppercase;
}

#light		{ font-weight: 100; }
#mail:hover	{ color: #6cb; }

And some accessories! The following code specifies how the content looks when you make the text selection.

::selection {
	background : #369EF7;
	background-color: #369EF7;
	color : white;

	text-shadow : none !important;
	-o-text-shadow : none !important;
	-moz-text-shadow : none !important;
	-webkit-text-shadow : none !important;
}

Tada, We’re done! Here’s the final stylesheet for the project.


body{
	background		: url(&quot;../images/texture.png&quot;);
	margin			: auto 10px;
	padding		: 50px;
	text-align		: center;
	font-family	: &quot;Myriad Pro&quot;, Calibri, Helvetica, Arial, sans-serif;
	text-shadow	: 1px 1px 1px #bbb, -1px -1px 0px #fff;
	min-width		: 1000px;
}

a{
	color			: #eaeaea;
	margin			: 1px;
	padding			: 1px;
	text-decoration	: none;
	text-transform	: uppercase;

    transition			: all 0.75s ease-out;
    -moz-transition		: all 0.75s ease-out;
    -o-transition		: all 0.75s ease-out;
    -webkit-transition	: all 0.75s ease-out;
    -ms-transition		: all 0.75s ease-out;

	-webkit-mask-image	: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.4)), color-stop(50%, rgba(0,0,0,.7)), to(rgba(0,0,0,0.8)));
	-moz-mask-image		: -moz-linear-gradient(top,rgba(0,0,0,0.5),rgba(90,90,90,0.7));
	-o-mask-image		: -o-linear-gradient(top,rgba(0,0,0,.5),rgba(90,90,90,1));
	-ms-mask-image		: -ms-linear-gradient(top, rgba(0,0,0,.5),rgba(90,90,90,1));
	-ms-mask-image		: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
}

a:active{
	text-shadow		: none !important;
	-o-text-shadow		: none !important;
	-moz-text-shadow	: none !important;
	-webkit-text-shadow	: none !important;
}

#twitter{
	font-weight	: lighter;
	font-size		: 170px;
    line-height	: 170px;
}
#twitter:hover	{ color: #2298CB; }

#fb, #tumblr	{ font-weight: lighter; font-size: 70px; padding-bottom: -20px; line-height: 10px; }
#fb				{ font-weight: 700; }
#fb:hover		{ color: #3B5998; }
#tumblr:hover	{ color: #2C4762; }

#wp				{ font-weight: 900; font-size: 106px; line-height: 120px; }
#wp:hover		{ color: #463; }

#pt,#gp,#flickr	{ font-weight: 100; font-size: 46px; line-height: 18px; padding-bottom: 20px; }
#pt				{ font-weight: 500; }
#pt:hover		{ color: #FFC575; }
#gp:hover		{ color: #c11; }
#flickr			{ font-weight: 900; padding-bottom: 40px; }
#flickr:hover	{ color: #e38; }

hr{	width: 60%; color: #ddd; background-color: #fff; }

#iSoc, #or{
	background		: url(&quot;../images/texture.png&quot;);
	position		: relative;
	font-family	: &quot;Myriad Pro&quot;, Calibri, Helverica, Arial, Sans-Serif  !important;
	font-size		: 22px;
	color			: #777;
	padding		: 5px 30px;
	padding-top	: 10px;
	top				: 25px;
	margin			: 1px auto;

	border			: 1px solid #ddd;
	border-top		: 1px solid #fefefe;
	border-left	: 1px solid #fefefe;
	border-bottom	: none;
	border-radius	: 30px;

	box-shadow			: 1px 1px #ccc;
	-o-box-shadow		: 1px 1px #ccc;
	-moz-box-shadow		: 1px 2px #ddd;
	-webkit-box-shadow	: 1px 1px #ccc;

	text-shadow		: -1px -1px 1px #fff;
	-moz-text-shadow	: -1px -1px 1px #fff;
	-o-text-shadow		: -1px -1px 1px #fff;
	-webkit-text-shadow	: -1px -1px 1px #fff;
}

#or{ top: -24px; font-variant: small-caps; }

#mail{
	font-size			: 100px;
	font-weight		: 900;
	text-shadow		: inherit;
	text-transform	: uppercase;
}

#light		{ font-weight: 100; }
#mail:hover	{ color: #6cb; }

::selection {
	background		: #369EF7;
	background-color: #369EF7;
	color			: white;

	text-shadow		: none !important;
	-o-text-shadow		: none !important;
	-moz-text-shadow	: none !important;
	-webkit-text-shadow	: none !important;
}

Inspiring Moss!

It was a regular evening, except that I was sitting on the porch holding my camera! This’s kind of unusual for me as most of the times I use to spend the evenings (usually 4pm to 7pm) inside my room, listening to my favorite tracks or say, just on my PC.

But, what brought this change to my routine was not the reason that I was bored but the weather was so amazingly cold and refreshing. I noticed some small patches of moss (Kannada: ಪಾಚಿ [pāci]) grown on some flower pots. I just took some two-three snaps.

Mosses - so small yet so graceful

Mosses - so small yet so graceful

I was amused by their sheer nature – growing on every damn damp place and giving it a whole new look! Moss is so small but, under the “macro” eyes of camera, those small “leaves” of moss look stunningly beautiful. To my surprise, even the weather added colors of its own :)

ಕಣ್ಣಿದ್ದೂ ಕುರುಡರಾದವರು…

ಕನ್ನಡ ಸಾಹಿತ್ಯದಲ್ಲಿ ಪ್ರಸಿಧ್ಧರಾದ ರಾಷ್ಟ್ರಕವಿಗಳು ಎಂ.ಗೋವಿಂದ ಪೈ, ಕುವೆಂಪು ಹಾಗು ಜಿ.ಎಸ್.ಶಿವರುದ್ರಪ್ಪ ಎಂಬುದು ಕನ್ನಡಿಗರೆಲ್ಲರಿಗೂ ತಿಳಿದಿರುವ ವಿಷಯವಾಗಿದೆ. ಆದರೆ, ಶಿವಮೊಗ್ಗ ಜಿಲ್ಲೆಯ ತಾಲ್ಲೂಕು ಕೇಂದ್ರವಾದ ಶಿಕಾರಿಪುರದಲ್ಲಿ ಅಂದರೆ, ರಾಷ್ಟ್ರಕವಿಯ ಹುಟ್ಟೂರಿನಲ್ಲಿ ಬೀದಿಯೊಂದಕ್ಕೆ “ರಾಷ್ಟ್ರಕವಿ ಡಾ. ಹೆಚ್.ಎಸ್.ಶಿವರುದ್ರಪ್ಪ ರಸ್ತೆ” ಎಂದು ನಾಮಫಲಕ ಹಾಕಲಾಗಿದೆ. ಈಗಲೂ ಜೀವಂತವಾಗಿರುವ ರಾಷ್ಟ್ರಕವಿ, ತನ್ನ ಹುಟ್ಟೂರಿಗೆ ಬಂದು ಈ ನಾಮಫಲಕವನ್ನು ನೋಡಿದರೆ ಹೇಗನ್ನಿಸಬಹುದು?

ಕಣ್ಣಿದ್ದೂ ಕುರುಡರಾದವರು...

ಕಣ್ಣಿದ್ದೂ ಕುರುಡರಾದವರು...

ಶಿಕಾರಿಪುರದಲ್ಲಿ ಕನ್ನಡ ಸಾಹಿತ್ಯ ಪರಿಷತ್ತಿನ ತಾಲ್ಲೂಕು ಘಟಕವಿದೆ, ರಕ್ಷಣಾ ವೇದಿಕೆಯೂ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ. ಜೊತೆಗೆ, ಹಲವು ಮಂದಿ ಬುದ್ಧಿಜೀವಿಗಳು, ಸಾಹಿತಿಗಳೂ ಇದ್ದಾರೆ. ಈ ರಸ್ತೆಯ ಸನಿಹದಲ್ಲಿಯೇ ನಮ್ಮ ಹಾಲಿ ಮುಖ್ಯಮಂತ್ರಿಗಳ ನಿವಾಸವೂ ಇದೆ. ಅದರೂ, ಈ ತಪ್ಪು ಮಾತ್ರ ಯಾರೊಬ್ಬರ ಗಮನಕ್ಕೂ ಬಾರದಿರುವುದು ರಾಷ್ಟ್ರಕವಿಯ ದೌರ್ಭಾಗ್ಯವೋ ಅಥವಾ ಕನ್ನಡಿಗರದೋ ತಿಳಿಯದಾಗಿದೆ…

- ವೀರಭದ್ರಪ್ಪ ತಗಡೂರು

Setup Mail on Mac for Yahoo! mail

You may think this is absurd. But you heard it right – a quick, elaborated guide is required to setup a few mail services like Yahoo! Mail on a Mac OS X.

Yahoo!

I have a few mail accounts, each one for a particular purpose. Maintaining all of them becomes easier with mail client applications like MS Outlook, Thunderbird on Windows, Evolution on most Linux OSes and Mail on Mac OS X, just to mention a few. For these many days, I was a Windows and then Linux (Ubuntu, in particular) user. I knew how to setup the clients with my mail service easily. All problems started when I got a Mac! I’ve had no idea as of how the things work on a Mac – even things as simple as cut-copy-paste!

But, finding a solution to the problems is actually an intriguing idea, at least for me. So, I just started off with the usual procedure. Then I found that Y! uses its paid service, called Plus, to provide POP Mails – quite a bad idea! There are several applications that you can use to bypass the actual Y! servers to avoid the necessity of having to purchase the premium subscription (the Y! premium account costs you around $19.99!).

The procedure that I am going to explain here doesn’t require any applications, nor any subscriptions. All it requires is your Y! Mail ID ;) Let’s get our hands dirty…

  • Open the Mail application. Goto Preferences (⌘,) and click on the Accounts tab.
Mail Preferences

Mail Preferences

  • Press the ‘+’ button found at the bottom-left corner. This will open a window to create a new account. Provide the appropriate information and click ‘Continue’. This will trigger some connectivity tests and if it issues some warning, don’t worry; just proceed to the next step.
Add Account Window

Add Account Window

  • Next window asks you to provide the Incoming Mail Server. Choose the Account Type to POP. Description is optional and can be anything you want. For the Incoming Mail Server, delete the ‘plus.’ and click ‘Continue’.
Incoming Mail Server Details

Incoming Mail Server Details

  • Next is to setup the Outgoing Mail Server. Here also, in the Outgoing Mail Server, delete the ‘plus.’ potion and proceed.
Outgoing Mail Server Details

Outgoing Mail Server Details

  • Next screen shows the Summary of your account settings. Make sure that you’ve deleted the ‘plus.’ part from both the Incoming and Outgoing mail server details. This should show you something like this.
Account Summary

Account Summary

  • After clicking ‘Create’ button, your new account will have been created and is shown in the left side-panel under Mailboxes list. Right click (CTRL Click) on the account you just created and select “Edit Yahoo!” (depends on the name you’ve given for the Description fields).
Select newly created account

Select newly created account

  • Selecting the newly created account, under the Account Information tab, click on the Outgoing Mail Server (SMTP) and select “Edit SMTP Server List…” option.
Choose to edit the server list

Choose to edit the server list

  • Click on the Advanced tab and “uncheck” the option that says ” Use Secure Sockets Layer (SSL)” (at your own risk!). Click OK, save and close the preferences window.
Advanced Settings

Advanced Settings

That’s it! If everything goes well, you should now be able to access you Y! mail account without having to shed a huge bucks or using any third-party applications… :)

Just to test, send/receive mails from the newly created account. In my case, it was a “grand success” ;-)

Test Drive!

Test Drive!

After the rain has come…

These are the some of the clicks I got a chance to capture. The short rain was simply superb. So many colors & stories to it…

This slideshow requires JavaScript.