Errata: 1st Edition

Frontend Web Development: The Big Nerd Ranch Guide General Book Discussion
22

The correct page number is 288.

23

Chapter 11, page 236.

Could also work without the call method, as follows:

formHandler.addSubmitHandler(function (data) {
    myTruck.createOrder(data, myTruck);
    checkList.addRow(data, checkList);
});
24

Chapter 7, on page 157 and 158, in the section Custom Timing Functions
.detail-image-frame{
position : relative;
text-align: center

transition: transform 333m cubic-bezier(1, .06, .28, 1);

}

the transition time should be “ms” not “m”, as “m” will throw an error in Atom’s css linter and not render any transition at all in browser.
.detail-image-frame{
position : relative;
text-align: center

transition: transform 333ms cubic-bezier(1, .06, .28, 1);

}

25

Chapter 17, page 335, Adding the ChatMessage Class

The example call to the ChatMessage constructor is incorrect.
The = should be replaced with :

Specifically, this:

new ChatMessage({message: 'hello from the outside',
                 user='adele25@bignerdranch.com', timestamp=1462399523859});

should be:

new ChatMessage({message: 'hello from the outside',
                 user: 'adele25@bignerdranch.com', timestamp: 1462399523859});
26

this.chatForm.init((data) => {
let message = new ChatMessage({message: data});
socket.sendMessage(message.serialize());
});

27

Just a minor typo I came across in chapter 3 (page 44/45 - PDF version): Just before Figure 3.12 Prompting for a style rule the text instructs to make changes to the section elements.style in the Chrome DevTools. However, in Chrome (and the relevant screenshots), the section is called element.style (without the s)

1 Like
28

Chapter 25, page 261

alertType: null causes an error for me, since null is not a string and so cannot be capitalized. In our removeAlert() action, when removing an alert we reset the alertType to “success”, so I’ve done the same in my code, so the code added at the top of page 261 would be

alertMessage: null, alertType: "success", isAlertShowing: false

29

I could well be doing something wrong with sendAction but what got this working for me was as follows:
Insert action="removeAlert" instead of close=(action "removeAlert")
Then in app/components/flash-alert.js replace this.get('close')(); with just this.sendAction(); .

Now the message displays and hides as I’d expect.

30

I think there should be a class=“form-control” on the range input for Chapter 9 page 207. Adding this would make the form look like Figure 9.11

<input name=“strength” id=“strengthLevel” type=“range” value=“30” class=“form-control”>

31

In Chapter 6, document.querySelectorAll(THUMBNAIL_LINK_SELECTOR) was not working for me, it was returning NULL… I was using my own web site to host the content rather than the Browser-Sync package. It turns out I needed to add:

document.addEventListener(“DOMContentLoaded”, function(event) {
Initialize();
});

in order to wait for all of the HTML to finish loading. It isn’t really a bug, but I learned a lot trying to sort out the issue.

thanks

32

On page 285, chapter 14, section Using Deferreds with Callback-Only APIs, the first paragraph says:

… It should use the allData object…

It should be:

… It should use the orders object…

And the next paragraph should also use orders instead of allData.

33

On page 448 - route actions - the create action function(data) should be just function(), shouldn’t it?

create() {
var self = this;
this.get(‘sighting’).save().then(function(data) {
self.transitionTo(‘sightings’);
});
}

34

On page 424, chapter 23, sentence below Figure 23.2.

The conditional statement evaluated the truthy value of the empty string for the last sighting instance.

should be

The conditional statement evaluated the falsy value of the empty string for the last sighting instance

35

Hi thomas1986!

Thanks for letting us know.
One question, can you confirm that your <script> tags appear just before the closing </body> tag? That is, after all of your other markup.

Listening for DOMContentLoaded should only be necessary if your <script> tags appear before your markup (such as in the <head>).

36

class="form-control" should not be needed. When I add that class, it adds extra padding and a border (among other styles).

Here’s the styling for that element without the additional class:

without-form-control-class.png1261×1139 277 KB

And here’s the styling for that element with the additional class:

with-form-control-class.png1261×1139 282 KB

When you get a chance, would you mind double checking?
Thanks!

37

I missed putting the script reference at the end. It tells me that on page 105. Thanks for the help.

38

In Ember 2.4.6, close=(action "removeAlert") is working for me in the application template.

39

I am getting a $ is not a function error for this one. Any suggestions ?

40

Ch 24. p 437 Controllers
updated version of EmberX-Select is causing an issue. Here is the link from the Ch.24 issue.

41

In Chapter 18, the Silver Challenge needs a slight modification.

The messages won’t disappear when you reload the browser. That’s because your Node.js server is sending all the existing messages as soon as you reconnect!

For this challenge, comment out these lines in websockets-server.js:

  messages.forEach(function (msg) {
    socket.send(msg);
  });