DEV Community: rwparrish

How to Ask for Support as a New Dev

rwparrish — Fri, 29 Mar 2024 15:52:04 +0000

Intro

Remember your goal. You want to become a developer. Yes, you are building familiarity with the language you are working with (I'll reference JavaSript in this blog), but more importantly, you're also building your problem-solving process and honing your developer mindset. Above all else, a good developer is a good problem solver. Knowing when and how to ask for support from your fellow devs will be an important piece in your problem-solving process. At first, reaching out can feel intimidating, but if you follow these simple guidelines you can start building this skill knowing that you are going about it in an "industry standard" way. The great news is, in my experience, developers want to help you along! With that said, let's take a look at some things to consider when reaching out for support.

When to Reach Out

As you gain experience as a developer, your knowledge expands, and your problem-solving skills become more robust. For new developers, it's essential to attempt to solve the issue independently first to foster personal growth. However, waiting too long to seek help can hinder progress and lead to burnout. Setting a timer can be a helpful strategy for those who tend to delay seeking assistance like myself. When you get stuck, set a timer, throw your kitchen sink at it, and if you're still stuck when the timer goes off it's time to step away and think about reaching out. By then, you'll have valuable insights to include in your request for help.

Crafting the Ask

So, how will you know if you have done enough on your own before you reach out? Consider the following guidelines when reaching out:

Be Specific:

When formulating your question, ensure it's concise and clear. Apply your problem-solving skills to refine your question and uncover the specific issue you need to address. If you state your question and you get some questions in response, don't take it personally. Instead, try your best to answer each question as clearly and honestly as you can. The person helping you is trying to gain more context and gauge your understanding so they can provide good support. The idea of "good" support within the context of this conversation is important. Remember, you want to become more and more independent, and good support should help you achieve this.

Don't Ask for the Fish, Ask How to Fish:

Instead of asking for the solution outright, seek guidance on how to solve the problem. Is there a resource you are unaware of, a debug tool that would be perfect for this issue, or a question you haven't yet considered? The answer to all these questions is likely, "yes". Sure, you want the answer but learning more about how to find it is far more valuable and will serve you well throughout your career. As the saying goes, "Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime."

For example: Instead of asking: "How does the map() method work?" you could try asking, "Can someone point me towards some good documentation for the map() method?" Though, you probably should've Googled for docs already. Or, "What practice problems helped you better understand how the map() method works?"

Another example: Instead of asking "Why won't this code work?" consider asking, "I've tried this thing and that tool, is there a debugging tool that could be helpful in this context that I haven't mentioned?"

Provide Context:

While providing context is paramount, this doesn't mean you should share your entire project! Be considerate of others' time - nobody has the time to pour through all your code just to try and understand where you are stuck. You need to decide what information is relevant before you reach out. This is for your benefit and for the benefit of the person who might help you - they want to quickly get a sense of where your knowledge gaps are so they can provide good support.

I find that oftentimes people who haven't written all the code themselves provide bizarre context, if any, when reaching out. This is because they don't know enough about the code they are using in their project - don't be this kind of person. Provide only the relevant code, a brief explanation of your rationale regarding your code, any relevant error messages, and any things you've already tried. Have you checked the documentation yet? What did you try Googling? Which debugging tools have you tried using and what did they reveal?

Also, verbalizing your question before reaching out and/or using rubber duck debugging can be extremely powerful too. Trust me, oftentimes by doing these things, you may find that your initial question improves, or you might even solve the problem on your own, bypassing the need for support.

Of course, you're new at this and you may not know for sure if an error message is relevant or what exactly your code is doing (you probably wouldn't be stuck if you did) but that's OK, just do your best. Like all things, asking for support in this manner will get easier with practice. You'll begin to get a feel for the context other devs will want when you reach out with an issue.

Show Gratitude:

This one is simple. When a fellow dev takes the time to try to understand your issue and all its context so they can provide good support, show gratitude!

Practical Example with Code

For reference, here is the project code so far:

Inside the index.js file:

const weaponCardContainer = document.getElementById("weapon-card-container")

const init = () => {
    fetch("http://localhost:3000/weapons")
        .then(resp => resp.json())
        .then(weapons => renderWeaponsList(weapons))
}

const renderWeaponsList = (weapons) => {
    const weaponsListContainer = document.getElementById('weapons-list')
    weapons.forEach(weapon => {
        const weaponLi = document.createElement('li')
        const weaponNameSpan = document.createElement('span')
        weaponNameSpan.classList.add('weaponSpan')
        weaponLi.classList.add('weapon-li')
        weaponNameSpan.innerText = weapon.name
        weaponLi.id = weapon.id
        weaponLi.append(weaponNameSpan)
        weaponsListContainer.append(weaponLi)

        weaponNameSpan.addEventListener('mouseover', () => {
            weaponNameSpan.classList = 'highlight-effect'
        })
        weaponNameSpan.addEventListener('mouseleave', () => {
            weaponNameSpan.classList.remove('highlight-effect')
        })
        weaponNameSpan.addEventListener('click', () => renderWeaponCard(weapon))
    })
}

const renderWeaponCard = (weapon) => {
    // build weapon card to display details on right-hand side of the screen
    const weaponCard = document.createElement("div")
    weaponCard.classList.add("weapon-card")

    const title = document.createElement("h2")
    title.textContent = weapon.name
    weaponCard.appendChild(title)

    const type = document.createElement("p");
    type.textContent = `Type: ${weapon.type}`
    weaponCard.appendChild(type)

    const damage = document.createElement("p")
    damage.textContent = `Damage: ${weapon.damage}`
    weaponCard.appendChild(damage)

    const criticalChance = document.createElement("p")
    criticalChance.textContent = `Critical Chance: ${weapon.criticalChance}%`
    weaponCard.appendChild(criticalChance);

    const manufacturer = document.createElement("p")
    manufacturer.textContent = `Manufacturer: ${weapon.manufacturer}`
    weaponCard.appendChild(manufacturer)

    const description = document.createElement("p")
    description.textContent = weapon.description
    weaponCard.appendChild(description)

    weaponCardContainer.innerHTML = ""
    weaponCardContainer.appendChild(weaponCard)
}

