Nice hint and tips for using wget

I think most of us have used the wget command once or twice.
What i will do now is explain a few tips and tricks on using this useful command.
1. Download many files at the same time
2. Download and resume
3. Limit your download to a specific speed
4. Split your download for faster results
5. Log your download
6. Download in the background and keep using the terminal

Common use of wget:

wget http://example.com/bleh.tar

1. Download many files at the same time
There is more then one way to do this, my favourite one is to create a .txt file using the vi command and write in it the URLs of the files you want to download

vi downloads.txt

write in it

http://example.com/bleh.tar
http://example.com/tfeh.tar
http://example.com/blah.tar
http://example.com/stuff.tar

Then run wget using the -i argument

wget -i downloads.txt

2. Download and resume
You can force wget to resume any broken download like this

wget -i -c downloads.txt

3. Limit your download to a specific speed
You can use this when downloading a big file and you don’t want the connection to choke

wget -c –limit-rate=20k http://example.com/bigstuff.tar

4. Split your download for faster results
Just like free download manager or download accelerator on windows :D
To do this we will have to use awget instead of wget

aget -n=5 http://example.com/bleh.tar

Note that i could not find aget in the repos. However you can download a .deb package from http://www.enderunix.org/aget/

5. Log your download
Log all your downloads into a file

wget -c -o downloads.log -i downloads.txt

6. Download in the background and keep using the terminal

wget -cbi downloads.txt

Note that doing the above will automatically create a log file for the download process
To specify your own log file location do the following

wget -cb -o downloads.log -i download.txt



Hope this helps :)
// Jo

Javascript images pre-loader

Here you are, doing a photo gallery and in that photo gallery you have many thumbnails that on click will display the larger picture.
If you are using the simple “document.getElementById(’someid’).innerHTML=’‘” or many other javascript method to load your images then you have a problem.
When the user click he will have to wait for the image to load and sometimes will see parts of the images opening bit by bit.
This javascript preloader will load all your desired images in the background and so when you call them they are ready to be displayed :)

This will come handy also a lot when doing a javascript slide show… but this will be my next post here :)

Demo: http://joeabiraad.com/demos/preloader/
Files: http://joeabiraad.com/demos/preloader/preloader.rar

Hope it helps
//Jo

How to do a fixed footer using only CSS

The last CSS tutorial i wrote was about , well this one is about fixed footers…

You know how it is ! you just wanna keep this footer still while navigating through the page.

Peace of cake :)

The main thing is to fix that position to bottom: 0px and the rest will follow !

#footer {
	min-width:770px;
	width: 100%;
	position: fixed;
	z-index: 5;
	bottom: 0px;
}

Check the demo .
Download the files .
To get the full working menu .

Hope i helped in a way :)
// Jo

How to make a Sudoku (Only javascript used)

10 days ago, a good friend of mine asked me to write a sudoku online game for him.
He is always bored at work and wanted to lose some time, so… here it is :)

Rules of sudoku

  • Each row should contains all numbers from 1 to 9 (no repetition)
  • Each column should contains all numbers from 1 to 9 (no repetition)
  • Each 3×3 table should contains all numbers from 1 to 9 (no repetition)

Logic used

  • Start by generating each number in a cell at a time by choosing randomly from 1 to 9
  • If the number is ok and do not conflict with the other cells —> Continue to next one
  • Else —> go back one cell and choose another number

Play the game:

Download the files:

Enjoy :)

New server, new header

Well welcome to the new header styled, hosted joeabiraad.com :P
After my pagerank droped to 2 and discovering that my website is hosted with like a trillion other websites on the same server containing adult materials… I moved my blog to another server, its more expensive of course but i already like it more :)

Here is a list of the website that were being hosted with joeabiraad.com

Thats more then 468 websites…… thats insane !

Changing the welcome message in SSH

If your a linux user or maybe a simple linux server administrator with some servers at hand, the chances are that you use SSH to login there and manage them.

When a user logs in to SSH usually he sees a welcome message.
If you have an ubuntu machine like me then you will see the following message

Linux jo-desktop 2.6.27-9-generic #1 SMP Thu Nov 20 21:57:00 UTC 2008 i686

The programs included with the Ubuntu system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by
applicable law.

To access official Ubuntu documentation, please visit:
http://help.ubuntu.com/

In order to change this message just type in the terminal

sudo vi /etc/motd

Screenshot

Update:
Note: On restart your changes to /etc/motd will be reverted, the reason is that /etc/motd is a symbolic link to /var/run/motd which is rebuilt by /etc/init.d/bootmisc.sh from a template, /etc/motd.tail, at each reboot. (thank you Adam Trickett).

jo@jo-desktop:/etc$ ls -l motd
lrwxrwxrwx 1 root root 13 2008-11-27 14:18 motd -> /var/run/motd
jo@jo-desktop:/etc$

This means that to make your changes permanent you can either:
1. change

/etc/motd.tail

then reboot

2. point the /etc/motd symlink to a different file such as /etc/motd.static and make your changes there. (Also thank you Adam Trickett).

Preventing hotlinking to your website using .htaccess

What is hotlinking?

