Thanks to the popularity of high profile websites that use Rails such as Hulu and Twitter, it is now considered a viable option for large sites. This kind of exposure means a lot of new development and movement. Rails seems to have outgrown many of the scaling woes of yesteryear. Now that it’s recognized in the mainstream as a stable and feature-rich platform for making websites, adoption has taken off, which means more tutorials, more resources, less bugs, lower barrier to entry and an overall better experience all around.

Another great development occurred quite recently in the Rails community. Two days before Christmas, on December 23, 2009, it was announced that Merb would be merged into Rails 3. This is another huge development which will end the duplication of efforts and fracturing of the developer community that occurred due to competition between Merb and Rails.

In the spirit of celebrating this current Rails renaissance, here are some of the best Rails resources we’ve come across in the past year. We hope you find these as useful as we did!

Less CSS

Less is an extension for CSS that allows you to use variables, perform operations such as mathematical calculations  and other neat features. It uses a Ruby script to read the .less file and generate a .css file to serve up to the browser.

Having variables is hugely helpful and it seems like an oversight in the CSS spec that it wasn’t included to begin with. Also, being able to add modifiers is nice. You can add, subtract, multiply, divide and even change colors. For instance, #FF0 + #00F would equal #FFF.

They also have mix-ins, which are classes that you can include in selectors, and it will include all of the properties from that class. This is the same thing functionally as adding that class to the elements matched by the selector, but without going into the HTML code. Mix-ins aren’t allowing us to do anything new that we couldn’t do already by adding the classes in HTML, but now it allows us to do this in CSS, without even touching the HTML. Some people will like this feature, others will deplore it– after all, we have a perfectly functional system where we can add multiple classes to a given element to achieve the same effect. But, I for one feel that this is a very useful feature to have. This is great for its reuse of code, and I love making modular CSS classes (for example, “rounded-corners”) that can be mixed into other CSS selectors.

Git and GitHub, Social Coding

These are two of the most useful tools of the year, hands down. Git caused a paradigm shift in distributed development. GitHub has become the de facto standard for Git hosting. If you’re unfamiliar with Git, read up on the Wikipedia page. To summarize, it’s a code versioning system that is well-suited for distributed development groups and open source software. It encourages users to make a fork of the repository so that any useful bug fixes, additions and changes can be easily merged back in, should the developers so desire.

I don’t see the advantage of using Git for personal projects or small in-house projects, but it is wonderful for open source efforts like Rails. It’s certainly a fine choice for any project, though I don’t see a big advantage over, say, Subversion, until you get into large scale distributed development situations like open source projects. Once you’re looking at open source projects, like those hosted on GitHub, we’re talking about a paradigm shift in efficiency.

Historically, most people would download zipped packages of code. Git encourages forking the repository instead. Let’s look at a quick example of how this works with Rails plugins.

Typically you could install a plugin by downloading some files somewhere and installing them, either with a script or by decompressing them directly to your vendor directory. This works fine but is unidirectional — you can only get the file from the developer, there is never an opportunity to submit code back, say, if you fix a bug.

The paradigm shift in efficiency that Git brings about is closing the loop: it allows you to easily submit code back to the trunk, thus capturing all those useful improvements to the code that would otherwise be lost on so many hard drives.

With GitHub, instead of downloading the Rails plugin, you fork the Git repositor to your vendor directory. Then, if you have to make changes to the plugin (which I almost always have to do, despite my best efforts to avoid it), you still retain the ability to update the code without losing your fixes. The old way was that if I wanted to upgrade a plugin that I had customized, I would have to download the new one and then manually go through and make whatever customizations I’d done. This way, you can automate the merging process and only have to go in if there are conflicts. That’s a big win to me. Then, if I actually do something with a plugin that others might find useful, I can offer up my own fork on GitHub, or submit it to the trunk if I think it’s useful enough to be included there.

Although Git was released in 2005 and GitHub in 2008, I included them on the 2009 list here because I think they have really broken through to the mainstream in a big way this past year. GitHub achieved meteoric rise during 2009. In January alone 17,000 new repositories were made, according to a talk given by GitHub founders at Yahoo in February of that year. In July of 2009 they had 90,000 unique repositories, double the previous year– and 45,000 forks of those repositories.

