Historical errata for The Rails View

You state that

“Since jQuery Mobile includes a style sheet and images, we need to tell Rails to serve them as well. We do that with a couple of provide directives in the same file:”

Rails 3.2 uses Sprockets 2.x where the “provides” directive has no function anymore. From sprockets-2.1.2/lib/sprockets/directive_processor.rb

# `provide` is stubbed out for Sprockets 1.x compat.
# Mutating the path when an asset is being built is
# not permitted.
def process_provide_directive(path)
end

In the first paragraph of chapter 1, second sentence, you have the word “size” when I believe you wanted the word “side”. It should read, “… and it pulls in the client-side scripts …”

In the first paragraph of section 1.1, last sentence, the directory path for application.css has a space in the name of the “stylesheets” directory. It says “app/assets/style sheets/application.css” instead of “app/assets/stylesheets/application.css”.

In the first sentence on the page, you mention removing the *= require_tree line but you don’t mention the file that contains this line. Someone completely unfamiliar with rails assets would probably not know to look in app/assets/stylesheets/application.css to remove this line. I think it would be a good idea to mention the file name.

In the paragraph immediately preceding the html for _header.html.erb, last sentence, you say to change the file to have the following contents. However, at this point, the file has not been created yet. I think it would be better to say something like, “Let’s create the file app/views/layouts/_header.html.erb and add the following HTML:”.

I would think an explanation of the options you chose for modernizr would help people understand what is going on. I went to the modernizr download builder and tried to recreate the one included in the code download for the book. Unfortunately, there is an incompatibility between the 2.0.6 version of the builder you used and the 2.5.3 version that is available today. The iepp (internet Explorer Print Protector) option is no longer available and that functionality is now in printshiv (html5shiv v3.4 w/ printshiv). The options I checked in the builder are:

CSS3
@font-face
border-radius
box-shadow
multiple backgrounds
opacity
rgba()
text-shadow
HTML5
Input Attributes
Input Types
MISC.
Touch Events
Extra
html5shiv v3.4 w/ printshiv
Modernizr.load
Add CSS Classes
Extensibility
Modernizr.testStyles()
Modernizr.testProp()
Modernizr.testAllProps()
Modernizr._prefixes
Modernizr._domPrefixes

It would be nice to know why these and only these were chosen and what each one does. Nothing too detailed, just enough to aid understanding.

In the code for app/views/layouts/application.html.erb, the lines for the image_tag have not been mentioned before so it is somewhat of a surprise that they are in the listing. Also, the div surrounding the <%= yield %> seems inappropriate at this point. Since the topic is the footer, I would think you would only want to add the <%= render ‘layouts/footer’ %> line at this point.

I also think it would be better to move the discussion of the div element in the following paragraph down to section 1.4 when you are talking that portion of the web page.

I know this was mentioned in the discussion forums but I thought I would add it here just to make sure it doesn’t slip through the cracks. In the listing for app/views/layouts/application.html.erb, the line <%= render ‘layout/header’ %> should be <%= render ‘layouts/header’ %>

In the section of the Preface for online resources, it might make it easier for people to correlate the code you can download with the chapters in the book if you mention that the layout of the code directory has a subdirectory for each chapter that is named after the theme of the chapter. For example:
Chapter 1, Creating an Application Layout is in code/artflow/layout,
Chapter 2, Improving Readability is in code/artflow/readability,
etc..

This would probably help clear up some of the confusion mentioned by people in the forums.

In the code download for the book, I notice that you include the 2 html fragments in code/layout/boilerplate. Since these are not linked to in the book and each one is only a 1-liner, it probably is not necessary to include them and it would also probably reduce the confusion with the code download.

In the listing for app/views/layouts/application.html.erb, since the image for tagline.png is going to appear in Figure 4., you should probably include the code for the image tag helper in this listing along with any discussion you feel would explain what this helper is doing.

In order for the reader to recreate Figure 4., they need to have been following along and creating the artflow app as they go, since the code download contains the app at a later state. However, they do not have enough information to completely reproduce this yet since you have not mentioned generating the CreationsController along with its associated views, helpers, etc..

I am not sure of your intention about how the reader should use your book. Do you want them to create the app and all the stuff associated with the views as they read the book or do you just want them to read the book and refer to the code download as needed.

If you want the user to recreate the app as they read, then you should probably mention that they need to execute:

rails generate controller Creations index show create permissions

You should also mention that they should uncomment the line “root :to => ‘welcome#index’” in config/routes.rb so that root_url will be defined.

