Toolin’ Up: my Web Development Set Up on Ubuntu

Over the weekend I installed the newest version of Kubuntu on my main design / development rig; a four year old Dell Inspiron Laptop. Since it had been about two years since the Dell had seen a new operating system, I decided that it was also time to give my hard drive a much needed spring cleaning. Instead of following the easier upgrade path, I installed Kubuntu 14.04 from the ground up, in a typical backup, nuke and pave fashion. Additionally, I also had to reinstall all of the applications I use on a day to day basis.

During the course of reinstalling applications there are three questions I often ask myself. First, which apps do I want to put on my new rig? Second, are the apps that I want to install serve their intended purpose better than another application? And finally, what hoops do I have to jump through in order for these applications to work? This article hopes to document the steps I took over the weekend to get my web development rig set up and ready for some serious work.

My Desktop Interface: KDE

While most Ubuntu users will use the default Unity desktop that comes straight out of the box, I prefer the KDE desktop environment. In many ways the KDE desktop resembles a traditional Windows user interface but with far more options for customization. Some of the customizations I perform from day one are:

  1. Increase the height of task bar for easier visibility.
  2. Replace the default task manager with the “icon only task manager” widget to conserve space.
  3. Add the “workspaces” widget, so I have additional desktops to play with.
  4. Add the “show dashboard” widget, so I can get to additional applications without closing any currently open windows.

My Text Editor: Sublime Text 2

To say that there is a wide selection of text editors for Linux would be a bit of an understatement. But even with the plethora of free options available, I chose to shell out seventy dollars on Sublime Text 2. The reason I prefer ST2 to an open source equivalent, like gedit, kate or geany is that even with its proprietary license and hefty price tag, Sublime Text has the best community support and free plug in ecosystem of any text editor I have seen.┬áTo install Sublime Text on Ubuntu-Based machines, see this entry on ubuntuupdates.org. Once ST is installed, I make a habit of installing the package control plugin with the directions found here. This plugin gives me access to thousands of other plugins, and is quite literally a must-have. One of my particular favourites is Emmet which lets me write out HTML in an easy to remember shorthand. For additional information on Sublime Text, I recommend Jeffrey Way’s course on tutsplus.

My Graphic Editing Applications

Although I consider myself to be more of a front-end developer than a designer, there are times when I have to create my own images for a website. The three applications I use most often are GIMP for photo and image editing, Inkscape for scalable vector graphics and Agave for creating color schemes. Installing these applications under Ubuntu-based machines are easy. From the terminal, enter:

sudo apt-get install gimp inkscape agave

Ubuntu will ask for your root password. When it is provided, all three applications will be downloaded and installed on your system. Meet the GIMP, an excellent video podcast by Rolf Steinort is an excellent place to learn how to use the GIMP to its fullest potential. And for Inkscape, I recommend the heathenx screencast.

My CMS: WordPress

What can be said about WordPress as a Content Management System? About one out of four websites on the world wide web use WordPress as their CMS of choice, which in itself speaks speaks volumes about its awesomeness. To install WordPress, see my previous article Install WordPress on Ubuntu 14.04. For learning the basics of WordPress I recommend Scott Tolinski’s WordPress Basics and Customizing WordPress series on leveluptuts.com.

My CSS Preprocessor: Sass

With the rapid adoption of the new CSS3 specifications and Responsive Web Design, writing even a static web page has become more complicated than ever. This is why preprocessors like Sass, and Less are a must-have tool of the trade for any web designer or front-end developer. Installing Sass on an Ubuntu-based system is a little more complicated than merely using an “apt-get” command. First, I had to install the newest version of ruby and its package manager, rubygems. To accomplish this feat, I used the following method:

  1. I followed steps one thru three of this article on digitalocean’s community site.
  2. From Konsole, KDE’s terminal editor, I clicked on Settings -> Edit Current Profile
  3. Finally, in the second field on the General Tab, I changed the default command from /bin/bash to /bin/bash --login.

With ruby and rubygems installed, installing Sass is a breeze. From the command line enter:

gem install sass

.

There are a lot of good plug ins for Sass, all of which can also be installed using the “gem install” command. The ones I usually install right away are.

compass:
a general purpose framework for Sass that eases the pain of css vendor prefixing, gradients and animations.
susy:
a Sass plug-in for the creation of fluid grid frameworks.
breakpoint:
a Sass plug-in for easing the pain of css media queries.
modular-scale:
a Sass plug-in that regulates vertical spacing for page elements.
sassy-buttons:

a Sass plug-in that helps create buttons for a web page.

To get started with sass, compass and susy, I once again recommend leveluptuts.com which has a wealth of information on these topics.

My Taskrunner: Gulp

Task automation is another must-have for web designers and front-end developers. By issuing a single command, Task Runners like gulp.js and grunt.js can minify html and javascript, optimize images on the web, run css preprocessing and transfer your website to a server using ftp. Back in the day, my favorite taskrunner was grunt, but I found gulp.js much easier to set up for my projects. To use gulp, you need to get a node.js server up and running on your system. To accomplish this I followed the instructions from this article from digitalocean’s community site. When node.js is installed, enter the following command in the terminal:

npm install -g gulp

For information on how to use gulp for front-end development, I recommend this article written by Mark Goodyear.

My Browser Testing Environment

Most Ubuntu-based systems come with Firefox pre-installed, but any self-respecting front-end developer will text their work on every browser that he or she can get their hands on. The browsers that run natively on Linux are Konqueror, Google Chrome, and Opera. Installing Konqueror on your system is easy. From the terminal, enter:

sudo apt-get install konqueror

To install Chrome, see this article from ubuntuupdates.org, and Opera can be downloaded directly from their website. This leaves two other browsers that are commonly used for testing, Internet Explorer and Safari. To test these browsers without having to dual-boot your system, I recommend running a virtualization app like Oracle’s Virtualbox, or even better dedicate a seperate PC for the express purpose of testing.

 

My File-Transfer Apps

When a project is finished, it has to go up on a web server. For years, ftp has been the best way to transfer files from the desktop to the web, and filezilla is the easiest way to accomplish this task. But before a project is ready for showtime, using a version control system like git can be a life saver. Although there are graphical front-ends available for git, using the command line is far more expedient. To install git and filezilla, enter this command in the terminal:

sudo apt-get install git filezilla

For a detailed tutorial on how to use git in your workflow see this video from geekblogtv.

Other Apps That Bring Me Joy

Thus far, all of the applications I have written about were somehow involved with the field of web-development and front-end design, but I feel that the following applications are also worth mentioning. The first is clementine, a media player I use to stream music while working. To install clementine, enter the following command in the terminal:

sudo apt-get install clementine

Another app I use a lot is youtube-dl a command-line utility that downloads videos for offline viewing. To install the latest version of youtube-dl, read this article from webupd8.org. Note that videos downloaded from youtube are recorded as .mpeg files, so in order to view them on Ubuntu-based systems (and to hear music on clementine), you need to install the codecs found in the ubuntu-restricted-extras package. To install the extras, enter the following command in the terminal:

sudo apt-get install ubuntu-restricted-extras

This concludes my second post on Linux Web Journal. In future posts I intend to show you how I use many of the application I mentioned in my workflow. But in the mean time, peruse the links above, learn something new and make something awesome.

Leave a Reply