So, get on the bandwagon! Head over to GitHub and see what they have to offer. Or, if you don’t know where to start, check out this next useful resource for pointers …

The Ruby Toolbox

The Ruby Toolbox is a wonderful resource for finding out what is popular. It uses metrics such as SVN commits and GitHub forks to determine which Ruby scripts are most popular. You can find out about a lot of great tools this way. I’ve discovered plenty of useful Rails gems and plugins here. There are also some useful standalone Ruby scripts for a variety of development tasks, such as Less, which doesn’t depend on Rails to do it’s thing.

Prawn, PDF Generation Made Easy

Prawn is a gem for generating PDFs. Let me tell you, working with PDFs is never easy, but Prawn greatly reduces the pain.

Check out this tutorial at RailsTips for more info.

jRails

I think it’s pretty obvious that jQuery has hit the big time in popularity. Endorsements by Microsoft, Amazon.com and other major players have led it to become the go-to JavaScript library of 2009. While Prototype still hangs in there, and MooTools has a great offering, an article I read recently summed it up perfectly when they said ‘jQuery is the guitar.’ It had a screen grab of Google search results for guitar versus banjo, along with similar numbers for jquery versus mootools. You get the idea. If you aren’t using jQuery, you’re playing the banjo. If you want to really rock out, get on the bandwagon!

I am being facetious here but there is certainly some truth to the fact that a web developer in 2010 must be well-versed in jQuery. It’s also a viable alternative to Prototype in Ruby on Rails. In fact, I’ve heard that Rails 3 will be JavaScript framework agnostic, but don’t quote me on that.

In any case, you don’t have to wait until Rails 3 to start using jQuery in your Rails app. Simply install the jRails gem and you can go along using all those nifty Rails helpers, completely unaware that they are now implemented in jQuery instead of Prototype. Isn’t encapsulation great?

HAML

HAML (pronounced like Mark “Luke Skywalker” Hamill’s last name) is a great alternative to HTML. You write clean, concise HAML and the parser generates verbose and ugly HTML to serve up to the browser. Thus you can avoid typing those obnoxious closing tags that markup languages are so fond of. Keep your code simple, clean and pure. Or that’s the idea.

In practice, HAML can be a bit complex. Check out the HAML Wikipedia page to see what I mean — look at all those obscure symbols. But once you learn what they all mean, it is a very concise, some might say beautiful language.

Paperclip

What can I say? Paperclip rocks. It is the standard for attachments in Rails and with good reason. It has been consistently updated, bug-fixed, and best of all, it is simple with not a bit of bloat. It requires the bare minimum of information from you, the developer, and does all the heavy lifting– even light lifting like database migrations– for you.

The next time you need to allow for file uploads in your Rails app, look no further than Paperclip.

Acts_As_Taggable_On, a Gem For Tagging

Originally forked from Acts As Taggable On Steroids, the truncated form, has a number of improvements and goodies. Here is an excerpt from the Readme:

This plugin was originally based on Acts as Taggable on Steroids by Jonathan Viney. It has evolved substantially since that point, but all credit goes to him for the initial tagging functionality that so many people have used.

For instance, in a social network, a user might have tags that are called skills, interests, sports, and more. There is no real way to differentiate between tags and so an implementation of this type is not possible with acts as taggable on steroids.

Enter Acts as Taggable On. Rather than tying functionality to a specific keyword (namely “tags”), acts as taggable on allows you to specify an arbitrary number of tag “contexts” that can be used locally or in combination in the same way steroids was used.

Read more at Github.

Thinking Sphinx, Front End to Sphinx Search Engine

Thinking Sphinx is a great Ruby client to the Sphinx search engine that allows your Rails application to seamlessly integrate with Sphinx. This means you can get blazing-fast search results that are so fast because they’ve been optimized with filesystem-based indices, and even delta indices which only track changes to those indices, meaning they can avoid database calls when possible. Sounds fancy, huh? In practice, it’s a relatively painless set up that gets you professional quality search results. Sure, it can’t beat Google Mini, and feature for feature, heavy hitters like Java’s SOLR may win out, but for every project I’ve worked on, this has been sufficient. I like it a lot better than Ultrasphinx, the other Sphinx front end I’ve worked with.

