A13: An Introduction to Twitter Bootstrap

This week, we were introduced to Twitter Bootstrap; a collection a tools used to create websites with a “mobile first” approach. With Twitter Bootstrap, web designers build a single page that adjusts its format based on the size of the users display.

I prepared for this weeks WODs by watching the assigned screencasts, fiddling the examples on Github and reading the Twitter Bootstrap documentation. All WODS, as well as Dr. Johnson’s lectures on Bootstrap, can be found at the ICS SE course website here.

WOD 1: BootstrapBrowserHistory

Goal: Recreate last week’s 3 column, browser history WOD using Twitter Bootstrap to implement a responsive layout.

While reading the requirements of this WOD, I immediately recognized that the 3 column format of the browser history page was similar to the format of the “Theses are Us” example provided by Dr. Johnson. So to begin, I imported the “Theses are Us” project into Eclipse and used it as a starting point for this exercise. Although most of the code was already written, I spent a lot of time exploring how changes to the index .html and CSS files affected the format of the page and ended up completing this WOD in SD time of 20:21. I learned a lot about using Bootstrap during my first attempt and decided to immediately try it again, this time completing it in Rx time of 13:25.

WOD 2: Responsive Kamanu

Goal: Recreate a portion of the Kamanu website implementing a responsive layout using Twitter Bootstrap.

After having completed the first WOD in Rx time, I felt confident going into this WOD considering the page we were recreating consisted of 3 sections; A nav bar at the top, an image occupying the entire body of the page and a simple footer. However, after toiling away for half an hour and still not having completed any of the sections, I no longer felt quite so confident. I struggled most with positioning the brand logo in the upper left hand corner of the nav bar; there was a padding around the image that I just couldn’t remove! Eventually, I gave up on the nav bar and decided to work on the rest of the page. After a total of 59 minutes and 21 seconds, I had a page that looked similar to the original, with the exception of the stubborn logo, and a DNF on the assignment. After watching the solution posted by Dr. Johnson, I attempted this WOD a second time and completed it in Rx time of 20 minutes and 24 seconds.

WOD 3: Responsive Castle High School

Goal: Recreate Castle High School’s webpage using Twitter Bootstrap. Hide the middle section of the page when resizing to a small screen.

Although my first attempts at WODs 1 and 2 weren’t great, I felt that I had learned a lot about Twitter Bootstrap by completing and repeating them and again felt confident going into this exercise. Overall, I found it was pretty easy to recreate the Castle High School webpage in a responsive layout and finished in Av time of 38 minutes and 17 seconds. The only requirement of this WOD that I hadn’t done before was hiding the middle section when the screen was resized to smaller dimensions, however, the information was easy to find as we bookmarked the related section of the Bootstrap documentation in a previous WOD. I redid this WOD a few hours later and improved my time by approximately 10 minutes, barely making Rx time in 29 minutes and 10 seconds.

My experience in working with HTML and CSS is very limited. In fact, I’ve done more with HTML and CSS in the last 2 weeks than ever before. In my limited experience, it seems as though programming in HTML is somewhat imprecise and involves quite a bit of trial and error. Luckily, Google Chrome Developer Tools makes it easy to inspect elements of a page to determine exactly what properties are inherited, overridden and applied. This makes debugging so much easier! And while I’m confident that as I become more familiar with the language, I will rely less on trial and error, but until that time I’ll be relying heavily on Chrome’s Developer Tools.

A11: Learning The Basics Of HTML and CSS

This week, our WODs consisted entirely of exercises in HTML and CSS. Its been a while since I’ve worked with either of these languages so I was glad to have the opportunity to refresh my skills. As in my previous post, I’ll briefly describe each WOD, but the complete description of each exercise, as well as the professor’s solutions, can be found here.

WOD 1 – Browser History 1

Goal: Using a single index.html file, create a webpage describing the history of 3 common web browsers. For each browser, display its logo and provide a link to a related page. Also, include a table of contents that allows users to jump to a specific browser on the page.

