Historical errata for Modern Front-End Development for Rails

Paragraph after application.ts code block, second sentence:

> If I attempt to invoke a property of the class this not either defined in this list or as method in the class body, such as this.banana, …

I think the first should be “that’s either not” and the second is just “a method”.

Paragraph after the first “application.ts” code block, first sentence:

> …when a new instance of the class is crated.

Should be “created”.

Second paragraph, third sentence:

> We’re creating a module this file in that can be loaded in to other code using import.

This should probably read: “We’re creating a module in this file that can be loaded into other code using import.”

The HTML codes in “schedules/show.html.erb” code block have an error:

The “heading introduction/02/app/views/schedules/show.html.erb”

should read “introduction/02/app/layouts/views/schedules/show.html.erb”

When installing styled components with any of the following commands, I receive an error.

Commands used:
yarn install —check-files
yarn add styled-components
yarn add @types/styled-components

Error:
yarn add v1.17.0
error An unexpected error occurred: “/Users/Name/Desktop/programs/learning/code/css/03/package.json: Unexpected token
in JSON at position 518”.

Edit to my previous technical error (in the code). The solution is simply that line 18 “stimulus”: “url_… Erratum will not allow me to post the link”, should be on one line. Currently, from the code, it is on two lines.

When installing styled components with any of the following commands, I receive an error.

Commands used:
yarn install —check-files
yarn add styled-components
yarn add @types/styled-components

Error:
yarn add v1.17.0
error An unexpected error occurred: “/Users/Name/Desktop/programs/learning/code/css/03/package.json: Unexpected token
in JSON at position 518”.

First paragraph after the generic_toggle.ts code block. Last sentence of the paragraph has some typos and is really awkward and hard to parse:

> “The querySelectorAll method has a return type of NodeListOf, and so two of our three instance properties, toggleButtons and targets, a results of calling querySelectorAll, and both of those properties are type NodeListOf.”

In context it might be better to shorten it to something like:

“And since toggleButtons and targets are the result of calling querySelectorAll, both of those properties are of type NodeListOf.”

Also, I think the type should be changed from NodeListOf to NodeListOf so it matches the code block.

Last paragraph on page contains a few typos:

> Often this means the generic type a type that contains elements of another type.
- Missing the word “is”.

> For example, an Set might behave similarly whether it is an set of Strings or an set of Numbers—the set itself still responds to, say add.
- The “an”s should be “a”

Second paragraph, second sentence:

> The “type” of onToggle looks like a function with three arguments which with the body being void.

Probably should be something like “… a function with three elements that has a body of void.”

Fourth paragraph, second sentence:

> …and we check the status of the one of the targets to set the initial hidden state of the toggle itself.
- Extra “the”

Second bullet, last sentence (right before the “What’s Next” heading):

> …but in React, you’ll see that it is design to automatically redraw components when their internal state changes.

Should be “designed”.

From the initial introductory reading on how this book works, I presumed that the source first version of the source code would not have webpacker installed so you could follow along with the book step by step actions. In the included sourcecode, on 01, it turns out Webpacker is already installed.

There is no “bin/setup.rb” in the source code archive files, but the book says:
“If you download the code and run bin/setup.rb, that should install the Ruby dependencies on a Mac, Linux, or Windows/Bash setup, and also seed the database with a bunch of random startup data.”

of the dependences -> of the dependencies

{
seatNumber}< has an extra “<” before “/span”