All right, that’s all I have for now.  I’m sure I missed tons of great resources.

Please add your own favorite Ruby on Rails gems, plugins and resources in the comments!

It is the images on the top right.

I wrote this in Object Oriented format so you can use it again and again on the same page.

Javascript:

var ImageGallery = new Function();

ImageGallery.prototype = {
 initialize: function(mainImage, listWrapper){
  // large image that is shown
  this.mainImage = document.getElementById(mainImage);
  // a list of all the anchors for the thumbnails. Must be a tags for graceful degradation
  this.thumbnails = document.getElementById(listWrapper).getElementsByTagName("a");
  // 0 image is shown already so the first one we want to switch to is the next image or 1
  this.i = 1;
  // this is a work around to allow calling this within nested functions
  var Scope = this;
  // Here starts the rotating of the image by first focusing the thumbnail, then switch the primary image
  this.start = setInterval(function(){
   Scope.focusCall();
  // Here we choose 5 seconds in between each image change. You may want to change this.
  }, 5000);
  // This lets the browser know to do something if one of the thumbnails is clicked
  this.clickEvent();
 },

 // This stops the rotation of the thumbnails. We do that if the user clicks one of them
 stop: function(){
  if (this.start)
   clearInterval(this.start);
 },

 // When an thumbnail loses focus we must use this css class now
 resetBorderColor: function(reset){
  reset.getElementsByTagName("img")[0].className="thumbnailDefault";
 },

 // When the thumbnail gains focus we most give it the corresponding styles
 focusBorderColor: function(focused){
  focused.getElementsByTagName("img")[0].className="thumbnailFocus";
 },

 // Here we grab the href of the a tags and make their path be the path of the current image
 imageRotator: function(){
  this.mainImage.src = this.thumbnails[this.i].href;
  this.previousImage = this.thumbnails[this.i];
  this.i++;
  // This closes the loop for the rotation
  if (this.i == this.thumbnails.length)
   this.i = 0;
 },

 // We focus the thumbnail
 focusCall: function(){
  // reset the last image that was shown
  if (typeof this.previousImage != 'undefined')
   this.resetBorderColor(this.previousImage);
  // Remember the newer one
  this.currentImage = this.thumbnails[this.i];
  // Give the newer image some focus
  this.focusBorderColor(this.currentImage);
  var Scope = this;
  // Les that have image rotate to the new one 300 miliseconds after the thumbnails get the css focus
  window.setTimeout(function(){
   Scope.imageRotator()
  // You may want to change this number
  }, 300);

 },

 // This is what happens when you click the thumbnails
 clickEvent: function(){
  var Scope = this;
  for (k = 0; k < this.thumbnails.length; k++) {
   this.thumbnails[k].onclick = function(){
    if (typeof Scope.previousImage != 'undefined')
     Scope.resetBorderColor(Scope.previousImage);
    Scope.focusBorderColor(this);
    // Stop the rotation
    Scope.stop();
    // This is where the switching happens for the click
    Scope.mainImage.src = this.href;
    Scope.previousImage = this;
    // Make sure to not allow default behavior of the a tag
    return false;
   }
  }
 }

}

This is to load it on the window object and create an instance of the viewer

var imageGallery1 = new ImageGallery();

// Not sure where I got this.. I didn't write this but it allows you to load multiple functions on the window.onload.
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != "function") {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func();
  }
 }
}

var onLoad = function() {
 imageGallery1.initialize("index_largepic_display", "index_thumbnail_display");
}

addLoadEvent(onLoad);

For the version on my homepage alexgrande.com here is the CSS and HTML. The CSS is up to you but I suggest following a similar mode with the HTML

HTML:

