DEV Community: Elijah Merrell

NoSQL databases

Elijah Merrell — Mon, 22 Apr 2019 17:56:39 +0000

I have always used relational databases for my web development and GIS projects. Most of us should be familiar with relational databases. Relational databases store data in tables that are made up of rows and columns where each data entry is referred to as a record. Each entry into the database is given a unique identifier called a primary key and different tables can be related to one another by referencing the primary key of a record from another table (foreign key). The composition of relational databases makes them an excellent choice for storing and querying large amounts of interconnected data using Structured Query Language (SQL).

Although relational databases have long been the standard in data storage, there's a (not so) new kid on the block that has gained a lot of popularity in recent years; the non-relational database. Non-relational databases, often referred to as NoSQL databases, ditch the use of tables and instead stores data in a variety of structures. Although they have been around since the 1960's, they haven't had widespread use until recent years.

The reason for the rise in popularity is that NoSQL databases are a faster and more scalable solution for storing large amounts of data when compared to relational databases. Large companies like Amazon, Facebook, and Google are utilizing these databases to increase the speed and performance of their immense data stores.

Several technology stacks, including the MERN and MEAN stacks utilize NoSQL databases for housing data. With all the buzz around non-relational databases, I wanted to compare them to relational databases and find a good use case for a future project.

What on Earth is a non-relational database?

At its core, a non-relational database is a database that stores data outside of the typical tabular format. There are several types of non-relational databases that differ in the way they structure stored data. Non-relational databases aren't associated with a schema and thus do not enforce restrictions on data types and data structuring.

The increasing popularity of NoSQL databases is partially due to the fact that they can be scaled much more easily than relational databases. There are two main ways to scale; up or out. Scaling up means you are increasing the power of your hardware to handle increasing data storage and manipulation. Scaling out is the practice of distributing data storage across more servers, thereby spreading out the data into smaller chunks.

Relational databases can be difficult to scale due to the joins and relationships between tables. Relational databases are much more efficient when all of the tables associated with that database exist on a single server. With non-relational databases, data is self-contained and does not need to interact with other pieces of data so it is easier to distribute across many systems.

There are numerous companies that produce NoSQL database products including MongoDB, Oracle NoSQL, DynamoDB, etc. NoSQL databases rely on several data models that excel in different use cases.

Document Data Model

One of the most common "styles" of non-relational databases is the document storage model. Data stored in a document is often stored in JSON or a similar data structure. Document databases are useful because the data is already formatted in a JSON-like structure that interacts well with programming languages. Document databases are excellent for storing user information or data pertaining to content management systems. One of the most popular document database platforms is MongoDB.

Source: http://www.alachisoft.com/nosdb/document-databases.html

Graph Database Model

Graph databases are used to store relationships and are often used on social media platforms where large-scale user relationships exist (i.e. Twitter). Graph databases connect data through the use of nodes and edges. A node is a an entity (i.e. a user) that can potentially be connected to other nodes. Nodes are connected through edges, which can store properties related to the relationship. Edges also have directionality. For example, a user may choose to follow another user, but that followed user may not follow them back. This would be a unidirectional relationship. Retrieving relationship data from graph databases can be very fast because graph databases can ignore unrelated data during searches. Some common graph-based database systems include Amazon Neptune, Neo4j, and OrientDB.

Source: https://neo4j.com/blog/why-graph-databases-are-the-future/

Key-Value Database Model

The key-value pair data model is very similar to the document model. Key-value databases resemble a dictionary, where each value is given a unique key identifier. A variety of data can be stored as the values of this data model, including integers, strings, arrays, and objects. An example of a key-value NoSQL database could be a database of customers, where each customer ID maps to an object of customer information:

C1: { name: John Doe,
phone: 800-444-5555,
email: john@doe.com,
address: 1600 Pennsylvania Ave
}
C2: { name: Jane Doe,
phone: 800-666-7777,
email: jane@doe.com,
address: 1600 Pennsylvania Ave
}

Some common key-value database systems include Amazon's DynamoDB, Oracle NoSQL, and Riak KV. Key-value systems are useful when handling a high number of read and write requests at scale. They are often used to manage store session data in large web applications as well as storing shopping carts and e-commerce information.

Making sense of React components

Elijah Merrell — Mon, 08 Apr 2019 15:24:04 +0000

React, the JavaScript library that we all know and love (maybe?), revolves around the use of interconnected components that change through user interaction.

The React component architecture allows the developer to break up a user interface into small, standalone units that are easier to manipulate and debug. The React library provides developers with several options for writing components, and I often find it difficult to decide which component format to use for a given block of code. In order to demystify the variety of components in React, I'll attempt to compare and contrast the structure of each type and describe their best use case.

