Time for action – installing XAMPP

XAMPP is available for Windows, OS X, and Linux. Download the installer from using right now. Each platform will have a different installer with different extensions; Windows users will get .exe, OSX users will get .dmg, while Linux users will get .run. Perform the following steps to install XAMPP in Windows:

1. Launch the XAMPP .exe installer.
2. If the Windows User Account Control prompts Do you want to allow the following program to make changes to this computer? click on Yes.
   
3. When the XAMPP Setup Wizard window appears, click on Next to start the setup.
4. XAMPP allows us to select which components to install. In this case, our web server requirement is the bare minimum. We will only need Apache to run the server, so we deselect the other options. (Note: the PHP option is grayed out; it cannot be unchecked):
   
5. After confirming the components that will be installed, click on the Next button to proceed.
6. You will be prompted for the location to install XAMPP. Let's just leave it to the default location at C:\xampp and then click on Next.
7. Then, simply click on Next for the next two dialogs to start installing XAMPP. Wait until the process is complete.
8. When the process is complete, you should see the window stating Setup has finished installing XAMPP. Click on the Finish button to finalize the process and close the window.

Perform the following steps to install XAMPP in OS X:

1. For OS X users, open the XAMPP .dmg file. A new Finder window should appear, containing the actual installer file which is typically named xampp-osx-*-installer (the asterisk (*) represents the XAMPP version), as shown in the following screenshot:
   
2. Double-click on the installer file to start the installation. XAMPP requires your computer credentials to run the installer. So, enter your computer name and password and click on OK to give it access.
3. The XAMPP Setup Wizard window appears afterwards; click on Next to start the setup.
4. Unlike Windows, which lists the components per item, the OS X version only shows two components, namely XAMPP Core Files and XAMPP Developer Files. Herein, we will only need the XAMPP Core Files, which comprises Apache, MySQL, and PHP that we need to run the server. So, deselect the XAMPP Developer option and then click on the Next button to proceed.
   
5. You will be prompted that XAMPP will be installed in the Applications folder. Unlike Windows, this directory can't be edited. So, click on Next to proceed.
6. Then, simply click on the Next button for the next two dialogs to start installing XAMPP. Wait until it is complete.
7. When the installation is complete, you will see Setup has finished installing XAMPP displayed in the window. Click on the Finish button to finalize the process and close the window.

Perform the following steps to install XAMPP in Ubuntu:

1. Download the XAMPP installer for Linux. The installer comes in the .run extension and is available for 32-bit and 64-bit systems.
2. Open the terminal and navigate to the folder where the installer is downloaded. Assuming it's in the Downloads folder, type:

   cd ~/Downloads

3. Make the .run installer file executable with chmod u+x, followed by the .run installer filename:

   chmod u+x xampp-linux-*-installer.run

4. Execute the file with the sudo command followed by the .run installer file location, as follows:

   sudo ./xampp-linux-x64-1.8.3-4-installer.run

5. The command from Step 4 will bring up the XAMPP Setup Wizard window. Click on Next to proceed, as shown in the following screenshot:
   
6. The installer lets you select which components to install on the computer. Similar to the OS X version, there are two components shown in the option: XAMPP Core Files (containing Apache, MySQL, PHP, and a bunch of other things to run the server) and XAMPP Developer Files. As we do not need XAMPP Developer Files, we can deselect it and then click on the Next button.
7. The installer will show you that it will install XAMPP in /opt/lampp. The folder location can't be customized. Just click on the Next button to proceed.
8. Click on the Next button for the next two dialog screens to install XAMPP.

What just happened?

We have just set up a local server in our computer with MAMP. You can now access the local server with the http://localhost/ address through the browsers. For OS X users, however, the address is your computer username followed by .local. Say that your username is john the local server is accessible through john.local. The local server directory path is different for each platform:

