Chapter 2. Web Development Tools

Every professional has a set of tools that facilitates their work and gets the job done. Likewise, we will also need our own tools to do our bit of building responsive websites. So, before we start working on the projects in this module, the following are the tools we have to prepare.

Tools that we will have to prepare include:

• A code editor for writing codes
• A compiler that will compile the CSS preprocessor syntax into plain CSS
• A local server to host the websites locally during the development stage
• A bower to manage the website libraries

Choosing a code editor

As soon as we start writing code for HTML, CSS, and JavaScript, we need a code editor. A code editor is an indispensible tool to develop websites. Technically, you will only need text editors such as TextEdit in OS X or Notepad in Windows to write and edit code. However, by using a code editor, your eyes will be less irritated.

Similar to Microsoft Word, which has been specially designed to make word and paragraph formatting more intuitive, a code editor is designed with a set of special features that improves code writing experiences such as syntax highlighting, auto-completion, code snippets, multiple line selection, and supporting a large number of languages. Syntax highlighting will display code in different colors, enhancing code readability and make it easy to find errors in the code.

My personal preference for a code editor, and the one that I will use in this module, is Sublime Text (http://www.sublimetext.com/). Sublime Text is a cross-platform code editor available for Windows, OS X, and Linux. It can be downloaded free for evaluation for an unlimited time.

Note

Keep in mind that while Sublime Text allows us to evaluate free of cost for an unlimited time, it may sometimes bug you to purchase the license. If you start feeling annoyed, please consider purchasing the license.

Sublime Text Package Control

One thing that I love most from Sublime Text is Package Control where we can search, install, list, and remove extensions from Sublime Text conveniently. However, Package Control does not come pre-installed with Sublime Text. So, assuming you have installed Sublime Text (which I think you should have), we will install Package Control in Sublime Text.

Time for action – installing Sublime Text Package Control

Perform the following steps to install Sublime Text Package Control; this will allow us to install Sublime Text extension easily:

1. The easiest way to install Package Control in Sublime Text is through the Sublime Text console. Open the console by navigating to the View | Console menu in Sublime Text. You should now see a new input field show up at the bottom, as shown in the following screenshot:
   
2. Due to the overhaul made in Sublime Text 3 that changed almost the entire API, the Package Control is now separated in two versions, one for Sublime Text 2 and the other one for Sublime Text 3. Each version requires a different piece of code to install Package Control. If you are using Sublime Text 2, copy the code from https://sublime.wbond.net/installation#st2. If you are using Sublime Text 3, copy the code from https://sublime.wbond.net/installation#st3 instead.
3. Paste the code that you have copied from step 2 into the console input field, as shown in the following screenshot:
   
4. Press Enter to run the codes and eventually install Package Control. Keep in mind that the process may take a while depending on your Internet connection speed.

What just happened?

We just installed Package Control to search, install, list, and remove extensions in Sublime Text easily. You can access Package Control through Command Palette…, which can be accessed by navigating to the Tools | Command Palette… menu. Alternatively, you can press a key shortcut to access it faster. Windows and Linux users can press Ctrl + Shift + P, while OS X users can press Command + Shift + P. Then, search for Command Palette… to list all available commands for Package Control.

Have a go hero – install the LESS and Sass syntax-highlighting package

As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:

• LESS Syntax for Sublime Text (https://github.com/danro/LESS-sublime)
• Syntax Highlighting for Sass and SCSS (https://github.com/P233/Syntax-highlighting-for-Sass)

Setting up a local server

Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

What just happened?

We just installed Package Control to search, install, list, and remove extensions in Sublime Text easily. You can access Package Control through Command Palette…, which can be accessed by navigating to the Tools | Command Palette… menu. Alternatively, you can press a key shortcut to access it faster. Windows and Linux users can press Ctrl + Shift + P, while OS X users can press Command + Shift + P. Then, search for Command Palette… to list all available commands for Package Control.

Have a go hero – install the LESS and Sass syntax-highlighting package

As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:

• LESS Syntax for Sublime Text (https://github.com/danro/LESS-sublime)
• Syntax Highlighting for Sass and SCSS (https://github.com/P233/Syntax-highlighting-for-Sass)

Setting up a local server

Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

Have a go hero – install the LESS and Sass syntax-highlighting package

As mentioned in the first chapter, we are going to use these CSS preprocessors to compose styles in two

of the projects in this module. Having installed Sublime Text and the Package Control already, you can now easily install the Sublime Text packages that enable color highlighting for LESS and Sass/SCSS syntax. Go ahead and follow the instructions that we have just shown to install LESS and Sass/SCSS packages, their syntax can be found at the following locations:

• LESS Syntax for Sublime Text (https://github.com/danro/LESS-sublime)
• Syntax Highlighting for Sass and SCSS (https://github.com/P233/Syntax-highlighting-for-Sass)

Setting up a local server

Having a local server set up and running on our computer is necessary while developing a website. When we use a local server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

Setting up a local server

Having a local server set up and running on our computer is necessary while developing a website. When we use a local

server to store our website, we will be able to access it through http://localhost/ in the browsers, and we will also be able to access it on mobile phone browsers and tablets, which will not be possible when we run the website under file:/// protocol. Besides, some scripts may only be functioning under the HTTP protocol (http://).

There are many applications that make setting up a local server a breeze with only a few clicks, and XAMPP (https://www.apachefriends.org/) is the application that we will be using in this module.

Time for action – installing XAMPP

XAMPP is available for Windows, OS X, and Linux. Download the installer from https://www.apachefriends.org/download.html; pick the installer in accordance with the platform you are 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:

Tools	Language	Platform	Price
WinLESS (http://winless.org/)	LESS	Windows	Free
SimpLESS (http://wearekiss.com/simpless)	LESS	Windows, OSX	Free
ChrunchApp (http://crunchapp.net)	LESS	Windows, OSX	Free
CompassApp (http://compass.handlino.com)	Sass	Windows, OSX, Linux	$10
Prepros (http://alphapixels.com/prepros/)	LESS, Sass, and so on	Windows, OSX	Freemium ($24)
Codekit (https://incident57.com/codekit/)	LESS, Sass, and so on	OSX	$29
Koala (http://koala-app.com/)	LESS, Sass, and so on	Windows, OSX, Linux	Free

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 module. 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 (http://nightly.mozilla.org/) and 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 module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web 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.

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:

Tools	Language	Platform	Price
WinLESS (http://winless.org/)	LESS	Windows	Free
SimpLESS (http://wearekiss.com/simpless)	LESS	Windows, OSX	Free
ChrunchApp (http://crunchapp.net)	LESS	Windows, OSX	Free
CompassApp (http://compass.handlino.com)	Sass	Windows, OSX, Linux	$10
Prepros (http://alphapixels.com/prepros/)	LESS, Sass, and so on	Windows, OSX	Freemium ($24)
Codekit (https://incident57.com/codekit/)	LESS, Sass, and so on	OSX	$29
Koala (http://koala-app.com/)	LESS, Sass, and so on	Windows, OSX, Linux	Free

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 module. 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 (http://nightly.mozilla.org/) and 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 module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web 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.

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:

Tools	Language	Platform	Price
WinLESS (http://winless.org/)	LESS	Windows	Free
SimpLESS (http://wearekiss.com/simpless)	LESS	Windows, OSX	Free
ChrunchApp (http://crunchapp.net)	LESS	Windows, OSX	Free
CompassApp (http://compass.handlino.com)	Sass	Windows, OSX, Linux	$10
Prepros (http://alphapixels.com/prepros/)	LESS, Sass, and so on	Windows, OSX	Freemium ($24)
Codekit (https://incident57.com/codekit/)	LESS, Sass, and so on	OSX	$29
Koala (http://koala-app.com/)	LESS, Sass, and so on	Windows, OSX, Linux	Free

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 module. 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 (http://nightly.mozilla.org/) and 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 module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web 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.

Browser for development

Ideally, we have to test our responsive websites in as many browsers as possible, including beta

browsers such as Firefox Nightly (http://nightly.mozilla.org/) and 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 module, we will be using Chrome (https://www.google.com/intl/en/chrome/browser/). It is my humble opinion that Chrome, besides running fast, is also a very powerful web 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.

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.

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.

Managing project dependency with Bower

We will need a number of libraries to manage a project dependency with Bower. In the web development context, we refer to a library as a collection of code, usually CSS and JavaScript, to add features on the website. Often, the website is dependent on a particular library for it to function its prime feature. As an example, if I built a website to convert currencies, the website will require Account.js (http://josscrowcroft.github.io/accounting.js/); it is a handy JavaScript library to convert regular numbers into currency format with the currency symbol.

It is common that we may add about five or more libraries on a single website, but maintaining all the libraries used in the website and making sure that they are all up-to-date could become cumbersome. This is where Bower is useful.

Bower (http://bower.io/) is a frontend package manager. It is a handy tool that streamlines the way we add, update, and remove libraries or dependencies (libraries that are required for the project) in our project. Bower is a Node.js module, so we first have to install Node.js (http://nodejs.org/) on our computer to be able to use Bower.

Time for action – installing Node.js

Perform the following steps to install Node.js in Windows, OS X, and Ubuntu (Linux). You may skip directly to the section of the platform you are using.

Perform the following steps to install Node.js in Windows:

1. Download the Node.js Windows installer from the Node.js download page (http://nodejs.org/download/). Choose your flavor for your Windows system, the 32-bit or 64-bit version, and the .msi or .exe installer.

   Tip

   32-bit or 64-bit

   Follow this page to discover if your Windows computer is running on a 32-bit or a 64-bit system http://windows.microsoft.com/en-us/windows/32-bit-and-64-bit-windows.

2. Run the installer (.exe or .msi file).
3. Click on the Next button of the Node.js welcome message.
4. As usual, when you are installing a software or application, you will first be prompted by the application's license agreement. Once you have read the license, click on I accept the terms in the License Agreement and then click on the Next button to proceed.
5. Then, you will be prompted for the folder where Node.js should be installed. Leave it as the default folder, which is in C:\Program Files\nodejs\.
6. As you can see from the following screenshot, the installer then prompts to ask if you want to customize the item to be installed. Leave it as it is and click on the Next button to proceed, as shown in the following screenshot:
   
7. Afterwards, click on the Install button to start installing Node.js.
8. The installation process is quite fast; it takes only a few seconds. If you see the notification that says Node.js has been successfully installed, you may click on the Finish button to close the installation window.

Perform the following steps to install Node.js in OS X:

1. Download the Node.js installer for OS X, which comes in the .pkg extension.
2. The installer will show you a welcome message and show you the location where it will install Node.js (/usr/local/bin), as shown in the following screenshot:
   
3. The installer then shows the user license agreement. If you read and agree to the license, click on the Agree button and then click on the Next button.
4. The Node.js installer for OS X allows you to select which Node.js feature to install prior to installing it into your computer. Here, we will install all the features; simply click on the Install button to start installing Node.js, as shown in the following screenshot:
   

   Note

   If you want to customize your Node.js install, click on the Customize button at the bottom left, as shown in the previous screenshot.

Perform the following steps to install Node.js in Ubuntu:

Installing Node.js in Ubuntu is quite straightforward. Node.js can be installed through Ubuntu's Advanced Packaging Tool (APT) or apt-get. If you are using Ubuntu version 13.10 or the latest version, you can launch the terminal and run the following two commands consecutively:

sudo apt-get install nodejs
sudo apt-get install npm

If you are using Ubuntu version 13.04 or earlier, run the following command instead:

sudo apt-get install -y python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

What just happened?

We have just installed Node.js and npm command, which enable us to use Bower later on through the Node.js Package Manager (NPM). The npm command line should now be accessible through the Windows command prompt or the OS X and Ubuntu terminals. Run the following command to test if the npm command works:

npm -v

This command returns the NPM version installed in the computer, as shown in the following screenshot:

Additionally, for Windows users, you may see a message at the top of the command prompt window saying Your environment has been set up for using Node.js and npm, as shown in the following screenshot:

This shows that you can perform the node and npm command within the command prompt. As we have set Node.js and npm is up and running, we are now going to install Bower.

Have a go hero – get yourself familiar with command lines

Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:

• A Designer's Introduction to the Command Line by Jonathan Cutrell (https://webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358)
• Navigating the Terminal: A Gentle Introduction by Marius Masalar (https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855)
• Introduction to the Windows Command Prompt by Lawrence Abrams (http://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/)
• Introduction to Linux Command by Paul Tero (http://www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/)

What just happened?

We have just installed Node.js and npm command, which enable us to use Bower later on through the Node.js Package Manager (NPM). The npm command line

should now be accessible through the Windows command prompt or the OS X and Ubuntu terminals. Run the following command to test if the npm command works:

npm -v

This command returns the NPM version installed in the computer, as shown in the following screenshot:

Additionally, for Windows users, you may see a message at the top of the command prompt window saying Your environment has been set up for using Node.js and npm, as shown in the following screenshot:

This shows that you can perform the node and npm command within the command prompt. As we have set Node.js and npm is up and running, we are now going to install Bower.

Have a go hero – get yourself familiar with command lines

Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:

• A Designer's Introduction to the Command Line by Jonathan Cutrell (https://webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358)
• Navigating the Terminal: A Gentle Introduction by Marius Masalar (https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855)
• Introduction to the Windows Command Prompt by Lawrence Abrams (http://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/)
• Introduction to Linux Command by Paul Tero (http://www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/)

Have a go hero – get yourself familiar with command lines

Throughout this module, we will be dealing with a number of command lines to install Bower, as well as Bower packages. Yet, if you are

from a graphic design background like I was, where we mostly work on a graphical application, operating a command line for the first time could be really awkward and intimidating. Hence, I would suggest you take time and get yourself familiar with the basic command lines. The following are a few references worth checking out:

• A Designer's Introduction to the Command Line by Jonathan Cutrell (https://webdesign.tutsplus.com/articles/a-designers-introduction-to-the-command-line--webdesign-6358)
• Navigating the Terminal: A Gentle Introduction by Marius Masalar (https://computers.tutsplus.com/tutorials/navigating-the-terminal-a-gentle-introduction--mac-3855)
• Introduction to the Windows Command Prompt by Lawrence Abrams (http://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/)
• Introduction to Linux Command by Paul Tero (http://www.smashingmagazine.com/2012/01/23/introduction-to-linux-commands/)

Time for action – installing Bower

Perform the following steps to install Bower:

1. If you are using Windows, open the command prompt. If you are using OS X or Ubuntu, open the terminal. For installing Bower, Git is required. Please ensure that Git is downloaded and installed (https://git-scm.com/downloads).
2. Run the following command:

   npm install -g bower
   

   Note

   If you are having trouble installing Bower in Ubuntu, run the command with sudo.

What just happened?

We have just installed Bower on the computer, which enables the bower command. The -g parameter that we included in the preceding command installs Bower globally, so that we are able to execute the bower command in any directory in the computer.

Bower commands

After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:

Command	Function
bower install <library-name>	Installs a library into the project. When we perform this function, Bower creates a new folder called bower_components to save all the library files.
bower list	Lists all installed package names in the project. This command also shows the new version if available.
bower init	Sets the project as the Bower project. This command also creates bower.json.
bower uninstall <library-name>	Removes the library name from the project.
bower version <library-name>	Retrieves the installed library version.

Note

You can run bower --help for the complete list of commands.

Pop quiz – web development tools and command lines

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

1. To install and remove the Sublime Text package easily.
2. To install LESS and Sass/SCSS packages.
3. To manage packages in Sublime Text.

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

1. To host the websites locally.
2. To develop websites locally.
3. To manage the project locally.

What just happened?

We have just installed Bower on the computer, which enables the bower command. The -g parameter that we included in the preceding command installs Bower globally, so that we are able to execute the bower command in any directory in the computer.

Bower commands

After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:

Command	Function
bower install <library-name>	Installs a library into the project. When we perform this function, Bower creates a new folder called bower_components to save all the library files.
bower list	Lists all installed package names in the project. This command also shows the new version if available.
bower init	Sets the project as the Bower project. This command also creates bower.json.
bower uninstall <library-name>	Removes the library name from the project.
bower version <library-name>	Retrieves the installed library version.

Note

You can run bower --help for the complete list of commands.

Pop quiz – web development tools and command lines

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

1. To install and remove the Sublime Text package easily.
2. To install LESS and Sass/SCSS packages.
3. To manage packages in Sublime Text.

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

1. To host the websites locally.
2. To develop websites locally.
3. To manage the project locally.

Bower commands

After installing Bower, we have access to a set of command lines to operate Bower functionalities. We will

run these commands in the terminal, or in the command prompts if you are using Windows, just like we installed Bower with the npm command. All commands start with bower and are followed by the command keyword. The following is the list of commands that we may use frequently:

Command	Function
bower install <library-name>	Installs a library into the project. When we perform this function, Bower creates a new folder called bower_components to save all the library files.
bower list	Lists all installed package names in the project. This command also shows the new version if available.
bower init	Sets the project as the Bower project. This command also creates bower.json.
bower uninstall <library-name>	Removes the library name from the project.
bower version <library-name>	Retrieves the installed library version.

Note

You can run bower --help for the complete list of commands.

Pop quiz – web development tools and command lines

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

1. To install and remove the Sublime Text package easily.
2. To install LESS and Sass/SCSS packages.
3. To manage packages in Sublime Text.

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

1. To host the websites locally.
2. To develop websites locally.
3. To manage the project locally.

Pop quiz – web development tools and command lines

Q1. We have just installed Sublime Text along with Package Control. What is the Package Control used for?

To install and remove the Sublime Text package easily.

To install LESS and Sass/SCSS packages.

To manage packages in Sublime Text.

Q2. We have also installed XAMPP. Why did we need to install XAMPP?

To host the websites locally.

To develop websites locally.

To manage the project locally.

Summary

In this chapter, we have installed Sublime Text, XAMPP, Koala, and Bower. All these tools will facilitate us in building the websites. As we have got the tools prepared, we can now start working on the projects. So, let's move on to the next chapter and start the very first project.