init()

Inside the index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CyberPunk Weapons</title>
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <div class="containerWrapper">
        <div class="leftSide">
            <ul class="weaponsList" id="weapons-list"></ul>
        </div>

        <div class="rightSide" id="weapon-card-container"></div>
    </div>

</body>

</html>

Let's look at a common error message in JavaScript, Uncaught TypeError: Cannot set properties of null (setting 'innerHTML'). You are building one of your first single-page web applications and things are going OK until you hit this error. Now, you are stuck. Being a beginner, you're not sure what to make of the error message. What do you do?

The Solid Outreach

Here is an example of a request for support that is concise, doesn't ask for the answer outright, includes relevant context, and shows some gratitude:

"I am trying to display the weapon details on the page after a user clicks on the weapon and I'm running into a specific error that I'm having trouble understanding: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML'). I think it means that weaponCardContainer is null but I'm not sure.

I know the callback for the click event is working - I've tested this for each weapon. I see that the error message is referencing line 60: weaponCardContainer.innerHTML = "" but I'm confused because I've read about innerHTML and I think I am using it correctly within the context of my project (property of an element) and I've tried querying the DOM for the weaponCardContainer within the DevTools offered by the browser and I can grab it like so document.getElementById("weapon-card-container") with no issues.

I've been at this a bit now. Can someone point me in the right direction? Thank you in advance for any guidance!"

Conclusion

For new developers reaching out can feel intimidating but it is an essential tool in your toolbox. If you're new to this, I hope this little read helps you along your coding journey. Stay curious, keep coding, and enjoy the journey. Thanks for reading.

Supercharge Learning to Code with the Feynman Technique

rwparrish — Fri, 22 Mar 2024 20:12:12 +0000

Intro

As a software engineering instructor, I've observed a common challenge among adult students transitioning to coding careers. Learning to code can be particularly challenging for adults due to ingrained learning habits, such as note-taking, memorization, and pattern-matching. Pattern matching won't deepen your understanding and can create false confidence. Memorizing syntax and methods will come naturally with practice, so it shouldn't be a priority either. In this piece, I advocate for adopting the Feynman Technique as a more effective approach to learning programming.

Richard Feynman was an American theoretical physicist known for his contributions to quantum mechanics, quantum electrodynamics, and particle physics. He was born on May 11, 1918, and passed away on February 15, 1988. Feynman made significant advancements in theoretical physics and won the Nobel Prize in Physics in 1965 for his work in quantum electrodynamics.

Apart from his scientific achievements, Feynman was also known for his exceptional ability to explain complex scientific concepts in simple terms - this brings us to the Feynman Technique for learning complex topics.

Outline of The Feynman Technique

So what is the Feynman Technique? It's actually quite a simple approach to learning that can be easily repeated:

Choose a Concept and Explain It
Teach It to a Child
Identify Gaps in Understanding
Review, Simplify, and Repeat

Let's walk through the process together using an example we're all very familiar with, tying our shoelaces.

1. Choose a Concept and Explain it:

Select a topic or concept you want to learn or understand better and explain it in simple terms. Use plain language and avoid jargon. Einstein said, "If you can't explain it in simple terms, you don't understand it well enough".

"Tying shoelaces is a way to secure your shoes to your feet so they don't fall off while you walk. It involves making loops with the laces and then tying them together in a knot."

2. Teach it to A Child:

Pretend you're teaching the concept to a child who has no prior knowledge of the subject. This could be a child, a friend, or even an inanimate object like a rubber ducky. Explain each step as you go along, making sure they understand the process. You may also want to demonstrate each step, especially in regard to coding.

"First, you take one lace and make a loop by crossing it over itself. Then, you take the other lace and wrap it around the loop. Finally, you tuck the second lace through the hole underneath the first loop and pull it tight to make a knot."

3. Identify Gaps in Understanding:

As you explain the concept, pay attention to areas where you struggle to explain or where your understanding is unclear. This helps identify gaps in your knowledge. Go back to your study materials (practice writing code and testing its behavior) and fill in these gaps. This step does require some humility and vulnerability - it's OK not to know everything!

If you struggle to explain how to create the loops or tie the knot, you may need to revisit those steps and break them down into smaller, more manageable parts.

4. Review, Simplify, and Repeat:

Review the concept and your explanations periodically to reinforce your understanding. If there are still areas you find difficult to explain, go back and review them again. Repetition helps solidify your understanding over time. Simplify complex ideas or terms until you can explain them in straightforward terms.

"To tie your shoelaces, first make a loop with one lace, then wrap the other lace around it, and finally tuck it through the hole and pull tight."

Applying The Feynman Technique to Coding

How can you apply this to coding? Let's take a look at an example and try to explain how the map() method in JavaScript works. To simplify the explanation I will use an analogy involving toy cars.

1. Choose a Concept and Explain it:

"Imagine you have a toy box filled with different toy cars, and you want to take each toy car, paint it a different color, and put it into a new box. This is similar to what the map method does with arrays in JavaScript."

2. Teach it to A Child:

In my view, the teaching step of the Feynman Technique should involve writing code and testing its behavior - not just a verbal explanation.

The Original Toy Box (Array): "You start with your original toy box, which contains all the toys (elements) you want to work with.":