They also need to copy the png files from the code download into their app/assets/images directory.

And finally, you should probably mention that they need to start up the local server:

rails server

and open a browser window to look at 127.0.0.1:3000/creations/index.

open/close tag mismatch on media.pragprog.com/titles/warv/code/artflow/layout/app/views/creations/permissions.html.erb

background-color: #534f4b;

should read:

background-color: #bc471d;

In the last paragraph the order of the description does not match the order in the example. “Verdana, then Arial” should read “Verdana, then Helvetica”.

Image shows wrong navigation

Image talks about assets when it should be Creations

Image talks about assets when it should be creations

In order for the active state to work, options should be passed outside of the link_to helper, such as

content_tag(:li, link_to(title, url), options)

CSS is fine. This change fixes the issue.

artflow/readability/app/views/creations/_preview.html.erb has an error where the first line has an <%= but should only be <%

the classes of .notice and .alert need to start with an ampersand, as they are not children of but stacked with notification

text.css.scss has errors. $dark-green is not a variable. It should be $dark-blue. Also, the same line is missing a semi-colon.

In reorganizing the book in tech review, the JS chapter now occurs before the forms chapter. This causes the formtastic form to be made into a javascript form before we have even learned about formtastic.

Source Code of chapter 1 artflow/layout is short. In the order to run rake db:seed successfully, we need to add one missing migration file:
$rails g migration add_name_to_designer name:string
$rake db:migrate
$rake db:reset
$rake db:seed

when browser localhost:3000/creations/
, it gets an errors:
undefined method `default_image?’ for #

Extracted source (around line #10):

7: <#= render creations %> 8: <ul> 9: <% creations.each do |creation|>
10:

11: <% end %>
12:

Usually your writing style is the classic “tell me what you are going to tell me, tell me, then tell me you told me”, which is an excellent way to write this type of book. But on line 1 of this page you tell me that you are going to “foll our own custom version…”. But in the text you never actually do this (or indicate that now would be a good time to do it). So I naturally went to the next sentence which told me you were going to add to the manifest and then you showed me that as usual. I keep waiting for you to show me the modernizr part. I think a simple line saying that you were going to let me do that as homework or something would help.

the edit_creations_path(creation) should be edit_creation_path(creation)

The layout on page 20 uses render STRING for rendering the header and the footer partials. But then there are partials in some places that are rendered with render partial: STRING. May I suggest to stick to the former?

One reason is consistency. And I suggest the former rather than the latter because render STRING is preferred nowadays unless you need to pass a layout.

When the text introduces the explicit alt attributes for images, it uses a wording that I think may suggest to the reader that the image tags are lacking alt attributes, and thus screen readers say “image, image, image”…

The image_tag helpers generates a default alt attribute with a humanized version of the image file name (alt is a mandatory attribute, that’s why one is generated). So in general that would not be the case.

h3 {
color: $dark-green
font: italic bold 20px $accent-font;
}

; behind $dark-green is missing

$dark-green should be $dark-blue

In code-file artflow/css/app/assets/stylesheets/icons.css.scss the -ms-filter attribute are the char " wrong.

The name of Rails components has a space.

ActiveRecord (fixed-width font), is a Ruby module, whereas Active Record (regular font) is the name of the ORM. The book mentions also Action View.

They appear in a few places, may I suggest a search & replace? Careful not to edit module names.

In the CSS selector for h3, $dark-green is not the variable we should be working with, but $dark-blue.

The helper switching_creation_tag_for is a extraction of content_tag_for in the previous page, but it does not generate the data-id attribute.

In Code File: artflow/js/app/views/creations/show.html.erb Version v2 and v3 on line 13 is %> missing

The method ‘creation_reference’ refers to a field, ‘format’ on the creation object i.e. #{creation.format.upcase}. That field is not in the model, having been removed by a migration.

I get an unknown private method error when I try to go to localhost:3000/creations

running the cucumber test: artflow/js/features/session.feature fails with the following Error: ActionView::Template::Error: undefined method `with_status’ for []:ActiveRecord::Relation

<%= f.buttons %> should be <%= f.actions %> with formtastic (2.2.0)

In the code snippet at the bottom of the page some tabindex are strings, and some others integers.

Search for “object>”, with a spurious greater than “>”.

In the sample code the following line is used

the tag is never terminated it should probably say

The Link in footnote 13. should be: github.com/benlangfeld/mobile-fu

The file: vendor/assets/javascripts/jquery.mobile.js should be: app/assets/javascripts/jquery.mobile.js