• In Windows: C:\xampp\htdocs
• In OSX: /Applications/XAMPP/htdocs
• In Ubuntu: /opt/lampp/htdocs

  Tip

  Ubuntu users may want to change the permissions and create a symlink folder on the desktop to reach the htdocs folder conveniently. To do so, you can run the sudo chown username:groupname /opt/lampp/htdocs command through the terminal from the desktop location. Replace username and groupname to match your own.

The ln -s /opt/lamp/htdocs folder is where we will have to put our project folders and files. From now on, we will refer to this folder simply as htdocs. XAMPP is also equipped with a graphical application where you can turn the server on and off, as shown in the following screenshot:

Note

Ubuntu users, you'll have to run sudo /opt/lampp/manager-linux.run or manager-linux-x64.run.

Choosing a CSS preprocessor compiler

As we will be using LESS and Sass to generate the style sheets of our responsive website, we will need a tool that will compile or change them into normal CSS format.

Back when CSS preprocessors were just gaining momentum, the only way to compile them was through command lines, which may have been the stumbling block for many people to even try CSS preprocessors at that time. Fortunately, we now have plenty of applications with a nice graphical interface to compile CSS preprocessors; the following is the list for your reference:

I will try to cover as many platforms as possible. Regardless of which platform you are using, you will be able to follow all the projects in this book. So, here we will be using Koala. It's free and available on three major platforms, namely, Windows, OSX, and Linux.

Installing Koala in each platform is pretty straightforward.

Browser for development

Ideally, we have to test our responsive websites in as many browsers as possible, including beta browsers such as Firefox Nightly (Chrome Canary (http://www.google.com/intl/en/chrome/browser/canary.html). This is to ensure that our website is functioning well in different environments. However, during the development, we may pick one primary browser for development and as the point of reference of how the website should be put on display.

In this book, we will be using Chrome (development tool. Chrome comes with a set of tools that are ahead of the other browsers. The following are two of my favorite tools in Chrome when it comes to developing responsive websites.

Source maps

One of the pitfalls of using CSS preprocessors is when debugging the style sheet. As the style sheet is generated and the browser refers to the CSS style sheet, we will find it hard to discover where exactly the code is declared within the CSS preprocessor's style sheet.

We may tell the compiler to generate comments containing the line numbers of where the code is actually written, but source maps solve this snag more elegantly. Rather than generating a bunch of comments that eventually pollute the style sheet, we can generate a .map file on compiling CSS preprocessors. Through this .map file, browsers such as Chrome, with source maps enabled, will be able to point directly to the source when we inspect an element, as shown in the following screenshot:

As you can see from the preceding screenshot, the Chrome DevTools shown on the left with source maps enabled refer directly to the .less files that allow us to debug the website with ease. Whereas, the source maps of the one shown on the right is disabled, so it refers to .css, and debugging the website would require a bit of struggle.

The source maps feature is, by default, enabled in the latest version of Chrome. So, make sure that your Chrome is up-to-date.

Mobile emulator

There isn't any substitution for testing a responsive website in a real device, a phone, or a tablet. Each device has its own merits; some factors, such as the screen dimension, the screen resolution, and the version of mobile browser, will affect your website displayed on the device. Yet, if that is not possible, we can use a mobile emulator as an alternative.

Chrome is also shipped with a mobile emulator that works out-of-the-box. This feature contains a number of presets for many mobile devices including iPhone, Nexus, and Blackberry. This feature not only emulates the device's user agent, it also turns on a number of device specifications, including the screen resolution, pixel ratio, viewport size, and touch screen. This feature can be extremely useful for debugging our responsive website early during development, without requiring an actual mobile device.

The mobile emulator is accessible through the Emulation tab of the Chrome DevTool Console drawer, as shown in the following screenshot:

With the mobile emulator built into Chrome, we do not need to set up yet another emulator from a third-party application or Chrome extensions. Here, we will use it to test our responsive websites.

Tip

Firefox has a similar feature to Chrome's mobile emulator, though it comparably only has very few features. You can enable this feature by navigating to the Tools | Web Developer | Responsive Design View menu.