Being that React is just a library written in JavaScript, it's possible to write React components as plain old JavaScript functions. At their most basic level, React components are functions that accept properties (props) as a parameter and use or manipulate these props to render something to the DOM. If you’re comfortable writing JavaScript functions, you shouldn’t have trouble writing a functional React component.

Although React should feel mostly familiar to JS programmers, there is one curveball. React uses JSX (JavaScript XML), which goes against the typical separation JS and XML. When writing code with JSX, components include a render function that returns HTML-like element(s) to the page:

Although JSX may look like regular HTML, it’s important to remember that they are not technically the same. Now that we’ve had a brief introduction to React components, let’s take a look at the different ways we can write them.

Functional Components

Functional components are the most basic type of component in React. They are often referred to as “stateless” components or presentational components. You are unable to define state within functional components as there is no context for the JS this keyword in a function.

Functional components are an efficient way to render content to the page when defining state is not necessary. They are also advantageous and quicker to write if a component doesn’t require much logic. Here's an example of a functional component that renders "Hello, World" to the screen:

Another thing to note about functional components in React is that unlike their class counterparts, you cannot use React’s lifecycle methods. Lifecycle methods let you control the way your components are rendered or removed from the page by specifying a series of events for each individual component.

Class Components

React gives you the ability to write components using ES6 classes. React class components have more functionality that functional components and are often referred to as “stateful” or container components. What is state you might ask? State is a JavaScript object that defines the characteristics and behavior of a class component. State is defined within the class constructor and can be used to determine what information is displayed or changed as a user interacts with the page. State is isolated to the component where it is defined but can be passed to downstream components as props.

In the following example, I was building a page to display photos and information for various pigs. I used state in the Pig Container class to store a list of pig objects, and then rendered a Pig component for each pig. This highlights the usefulness of React classes as "container components":

Although class components often have state, they don’t have to. Thus, it’s possible for a React class component to act as either a stateful or stateless component. We can take our functional component example from earlier and easily change it to a stateless class component:

Conclusion

I had trouble figuring out when to use a class component and when to use a functional component. In the end, it really comes down to what you need your component to do. If your component will use state and have complex logic, use a class component. If you just need a bit of code to render something to the page, the functional component will be your best choice. I hope this helps clear up some of the confusion surrounding React components!

Using the Mapbox GL API to add maps to your next project

Elijah Merrell — Mon, 25 Mar 2019 14:25:21 +0000

A map is a powerful tool that can be used to convey geographic information on your next web application. There are many options in the developer's toolbox when choosing a mapping API, but Mapbox is by far my favorite. I come from a geographic information science background (GIS) and have spent countless hours tweaking map designs in Adobe Illustrator. Adobe gives users tons of freedom when it comes to tweaking map colors, labels, and fonts, but most mapping API's lack this functionality. This is where Mapbox is different. Mapbox provides the developer with a seemingly endless number of options when it comes to customizing the design and functionality of maps. From adjusting base layers to selecting a custom color palette, there are many ways to design the perfect maps for your needs.

So how does Mapbox do it? The answer is that Mapbox is (mostly) built on data from Open Street Map, the open source mapping project where volunteers contribute to a public repository of geographic data. Mapbox takes this data and transforms it into layers. Each layer is a visual representation of its source data, and the style of each layer can be adjusted by editing a JSON document that contains the style for the map. The JSON file can be used to fine-tune the look of your maps.

A quick Mapbox tutorial

By this point, you probably get the point of my post: I think Mapbox is awesome. It has a lot of great features and the sky is the limit in terms of what you can do with the Mapbox API. But how do you actually use it? It turns out that with a few simple lines of HTML, CSS and JavaScript, you can have a map on your page in no time.

Initial Setup

The first step in getting Mapbox up and running is to setup a developer account. Mapbox allows you 50,000 map views per month without needing to pay (nice!). Once you have reached 50,000 views in a month, it costs $0.50 per 1,000 additional views. Once you have setup an account, Mapbox will provide you with an access token that you'll use to access the API. Mapbox gives you a few options to get a map up and running. The first is using the Mapbox content delivery network (CDN), while the second is using NPM to bundle modules. For the sake of this tutorial, I'll be using the CDN method.

Getting a map on the page

To use the Mapbox CDN, you simply paste the following two lines of code into the head of your html document:

Once you have this code in the correct spot, you can initialize a new map with a few easy steps. The first is to create a div that will house your map and give it a unique id. For this example, I called the div 'map-container'. Once your div is setup, you will need to write a few lines of JavaScript to create a new map. You can do this either in a separate .js file or within a script tag in your html document. To initialize a new map, set a variable and assign it a new instance of the Mapbox GL map class. Note that you will also need your Mapbox access token within this script:

Now that your code is in place, you can open up the html page in your browser and there should be a map! You can now interact with the map on the page by panning and zooming. Here is the map that we initialized with the code from above. At this point, it's a zoomed-out map of the world that isn't really conveying any interesting information. Let's make a few changes and get it to display something a bit more intriguing.

Map customization

We have successfully gotten a map to display on our page. Let's make a few adjustments to get it displaying something a bit more interesting. For this example, let's have our map show the location of the Flatiron School in Seattle. I was able to get the coordinates for Flatiron's location using a free online geocoder that accepts an address and returns latitude and longitude coordinates. We can add the coordinates to map and adjust the zoom level to reflect the location on the page.

To center the map on Flatiron's location, I set a variable 'flatiron' equal to an array of the coordinates in the form of [longitude,latitude] using decimal degrees. I then set the 'center' property of the map to use this variable, and set a zoom property to a zoom level of 15. I then created both a popup variable and a marker variable and set these variables to instances of the Mapbox Popup and Marker classes that again used the flatiron coordinates variable.

To put the finishing touches on the map, I linked a css stylesheet to the html page and styled the map marker using a few lines of css. I was able to use Flatiron School's logo as the marker and enable a popup window when the marker is clicked. You can use the popup window to display any information you'd like. In this case, I added a title and a quick blurb. That wasn't so bad was it? Our finished product was easy to create and highlights the easy customization and setup provided by the Mapbox GL API. Now let's sit back and admire our work:

This tutorial really just scratches the surface of Mapbox's capabilities. I highly recommend checking out their documentation to see all that is possible with this technology. The following link will take you to the Mapbox GL API docs: https://docs.mapbox.com/mapbox-gl-js/api/. Now get out there and start making some maps!

Imposter syndrome is real

Elijah Merrell — Mon, 18 Mar 2019 04:21:34 +0000

I am a software engineering student at the Flatiron School and my cohort recently reached our halfway point in the course. It is incredible how much I have been able to learn over the past seven weeks. I have had the opportunity to learn two languages in Ruby and JavaScript, and apply my new skills by building projects with my amazing classmates. You could say I was riding a high heading into this past weekend; everything seemed to be clicking and I was feeling very confident about my new abilities. I decided to sign up for a tech-for-good hackathon in Seattle as I thought it would be an excellent opportunity to meet other members of my local developer community and potentially contribute to a fulfilling project. What happened next was that imposter syndrome hit me like a freight train.

I arrived bright and early on Saturday morning, eager to give this "hackathon" thing a go. There were about eight different groups that presented their projects in the morning and discussed how attendees could contribute their talents. I was intrigued by a sidewalk mapping project that sought to use Open Street Map to map sidewalks around the city in an effort to better-document walkability for people with disabilities. I volunteered to work with this group and was joined by several very talented developers. While discussing the project, it was decided that I would dive into the PostGreSQL database tables and attempt to brainstorm how we could alter the schema to fit the new goals of the project. The code base we were working with was written in Python and was using Flask as a web framework. I had very little experience with all of these technologies and I was immediately in over my head.

While the dread and anxiety started to build, I began searching through the code base in an effort to locate information on the database schema. Being trained in Rails, I was used to relying on the schema.rb file that was generated each time database migrations were run. I was struggling to find a similar file in the Flask directories and began Googling like a mad man to figure it out. Meanwhile, a teammate who had set up shop next to me was flying through code at a speed I had never seen. He was furiously switching between several terminal windows on his Linux machine to work on getting the program running on his local environment. I watched in awe as he flew through terminal commands and Python snippets all while quickly troubleshooting any errors that arose.

As the day continued on, it was more of the same. Someone on my team would ask me if I had ever used technology "x" or if I knew how to do some programming task "y", and my answer was always the same: no. I was amazed at the patience and kindness my team members exhibited throughout all my no's. I never felt judged for not knowing and was often met with helpful explanations or words of encouragement. Even with all the encouraging words and helpful coaching, it was hard not to feel out of place. Realizing how much I had to learn was exciting, frightening, and stressful all at the same time.

Although I came into the hackathon feeling like I had a firm grasp on (some) programming concepts, I now felt like I knew nothing. I felt like a complete fake, imposter, scam, whatever you want to call it. It was as though I had suddenly been exposed to a vast ocean of knowledge that was beyond me. My ignorance of what I didn't know had faded away and I suddenly realized that I was still very much at the start of my coding journey.

