DEV Community: Brandon Brown

Python Virtual Environments

Brandon Brown — Wed, 07 Oct 2020 19:15:49 +0000

One constant struggle with development on multiple platforms or with multiple people is managing packages and dependencies. In order to have a stable product or application, it is extremely important to define and use the same dependencies and correct package versions when developing as part of a team or deploying an application. For example, let's say Bill and Todd are creating the next big web application. Bill has Django 2 installed on his computer while Todd uses Django 3. If Todd wrote some Django 3 specific code in the application, Bill's version of the application would break. Often when versioning is to blame, it can be very hard to troubleshoot the issue. Therefore, Bill could be scratching his head for hours before realizing that everything is correct and the only issue is his version of Django. Pipenv is a package managing package that helps solve this problem. Pipenv makes it extremely easy to add, remove, and manage packages while maintaining a virtual environment (more on this later) for your project. Now that we know what Pipenv is made for, let's get into how to use it.

Installing Pipenv

Just like any Python package, we can install Pipenv by using a simple Pip command:

pip3 install pipenv

Check to make sure everything worked by running the following:

pipenv --version

If you see a version printed out on the screen, you are good to start using Pipenv.

Pipenv Virtual Environment

Pipenv creates and manages a virtual environment for your packages. What this means is that Pipenv will run your code under an environment containing packages that you specify. For example, if you want to run Django version 2.0.6 for your project, however, you do not want to change your Django version on your computer, Pipenv can can help you do this. To break this down, let me show you through images.

As you can see above, I have Django installed on my computer (version 3.1.2).

Now let's say that we are working on an application as part of a team, and that application requires us to use Django 2.0.6. With Pipenv, we can create a virtual environment that allows us to using Django 2.0.6 without changing the Django installation on our actual computer.

Isn't that cool? As shown above, we are in a virtual environment that I created called 'delete'. In that virtual environment, we are using Django 2.0.6.

Now that I hope you have an idea of the power of Pipenv, we can move on to how to use it.

Pipenv Virtual Environment Setup

To start a Pipenv virtual environment, navigate to the the directory you wish to house the virtual environment.

Important: Your Pipenv virtual environment must be in the same folder as your application or above it. Installing the virtual environment within your project is not typically a good idea.

When ready, run the following to create a virtual environment:

pipenv install

This will create two files: Pipfile and Pipfile.lock. Pipfile shows the dependences in plain text. Pipfile.lock is an auto-generated file that is not intended to be edited. Pipfile.lock contains all the information your virtual environment needs to manage its dependencies.

Adding Packages to Our Virtual Environment

Fantastic. We now have a virtual environment to work with. Next, we want to install packages within the environment. For consistency, let's install Django 2.0.6. To do this, run the following in the same folder as your Pipfile and Pipfile.lock files:

pipenv install django==2.0.6

You should receive something similar to the following:

Now let's check to make sure it worked. First we must enter our virtual environment by typing:

pipenv shell

This will add some parenthesis before your terminal command to let you know you are in your newly created virtual environment. We can then check the version of Django to verify we are using 2.0.6.

If you got this far, congratulations. That is really it to managing and installing packages with Pipenv. Let's touch on one more thing that could make our lives a little easier when working as part of a team.

Requirements file (Easier Setup)

If you're working on an application as part of a team, you will likely have a list of dependencies needed for your project. If someone new comes on, this could be annoying to sit through and manually install all packages. For this reason, Pipenv allows you to create and use a simple txt file to install all your dependencies.

First, let's create the requirements.txt file. To do this, you must be in your virtual environment (run pipenv shell to enter virtual environment). Then run:

pipenv lock -r > requirements.txt

This will create a new file called requirements.txt inside the same directory as your Pipfile. This houses all of the package requirements for your virtual environment.

Now that we have that file created, we can use it to automatically install the all packages in another virtual environment. To do this, verify that the requirements.txt file is in your current directory and run:

pipenv install

This will automatically install the package requirements as long as the requirements.txt file is found.

As you can see, there were 9/9 packages installed. Now isn't that so much easier than manually installing each package?

Alternatively, if you would rather specify where your requirements file is, you can run the the same pipenv install command but by specifying the requirements file with the -r flag:

 pipenv install -r ./dev-requirements.txt

Again we have those 9 packages installed into our new virtual environment.

Conclusion

Pipenv is a great tool that can almost guarantee that an application will work across computers. With Pipenv, you no longer have to worry about who has what version of software or if anything is out of date. I hope I have convinced you of the power of Pipenv, and I hope you can find it useful. It may seem a little daunting at first to use, but you can quickly get the hang of it. Happy coding!

Deploying a Rails / React App to Heroku

Brandon Brown — Tue, 29 Sep 2020 17:18:58 +0000

In my last post, I went walked through how to deploy a Rails application on Heroku. If you would like to view that walkthrough, you may view it here. This time, we're going to deploy a full stack application with a frontend using React and a backend using Rails. I am assuming you are decently familiar with both the React and Ruby on Rails frameworks, so I will not be going into detail about the application creation itself. So without further ado, let's get started!

Heroku CLI Setup

To use Heroku, we need to install the Heroku CLI. To do this, use the installation instructions provided here. If you're on Mac, the easiest method to installing the Heroku CLI is through Homebrew. If you do not have Homebrew installed on your machine, use the following terminal command to install it.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once installed, you can use the brew installation method shown in the Heroku installation instructions.

Quick note: Since I have not used Windows to instantiate Heroku Rails apps, I will not provide instructions on using the Heroku CLI in Windows.

Setting up Rails Application

Since we are going to have a frontend server for our application, we need to configure Rails to be used as an API. To do this, we can use the "--api" flag when creating our Rails project.

Also, since Heroku does not support SQLite3, we must use an alternative database structure. For this tutorial we are going to use Postgres. To tell Rails to use Postgres, we can use the "--database=postgresql" flag.

I'm going to call this project superheroku-api. All in all, our terminal command to create a new Rails application as an API using Postgres is:

rails new superheroku-api --api --database=postgresql

Note: It will make your life a lot easier if you have separate repositories for both your frontend and backend projects.

Go about creating your rails application as an API. I will not go into detail about doing so since this tutorial concerns mainly Heroku deployment. However, if you need a sample project, you may use the one located here.

Quick Note: Make sure you enable CORS by enabling the rack-cors gem in the Gemfile, uncommenting the code in config/initializers/cors.rb, and setting 'origins' to '*'.

Heroku Deployment for Rails App

Once you've got your app ready, we can now deploy to Heroku. First, navigate to the root of your Rails project in your terminal.

If you have not done so already, be sure to create an account with Heroku. You may do so here.

Now that that's done, we need to log into Heroku on the CLI. Make sure you're in the root directory of your Rails app and run the following in your terminal:

heroku login

This should prompt you to press any key to open up a browser to login. Follow the login instructions, and you should be greeted with a login success message in the terminal.

Now we must create our Heroku app. To do this run:

heroku create [APP_NAME]

"APP_NAME" is whatever you would like your app to be called. After your app is created, you will be able to access it by going to [APP_NAME].herokuapp.com, so make sure to name your app something that makes sense. Alternatively, you can leave the app name blank and Heroku will assign you a random app name.

Next, we need to push our master branch to Heroku. To do this, run:

git push heroku master

This could take some time as Heroku is setting up your Rails application on its server system. This includes all gem requirements that you have in your gem file as well as some overhead installations. After everything finishes, you should see something similar to:

Hurray! We have officially deployed our app to Heroku. However, out of the gate, your app will not be working correctly. This is because we have to migrate the database and seed it. To do this, first run:

heroku run rails db:migrate

then run:

heroku run rails db:seed