const orignalToyBox = [
  {
    id: 1,
    brand: "Hot Wheels",
    model: "Mustang",
    color: "Red"
  },
  {
    id: 2,
    brand: "Matchbox",
    model: "Corvette",
    color: "Blue"
  },
  {
    id: 3,
    brand: "Maisto",
    model: "Lamborghini",
    color: "Yellow"
  },
  {
    id: 4,
    brand: "Tonka",
    model: "Pickup Truck",
    color: "Green"
  },
  {
    id: 5,
    brand: "Disney Cars",
    model: "Lightning McQueen",
    color: "Red"
  }
];

The Painter Function (Callback Function): "Next, there is a painter who knows how to paint each toy a different color. This painter is like the callback function you provide to the map method. It takes each toy (element) from the original toy box and returns the painted version.":

function painterFunc(car) {
  car.color = "Orange"
  return car
}

The New Toy Box (New Array): "As the painter finishes painting each toy, they put it into a new toy box. This new toy box represents the new array that the map method creates.":

let newToyBox

Taking Each Toy and Painting It: "The map method goes through each toy (element) in the original toy box (array) and calls the painter function (callback function) on it.":

function painterFunc(car) {
  console.log(car) // check each car is passed to callback
  console.log(car.color) // check each car's color 
  car.color = "Orange" // reassigning each car's color
  console.log(car.) // check to see that the color is now Orange
  return car // give the car to the map method so it will be added to the newToyBox when map is finished iterating
}

Returning the New Toy Box: "Once all the toys have been painted and placed into the new toy box, the map method returns this new box (new array) to you.":

let newToyBox = orignalToyBox.map(painterFunction)

// show the result in the console
console.log(newToyBox) // expected output:

[
  { id: 1, brand: 'Hot Wheels', model: 'Mustang', color: 'Orange' },
  { id: 2, brand: 'Matchbox', model: 'Corvette', color: 'Orange' },
  { id: 3, brand: 'Maisto', model: 'Lamborghini', color: 'Orange' },
  { id: 4, brand: 'Tonka', model: 'Pickup Truck', color: 'Orange' },
  { id: 5, brand: 'Disney Cars', model: 'Lightning McQueen', color: 'Orange'}
]

We could try using different syntaxes for our callback function for extra practice with functions and conceptual reinforcement of how the map() method works:

const newToyBox = orignalToyBox.map(function painterFunc(car) {
  car.color = "Orange"
  return car
})

console.log(newToyBox)

const newToyBox = orignalToyBox.map(function(car) {
  car.color = "Orange"
  return car
})

console.log(newToyBox)

const newToyBox = orignalToyBox.map(car => {
  car.color = "Orange"
  return car
})

console.log(newToyBox)

As you attempt to teach each step you will come to gaps in your understanding (Step 3. Identify Gaps in Understanding). With more practice writing code and explaining how it works aloud, our ability to teach will improve and therefore our understanding will deepen (Step 4. Review, Simplify, and Repeat).

Conclusion

If I could start coding again, I'd use the Feynman Technique more and ditch the need to take exhaustive notes and memorize syntax. All the information I needed is readily available online, like the MDN Web Docs for JavaScript. Instead, I'd hone my ability to ask the right questions and find answers online by referencing the well-maintained documentation. Applying the Feynman Technique will help you become good at asking the right questions because it is effective at helping you find gaps in your understanding.

There you have it. The next time you come up against a complex coding topic you're struggling to grasp, try the Feynman Technique. Stay curious, keep coding, and enjoy the never-ending learning journey. Thanks for reading.

Pagination in Rails

rwparrish — Sat, 16 Jan 2021 02:05:05 +0000

In this blog, we will look at what pagination is and how to implement it into your Rails app.

Intro

Everybody has done some shopping on Amazon at some point. We live in the age of information and convenience. Before the school year started, I was shopping on Amazon for a new backpack with my daughter. Of course, there were more options than one could dream of and it would have taken us three lifetimes to look through them all.

This is where pagination comes in. With pagination, we can limit the number of items that are retrieved from the database and shown at a given point. It can be overwhelming to look at one page with hundreds or thousands of items on it. Why not show twenty or thirty items at a time instead? This is what pagination can do for us. Basically, it breaks up a large list into a sequence of smaller lists based on the specifications we give it.

Setting up

A quick internet search of "will_paginate" finds this. Before we continue, take a look at it. Setting up pagination is surprisingly simple. After you have read it, we walk through the setup step by step. We will reference

Step 1

First, we need to install the pagination gem:

// in the Gemfile

gem 'will_paginate', '~> 3.1.0'

Then run bundle install from the terminal.

Step 2

In my app, I have a couple of places I want to be able to implement pagination. First, I will head to the controller(s) and make the necessary code changes there. We get this line of code from the documentation - Post.paginate(page: params[:page], per_page: 30). In the controller the code currently looks like this:

class ArticlesController < ApplicationController

def index
  @articles = Article.all
end
...

The code in the index action gets changed:

def index
  @articles = Article.paginate(page: params[:page], per_page: 5)
end

Now, the @articles instance variable will hold only a certain number of items from the database according to our specifications. In this case, I specify that each page should show five items.

Step 3

Again, referring to the documentation, we are given this line of code - <%= will_paginate @posts %>. So, in the appropriate view (articles/index.html.erb in this case):

<h1 class="text-center mt-4">This is the index page</h1>

<%= render 'article' %>

The following code is added:

<h1 class="text-center mt-4">This is the index page</h1>

<div class="apple_pagination">
  <%= will_paginate @articles, :container => false %>
</div>

<%= render 'article' %>

<div class="apple_pagination">
  <%= will_paginate @articles, :container => false %>
</div>

I'm sure you noticed a couple of things. I wanted to render the pagination at the top and the bottom of the page. Also, I added some styling. You can do the same by following the link - make those pagination links prettier - in the documentation to here.

