Very Useful

Rails Better Errors

Cleans-up Rails error messages, making them easier to understand and interactive. How have I missed this until now?


Yahoo News Digest

This post is something of a departure from my normal ramblings, but I didn’t want the release of Yahoo’s News Digest app to pass without note.  In a world of never-ending news feeds and infinite scrolling, returning to a fully consumable, information experience has been a joy over the past 24 hours.

News Digest delivers two daily digest, each with eight articles on the topics of the day — this morning focused on Chris Christie and Dennis Rodman.  The articles are short (more on that momentarily), reasonably informational, and contain links to other sources.  It’s a nice approach to mobile news in our increasingly attention-strained world.

As much as I’ve enjoyed News Digest in its first day of release, I do have a few quibbles:

  1. The articles are almost to short.  Most of the stories thus far leave me wanting for more.
  2. Proofread, please.  I’ve already noted a couple of simple grammatical errors that should be caught in such a short format.

http://itunes.apple.com/us/app/yahoo-news-atom/id784982356?ls=1&mt=8


Rails: Page Specific JavaScript with Asset Pipeline

After being away from Rails for several years, coming back to Rails 3/4 and its asset pipeline was a challenge at times.  While the performance gains and automation are quite valuable, the asset pipeline isn’t without its occasional challenges.  One of those challenges was the growing amount of JavaScript being executed on every page of our site.  While this mostly amounted to at worst errors in the console, it just felt icky (that’s a technical term).

Upon exploring Stack Overflow and various blog posts, I finally found a solution that felt somewhat better: Page-Specific Javascript using Coffeescript.  The overall solution was fairly clean, didn’t cause an explosion in the number of JS files, and also did not require an update to the config each time a new JS file was added.  For larger, more modular needs, other solutions (e.g. this one) may be more applicable, but this approach works fine for our medium size app.

I will not review the entire approach verbatim here, but I did make several changes to the aforementioned article.  It’s important to note that this solution utilizes the object-oriented nature of CoffeeScript to simplify life.

First, we will create a base class that houses the common code executed on every page.  I named this class base.js.coffee (in app/assets/javascripts).

window.MyApp ||= {}  # namespace for your app, replace as you desire
class MyApp.Base
  constructor:() ->
    # common code we want to run on every page
    console.log('I print on every page!')
    # be sure to return this
    this

Next, we can begin to build controller-specific classes on top of the base class.  Like Rails, we will use the convention of the naming the class the same as the accompanying controller.  For example, our CommentsController will be accompanied by a CoffeeScript class called MyApp.Comments in the file comments.js.coffee.

window.MyApp ||= {}
class MyApp.Comments extends MyApp.Base
  constructor:() ->
    super  # call Base class for core functionality
    this   # and be sure to return this

  # now, we enumerate the actions for which we want page-specific behavior
  index:() ->
    console.log('I only print on the comments#index page')
  show:() ->
    console.log('I only print on the comments#show page')
  edit:() ->
    # something special for the comments#edit page

Continue to build a CoffeeScript class for each of your controllers that require JavaScript beyond whatever your Base class takes responsibility for.  Be sure to include a method for each action/page on which unique functionality is required.

Finally, we need to bring everything together and ensure our code is called wherever necessary.  One approach would be to include the following in your application’s layout view, though it could also be included anywhere sure to be called.

<%= javascript_tag do %>
$(document).ready(function() {
  window.$M = new (MyApp.<%= params[:controller].capitalize %> || MyApp.Base)();
  if (typeof $M.<%= params[:action] %> === 'function') {
    return $M.<%= params[:action] %>.call();
  }
});
<% end %>

The above first instantiates a new instance of our controller’s accompanying class and then attempts to call the action method, if it exists.  The approach used in our app is slightly different, but this works as well.

Note that I did run into an issue using Turbolinks in conjunction with the above approach that we are yet to solve.  In short, despite using jquery.turbolinks and other known approaches, the action methods were being called multiples times per page.  I have seen mention of this behavior when Turbolinks is used in conjunction with anonymous functions (e.g. those created by CoffeeScript), but have not found a fix.  Please comment if you can help.


Front End Automation

Front End Automation

Great deck, full of fweb development resources.


Twitter Bootstrap Scrollspy

Implementing Twitter Bootstrap 3’s Scrollspy plug-in took a bit of trial-and-error, below is my approach and findings for posterity sake (and perhaps someone else’s benefit in the future):

My goal was to implement a menu listing on the left with content on the right for an FAQ page.  Bootstrap 3’s navbar was not the right fit, the list-group was closer, but not perfect (more on that later).

A few findings of note:

  • Scrollspy is built to work with li elements that are children of an element of class .nav.  See Scrollspy source.
  • Scrollspy keeps an eye on any element with a scrollbar, but for most page, this is going to be the page itself, which in reality is the body element.  If you have a frame with scrollbars (a la the Bootstrap documentation sample), Scrollspy will work, but this is atypical.
  • While Scrollspy watches a scrollable element, events are fired on the navigation element.

Let’s get to the details.  Bottom line is available as a JSFiddle.

HTML

The HTML used here is fairly simple, utilizing Bootstrap classes to style a left-hand navigation built with a list-group and content on the right.

<div class="row">
  <div class="col-sm-4 col-xs-4" id="nav">
    <ul class="nav list-group affix">
      <li class="list-group-item"><a href="#g1">Item 1</a></li>
      <li class="list-group-item"><a href="#g2">Item 2</a></li>
      <li class="list-group-item"><a href="#g3">Item 3</a></li>
      <li class="list-group-item"><a href="#g4">Item 4</a></li>
      <li class="list-group-item"><a href="#g5">Item 5</a></li>
    </ul>
  </div>
  <div class="col-sm-8 col-xs-8">
    <section id="g1">Content 1</section>
    <section id="g2">Content 2</section>
    <section id="g3">Content 3</section>
    <section id="g4">Content 4</section>
    <section id="g5">Content 5</section>
  </div>
</div>

Although possible, I chose not to use Bootstrap’s declarative interface to add Scrollspy here because as part of a larger application, another template defines the body element.

JavaScript

As explained above, adding Scrollspy to the body element typically makes the most sense; however, some of the other articles / discussions on this topic seemed incorrect.

$(document).ready(function() {
  // plugin is applied to a scrollable element, targeting my navigation element
  $('body').scrollspy({ 'target': '#nav', 'offset': 10 });

  // listen for scrollspy events on the navigation element itself
  $('#nav').on('activate.bs.scrollspy', function() {
    console.log('scroll spy!!')
  });
});

CSS

Finally, a bit of CSS to pretty things up and style the list-group to look as desired (very simple approach for demonstration):

section {
 height: 250px;
 background-color: #eee;
 padding: 10px;
 margin: 10px 0;
}
li.list-group-item:hover {
 background-color: #eee;
 cursor: pointer;
}
li.list-group-item.active > a,
li.list-group-item.active > a:hover,
li.list-group-item.active > a:focus {
 color: #fff;
 background-color: #428BCA;
}

Depending on your content, you may need to change the offset.

That’s it.  Again, the JSFiddle has a working example.


Free Programming Books

Free Programming Books


iOS Developer Tools

iOS Developer Tools

Great list of various tools for iOS Development.