Shake your logo a little with a simple CSS3 animation!

I just wanted to write this blog post to get your attention to the logo of my blog :)



If you take your mouse pointer over the logo above, you will see a really simple animation I have added to it. Why don't you try it now? :) I said “simple” because it's very easy to do and you only need to add a few new lines to your style sheet. I will show you how to do it.

Also note, I'm going to show you how this animation can be included in a blogspot blog because I know there are hundreds of similar articles written about CSS3 animations and probably many of those articles will already have about this animation too. So there's no point of repeating the same thing, instead I will show you how to add this in your blogspot blog to add some value to this article. Don't worry, the blogspot part is only a addition to this article. You can use the styles in your website too.

Let's Start.

01. First login to your blogger account and go to “Templates” option.
02. Click on the “Edit HTML” button.


03. This will open the source of your template to edit. Press ctrl + F key and search for

        <style type='text/css'>






04. When you find it, insert the following css rules under that line in your template source.

@keyframes shake-logo{
16.65% {
    transform: translateX(8px);
}
33.3% {
    transform: translateX(-6px);
}
49.95% {
    transform: translateX(4px);
}
66.6% {
    transform: translateX(-2px);
}
83.25% {
    transform: translateX(1px);
}
100% {
    transform: translateX(0px);
}
}

.logo:hover, .logo:focus, .logo:active {
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-name: shake-logo;
    animation-timing-function: ease-in-out;
}





here “.logo” is the class name I've applied to my logo. Remember to add the class “logo” to your logo first. Otherwise this won't work.

I think I don't need to explain the code?

Here the main thing is in the “@keyframes shake-logo“ line. We first define an animation using the CSS keyframes rule, and give it a name as “shake-logo”.

After that we have assigned the animation to our .logo class using the animation-name: shake-logo; property.  Other properties are self explanatory.

So, that's it! Now open your website/blog and see!

Actually what I have shown you here is only the basic application of this animation. So probably this won't work in webkit browsers like Chrome / Safari or Opera ;)

Read the following articles from W3schools and learn how you can overcome this too.

http://www.w3schools.com/css/css3_animations.asp
http://www.w3schools.com/cssref/css3_pr_animation.asp

Hope you enjoyed my article. Do you think I've missed anything? Please feel free to let me know in a comment below.

A simple show / hide password function using Javascript.


We all know that password boxes in any web/desktop applications are masked with an asterisk (*) to protect it from being exposed to others while you type it. But sometimes have you noticed that when you enter your password to connect to a Wi-Fi network, there is a check-box which allows you to view the password that you typed in plain text? That is to make sure
you have entered your password correctly, so you can connect to the network in the first attempt.

I think it's a nice feature to have in any application. But in terms of security, it will not be nice :-)

Anyway, I just liked it and I wanted to make a little login page with that option included. Here is the Javascript function. It's too simple. I'm not even thinking to include this feature in any of my real applications though :-)

Note : Having your password exposed to someone else will make dangerous things happen! Therefore you should never let anybody know your passwords of important and private accounts like Gmail, Facebook etc. A person can even guess your password by looking at the keyboard while you type, and the number of asterisks that appear in the password box. Therefore be conscious.

Here is the code.

Pasword : <input type="password" name="password" id="password" />

<br/>

<input type="checkbox" value="1" name="reveal" id="reveal" onchange="reveal_pass(this); "> Show Password

<script type="text/javascript">

function reveal_pass(check_box){

    var textbox_elem = document.getElementById("password");

    if(check_box.checked)

    textbox_elem.setAttribute("type", "text");

    else

    textbox_elem.setAttribute("type", "password");

}

</script>



Here is a Demo :-)

Pasword :
Show Password


What do you think about the protection of your passwords? Do you think this is a good idea or a bad idea?

Linux chown Example

Linux chown example

chown is a linux command used to change the owner / Owner group of a file or a directory in a Linux environment. Chown is the shorter version for “Change Owner”, and it has an easy syntax so you can enter it quickly. In this article, you will see the most generic form of the usage of this command.

In order to change the owner of a file or a directory, you need to have the root privileges of the system, or you should be the owner of that particular file or directory. If not you can use the sudo prefix in front of your command to run the command as root.

Basic Syntax :

chown [OPTION]... [OWNER][:[GROUP]] FILE...


Before we move in to our examples, let's see how we can check the current owner of the file.

Enter the following command :

ls -l


It will output something similar to this.
-rw------- 1 nimeshka nimeshka 155245 Aug 12 09:55 1.png

-rw------- 1 nimeshka nimeshka  30948 Aug 12 10:09 2.png