Recap

In this short and sweet read, pagination was covered. We learned:

Pagination breaks up a large list into a sequence of smaller lists based on the specifications we give it.
It is pretty darn simple to implement!

I hope you learned something new. Happy coding!

Changing sate before saving to the database in Rails

rwparrish — Sat, 09 Jan 2021 23:36:58 +0000

In this blog, we're going to look at how to change an object's state immediately preceding saving it to the database in an RoR app.

The method that we will be using is actually a callback that is provided by ActiveRecord called before_save.

So, what's a callback then?

The official Ruby on Rails documentation says, "Callbacks are methods that get called at certain moments of an object's life cycle. With callbacks, it is possible to write code that will run whenever an Active Record object is created, saved, updated, deleted, validated, or loaded from the database."

So, what's an ActiveRecord callback then?

Again, exploring the documentation, we read, "Callbacks are hooks into the life cycle of an Active Record object that allow you to trigger logic before or after a change in the object state."

Take a look at the code below:

class User < ApplicationRecord
  has_many :articles
  validates :username, presence: true, uniqueness: { case_sensitive: false }, 
                      length: { minimum: 3, maximum: 25 }
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i                 
  validates :email, presence: true, uniqueness: { case_sensitive: false }, 
                    length: { maximum: 105 },
                    format: { with: VALID_EMAIL_REGEX }
end

In the above code snippet, you can see that there is a constant assigned a some regex - VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i. This constant is then used to validate the format of email address taken in from the user.

For a neat little exercise, copy \A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/ and paste it here. Be sure to add the "i" after the forward slash at Rubular. Try entering some example and non-example email addresses. For example, try entering "janedoe@example.com" and "email.com". Pretty cool, huh?

So we can see that email addresses are being checked for proper email format. However, the letters' case in the email addresses is not being checked. This brings us to the before_save callback.

Check out the code below:

class User < ApplicationRecord
  before_save { self.email = email.downcase }
  has_many :articles
  validates :username, presence: true, uniqueness: { case_sensitive: false }, 
                      length: { minimum: 3, maximum: 25 }
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i                 
  validates :email, presence: true, uniqueness: { case_sensitive: false }, 
                    length: { maximum: 105 },
                    format: { with: VALID_EMAIL_REGEX }
end

Notice this line - before_save { self.email = email.downcase }. Here we are referencing the email field associated with each object before saving said object so we must append the self keyword to the email we want to reference. This self is referencing each object of the User class so when the computer comes to the email field of any of these objects, it runs the downcase method on that field and then saves the object. We can now be sure that the email address will have proper formatting AND letter case before being saved to the database!

Recap

This blog covered a bit of regex and introduced you to the ActiveRecord callback before_save. With before_save, we can change the state of an object right before the object is saved to the database and in this case, it was used to execute a block of code that downcased all the letters in email addresses.

I hope you learned something and happy coding!

Using Bcrypt with Ruby

rwparrish — Sun, 03 Jan 2021 03:00:06 +0000

In this blog, I will cover how to create a 'bcrypt" module for use in a Ruby on Rails project.

Bcrypt uses the MD5 algorithm and adds in a salt to it in order to hash passwords. This is important because as developers we do not want passwords to be stored as regular old strings. Believe it or not, this used to be the case. However, this is no longer safe and NOT considered to be best practice.

The code below is a module. I have called this module "Crud". The methods in this module can be easily called on from other classes or files:

module Crud
  require 'bcrypt'
  puts "Module CRUD activated"

  def self.create_hash_digest(password)
    BCrypt::Password.create(password)
  end

  def self.verify_hash_digest(password)
    BCrypt::Password.new(password)
  end

  def self.create_secure_users(list_of_users)
    list_of_users.each do |user_record|
      user_record[:password] = create_hash_digest(user_record[:password])
    end
    list_of_users
  end

  def self.authenticate_user(username, password, list_of_users)
    list_of_users.each do |user_record|
      if user_record[:username] == username && verify_hash_digest(user_record[:password]) == password
        return user_record
      end
    end
    "Credentials were not correct"
  end
end

Notice the "self" keyword on the methods creating class methods to be called on in another file. Class methods do not require an instance of an object to work. They can be called on the class itself, or a module in this case...

In the file I want to use the Crud module containing the bcrypt methods:

require_relative 'crud'

users = [
          { username: "ryan", password: "password1" },
          { username: "jack", password: "password2" },
          { username: "maria", password: "password3" },
          { username: "michael", password: "password4" },
          { username: "phill", password: "password5" }
        ]

hashed_users = Crud.create_secure_users(users)
puts hashed_users

There are two things to notice here. First, take a look at require_relative 'crud'. This allows me to use the methods from the Crud module in this file. Second, notice the methods I wish to use from the Crud module must be appended with the Crud class.

require_relative 'crud'

class Student
  include Crud
  attr_accessor :first_name, :last_name, :email, :username, :password

  def initialize(firstname, lastname, username, email, password)
    @first_name = firstname
    @last_name = lastname
    @username = username
    @email = email
    @password = password
  end

  def to_s
    "First name: #{@first_name}, Last name: #{@last_name}, Username: #{@username},
                  email address: #{@email}"
  end

end

ryan = Student.new("Ryan", "Parrish", "ryan1", "ryan@example.com",
                      "password1")
john = Student.new("John", "Doe", "john1", "john1@example.com",
                      "password2")

hashed_password = ryan.create_hash_digest(ryan.password)

puts hashed_password

If I include or "mixin" the module I want - include Crud, then the methods in the module needn't be class methods so the "self" keyword can be removed from the methods in the module and the methods can then be called on instances of objects in the class I want.

Happy coding!

JavaScript Scope and Hoisting

