DEV Community: Iona Brabender

Testing CRUD with RSpec and Rails

Iona Brabender — Sun, 13 Dec 2020 19:02:46 +0000

Testing is a vital stage in the development of any application and is a way to ensure that everything works as expected. One aspect that you'll probably want to test in your Ruby on Rails applications is whether your CRUD (Create, Read, Update, and Destroy) actions have been successful. This post will examine how we can use RSpec to do this.

What is RSpec?

RSpec is the most common testing tool for Ruby. It was created for behaviour-driven development (BDD), meaning that tests should be specified in terms of the desired behaviour of the program. If you want to learn more about BDD and RSpec, you can find a good overview here.

RSpec can be used to test any Ruby code. In this example, we'll be using RSpec Rails, which extends RSpec and Ruby on Rails to allow you to specifically test Rails applications.

Implementing Your Tests

1. Install Rails RSpec

We first need to install the rspec-rails gem. We can do that like so:

Include gem 'rspec-rails', '~> 3.4', '>= 3.4.2' in the :development, :test group in your gemfile. This is what it looks like in my gemfile:



group :development, :test do
    gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
    gem 'rspec-rails', '~> 3.4', '>= 3.4.2'
end

Note: You can find the most recent version of the rspec-rails gem here.

Run bundle install in the terminal to install the gems specified in your gemfile.
Run rails generate rspec:install to generate the spec files necessary for running your RSpec tests. This includes files for testing your models, controllers, and helpers and can be found in the newly created spec folder.

2. Create an Instance to Test

In these examples, we'll be writing tests that are directed at the Song class. I'll be writing these tests in the song_spec.rb file in the model directory, however, as I've covered below, these tests are by no means the only ones you might want to include in your model testing. Additionally, as you move forward with your application, you may also want to relocate these tests to the controller directory, depending on your preference.

If you ran rails generate rspec:install after setting up the model you want to test in your Rails application, your test files should have been automatically generated. Inside the newly created spec directory, you should find a models folder. Within that, you should find a file named [name of your model]_spec.rb. If you don't have that file, simply create a new file within the spec folder and ensure you follow the [name of your model]_spec.rb naming convention.

For me, this file is called song_spec.rb. My spec folder looks like this:

This file should contain some initial code, which will form the basis for your tests. For me, it looks like this:



require 'rails_helper'

RSpec.describe Song, type: :model do

end

This code shows that we are setting up an RSpec test for our Song class. The tests will be aimed at our Song model and we can write our code inside this block.

Before we can check if our CRUD actions work as expected, we need to create an instance of the Song class. To do that, we can set up a before(:all) do ... end block, like so:



RSpec.describe Song, type: :model do

  before(:all) do

  end

end

Using before(:all) allows us to specify what we would like to happen before we start testing. :all means that this block of code runs once before all of our tests run. Alternatively, we can use :each if we want something to run before each individual CRUD test.

We then need to create an instance of the Song class, which will be used as the basis for all of our tests. We can do that like so:



before(:all) do
    @song = Song.create(title: "Like a Rolling Stone", artist: "Bob Dylan", album:"Highway 61 Revisited", release_date: 1965)
end

It might seem counterintuitive to first create an instance before performing our tests. What we're really doing is trying each of our CRUD actions on our @song instance and then checking if they have been successful.

photo by @matyszczyk

3. Create Your CRUD Tests

Create

The first CRUD action we want to test is create. This is fairly straightforward - we simply check if the @song instance we created above is valid. The first step is to create an it do ... end block. After the it, we include a string which describes what the test is doing, like so:



it 'checks that a song can be created' do

end

We can then add the test code, like so:



it 'checks that a song can be created' do
    expect(@song).to be_valid
end

This code does exactly what it says - it checks if @song is valid and returns true or false depending on the result. If @song is valid, our test will pass. If the result is false, we know that our create action has been unsuccessful and that there is a bug in our code, which we need to locate and fix.

To perform the test, cd into your app directory and run rspec in your terminal.

Read

The rest of our tests will follow the same pattern as the create test. We first create an it do ... end block describing what the test does, before filling in the code which checks if the action was successful.

Here, we want to check if we can read the instance we created at the beginning. In this test, we find the song with the same title as the original @song instance and check if the result equals @song. If it does, our test has been successful. If not, there's a problem with our read action.



it 'checks that a song can be read' do
    expect(Song.find_by_title("Like a Rolling Stone")).to eq(@song)
end

Update

In this test, we want to check if we can update our @song instance. We can do that by first using the update method to change the title of the song and then searching for a song with the updated title. If the returned instance is equal to @song, we know our update has worked correctly.



it 'checks that a song can be updated' do
    @song.update(:title => "Like a Rolling Stone - Remastered")
    expect(Song.find_by_title("Like a Rolling Stone - Remastered")).to eq(@song)
end

Destroy

Finally, we want to check that we can destroy our instance. We can do this by first using the destroy method on our @song instance. We then check the total number of instances in the Song class. Because of the way our tests are set up and the fact that we've only created one instance, we can simply check that the Song.count is equal to 0 after that one instance has been destroyed. If an instance of the Song class still exists, @song has not been successfully destroyed and our test will fail. If the count is 0, everything has worked as it should.



it 'checks that a song can be destroyed' do
    @song.destroy
    expect(Song.count).to eq(0)
end

Of course, if you've already created other instances of the class you're testing, this test won't work correctly. In that case, you could use the destroy method and then search for the instance that should now be destroyed. If the search returns nil, you know destroy has worked as expected.



it 'checks that a song can be destroyed' do
    @song.destroy
    expect(Song.find_by(title: "Like a Rolling Stone - Remastered")).to be_nil
end

If everything is working correctly, you should end up seeing something like this:

A Note on RSpec

In this post we've only discussed testing CRUD actions. It's likely you'll want to include other tests, for instance for your validations. You may also want to test your controllers. You can add these tests to the relevant files in your controllers directory inside the specs folder, which will have been created when you ran rails generate rspec:install. Depending on how you've set up your app and what aspects you're hoping to test, it might make more sense for you to test your CRUD actions here.

The examples shown are just one way to write your RSpec tests. Ruby Guides provides many more examples here.

Sources

"rspec-rails", rubygems, Accessed December 7, 2020
"TDD Basics: How to Write an RSpec Test", Jeremy Schuurmans on DEV, Accessed December 7, 2020
"Getting Started with RSpec", Marko Anastasov on Semaphore, Accessed December 8, 2020
"The Definitive RSpec Tutorial With Examples", Ruby Guides, Accessed December 8, 2020

Memoization and Recursion

Iona Brabender — Fri, 20 Nov 2020 21:34:17 +0000

photo by @edgarraw

For my last blog post, I examined recursion and looked at some basic examples of how we could implement it. While I was learning about recursion, I kept coming across this word - memoization. I wasn't sure what it meant or why it was relevant, so I decided to investigate further. In this post, I'll be talking about why memoization can be an important factor when implementing recursion and how it can be used in calculating the Fibonacci sequence.

What is Memoization?

Memoization is a way to potentially make functions that use recursion run faster. As I'll show in an example below, a recursive function might end up performing the same calculation with the same input multiple times. This means it could end up taking longer than the iterative alternative. A memoization function allows us to store input alongside the result of the calculation. Therefore, rather than having to do the same work again using the same input, it can simply return the value stored in the cache.

photo by @yespanioly

Memoization and Fibonacci

To really understand memoization, I found it useful to look at how it is used when using recursion to calculate the nth number in the Fibonacci sequence. This is a very common example and could definitely be something you're asked to implement in a technical interview.

A quick note on the Fibonacci Sequence: This is a sequence of numbers where each number is the sum of the two preceding numbers. We always start with 0 and 1. The next number would then be another 1, because 0 + 1 = 1. We'd then get 2 (1 + 1 = 2), then 3 (1 + 2 = 3), and so on.

An initial recursive solution might look something like this:



function recursiveFibonacci(n) {

  if (n <= 1) {
      return n;
  }

  return recursiveFibonacci(n-1) + recursiveFibonacci(n-2);

}

recursiveFibonacci(6);
// 8

recursiveFibonacci(10);
// 55

recursiveFibonacci(20);
// 6765

If you're unclear on how recursion works, you can look at my previous blog post, which provides an overview of recursion, or this post which specifically tackles recursion and the Fibonacci sequence.

Yey, it works! But, while this function is just a couple of lines long, it's hugely inefficient and would take longer than the iterative alternative. The runtime is exponential, meaning that whenever we increase the input by 1, there is a huge growth in terms of how long it takes to compute. This is because the function is being called multiple times with the same arguments.

We can see in this diagram how that happens:

Recursive Fibonacci Function in Tree Representation

When the input is 6, the function makes several recursive calls with each of the numbers preceding 6. For instance, F(2) is called five times! While this might not have a huge effect here, we can imagine how negatively the runtime would be impacted when our input was, say, 1,000. Evidently, we need a better solution.

photo by @steffipereira

Memoization to the rescue! With a memoization function, we can create a cache where we store inputs with their calculated results. Then, whenever we have an input that we've already seen, we can simply retrieve the result rather than redoing any of our work.

Below, we can see an example of how such a function might be created:


 javascript
// We've separated out the memoization function from our Fibonacci calculating function to allow it to be reused.
function memoize(fn) {

    // We create the cache which we'll use to store the inputs and calculated results.
    const memoCache = {};

    return function(n) {

        // We can check if we've already performed a calculation using the given input.
        // If we have, we can simply return that result.
        if(memoCache[n]) {
            return memoCache[n];
        }

        // If we don't find the current input in our cache, we'll need to perform the calculation.
        // We also need to make sure we store that input and result for future use.
        const result = fn(n);
        memoCache[n] = result;

        return result;

    }

}

