DEV Community: Matt

Week 3: JavaScript basics

Matt — Wed, 18 Jan 2023 03:00:53 +0000

Some scattered and poorly formed notes from week 3, introducing JavaScript and AJAX.

First, some basic differences between Ruby and JavaScript, first: introducing variables.

Ruby:

var_name = "1"

JavaScript:

let varName = "1"

Second, jQuery, super powerful, much wow.

Some reminder steps on transitioning to using AJAX with links (instead of full page refresh)

First, insert remote: true in the link helper (breaks the link)
Make sure item has unique identifier
in controller, add format.js to render a .js file (name conventionally and that's all you need)
in the .js, call a method (e.g., slideUp()) on the unique identifier) for example...

$("#<%= dom_id(@comment) %>").slideUp(2500, function() {
$(this).remove();
});

dom_id() is a Rails function that fills in the object ID to make it easier to call the specific object for the action.

Using AJAX with forms is similar...

update form to local: false in form_with
same steps as above...

Troubleshooting and where to look for errors (given Ruby exceptions are no longer present):

Server log - make sure request processes
Devtools > JavaScript console (shows command line log) > Network tab (shows response from running .js)

Week 2: intro to Ruby partials

Matt — Wed, 11 Jan 2023 01:46:06 +0000

<%= render partial: "zebra/elephant" %>

Partials allow you to insert snippets of code into view templates to make them less bulky and incomprehensible. I'm thinking of these like old-school iframe tags in HTML but more powerful. It allows you to pull pieces of content from elsewhere to build with blocks instead of repainting each scene one by one.

<%= render partial: "movies/form", locals: { movie: @movie  } %>

More powerful though is the ability to pass variables through locals to partials. In the example above, we're saying render a snippet of code with a standard form to update a Movie object in our database. Because we want to edit an existing movie we're passing it the variable movie: and sending it the @movie value. The @movie variable comes from the params hash, it's available because we're taking a route which defines @movie within the Movie controller using

 @movie = Movie.find(params.fetch(:id))

So, the flow is

Route -> movies/8/edit/
goes to the routes.rb file
follows the "edit" route and passes "8" to the :id variable in the params hash.
then it runs the edit function within the movies controller...

 def edit
    @movie = Movie.find(params.fetch(:id))
  end

which then assigns @movie an Active Record relation that matches the movie with id "8". That allows the snipped of code

 <%= render partial: "movies/form", locals: { movie: @movie  } %>

to use @movie when passing it to the partial that runs the form


<% movie.errors.full_messages.each do |message| %>
  <p class="alert alert-danger w-50 mt-4"><%= message %></p>
<% end %>

<%= form_with model: movie do |form| %>
  <div>
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div>
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div>
    <%= form.submit class: "btn-primary" %>
  </div>
<% end %>

tl;dr the local variable in the template that calls in the partial must match the element within the partial you're calling to activate.

Notes from class 1

Matt — Wed, 04 Jan 2023 03:09:01 +0000

Back on the horse. Today we jumped into refactoring code we learned in App Dev 1, in particular improving form functionality. One item of note was the addition of authenticity tokens to forms to add security such that other sites can't grab a form and submit unrelated content for a database.

<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" >

Ruby pulls the token from that method that is called in-line within the form.

GitPod shortcut of the week

Select some text and then press Command + D selects the next instance of identical text in the document, using arrow keys you can then edit multiple lines at the same time.

Hello, world.

Matt — Wed, 04 Jan 2023 00:29:18 +0000

Today is day one of App Dev 2. Here we go.