<div id="gallery">
     <ul id="index_thumbnail_display">
        <li>
   <a href="images/index/fernlarge.jpg" >
  <img class="thumbnailDefault" src="images/index/fernthumb.jpg" alt="A picture of a fern just as it is unraveling in front of a log." />
   </a>
 </li>

        <li>
   <a id="partythumb" href="images/index/partylarge.jpg" >
      <img class="thumbnailDefault" src="images/index/partythumb.jpg" alt="Downtown Seattle at night." />
   </a>
 </li>

        <li>
   <a id="alexthumb" href="images/index/alexlarge.jpg" >
      <img class="thumbnailDefault" src="images/index/alexthumb.jpg" alt="I'm on a laptop at night in a field on using the internet via hacking a telephone box...legally." />
   </a>
 </li>
        <li>
   <a href="images/index/trucks.jpg" >
     <img class="thumbnailDefault" alt="Trucks lined up in Sodo in Seattle at night." src="images/index/trucksthumb.jpg" />
   </a>
        </li>
      </ul>
      <img id="index_largepic_display" src="images/index/fernlarge.jpg" alt="A picture of a fern just as it is unraveling in front of a log." />
</div>

CSS:

div#gallery {
 position:relative;
 float: left;
 overflow: hidden;
 width: 65%;
}

img#index_image_display {
 border:1px black solid;
 margin-bottom:20px;
}

ul#index_thumbnail_display {
 list-style-type:none;
 position:absolute;
 top: 0;
 left: 0;
 margin-top: 15px;
}

ul#index_thumbnail_display li a {
 padding:10px;
}

.thumbnailDefault {border: 1px solid gray !important;}

.thumbnailFocus {border: 1px solid red !important;}

$(document).ready(function() {
    $("table.innercart tr:last").css("border", "none");
});

You can compare to prototype by going here

Event.observe(window, "load", function() {
    $$(".homepageContainer .upcomingEvents").last().setStyle({
        border: 0
    });
});

You can compare to jQuery by going here

The first thing to understand as an interviewer is the requirements of the job position and what competencies a candidate must possess to be a good fit. If the job is for back-end development, then experience working with databases, performance tuning, and writing scalable code is crucial, and only a cursory understanding of HTML and CSS is required. Alternately, for UI development work, it isn’t necessary to have a candidate who is wrapped up in the back-end code or has Big O notation at the tip of their tongue. There are certainly jacks-of-all-trades but when interviewing, it’s better to focus on a few crucial areas than try to set high standards for all areas across the board.

These are some of the areas you may want to explore, depending on the requirements of the position:

Software Development Skills

• Proficiency in at least one high-level programming language: C++, Java
• Basic understanding of object-oriented design & analysis: classes/inheritance, interface vs implementation, encapsulation
• Experience with source code version control: SVN, CVS, P4
• Algorithms: binary search, quicksort
• Data structures: array, hash, linked list
• Complexity/performance analysis: Big O notation, performance testing

Web Development Skills

• Candidate tests web-deployed code in big 3 browsers: IE6+, Firefox 2+, Safari 2+
• Candidate uses browser-specific debugging tools: IE Web Developer Toolbar, Script Debugger/Script Editor (IE), Firebug (Firefox), WebKit/Drosera (Safari)
• Extensive knowledge of at least one JS framework: jQuery, Prototype, MooTools, YUI
• Experience creating dynamic, database-driven websites: PHP/JSP/ASP, MySQL etc
• Candidate uses Selenium for front-end automated testing
• Proficient in Fireworks or other image editing software, and knowledgeable about how to best export images for the web (CSS sprites, GIF/JPG/PNG, etc)
• Follows front-end best practices like CSS-based layouts and unobtrusive JavaScript
• Experience developing rich user interfaces (drag-and-drop, Ajax, web applications/RIAs, animation effects)

General and Miscellaneous Skills

• Familiarity with agile development methodology: scrum, burndown charts
• Proficiency at Search Engine Optimization (SEO), Search Engine Marketing (SEM), and related fields
• Knowledgeable about security vulnerabilities in code. Experience with threat analysis software (e.g. Fortify for Java)
• Familiarity with automated unit/integration tests: JUnit (Java), Selenium (front end)
• DBA-related skills such as database optimization
• Usability skills and knowledge of user behavior
• Project management skills

You can choose from these or other criteria to create a baseline for what makes an ideal candidate, ignoring the skills which aren’t relevant. Once you’ve determined the skills necessary for the position, you may find that a Ph.D. is less qualified than someone without a college degree, depending on the skills required. So, never make assumptions about candidates simply based on their credentials or previous work experience. Developers can take drastically different amounts of time to complete tasks based on their prior experience and their ability to learn new things quickly.

Criteria for Various Job Positions