Prior to beginning this WOD, I went through HTML Dog’s beginner and intermediate HTML tutorial. These tutorials were thorough, easy to read and covered just about everything I needed in order to complete this WOD. My first attempt was completed in 21 minutes and 36 seconds (Sd time). The majority of this time was spent referring back to the HTML tutorial for the appropriate element attribute names and uses; particularly when setting up the table of contents to link to a specific part of the page. I redid this WOD the following day, after having completed the next 2 WODS and was able to complete it in 11 minutes and 31 seconds (Rx time).

WOD 2 – Browser History 2

Goal: Modify the format of the page created in WOD 1 by linking it to a CSS file.

Like the previous WOD, prior to beginning this exercise, I went through HTML Dog’s CSS tutorial. It was very informative and I felt that I had a pretty good understanding of the material before I began. So, when I first read the description of this WOD, I thought it was going to be a piece of cake, after all, all we needed to do was add a CSS file to tweak the format of the webpage. Simple, right? Wrong! My first go at it took 22 minutes and 27 seconds to complete; DNF time!

Most of the changes were simple to make, like modifying font and background colors, and changing margin widths. I struggled with importing the Google fonts and positioning the browser logos inline with the text. In fact, it wasn’t until after I watched Dr. Johnson’s solution that I realized I hadn’t correctly imported the appropriate fonts from Google and the font of the webpage was the same as it was in the previous WOD.

I repeated this exercise a day later and was able to complete it in Rx time of 6 minutes and 01 seconds.

WOD 3 – Browser History 3

Goal: Further modify the webpage format by creating three adjacent columns, each containing the history of a browser and changing the orientation of the table of contents from a vertical list into a horizontal one.

I found this WOD surprisingly easy and completed it in 8 minutes and 5 seconds (Rx time). My solution involved defining the absolute position of each column which differed from Dr. Johnson’s solution of floating each column. A day later, I repeated this WOD imitating the method implemented by Dr. Johnson and completed in 8 minutes and 30 seconds (Rx time).

There were several tools and resources presented in this section that I found extremely useful in completing these exercises:

1. HTML Dog’s HTML5 and CSS3 tutorials: I’ve attempted to teach myself HTML and CSS in the past using other online tutorials but none were as informative or as easy to read as HTML Dog’s.
2. Eclipse: Prior to this exercise, I’ve only used Eclipse to write Java programs. I was unaware that it could be used to create HTML and CSS documents as well. Having an IDE that can assist by calling attention to possible syntax errors, auto-completing tags, and color coding text make it much more convenient than using a program like notepad.
3. LiveReload: The sole purpose of this application is to watch your html/css files and refresh your browser page when it detects a change essentially allowing you to view your changes in real time. It is an extremely useful tool and now that I’ve used it, I would not want to create or edit a web page without it.

A10: Java Code WODS

Last week, I wrote about my implementation of the FizzBuzz program; a tiny method that required not much more than an integer and a for-loop to complete. This week, we were assigned our first real programming assignment complete with BufferedReaders, InputStreams, and external libraries. Since it has been almost a year since I last wrote a program this complex (at least when compared to FizzBuzz), I was curious to see just how much I had forgotten but also excited to start programming in Java again.

We were given 5 exercises, called WODs (Workout Of the Day), to complete. I’ll briefly describe each WOD but if you want more detail about each exercise, you’ll find the complete assignment here.

WOD Java-1: FileIO-CountLines
Function: Read in a file, count the number of lines in that file, then print out the total.
Time to Complete: 12min 14sec (1st attempt), 4min 43sec (2nd attempt)
Comments: In previous classes, I’ve written programs that accessed and manipulated files so when I first read the requirements for this WOD, I thought I would be able to write a solution in less than 10 minutes, however, my first attempt took over 12 minutes to complete. The majority of this time was spent trying to determine the appropriate argument for the Charset.forName() method. In the example provided on the Java Tutorial website, “US-ASCII” is passed to this method, however, this caused an error in my implementation. Eventually, I was able to determine that “UTF-8” was the correct argument for the file I was working with. Now knowing the correct argument, I decided to repeat this WOD and was able to program a solution in less than 5 minutes.

