July 11, 2014

Generate SSH Key for login without password in Ubuntu and Linux

There are several reasons that you might want to generate SSH key for login without password

  1. When you need daily login to different linux systems through the SSH many times and you feel annoying in entering the password every time.
  2. There are services/programs use SSH for connecting between the systems. For instance, rsync and lsyncd for file replication.

Check the steps below to create passwordless SSH login !

Assume that you have 2 servers (master server and salve server), and would like connect salve server from master server using SSH without enter password.

1. Create a SSH key in master server using this command to create RSA keys.


ssh-keygen -t rsa

2. Copy the generated SSH key from master server to salve server.


ssh-copy-id username@host

3. Access the salve server from master server.


ssh username@host

With the steps above, you are created a passwordless SSH login successfully.

July 9, 2014

Display and show PHP 500 internal server error

When you are working with PHP and sometime the browser is showing nothing but with HTTP Status code 500. It means there is an internal server error which causing by fatal error in your codes. It is difficult to identify the root cause without exception message when debugging. Therefore, we can show the exception message by changing the error display setting. There are two ways to enable this error display.

1. Modify the error display setting in php.ini

Change the setting as below in php.ini file.


display_errors = On
error_reporting = E_ALL | E_STRICT

2. Override the error display setting in runtime

When you are not allowed to modify the php.ini file, but would like to show the errors. We can change the setting in code level during runtime to override the setting in php.ini file. The codes should be inserted to the very beginning in your PHP file.


ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

PS : remember to turn off those setting in your production environment.

June 14, 2014

Internet explorer 10 removed style sheet limits

In Internet Explorer 9 or below, there are known style sheet limits which makes the css rules and styles cannot work or render properly. The limits are 4095 css rules per style sheet, only 31 style sheets can be included in page, and maximum 4 recursive @import. It makes different to other modern browsers like Firefox and Chrome. According to the Internet Explorer 10 Developer Guide, it is glad to know the above limits had been removed.

June 8, 2014

Improve WordPress Security Part 1

1. Protect your wp-config.php

When you were installing the WordPress application, you should know that all your WordPress configuration and settings are stored in wp-config.php file. Once that file had been hacked, it is possible you delete all your content from database by hacker. Now, take action to protect your wp-config.php file.

WordPress allows you to place the wp-config.php in the directory that above the WordPress directory. Let say, your WordPress directory is /var/www/wordpress, you can place your wp-config.php in /var/www. WordPress can still read your wp-config.php file. Please note that it is only possible to above one directory level, place in /var will not work.

The suggested permission for wp-config.php file is 400 or 440, according to WordPress.

2. Create an separated Database account

In this section, you need to do is to create two different database account for your WordPress. The reason is the normal operation ( such as create/edit page or blog, update media, etc ) requires SELECT, INSERT, UPDATE and DELETE privileges only, while the installation requires CREATE TABLE, ALTER, etc.

First, create an database account with full privileges for the first time installation. Then create an account with SELECT, INSERT, UPDATE and DELETE privileges and change it in your wp-config.php !

Don't underestimate the risk. It is very dangerous, if you are hosting multiple website but using the same account for your all database.

3. Backup Database

Schedule backup database is a good habit, it saves your life if your site really hacked by someone and delete all the contents. You can resume your WordPress by restore the data to database quickly since every post and page are valuable. So if you are doing that, keep backup it. If not, action now!

Popular backup database plugin

4. Avoid using the simplest account name and password

Stop using the account name like "root", "admin", "administrator", "writer", "manager" and the simplest password like consequence number, sequential number. Be remember set those more complex and keep changing it from time to time.

5. Keep updating WordPress to latest version

Keep updating your WordPress to latest version, there may have fixes for vulnerabilities for specific version. If you are not doing that, the hacker can make use of the vulnerabilities and attack your application.

May 20, 2014

Track onclick event in google adsense using jquery and iframetracker

Google AdSense is a free and simple way that can use for earning money by display Google ads in your websites. However, if you would like to bind any click events to the Google ads, it is not possible. It is because the Google ads is displaying in iframe which makes your main site javascript cannot bind any click events to it directly due to security reason (since they are in different domain).

Fortunately, there is a trick (work around) to make it possible. The idea is listen blur event in current window and set the focus to window when mouseenter the iframe. Feel strange? No. It is because when the user clicks on the Google Ads, it will pop up a window instead. At that time, it will trigger the blur event in current window. Therefore, we can capture the click event in the blur event of window.

jQuery code example like this :


<script type="text/javascript">
$(window).blur(function(e){
   // Implements in here...
});
$(document).mousemove(function(e){
    if( document.activeElement && document.activeElement.tagName == 'IFRAME' ){
        $(window).focus();
    }
});
</script>

If you feel difficult to implement it yourself, there is a powerful jQuery plugins, "iframeTracker" written by finalclap is for tracking iframe purpose. You utilize that plugins to track the click event in Google ads, for more usage please read the instructions in github.

May 10, 2014

Fix css rules and styles cannot work or render properly in internet explorer

When doing a web page that needs to support IE9 or below, you may found that css rules or styles cannot work or render properly in Internet Explorer but works in other browsers. It may related to the hidden limitation in Internet Explorer.

According to kb262161 in Microsoft, it outlines that
  • All style tags after the first 31 style tags are not applied.
  • All style rules after the first 4,095 rules are not applied.
  • On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.

Work around to solve the issue mentioned above :
  1. If you have 4095 rules in a style sheet files, try to move some rules to a separated style sheet file and include it.
  2. If you cannot eliminate the css rules, move some rules to a separated style sheet file.
  3. If @import is not necessary, skip it and directly include the style sheet file in your page instead.

March 7, 2013

Pass function as css value in jQuery

In jQuery version 1.4, it allows us to pass a function as css value for the method .css(). According to the document :

.css( propertyName, function(index, value) )
propertyName
Type: String
A CSS property name.

function(index, value)
Type: Function()

Definition: A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

The basic idea is, when you use .css() method and pass function as value. It will call the function with passing back the current element index and current value (the css property) as argument for dynamic computation or set under some conditions. Then after computed, return value for to set the target "propertyName".

For example: You can think there is a "Increase font size" button in your web site and you would like to double size the current font size when clicked the button. You can make use of .css to achieve that.

Code example : Click the "Bigger hello world"


Hello world

Source code :

<input type="button" value="Bigger hello world" id="enlargeBtn" />
<div id="helloWorldContent">
 Hello world    
</div>

<script type="text/javascript">
 $("#enlargeBtn").on('click', function(){
   $("#helloWorldContent").css('font-size', function(index, value){
     var size = parseInt(value, 10);
     return size*2;
   });
 });
</script>