Let’s look at a few example job positions and apply criteria from the list above.

Quality Assurance Engineer

An ideal QA engineer for a website will be an expert at creating automated test suites for front and back end, and should also be aware of security issues. So you could focus the interview on how they choose to write test suites, and come up with sample test suites for real-life objects (e.g. an elevator). Then you could ask them to list some of the common security threats (e.g. XSS, XSRF) and how to mitigate them.

Of course, if you already have a security engineer at your company, then you may not require your QA to wear another hat. But for most small- to medium-sized businesses, it’s most efficient and cost effective for your developers to wear many hats. In fact, you may have a software developer who also does QA on the site, or a QA engineer who does project management. It all depends on the size of your company and the particular restraints in budget for your development team.

Software Developer / Programmer

Let me say right off the bat that I’ve never conducted a software development interview. But, I have been through a few, and I have an idea of what types of questions I would ask depending on the position.

There are some general software development skills that I would consider, such as experience with SVN (or other source control), automated testing, knowledge of data structures and algorithms, and perhaps object oriented design and analysis.

If the candidate is a Java developer, then you can ask about things like exception handling, reflection, familiarity with libraries (Swing, Struts, JSF etc), or other Java-specific questions. If they are a C++ developer then you should drill down into memory management, constructors/destructors, and other tropes of C++. It’s up to you as the interviewer to determine the right questions to ask based on the job requirements, or to find someone else to conduct the interview if you can’t. I know I would have a hard time conducting an interview with a C++ developer, unless I had a “cheatsheet” with all the correct answers to the questions.

Web Developer

For a web development position, the focus will be less on knowledge of traditional computer science and more on the candidate’s knowledge of current best practices. Since best practices are always changing, the ideal web developer is enthusiastic and passionate about their field, and stays up to date by reading/contributing to blogs, belonging to email lists or other online communities and generally keeping “in the know” about the best way to solve problems.

Unlike traditional computer programming, in which code is executed in a controlled environment and changes to the language take years to complete, web development is a fast-paced field where changes happen all the time and code is executed in a wide range of environments, each with its own caveats and bugs. So, the ideal web developer is familiar with the issues surrounding development on each platform and environment, especially the Big 3 browsers (IE, Firefox and Safari).

Interview Coding Challenges

A great way to test a developer is to actually have them write some code for you. As they say, “the proof is in the pudding,” and even a developer who successfully answers your questions may not be able to complete the test put forth. The test can be verbal (if conducting the interview by phone), on a whiteboard (if in person) or you can give the candidate a time limit and have them email you the code. The choice is yours, just make sure that you choose one modality for all candidates. It isn’t fair comparing one candidate’s typed code to what another said on the phone, or drew on a whiteboard. Also remember that generally typed code will be higher quality than that spoken over the phone or written on a whiteboard.

I’ve posted a few JavaScript challenges on this blog that would make good interview questions for a JS developer. You could also adapt some of these to other languages such as C++, PHP or Java:

• Reverse a Linked List
• Dispense Change
• Cardinal Numbers

Other challenges include reversing a string, reversing the words in a string, finding words that occur in both files, converting a clock from digital time to degrees (e.g. for an analog clock’s hands), or generally any other relatively simple test you can come up with.

Layouts and HTML/CSS

For candidates doing CSS, just send them a mock-up and give them a reasonable amount of time to complete the HTML/CSS for it. You could optionally send a PSD or layered PNG, but more commonly people just send flat images. Really, the test shouldn’t be much — maybe the wireframe for a site, or a navbar, menu or UI component. You can also give them some challenge questions about explaining various CSS properties and how to use them. Challenges I’ve had in the past are:

• Make a banner and horizontal navbar that matches the dimensions of a wireframe
• Make a 3-column site with a fluid-width center column
• Create a vertical drop-down menu or horizontal flyout menu (bonus points for a cross-browser CSS-only solution, though JavaScript solutions are accepted)
• Explain the difference between absolute and relative positioning, and what happens when you put one type of element inside another
• Explain the difference in block and inline display
• Explain what effect float has on elements. Does float change elements’ display property, and if so, does it make it block or inline? (Answer: block)
• Explain what effect z-index has on elements and the natural z-index order.
• Explain CSS specificity.