-rw------- 1 nimeshka nimeshka 466892 Aug 12 10:18 3.png


the format of the above output is as below;

[permissions] [owner] [group] [size] [modified date & time] [file/directory name]


Example 01 : To Change Owner


chown jeff 1.png


This will assign the ownership of 1.png file to jeff user.

Example 02 : Change the Group


chown :developer 1.png


This will keep the current owner, but change the group of the file.

Example 03 : Changing both owner and group


chown jeff:developer 1.png


You can see that the owner and the group is separated by a colon (:)

Example 04 : Changing the owner of a directory recursively.


chown -R jeff /my/directory


Notice the -R option we passed to the command. -R tells the command to go through all the files and directories inside /my/directory and apply the changes.

If you want to learn more about this command, view the manual page using the command:

man chown


Please share this article with your friends if you find it useful :)

Linux – Fixing Error sudo: /usr/bin/sudo must be owned by uid.

Linux – Fixing Error sudo: /usr/bin/sudo must be owned by uid.Here is another interesting thing I came through very recently.  If you have ever used a unix based operating system like Ubuntu, I bet you have had run into problems which happens suddenly, and you have no idea what caused it :)

This is the error I got,

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set

Now I’m going to tell you how I got the above error and how I fixed it.

I searched in many forums about this, and I found that there are two reasons for getting this error.

01.     Directory “/usr/bin/sudo“  is not having permission 755.     This happens if you run a command like “sudo chmod –R 777 /usr/” - which will set the permission to 777 for all the directories recursively.

02.    Directory “/usr/bin/sudo“  is not owned by the root user. (In case if you have run a command to change the owner.)

My issue was due to reason 01, and I solved it by following the below steps.

First restart your pc, and press the SHIFT key while Ubuntu is booting.

This will bring you up the boot menu.

Select Advanced Options.

Select your OS version in (recovery mode), and press Enter Key.

Ex : Ubuntu 14.04 (recovery mode)

It will bring you up another  screen. Now select “Drop to root shell prompt” and press Enter.

It will load a command line at the bottom of the screen.

Now run each of the following commands.


mount -o remount,rw /

mount --all

chown root:root /usr/bin/sudo

chmod 4755 /usr/bin/sudo

restart

Now your pc will restart. Once you log in, you will find that you can use the sudo command again :)

Please leave a comment if this worked for you.

How to remove Vuescan watermark – Vuescan 9.4 Crack Version

remove vuescan watermarkFew months back I wrote an article about Vuescan Professional software, and one of my experiences about it. After publishing the article, I noticed that many people visited my blog looking for that software, and the problem they had is about the watermark which is embedded into the final image.

So here is the working solution for all my readers :) I’m going to tell you how to remove the Watermark from the final image and use the Vuescan Latest version without any restrictions.

The first thing you should understand is that if you are getting a watermark in scanned images, that means you are not using  a licensed version of vuescan. So in order to get rid of the watermark, either you will have to buy it, or use a cracked version of vuescan. Since you are worrying too much about the watermark, I know you are not going to buy it. So let’s continue with the second method, using cracked version. (But please note that I am not recommending you to use cracked software, I am doing this only for educational purpose and I always encourage you to buy it from the original developers, they deserve it).

Here is the link to the Vuescan 9.4 Cracked version I used to test this.

Download Vuescan 9.4 Cracked version


Once you download the above zip file, extract it and install the version which is compatible with your system (32 bit / 64 bit).

Inside the zip file there is a folder named “Key”, and inside that you can find “key.txt” which contains the serial number.

When you first run the vuescan, it will ask you to register the product. Simply enter the email, customer Id and the serial key from the above key.txt file and as soon as you complete typing, it will show as “OK” in all the text boxes. This means your details are valid :) Click on OK button and continue scanning.

Please read this section if you are still getting the watermark.

Even though vuescan accepts your serial number as valid, it might still show the watermark. The reason is that Vuescan is not remembering your registration data. Here is how to fix that error.

Continue scanning your image as usual. When you are ready to save, do not click on save button. Instead, click on help menu item, and go to “About..”. A popup dialog will appear asking you to enter the Serial number. Now enter your data there and save the image.

Boom..No watermark B)

Please let me know your comments about this.

Happy Scanning :)

jQuery Validator Validate by class name


It’s no doubt that the jQuery Form validator is a big time saver for most of the web developers around. It helps you to do the client side validation of forms without any difficulty. Recently I wanted to validate a group of form fields (a several Price Fields), which should not allow negative values. But the existing rule I have being using was only that it is required. So I had to change that, and I found that I have been doing the validations based on the field name. But my current requirement is for many fields having the same rule. So I was looking for a way to get it done in a single rule (using the class name)