WOD Java-2: FileIO-CountWords
Function: Read in a file, count the number of words in the file, then print out the total.
Time to Complete: 9 minutes 8 seconds
Comments: A large part of my solution to this WOD came from the previous exercise. After reading the contents of the file into an array, I looped through the array, splitting the contents of each element into tokens using the StringTokenizer class, and totaling the number of tokens. I’ve used the StringTokenizer class in previous projects so implementing this solution was not too difficult and took less than 10 minutes to complete.

WOD Java-3: WebIO-CountWords
Function: Read in the contents of a webpage, count the number of words, then print out the total.
Time to Complete: 9 minutes 27 seconds
Comments: This WOD required students to download a 3rd party library by the Apache Software Foundation and reference it in our Eclipse project. I spent a considerable amount of time trying to identify what to download, and learning where to put these files and how to incorporate it into my project but once that was done, writing the program was not very difficult. Examples provided on the Apache Software Foundations website illustrate how to retrieve content from a website when given the URL. Once the content had been obtained, counting the number of words was done by using the StringTokenizer class like in the previous WOD. I didn’t attempt to program the solution until after I had already downloaded the 3rd party library so it took me 9 minutes and 27 seconds to complete this WOD.

WOD Java-4: WebIO-CountURL
Function: Accept a URL from the command line, read in the corresponding webpage, count the number of words, then print out the total. Should throw an error if an invalid URL is entered.
Time to Complete: 9 minutes 46 seconds
Comments: Implementing this WOD was fairly easy as the majority of the code was copied from the previous WOD. In order to accept a URL from the command line, I replaced the hard coded URL with the first element in the args array. I also added a try-catch block to throw an error should the user enter an invalid URL. To be sure that the program appropriately accepted an argument from the command line, I exported the project as a runnable jar file then executed it from the terminal. This was not something that I had done before, and in fact, was not aware could be done until after watching Dr. Johnsons’ solution.

WOD Java-5: WebIO-FrequencyURL
Function: Accept a URL from the command line, read in the webpage, record each word and the number of times each word occurs in the text, then list each word in alphabetical order along with the associated frequency. Should throw an error if an invalid URL is entered.
Time to Complete: 14 minutes 31 seconds
Comments: To implement this WOD, I began by coping the code from the previous exercise since both required accepting a URL from the command line then obtaining the content from the associated webpage. Instead of counting the number of words produced from the StringTokenizer, I added each token to a SortedMap object where each key, the token, is associated with an item, the frequency of that token. I needed to review the java documentation for the SortedMap object, so it took me approximately 14.5 minutes to complete this WOD.

Overall, I enjoyed this assignment. Each WOD was challenging without being too difficult. They were also a good way to refresh my knowledge in using java objects like BufferedReader, StringTokenizer and SortedMaps as well as learn new things like downloading and using 3rd party libraries and creating runnable jar files.

A09: FizzBuzz

As a reminder, the FizzBuzz program should print all numbers from 1 to 100 with the following exceptions:

• If a number is divisible by 3, print “Fizz”
• If a number is divisible by 5, print “Buzz”
• If a number is divisible by both 3 and 5, print “FizzBuzz”

My implementation of this program took 2 minutes and 16 seconds to write. However, although the code was syntactically correct and produced the expected results, Checkstyle identified several issues such as the use of magic numbers and missing braces to delimit individual if-else clauses. Below you’ll find my implementation of the FizzBuzz program after having been modified to comply with Checkstyle recommendations.

/**
 * A09: FizzBuzz in Eclipse.
 * @author Rob Namahoe
 */
public class FizzBuzz {

  /**
   * Prints all numbers from 1 to 100 with the following exceptions.
   * Prints 'Fizz' if a number is divisible by 3.
   * Prints 'Buzz" if a number is divisible by 5.
   * Prints 'FizzBuzz' if a number is divisible by both 3 and 5.
   * @param args Command line arguments
   */
  public static void main(String[] args) {
    
    final int iSTART = 1;
    final int iEND = 100;
    final int i3 = 3;
    final int i5 = 5;
    
    for (int i = iSTART; i <= iEND; i++) {
      if (i % i3 == 0 && i % i5 == 0) { 
        System.out.println("FizzBuzz");
      }
      else if (i % i3 == 0) {
        System.out.println("Fizz");
      }
      else if (i % i5 == 0) {
        System.out.println("Buzz");
      }
      else {
        System.out.println(i);
      }
    }
  }
}

