Jul 14, 2014

How to remove XAMPP from Linux

How to remove XAMPP from Ubuntu (Linux) is simple. Follow the following steps:
1. XAMPP gets itself installed in “opt/lampp” directory by default.
2. Stop the XAMPP server by typing sudo /opt/lampp/lampp stop in the Terminal (you can open the terminal by pressing Ctrl+Alt+t).
3. Now type sudo rm -rf /opt/lampp
4. Check your opt directory. The folder “lampp” would have been removed.
5. You have successfully removed XAMPP from your Ubuntu.

Source: http://coranguweb.wordpress.com/2013/10/31/how-to-uninstall-xampp-from-ubuntu/

Spinner and how to preload background images

If you want to use background image for your web but it took too long to load, what can you do ?
You probably want to show a preloader (or spinner) while your background image is being loaded, right ?

If so, here are the steps (demo: http://codepen.io/anon/pen/FHCJw)

1. To display the spinner / preloaded: 
HTML:
<!DOCTYPE html>
 
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
</head>
<body>
 <div id="preloader_wrap">
  <div id="spinner_wrap">
   <div class="spinner">
    <div class="rect1"></div> 
    <div class="rect2"></div> 
    <div class="rect3"></div> 
    <div class="rect4"></div> 
    <div class="rect5"></div>
   </div>
  </div>
 </div>
 <div id="content">Your content here</div>
</body>
</html>

CSS:
#preloader_wrap {
 positionfixed;
 top0;
 left0;
 right0;
 bottom0;
 background-color#fff;
 z-index999;
}
 
#spinner_wrap {
 width200px;
 height200px;
 positionabsolute;
 left50%;
 top50%;
 background-repeatno-repeat;
 background-positioncenter;
 margin-100px 0 0 -100px;
}
 
.spinner {
 margin100px auto;
 width50px;
 height30px;
 text-aligncenter;
 font-size10px;
}
 
 .spinner > div {
  background-color#2980b9 /*dark blue*/;
  height100%;
  width6px;
  displayinline-block;
  -webkit-animationstretchdelay 1.2s infinite ease-in-out;
  animationstretchdelay 1.2s infinite ease-in-out;
 }
 
 .spinner .rect2 {
  -webkit-animation-delay-1.1s;
  animation-delay-1.1s;
 }
 
 .spinner .rect3 {
  -webkit-animation-delay-1.0s;
  animation-delay-1.0s;
 }
 
 .spinner .rect4 {
  -webkit-animation-delay-0.9s;
  animation-delay-0.9s;
 }
 
 .spinner .rect5 {
  -webkit-animation-delay-0.8s;
  animation-delay-0.8s;
 }
 
@-webkit-keyframes stretchdelay {
 0%40%100% {
  -webkit-transformscaleY(0.4);
 }
 
 20% {
  -webkit-transformscaleY(1.0);
 }
}
 
@keyframes stretchdelay {
 0%40%100% {
  transformscaleY(0.4);
  -webkit-transformscaleY(0.4);
 }
 
 20% {
  transformscaleY(1.0);
  -webkit-transformscaleY(1.0);
 }
}
 2. To hide the spinner when your image is loaded:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript">
  var jpgFile = 'http://farm4.staticflickr.com/3812/11264786296_891530550e_o.jpg'//or your own picture
 
  $("<img/>").attr('src', jpgFile).load(function() {
    $("#preloader_wrap").hide(); 
   $("body").css("background""url('" + jpgFile + "') no-repeat center center fixed"); 
   $("#content").show();
  });
 </script>

That's it ! You'll have a nice preloader and a nice background

Building my own VPS (part 2 )

Part 1http://diophung.blogspot.sg/2013/12/vps-virtual-private-server-hosting.html 


  1. Moving to Linode and be aware of unknown VPS providers.

So back to 2013 (about 8 months ago), I decided to go with ReverseHosts but I faced many problems: their servers are slow, downtime was quite often (4-5 times around this year, each time it took several hours), and this thing happened yesterday: their San Diego servers shut down due to business reason ( WTH???), and the only thing I received was an email inform that I will NOT have automatic backup, and I have to request migration to their Las Vegas server.

So I decided to go ahead with linode.com - a well-known VPS provider. I chose Linode 1024 since my demand is minimum.

Well, I was blown away by the speed differences:
root@(none):/etc# wget freevps.us/downloads/bench.sh -O - -o /dev/nul|bash
CPU model : Intel(R) Xeon(R) CPU E5-2680 v2 @ 2.80GHz
Number of cores : 1
CPU frequency : 2800.078 MHz
Total amount of ram : 989 MB
Total amount of swap : 255 MB
System uptime : 2:03,
Download speed from CacheFly: 64.8MB/s
Download speed from Coloat, Atlanta GA: 1.07MB/s
Download speed from Softlayer, Dallas, TX: 34.8MB/s
Download speed from Linode, Tokyo, JP: 12.8MB/s
Download speed from i3d.net, Rotterdam, NL: 3.89MB/s
Download speed from Leaseweb, Haarlem, NL: 9.63MB/s
Download speed from Softlayer, Singapore: 10.2MB/s
Download speed from Softlayer, Seattle, WA: 50.2MB/s
Download speed from Softlayer, San Jose, CA: 59.1MB/s
Download speed from Softlayer, Washington, DC: 24.0MB/s
I/O speed : 770 MB/s
root@(none):/etc# dd if=/dev/zero of=test bs=64k count=16k conv=fdatasync && rm -f test16384+0 records in16384+0 records out1073741824 bytes (1.1 GB) copied, 1.37065 s, 783 MB/s

I/O is superb (as expected on SSD). Cache & network bandwidth are nice, however I notice there are 2 locations with bottleneck : Atlanta GA & Rotterdam, NL.

After 2 hours with Linode, here are some of my comments:
Pros:

  • Their Linux setup is on-the-fly, you have plenty of options to setup (Debian, Ubuntu, CentOS...etc) You name it they give it. 
  • Awesome I/O : 783 MB/s on average ! I copied and movied GBs of data within the VPS and it take seconds.
  • Network speed: In general much better than ReserveHosts (except for Altanta node?).
    Download speed from Singapore: 10.2MB/s (Softlayer node)
    Upload speed from Singapore: 600KB/s (maybe because of my Starhub ISP? Gotta try again tomorrow with better bandwidth). 
Cons:
  • More expensive than cheap VPS (well, I guess the stability and speed worth it). 

2. Setting up my LAMP stack:

So now I am on a new Linux box - I'll need a new LAMP setup. My favorite and easiest installation would be XAMPP (https://www.apachefriends.org/) 

root@(none): mkdir /home/download/devroot@(none): cd /home/download/devroot@(none): wget http://downloads.sourceforge.net/project/xampp/XAMPP%20Linux/1.8.3/xampp-linux-x64-1.8.3-4-installer.run 
root@(none): ./xampp-linux-x64-1.8.3-4-installer.run

That's it ! Next step is heading to my name.com account page, and update DNS record, pointing the domain to new IP address.

Good, now I'm back online !!!