rwparrish — Sat, 26 Dec 2020 19:04:17 +0000

If you are new to JavaScript and struggling to understand the concepts of scope and hoisting, you are not abnormal. I remember how long it took me to get a firm grasp on these two tricky concepts. In this blog, we'll take a look at a simple example to help clear things up.

Check out this little write up on scope in JavaScript for a bit more on scope 👇

Scope in JavaScript(JS)

rwparrish ・ Aug 23 '20

#javascript

What will the browser's console show if the following code gets executed?

var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();

Stop. Don't scroll down and don't copy this into the DevTools Console, yet. Take a minute to look closely at the code and think about it.

Solution

The console will log undefined. To understand this, let's look at hoisting and scope in JavaScript.

Function-level scope

Functions create new scopes in JavaScript:

function setVar(){
    // inside this function we have a new scope
    // so this variable, declared in this function's scope, won't be available outside the function
    var varInFunction = 'inside a function';
}
setVar();
console.log(varInFunction);  // throws 'ReferenceError: varInFunction is not defined'

Blocks like if statements and for loops do not create a new scope:

if (true) {
    // this if statement doesn't create a new scope
    // so varInIf is available in the global scope
    var block = 'inside an if statement';
}
console.log(block);  // logs 'inside an if statement'

Declaration vs. assignment

A variable declaration simply tells the interpreter that a variable exists. By default it initializes the variable to undefined:

var dog;
console.log(dog);  // logs undefined (NOT a ReferenceError)

A variable assignment assigns a value to the variable:

dog = "Lino";

We can both declare and assign in the same line:

var dog = "Lino";

Hoisting

In Javascript, variable declarations are "hoisted" to the top of the current scope. Variable assignments, however, are not.

Returning to the original problem:

var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();

The declaration (but not the assignment) of text gets hoisted to the top of logIt(). So our code gets interpreted as though it were:

var text = 'outside';
function logIt(){
    var text;
    console.log(text);
    text = 'inside';
};
logIt();

So we have a new variable text inside of logIt() that is initialized to undefined, which is what it holds when we hit our log statement.

Recap

When you declare a variable in JavaScript (using "var"), that variable declaration is "hoisted" to the top of the current scope — meaning the top of the current function or the top of the script if the variable isn't in a function.

Next step

Try looking into the differences when using "let" and "const" instead of "var" to declare variables in JavaScript. Also, what is a lexical environment and what does it have to do with the concepts covered in this blog?

Happy coding!

Validations and displaying messages in Rails

rwparrish — Thu, 17 Dec 2020 18:58:51 +0000

In this blog, I would like to share my process for setting validations and displaying messages in Rails. Here are the two general topics I will cover:

How can we make sure that instances of objects get saved to the database the way we want them to? The answer 👉 validations
Once validations are working, how can we display messages letting us know about errors and/or successes? The answer 👉 there are a couple of ways to do this so keep reading to learn more!

Active Record

First, what is Active Record? From the official docs here, it is the M in the MVC (Model-View-Controller) software design pattern. Active Record deals with persisting data, more specifically rich objects. Active record is an ORM (Object Relational Mapping) framework. The docs put it well - "Using ORM, the properties and relationships of the objects in an application can be easily stored and retrieved from a database without writing SQL statements directly and with less overall database access code." Basically, Active Record makes connecting to the database much easier and efficient for Rails developers.

Ok, that bit of background info helps us understand why it makes sense that Active Record would also deal with validating objects before they can be saved to the database to be persisted.

A bit on `params`

Below I have my params setup to whitelist the data I want. First, I require the top-level key of my params - :article and then I specify which keys within the params I want to permit - :title and :description in this case:

def create
    @article = Article.new(params.require(:article).permit(:title, :description))
    render plain: @article
end

In the browser, we see something like this #<Article:0x00007fa47fbe8770>. Let's use the inspect method to take a closer look at this object:

def create
    @article = Article.new(params.require(:article).permit(:title, :description))
    render plain: @article.inspect
end

We should see something like this in the browser now:

#<Article id: nil, title: "Testing some stuff", description: "testing some stuff", created_at: nil, updated_at: nil>

Notice that id: nil. This is because we haven't saved this instance of an article object to the database yet. Let's try saving it:

def create
    @article = Article.new(params.require(:article).permit(:title, :description))
   article.save
end

Now we can hop into the Rails console by entering rails c in the terminal to verify it has been saved. In the console, try Article.all asking to see all instances of article objects and we should see the most recent article created at the bottom of the list with an id: of some number depending on its place in the database table.

You could also do this:

def create
    @article = Article.new(params.require(:article).permit(:title, :description))
    @article.save
    render plain: Article.all.inspect
end

Ok, now we know that our strong_params are functioning and we can save objects to the database. Nice! However, what if we have some validations in mind? Here come those built-in Active Record validation helpers I mentioned earlier.

Built in Active Record Validations

In my model - article.rb file:

class Article < ApplicationRecord
  validates :title, presence: true, length: { minimum: 6, maximum: 100 }
  validates :description, presence: true, length: { minimum: 10, maximum: 300 }
end

Above I specify that the value for the :title and :description keys cannot be empty and that those values should have a certain length.

Back in the controller - articles_controller.rb file:

def create
    @article = Article.new(params.require(:article).permit(:title, :description))
    if @article.save
      redirect_to @article
    else 
      render 'new'
    end
end

Ok, if the article can be saved, the user should be redirected to the show view to see it. However, if the validations are not met and the article cannot be saved then the form should re-render - essentially prompting the user to try again. Wouldn't it be nice to display an error message here for the user to better understand what went wrong?

Displaying error messages

First, we try creating a new article that we know cannot be saved. Remembering the validations we setup earlier - maybe the title is left empty and/or the description is too short. In the console try:

article = Article.new
=> #<Article id: nil, title: nil, description: nil, created_at: nil, updated_at: nil>
article.save
=> false
article.errors.full_messages
=> => ["Title can't be blank", "Title is too short (minimum is 6 characters)", "Description can't be blank", "Description is too short (minimum is 10 characters)"]

Chaining the errors and full_messages methods we get an array of messages. We want to iterate over this array and display each message. But where should we do this!? Well, since the "new article input form" is being displayed again when validations are not met we should display the error messages there for the user to see.

In the new.html.erb file:

<% if @article.errors.any? %>
  <h3>The following errors prevented the article from being saved:</h3>
  <ul>
    <% @article.errors.full_messages.each do |msg| %>
     <li><%= msg %></li> 
    <% end %>
  </ul>
<% end %>

Because of the instance variable @articles we have access to each newly submitted article in our view. <% if @article.errors.any? %> checks to see if there are any errors on each new instance - we needn't enter the iteration block unless it is necessary to do so. Then we simply iterate over the array of messages inside erb tags. Be sure to use = in the erb tag where you want the information to be displayed in the browser - <li><%= msg %></li>. The above code produces this in the browser:

Displaying messages using `flash`

Now, what if the new article is saved successfully? How could we tell the user this?

Back in the articles_controller.rb file:

def create
    @article = Article.new(params.require(:article).permit(:title, :description))
    if @article.save
      flash[:notice] = "This article was saved successfully"
      redirect_to @article
    else 
      render 'new'
    end
end

Above we say if the article is saved successfully to the database, we use flash to pass a temporary message from the create action to the show action. The show action will automatically pass the massage to its view. However, we can do something like this:

In the application.html.erb file:

...

<body>
   <% flash.each do |name, msg| %>
     <%= msg %>
   <% end %>
   <%= yield %>
</body>

Recap

We learned how to:

Implement Active Record built-in validations
Display error messages
Display messages using flash

I hope you found this tutorial to be helpful. As always, please ask questions, leave feedback, and share. Happy coding!

Deploying Rails Apps with Heroku

rwparrish — Fri, 11 Dec 2020 20:29:10 +0000

Deploying your first app is exciting! Let's take a look at what it takes in a Rails case.

Intro

First, a couple of key disctions between a local server and a production server:

A production server needs to be accessible at all times so anyone can go check it out.
The database will not be transmitted so once deployed, you need to create your own production database - only application code gets transmitted.

Quick aside: all of the instructions covered will be for Mac users. No worries Windows users! I will provide links to help guide you to the info you need along the way. This blog also assumes that you are currently using a popular version control system - Git.

Installing Heroku

Once you create your free Heroku account, you'll need the Heroku command-line interface (CLI) tools. It's time to install the Heroku CLI. To do so run the following command:

brew tap heroku/brew && brew install heroku

You can verify the installation went smoothly but running heroku in the command line. If installed correctly you will get the version as well as a list of commands available to you. Windows users check here.

Next, you will need to log into the Heroku account you just created. Run this command:

heroku login

Then follow the instructions in the terminal. It should take you to the browser to log in.

Now, following along with the instructions which can be found here the next step is to create a new rails app. For this blog, I have already created a simple Rails app and I am assuming you have already made one too if you are reading this - I am skipping this step.

Creating Heroku App and Prepping Local Code for Deployment

So, now it's time to deploy the application to Heroku. If you are following along here, you should scroll down until you find the title "Deploy your application to Heroku". Run the following:

heroku create

Great! Now we have a shell app created by Heroku with a link available to us. However, before our application code is deployed we need to get it production-ready which involves setting up our database gem for production.