The code listen for “turbolinks:load” in “document.addEventListener(”turbolinks:load“,…” but the text in the following sections explains that we listen for event “DOMContentLoaded”

In “This pattern is called called “lifting state” there are 2 “called”

There is a double “the” in the sentence, “A lot of the decisions about program structure in web applications are about how to manage state, by which I mean the data that controls the the interactions between the user and the application”

Missing the word “to” in the sentence, “We also want make the program as easy as possible to understand and change.”

In the “React” chapter “Adding Our First Component” section, it says, “By declaring this interface, we allow TypeScript to do compile-type type checking to ensure that the necessary values are passed to our components.”

I believe it should probably say “compile-time type checking”.

In the “React” chapter “Composing Components” section, it says, “Invoking a component from another component normally involves a JSX call that looks as thought the component was an HTML tag, with the name of the component first and the props following with the same syntax as used to write HTML attributes.”

I believe it should probably say, “looks as though”

Says “Specifically, I’ve added the ESLint code cleanup tool and the Prettier code formatter. These help keep my code clean as I write it, but I’ll talk about the details of how I have them configured in Chapter 5, TypeScript, on page 93.”

But, there doesn’t appear to be a description of how these are configured in this area. Elsewhere there’s a small description of ESLint, but nowhere in the book does it describe how prettier is configured.

Says “We’re leaving the index.js file itself in JavaScript rather than convert- ing it to TypeScript for the moment because changing it requires a TypeScript feature we haven’t discussed yet—we’ll come back to it later in the book.”

But, the book doesn’t seem to discuss converting it to TypeScript or suggest what TypeScript feature might be required.

Paragraph 2 reads: ‘Four our purposes in this book…’

There are two “the”s in the sentence, " We then change the value of status based on the the current value of status using the setState function, also the one defined by useState, to officially register the change with React."

We start with Array.from(Array(props.seatsInRow)) , which is an obscure JavaScript idiom to turn the number 5 into the array [1, 2, 3, 4, 5]

Noel Rappin. Modern Front-End Development for Rails (Kindle Locations 1947-1949).

I am using node 10.15.3 and the array I get from this is [0,1,2,3,4]

it says: ‘…if you run bin/setup.rb’, but the files provided had no extension, so the command is just ‘bin/setup’. Otherwise you get the error ‘bash: bin/setup.rb: No such file or directory’

“We can do all of these things using another Stimulus concepts, values.” Concept should be singular

“In our case, an “visible” value, where visible is true, means that the target is
not hidden." Visible’s preposition should be “a,” not “an” because visible starts with a consonant.

“I’m going to talk about one one of these libraries that has an interesting way to insert CSS into your React code: styled-components.” The word “one” is duplicated.

“In TypeScript, though, this very legal.” This sentence is missing a verb.

“In a non-production environment, if you try to start a Rails server, run a Rake task or do anything else that starts the Rails environment, Rails will check that the yarn.lock file and the node_modules directory are consistent, and if not, i will stop and ask you to re-run yarn install before proceeding.” should be “it will stop,” not “i will stop.”

“On the Stimulus page in our sample app, we’re going get information from the server about which concerts are sold out.” This sentence is missing the word “to;” it should read, “we’re going TO get information from the server.”

“On the other hand, the Gon gem very easy to use and explain.” The author probably intended, “the Gon gem IS very easy to use and explain.”

“This will use the fetch method we’ve already seen, as well as a React hook called useState that we haven’t seen.” “that we haven’t seen” should be removed. A lot of information about useState is provided in the “Interactivity, State, and Hooks” section of the React chapter in the first section of the book.

“% rails generate channel ScheduleChannel
This will generate two files: a server side file app/channels/test_channel.rb and a client side file app/javascripts/channels/test_channel.js.” rails generate channel ScheduleChannel generates schedule_channel.rb and schedule_channel.js. At one point, the author probably was generating “TestChannel,” but these file names should be changed. They also appear correctly later on in the chapter.

“Please note that this example is slightly faked in the sense that in new concerts are not being added to the
sold-out list, and we are deliberately keeping the sold out state from begin set correctly on the initial server-side render of the page so that we can see the page change from ActionCable.” The word “begin” is probably actually supposed to be “being.”

“There’s more detail in the official ActiveCable documentation” It should say “ActionCable,” not “ActiveCable.”

“Then we’ll talk about Redux, a library that implements the reducer pattern and is commonly used with Redux.” It should say that Redux “is commonly used with REACT,” not with itself.

I think the page numbers skipped a number. The last page of chapter 8 is 164. The title page for Part III should be 165 and the first page of chapter 9 should be 166 making the second page 167. But the second page of chapter 9 is 168.

I think the code for venue.tsx is incorrect for the section. It doesn’t match the discussion that follows for that particular file.

In this section, I’m going to recreate all the previously exiting page logic plus the subtotal calculator, except for the part that uses ActionCable." Should be “existing,” not “exiting.”

Hello, I think on this page the class used for the query selector may be wrong. I think the intention is to use the js- class name.

Now it is:
document.querySelectorAll(“.day-body”)

I think the intent is
document.querySelectorAll(“.js—day”)

I was having trouble reading through this class, but after changing the variable names a bit it became a lot easier to read.
Maybe a matter of personal taste, but these class names helped me out:

export default class GenericVisibilityToggle {
toggleVisibilityButtons: NodeListOf
targetForVisiblity: NodeListOf
hidden: boolean

constructor(
private parent: Element | Document,
private toggleVisiblityButtonSelector: string,
private targetForVisiblitySelector: string,
private onToggleCallback?: (
toggleVisibilityButton: HTMLElement,
targetForVisibility: HTMLElement,
state: boolean
) => void
) {

In chapter 2 there is mentions to the element with class .js—schedule-day but it still does not exist anywhere in the UI. The book mentions to check the file app/views/schedules/show.html.erb but no element exists with that class.

Wrong code shown for venue.tsx. It’s showing code for Chapter 8 (Talking to the Server). Should be code for Chapter 10 (Managing State in React).

“then the return value is inferred to be the type from the that element’s tuple declaration.”

“the” before “that element’s…” should be omitted

The page states, “Currently we’re using the Bulma CSS framework, which we are loading from Bulma’s CloudFlare CDN account. But we can move it in-house by adding it to our Webpacker packs.” however this isn’t true as we moved to using bulma via webpacker in chapter 4 on PDF page 72.

“a parent component holding onto state for all it’s child components”

it’s > its

This will generate two files: a server side file app/channels/test_channel.rb and a client side file app/javascripts/channels/test_channel.js.

should say

This will generate two files: a server side file app/channels/schedule_channel.rb and a client side file app/javascripts/channels/schedule_channel.js.

render(json: {soldOutConcertIds: sold_out_concert_ids})

When this code was first introduce in the book, the param was not camelCase:

render(json: {sold_out_concert_ids: sold_out_concert_ids})

• The web request is routed to the show method of the SoldOutConcertSource.

should say

• The web request is routed to the show method of the SoldOutConcertsController.

<Then we declare two TypeScript interfaces

should be:

Then we declare two TypeScript interfaces

This make the reducer state and reducer dispatch available

should be

This makes the reducer state and reducer dispatch available

The code snippets moving forward are probably from the wrong chapter, that is, /server rather than /state.

The text says things like “It’s just calling three other components: the VenueHeader and VenueBody we already had, and our new one, Subtotal.” but the code is an older version without the Subtotal part

It doesn’t actually say it anywhere there, but in order to get yarn running, you’d need to install node.js and npm install yarn.

Otherwise you get a hard-to-read error while doing the first bundle exec rails webpacker:install

Maybe this should be told to the readers?

The setup process probably requires some work.
Running ruby bin/setup for introduction / 01 stops with multiple problems.
There are simple things like the setup script running rails with a command starting with bin/rails while rails is in the same directory as the setup script.
But there are also more complex things like a whole lot of settings in database.yml and the postgresql database itself that would need to be set up before the setup can go through. None of those settings have been explained in the text. Maybe they should?

In the package.json section you reference a library called “actionstorage”. I believe you meant *active*storage.

It should be @status not status. I couldn’t update the seats without changing that

On page 72, near the bottom, we are told to include <%= stylesheet_pack_tag(“application”) %> in layouts/application.html.erb. It stands to reason that we should also remove the existing line that directly imports the framework, but this is not stated explicitly in the book. I checked the different versions of the app in the css folder of the book code, and though the direct import line has been removed in the application layout file, the stylesheet_pack_tag is not present in any version of this file. Furthermore, including it or not doesn’t seem to make a difference.