On this last point, CSS specificity, I find it’s fun to show a list of CSS rules and ask which rule wins out. If you know the trick how rules are calculated, it’s easy to tell:

<!-- Sample HTML code -->
<p class="description" id="main">
  Some text.
  <span class="special">
      Some more text.
  </span>
</p>

/* Challenge:
 * What color is the "special" text? */

body .description span {
   color: blue;
}

p.description {
   color: red;
}

body .description .special {
   color: pink;
}

#main .special {
   color: orange;
}

#main span {
   color: green;
}

For those of you unfamiliar with how CSS specificity is calculated by browsers, it is a point-based system where the selector with the highest point value wins. The three main things selectors consist of are elements, classes and ids. These are worth 1 point, 10 points and 100 points respectively. Given this knowledge, do you know which rule wins out in the above example?

By calculating the point values of the rules, you see that the rule #main .special is worth 110 points and is the winner, hence the color of the “special” text is orange.

Hiring People who Write Good Code

Besides “just working”, the criteria for what makes good code differs from person to person, but in general, you’ll want to look for readability, useful comments, simplicity, accuracy, good formatting and code that doesn’t repeat itself. So, even if two candidates submit working solutions to a problem, you can still determine which is the better candidate by analyzing the code itself with these criteria in mind.

In addition to this, you may consider their talent, as opposed to their current skill in any one area. If the candidate is highly talented and passionate about the position, then they will most likely be able to learn any particular skills required for the position, within reason. Of course, talented individuals should demonstrate expertise in a number of domains already, which will give you an idea of their potential for growth in job-specific areas. You may also consider their participation in online forums, discussion groups and blogs (like this one, wink wink) related to their job field. Active participation in online communities demonstrates dedication and passion for those particular fields of interest.

I hope this article has been informative for interviewers and perhaps interviewees as well. Feel free to post your favorite (or least favorite) interview questions.

Each item in the collection has a getNext() method which returns the next item in the collection. If it’s a doubly-linked list then each item (save for the head and tail) will have both getNext() and getPrevious() methods.

In JavaScript, no such construct exists, so we’ll create one. This is mostly for academic purposes but there’s nothing to stop you from using it in real code if you’re so inclined. For the sake of this practice, we’ll just make a singly-linked list as it is a bit simpler.

This also provides an introduction to defining classes in MooTools. We aren’t using much MooTools-specific functionality here so it could easily be ported to another library, or even written without the use of a library. But, since I use MooTools for most of my projects, I decided to use it here. I think you’ll find defining classes in MooTools to be quite easy.

The LinkedListItem Class

Here is the code to define the LinkedListItem class. The LinkedListItem takes a value of any type (string, object, etc) and returns an object of type LinkedListItem, which has the original value stored as the value property on the object. It also defines accessor methods for getting/setting the next item in the list. There is also an accessor method for getting the original value.

// This class defines an individual item in the linked list.
// The value it is instantiated with is stored in the value property,
// and is accessible via getter/setter methods.

var LinkedListItem = new Class({
   initialize: function(item) {
       this.value = item;
   },

   getNext: function() {
       return this.next;
   },

   setNext: function(item) {
       this.next = item;
   },

   getValue: function() {
       return this.value;
   }
});

Read on to see how the LinkedListItem class is used by the LinkedList.

Defining the LinkedList Class

The LinkedList class will take an array of objects of any type and create a linked list from those objects. The linking occurs in the order of the array. So, if you call it with ['a', 'b', 'c'] you’ll get back a linked list with a as the head, and c as the tail. The list will be linked like so: a -> b -> c.

The LinkedList class has three methods: setFirst(), getFirst() and getAll(). The former two are accessor methods for changing the first element, i.e. the head. The latter is a method which returns an array of all the items in the linked list, in the order they are linked.

There are quite a few other methods you could implement for the LinkedList but for now, these will suffice. If you’re particularly brave and inclined to add to the class, go ahead and check out the Java LinkedList docs to see what other methods are available.

Here’s the LinkedList class I came up with:

var LinkedList = new Class({

   // Input: Array collection
   // An array of items to turn into a singly linked list

   initialize: function(collection) {

       this.collection = new Array();

       // Construct the linked list
       collection.each(function(item, i) {
           var item = new LinkedListItem(item);
           this.collection.push(item);

           if (i > 0) {
               this.collection[i - 1].setNext(item);
           }
       }.bind(this));

       this.setFirst(this.collection[0]);
   },

   // Input: LinkedListItem item
   // Sets the head to be the given item

   setFirst: function(item) {
       this.head = item;
   },

   // Returns: LinkedListItem head

   getFirst: function() {
       return this.head;
   },

   // Returns: Array result
   // An array with all items' values, in the order they are linked

   getAll: function() {
      var result = new Array();

      result.push(this.getFirst().getValue());

      var item = this.getFirst().getNext();
      while (item) {
          result.push(item.getValue());
          item = item.getNext();
      }

      return result;
   }
});

There are only two areas of the code that need explaining: constructing the list in the initialize() method, and constructing an array from the list in the getAll() method. I’ll touch on each to make sure it is clear what exactly is going on.

The initialize() method is called on each instance of the class, with the arguments given to the constructor of the class. Calling new LinkedList(['foo', 'bar']) will call the initialize() method with the argument ['foo', 'bar'] as well. This is an automatic function call handled by MooTools and should not be done manually, unlike Prototype where the developer must manually call the initialize() method after instantiating the class.

The first thing our LinkedList initialize() method does is create the collection property. This is so it can store the data internally, and this property is not meant to be publicly accessible to other code. The collection array will be used to store the LinkedListItem objects created from the input array.

I use MooTools each() method to iterate over the items in the input array (collection). For each item, I create a new LinkedListItem and add it to the collection property where it will be stored. I then set the previous item’s link (if it exists) to the current item, using the setNext() method.

Finally, once the each() loop has finished iterating over all the items in the collection, I set the head link to be the first item in the array, using the setFirst() method.

The other interesting area is the getAll() method, which does basically the opposite of the initialize() method. Instead of constructing a LinkedList from an array, the getAll() method returns an array in the order of the LinkedList. So you could instantiate a LinkedList in a certain order, change the order around by various setNext() calls, and then call getAll() and get back an array in the new order. This might not seem very useful at the moment, but bear with me and I’ll demonstrate its utility through a challenge or two.

The getAll() method uses a while() loop instead of an each() loop, because we don’t know the length of the list. Even if the length of the collection array is 10, for instance, we have no guarantee the list will be 10 items. The coder may have called setNext(null) on the head, in which case the list would only have a length of 1. Therefore, we must use a while() loop that continues as long as their are next items, in other words, as long as getNext() on the current item is not null.

Inside the while() loop, we simply add the current item to the result array and then redefine the item variable to point to the next item. After the loop finishes, we return the result, which is an array in the order that the list is linked.

You can test that this works by instantiating a LinkedList and calling getAll() on it.

window.addEvent('domready', function() {

   var list = new LinkedList(['a', 'b', 'c', 'd',
                              'e', 'f', 'g', '1',
                              '2', '3', '4', '5']);

   console.log(list.getAll());

   // RESULT:
   // a,b,c,d,e,f,g,1,2,3,4,5
});

LinkedList Challenge

Next up, a LinkedList challenge! Can you write code that reverses a linked list in place, without creating a new array?

My next post will provide an answer, but in the meantime, give it a try. To make it clear, the challenge is to reverse a singly-linked list, using either the LinkedList class defined here or your own implementation, in place. That is, without creating another array, hash or other data structure to store the data in the list temporarily before writing it again.

This is the expected outcome:

   var list = new LinkedList(['a', 'b', 'c', 'd',
                              'e', 'f', 'g', '1',
                              '2', '3', '4', '5']);

   console.log('Forward: ' + list.getAll());
   console.log('Backward: ' + reverseLinkedList(list));

   // RESULT:
   //
   // Forward: a,b,c,d,e,f,g,1,2,3,4,5
   // Backward: 5,4,3,2,1,g,f,e,d,c,b,a

I should also mention that you can’t access the collection array inside the linked list directly. Otherwise, you could just do something like this:

function reverseLinkedList(list) {
   return list.collection.reverse();
}

That would be a cheap, and is not an acceptable solution. This challenge is to reverse the list in place, so your only choice for starting is to call getFirst() on the list:

function reverseLinkedList(list) {
   var head = list.getFirst();
}

This challenge was given to me in Java by my mentor at Amazon, Chris. It took me a good 45 minutes to solve the first time (though Chris made me solve it on a whiteboard, which is always more difficult for me than typing it up). Good luck and stay tuned for the next post which will offer a solution to this challenge.

I won’t define a class like in his example, but I will try to provide the same functionality, and perhaps add some functionality as well. This code will search for all HTML elements with the class ‘truncate’, or with another className if one is specified, and will truncate to the nearest word less than the character-count you specify. It also defaults to appending ‘…’ (the ellipsis) but you can override this with an empty string as the third optional parameter, if you prefer not to have anything appended.

Note: I wrote in the comments on Alex’s article that you may want to add ellipsis to his code. I realized after reading the Prototype API docs that in fact, this is exactly what it does by default. Unless you specify an override with an optional parameter, the Prototype truncate() method will automatically add an ellipsis at the end of the string it returns.

Here is my implementation of the truncate() function, without the use of JavaScript libraries:

// Input parameters:
// String text, [Number length, String ellipsis]
//
// Returns:
// String text

function truncate(text, length, ellipsis) {    

    // Set length and ellipsis to defaults if not defined
    if (typeof length == 'undefined') var length = 100;
    if (typeof ellipsis == 'undefined') var ellipsis = '...';

    // Return if the text is already lower than the cutoff
    if (text.length < length) return text;

    // Otherwise, check if the last character is a space.
    // If not, keep counting down from the last character
    // until we find a character that is a space
    for (var i = length-1; text.charAt(i) != ' '; i--) {
        length--;
    }

    // The for() loop ends when it finds a space, and the length var
    // has been updated so it doesn't cut in the middle of a word.
    return text.substr(0, length) + ellipsis;
}

Truncating Text by Class Name

In Alex’s example, he wrote a class in Prototype that you initialize with an array of HTML elements. For this example, we’ll register an event handler to the window onload that will look for all elements with the class ‘truncate’ and truncate them to our specifications.

window.onload = function() {
    var elements = document.getElementsByClassName('truncate');
    for (var i = 0; i < elements.length; i++) {
        elements[i].innerHTML = truncate(elements[i].innerHTML, 100);
    }
}

It’s basically doing the same thing as in Alex’s example, except that I’m using the window.onload event instead of the custom ‘domready’ event (called dom:loaded in Prototype) which triggers much quicker. If you are using a framework, then use one of the custom ‘domready’ events because they trigger as soon as the DOM is accessible for manipulation, whereas the traditional window.onload event waits to fire until each and every image is finished downloading. Good grief!

Note that this example will only work in Firefox 3 or Safari 3, as other browsers do not natively support document.getElementsByClassName. You could just implement your own getElementsByClassName function like so:

function getElementsByClassName(className) {
    // RegExp from http://www.robertnyman.com
    //             /2005/11/07/the-ultimate-getelementsbyclassname/

    var match = new RegExp('(^|\\\\s)' + className + '(\\\\s|$)');

    // All elements which match are added to the array
    var matchingTags = new Array();

    var allTags = document.getElementsByTagName('*');
    for (var i = 0; i < allTags.length; i++) {
        if (match.test(allTags[i].className)) {
            matchingTags.push(allTags[i]);
        }
    }
    return matchingTags;
}

window.onload = function() {
    var elements = getElementsByClassName('truncate');
    for (var i = 0; i < elements.length; i++) {
        elements[i].innerHTML = truncate(elements[i].innerHTML, 100);
    }
}

Make sure that you only give the ‘truncate’ class to elements whose only child is a text node. If the element has other HTML children then this won’t work correctly. It’s possible to code around this but for the sake of this example, let’s just keep it simple. Here are two examples that show proper and improper use:

This is OK:

<span class="truncate">some text </span>

This is not OK:

<span class="truncate"><span>some text </span></span>

As always, feel free to post in the comments with any questions or alternative suggestions for the code. This is a fairly simplistic implementation and truth be told, if you’re using a JavaScript library (which it seems most people are these days) then this may not be too relevant for you. But, hopefully it has been informative to explore this library-free, albeit simple, implementation.