In the web community, “hotlinking” is a curse phrase.
Also known as “bandwidth stealing” by the angry site owner, it refers to linking directly to non-html objects not on one own’s server, such as images, .js files etc. The victim’s server in this case is robbed of bandwidth (and in turn money) as the violator enjoys showing content without having to pay for its deliverance. The most common practice of hot linking pertains to another site’s images.

So how to prevent someone from hotlinking to your website?
How to give them maybe a “nasty” surprise when their hotlinks become so pervasive as to have a significant effect on your bandwidth usage ?

An easy solution is to write this piece of code into your .htaccess file.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://www.mydomain.com/somelink.ext [R,L]

Of course dont forget to replace
1. “mydomain.com” by your domain name
2. gif|jpg by your desired of file extension you wish to block from referrers (ex: gif|jpg|css|js)
3. http://www.mydomain.com/somelink.ext by the page you wish to redirect to when someone is trying to access (2)

Hope it helps
// Jo

How to do a menu with sub items using CSS


Every website needs a menu, in this tutorial i am gonna show you how to do a menu with sub items using only CSS and javascript.

First lets take a look at the final result:

The HTML

<ul class="nav" id="nav">
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2 with sub</a>
	<ul>
		<li><a href="#">Sub 1</a></li>
		<li><a href="#">Sub 2</a></li>
	</ul>
	</li>
	<li class="hover"><a href="#">Menu 3 selected</a></li>
        <li><a href="#">Menu 4</a></li>
	<li><a href="#">Menu 5 with sub</a>
        <ul>
		<li><a href="#">Sub 1</a></li>
		<li><a href="#">Sub 2</a></li>
	</ul>
	</li>
	<li><a href="#">Menu 6</a></li>
	<li><a href="#">Menu 7</a></li>
	<li><a href="#">Menu 8</a></li>
	<li><a href="#">Menu 9</a></li>
</ul>

Well this is pretty straight forward, class “nav” is defined later in the stylesheet and id “nav” is used in the javascript.
Of course the class “hover” is used if you want to tell the user which page he is visiting

The CSS

html,body,ul,li{
	margin:0;
	padding:0;
	border:0;
}
.nav{
	background: url(../images/nav-bar.gif) no-repeat 0 18px;
	width: 934px;
	height: 30px;
	margin: 0 auto;
	list-style: none;
	font-size: 14px;
	padding-left: 5px;
	line-height: 15px;
	margin-bottom: -8px;
	position: relative;
	padding-top: 18px;
}
.nav li{
	display: inline;
	line-height: 30px;
	height: 30px;
	float: left;
	padding-bottom: 5px;
	margin-bottom: -5px;
}
.nav li a{
	color: #fff;
	float: left;
	height: 30px;
	padding: 0 19px;
	text-decoration:none;
}
.nav li a:hover,
.nav li:hover a,
.nav li.hover a{
	background: url(../images/hover.gif) repeat-x;
	text-decoration: none;
}
.nav li ul{
	background: url(../images/1x1.gif);
	display: none;
}
.nav li:hover,
.nav li.hover{position: relative;}
.nav li:hover ul,
.nav li.hover ul{display: block;}
.nav li ul{
	width: 125px;
	position: absolute;
	top: 31px;
	left: 0px;
}
.nav li li{
	background: #5a8a47;
	display: block;
	float: none;
	height: auto;
	font-size: 12px;
	line-height: 14px;
	padding: 4px 0 3px 18px;
	margin-bottom: 1px;
}
.nav li li a{
	float: none;
	padding: 0;
}
.nav li:hover li a,
.nav li.hover li a{background: none;}
.nav li li a:hover{
	background: none;
	text-decoration: underline;
}

Defining “html,body,ul,li” to avoid any not desired margin, padding and border.
Class “nav” is for the whole “ul”, of course you can change the width (so background pic) to suit your needs.
You can easily figure out your way in the rest

The Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
hover = function() {
	var nav = document.getElementById("nav");
	if(nav){
		var nodes = nav.getElementsByTagName("li")
		for (var i=0; i<nodes .length; i++) {
			nodes[i].onmouseover=function() {
				this.className+=" hover";
			}
			nodes[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" hover\\b"), "");
			}
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", hover);

The javascript here is responsible for the rollover menus, all it does really is add the “hover” class to an “li” element on mouseover and replace it with “” on mouseout.

Hope this is useful, you can download the files from

// Jo

Style any website using ‘Stylish’

We all know how styles are important to any website and we all spend some time styling our websites, but can you style other websites ?
For example: You often visit , you read the content… but dont like the design ? well you can change it using firefox and stylish.

I have done this for gmail and the result is incredible :D
Gmail Styled

Gmail Styled

Gmail Styled

You can get stylish from
You can also get already done styles from

A good style that i found there is:
Gray YouTube ( )

You Tube Styled

Enjoy :) // Jo

Problems with sound and video on ubuntu ?

Howdy,

I am writing this post because so many people are asking me about it.
I will not invent anything new here, i will just make a general tutorial that will fix 80% of your audio/video problems.

Please understand that i do not guarantee 100% success result, because it all depends on the hardware you have.

Before digging in complicated stuff, lets first try to install the packages.

Some of these packages include the libdvdcss package from VideoLAN and the external binary codecs package (commonly known as w32codecs) used by MPlayer and xine.