For each of these commands, Heroku will display the response similarly to how Rails does when running database commands locally in your terminal. Therefore, all of the response messages (commits, migrations, etc.) should be fairly familiar to you.

Quick note: "heroku run" allows you to run terminal commands very similar to running them on your local machine. "heroku run" can be very powerful, but be careful when using this as you are running scripts on your Heroku instance.

Testing Rails Application

Now we must test our API endpoints. If you used the supplied Rails application, then the endpoint we need to test is https://APP-NAME.herokuapp.com/superheroes where APP-NAME should be replaced by your Heroku deployed application name. If you are greeted with JSON, you are good to go to the next step.

Setting Up React Application

To create a React application, you may use the yarn create react-app command. For this project, I'm going to call the application superheroku-front. If you would like, you may use the React application I have created here.

yarn create react-app superheroku-front

Go through and create your React application as you typically would with all features and functionality. The only change we need to implement is to point our endpoints to our newly created Rails Heroku application.

To make things easier on yourself, it would be very helpful to create a global identifier for your endpoint. The objective of this global identifier is tell your React application to use localhost:3000 in development and to use your Heroku Rails API URL in production. To do this, you can define a new file called apiRoot.js that contains the following code:

const DEV_URL = 'http://localhost:3000/';
const PROD_URL = 'https://[APP-NAME].herokuapp.com/';
export const API_ROOT = process.env.NODE_ENV === 'development' ? DEV_URL : PROD_URL;

This bit of code will look at the process.env.NODE_ENV (will be development, production, etc.) and assign the appropriate URL to the API_ROOT variable. Pretty neat, huh?

Replace APP-NAME with your Heroku Rails application name. Now, if you import API_ROOT from your apiRoot.js file, you can use this new API_ROOT variable as the root for all your fetches. For example...

fetch('http://localhost:3000/superheroes')
  .then(response => response.json())
  .then(superheroes => ...);

becomes...

fetch($`{API_ROOT}/superheroes`)
  .then(response => response.json())
  .then(superheroes => ...);

Since we are using this dynamic API_ROOT, we do not have to change anything in the application when we need to retrieve data from localhost:3000 or our Heroku Rails application.

Heroku Deployment for React App

Now that you've got your React application working, we are now ready to deploy to Heroku. The only difference between deploying a Rails application and React application to Heroku is the inclusion of the correct buildpack option. Create the React Heroku application similarly to how we created the Rails one but including this buildpack option.

heroku create APP-NAME --buildpack mars/create-react-app

Once created, you should get something similar to the following:

Next, we must push our code to Heroku with:

git push heroku master

This will take a while since React takes a little longer to build than Rails. After it finishes, you should see dialog similar to the following:

After this completes, you should be able to go to your React Heroku URL and see all your hard work hosted on the internet! Test your React application, and if you are able to pull in data from the backend, you have done everything correctly. You now have a web application with a frontend server that talks to a backend server all hosted on Heroku!

A Quick Note on Free Heroku

Heroku is a wonderful tool to quickly and easily get your applications running; however, there are some drawbacks with this service. The main drawback comes with Heroku's free tier instances (called Dynos) falling asleep after 30 minutes of no use. Because of this, connecting to your Heroku app may initially take 15 seconds or so. Heroku does offer a solution to this; however, it is by joining a paid tier plan.

Be careful when doing this. While this sounds great, Heroku only gives you a set pool of free hours per month that all your Dynos may use. After you use your hours, you Dynos are put to sleep until the next month. Only use the Kaffeine service if you have one app, or if you only wish to keep it awake for a particular amount of time.

Conclusion

I hope this post has inspired you to start deploying your Rails / React applications. Once you get the hang of it, the process is fairly straight forward and easy to do. I hope you now have the confidence and expertise to start deploying your super awesome Rails / React applications.

Deploying A Rails App on Heroku

Brandon Brown — Mon, 21 Sep 2020 17:39:51 +0000

Hurray! Using Ruby on Rails, you've built the world's best and one-of-a-kind app that you know everyone would love. The one problem is how to get everyone to be able to use it. Fear not! Today we're going to go into deploying your super sweet Rails app to Heroku!

Project Setup

This is very important... In order to deploy to Heroku, you must be using PostgreSQL. Basically, Sqlite3 uses database files (marked by *.db files) to store the database information; however, PostgreSQL uses a client-server model to store the database. In short, PostgreSQL can support simultaneous connections to the database while Sqlite3 cannot. If you're interested in reading more on Sqlite3 vs PostgreSQL, you may find the article here interesting.

If you have already created your app using Sqlite3, you may follow the instructions by Mohammad Khan here to convert it.

If you would like to remake your project using PostgreSQL, you can set up a new project to use PostgreSQL using this article by Alex Ghiculescu.

Heroku CLI Setup

Alright. Now that we're using PostgreSQL with our Rails application, we now need to install the Heroku CLI. To do this, use the installation instructions provided here. If you're on Mac, the easiest method to installing the Heroku CLI is through Homebrew. If you do not have Homebrew installed on your machine, use the following terminal command to install it.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once installed, you can use the brew installation method shown in the Heroku installation instructions.

Quick note: Since I have not used Windows to instantiate Heroku Rails apps, I will not provide instructions on using the Heroku CLI in Windows.

Sample project

Just in case you don't have your own Rails application at the ready, I have created a small app that you may use to practice deploying to Heroku. This app is super simple and only displays superheroes and their super powers. I call it superheroku-app, and you may find it here. Just fork and clone this application to your computer.

Heroku Deployment

Once you've got your app ready, and it's using PostgreSQL, you are now able to deploy to Heroku. First, navigate to the root of your Rails project in your terminal.

If you have not done so already, be sure to create an account with Heroku. You may do so here.

Now that that's done, we need to log into Heroku on the CLI. Make sure you're in the root directory of your Rails app and run the following in your terminal:

heroku login

This should prompt you to press any key to open up a browser to login. Follow the login instructions, and you should be greeted with a login success message in the terminal.

Now we must create our Heroku app. To do this run:

heroku create [APP_NAME]

Next, we need to push our master branch to Heroku. To do this, run:

git push heroku master

heroku run rails db:migrate

then run:

heroku run rails db:seed

Quick note: "heroku run" allows you to run terminal commands very similar to running them on your local machine. "heroku run" can be very powerful, but be careful when using this as you are running scripts on your Heroku instance.

Heroku Troubleshooting

Unfortunately, there's a chance that something may go wrong while migrating or seeding your database. When this happens, you can the following in your terminal to view your Heroku logs.

heroku logs --tail

Heroku logs can be daunting at first; however, they will quickly become your best friend as you deploy more Heroku apps.

Also, you may dive into a console session with the Heroku. Just run the following, and you can test your Rails application in the console just like you would on your own machine.

heroku run rails c

A Quick Note on Free Heroku

If you really need your Heroku app to be live 24/7 but still do not want to pay, there is an app called Kaffeine that will wake your application for you every 30 minutes or so. You may find that app here. Be careful when doing this. While this sounds great, Heroku only gives you a set pool of free hours per month that all your Dynos may use. After you use your hours, you Dynos are put to sleep until the next month. Only use the Kaffeine service if you have one app, or if you only wish to keep it awake for a particular amount of time.

Conculsion

I hope this post has inspired you to start deploying your rails applications. Once you get the hang of it, the process is fairly straight forward and easy to do. I hope you now have the confidence and expertise to start deploying your super awesome Rails applications.

An Introduction to Python Higher Order Functions

Brandon Brown — Mon, 14 Sep 2020 19:29:27 +0000

In a previous post, I created a guide for JavaScript higher-order functions to make dealing with array computations easier. In this blog post, I will do the same thing but with Python as the language. Hopefully with these examples, you'll find it easier to sort and manage lists in Python.