Here I have found two solutions to achieve this, and I share it with you all expecting it will help to save someone's time :)

Tip: Opt out your common rules and enter the other rules inside the $().validate() as usual. You can enter common rules inside below methods after this.

Method 01: Using jQuery Validator’s  .rules() method.

Ex : I want to validate all the price fields (having class “.price”).

$('.price').each(function() {
            $(this).rules("add", {
                required: true,
                min: 0
            });
});

Note: You can use this only after the $().validate() method is called. Otherwise it will not work.

Method 02: Using the addClassRules() method.

This method is developed mainly for this type of validations. It does the iteration through all the elements by itself, which we did manually in method 01.

$.validator.addClassRules("price", {
     required: true,
     minlength: 2
});

Note: Unlike in method 01, you don't need this method to be after the $().validate() always. You can even call this method before the $().validate().

Please leave a comment and let me know if this was helpful to you.

Creating a simple 3D button with pure CSS


I'm sure that all of you might have seen a 3D (Three Dimensional) button in a website somewhere. There are many websites which use 3D buttons to grab the user attention;  they are really interesting to check out as well as to create.  So here is my very simple approach to create a 3D looking CSS 3 button. This is the very basic way to create a 3D button in CSS and it does what you expect. It has a 3D appearance; it has a 3D effect when you click on it :)





Here is the demo of the button.

NOTE: This was made only for fun. If you willing to use this in your website, you may consider to modify this.
  
Click!

CODE:
 <html>
    <head>
        <style>
            div { width: 100px;
                  height: 30px;
                  background: #F8D96D;
                  border-bottom: 7px solid #7F5A23;
                  border-left: 3px solid #7F5A23;
                  border-top: 1px solid #7F5A23;
                  border-right: 1px solid #7F5A23;
                  border-radius: 8px;
                  text-align: center;
                  padding-top: 10px;
                  color: #ffffff;
                  font-weight: bold;
                  font-size: 18px;
                  text-shadow: 5;
                  cursor: pointer;
                  text-shadow: 0px 2px 3px #555;
            }

            div:hover {
                background: #F7D86B;
            }
          
            div:active {
                border-top: 4px solid #7F5A23;
                border-bottom: 1px solid #7F5A23;
            }
        </style>
    </head>
    <body>

        <div>
            Click!
        </div>

    </body>
</html>


Please let me know your thoughts about this :)

Online HTML Preview

Online HTML Preview


online html previewHello friends, I developed another interesting tool for you today :)

Here is a little and a simple tool to write and preview html codes on the fly. Just type your html codes inside the textbox and see how it renders your html code below. Have fun…and make use of it.

Don’t forget to share this with your friends ;)


Type your HTML code here


Your Preview



 Tags : online html preview, html preview, online wysiwyg html editor, online html generator, online html editor wysiwyg, online html creator,online html editor with preview, online html text editor,online editor html, wysiwyg html

Oscommerce Password Generator

oscommerce password generator
Here is a little simple online tool for all those who are looking for a way to change the password of your oscommerce user account or your oscommerce admin account. You can simply put in your new password in the text box below, and click the generate button. This tool will generate the (MD5 + salt) hash which you can manually update in the database using phpmyadmin.

Note: Sometimes it might take 3,4 seconds to generate the password. Please be patient :)

Online Oscommerce Password Generator



Enter Your New Password :


Generated Password :

Get template file name in Wordpress easily!


You found a nice template for your Wordpress website, and then you noticed that you want to make some changes in that template to make it friendlier with your website. You have no idea which template file is delivering that content, and you don’t want to mess with a lot of codes to find that file name. You want a method to get the template file name easily.

Ok, here I have found an awesome, yet simple wordpress plugin which will do that task for you. It’s called “What the File!”.  It will show you the name of the template file which delivers the current content. Simple.


get the template file name in wordpress. What the File

First go to this link and Download the plugin. (or directly install it from Wordpress admin)

Once you complete the installation process and enabled the plugin, go to the page which you need to find the template file.

Then on the top admin navigation bar, you will find a new menu item called ‘What the File’. When you click on it, a dropdown menu will open with the template file name :).

You can click on that file name link. It will take you to the wordpress template editor page with that file opened their. All you have to do is edit.

If you wish to edit it outside the Wordpress admin panel, you can get the path and file name, then login through your FTP and make changes and upload it back.

I hope this article will surely save your time :) Please leave a comment to appreciate the time I spent to write this article if it was helpful to you.

Happy template editing ;)