// Our recursiveFibonacci function can remain the same.
function recursiveFibonacci(n) {

    if (n <= 1) {
        return n;
    }

    return recursiveFibonacci(n - 1) + recursiveFibonacci(n - 2);

}

// We reassign recursiveFibonacci to our memoize function with recursiveFibonacci passed as the argument.
recursiveFibonacci = memoize(recursiveFibonacci);

recursiveFibonacci(6);
// 8

recursiveFibonacci(10);
// 55

recursiveFibonacci(20);
// 6765

Great! We now have a more efficient recursive solution that avoids redoing the same work. This means that, when implemented correctly, our runtime becomes linear rather than exponential, which is a huge improvement.

Additionally, as this is a pretty generic function, we could even reuse it in combination with other recursive functions. In that case, you might also want to increase the number of arguments the function is able to take, for instance using ...args, in order to make it more abstract.

A Note on Memoization

By creating a cache, we're using additional space, so you have to decide whether that's worth the improved speed. If you have a very large range of inputs where it's fairly unlikely that you'll need to repeat the same calculations, memoization may not be an efficient solution after all.

Sources

"Understanding JavaScript Memoization In 3 Minutes", Codesmith on codeburst.io, Accessed November 20, 2020
"Implementing Memoization in Javascript", Arielle Gordon on Medium, Accessed November 20, 2020
"Recursive Fibonacci Method Explained", Bennie van der Merwe with LaunchSchool on Medium, Accessed November 20, 2020
"What Is the Fibonacci Sequence?", Tia Ghose on Live Science, Accessed November 20, 2020

Recursion Revealed

Iona Brabender — Sat, 07 Nov 2020 00:17:52 +0000

photo by @pkmfaris

As a recent software engineering graduate, I've been spending a lot of time readying myself for technical interviews. Part of this process has been learning more about data structures and algorithms. In this post, I'll be discussing why recursion is useful and how we can implement it. I'll also examine two common recursion examples, how to sum numbers from 1 to n and how to reverse a string using recursion.

What is Recursion?

We can say that a function is recursive if it calls itself as a subroutine. Personally, I've found that, while this makes sense in theory, it can take a while to really wrap your head around how recursion works. Essentially what we're doing is breaking something down into smaller problems by calling the function on itself. Once we reach a point where the problem can be solved without being further reduced, we stop the recursion call and return the answer.

When to Use Recursion Rather Than Iteration?

Recursion and iteration can often be used to similarly solve problems. Why then would we choose to implement a recursive solution rather than a straightforward iterative one? Here are some points to take into consideration when deciding:

Recursive functions are normally shorter than iterative ones, which can (but doesn't always!) lead to cleaner and more legible code.
Recursive solutions are often able to handle more complex problems and structures than iterative solutions. If you're dealing with, for instance, an elaborate tree structure, you'll probably want to use recursion.
Iterative functions are generally faster than recursive ones, so if your program is suited to iteration and speed is important, you may want to consider the former.
A downside of recursion can be the stack limit. If this is relevant to your function, iteration may be preferable.

Elements of Recursion

When creating a recursive function, we need to include the following elements:

A Base Case
- Usually this is activated when a specific condition is met, for instance when the input reaches 0.
- When the function reaches the base case, it stops calling itself and returns the result.
Logic to Reach Base Case
- This is where the function performs logic that will bring us closer to the base case.
- For instance, if the condition for the base case is that the input is equal to 0, this logic could be that 1 is subtracted from the input on each call.
- Without this logic, we could get stuck in an infinite loop.
Recursive Call
- The recursive call is where we call the function within itself.

photo by @benji3pr

Examples of Recursive Functions

Example 1: Recursively Sum Numbers From 1 to n

In this example, we'll write a function that takes a number, n, and returns the sum of all the numbers from 1 to n:

const recursiveSumToN = (n) => {

  if (n <= 1) {
    return n;
  } else {
    return n + recursiveSumToN(n - 1);
  }

}

recursiveSumToN(5);

// 15

When we call recursiveSumToN(5), we'll get the sum of 1 + 2 + 3 + 4 + 5, which equals 15.

How does this function work? As outlined above, we need a base case, logic to reach the base case, and a recursive call. We can see below which lines of code fulfil each of these responsibilities:

const recursiveSumToN = (n) => {

  if (n <= 1) {
    // BASE CASE: We want to count the numbers from 1 to n, so we need to stop when n === 1.
    return n; 
  } else {
    // LOGIC TO REACH BASE CASE AND RECURSIVE CALL: If n is > 1, we haven't reached our base case, so we need to call our function again.
    return n + recursiveSumToN(n - 1); 
  }

}

recursiveSumToN(5);

// 15

So, for as long as n, i.e. the input, is more than 1, our function calls itself using n - 1. By continuously reducing n by 1, we are working towards the base case and so don't end up in an infinite loop.

The above function can be illustrated like so:

recursiveSumToN(5)
  // this translates to:
  recursiveSumToN(4) + 5
    // =>
    recursiveSumToN(3) + 4
      // =>
      recursiveSumToN(2) + 3
        // =>
        recursiveSumToN(1) + 2
        // 1

The function works in two steps. It repeatedly calls recursiveSumToN until it reaches the base case. Once it fulfils this base case, it begins to resolve the other function calls.

It can also be useful to add some console.logs to our code to see the order in which things are happening:

const recursiveSumToN = (n) => {

    console.log("n: " + n);

    if (n <= 1) {
        console.log("We've hit the base case!");
        return n;
    } else {;
        return n + recursiveSumToN(n - 1);
    }

}

recursiveSumToN(5);

// n: 5
// n: 4
// n: 3
// n: 2
// n: 1
// We've hit the base case!
// 15

So, n decreases by 1 each time until we hit our base case and the function returns our answer.

photo by @robertbye

Example 2: Recursively Reversing a String

In this second example, we're going to look at a function that takes a string, string, and reverses it. This is a problem that can be solved in a number of ways, including iteratively, however we'll take a look at a potential recursive solution:

function recursiveReverseString(string) {

  if (string === "") {
    return ""; 
  }
  else {
    return recursiveReverseString(string.substr(1)) + string.charAt(0);
  }
}

recursiveReverseString("hello");

// olleh

As we can see, the output of this function is the reverse of the original string. In this case "hello" becomes "olleh".

Below, we can see the base case, logic, and recursive call.

function recursiveReverseString(string) {

  if (string === "") {
    // BASE CASE: Once the string is empty, we have reached our base case.
    return "";
  }
  else {
    // LOGIC TO REACH BASE CASE AND RECURSIVE CALL: One character is removed each time the function is called until we reach our base case.
    return recursiveReverseString(string.substr(1)) + string.charAt(0);
  }
}

recursiveReverseString("hello");
// olleh

We can also add some console.logs to see how the string changes with each call:

function recursiveReverseString(string) {

  if (string === "") {
    console.log("string: " + string);
    console.log("We've hit the base case!");
    return "";
  }
  else {
    console.log("string: " + string);
    return recursiveReverseString(string.substr(1)) + string.charAt(0);
  }
}

recursiveReverseString("hello");

// string: hello
// string: ello
// string: llo
// string: lo
// string: o
// string: 
// We've hit the base case!
// olleh

Each time the recursiveReverseString function is called with one fewer character, until we have an empty string. The function then resolves each of the calls and finally outputs the reverse of the original string.

Practice

Being able to implement recursion can be very useful, especially in a technical interview. HackerRank, Codewars, and LeetCode have a variety of recursion-based exercises for you to learn more, develop your skills, and practice.

Sources

"When To Use Recursion/When To Use Iteration", CSIE, Accessed November 6, 2020
"Principle of Recursion", LeetCode, Accessed November 6, 2020
"What is the function of recursion? Why do we need recursion in programming?", Quora, Accessed November 6, 2020
"Recursion Explained (with Examples)", Christina McMahon on DEV, Accessed November 6, 2020
"Recursion and Stack", Christina McMahon on DEV, Accessed November 6, 2020

Creating a Portfolio Website Using GitHub Pages and React: Part 3

Iona Brabender — Tue, 27 Oct 2020 16:39:13 +0000

photo by @sincerelymedia

Part 1 on why I chose GitHub Pages and React is available here.
Part 2 on how to get started with your GitHub Pages and React app is available here.

As a recent software engineering graduate, I decided to create a portfolio website as a way to showcase what I can do as well as to improve my coding skills. In previous posts, I've discussed why GitHub Pages and React are good tools for a portfolio site and how to get started with your app. In this post I'll be looking at how I set up my custom domain and added it to my GitHub Pages and React website. While a custom domain name is completely optional, it can be a great way to personalise your portfolio.

Click here to see the website I've created using GitHub Pages and React.

Why Use a Custom Domain?

When you create your GitHub Pages website, it will automatically be published at your equivalent of username.github.io (in this case, mine would be iona-b.github.io). While it's absolutely fine to use this URL, there are a couple of reasons why you might want to consider using a custom domain.

1. It Can Help You Strengthen Your Brand

When you originally created your GitHub account, you may have chosen a username that's not completely recognisable as you. While you can change your username, there might be unintended side effects, so it's something you may want to avoid. You can mitigate this issue by choosing a custom domain name that makes your site immediately identifiable to visitors and minimises any potential confusion.

2. It Makes Your Website Look More Professional

Using the github.io version doesn't look bad by any means, but having your own custom domain shows that you're taking your portfolio website seriously and that you have the skills to properly configure it.

3. It Can Be Free or Relatively Inexpensive

Most domain registrars offer your first domain registration at a relatively low price and some will even give you a certain period for free. You should look carefully at the terms before signing up to avoid any hidden costs, but getting your personalised domain name is a no-brainer if you can find a good deal.

How to Use a Custom Domain Name with a GitHub Pages and React Website

To use a custom domain with your GitHub Pages and React website, follow these steps:

1. Decide on a Domain Name

Generally, when it comes to choosing a domain name for a portfolio website, the firstnamelastname.com format is preferred, as it makes your site easy to find. If someone else has already registered your preferred domain name, try to come up with a close alternative (perhaps you can add a dash between your first and last name, or include a middle name?) and make sure that you're consistent across all of your online branding. If you've already established a personal brand using something other than the firstname + lastname format, go with that.

2. Choose a Domain Registrar

There are many companies with which you can register a domain name and they'll often offer additional services, such as a sizeable storage limit or a backup system. Some factors you may want to consider include pricing, expiration policies, whether you can transfer a domain name to another registrar, add ons and hidden fees, and other users' reviews. You can find an overview of some of the most highly-rated registrars here, so make sure you look around and consider all of your options before deciding.

3. Set up Your Domain Name System (DNS)

The Domain Name System (DNS) is a naming system for computers and other resources connected to the internet and is responsible for translating domain names to IP addresses, which in turn allows your browser to load the resources at that IP address.

Once you've registered your domain, it's likely that you'll need to set it up correctly to be able to use it. As I used GoDaddy for my domain name, I'll be explaining specifically how to configure your DNS settings using this service. If you've chosen a different domain registrar, you may need to search for instructions specific to that service, however the rest of this guide should still be relevant.

Configuring Your DNS Settings Using GoDaddy.com

Go to the DNS Management Page for your chosen domain and make the following changes:

In the Type A row, update the value to 185.199.108.153. This allows your domain name to point to the GitHub server.
Add another Type A row and use the IP address value of 185.199.109.153.
Add another Type A row and use the IP address value of 185.199.110.153.
Add another Type A row and use the IP address value of 185.199.111.153.
Add your GitHub Pages URL as the value for the Type CNAME row. For me, this would be iona-b.github.io.

Once you've made those changes, your finalised DNS Management page should look something like this:

Updated DNS Management Page

4. Add Your Domain Name to Your App

Once you've correctly configured your DNS settings, go to the package.json file for your app. When you initially set this up, you probably added your version of

"homepage": "http://iona-b.github.io/"

to the first section of the file. You can now update this with your new domain name. It should end up looking something like this:

Add Domain Name to package.json

Make sure you push your changes and run

npm run deploy

before moving onto the next step.

5. Add Your Domain Name to Your Repository

Finally, you just need to add your domain name to your repository. Go to the GitHub Pages section of your repo and add your new domain name to the Custom Domain Section and save. The updated page should look like this:

Add Domain Name to GitHub Repository

And that's it! You should now be able to access your website at your custom URL.

In the next post, I'll be looking more at the React app itself and how we can use it to create an effective portfolio website. See you then!

Part 1 on why I chose GitHub Pages and React is available here.
Part 2 on how to get started with your GitHub Pages and React app is available here.

Sources

"Configuring a custom domain for your GitHub Pages site", GitHub Docs, Accessed October 23, 2020
"Changing your GitHub username ", GitHub Docs, Accessed October 23, 2020
"GoDaddy Domain with GitHub Pages", Jinna Balu on Medium, Accessed October 23, 2020
"10 Best Domain Registrars", HostingFacts, Accessed October 23, 2020
"What is DNS?", Cloudflare, Accessed October 23, 2020

Creating a Portfolio Website Using GitHub Pages and React: Part 2

Iona Brabender — Sun, 18 Oct 2020 21:15:01 +0000

photo by @lum3n

Part 1 on why I chose GitHub Pages and React is available here.
Part 3 on how to use a custom domain name is available here.

As a budding software engineer, I decided to create a portfolio website so that I had more opportunity to share my experience and projects and because it was a great way to keep developing my coding skills. In this series of blog posts, I'll be talking about why I created my portfolio website using GitHub Pages and React.js and what steps I took to achieve this. In this post I'll be working my way through creating an initial React app and getting it online using GitHub Pages.

Click here to see the website I've created using GitHub Pages and React.

Step 1: Getting Set Up

If you've already created an app using React and have worked with GitHub before, it's likely that you already have a good setup in terms of what you need to get started, so you may want to skip straight to step 2. Here, I'll quickly go over what tools are absolutely necessary for this process. I've also suggested resources you can use as a guide for certain actions, but there are many more options out there, so feel free to do some searching of your own if you feel like anything's still unclear.

1. A GitHub Account

You can sign up for a free GitHub account at github.com.

2. Install Git on Your Machine

Git comes pre-installed as standard with most operating systems, but you can check by running git version in your terminal to see if it returns a version number. If it doesn't, you'll need to go ahead and install it and you can find a comprehensive guide for GitHub Desktop, MacOS, Windows, and Linux users here.

3. Set Up GitHub Correctly

Once you've set up your GitHub account and have installed Git on your computer, you'll need to make sure you've configured everything correctly and have added your SSH key to your account. Mac users can find information on this here and Windows users can look at this guide.

4. Install Node.js and npm

Node.js is a runtime environment and is used to execute programs written using JavaScript. npm works as a software library, a package manager, and an installer. It's open-source, contains almost 1 million packages, and is a great way for developers to share code. You can download Node.js from the official website here.

5. Select Your Text Editor

You'll need to have a text editor installed in order to edit your code. I really like using Visual Studio Code, but you're free to use whatever you're most comfortable with.

Step 2: Creating Your GitHub Repository

Once you've set up your environment, the next step is to create the repo which will contain your website files. After logging into your GitHub account, click the button to create a new repository. In order for GitHub Pages to work correctly, you'll need to name this repo using the following format: username.github.io, where the username is your exact GitHub username. In this case, mine would be iona-b.github.io.

Creating your repository in GitHub

Step 3: Creating Your Initial React App

At this point, we won't be creating a fully-functioning React app. We just want to reach the stage where we can get our site online and we'll build it out further later on. If you're familiar with React, you may already want to add a simple "under construction" notice, just in case anybody does come looking, and it's probably wise not to post your URL anywhere until you're completely happy with your work.

To initialise your React app, cd into whichever directory you want to work in on your computer and run npm init react-app <whatever-you-want-to-name-your-app> This will create all of the files you need to get started.

Step 4. Install GitHub Pages as a Dev-Dependency

Dependencies in React are reusable components created by developers which give you access to interesting libraries and functionality. In order for your site to work, you'll need to install gh-pages, which you can do by cd-ing into your React app and running ```npm

install gh-pages --save-dev


<br></br>

## Step 5: Update Your package.json File
When you initialise your app, you'll notice that a package.json file is automatically generated for you. This is a JSON file that is used to manage the project's dependencies, scripts, and versions. To make sure your website can deploy properly, there are three lines of code we'll need to add.

### 1. Add a Home Page
In the first section of the package.json file, add a homepage, for instance: ```"homepage":

 "http://iona-b.github.io/"

2. Add Predeploy

In the scripts section, add a predeploy, for instance: ```"predeploy":

"npm run build"


### 3. Add Deploy
Also in the scripts section, add a deploy, like so: ```"deploy":

 "gh-pages -d build"

Your additions should look something like this:

Your updated package.json file

Step 6: Push to GitHub

Once you've completed the above steps, you should push your changes to GitHub. To do so, you can run the following commands:



git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <repository URL>
git push -u origin main

Step 7: Deploy

Now it's time to get your app online! Simply run npm run deploy and the scripts you added to your package.json file should kick into action.

Step 8: Update Your Repository Settings

Go to settings in your repository and look at the GitHub Pages section. Underneath the Source heading, you should have the option to select which branch the site is being built from. Change the branch to gh-pages. This way, your repository will know what files you want to use to build your website.

Updating your settings in your GitHub repository

Step 9: Celebrate Your Success in Building Your Website!!

Your site should now be available at your-username.github.io/. Sure, it's not quite a full-blown portfolio website yet, but you've done the hard work and now you can start on the fun part!

photo by @amyshamblen

In the next post, I'll be looking at how to use your own custom domain name for your website. See you then!

Part 1 on why I chose GitHub Pages and React is available here.
Part 3 on how to use a custom domain name is available here.

Sources

"Getting Started with GitHub Pages", GitHub Guides, Accessed October 16, 2020
"Install Git", Git Guides, Accessed October 16, 2020
"Understanding the package.json file", Tech Digests, Accessed October 16, 2020
"Beginner's Setup Guide for Git & Github on Mac OS X", burnedpixel, Accessed October 16, 2020
"What exactly is Node.js?", freeCodeCamp, Accessed October 16, 2020
"What is npm?", w3schools, Accessed October 16, 2020
"How to build and deploy a React app to Github pages in less than 5 minutes", Anjali Sharma on Medium, Accessed October 16, 2020
"How to deploy React App to GitHub Pages", Ibrahim Ragab on DEV, Accessed October 16, 2020

Creating a Portfolio Website Using GitHub Pages and React: Part 1

Iona Brabender — Fri, 09 Oct 2020 15:36:12 +0000

photo by @joannakosinska

Part 2 on how to get started with your GitHub Pages and React app is available here.
Part 3 on how to use a custom domain name is available here.

As a recent graduate from the Flatiron School Software Engineering program, I've just begun my job search and have been trying to grow my online presence. One important aspect of this has been creating my own portfolio website. In this post, I'll be discussing why a portfolio is essential for any new software developer and why GitHub Pages and React are great tools for creating it.

In future posts, I'll be going step by step through the process of creating a portfolio website using GitHub Pages and React, so stay tuned!

Click here to see the website I've created using GitHub Pages and React.

Why Create a Portfolio Website?

If you're a developer, it's likely that you already have a variety of platforms where you talk about your projects and experience. Why then bother with an additional portfolio?

1. It gives you more flexibility than other platforms

While LinkedIn and GitHub are fantastic tools for showing potential employers what skills you have and what projects you've worked on, you can't always personalise your page in the way that you'd like to. Having your own portfolio website allows you to show exactly what you want to show in the way that you want to show it. It's like having a resume but, instead of trying to fit everything onto one page, you have the space to show as much as you'd like and to draw attention to anything you think is important.

2. It allows you to show what you can do

Personally, I would love the opportunity to become a front-end developer and many of those roles ask for languages and libraries such as JavaScript and React.js. By building my website using React, I'm able to actively show potential employers what I can do with those tools and hopefully impress them with aspects I wouldn't be able to show as effectively on my resume.

3. It keeps you coding

As any fellow bootcamp grad knows, completing an intensive program is tough and it can be really tempting to take a break from coding. While it's definitely a good idea to take a couple of days off every now and then, you should never stop coding altogether. It can seem hard to find time to code, especially given how much you have to do when beginning your job search, for instance trying to put your resume together, getting those project demo videos recorded, and developing your network. For me, creating my portfolio website was a great opportunity to feel as though I was working on my job search while still keeping my coding skills sharp. It also gives you the opportunity to learn new things, shows employers that you're still working on projects, and keeps your GitHub contributions in the green.

4. It's fun!

For me, one of the most enjoyable aspects of creating my portfolio website was being able to make something in exactly the way I wanted to. While there were certain things that I knew I had to include, I had free rein over the look and functionality of my portfolio. It was nice coming from the bootcamp world of rules and regulations with regards to projects and instead being able to make something that looked and worked exactly how I wanted it to.

photo by @richygreat

Why Use GitHub Pages?

GitHub Pages allows you to turn a GitHub repository into a website. GitHub looks for web content on the master or GitHub Pages branch tied to your personal URL (more on this below) and builds your site for you in a matter of seconds. There are many options out there in terms of how to get your website online, so why choose GitHub Pages?

1. It's easy to use

As I'll cover in the next post, GitHub Pages is incredibly easy to use. Starting out on my job search, I wanted to get my site up and running as fast as possible, without having to worry about setting up a database or configuring a server. Because I already had a GitHub account which I used on a regular basis, I was familiar with the GitHub interface and flow, so the process of setting up a GitHub Pages site wasn't too much of a leap. Even if you don't have a GitHub account or don't feel very comfortable with how GitHub works, I'd still recommend using GitHub Pages. GitHub is essential for any developer to know how to use well, so this is the perfect opportunity to get familiar with it.

2. It's free

Yes, 100% free, making it the perfect option for your first website, especially if you're in the process of looking for a job. As I'll talk about below, you might choose to invest in a custom domain name, but it's not necessary if you're happy with the standard version.

3. You can add your own custom domain name

When you create your site, it will initially be available at http(s)://.github.io (for instance, http://iona-b.github.io). While this domain name might suit your purposes, you may want something a little more personalised. You can purchase a different domain name at a number of sites at an affordable price and make your GitHub Pages site available there.

4. It's open source

GitHub is fantastic because it actually allows other users to see what your code looks like (as long as you're working in a public repository). That means that you can show people the interesting ways in which you've solved particular problems, provide examples to other users, and generally contribute to the coding community.

5. You can make changes and redeploy whenever you like

Once you've deployed your website, it's really simple to make updates and redeploy. If you've ever used GitHub before you'll be familiar with pushing changes and it just takes one extra step to redeploy your website.

photo by @sapegin

Why Use React?

There are different options when it comes to building your website with GitHub Pages and React is by no means required. For instance, you may want to use GitHub's recommended static site generator, Jekyll to build your website. Why then did I choose to use React?

1. It's a great way to improve your React.js skills

I personally love using React, so choosing to utilise it for my portfolio website wasn't a hard decision. If you already have experience working with React, this should be a fairly intuitive process. Depending on what you want to show, you can make it as straightforward or complex as you like and it's a great way to continue building on your skills. If you've never worked with React before, this could be a great opportunity to learn something new. There are so many fantastic React.js tutorials out there and it's easy to keep your site simple while you develop your skills. Once you become more comfortable with it, you can always add more features.

2. You gain access to many amazing libraries

Working with React gives you access to a variety of different libraries which allow you to further personalise your app. Want to add videos? There's a library for that. Want to add CSS specifically geared towards React? There's a library for that. Want to create a game using Unity and have it in your React app? Yep, there's also a library for that.

3. There's a really strong React.js community

No matter what question you have when it comes to working with React, somebody will have answered it somewhere. React is supported by Facebook and Instagram engineering teams, as well as dedicated experts, and there is a wealth of documentation, Stack Overflow discussions, Dev and Medium blog posts, and other resources to help you along in your React journey.

In future posts, I'll be working through exactly how I built my website using GitHub Pages and React. See you then!

Part 2 on how to get started with your GitHub Pages and React app is available here.
Part 3 on how to use a custom domain name is available here.

Sources

"About GitHub Pages", GitHub Docs, Accessed October 8, 2020
"Setting up a GitHub Pages site with Jekyll ", GitHubDocs, Accessed October 8, 2020
"What is GitHub Pages", GitHub Pages, Accessed October 8, 2020

Params and Rails

Iona Brabender — Wed, 09 Sep 2020 17:39:23 +0000

photo by @georgie_cobbs

Experimenting with creating your first Rails app can be an exciting experience, but one aspect that can be confusing for beginning developers is the idea of params, and how to ensure we have access to the data we need, whether it be information given to us by users, or items that we want to pass behind the scenes. In this post we'll take a look at some different ways in which this can be achieved.

What Are Params?

Params are the parameters which are passed to the controller via a GET or POST request, and come from the ActionController::Base. Your application is able to access these params through the ApplicationController. Generally params are comprised of information given to you by your user, for instance through a URL or a form, however we often need access to and control over params in situations where our user hasn't entered any new information.

Passing Params

Passing Params Through the URL

The most simple way in which we get params from a user is through the URL they use. When the user enters, for instance, some_website/users/22, the parameters we have access to will look something like this:

<ActionController::Parameters {"controller"=>"users", "action"=>"show", "id"=>"22"} permitted: true>

By adding the id "22" to the end of their URL, the user is specifying which profile they'd like to see. As a result, we now have access to this id, and can use it to show the user exactly what they're looking for by using the params[:id] in our UsersController show action.

def show
    @user = User.find(params[:id])
end

While useful and necessary, this is a basic example of params, and there are many other ways in which a user can provide information for us to work with. Below we'll examine how to handle data submitted by the user, and how we can pass this data from one view to another.

Passing Params Through a Form

The first way of passing params that developers usually become familiar with is through a form. There are several different ways in which you can construct forms, some of which are explored further here: https://dev.to/ionab/what-s-this-formfor-fee .

In this example, we're allowing the user to create a new profile using form_for.

<h2><%= "Create a Profile" %></h2>

<%= form_for @user do |f| %>
    Username: <%=f.text_field :username %><br><br>
    Password: <%=f.password_field :password %><br><br>
    Location: <%=f.text_field :user_location %><br><br>
    <%=f.submit %>
<% end %>

Once the user submits their information into the text fields, we need to have access to that data in order to add their profile to our database. Below, we can see the params that we have access to for this purpose:

<ActionController::Parameters {"authenticity_token"=>"6Uz75TYfsd5Q5HAkJzZKGl7Vjc4pLPsyFsjsPQZGmorhMYMNM29rD9pfJjWXJ/156fUbz9L8uoBjDoHeRdi56A==", "user"=><ActionController::Parameters {"username"=>"andy", "password"=>"password", "user_location"=>"San Francisco"} permitted: true>, "commit"=>"Create User", "controller"=>"users", "action"=>"create"} permitted: true>

All of the information entered by the user is accessible to us, and we can choose to utilise and manipulate it as we wish. In this case, we've taken the extra step of setting up strong params using the following method in our UsersController:

    def user_params
        params.require(:user).permit(:username, :password, :user_location)
    end

Strong params are an optional but highly-recommended part of a developer's toolkit. Rather than allowing the user to edit our form and provide us with potentially malicious input, we define what we require (in this case the :user instance), and what we permit (here the :username, :password, and :user_location).

This method means that we can access the data by calling user_params. For instance, if we wanted to access the username, we could do that like so:

user_params["username"]

As we're creating a new profile for our user in this example, we'd probably want to pass the params to a create action:

def create
    @user = User.new(user_params)
    @user.save
    redirect_to @instructor
end

By using params containing the data entered by our user, we're able to add their profile to our database.

Passing Params Through a Hidden Field Tag

While it's fairly straightforward to see how we can access data that has been entered through a form, it can be a little more complicated to work out how to pass information between views when we don't have any direct input from the user at that specific moment. For instance, we can imagine that a user has selected certain items from our online store, and is now being asked if they'd like to proceed to the order summary. We need to make sure that the information about the items they've selected is carried over to the new order page, so that they can see what they've chosen before actually finalising anything. It would be annoying for the user to have to re-enter anything, so we can just pass the information they've already given us using a hidden_field_tag, like so:

<%= form_for @order do |o| %>
    <%= hidden_field_tag(:item_1, @item[0].id) %>
    <%= hidden_field_tag(:item_2, @item[1].id) %>
    <%= o.submit "Proceed to Order Summary" %>
<% end %>

On this page, we have access to an @items array, and we are setting :item_1 and :item_2 to the ids of the first and second elements in that array. Obviously, this is quite a narrow example, as we are only allowing the user to select two items, however this can be expanded depending on the functionality of your application.

Passing Params Through a button_to

There are often situations in which we don't have a form, but still need to be able to pass information. One way in which we can do this is by defining params in a button_to, like so:

<%= button_to "Place an Order", new_order_path, params: {items: @items}, method: :get %><br>

Again, we wouldn't want to the user to have to re-enter information whenever they change page, so we can make sure all of the data goes along with them by setting items: to @items in our params. This means that we can access items in our params in the same way that we would access that data if they had submitted it through a form. Using params with a button_to allows us to determine what data we need and to make sure that we have access to it in the next view.

Passing Params Through a link_to

Similarly, we are also able to pass params through a link_to. The syntax is slightly different and doesn't involve us defining params: as we did with button_to, however it passes the information in much the same way. In this example, it will allow us access to the @item.id and @style.id in the next view:

<%= link_to @item.name, new_order_path(item_id: @item.id, style_id: @style.id) %><br>

While it seems to the user that they are simply clicking a link, we are passing extra information on the back end, allowing our app to run more smoothly, and negating the need for the user to re-enter any information.

Which of These Options Works Best?

Depending on the specific needs of your app, any one of these different methods can be useful in terms of taking data from your user, and having access to that information. You may want to use a hidden_field_tag if your user is submitting a form, and your application requires that you pass on additional information. Passing data through a link_to or a button_to allows you to carry over params in situations where your user isn't entering any new information, and you just need to carry data over behind the scenes.

Sources

"Action Controller Parameters", API, Accessed September 8 2020
"hidden_field_tag", API, Accessed September 8 2020

Hashing It Out

Iona Brabender — Thu, 13 Aug 2020 19:49:50 +0000

photo by @karishea

Hashmaps are a type of data structure used in computer science to format, organise, and manage data. In this blog post, we'll take a look at why we use them, how they work, and what the advantages and disadvantages can be. Additionally, we'll also quickly examine the introduction of Map to JavaScript with ES6.

What is a hashmap?

Hashmaps allow us to organise data in a way that later enables us to retrieve values based on their keys. In a hashmap, a key is assigned to a single value. In the table below, we've included some characters from Avatar: The Last Airbender. In this example, the names would be our keys, and the favourite foods would be the values. As we can see, each character has one (and only one!) favourite item. Likewise, in a hashmap, we can only allocate one value per key.

Now that we have some basic data, we can take a look at how this would work with a hashmap.

How do hashmaps work?

Hashmaps work by first utilising a hashing function to determine how to store data. Let's imagine that we're working with our favourite foods table. Our computer won't just store the data as it is - instead, the hashing function will take the keys and turn them into array indexes, and eventually return the data as an array. Hashing functions are also known as compression functions, because the output is smaller than the input.

For example, we could create a very basic function like so:

function simpleFunction(string) {
  let numberOfAs = 0
  for (let i=0; i < string.length; i++) {
    string[i].toLowerCase() === 'a' ? numberOfAs ++ : null
  }
  return numberOfAs
}

This function takes a string, counts the number of 'a's within the string, and returns that number, which can then be used as an index in an array.

Note that this is not an actual hashing function - the output of a hashing function is the entire array of data, not simply the 'hashed' keys.

Our example function would return the following values:

Using these returned values, we can store Toph's information at index 0, Sokka's at 1, Aang's at 2, and Katara's at 3. This is a very basic example, and real hashing functions are more complex, and therefore more effective in producing indexes. They will generally create a hash code, and then use the modulo operator in order to generate the array index, like so:

Fig. 1. Carnegie Mellon University, Concept of Hashing

The data can then be stored as an array, giving us the ability to easily add, retrieve, and delete data as needed.

Collisions

There are a number of reasons why the process of generating indexes has to be somewhat complex, the main one being that repeats of indexes can be problematic. For instance, were we to include Zuko in our Avatar table while using the simple function above, he would be allocated the same index as Toph, 0. Again, this is a rudimentary example, and real hash functions are much more effective in minimising this type of repetition, however they do still happen. When two values are given the same index, we call this a hash collision. There are a couple of ways to avoid collisions, which we can take a look at below:

Separate Chaining

One way to avoid collisions is to combine your hash map with another data structure, for instance linked lists. Rather than a simple array of values, you can create an array of linked lists. This process is called separate chaining. The hashmap takes the key and turns it into an index in the array. If that index has already been taken by another value, a link will be created between the first value and the second, like so:

When using linked lists, it's also recommended that the key is saved, so that our computer knows which value belongs to which key. Separate chaining is a great way to get around duplicates of indexes, however it can slow down performance if any of the lists get too long.

Open Addressing

Another solution for collisions could be open addressing. In this situation, when a value is allocated an index that has already been taken, we simply look for another open index. One method of doing this is through linear probing. For instance, if we decided to include Zuko in our hashmap, we would initially try to place him at index 0, which has already been occupied by Toph. Using linear probing, we would then move to the next open index, in this case 4, which would give us the resulting indices:

This solution means that we no longer have to worry about any performance impact linked lists might have on our application. However, it is also open to problems. We might want to include a character who has 4 'a's in their name, for instance Avatar Yangchen. Avatar Yangchen should be placed at index number 4, however in this case that index is already occupied by Zuko. Therefore, we might use a solution called quadratic probing. Rather than simply looking for the next available index, the hash code would become increasingly larger, so Zuko could be placed further down the list, therefore preventing him from taking someone else's spot.

Pros and Cons of Hashmaps

In many ways, hashmaps are a great way to store data, however there are a few downsides. If we don't use an effective hashing function, they can be inefficient as they are prone to collisions. While we do have ways to solve these, for instance linked lists or open addressing, we have to be cognisant of the possible negative effects these solutions bring. It is possible to rehash or resize your table in order to remove these collisions, however this adds another layer to your data structure. As we can see from the table below, these factors can have a significant effect, and can make our runtime linear (O(n)) rather than constant (O(1)).

Fig. 2. Adrian Mejia, Data Structures in JavaScript: Arrays, HashMaps, and Lists

However, despite these downsides, there are many positive aspects to hashmaps. If used correctly, they can be an incredibly efficient to create, retrieve, and delete our data, especially when we are dealing with a large amount.

JavaScript and Hashmaps

Hashmaps are now part of JavaScript functionality, thanks to ES6, and come in the form of the Map object. We can create a Map like so:

const avatarMap = new Map()

avatarMap.set('Toph', 'Dumplings')
avatarMap.set('Sokka', 'Meat')
avatarMap.set('Aang', 'Egg Custard Tart')
avatarMap.set('Katara', 'Crab Puffs')

//=> Map {
//      'Toph' => 'Dumplings',
//      'Sokka' => 'Meat',
//      'Aang' => 'Egg Custard Tart',
//      'Katara' => 'Crab Puffs'
//   }

For JavaScript users, Map might seem relatively similar to Object, however there are a few key differences. Primarily, keys in an Object must either be strings or symbols, while in a Map we can use both objects and primitive values. Secondly, in an Object, size must be calculated, while Map has an inbuilt size property:

avatarMap.size
//=> 4

Objects are more difficult to iterate over, as they require us to obtain the keys before iterating over them, while Map is an iterable. For instance, we can use the Map.entries method, which returns an object containing an array of key value pairs for each element in the Map object in insertion order:

for (const [key, value] of avatarMap.entries()) {
  console.log(key, value);
}

//=>
// Toph Dumplings
// Sokka Meat
// Aang Egg Custard Tart
// Katara Crab Puffs

Finally, Map works better when we have to add or remove key-value pairs on a regular basis. For instance, we can easily remove a pair using the key:

const deleteCharacter = (map, character) => {
  map.delete(character)
  return map
}

deleteCharacter(avatarMap, 'Toph')

//=> Map {
//      'Sokka' => 'Meat',
//      'Aang' => 'Egg Custard Tart',
//      'Katara' => 'Crab Puffs'
//   }

This is a very brief overview of some of the features of Map in JavaScript, and there is far more to be explored. You can learn more about Map and its functionality here.

Sources

"Concept of Hashing", Carnegie Mellon University, accessed August 12th, 2020
"Map", MDN web docs, accessed August 12th, 2020
"Map in JavaScript", Geeks for Geeks, accessed August 12th, 2020
'Hashmaps, Codecademy, accessed August 11th, 2020
"JavaScript: Tracking Key Value Pairs Using Hashmaps", Martin Crabtree, Medium, accessed August 12th, 2020
"Data Structures in JavaScript: Arrays, HashMaps, and Lists", Adrian Mejia, , accessed August 13th, 2020

JavaScript Gets Classy

Iona Brabender — Wed, 29 Jul 2020 20:26:05 +0000

photo by @bjorns

ES6 formally introduced classes to JavaScript, along with a range of other long-awaited features. While classes are not strictly necessary and can be described as syntactical sugar, they are incredibly useful in allowing users to create clean and efficient code. In this post, we'll take a look at some of the key features of JavaScript classes, and how we can use them effectively.

Introduction of Classes in JavaScript

While classes are considered to be one of the key components of object-oriented programming (OOP), they did not officially appear in JavaScript until 2015. Until then, users were able to achieve the same functionality using functions and prototype delegations (you can read more about prototypal inheritance here), however it was not until the release of ES6 (ECMAScript 6) that the class keyword finally became available. There were a number of reasons for this change. The new syntax is considered to be cleaner and more intuitive - for instance, we can clearly define classes using the class keyword, we have a constructor method to initialise our objects, and we can create specific class methods. Additionally, because classes exist in other languages such as Java, C++, and Ruby, many developers desired more consistency between coding languages, which ES6 went some way towards achieving.

Side note: ES6 has also provided JavaScript users with a variety of other features, including arrow functions, destructuring assignment, and template literals. If you'd like to know more, check out a full list of new ES6 features here.

Why Do We Use Classes?

Classes can be thought of as a sort of blueprint or template for creating objects. They can be used to manage the initialisation of instances of that class, and we can determine what attributes we want to include when creating objects. Classes provide a way for us to define inheritance, and we can also create methods to be used throughout the class, minimising the need for repetitious code.

Features of JavaScript Classes

JavaScript classes share most of conventional aspects that you've probably encountered when using classes in other languages. Here, we'll examine some of the most important features.

Class Keyword

Classes in JavaScript are now defined using the class keyword and the chosen name of the class, like so:

class Country {}

It's not necessary for you to directly give your class a name. Instead, you could assign your class to a variable:

const Country = class {}

Now that we've created our class, we're able to explore what we can do with it.

Class Constructor

In the above example, we created valid a JavaScript class. However, this is not especially useful yet, as it doesn't contain any information. Generally, when we're creating classes, we want to define the attributes that we've deemed essential for instances of that class. We can do that by using the constructor method, which allows us to pass in arguments when we create a new instance of that class, and attaches that data as attributes of our instance.

Below, we've created a Country class, and we've decided that the attributes that are most important to us include the name of the country, the continent where that country is located, the colours of that country's flag, the national day, and the national animal. It's important to note that these attributes are created using the this keyword. this refers to the object it is contained within, so here we are essentially stating that, for instance, the countryName property of this object is to be set to the first argument we pass in. You can find more on this here.

class Country {

    constructor(countryName, continent, flagColours, nationalDay, nationalAnimal) {
      this.countryName = countryName
      this.continent = continent
      this.flagColours = flagColours
      this.nationalDay = nationalDay
      this.nationalAnimal = nationalAnimal
    }

}

Et voilà! We've defined our class attributes. However, classes don't really do anything by themselves, and we need to create instances in order to make them useful. An instance is an object which contains data and behaviour defined by the class to which it belongs. In JavaScript, can create an instance like so:

let scotland = new Country();

While we now have a new instance of the Country class, it still doesn't really do much, as we haven't attached any information to it. In order to really make use of our class, we should create our instance using attributes.

let scotland = new Country ("Scotland", "Europe", "Blue and White", "November 30th", "Unicorn")

Something to bear in mind when creating instances (and actually when doing anything in JavaScript that involves arguments), is arity, which refers to the number of arguments you pass into a function. In many coding languages, if a certain number of arguments is expected when, we'll get an error message if we provide too many or too few. For example, we can create a similar class in Ruby:

class Country

  def initialize(country_name, continent, flag_colours, national_day, national_animal)
      @country_name = country_name
      @continent = continent
      @flag_colours = flag_colours
      @national_day = national_day
      @national_animal = national_animal
  end

end

If we tried to initialise an instance of this class using the wrong number of arguments, we'd have a problem:

scotland = Country.new("Scotland")
// ArgumentError (wrong number of arguments (given 1, expected 5))

However, with JavaScript, we're able to create an instance with as many or as few arguments as we like, for instance:

let scotland = new Country ("Scotland")
// LOG: Country {countryName: "Scotland", continent: undefined, flagColours: undefined, nationalDay: undefined, nationalAnimal: undefined}

We can always go back and update this object at a later time, like so:

scotland.continent = "Europe"
// LOG: Country {countryName: "Scotland", continent: "Europe", flagColours: undefined, nationalDay: undefined, nationalAnimal: undefined}

Class Methods

While we generally talk about functions in JavaScript, they are referred to as methods when they belong to classes. When we create methods within our classes, these can be called upon any instance of that class. For instance, if we wanted to give people a way to get all of the information we have on a certain country, we could create a countryInfo() method:

class Country {

    constructor(countryName, continent, flagColours, nationalDay, nationalAnimal) {
      this.countryName = countryName
      this.continent = continent
      this.flagColours = flagColours
      this.nationalDay = nationalDay
      this.nationalAnimal = nationalAnimal
    }

    countryInfo() {
      console.log(`Country: ${this.countryName}`)
      console.log(`Continent: ${this.continent}`)
      console.log(`Flag Colours: ${this.flagColours}`)
      console.log(`National Day: ${this.nationalDay}`)
      console.log(`National Animal: ${this.nationalAnimal}`)
    }

}

As soon as we have instances of that class available, we can call them like so:

let scotland = new Country ("Scotland", "Europe", "Blue and White", "November 30th", "Unicorn")

scotland.countryInfo()
// LOG: Country: Scotland
// LOG: Continent: Europe
// LOG: Flag Colours: Blue and White
// LOG: National Day: November 30th
// LOG: National Animal: Unicorn

Creating methods which are available to all members of a class can be extremely powerful, and this is an important feature in making JavaScript classes so convenient.

Class Inheritance

One of the most useful aspects of a class is the ability to allow it to inherit properties from another class. For instance, we could create a new City class. We know that cities belong to countries, so it would make sense if our City class inherited from our Country class. We can define this relationship by using the extends keyword. We create our class as normal and then add extends and the name of the class we want this new class to inherit from. We also need to use the super keyword. super allows the child class to call the constructor of the parent class, and to access its properties and methods. In this example, City is inheriting from Country:

class City extends Country {

    constructor(countryName, continent, flagColours, nationalDay, nationalAnimal, cityName, cityMotto) {
      super(countryName, continent, flagColours, nationalDay, nationalAnimal)
      this.cityName = cityName
      this.cityMotto = cityMotto
    }

}

We can create instances and methods as with any other class, however the new child class not only has access to any methods we create within it, but can also utilise methods within its parent class. In the example below, we can see that the cityInfo() method is using the countryInfo() method defined in the parent Country class.

class City extends Country {

    constructor(countryName, continent, flagColours, nationalDay, nationalAnimal, cityName, cityMotto) {
      super(countryName, continent, flagColours, nationalDay, nationalAnimal)
      this.cityName = cityName
      this.cityMotto = cityMotto
    }

    cityInfo() {
      console.log(`City Name: ${this.cityName}.`)
      console.log(`City Motto: ${this.cityMotto}.`)
      this.countryInfo()
    }

}

let glasgow = new City (scotland.countryName, scotland.continent, scotland.flagColours, scotland.nationalDay, scotland.nationalAnimal, "Glasgow", "Let Glasgow Flourish")
glasgow.cityInfo()
// LOG: City Name: Glasgow
// LOG: City Motto: Europe
// LOG: Country: Scotland
// LOG: Continent: Europe
// LOG: Flag Colours: Blue and White
// LOG: National Day: November 30th
// LOG: National Animal: Unicorn

Static Methods

Within classes, we also have the ability to define static methods. These are defined using the static keyword, and are methods which are called directly on a class. We've defined two static methods in the example below. Rather than, for instance, calling scotland.numberOfCountries(), you would call this directly on the class within which it is defined, Country.

class Country {

    constructor(countryName, continent, flagColours, nationalDay, nationalAnimal) {
      this.countryName = countryName
      this.continent = continent
      this.flagColours = flagColours
      this.nationalDay = nationalDay
      this.nationalAnimal = nationalAnimal
    }

    static numberOfCountries() {
      console.log("There are 195 countries in the world today.")
    }

    static continent(country) {
      console.log(`${country.countryName} is located in ${country.continent}.`)
    }

}

let scotland = new Country ("Scotland", "Europe", "Blue and White", "November 30th", "Unicorn")
Country.numberOfCountries()
// LOG: There are 195 countries in the world today.
Country.continent(scotland)
// LOG: Scotland is located in Europe.

Getters, Setters, and Private Properties

Finally, we can take a look at getters and setters in JavaScript classes. Generally, getters are used when we want to access a property that returns a value that requires dynamic computation. Setters are used when we need to ensure that a function is executed whenever a user tries to change a specific property.

As is shown here, we can define getters and setters by using the get and set keywords:

class Country {

    constructor(countryName, continent, flagColours, nationalDay, nationalAnimal) {
      this._countryName = this.titleCase(countryName);
      this.continent = continent
      this.flagColours = flagColours
      this.nationalDay = nationalDay
      this.nationalAnimal = nationalAnimal
    }

    get countryName() {
      return this._countryName.titleCase(this._countryName);
    }

    set countryName(countryName) {
      this._countryName = this.titleCase(this.countryName);
    }

    titleCase(countryName) {
      return countryName.charAt(0).toUpperCase() + countryName.slice(1);
    }

}

The addition of a getter and a setter isn't the only difference here. We can also see that an underscore has been added before countryName. In many coding languages, we're able to classify certain properties as being private (i.e. properties that are inaccessible from outside the class), simply by using the private keyword. Technically, we can't do this in JavaScript, however users have developed the convention of using an underscore to denote a private variable. This doesn't actually prevent a property from being altered - you can still mutate it by using, in this example, _countryName, however, using the underscore shows your intention to other developers, and tells them that you don't want that variable to be accessible.

Conclusion

Classes are one of the newest features of JavaScript and have been a valuable addition to the language. While we've covered some of the basics in this post, this just scrapes the surface of what is now available to us as users of JavaScript. You can also find some other useful links below to help guide you through your adventures with JavaScript. Happy coding!

Sources

"Why do ES6 Classes exist and why now?", DevelopIntelligence, Accessed July 27 2020
"Please Stop Using Classes in JavaScript", everyday.codes, Accessed July 27 2020
"ECMAScript 6", ES6-Features, Accessed July 27 2020
"JavaScript Class Super Keyword", W3Schools, Accessed July 27 2020
"this", MDN Web Docs, Accessed July 28 2020
"static", MDN Web Docs, Accessed July 28 2020
"Object Prototypes", MDN Web Docs, Accessed July 28 2020
"JavaScript Prototypal Inheritance", Cory Rylan, Accessed July 28 2020

What's this form_for ?

Iona Brabender — Tue, 07 Jul 2020 15:48:47 +0000

photo by @markusspiske

When working with Rails, there are a variety of tools available which can aid us in constructing forms, including plain HTML, and form helpers such as form_tag, and form_for. In this post, we'll take a look at the benefits of using these form helpers, and also examine some of the features of the most advanced of these options, form_for, and how it can be used to easily and effectively allow your users to input information.

Why form_for?

The most basic way to construct a form would be simply using raw HTML. While this is a completely viable option, it can be far more laborious than taking advantage of a form helper. With HTML, we have to pass the action and method attribute we want to use, as well as set up our own authenticity token. Here, we can see a basic HTML form:

html forms


<h3> Create a New Company </h3><br>

<form action="<%= companies_path %>" method="POST">
    <label>Name:</label>
    <input type="text" id="company_name" name="company[name]"><br><br>
    <label>CEO:</label>
    <input type="text" id="company_ceo" name="company[ceo]"><br><br>
    <label>Industry:</label>
    <input type="text" id="company_industry" name="company[industry_id]"><br><br>

    <input type="hidden" name="authenticity_token" id="authenticity_token" value="<%= form_authenticity_token %>">
    <input type="submit" value="Submit">
</form>

While this will do the job, it can be messy, especially as our work becomes more complex. It also involves writing quite a lot of repetitive code. Form helpers such as form_tag and form_for can alleviate some of these problems for us.

form_tag

form_tag is the most basic form helper available to us. It automatically generates HTML code, and enables the user to submit data that will then be passed to the controller. It also creates the necessary authenticity token for us. Here we can see the same form we created above, this time using form_tag:

<%= form_tag companies_path(@company), method: "post" do %>
    <label>Name:</label>
    <%= text_field_tag :name, @company.name %><br><br>
    <label>CEO:</label>
    <%= text_field_tag :ceo, @company.ceo %><br><br>
    <label>Industry:</label>
    <%= text_field_tag :industry_id, @company.industry_id %><br><br>
    <%= submit_tag "Submit Post" %><br> 
<% end %>

While this is a significant upgrade from the HTML form, using form_tag means that we must still manually pass our form to the route where the parameters will be submitted. Additionally, our form doesn't know its function, for instance whether it is supposed to create or make changes to a record, and we still have quite a lot of repetitive code. Therefore, form_tag can be helpful when we simply need to generate a HTML form, however isn't really suitable for creating or updating records, as we are doing here.

form_for

Generally, the best form option when you need to perform any sort of CRUD operation and interact with your database is form_for. form_for follows RESTful conventions, and can therefore make assumptions about routes, and what the form is trying to do. Here, we can see our form again, this time using form_for:

<h3> Create a New Company </h3><br>

<%= form_for @company do |c| %>
    <%= c.label :name %>
    <%= c.text_field :name %><br><br>
    <%= c.label :ceo %>
    <%= c.text_field :ceo %><br><br>
    <%= c.label :industry_id %>
    <%= c.text_field :industry_id %><br><br>
    <%= c.submit %>
<% end %>

By using form_for, we can minimise how much code we have to write, and create a form more suited to our CRUD needs.

How to Use form_for

We can now take a look at how form_for works, as well as at some of its most useful features. In this example, we'll imagine that we're working with a database comprised of basic information about a variety of different companies in different fields and locations. We want to allow users to add their business to our database using a form.

CompaniesController

Before we start working on our form, we need to make sure everything is organised behind the scenes. After setting up our routes, we can write our new and create actions in our CompaniesController like so:

    def new
        @company = Company.new
    end

    def create
        @company = Company.new(company_params)
        if @company.save
            redirect_to @company
        else
            flash[:message] = @company.errors.full_messages
            render :new
        end
    end

    private

    def company_params
        params.require(:company).permit(:name, :ceo, :slogan, :number_of_employees, :currently_operating, :location_id, :industry_id)
    end

end

Here, we're creating a new instance of a Company based on our user's input. We're also using strong params here (def company_params), meaning that our user is limited in terms of what information they can add to our database. We want to ensure that our database is protected, and that we're not just taking in any information that the user decides to give us. By requiring :company, we are stating that our params hash must contain a key called "company" in order to save the information in our database. By permitting other attributes, we are indicating what else we'll accept. We've also included an if statement in our create action. This means that we'll only try to redirect the user to the show page for their newly input company if it's been successfully created. If there are any problems, for instance caused by validation restrictions, they'll be redirected back to the new company page. Additionally, we've chosen to include a flash message here, which will alert the user to any problems that have arisen when they've tried to submit their form. We'll take a look in more detail at this later.

Setting up Your Form

We'll start off our form_for like so:

<%= form_for @company do |f| %>

Here, our form takes an instance of a Company (@company), which it will then pass to the CompaniesController, where a new company will be created using the information provided by our user.

text_field

The first input we need from the user is the company name and the name of the company CEO. We can create a simple text_field, meaning the user is free to type in whatever company name they like. At this point, we haven't included any validations, so there are no restrictions, for instance on the length or uniqueness of input. We also have control over the text in our label. By including

html 'CEO:'

we're deciding exactly what the user will see. Alternatively, this specific text can be omitted, and the label will be generated for us.

    <%= f.label :name, 'Name:' %>
    <%= f.text_field :name %><br><br>

    <%= f.label :ceo, 'CEO:' %>
    <%= f.text_field :ceo %><br><br>

collection_select

Our next two fields are ones that we'd prefer the user not to have complete freedom over. At this point, we only want our user to be able to enter industries and locations that already exist in our database. In order to do this, we can use collection_select. In our industry example, :industry_id represents the column in our companies table that this data will be linked to. Industry.all shows that we want our user to be able to see options from our industry table, :id indicates what information we want to take, and :name is what the user will see. We could, for instance, replace :name with :id, meaning that the user would have to select an option based on an integer representation of the :id, but this wouldn't be very user-friendly.

    <%= f.label :industry, 'Industry:' %>
    <%= f.collection_select :industry_id, Industry.all, :id, :name %><br><br>

    <%= f.label :location, 'Location:' %>
    <%= f.collection_select :location_id, Location.all, :id, :name %><br><br>

number_field

We also want to include the number of employees working for the company. We want to ensure that our users only enter numbers, so we can set this up as a number_field. This will allow users to input integers (it won't be possible for them to enter text), and will also give them the option to increase or decrease that number using buttons in the form.

    <%= f.label :number_of_employees, 'Number of Employees:' %>
    <%= f.number_field :number_of_employees %><br><br>

check_box

Finally, one of our fields, currently_operating, is a boolean. It wouldn't be very user-friendly to require users to input true or false, and we don't want to make things more complicating by having to convert their input to something our database understands. Therefore, we can use a check_box. When the user checks this box on our form, our form will understand their answer as "true", and will therefore save it accurately in our database. Alternatively, if the box is left unchecked, we'll understand this as false.

    <%= f.label :currently_operating, 'Currently Operating?' %>
    <%= f.check_box :currently_operating %><br><br>

submit

We also need our user to be able to submit their form, in order for their information to be able to enter our database. We can do this simply by adding a submit button, and closing our form.

    <%= f.submit  %>
<% end %>

flash[:message]

As mentioned above, we've also decided to include a flash message in our form. A flash message is very useful in giving the user information about any problems that have come up when they've tried to submit their form. For instance, we could require users to enter a name for their company before we allow it to be saved in our database. We would therefore include this validation in our Company model.

class Company < ApplicationRecord

    belongs_to :industry
    belongs_to :location

    validates :name, presence: true

end

If the user then tries to submit a new company without adding a name, the form will be rejected, and they'll be shown the new form again with the error message " ["Name can't be blank"] " at the top. Flash messages are completely optional, and this step can be omitted, however it's very useful for the user to know what has led to their input being rejected.

Our Finalised Form

We can put together all of this code, and create our finalised form like so:


<h2><%= "Create a New Company" %></h2>

<%= flash[:message] %>
<%= form_for @company do |f| %>
    <%= f.label :name, 'Name:' %>
    <%= f.text_field :name %><br><br>

    <%= f.label :ceo, 'CEO:' %>
    <%= f.text_field :ceo %><br><br>

    <%= f.label :industry, 'Industry:' %>
    <%= f.collection_select :industry_id, Industry.all, :id, :name %><br><br>

    <%= f.label :location, 'Location:' %>
    <%= f.collection_select :location_id, Location.all, :id, :name %><br><br>

    <%= f.label :slogan, 'Slogan:' %>
    <%= f.text_field :slogan %><br><br>

    <%= f.label :number_of_employees, 'Number of Employees:' %>
    <%= f.number_field :number_of_employees %><br><br>

    <%= f.label :currently_operating, 'Currently Operating?' %>
    <%= f.check_box :currently_operating %><br><br>

    <%= f.submit  %>
<% end %>

And finally, we can see how our form will appear to our user:

Sources

"form_for", API dock, Accessed July 5 2020
"Action View Form Helpers", Rails Guides, Accessed July 5 2020

The Last Enumerable

Iona Brabender — Wed, 17 Jun 2020 02:17:07 +0000

photo by @pinamessina

Enumerables in Ruby can be extremely powerful, and can turn a messy loop into a few lines of clean and efficient code. However, given the vast number of methods available, it can be difficult to determine which one will work best for you. In this post, we'll examine ten useful enumerable methods with which you should be able to overcome many of your coding challenges.

Setting Up Your Enumerables Using do .. end or { ... }

When coding in Ruby, you have the option to set up your enumerables using either do ... end, or using curly brackets. Using the do ... end method is considered a little easier to read, especially for beginner coders, while the curly brackets option will give you a cleaner look. As we'll be using the latter option in our examples below, we'll quickly remind ourselves of how one method translates to the other.

Option 1: do ... end Method

    Character.all.find_all do |character|
        character.name == "Katara"
    end

Option 2: Curly Brackets Method

    Character.all.find_all {|character| character.name == "Katara" }

The first option is very similar to the second, with the key differences being that the opening bracket is replaced with do, the closing bracket is replaced with end, and the code is spread out over 3 lines rather than 1. Either method is completely acceptable, so use whichever you feel most comfortable with.

10 Essential Enumerables

We can now take a look at the ten enumerable method every coder should have in their back pocket. To demonstrate how each method can be used, we'll be working with data based on characters from the tv series, Avatar: The Last Airbender. For our examples, we've created a Character class, where each character has several attributes, including a name, age, home nation, special skill, and role.

1. map

When coding in Ruby, map will probably become one of your most commonly used enumerable methods. It iterates over each element, and returns a new array containing the results of that iteration. It is especially advantageous because it can be used it in conjunction with other enumerable methods, as we'll see in some of the examples below.

Our Avatar characters have a variety of different special skills. In this example, we're interested in retrieving a list of those skills using map.

    def self.all_skills
        skills = all.map { |character| character.special_skill }
    end

    Character.all_skills

=> ["Airbending", "Firebending", "Earthbending", "Waterbending", "Firebending", "Hook Swords", "Waterbending", "Knives", "Firebending", "Boomerang", "Fans", "Earthbending", "Chi Blocking", "Waterbending", "Firebending"]

We now have an array containing all of the special skills mastered by our characters. However, several of our characters share the same skills, and some of the elements are therefore repeated. We can easily solve this by adding a .uniq, which will ensure that each skill only appears once in our array.

    def self.all_skills
        skills = all.map { |character| character.special_skill }.uniq
    end

    Character.all_skills

    => ["Airbending", "Firebending", "Earthbending", "Waterbending", "Hook Swords", "Knives", "Boomerang", "Fans", "Chi Blocking"]

Great! We now have an array of unique elements.

2. find_all

find_all is another useful method to have on hand. It returns an array containing those elements which meet the conditions specified in our enumerable code.

In this example, we're going to search for every character that belongs to the Water Nation.

    def self.home_nations(nation)
        all.find_all { |character| character.home_nation == nation }
    end

    Character.home_nations("Water Nation")

=> [#<Character:0x00007fb3bea8ebb0 @age=35, @home_nation="Water Nation", @name="Hakoda", @role="Chief of the Southern Water Tribe", @special_skill="Waterbending">,
 #<Character:0x00007fb3bea8e958 @age=14, @home_nation="Water Nation", @name="Katara", @role="Member of Team Avatar", @special_skill="Waterbending">,
 #<Character:0x00007fb3bea8e700 @age=15, @home_nation="Water Nation", @name="Sokka", @role="Member of Team Avatar", @special_skill="Boomerang">,
 #<Character:0x00007fb3bea8e318 @age=16, @home_nation="Water Nation", @name="Yue", @role="Princess of the Northern Water Tribe", @special_skill="Waterbending">]

We get exactly what we asked for: an array of all the characters who belong to the Water Nation. We're now able to use or manipulate that data in whichever way we choose.

As we mentioned earlier, map is really handy, as we can utilise it in combination with other methods. Let's take a look at how we can apply map to our home_nations method, to extract more specific data.

    def self.home_nations(nation)
        characters = all.find_all { |character| character.home_nation == nation }
        characters.map { |character| character.name }
    end

    Character.home_nations("Water Nation")

    => ["Hakoda", "Katara", "Sokka", "Yue"]

Our return value is now simply an array of the names of those characters who belong to the Water Nation, rather than the complete character instances. As before, we use find_all to first generate a list of all the relevant characters. We then use map to iterate over each character in our new Water Tribe characters array, and return only the names. Both the first and second results are useful in their own way - it completely depends on what return value you're looking for.

3. any?

Moving away from arrays as return values, we can take a look at any?, which allows us to confirm if any elements meet the conditions we've set out, and returns true or false based on the result.

For this example, we can again take a look at our characters' special skills. While we know there are plenty of earthbenders, firebenders, and waterbenders left in the four nations, it looks as though all of the airbenders have been wiped out. If only there were a way to check if there were any left... It turns out there is!

    def self.special_skill_finder(skill)
        all.any? { |character| character.special_skill == skill }
    end

    Character.special_skill_finder("Airbending")

    => true

Phew! Our return value of "true" tells us that there is at least one airbender left in the world. Luckily for Aang though, our code doesn't reveal any other information to those pesky firebenders.

4. count

count is a useful enumerable method for when we're interested in how many there are of something. We can set up our code to count the occurrences of a certain attribute, and have that number returned to us.

In this example, let's count how many Fire Lords there are.

    def self.how_many(role)
        all.count { |character| character.role == role }
    end

    Character.how_many("Fire Lord")

    => 1

As promised, count iterates over our characters, and returns the number of Fire Lords we have in our list. It looks as though there's still one. Aang better get a move on!

5. find

While find_all is more generally applicable, find is another helpful method. Rather than returning all of the elements which satisfy the conditions we specify, it only returns the first element to do so.

In this example, we're interested in Team Avatar, and we want to return the first character on our list who is part of that team.

    def self.character_role(role_type)
        all.find { |character| character.role == role_type }
    end

    Character.character_role("Member of Team Avatar")

    => #<Character:0x00007f85d3b02380 @age=14, @home_nation="Water Nation", @name="Katara", @role="Member of Team Avatar", @special_skill="Waterbending">

While there may be other characters than just Katara who belong to Team Avatar, find only returns to us the first result which matches.

6. reject

reject can be very useful when we want to know what doesn't meet a specific criterium. reject will iterate over the elements in a given array, and return those which don't match that condition.

In this example, we want to help Team Avatar work out who they can trust. Therefore, we want a list of all the characters who don't belong to the Fire Nation. We just need a list of names, so we can use map again to make sure those are the only details included in our new array.

    def self.not_from(nation)
        characters = all.reject { |character| character.home_nation == nation }
        characters.map { |character| character.name }
    end

    Character.not_from("Fire Nation")

    => ["Aang", "Bumi", "Hakoda", "Jet", "Katara", "Sokka", "Suki", "Toph", "Yue"]

Perfect! We've rejected the characters who belong to the Fire Nation, and Aang has a comprehensive list of trustworthy people.

7. reduce

reduce is another method we can use when we're working with numbers. It takes an array of numbers, reduces it to a single number, and returns that value.

In this example, we want to know the combined age of all of our Avatar: The Last Airbender characters. As reduce works on numbers, we'll need to extract the ages of our characters using map before we're able to reduce the data to a single value.

    def self.combined_age
        ages = all.map { |character| character.age }
        ages.reduce { |total, age| total += age }
    end

    Character.combined_age

    => 526

Here, we mapped all of our characters' ages to a new array, and then, using +=, specified that we wanted to add each value to the total, which, unless otherwise specified, initialises at 0.

8. min_by

min_by is handy when we want to know which element is the lowest, based on a certain condition. It will then provide us with that element as the return value.

In this example, we want to know who our youngest character is.

    def self.youngest_character # Min_by
        all.min_by { |character| character.age }
    end

    Character.youngest_character

    => #<Character:0x00007ff6ce19e228 @age=12, @home_nation="Earth Nation", @name="Toph", @role="Member of Team Avatar", @special_skill="Earthbending">

It looks like Toph is the baby of the group!

9. max_by

max_by works in much the same way as min_by, but instead returns the element with the maximum value.

We're also going to add an extra dimension here, which can similarly be used with min_by. Rather than looking for the single oldest character, we want to know who the three oldest characters are.

    def self.oldest_character(num) # Max_by
        all.max_by(num) { |character| character.age }
    end

    Character.oldest_character(3)

    => [#<Character:0x00007f8b7cb3ac68 @age=112, @home_nation="Air Nation", @name="Aang", @role="Avatar", @special_skill="Airbending">,
 #<Character:0x00007f8b7cb3aad8 @age=112, @home_nation="Earth Nation", @name="Bumi", @role="King of Omashu", @special_skill="Earthbending">,
 #<Character:0x00007f8b7cb3a920 @age=50, @home_nation="Fire Nation", @name="Iroh", @role="Fire Nation General", @special_skill="Firebending">]

We specified that we wanted three characters, by including 3 between parentheses as our argument. As expected, we get back our three oldest characters: Bumi, Iroh, and (despite appearances) Avatar Aang.

10. sort_by

The final enumerable we'll look at is sort_by. We can use this method when we want to put our instances in order based upon a certain condition, and want to** receive the sorted array as the return value**.

This time, we want to sort our characters by name. Again, we don't need too much information, so let's combine sort_by with map to get a more succinct return value.

    def self.sort_characters_by_name # Sort_By
        characters = all.sort_by { |character| character.name }
        characters.map { |character| character.name }
    end

    Character.sort_characters_by_name

    => ["Aang", "Azula", "Bumi", "Hakoda", "Iroh", "Jet", "Katara", "Mai", "Ozai", "Sokka", "Suki", "Toph", "Ty Lee", "Yue", "Zhao"]

Great! We now have our whole beloved cast of characters organised in alphabetical order.

Is that it?

Certainly not! This list is simply a collection of some of the most commonly used enumerable methods. With these at hand, you should be able to solve a variety of coding problems.

In addition to the methods highlighted here, there are plenty more available for exploration by any budding coder. A comprehensive list, along with explanations and examples can be found on here.

Sources

"Enumerable", ruby-doc, Accessed July 5 2020