Ruby comes with SQLite which is fine for development (especially small apps) but not so great for production (it's not a production-ready database) and will not work with Heroku. Heroku uses PostgreSQL as its default. To solve this we will change some things in the Gemfile of our project:

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
...

group :production do
  gem 'pg'
end

The bit that was added to the Gemfile was:

group :production do
  gem 'pg'
end

The gem for PostgreSQL (aka Postgre) was added.

Now, look back at the Gemfile, or the code snippet of mine above, and notice this line - gem 'sqlite3', '~> 1.4'. At this position in the Gemfile, this gem is made available universally in our app and we no longer want SQLite enabled for production. We want SQLite to be available only for development and test environments. Cut gem 'sqlite3', '~> 1.4' and move it:

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'sqlite3', '~> 1.4'
end

Because we have altered our Gemfile it's time to run bundle install. However, we do not want the gem we added for production - gem 'pg' to be installed locally. So, we run this:

bundle install --without production

This step makes the necessary updates to the Gemfile.lock for production and our application code is ready to be deployed. Now is a good time to make a commit.

Deploy App!

Now it's finally time to push our master/main branch to Heroku:

git push heroku main

A quick note about the code above. If you see an error message that looks like this:

error: src refspec main does not match any
error: failed to push some refs to 'https://git.heroku.com/sheltered-ocean-64484.git'

Try running:

git push heroku master

I won't go into exactly why this happens right now. Just know that some in the industry are changing terminology from "master" to "main".

Once it is working, it is going to deploy to the Heroku app that we created! This step can take a minute or two and when finished you should see a line in the terminal that looks something like this:

remote:        https://sheltered-ocean-64484.herokuapp.com/ deployed to Heroku

Go to that link to check out your deployed app!

Now let's change the auto-generated name Heroku gave our app, "sheltered-ocean-64484" in my case, by running the following from the terminal while in your app's directory:

heroku rename myappname

Now you can go to: http://mynameapp.herokuapp.com/ to view your app!

That's it for now. If we added some more features like database tables and migration files we would need to perform a couple more steps from our terminal. Check here for that info. Scroll to the "Migrate your database" section.

Reacp

This blog covered:

Installing Heroku
Creating a Heroku app
Making the necessary changes to our application code in preparation for deployment
Deploying the app and changing its name

I hope you found this tutorial to be useful. Please ask questions, leave feedback, and share.

Happy coding!

Associations in Rails

rwparrish — Sat, 05 Dec 2020 22:51:32 +0000

In this blog, I want to take a quick look at a very simple thing we can do to verify our associations have been set up properly at the start of a Rails project using some ActiveRecord magic.

Once you have an idea of what your database table relationships will look like and have them defined in your project, it's a great idea to quickly create some dummy data in the rails console to verify your associations are working how you want them to.

I was building an exercise journal and my relationships were as follows:

class Workout < ApplicationRecord
...
has_many :exercises
has_many :users, through: :exercises
...

class User < ApplicationRecord
...
has_many :workouts, through: :exercises
has_many :exercises
...

class Exercise < ApplicationRecord
...
belongs_to :workout
belongs_to :user
...

We will be verifying these associations. So we head into the terminal and play in the Rails console rails c to create a couple of users:

c = User.create(name: "Stan", email: "stan@stan.com", password: "password")

c is arbitrary here and is used to call the newly created user, if we do this we can confirm that the new user has been assigned a user_id of 1, meaning it was successfully saved to the DB. We should be able to see the attributes that were passed in as well (name, email, password). Repeat the process to create a second user which should save with a user_id of 2. Great! We’ve got our users.

Now on to workouts. It’s important to create the users and workouts first, given that our joins table is the exercises table. This is because each exercise created will need to be associated with a user and a workout - the exercises table will "join" the users and workouts tables. You can see this in the relationships code snippet provided above.

c = Workout.create(name: "HIT", notes: "No rest")
Very similar to the users example. This should save with a workout_id of 1. You can confirm this by calling c in the terminal. Make one more workout and then it’s time to create some exercises:

c = Exercise.create(name: "Burpee", user_id: 1, workout_id: 1)
Above I assigned foreign keys to the exercise object and then checked to see if it saved to the DB by calling c in the terminal.

c = Exercise.create(name: "Pushup", user_id: 2, workout_id: 1)
c = Exercise.create(name: "Situp", user_id: 1, workout_id: 2)

Now we can call User.all.first.workouts or User.all.last.exercises or Workout.all.last.exercises for example.

I hope this helps you get started. It’s important to verify these relationships are working correctly before getting too deep into your project.

Happy coding!

How does React update the DOM?

rwparrish — Sat, 28 Nov 2020 22:23:44 +0000

As I continue learning about React and working my way through this series on React, I find myself falling in love with it. In this blog, I would like to touch on React's virtual DOM.

What is the DOM?

According to MDN, the Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.
...
The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

React's Virtual DOM

React uses virtual DOM(s). A virtual DOM simply is a DOM representation in Javascript.

The render() method does not immediately render to the real DOM.

Render is in fact, more a suggestion of what the HTML should look like, but render() can very well be called and be the same as what was already displayed.

Upon render() being called, React compares virtual DOMs. It has an old virtual DOM and a re-rendered or a future virtual DOM. By comparing the "old" VDOM with the "future" VDOM, React can determine if there are any differences. If it detects differences, it reaches out to the real DOM and updates it--but not entirely!--it only changes the real DOM in the places where differences were detected.

This is important because as you might know, accessing the DOM is really slow. Specifically, every time the DOM changes, the browser needs to recalculate the CSS, layout, and repaint the page. This takes time and is something you want to do as little as possible.

Recap

React's virtual DOM means speed in most cases and it helps alleviate us from having to think about when to render changes to the DOM and focus more on writing code creatively and solving problems.

Happy Coding!

Jumping into Big O

rwparrish — Sun, 22 Nov 2020 01:59:42 +0000

Not all programmers are math people and that is OK. Big O notation can be a little intimidating to approach if you are one of those people. In this blog, I would like to gently introduce you to the concept of Big O notation.

Here is a link to an awesome widget that Colt Steele created. I highly recommend playing around with it to become more familiar with the concept of Big O. I will be using the same code snippets from the widget in this blog. Check it out!

So what is Big O Notation?

It is simply a way for us to talk about the runtime of an algorithm as its input grows. That's it. Big O is expressed as O(n) where n is the size of the input. When input grows, how will that affect the time it takes for the algorithm to run? When discussing Big O notation, we are talking in very broad terms and considering the worst-case scenario - the upper bound for runtime. So what does it mean to consider the worst-case scenario?

Simplifying Big O

When considering the worst-case scenario we are thinking about what would happen when the input(n) becomes insanely large. This means constants don't matter and operations like addition, subtraction, multiplication, and division become basically irrelevant. In most cases, we can omit all constants and ignore lower powers of n - for example:

O(1) - O(500), O(10,000), and O(1,000,000,000) all simplify to O(1).
O(n) - O(25n + n), O((57n / 3) * n), and O(1,000n) all simplify to O(n).
O(n²) - O(35n + n²) simplifies to O(n²).
O(n³) - O(35n + n² + n³) simplifies to O(n³).

Take a look at the graph below. As programmers, we want to stay out of the "bad" and "horrible" zone.

O(1) - as you can see in the graphic above, as the input grows, runtime remains constant. This is awesome. The algorithm runs quickly regardless of the size of the input. This is the ideal and most operations that perform a single operation fall into this complexity (in Computer Science the performance or runtime of an algorithm is also referred to as its complexity). Pushing to an array, getting an item at a particular index, adding a child element, etc, will take the same amount of time regardless of the array length. Algorithms with O(1) are ideal in their Big O complexity:

function addUpToSecond(n) {
  return n * (n + 1) / 2;
}

O(n) - as input(n) grows, broadly speaking, runtime increases at a linear rate. This is because there is a 1:1 relationship between data size (input) and runtime. All loops fall into this big O complexity:

function addUpToFirst(n) {
  var total = 0;
  for (var i = 0; i <= n; i++) {
    total += i;
  }
  return total;
}

Look closely at the two functions above - addUpToSecond and addUpToFirst. They accomplish the same thing but have different Big O complexity.

O(n²) - from a worst-case perspective, an algorithm with this complexity will not perform well. As input(n) increases the runtime will increase exponentially - check out the graphic above again. Stay away from nested loops:

function printAllPairs(n) {
  for (var i = 0; i < n; i++) {
    for (var j = 0; j < n; j++) {
      console.log(i, j);
    }
  }
}

Recap

In this post, we dipped our toes into the Big O complexity pool. We learned that Big O has everything to do with "measuring" the time it takes an algorithm to run in the worst-case scenario. It is best practice to avoid writing code that includes nested loops and O(1) is the ideal.

I hope this intro into Big O notation and complexity was gentle, clear, and helpful. There is more to the concept than was covered in this post, but this is a good start.

Please feel free to school me if you think you can explain something more clearly. Leave feedback and ask questions! Happy coding!

Debugging in React

rwparrish — Sun, 15 Nov 2020 03:46:55 +0000

Some developers love to do it and some hate that part of the job. One thing is for sure. Every dev has to debug - a lot. So, we may as well learn how to be very effective at it. In this post, I would like to expose you to some debugging tools that are available for use in a React application.

Chrome DevTools

From the Chrome DevTools page, "Chrome DevTools is a set of web developer tools built directly into the Chrome browser." This post will rely on these tools. If you are not familiar with Chrome DevTools yet, you are in for a treat. It offers lots of tools to help developers debug on the fly.

There are some useful keyboard shortcuts for launching the Chrome DevTools.

Mac:

command+option+J - to open the DevTools in the Console panel
command+option+C - to open the DevTools in the Elements panel

For Windows:

control+shift+J - to open the DevTools in the Console panel
control+shift+C - to open the DevTools in the Elements panel

With that let's start looking at some different ways to debug in React. I'd like to cover three things:

1. Error Messages

2. Tackling Logical Errors

3. Checking State

Error Messages

Take a look at the image below:

React is kind enough to give us some powerful hints right in the browser even pointing to a line number in the code where the error occurred - cannot read property 'value' of undefined simply means whatever comes before value on line 28,input in this case, is undefined.

Below is an example of the same exact error displayed in the Chrome DevTools Console panel:

Again, notice it is pointing us to line 28 in the App.js file. Isn't it awesome that we can so quickly pinpoint where the error in our code is!? At this point, we just have to figure out why input is undefined.

Logical Errors

Logical errors are more difficult to locate - we get no error messages and the app isn't functioning properly. For this, we can use the DevTools. Head to the Sources panel then find and open the file your code is coming from:

In there we can place a breakpoint (by clicking on a line number) where we think the problem is and poke around to see what is happening - walk through the code step by step. We can look at the data:

Above you can see that p.userId is undefined and is being compared to personId. Found it! The issue lies with p.userId.

Using the Chrome DevTools with Source Maps that are generated for you automatically is a powerful feature for detecting logical errors. You can walk through your code as written by you, even though it is not the code running in the browser.

Checking State

You can check the current state of your app in the DevTools but it can sometimes be a bit of pain. Thankfully, there is a handy extension that can be added to Chrome called "React Developer Tools."

Once installed:

I recommend playing around in there to experience everything you can. A few things you can do are: log components to the console, inspect matching DOM elements, inspect the source code, and change state/props to see how things change without having to hardcode anything in your code.

Recap

In this post, we learned that React gives us useful error messages in the browser, Chrome DevTools in your friend, and React Developer Tools is great for all things state-related.

I hope you learned something and as always, leave feedback, ask questions, and share! Happy coding!✌️

DEV Community: rwparrish

How to Ask for Support as a New Dev

Intro

When to Reach Out

Crafting the Ask

Be Specific:

Don't Ask for the Fish, Ask How to Fish:

Provide Context:

Show Gratitude:

Practical Example with Code

The Solid Outreach

Conclusion

Supercharge Learning to Code with the Feynman Technique

Intro

Outline of The Feynman Technique

1. Choose a Concept and Explain it:

2. Teach it to A Child:

3. Identify Gaps in Understanding:

4. Review, Simplify, and Repeat:

Applying The Feynman Technique to Coding

1. Choose a Concept and Explain it:

2. Teach it to A Child:

Conclusion

Pagination in Rails

Intro

Setting up

Step 1

Step 2

Step 3

Recap

Changing sate before saving to the database in Rails

So, what's a callback then?

So, what's an ActiveRecord callback then?

Recap

Using Bcrypt with Ruby

JavaScript Scope and Hoisting

Scope in JavaScript(JS)

rwparrish ・ Aug 23 '20

Solution

Function-level scope

Declaration vs. assignment

Hoisting

Recap

Next step

Validations and displaying messages in Rails

Active Record

A bit on params

Built in Active Record Validations

Displaying error messages

Displaying messages using flash

Recap

Deploying Rails Apps with Heroku

Intro

Installing Heroku

Creating Heroku App and Prepping Local Code for Deployment

Deploy App!

Reacp

Associations in Rails

How does React update the DOM?

What is the DOM?

React's Virtual DOM

Recap

Jumping into Big O

So what is Big O Notation?

Simplifying Big O

Recap

Debugging in React

Chrome DevTools

Mac:

For Windows:

1. Error Messages

2. Tackling Logical Errors

3. Checking State

Error Messages

Logical Errors

Checking State

Recap

A bit on `params`

Displaying messages using `flash`