Now that I have had my first real taste of imposter syndrome, where do I go from here? The answer is that I must keep learning and progressing. Although my time at Flatiron school will conclude in a mere seven weeks, I know that coding will be a lifelong learning endeavor, and this excites me. I can't wait to see what I'm able to build as I continue to pick up new skills and learn new technologies. Imposter syndrome is inevitable, so I suggesting taking it head on and using it as a learning experience. I wish everyone the best of luck on your coding journeys!

Authentication, Authorization, and OAuth

Elijah Merrell — Mon, 11 Mar 2019 14:26:49 +0000

Internet users put a lot of faith in companies and services when they allow them to use and store their sensitive data. Each time a user creates a new account online, they are required to create a new username and password and may be asked for other personal information. I, for example, have numerous online bank accounts and I am not too keen on the idea of this information getting into the wrong hands. It's imperative that we as developers prioritize the safety and security of user data when developing new applications. Authentication and authorization can be thought of as the first step in safe handling of user data. User authentication and authorization is a means of confirming the identify of users and ensuring they are accessing the correct resources while online:

Authentication

When I go online to check my bank balance, the bank's website will prompt me to enter my login credentials. The bank will use this information with its authentication server to verify my identity. I don't want any schmuck off the street to imitate me online and have access to my account. Authentication is typically handled using a unique username and password. When I first create my account at the bank, I will be prompted to choose a username that hasn't already been chosen by another user at that bank. Think of the potential headaches if multiple users had an identical username. Once I've come up with the perfect username, I must choose a password that follows the site's password guidelines (note: please don't use password1234 for every website you visit). The bank will most likely ask for additional sensitive information to verify the user's identity, including an address or social security number. Once the bank has gathered this information, it will confirm the user's identity and allow them to access accounts through a secure login.

Authorization

Now that I have created an account (and trusted an online bank with my precious information), I can use my authentication credentials to access my bank account. After struggling to remember my password, I'm finally logged in. Great! The bank has authenticated my identity and knows who I am. What happens now? The answer is that authorization takes the baton from authentication. In the same way that we don't want anyone to access our bank accounts, we don't want other authenticated users on the bank's site to be able to access our private information. Authorization is used to inhibit users from accessing resources and information that does not pertain to them. A user shouldn't be able to login and see their neighbor's bank account balance (unless their neighbor was kind enough to offer up their credentials). Authorization applies restrictions to the application that ensure the server is responding with resources that only I am allowed to see and use.

What is OAuth?

OAuth stands for open authorization and it is a standardized protocol that developers can use to allow the sharing of private user data without sharing usernames and passwords across web applications and services. OAuth 2.0 was released in 2012 and is not backwards compatible with the original OAuth. OAuth 2.0 relies on the passing of request tokens and access tokens that authenticate the identity of the user and allow an application to access resources on behalf of that user. OAuth 2.0 provides a workflow that developers can follow to integrate third-party authentication into their applications. The general flow of OAuth is as follows:

The app asks for the user's permission to access a service on the user's behalf (i.e. their Google Account).
With the user's consent, the app now asks Google for a request token. Google will respond with a request token that gets passed back to the User.
The user will be prompted to login to their Google account, which will authorize the request token and send the authorized request token back to the app.
The app will now send the authorized request token to Google and say, "Hey look, this user has been authenticated and I can access resources on their behalf"
Finally, Google will respond with an authorization token that grants the app permission to use the client's resources. This authorization token is passed back and forth between the app and Google each time the app needs to access a resource.

In order to emphasize the utility of OAuth, let's continue with our bank example. Say I have just downloaded a new app that lets me keep all of my personal finance information in one place. This app allows me to track my monthly spending by connecting all of my bank and credit card accounts and accessing their balances and statements. Although I may trust this finance app, it's probably not the best idea to give them the credentials for all of my banks and other accounts. If I were to provide this app with the usernames and passwords for each of my bank accounts, they are now sitting on the company's servers somewhere waiting to be exploited. A better option would be to have my bank authorize the application and allow it to view my balances and transactions while never handing over my credentials. The beauty of OAuth is that it reduces the need for users to create accounts at every site they visit and greatly cuts down on the amount of personal information floating around on the internet.

I hope that my brief introduction to authentication, authorization, and OAuth clears up some of the confusion surrounding these topics. I look forward to implementing OAuth into my future applications as it is a great tool to protect users and improve user satisfaction!

Debugging with Pry: A Beginner's Guide