If you are interested in reading the JavaScript blog post, you may find it here.

All

The all method accepts an iterable as an argument and will return True only if all conditions of the iterable are True. Otherwise, the all method with return False.

arr = [1, 2, 3, 4, 5]

all(i > 0 for i in arr)
=> True

all( i < 4 for i in arr)
=> False

Filter

The filter method returns a new list of all elements of the list that satisfy a condition. This method accepts a function and an iterable as arguments. However, the filter method returns a filter object and not a list. Therefore, we have to convert the filter object into a list.

arr = [1, 2, 3, 4, 5]

def filter_function(x):
  return x > 2

list(filter(filter_function, arr))
=> [3, 4, 5]

# Alternatively
list(filter(lambda x: x > 2, arr))
=> [3, 4, 5]

Although the previous filter would work, it can be a little confusing since you must pass in a function as an argument. Python offers a great feature called list comprehension which is more widely used when filtering.

arr = [1, 2, 3, 4 5]

[x for x in arr if x > 2]
=> [3, 4, 5]

Using list comprehension is considered to be more "Pythonic" and should be used primarily. However, if your filter requires a multi-step process, the filter function is probably your best bet.

The next method returns the first element of a list that satisfies a condition. This is similar to the find method in other languages. Next accepts an iterable as an argument. See the example below:

arr = [1, 2, 3, 4, 5]

next(x for x in arr if x > 2)
=> 3

If Python cannot find the element in the list, a StopIteration exception will be thrown and could crash your program if not handled correctly. Because of this, Python allows you to specify a default parameter.

arr = [1, 2, 3, 4, 5]

next(x for x in arr if x > 5)
=> StopIteration

next((x for x in arr if x > 5), None)
=> None

Hint: Do not forget to wrap your iterator in parentheses. Not doing so will cause a syntax error.

Includes

Python checks if elements exist in an array by using the "in" keyword. See the example below:

arr = [1, 2, 3, 4, 5]

1 in arr
=> True

6 in arr
=> False

For Each

To perform an action on every element of an array, Python uses the for loop. See the example below:

arr = [1, 2, 3, 4, 5]

for x in arr:
  print(f'Hello, I am {x}')
=> Hello, I am 1
Hello, I am 2
Hello, I am 3
Hello, I am 4
Hello, I am 5

It is important to note that changing the value of x does not change the original list.

arr = [1, 2, 3, 4, 5]

for x in arr:
  x = x * 2

print(arr)
=> [1, 2, 3, 4, 5]

There is a way to return an updated list; however, map (which we will talk about next) is a better option as opposed to the for loop. The for loop should primary be used to do something external for each item in the list.

Map

The map method returns a new list with all elements transformed by a function. This method accepts two arguments: a function and an iterable. Similar to filter, the map method returns a map object, so we must convert this map object to a list. See the example below:

arr = [1, 2, 3, 4, 5]
def square(x):
  return x * x

list(map(square, arr))
=> [1, 4, 9, 16, 25]

# Alternatively...
list(map(lambda x: x * x, arr))

However just like the filter method, you may use list comprehension to solve this problem. See the example below:

arr = [1, 2, 3, 4, 5]

[x * x for x in arr]
=> [1, 4, 9, 16, 25]

Again, list comprehension is the preferred method and is considered more "Pythonic."

Reduce

The reduce method reduces all values of a list into a single value. For example, the sum of a list can be considered as one of the simplest reducers since it takes all the elements of that list and returns a single value. This method is similar to filter and map in feel, but it is a little more complicated. The reduce method takes two required arguments and one optional argument. As its first required argument, the reduce method accepts a method that contains two arguments. The first argument of this inner function is the accumulator while the second is an element of the list. That is all for the inner method. The second argument of the reduce method is the list, and the third is an optional start parameter.

Additionally, the reduce function requires the Python library functools, so do not forget to import that library. I know this seems confusing, so hopefully the code will help you better understand.

import functools

def square_reducer(x, y):
  return x * y

arr = [1, 2, 3, 4, 5]

functools.reduce(square_reducer, arr)
=> 120

# Alternatively
functools.reduce(lambda x, y: x * y, arr)
=> 120

functools.reduce(square_reducer, arr, 2)
=> 240

# Alternatively
functools.reduce(lambda x, y: x * y, arr, 2)
=> 240

The first reduce function is the most straightforward. First we go to the first element and place it into the accumulator (x). Then we multiply the accumulator by the second element. So 1 * 2 = 2. Our accumulator value is 2. Next, we multiply the accumulator value by the third element (2 * 3). So we get a value of 6. We go on and on until we finish going through the entire array. In the end, this is what is happening:

1 * 2 * 3 * 4 * 5
=> 120

The second reduce function is doing the same exact thing but making use of a lambda function so we do not have to declare a reducer method separately.

The third function is doing the same as the first, however, it is starting with the accumulator set to 2. Therefore, this is the same as:

2 * 1 * 2 * 3 * 4 * 5
=> 240

Again, the fourth is doing the same as the third but using a lambda function.

Sort

The sort method returns a new sorted version of a list. The sorted method takes in one required argument and two optional arguments (reverse and key). The first argument is the list. The reverse optional parameter reverses the sorted list, and the key optional parameter is a function to base the list sort upon. See the examples below:

arr = [2, 1, 5, 3, 4]

sorted(arr)
=> [1, 2, 3, 4, 5]

sorted(arr, reverse=True)
=> [5, 4, 3, 2, 1]

students = [
  {'name': 'Jimmy', 'age': 15},
  {'name': 'Hector', 'age': 18},
  {'name': 'Paige', 'age': 16}
]

sorted(students, key=lambda x: x['age'])
=> [{'name': 'Jimmy', 'age': 15}, {'name': 'Paige', 'age': 16}, {'name': 'Hector', 'age': 18}]

Min

The min method searches a Python list for a minimum value. This method accepts one required parameter and three optional parameters. The required parameter is the iterable itself. Optionally, you may add more objects to this function as ongoing arguments. You may also sort using a key (similar to sorted method) and specify a default value. See the examples below:

arr = [1, 2, 3, 4, 5]

min(arr)
=> 1

min(0, -2, 1, 8, 5)
=> -2

students = [
    {'name': 'Jimmy', 'age': 15},
    {'name': 'Hector', 'age': 18},
    {'name': 'Paige', 'age': 16}
]

min(students, key=lambda x: x['age'])
=> {'name': 'Jimmy', 'age': 15}

min([], default=0)
=> 0

Max

The max method is identical to the min function; however, it finds the maximum value in an iterable. See the examples below:

arr = [1, 2, 3, 4, 5]

max(arr)
=> 5

max(0, -2, 1, 8, 5)
=> 8

students = [
    {'name': 'Jimmy', 'age': 15},
    {'name': 'Hector', 'age': 18},
    {'name': 'Paige', 'age': 16}
]

max(students, key=lambda x: x['age'])
=> {'name': 'Hector', 'age': 18}

max([], default=100)
=> 100

Conclusion

Higher order functions are wonderful to use and can save you a lot of time and headache if you are aware of them. I hope you find these methods helpful and easy to use. Happy coding!

Setting up Apache Server with SSL on Google Cloud Platform

Brandon Brown — Wed, 09 Sep 2020 20:39:21 +0000

Last week, I wrote a post (article here) on how to set up an Apache web server on Google Cloud Platform. This week, I'm going to go more in depth on how to add the SSL protocol to the server. In short, SSL provides an extra layer of security than a website using just HTTP. In fact, this protocol is called HTTPS where the "S" stands for secure. First, we'll take a look at what SSL is and why it is important.