“shows an examploe of the application window”

(sorry for reporting a trivial typo, but I really just wanted to play with the ‘report erratum’ tool)

The description of why we need to list the eot file twice (once with ?iefix) is confusing, because it keeps referencing “the local() value”, but the css doesn’t include anything any “local()” directives.

In “…for the semantic_form_for() we learned about in Formtastic, on page 138,” “learned” should be changed to “will learn” since it refers to a later page.

Change Formtatstic -> Formtastic in “Adding Formtatstic to our Rails application is easy.”

“If we change the attribute to type=”email“, we end up with a space bar broken into three buttons: the space bar, the @ symbol, and a period. Any email address includes each of those at least once, so this change cuts down on having to hit the number button to get to additional symbols.”

While the space can technically be used inside an email address (See rfc2822#page-47 for a really nasty example in section A.5), it wouldn’t be fair to say that any email address includes a space at least once. Consider rephrasing to something like, “The symbols are ubiquitous in email addresses, so this change reduces the number of buttons we have to press.”

4th paragraph, last sentence has the word ‘examploe’ instead of ‘example’

In the sample code it says to
<%= render ‘layout/header’ %>
when it should be layouts
<%= render ‘layouts/header’ %>

In this page we read “Looking at the header, we see it’s 78 pixels tall” but, where do we see it? I can’t find any figure or specification in the previos pages where we can “see it”

The test code uses an older version of Devise, so the migrations fail with an upgrade message from devise 2.0.4. If there is an older version, could you provide a link to it?

In interested.css.scss,
font-style: bold;
should be
font-weight: bold;

Also in interested.css.scss,
font-italic: italic;
should be
font-style: italic;

Example code’s Gemfile doesn’t set a version for Devise and 2.1.0 introduces breaking changes, causing the migration to fail. “~> 2.0.0” fixes the issue.

wondering if this line is a typo:

chad> ruby script/generate model User

shouldn’t the command be “rails” rather than “ruby”?

looks like the line:

chad> rake migrate

should actually be:

chad> rake db:migrate

Gemfile.lock should be included with the code, so that bundle install will always work intended with gem versions locked down, even when newer gem versions are released which no longer work with code (e.g. Devise 2.x)

A designer/_designer.html.erb partial template is required for <%= render @project.designers %> to work, and the view containing it to render without errors. Also, there should be reference/link to the permissions page (either in the book, or as a site link), so that the reader is able to see the breadcrumbs in action without too much difficulty.

More functional controller code (for crud and site navigation) can be included so that the reader can navigate to and see the various views more easily, after starting the rails server. This will also make the seed data provided more useful.

No css definition is shown or mentioned for class=“ir” which is used in the templates on page 26 and others. For those who attempt to reconstruct the layout from only snippets in the book, the homepage will not be shown properly without this definition. One has to look it up in the code in order to find it in layout.css.scss.

The if-else block (<% if @creation.default_image? %>) within _creation.html.erb on Page 69 does not continue from the state where it was last referenced on Page 65, where the following block has been refactored out of the creations index view (creations/index.html.erb):

In Section 7.1, it reads:

“When we set it up in Chapter 1,
Creating an Application Layout, on page 1, the page wrapper was 960 pixels
wide, the left column was 800 pixels wide, and the sidebar was 150 pixels
wide, which left us a gutter of 10 pixels between the two sides.”

As a matter of fact, the mentioned css styles do not appear at all in Chapter 1.

The styles used to create the icons using sprites, are not working as stated in the book. I found that the following has to be added:

sprites {
height: 40px; // container must have proper dimensions, otherwise the icon will be clipping other elements

a.sprite-icon {
position: absolute;
}
}

Also, the offsets for approve-icon are wrong, and should be –80 as below:

.approve-icon
{
@include icon(–80px, –40px);
}

The styles used for section#sidebar to illustrate the popout mixin, are in conflict with those already defined on pages 24-25. Note that this is not immediately obvious unless the reader adds the additional section element to the sidebar vie to see the popout mixin in effect.

Adding further to the confusion, sidebar.css.scss in the accompanying code includes both versions of the section#sidebar definition. Although the latter declaration will override the former (thus the css can be parsed without problems), this is clearly not helping with comprehension.

The line: *= require formtastic
needs to come before the other sprocket directives that are meant to override the default styles that come with formtastic, like buttons (*= require buttons) and/or forms, depending on the original intent of the author.

In the code, there is a redundant migration 20110926060144_create_designers.rb
which conflicts with 20111008052704_devise_create_designers.rb

The mime_type :mobile may not be needed when mobile-fu is used later in the chapter.

mobile-fu does not work properly with jquery-mobile without further customization:

Workaround:

Step 1: add the following before_filter to ApplicationController

class ApplicationController < ActionController::Base
before_filter :set_request_format

def set_request_format
request.format = :mobile if is_mobile_device? # && !request.xhr?
end
end
Step 2: use the following respond_to block in CommentsController#create

class CommentsController < ApplicationController
def create
comment = creation.comments.new(params[:comment])
comment.user = current_user comment.save!

respond_to do |format|
format.any(:mobile) do
redirect_to creation_comments_url(@creation)
end
format.js
end
end
end

various problems with the code for the mobile chapter:

1. redirect_mobile in PagesController should redirect to project_creations_path instead of creations_path to be consistent with other links (under /projects/1) in the mobile views and related helper methods:

def redirect_mobile
if is_mobile_device?
redirect_to project_creations_path(Project.first)
end
end

Also, CommentsController and CreationsController should have set the instance variable @project for those links to appear as intended.

2. _header.mobile.erb is mentioned in the text but not used in the mobile views (creations/show, comments/index)

3. _creations.mobile.erb is not used for the final creations index view and should be renamed accordingly (_creations.v1.mobile.erb)
It should also be using creation.file.url instead of creation.url

4. edit.mobile.erb for creations would have made the mobile view example more complete

5. Since _footer.mobile.erb is empty, there should be no need for application.mobile.erb to render it at all (and yet missing _header.mobile.erb)

Since ‘View All Comments’ is shown by default, they should be hidden on page load:

$(document).ready ->
comments.slice(3).hide()

assorted issues with Chapter 9 (vanity, deadweight)

page 209:
collecting should be set to true for development to observe meaningful results

page 210:
after_create filter should read as the following:

after_create :increment_subscription!

page 212: _form.html.erb

It appears that symbols and partial names cannot begin with numbers, so they should be changed to the following:

<% if ab_test(‘3_vs_5_plans’) %>
<%= render ‘plans3’ %>
<% else %>
<%= render ‘plans5’ %>
<% end %>

page 216:
/creations/index should be just /creations

As a general comment, proofreading for this chapter has been exceptionally poor. The example is incomplete and should be more than just a dangling partial form that is not used anywhere else (and wouldn’t have worked anyway due to the naming issue as mentioned above). The reader has to fill in the missing controller/view code to get a working example of vanity.

Not opening UL tag, not closing NAV tag. Here’s a pic: instagr.am/p/PsGLfjA0L4/

I am using the ebook version, so it’s 184 of 6628 (3%). In the first paragraph under the heading ‘HTML5 and Semantic Markup’, there is a stray comma at the end of the sentence:

"Maintaining this separation of concerns is one of our rules,.

A few people have mentioned the problem with Devise.

One user (Jean-Charles Sisk) suggests using gem ‘devise’ ‘~ 2.0.0’ in the Gemfile but this still throws a deprecation warning so I went back to ‘~ 1.5.4’ for a clean install.

[DEVISE] You are using t.database_authenticatable and others in your migration and this feature is deprecated. Please simply use Rails helpers instead as mentioned here:

See the message here on github: github.com/plataformatec/devise/wiki/How-To:-Upgrade-to-Devise-2.0-migration-schema-style

when running rake setup on the layout project get this error: rake aborted! undefined method ‘client_id’ for nil:NilClass

In the penultimate paragraph the Haml templating language is refered to in all caps. According to haml-lang.org it’s Haml, not HAML.

This is a grammatical mistake with the word “creation”…It should read “…our enterprise users is fine-grained control of creating permissions used to support…”

In the epub version (iBooks on iOS 6), code listings have a consistent problem showing html tags. Every line ending with ’> or "> (a single or double quotation mark, then greater than) has a spurious line break inserted before the > (greater than). Every. Single. One.

normalize.css “and place it into our app/assets/stylesheets directory”. Since that stylesheet is “owned by outside entities” (text from Rails Guide on the Asset Pipeline), the stylesheet should be placed in vendor/assets/stylesheets. Same for modernizr on page 11 – although the reference there says only “assets/javascripts”. That should be vendor/assets/javascripts.

Got this line “shows an examploe of the application window”.

I think the file navigation_helper.rb needs a module wrapper

module NavigationHelper
…
end

You have " with the right tab activated:"

I would say " with the correct tab activated:"