Elijah Merrell — Mon, 25 Feb 2019 04:10:55 +0000

While working through the pre-bootcamp coursework provided by Flatiron School, I constantly found myself struggling to check and debug return values within iterations and nested data structures. The Learn.co curriculum introduced a tool called Pry, but I had trouble understanding how to implement it in my code. It wasn't until a difficult lab by the name of Hashketball that things finally clicked. After struggling through the lab for far too long, I finally forced myself to read through Pry's documentation and my ability to write and debug hash iterations immediately improved.

If you ever find yourself struggling to build out a Ruby program, Pry could prove to be an invaluable tool in your arsenal. Pry is a powerful tool that Ruby developers can use to debug programs and push past hurdles. Like other Ruby gems, the Pry gem must be required in your environment settings or specific ruby file in order to access its functionality. Additionally, there are several Pry plugins, including pry-doc and pry-byebug, that expand the gem's features and capabilities. You can think of these plugins as separate gems that must be required in your gemfile.

Once you have configured your program with the Pry gem, it's time to pry open your code and experience the joy that is debugging with Pry. Pry is packed full of features but the following examples highlight what I believe to be the most useful.

REPL (Read, Evaluate, Print, Loop)

Pry can replace Ruby's integrated IRB shell and builds on IRB's REPL functionality with some additional features. Both IRB and Pry allow you to execute Ruby commands in the terminal and receive immediate results in the terminal. Having REPL functionality in your terminal is a very useful tool that allows you to quickly test Ruby code without running your entire program. Let's say, for example, that you want to iterate over an array and see what values are returned. You can simply enter the array, use an iterator on that array, and check your results:

Notice that while both IRB and Pry returned the same values for this simple iteration, the way Pry prints to the terminal looks a bit different. One of Pry's advantages over the standard IRB is its use of syntax highlighting. Other features that give Pry the edge over IRB include:

Tab completion
Debugging tools
Ability to view documentation

Runtime invocation

Perhaps the most useful feature of Pry is its ability stop a program's runtime in its tracks. The Ruby programmer can invoke the pry console during runtime by inserting the line 'binding.pry' wherever they would like to stop the program. When the interpreter hits the binding.pry, Pry will open a REPL session in the console, allowing you to test variables, return values, iterations, and more.

The following is an example of the utility of Pry when it comes to dissecting nested data structures in your programs. I recently contributed to the development of a dev job search CLI that relied on a database of job openings seeded from the GitHub Jobs API. The API data was structured in a JSON hash and our database tables were seeded with values from these nested hashes. The following image shows how we populated the companies table for this project:

When populating a database table, it's vital that records going into the table are created with the correct data! How might we check our iteration values to ensure that everything is working as expected? The answer is Pry. Inserting a binding.pry near the end of the "populating companies" block allows us investigate return values by stopping the runtime and entering a REPL session:

Once the binding.pry is inserted into the block, the code must be executed again in order to open the Pry console. When the Pry console opens in our terminal, we are within the block that is populating the companies database table and we are now able to test variables and return values:

Now that we have pried open the "populate companies" block, it's time to check some values! When 'job' is inserted into the pry console, a hash for a single job opening is printed to the screen. The job hash has several keys including type, url, company, company_url, location, title, etc. To make sure the correct values are being sent to the database, we can enter the following commands into the Pry terminal:

Once we have determined that our iteration is functioning as expected, the binding.pry can be removed an our table will populate upon the next execution of the program!

Documentation and source code browsing

Let's face it, being a developer means you will be relying heavily on Google. I often turn to the web to research Ruby methods and scour documentation to ensure that I am correctly structuring syntax. What if I told you that Pry offers a plugin that allows you to browse documentation right in your console? Welcome to the pry-doc gem. Pry-doc enables you to read Ruby documentation within your current Pry console session. Now for an example. Let's say I can't remember how the .find method works on a hash. I can enter the following command into the console, and voilà! The Pry console prints the documentation for that method in the terminal:

Hooray! Now you can access useful documentation in your terminal without relying on Google!

Useful Pry Commands

pry -Opens the Pry console in your terminal
binding.pry -Stops runtime and opens Pry console
exit -Exits current loop
exit! -Exits Pry console
whereami -Prints current location within program
show-doc -Displays documentation for a class or class method(s)
history -Prints history of Pry commands to the terminal
ls -Prints the variables and methods in the current scope of the program
help -Prints the current list of available Pry commands

Pry drastically improved my ability to debug Ruby programs and is the tool that I always turn to when I'm stuck. I hope that you find these tips and tricks useful, and remember, whenever you're in the weeds, put a binding.pry in it!