What is SSL?

SSL (or HTTPS) is an internet protocol that provides security in two ways. First, it encrypts data transferred during typical website use. Simply, encryption scrambles the transferred data into something that can only be read by someone possessing an encryption key. Without encryption, information transferred across the internet can be read a simple text, but with encryption, this data can only be read by using the encryption key. For instance, someone on the same WiFi network as you could read into the web requests you are making with your computer. This is fairly harmless for simple Google searches but can get very scary when a bank account or credit card enters the mix. Encryption makes it so that the "bad guy" who steals your web request information only sees a bunch of jumbled information that makes no sense. And since he/she does not have the encryption key, this information is totally useless.

SSL also validates the website or company by using SSL certificates. Certificates are only distributed by Certificate Authorities (CA's) which validate the websites. These CA's are institutions that are responsible for making sure websites do what they say they do and verifying that they are completely legitimate. Upon visiting a website, the browser requests a certificate for that domain. If a valid certificate exists, the CA sends this certificate back to the browser and the user goes on without any interruption. If no certificate exists, the browser alerts the user that the website is not secure so that the user knows to stay away.

Where can we get a certificate?

Certificates can be expensive as CA's work very hard to maintain their authority. As suspected, we won't be using these expensive CA's. SSL For Free and Let's Encrypt offer free options for SSL certificates. In this blog, I'm going to work with using Let's Encrypt as I found it the most easy to use.

Getting a Certificate

To get a certificate, head on over to Let's Encrypt. Reading through this is helpful in understanding how Let's Encrypt works; however, it ultimately directs you over to a service called Certbot. Following this link to Certbot, input your software and system. Here, we are going to use Apache and Debian 9 (stretch).

After entering this information, you should be guided to a page with installation instructions on setting up your server with Certbot. Below are the instructions specifically for Apache on Debian 9 (stretch).

Follow the instructions using your shell terminal on your Google Cloud Platform virtual machine. The easiest method is to follow the instructions to install Certbot in a single step and not using the certificate only approach.

After you finish, make sure to restart your server by running:

```sudo systemctl restart apache2

You should now have SSL enabled on your Apache server with a valid certificate. Navigate to your website and check.

Troubleshooting

If your website does not have SSL enabled (https:// in the address bar), we should validate the Apache configuration.

First, let's make sure SSL is enabled for Apache. In the "/etc/apache2/sites-enabled" directory, you should find a file called "default-ssl.conf". In this file, verify that "SSLEngine on" exists. If you find "SSLEngine off", change it to "SSLEnging on".

Towards the end of the "default-ssl.conf" file, verify that there is a line similar to "SSLCertificateFile /etc/letsencrypt/live/...". If this line does not exist, try running the Certbot instructions again.

Redirecting regular HTTP requests to SSL

The last thing we should do is redirect any requests from port 80 (HTTP) to port 443 (SSL). To do this, head into the "000-default.conf" file inside the "/etc/apache2/sites-enabled" directory. Here, comment out everything with number signs (#) and enter the following code:



<VirtualHost *:80>
    ServerName [website address without http]
    Redirect permanent / https://[website address without http]
</VirtualHost>

Here "website address without http" simply means disregard the http before the website address. For example, http://google.com would be written as google.com. For my particular website, the configuration is as follows:



<VirtualHost *:80>
    ServerName brandonmichaelbrown.com
    Redirect permanent / https://brandonmichaelbrown.com
</VirtualHost>

What is happening here? Well I'm glad you asked.

Here, we are configuring Apache to redirect any requests from http://[website] (port 80) to https://[website] (port 443). This is redirecting any non-SSL traffic to our new SSL host. The "permanent" keyword is simply a type of redirect. Since we do not care to ever use the http:// address, we are configuring this as a permanent redirect. You can read more about the permanent and temporary redirects here.

Conclusion

I hope you were able to transform your website into a new and refined SSL certified site. Good luck and happy programming!

Assigning a Domain Name to Your Google Cloud Platform Apache Server

Brandon Brown — Mon, 31 Aug 2020 16:50:59 +0000

In last week's blog, I discussed how to set up an Apache web server using Google Cloud Platform. However, this website was only accessible by it's IP address. For obvious reasons, this is not ideal as it is not easily remembered or easily transferable. Today, I'm going to discuss setting up your Apache Server with it's own domain name.

How does a domain work?

Domain names allow your browser to request a connection to a server by using a simple-to-use alias. For example http://www.google.com/ actually connects to a web server with a specific IP address. As a typical user, we do not see this IP address and only interface with Google using the domain name http://google.com/. This makes using the Google website a much better experience. This mapping of aliases to IP addresses is possible through a system called the Domain Name System (DNS).

In simple terms, the DNS is a network of servers that keep records of all the domain names and their corresponding IP addresses. All of these domain servers are created and managed by domain hosting companies (Google, GoDaddy, Domain.com, etc.) When a browser makes a request to a domain name, the DNS matches the domain name request to an IP address and then serves the information to the user.

How do we get a domain

No matter what, domains are not free. You can choose any domain hosting service you like to host your domain, however, since we created our server using Google Cloud Platform, I will be using Google Domains. However, don't be too worried if you do not want to use this service as the process is largely the same. Just go onto the domain hosting service website and sign up.

Creating a Google Domain

To start, go to domains.google.com and type in the domain you would like to purchase into the search bar.

If the name is available, you can add the domain name to your cart. You must then sign in to your Google account and go through the checkout process to purchase the domain. After you're done, you are now a proud owner of your own domain name! Congratulations!

Configuring Your Domain DNS

Now that we have our own domain name, we must now point the domain name to our Apache web server. To do this, we will be configuring our DNS for this domain. To start, navigate to the DNS tab on the Google Domains dashboard.

You can now select your name servers. Here, Google allows you to use other DNS providers for your domain name, however, we're going to stick to using Google's name servers. You can read more on domain name servers here.

We can ignore DNSSEC, Registered hosts, and Synthetic records for now as these offer additional configuration options.

Custom Resource Records

Scroll down to the bottom of the page to Custom resource records. This is where we will link our IP address to our domain. This is fairly straightforward, however, we need to understand the concept of resource record types. Resource record types tell your domain DNS how to route traffic when users connect to your domain. The types we will use in this tutorial are A and CNAME. To see a full list of resource types, you can read the documentation here.

The A resource record type maps the domain name to the a specific IP address. As you can guess, we will use this one to tie the IP address from our Apache web server.

The CNAME (cononical name) resource record type maps an alias domain name to a true domain name. For this, we are simply going to point the www subdomain to the true domain name. This redirects www.[yourdomainname].com to [yourdomainname].com.

Since I did not want to buy a new domain name for this tutorial, I am using my own website brandonmichaelbrown.com. To configure the custom resource records, you can use the template below. Just make sure to update the IP address to your own IP address running the Apache web server.

Quick note on the "A" record

The @ symbol is used as a "root" alias. This tells the DNS that when anyone connects to your root domain (brandonmichaelbrown.com in this example), it should redirect traffic to the IP address specified.

Additional Google Domain Features

As mentioned before, there are a couple of additional features in the DNS table for Google Domains. These include DNSSEC, Registered hosts, and Synthetic records.

DNSSEC offers some additional security which you can read about here.

Registered hosts allows you to configure subdomains for your website. For example, Google has an images subdomain located at http://images.google.com/. You can read more about registered hosts here.

Synthetic records are unique to Google Domains and give you the ability to add domain forwarding to your domain address. You can read more about Synthetic records here.

Conclusion

After you finish these steps, you should have your domain name configured. It may take a little while as the network of DNS providers needs to update. I believe Google says up to 48 hours, but I've only had to wait a maximum of 4 hours on previous occasions. After checking in every hour or so, you should eventually see your Apache web server hosting to your new domain name!

I hope this tutorial has been helpful and easy to walk through. Please reach out to me if you have any questions setting up your domain name!

Setting up a Simple Web Server with Google Cloud Platform

Brandon Brown — Tue, 25 Aug 2020 18:40:24 +0000

Every now and then, you may come across the need to build a simple website hosted somewhere on the internet. Many services for this exist such as Squarespace, Wix, etc.; however, these options can be expensive and do not give you complete control of your web server. Using Apache and Google Cloud Platform, we can create a simple website with almost no cost. In this tutorial, we will do just that.

Note on Netlify

If you wish nothing more than to display HTML / JavaScript pages, Netlify could be a better option for you. Netlify offers free web hosting for simple HTML projects at no cost. However, if you wish to have a full Linux Server, Apache with Google Cloud Platform is a good option.

What is Apache Web Server

"The Apache HTTP Server Project is an effort to develop and maintain an open-source HTTP server for modern operating systems including UNIX and Windows." - Apache Project Team

In simpler terms, Apache allows you to start a web server which can display simple HTML, JavaScript, and CSS code. Apache accomplishes this by listening for incoming traffic on port 80 (the default internet port) and serving up the HTML documents accordingly. Therefore, with Apache we can write simple HTML, JavaScript, and CSS files and serve them to internet clients.

What is Google Cloud Platform

Google Cloud Platform is a service created by Google to host virtual machines in the cloud. Virtual machines can be configured to have very powerful hardware (very expensive) or micro hardware (very cheap). These virtual machines are also available with many operating systems including different distributions of Linux (Ubuntu, Debian, Red Hat, etc.) or Windows Server. In short, Google Cloud Platform gives us a virtual machine to run our Apache Web Server.

Setting up Google Cloud Platform

Setting up and creating a new virtual machine on Google Cloud Platform can be daunting and confusing at first. However, once you are used to the process, it is fairly straight forward.

First, navigate to cloud.google.com and sign in using a Google account. Next click the "Get started for free" button. This will take you to the google Cloud Platform Console. Agree to the terms of service and continue. Next, you will be brought to a signup page. Unfortunately, you will have to enter your credit card information to start an account. Once complete, click the "START MY FREE TRIAL" button.

Building Your Google Platform Virtual Machine

Congratulations! You are now ready to start building virtual machines. You should be looking at a page similar to the following:

Creating your VM

To start creating a VM to host your web server, navigate to the Computer Instances tab and select "Create". This will bring you to a perhaps confusing web page, but don't worry, we will walk through everything you need to know.

Name

First, you must name your virtual computer instance. This can be anything you want, but I'm going to call this one "my-website". This is simply what GCP will display for your VM name.

Labels

Next, you may add one or more labels to this VM, however, I am going to skip this since we are only creating one VM at the moment.

Region and Zones

Next, you must choose a region for your VM. In short, VM's are hosted in physical data centers. These data centers exist around the world, so you are essentially picking where your VM will be physically hosted. Since I am on the east cost, I am going to choose an east coast zone. To read more about selecting regions and zones see this article.

Computer Type

Now we must select the type of computer we would like to create. There categories for these options including machine family, series, and machine type.

Machine Family

Machine family comes in three types: General-purpose, Memory-optimized, and Compute-optimized. In short, you can select your VM configuration based on if you need more memory or computer power. For simplicity, we are going to stick with the General-purpose family.

Series

Next, we can choose a series. At the time of this writing, N1, N2, and E2 are available. N1 uses Intel Skylake processors, N2 uses Intel Cascade Lake processors, while E2 will dynamically select the computer platform based on availability. If you would like to read more about available series, see the documentation here. Since we don't want anything fancy, we're going with the cheapest option - N1.

Machine Type

Now we must select our machine type. Again, since we don't want anything crazy, we'll select f1-micro (1vCPU, 614 MB memory). As you can see by the specs, this guy is really tiny; however, for a simple Linux distribution (touching on this next), this will do just fine. If you would like to read more on machine types, see the documentation here.

Operating System

And last but not least, we will select our operating system. By default Debian 9 is selected, and this is a great choice since it is lightweight and fairly simple to use. Feel free to change this to whatever you would like; however, I will be sticking with Debian 9.

Allow HTTP access

This step is VERY important and easily missed. If you do not allow HTTP traffic, all HTTP access to your VM will be blocked. Make sure the box labeled "Allow HTTP traffic" is checked. If desired, you can also allow HTTPS traffic, however, we are not going to set up a certificate today.

And that's it! All we need to do now is hit the create button and wait for it to spin up! This should not take long as we are creating a very small VM and Google can spin these bad boys up like nobody's business. After creation, you'll be directed to a page that looks like this:

If you were able to get here, good job! Grab yourself a coffee and pat yourself on the back. You are now a proud owner of a micro computer somewhere in the CLOUD.

Getting Apache on Our VM

Now that we've got our new machine, we can open the bash terminal by connecting to the machine via SSH. Under the connect column, click the SSH button. This will open a new window where where you can access your new VM! (Don't worry about the fancy SSH key transfer. This is just security on Google's part). You should now be viewing a window that looks like this:

Hopefully this looks a little familiar to you as it is just the bash terminal for Debian 9. Therefore, we can run any Linux command we need including installing programs! However, first let's update our machine just in case.


 apt update

Now we can install Apache.


 apt install apache2

Hit 'Y' when prompted to continue the installation. This will do everything necessary to install Apache onto your new machine.

By default, Apache should be started, but you should check to make sure by running:


 systemctl status apache2

If the service does not respond with "Active: active (running)", run the following to start it.


 systemctl start apache2

If you should ever need to restart your Apache server, run the following command:


 systemctl restart apache2

Verify Apache is running by checking the status again. Once it is running, you should be to go.

Verify Website is Working

Now we need to verify that Apache is running and responding to HTTP requests. Head back to the VM dashboard and click the External IP assigned to your VM. This should open a new tab with Apache startup page displayed.

If you got here, good job! Give yourself yet another cup of coffee and another pat on the back. We have gotten through the hardest part, and you should be proud. You now have a working web server hosted on Google Cloud Platform. Next, we are going to update the index.html file that Apache pull from to display your own custom webpage.

Update index.html file

It is entirely possible to update the index.html file using the Linux terminal; however, I prefer to use a text editor like VS Code or something similar. In the end we will create a html file called index.html with the following contents:



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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>

<body>
    <h1>This is my brand new web page!</h1>
    <h2>I can do anything I want with this!</h2>
</body>

</html>

Once you have created that file, navigate back to the VM's terminal and upload the file by clicking the cog in the top right corner then "Upload file." Navigate to your file and select "Open."

This copies your file to the root directory of your VM. In the terminal navigate to home and check the files that are there by entering:


 ~ && ls

You should see your new index.html file listed. Now we just need to move this file to the Apache html directory. Do this by entering:


 mv index.html /var/www/html

Navigate back to your VM's external IP address, and you should see the following:

*Important Note: *
Apache by default looks for a file called index.html in the directory /var/www/html/. This is the default file Apache will display when people navigate to the web server homepage. If more web pages are needed, you can create them by defining a new HTML files and moving them into the /var/www/html/ directory.

You may also add folders to this directory to add more levels to your website. For instance, creating a file called 'about.html' under /var/ww/html/custom-webpages/ will make http://[External IP]/custom-webpages/about.html display whatever is inside the about.html folder. Basically, your URL's follow the file structure within /var/www/html/.

If you got this far, yet another congratulations. You are now able to create whatever you want on your own website. That's spectacular!

Conclusion

I hope this tutorial has helped you create your own website using Apache on Google Cloud Platform. In the coming weeks, we will look at adding a certificate to your website to allow for secure HTTP (HTTPS). We will also work on attaching this external IP to a domain such as (yourwebsite.com). Catch you next time!

JavaScript Higher-Order Functions — A Short and Sweet Reference Guide

Brandon Brown — Tue, 11 Aug 2020 18:32:19 +0000

Becoming familiar with the basic JavaScript iterators can make wonders for your JavaScript code. Using them effectively can make your code cleaner, easier to read, and all around better. Hopefully after reading this blog, you’ll be able to use JavaScript Iterators to your advantage. To be concise, I will use arrow functions in the example code.

Every

The every method returns true if all of elements of the array satisfy a condition and false otherwise. This method accepts one argument: a callback function. This callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.every(e => e > 0) 
=> true

arr.every(e => e > 1)
=> false

Filter

The filter method returns a new array of all elements of the array that satisfy a condition. This method accepts one argument: a callback function. Similar to every, this callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.filter(e => e > 0) 
=> [1, 2, 3, 4, 5]

arr.filter(e => e % 2 === 0)
=> [2, 4]

Find

The find method returns the first element of the array that satisfy a condition. Find accepts one argument: a callback function. Similar to every and filter, this callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.find(e => e > 0) 
=> 1

arr.find(e => e % 2 === 0)
=> 2

ForEach

The forEach method loops over every element of the array and performs some action specified by a callback function. forEach accepts one argument: a callback function which has one argument (an element of the array). See the example below:

const arr = [1, 2, 3, 4, 5]

arr.forEach(e => console.log(`Hi! I'm ${e}`))
=> Hi! I'm 1
   Hi! I'm 2
   Hi! I'm 3
   Hi! I'm 4
   Hi! I'm 5

Includes

The includes method returns true if all any elements of the array are equal to the function argument and false otherwise. This method accepts one argument: the value of which to find. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.includes(5) 
=> true

arr.includes(6)
=> false

Map

The map method returns a new array with all elements transformed by a function. This method accepts one argument: a callback function which accepts one argument (an element of the array) and should return the desired transformation. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.map(e => e ** 2)
=> [1, 4, 9, 16, 25]

arr.map(e => `I'm ${e}!`
["I'm 1", "I'm 2", "I'm 3", "I'm 4", "I'm 5"]

Reduce

The reduce method returns a value accumulated from all elements of the array. This method accepts one argument: a callback function. This callback function should accept two arguments: the aggregator and an element of the array. The function should return an expression that sets the aggregator to the desired reduced value. See the example below:

const arr = [1, 2, 3, 4, 5]

arr.reduce((total, e) => total = total + e)
=> [1, 4, 9, 16, 25]

arr.reduce((agg, e) => agg = agg + 1 / e)
=> 2.28333333333

Some

The some method returns true if any of elements of the array satisfy a condition and false otherwise. This method accepts one argument: a callback function. This callback function has one argument (an element of the array) and should return a condition that can be evaluated as true or false. See the example below.

const arr = [1, 2, 3, 4, 5]

arr.some(e => e > 4) 
=> true

arr.some(e => e > 6)
=> false

Sort

The sort method destructively sorts the array. Without any arguments, the array will be sorted numerically, however, a callback function an be used to sort the array as desired. This callback function accepts two arguments: both are elements of the array. The callback function should return a negative number if the first element argument should sorted be before the second and a positive number if the second element should be sorted before the first element. See the example below:

let arr = [2, 1, 4, 3, 5]

arr.sort() 
=> [1, 2, 3, 4, 5]

arr = [2, 1, 4, 3, 5]
arr.sort((e1, e2) => e1 - e2)
=> [1, 2, 3, 4, 5]

arr.sort((e1, e2) => e2 - e1)
=> [5, 4, 3, 2, 1]

Conclusion

Hopefully now you have a better understanding of these JavaScript iterators. Using these effectively can make your code more concise and much more readable. Happy coding!

A Dive Through 5 Sorting Algorithms

Brandon Brown — Tue, 11 Aug 2020 17:35:03 +0000

Throughout my programming career, I have not explored anything sexier or more intimidating than sorting algorithms. Scouring the web for more information on this topic, I found sorting algorithms ranging from fairly simplistic to the elegantly complex. As it turns out, there is quite the library of sorting algorithms that have been created over the years, so learning and comparing all of them would take a very long time. Therefore, in this blog, I would like to focus on five of the most popular: selection sort, bubble sort, insertion sort, merge sort, and quicksort.

These algorithms will increase in complexity as we work through them. However, as complexity increases, so will their efficiency. Thus, it appears that nothing truly spectacular comes easily. Such is life. However, if willing to take on the task of understanding some of these complex algorithms (merge and quicksort specifically), I assure that you will find mind-blowingly elegant. Now that I’ve talked enough, let’s get down to business.

O Complexity

In the computing world, algorithm efficiency is measured by something called the Big O Notation (or O complexity). Big O is measured by the amount of computations/comparisons done within a particular algorithm. Since this idea seems very abstract at first, let’s look at an example.

for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
}

Let’s assume that arr and sum have already been defined. Here, we are looping through the array and adding each element to a variable called sum. Because the array is n elements long, we loop through the array n times. In other words, we are running the inner logic n times in total. This algorithm has a complexity of O(n).

Let’s look at another example (still assuming arr and sum are defined).

for (var i = 0; i < arr.length; i++) {
    for (var j = 0; i < arr.length; i++ {
        sum += arr[j];
    }
}

Can you guess how many computations will be made with this algorithm? If you guess n², you would be correct. If not, that’s ok. Here’s the explanation. For simplicity, we will say that the length of the array is n elements long. For the inner for loop, we are going to do n computations (again, one for each element of the array). The outer loop is going to run the inner loop n times (one time for each element of the array). Because the inner loop runs n computations, and the outer loop runs the inner loop n times, there are a total of n² computations. We would refer to this array having a time complexity of n².

Understanding O complexity, we should now be able to analyze the sorting algorithms for their efficiency.

Selection Sort

Selection sort sorts data by selecting the smallest element in the array and swapping with the first unsorted element in the. See the graphical explanation below.

Now let’s take a look to how this looks in code. For simplicity, I am not going to define the swap function. Just know that it takes in an array to update and two indexes to swap.

for(var i = 0; i < arr.length; i++) {
    for(var j = i + 1; i < arr.length; i++) {
        if (arr[j] < arr[i]) {
            min_val_index = j;
        }
    }
    if (i != min_val_index) {
        swap(arr, i, min_val_index);
    }
}

This algorithm has a complexity of O(n²). I know what you might be thinking. There are a lot more computations per loop in this one compared to the last one. How can they both be O(n²)? While that may be true, algorithm efficiency measurement negates how many computations you do per loop. In other words, we are only concerned about the amount of times we are looping and no the computations inside the loop. Therefore, we consider this algorithm to have a complexity of O(n²)

Bubble Sort

Bubble sort sorts data by comparing each element of the array to its neighbor and then swapping them if they are in the wrong order. This gives the visual effect of the larger elements “bubbling” to the end of the array. See the graphical representation to the left.

Here’s how it looks in code. Again, I will not define the swap function.

for(var i = 0; i < arr.length; i++) {
    for(var j = 0; j < arr.length - i - 1; j++) {
        if(arr[j] > arr[j + 1]) {
            swap(arr, j, j + 1);
        }
    }
}

Again, this algorithm has a complexity of O(n²), so it we’re not getting anywhere quite yet.

Insertion Sort

Insertion sort sorts data by going through each element in the array and inserting that item into the already sorted portion of the array. See the graphical representation to the left.

Below is the implementation of this in code.

for(var i = 1; i < arr.length; i++) {
    j = i - 1;
    while j >= 0 && arr[j] > arr[i] {
        arr[j + 1] = arr[j];
        j = j - 1;
    }
    arr[j + 1] = arr[i];
}

Again, the complexity of this algorithm is O(n²). It doesn’t look like we’re getting anywhere looping inside of loops. This leads us to our final two algorithms: merge sort and quicksort. But first we need to define something called recursion. This is a very complicated topic, however, merge sort and quicksort both use it to increase efficiency.

Recursion

Recursive functions are functions that call themselves. Let’s look at one of the simplest example of this: a factorial. A factorial of a number is nothing more than the product of all whole numbers less than itself. 5! = 5 * 4 * 3 * 2 * 1. With this information, we can say that the factorial of a number is equal to the product of the original number and the factorial of the original number - 1. 5! = 5 * 4!. Therefore, 5! = 5 * 4! = 5 * 4 * 3! = ……. Here we can use a recursive function. See below for the implementation of this in code.

function factorial(var n) {
    if (n>=1) {
        return n * factorial(n-1);
    }
    else {
        return 1;
    }
}

Merge Sort

Merge sort works by first splitting up the data into singular elements, then merging them back together in the proper order. Study the diagram to the left closely. It does this through recursive computing.

Let’s look at how this looks in code.

function mergeSort (arr) { 
    if (arr.length <= 1) {
        return arr;
    }

    var mid = Math.floor(arr.length / 2);
    var left = mergeSort(arr.slice(0, mid));
    right = mergeSort(arr.slice(mid));
    return merge(left, right);
}
function merge (arr1, arr2) {
    var sorted = [];
    while (arr1.length && arr2.length) {
        if (arr1[0] < arr2[0]) {
            sorted.push(arr1.shift());
        }
        else {
            sorted.push(arr2.shift());
        }
    }
    return sorted.concat(arr1.slice().concat(arr2.slice()));
}

In the first part of the mergeSort function, we are breaking down the the array into bites of 1 element long. Then once we reach one element long, we will take those elements and start merging them together with the merge function. Without getting into the deep math (believe me that the math is deep), the time complexity of merge sort is O(n * log (n)). If interested, you can find a good explanation of this here on stack exchange.

Quicksort

Similar to merge sort, quicksort attacks sorting with a divide and conquer methodology. Here, the data is partitioned by a pivot (I usually pick the last element in the array). The elements are then groups into two subarrays — one array with elements less than the pivot, and one with the elements greater than the pivot. This process is repeated until the subarrays have a length of one or zero elements. See the diagram below.

If you guessed this sounds like a recursive problem, you’d be right. This is how it looks in code.

function quickSort(arr[], low, high)
{
    if (low < high)
    {
        pivot = partition(arr, low, high);

        quickSort(arr, low, pivot - 1);
        quickSort(arr, pivot + 1, high);
    }
}
function partition (arr[], low, high)
{
    var pivot = arr[high];  

    var i = (low - 1)  // Index of smaller element

    for (var j = low; j <= high- 1; j++)
    {
        // If current element is smaller than the pivot
        if (arr[j] < pivot)
        {
            i++;
            swap(arr, i, j)
        }
    }
    swap(arr, i + 1, high)
    return (i + 1)
}

Through all this, the time complexity of this is O(n log(n)). You can reference a great walkthrough of the code here if interested.

Conclusion

I hope not to have left you perplexed with the sorting algorithms above. I understand that they are very complex at times, however, the only way to get to know them is to spend time working through them. As an aside, coding languages (Ruby, Python, etc) typically use quicksort by default. This is because quicksort is the fastest performing sorting algorithm in the average case for most inputs. But by all means, please still use the built-in sorting algorithms for the programming language. Sometimes it’s just fun to see what kind of complex monsters live behind simple commands such as array.sort.

Intro to Ruby Gems

Brandon Brown — Tue, 11 Aug 2020 17:25:40 +0000

Coming into the Ruby software development world can be daunting. At least this is how I felt when I first started my Ruby coding adventure. As a beginner to this wonderful language, there seemed to be endless topics to learn, countless questions to ask, and thousands of concepts to master. It was around here where I sat back and wondered how anyone can master everything with the Ruby language. As my education and exploration continued, I ran across the concept of RubyGems and realized, “Huh, maybe I don’t have to master absolutely everything.”

RubyGems, huh? Sounds cute or maybe a little gimmicky. Despite this initial feeling, diving deeper into the topic opened my eyes to a whole new world. Exploring the internet for these little guys, it appeared that I could solve a whole host of problems I knew nothing about hours ago. From creating your own web applications to just printing things prettier on the console window, it looked liked these guys could do it all.

Hopefully I have captured at least a small bit of your attention. So what are these magical things anyway? When do I use them? Where do I get them? How do I get them? How do I use them? These are the same questions I had initially, and I will try my best to answer all of these.

What is a Ruby Gem?

In short, a RubyGem is a library of code containing classes, modules, methods, and possibly more. Once created, they are packaged up by their creators for easy distribution to fellow Ruby developers. This sounds extremely generic, however, RubyGems are not bound by one functionality or one goal. They are simply code created to accomplish a task.

When do I use them?

RubyGems are widely applicable to most everything you would like to accomplish in Ruby. Most of the time, the short answer for using a Gem is to Google the issue you’re having, and search around forums and websites for interesting articles. For instance, you may want to find some way to effectively and quickly write code tests and stumble across a wonderful Gem called Rspec. Or you may come across ActiveRecord by trying to find an easy way to read and write data to databases without using those nasty SQL queries. In short, if you have a problem you’re looking to solve, Gems could be the answer.

However, Gems should not be the answer 100% of the time. Below are a couple of example of when to not use a RubyGem.

For accomplishing relatively simple tasks, most of the time, Gems should not be used. Be wary of spending hours looking for Gems when spending 30 minutes or so critically thinking could also solve the problem.
RubyGems are loaded into memory upon execution and could slow down the development and testing process with longer loading times. This is especially problematic with very large or poorly optimized Gems.
RubyGems are maintained externally and can change over time. This leaves your project as the mercy of the Gem developer(s).

Gems are still wonderful and powerful tools with a great community behind many of them. Next we will explore where to find them.

Where do I get them?

Although it is possible to get RubyGems elsewhere, the most popular place to get them is rubygems.org. Once there, just type in the Gem you are interesting in using and press search. In this example, we are going to be looking for the awesome_print Gem which prints data to the terminal in a more readable fashion.

After searching for a Gem, a list will pop up showing the Gems that apply to your search.

From the search results, select the one you would like to download. In our case, we would pick the first one: awesome_print. Click the Gem link, and you will be navigated to a page similar to the one below.

Keep an eye on the INSTALL: section. We will be using this to install our Gem.

Installing Ruby Gems

The following install instructions are for Mac OSX users with Ruby 2.0 or later. To install a RubyGem, simply open the terminal application and copy and paste the install command mentioned earlier.

If completed successfully, you should see a message saying “1 gem installed.” We can verify that this Gem installed by checking our installed Gems by running “gem list” in the terminal.

Hooray! We have successfully installed awesome_print! Now we just need to know how to use this little guy.

Requiring and Using the RubyGem

Now that we’ve got our super awesome Gem installed, using it is just as easy. To start using this Gem, first we need to require it. Since the Gem is installed on our machine now, we just need to type “require ‘awesome_print’” inside of our Ruby file. This will tell our computer to load the awesome_print Gem during the execution of our file. Make sure to require the Gem before you try to use that Gem. Not doing so will result in an error.

require 'awesome_print'

Now let’s make some dummy data that we can print out.

require 'awesome_print'

employees = [{ name: "Jimmy", position: "Software Engineer 1" }, { name: "Bob", position: "Software Engineer 1" }, { name: "Mark", position: "Software Engineer 1" }, { name: "Beth", position: "Software Engineer 4" }, { name: "Nancy", position: "Software Manager" }, { name: "Stacy", position: "Software Engineer 1" }, { name: "Earl", position: "Maintenance 1" }, { name: "Alfred", position: "Security Officer" }, { name: "Bruce", position: "Senior Accountant" }, { name: "Robin", position: "Assistant to the Accountant" }, { name: "Cory", position: "Software Engineer 2" }, { name: "Grant", position: "CEO" }, { name: "Geoffrey", position: "CTO" }, { name: "Wendy", position: "CFO" }, { name: "Moxxie", position: "Quality Assurance Manager" }, { name: "Gustave", position: "Foreign Relations Advisor" }, { name: "Robert", position: "Engineering Manager" }, { name: "Brittany", position: "HR Manager" }, { name: "Hercules", position: "Senior Security Guard" }]

Oh man, that looks really messy. Hopefully awesome_print makes it a little easier to read for us. Let’s employ it by using the “ap” method defined in the awesome_print Gem.

ap employees

Finally, let’s run this code to see what we get in our terminal.

[
    [ 0] {
            :name => "Jimmy",
        :position => "Software Engineer 1"
    },
    [ 1] {
            :name => "Bob",
        :position => "Software Engineer 1"
    },
    [ 2] {
            :name => "Mark",
        :position => "Software Engineer 1"
    },
    [ 3] {
            :name => "Beth",
        :position => "Software Engineer 4"
    },
    [ 4] {
            :name => "Nancy",
        :position => "Software Manager"
    },
    ...
]

Lo and behold! The power of awesome_print! I will mention that for the sake of this blog, I cut out a majority of the information that awesome_print supplied. Awesome_print does in fact display all of the employees, however, I figured listing 5 employees was enough to get the point across.

Conclusion

Hopefully this has been a good introduction to using RubyGems. We have explored what a RubyGem is, when to use one, where to find them, and how to use them. From now on, I hope you feel confident in your ability to find and and install these wonderful tools. Who knows? Maybe one day you’ll be making your own Gems and sharing all of your wonderful work with others! Thank you for reading my blog and happy Gemming!

Web Sockets with Rails 6 and ReactJS

Brandon Brown — Tue, 11 Aug 2020 17:16:45 +0000

Introduction

With social media platforms so prevalent nowadays in our every day lives, it is hard to go a day without utilizing a websocket. Websockets provide a connection between a backend and frontend server to allow for real-time data flow. The simplest, yet one of the most wide use cases of websockets is a simple message board. Here, I’m going to attempt to walk through a simple setup process for a message board with a Rails backend and a React frontend.

Rails Setup

First start off by creating a new rails application:

rails new message-board-backend --api --database=postgresql

Here, we want to use rails as an API as to not clutter up our backend server with frontend items such as views. Additionally, we are using postgresql as our database because sqlite3 is not supported by Heroku in case one day we would like to deploy this app.

Once the app is created, we need to add the ability for the backend to receive requests from the frontend. This is handled through the rack-cors gem. To do this, we will need to uncomment the following line in the Gemfile.

gem 'rack-cors'

We also need enable connections from our frontend. To do this, uncomment and update the following in config/initializers/cors.rb.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Setting origins to “*” is alright for development, however, make sure to set this to the production URI before production. Now install the rack-cors gem with:

bundle install

Now we need to create our message model and then migrate. Run the following:

rails g model Message content --no-test-framework
rails db:migrate

Here, we are creating a message model with one column (content) with type string. Also we are using the no-test-framework to tell rails not to generate any test files.

Next, we are going to create our routes inside of config/routes.rb.

Rails.application.routes.draw do
  resources :messages, only: [:index, :create]
  mount ActionCable.server => '/cable'
end

Here, we generate two routes for messages (index and create). We also generate a route to use as our websocket server endpoint. This is what we’ll use to “listen” for updates on the frontend.

In order for the route we just created to be functional, we need to create a channel for our messages. Channels provide the link for the websocket by broadcasting any new messages that are created. Create a channel in rails with:

rails g channel messages --no-test-framework

This creates a new file in app/channels called messages_channel.rb with methods subscribe and unsubscribe. Edit the file with the following:

class MessagesChannel < ApplicationCabel:Channel
  def subscribed
    stream_from 'messages_channel'
  end
  def unsubscribed
  end
end

Next, we need to create our controller to handle returning all messages and the creation of new messages. Generate the controller with:

rails g controller messages --no-test-framework

Next we need to configure the new messages controller:

class MessagesController < ApplicationController
  def index
    messages = Message.all
    render json: message
  end
  def create
    message = Message.new(message_params)
    if message.save
      ActionCable.server.broadcast 'messages_channel', message
      head :ok
    else
      head :ok
    end
  end
  private
  def message_params
    params.require(:message).permit(:content)
  end
end

If a valid message is sent, the message is created in the database, and ActionCable broadcasts the message to the messages_channel channel. If the message is not valid, writing “head :ok” will allow the server to continue the connection.

That does it for the backend. Now we can move on to the frontend.

Frontend

First, start by creating a new react app by entering the following in the terminal.

yarn create react-app message-board-frontend

Next we will need to install react-actioncable-provider to connect to the rails ActionCable. Navigate to the newly created project and run the following in the terminal:

yarn add actioncable

Next we need to set up our index.js file. There really isn’t anything special here. We are really just calling the App component.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.Fragment>
    <App />
  </React.Fragment>,
  document.getElementById('root')
);

serviceWorker.unregister();

Now we need to update our App.js file to house our message board

import React from 'react';
import { ActionCable } from 'actioncable';

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      messages: []
    }
    this.cable = ActionCable.createConsumer('ws://localhost:3000/cable')
  }

  componentDidMount() {
    this.fetch
    this.createSubscription()
  };

  fetchMessages = () => {
    fetch('http://localhost:3000/messages')
      .then(res => res.json())
      .then(messages => this.setState({ messages: messages });
  }

  createSubscription = () => {
    this.cable.subscriptions.create(
      { channel: 'MessagesChannel' },
      { received: message => this.handleReceivedMessage(message) }
    )
  }

  mapMessages = () => {
    return this.state.messages.map((message, i) => 
      <li key={i}>{message.content}</li>)
  }

  handleReceivedMessage = message => {
    this.setState({ messages: [...this.state.messages, message] })
  }

  handleMessageSubmit = e => {
    e.preventDefault();
    const messageObj = {
      message: {
        content: e.target.message.value
      }
    }
    const fetchObj = {
      method: 'POST'
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(messageObj)
    }
    fetch('http://localhost:3000/messages', fetchObj)
    e.target.reset()
  }

  render() {
    return (
      <div className='App'>
        <ActionCable 
          channel={{ channel: 'MessagesChannel' }}
          onReceived={this.handleReceivedMessages}
        />
        <h2>Messages</h2>
        <ul>{this.mapMessages()}</ul>
        <form>
          <input name='message' type='text' />
          <input type='submit' value='Send message' />
        </form>
      </div>
    );
  }
}
export default App;

The above code works as following: First, a consumer is established in the constructor. Then, all messages are fetched from the server and a subscription is created for the MessagesChannel channel. With this subscription, on any received data, the handleReceivedMessage function will execute which will append the new message to the component state. On an updated state, the component will re-render with the new message displayed.

Conclusion

I hope this short blog post helps you set up your own websockets using Rails and ReactJS. Now you have the power to make astonishing applications with real-time updates!