In order to ensure that the program ran correctly, I modified the main method to accept a parameter, removed the for-loop and the iSTART and iEND variables. This new method would accept a parameter and if print “Fizz” if the parameter were divisible by 3, “Buzz” if divisible by 5, and “FizzBuzz” if divisible by 15. I renamed this method “fizzBuzz”. I then created a new method called FizzBuzzTest that looped through all numbers between 3 and 100 in increments of 3, 5 and 100 in increments of 5, and 15 and 100 in increments of 15. At each iteration of the loop, the value was passed to the fizzBuzz method. When looping through multiples of 3, only “Fizz” and “FizzBuzz” were be printed, when looping through multiples of 5, only “Buzz” and “FizzBuzz” were be printed, and when looping through multiples of 15, only “FizzBuzz” was be printed. I also looped through all numbers between 1 and 100 and only passed the value to fizzBuzz for numbers not divisible by 3, 5 or 15. These numbers were printed to the console, as expected.

This program wasn’t very difficult to write, however, like I mentioned earlier, Checkstyle identified several issues with my code. I was able to resolve these issues by replacing tabs with spaces, magic numbers with constants, and adding braces and javadoc comments.

This exercise has shown me that there is more to producing quality code than just getting the job done; readability and documentation are also very important.

A04: What I Hope To Learn…

There are many things about software engineering that interest me and that I hope to learn more about this semester.  For example, I’ve read that there are different strategies implemented by employers to facilitate the production of quality code, like pair programming.  I’ve also read that programmers at IBM were not allowed to use a compiler when coding and that their programs were compiled only after they left the room.  I’ve wondered if these methods were actually effective as they sound like they put a lot of pressure on the programmer to perform.

I also hope to learn how to write better, more efficient programs by learning about the industry’s standard practices.  I feel that this will also make me more confident in participating in open source projects.

I am also looking forward to learning how to use quality assurance tools to ensure my programs produce correct, reliable results.

A05: Open Source Software and the Three Prime Directives

Overview

The project I have chosen to review is jsoup; a java library that provides methods for accessing and manipulating HTML data. The jsoup project can be found on Gibhub at https://github.com/jhy/jsoup. The jsoup jar files and documentation are also available for download on their website at http://www.jsoup.org.

Prime Directive 1: The system successfully accomplishes a useful task.

In the readme file, the developers list the following as functions of their program:

• parse HTML from a URL, file or string
• find and extract data, using DOM traversals or CSS selectors
• manipulate the HTML elements, attributes and text
• clean user-submitted content against a safe white-list, to prevent XSS
• output tidy HTML

To test the programs ability to find and extract data, I ran the “ListLinksTest” example provided by the developer. In this example, the user submits a url, jsoup accesses the page at that url, analyzes the HTML data then prints the elements of that site to the console.

A list of elements obtained from HTML data.

Although this data is easily accessible by viewing the Page Source in most browsers, jsoup presents elements of the document in a clean, organized format. Internally, the elements obtained from the HTML document are stored in an array making it easy to iterate through and process all elements. In my opinion, because of its ability to present this data in a useful, manageable way, jsoup achieves prime directive #1.

Prime Directive 2: An external user can successfully install and use the system.

As a person with little experience downloading and using code obtained from Github, I found the installation of this package for use in Eclipse difficult and frustrating. The developer does not provide installation instructions on either Github or their homepage. After a few hours of Google searching and trying different things, I was still unable to install the program. I eventually downloaded the jar files from the developers homepage. I added these jar files to my Eclipse project (with the help of Google). Only then was I able to access the jsoup library.

I’m sure any experienced user of Github and Eclipse would have been able to add this library to a project and access the API’s quickly, but for a beginner like me, this was not easy, therefore, I feel that this project fails to meet prime directive #2.

Prime Directive 3: An external developer can successfully understand and enhance the system.

In reviewing the source code from Github, I am confident that an external developer can successfully understand and enhance the program. The code is clean and easy to read. The developers are consistent in their spacing making it easy to identify logical blocks. Classes, methods and variables have meaningful names. Comments are plentiful, descriptive and detailed. For these reasons, i believe jsoup achieves prime directive #3.