learn-co-curriculum / phase-1-stitching-together-the-three-pillars Goto Github PK

Canvas Link

https://my.learn.co/courses/650/assignments/32962?module_item_id=83207

Concern

Very much enjoying this course. Thank you!

I know this probably will sound “pedantic”, but to quote Steve Jobs:

  “Details matter. It's worth waiting to get it right."

In both lessons: Defining Front-End Web Programming and the beginning of Stitching Together the Three Pillars -
The 3 pillars are listed in this order:

•	Recognize Events
•	Manipulate the DOM
•	Communicate with the Server

but then for some reason, the order is switched mid lesson (grrr :):

Identify the Three Essential Pillars of Front-End Web Programming
We've introduced our three essential pillars of front-end web programming:
• Manipulating the Document Object Model (DOM)
• Recognizing JS events
• Communicating with the server

It would be helpful to keep the order consistent.

•	Recognizing JS events
•	Manipulating the Document Object Model (DOM)
•	Communicating with the server

This would also require updating the lesson comments.
In demo.js, the comments say:

// STEP 1: The line of code below is what lets JavaScript find the elements that
// we want to make clickable. Without JavaScript, clicking on these heart shapes
// does nothing. Uncomment the code and refresh the demo page.

const articleHearts = document.querySelectorAll(".like-glyph");

If you keep the order of the 3 pillars consistent (Events, Manipulate, Communicate),
Then the Step 1 comment in demo.js could logically be connected to the first pillar.
We are using the ".like-glyph" element in our effort to “Recognize the Event”.
The comment would need to reflect that this is just the initial part of the first pillar.
The second part of the first pillar will be the click event, which comes later in the Step 3 comment.
So an updated Step 1 comment might look like this:

// STEP 1: The line of code below is what lets JavaScript find the elements that
// we want to make clickable. Without JavaScript, clicking on these heart shapes
// does nothing. This is the first part of Pillar 1. The other part of Pillar one will come later.
// Uncomment the code and refresh the demo page.

Then, the comment for Step 2 could logically be connected to the second pillar -
Manipulate the DOM
So this comment would need to be updated from this

  // STEP 2: Uncomment the 3 lines after the alert.
  // Here we're using Pillar 1 (DOM Manipulation) to update the screen and
  // mimicking Pillar 3 (Server Communication) to only update the screen if
  // the sending of information to the server succeeds.

to something like this:

  // STEP 2: Uncomment the 3 lines after the alert.
  // Here we’re using Pillar 2 (DOM Manipulation) to update the screen and
  // mimick Pillar 3 (Server Communication) to only update the screen if
  // the sending of information to the server succeeds.

Finally, in the Step 3 comment
change this:

// STEP 3: In order for the call to the server and the update of the screen to
// work, we need to add a click event listener to the elements we identified in
// STEP 1. That's Pillar 2, event handling. Uncomment this code:

to something like this:

// STEP 3: In order for the call to the server and the update of the screen to
// work, we need to add a click event listener to the elements we identified in
// STEP 1. That's the other part of Pillar 1, event handling. Uncomment this code:

for (const glyph of articleHearts) {
glyph.addEventListener("click", likeCallback);
}

I very much believe this would be more consistent and more logical for students.

Additional Context

Also, while I’m being a pain in the butt,
the professional look of the Canvas app would benefit much by addressing the many translation warnings in the console.

Canvas looks to be Rails based.
RAILS is referenced in the view source, and there are a lot of forum questions online about missing translation -spans issues with Rails.

In a course on web development, it would be a big win to address those “Translation for _ is missing” warnings in the console.

My Rails experience is almost non existent, so this is way over my head, but I found these recommendations below online may which may be helpful. They seem to depend on the version of Rails you’re using.

https://guides.rubyonrails.org/v4.0.0/i18n.html

https://stackoverflow.com/questions/12914019/rails-remove-missing-translation-errors

https://stackoverflow.com/questions/59731391/how-to-selectively-deactivate-rails-i18n-translation-missing-spans

Sorry to be such a nuisance, but I think it comes with the territory.
On the bright side, I'll be out of your hair in a few months :).

Thanks for your patience.

Suggested Changes

No response

Canvas Link

https://learning.flatironschool.com/courses/4992/assignments/165658?module_item_id=357280

Concern

Lack of .gitignore

Students may be pushing node_modules and results.json to their repos, unnecessarily taking up space/bandwidth :)

Additional Context

No response

Suggested Changes

Add a .gitignore to root!