Enable Mod Rewrite in Apache2 on Ubuntu

I have been working intensely with Apache2 for a few days and learning the ins and outs of Apache2.

Mod Rewrite is an Apache module used to modify urls in most CMSs like Wordpress.

Configuration for Apache2 can be found at /etc/apache2/. In Apache2, if you need to enable modules you need to copy files from /etc/apache2/mods-available/ to /etc/apache2/mods-enabled/.

Enable Mod Rewrite

Now we are ready to enable Mod Rewrite. Type the following commands:

cd /etc/apache2/
cp mods-available/rewrite.load mods-enabled/rewrite.load

The above would copy the module to the mods-enabled folder. Another option would be to create a symbolic links.

cd /etc/apache2/
ln -s mods-available/rewrite.load mods-enabled/rewrite.load

Restart Apache

All changes would not take effect until we restart Apache2.

service apache2 restart

Mod Rewrite Enabled!

Note

In Debian based systems, modules can be enabled and disabled at will using utilities provided by Debian’s Apache distribution. In our case, if you are using Debian, you can use the following command to load the Rewrite Module.

a2enmod rewrite

Good luck!

 Install PHP and MySQL with APC on Ubuntu

I have been dabbling with VPS’s for a while now and have always wanted recipes I can work with and come back to when I do my setup. I don’t want to search for what packages I need to install and have missed.

Here’s a basic setup I do. This will of course be reserved as a reference for anyone needing to setup PHP on a blank server (Ubuntu 12.04).

Apache

Chances are, you would need a web server. My choice has always been Apache.

sudo apt-get install apache2

Here, we are going to install the needed modules for Apache to work with PHP.

sudo apt-get install libapache2-mod-php5

MySQL

First of all, you would need to install MySQL.

sudo apt-get install mysql-server mysqltuner

mysqltuner is a performance script to tune performance for MySQL.

Secure your MySQL
sudo mysql_secure_installation

It will present you with a few questions, starting with your MySQL password. You will then secure parts of your MySQL installation.

PHP

If you’re like me, you would want to get the latest PHP versions available for your system version. You may need to skip this if you want to install the default distributed PHP version for your system.

Add repository for latest PHP version
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:ondrej/php5
sudo apt-get update
sudo apt-get upgrade
Install PHP
sudo apt-get install php5-common php5-mysql php5-xmlrpc php5-cgi php5-curl php5-gd php5-cli php5-fpm php-apc php-pear php5-dev php5-imap php5-mcrypt
Secure PHP Installation(optional, but recommended)
sudo apt-get install php-suhosin

Check your PHP version

php -v

You may get something like this depending on your PHP version:

PHP 5.3

PHP 5.3.6-13ubuntu3.10 with Suhosin-Patch (cli) (built: Mar 11 2013 14:30:28) 
Copyright (c) 1997-2011 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies

PHP 5.4

PHP 5.4.17RC1 (cli) (built: Jun 22 2013 19:27:26) 
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies

PHP 5.5

PHP 5.5.1-1~precise+1 (cli) (built: Jul 22 2013 07:42:13) 
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2013 Zend Technologies
    with Zend OPcache v7.0.2-dev, Copyright (c) 1999-2013, by Zend Technologies

Next Stop

A tutorial on how to host multiple sites will be arranged in a couple of weeks. Stay tuned!

 Speed Up Your Websites

Maverick: I feel the need…
Maverick, Goose: …the need for speed!

I remember the movie as my boss imitated Maverick from Top Gun. He wanted to our company product to load fast, very fast.

Speed is a big issue today.

Here are some fascinating facts and statistics by KissMetrics1.

  • 47% of consumers expect a webpage to load in 2 seconds or less
  • 40% of people abandon a website that takes more than 3 seconds to load
  • A 1 second delay in page response can result in a 7% reduction in conversions
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year
  • 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again

Slow page loads costs money. Literally. And faster websites improve user experience. Time to speed up our sites!

Determine your sites performance

So, how fast does your website load again? There are few tools available online to evaluate the speed of your site.:

  • Page Speed – Google’s tool for examining your site’s load speed
  • YSlow! – a free tool that suggests enhancements you can do for your site

Now, let’s speed up our sites!

There have been a curnicopia (I always wanted to use that word in a blog post) of tips on how to speed up your sites. Here are well-tested tips to speed up your websites.

Put Scripts at the bottom

Unless you are new to web development, you would have probably encountered this rule on a lot of websites. Viewing some websites’ sources make you want to wonder why <script> tags are just above the <body>’s end tag.

The reason is simple really. When we put <script> tags at the bottom, they block rendering while they are being loaded executed/run.

<html>
    <body>
        <p>My page already loads faster!</p>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </body>
</html>

Minify Javascripts

Javascript files, while meant to be coded by individual beings, it is just some command to the browser. No matter how legible your code is, it won’t matter to the browser. Spaces in your javascript files are still bytes. Which means they are one of the few things your browser doesn’t need but will be downloaded. Shave off the extra bytes.

Try working with a minified and un-minified version of javascript files when you work and use the minified versions of the scripts for your websites.

Un-minified version
$(function(){
    $('#button').click(function{
        alert("I have been clicked!");
    })
});
Minified version
$(function(){$('#button').click(function{alert("I have been clicked!");})});

Minify HTML

Removing whitespace is commonly used when minifying HTML.

Default values are the keys here. HTML tag attributes just like many other things have their default values. This means that there are a ton of things we don’t need to write but write anyway just because we can.

Here are a few examples of tag attributes we don’t need to write:

<form method="get">
// Better alternative
<form>
<a href="http://yourwonderfulwebsite.com/home.html">
// Better alternative
<a href="/home.html">

Final Words

Remember, slow loading pages, costs money and faster loading pages improve customer experience.

Further Reading

There are tons of information on the web about performance. Here’s a list of very good articles with regards to performance and web speed.

1 KissMetrics

 HTML5 Datalist

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Autocomplete is probably one of the most used UI implementations of the last decade.

Why shouldn’t it be? It makes it easier for websites to present possible values you would want. It makes for a sleeker form instead of having an ugly select tag.

HTML5 Datalist

As always HTML5 has come up with the neatest tricks possible. As a replacement to our old autocomplete implementations, HTML5 presents the Datalist.

How to Use

First, we will need to have some data that we want to present to our users.

<datalist id="countries">
    <option value="United States">
    <option value="Afghanistan">
    <option value="Andorra">
    <option value="Antigua and Barbuda">
    <option value="Argentina">
    <option value="Armenia">
    <option value="Australia">
    <option value="Austria">
    <option value="Azerbaijan">
    <option value="Bahamas">
    <option value="Bahrain">
    <option value="Bangladesh">
    <option value="Barbados">
    <option value="Belarus">
    <option value="Belgium">
    <option value="Belize">
    <option value="Benin">
    <option value="Bhutan">
    <option value="Bolivia">
    <option value="Bosnia and Herzegovina">
    <option value="Botswana">
    <option value="Brazil">
    <option value="Brunei">
    <option value="Bulgaria">
    <option value="Burkina Faso">
    <option value="Burundi">
    <option value="Cambodia">
    <option value="Cameroon">
    <option value="Canada">
    <option value="Cape Verde">
    <option value="Central African Republic">
    <option value="Chad">
    <option value="Chile">
    <option value="China">
    <option value="Colombia">
    <option value="Comoros">
    <option value="Congo (Brazzaville)">
    <option value="Congo">
    <option value="Costa Rica">
    <option value="Cote d'Ivoire">
    <option value="Croatia">
    <option value="Cuba">
    <option value="Cyprus">
    <option value="Czech Republic">
    <option value="Denmark">
    <option value="Djibouti">
    <option value="Burundi">
    <option value="Dominica">
    <option value="Dominican Republic">
    <option value="East Timor (Timor Timur)">
    <option value="Ecuador">
    <option value="Egypt">
</datalist>

Then we need to add our input box

<input name="countries" list="countries" />

Try it!

Try the HTML5 Datalist sample here!