Image for post
Image for post

Did you know that NASA has a treasure trove of imagery and data available in publicly accessible APIs? Access is simple — they have a limited use demo key, or you can sign up for an account and get your own API key. In this blog, I’ll use the demo key for the examples.

This is a guide on how to use axios to fetch data from an API — I’ll use the Mars Rover Photos, handle errors, and then manipulate the DOM to display results.

Step 1 — HTML Form & Accessing Elements

I want to let a user pick a date, then then use that date to display a photo from the Curiosity rover. On each element, include a unique ID (or classname for multiple elements). …


Image for post
Image for post

This is a sample problem for depth first search. For a quick read on what that is, and for a basic understanding of graphs, read this.

Problem Statement:

Given a graph, a starting point (src), and a destination (dest), return the path to go from src to dest, or an empty array if no path exists.

Given the following edge list:

let smallFlightMap = [
["ATL", "DC"],
["DC", "NYC"],
["ATL", "DAL"],
["DAL", "DC"]
]

First, write a function to convert to an adjacency list:

const toAdjacencyList = function(edgeList) {
const adjacencyList = {};
for (let edge of edgeList) {
const src = edge[0];
const dest =…


Image for post
Image for post

What is a graph? Graphs are used to represents relationships and hierarchies and are composed of nodes and edges.

What is a node? A node represents the objects in the graph. If Medium is the graph, users and posts are the objects.

What is an edge? An edge represents the connections between the objects. Nodes are connected by edges. If I post a blog on medium, there is an edge between me and my post. There is also an edge between me and another user I follow.

Graphs can be directed or undirected.

Directed A graph where an edge between nodes goes in one direction. On Instagram, John can follow Jane without Jane following John. …


Image for post
Image for post

This is a sample problem for breadth first search. For a quick read on what that is, and for a basic understanding of graphs, read this.

Problem Statement: There are n cities connected by m flights. Each fight starts from city u and arrives at city v.

Now given all the cities and flights, together with starting city src and the destination dst, the task is to find the fewest number of flights needed to get from src to dst. If there is no such route, output -1, if src and dst are the same, output 0.

For the given…


Image for post
Image for post

A quick overview of relational (SQL) and non-relational (NoSQL) databases, what they are, how they differ, and use cases for each.

At a very high level, relational databases like MySQL, PostgreSQL, and SQLite3 represent and store data in tables and rows. Non-relational databases like MongoDB represent data in collections of JSON documents.

Relational Databases and SQL

A relational database consists of one or more tables, with columns and rows to organize data. Each column represents a specific type of data or attribute, and each row is an entry. The mapping of tables and field types is called a schema.

The schema must be clearly defined before entries can be made, and is somewhat rigid and difficult to change. It works well with uniform, structured data. …


Image for post
Image for post

This is a quick guide on how to set up a search bar. I’ll be using a list of the 50 states, rendered as an unordered list as an example. However, you can use this same search for anything or any part of an application by changing the variables and tags.


Image for post
Image for post

Before I dive in, let me give you a bit of background on how “Pet Roulette!” was set up going into deployment. First, I had two separate repositories. Secondly, I had created my Rails API with a Postgres database from the get-go, which is highly advisable if you do plan to deploy your app. Lastly, I used create-react-app to start my React application.

A few notes on why I chose to use Netlify over Heroku. One — deploying a dual repo to Heroku was significantly more complicated. Two, Heroku is a great free hosting solution for a Rails app, but it does go to ‘sleep’ after 30 minutes of inactivity, and takes a full 30 seconds to reboot. …


Image for post
Image for post

A quick guide on how to render a form for creating a resource that is submitted dynamically.

This post assumes you’ve already serialized your resource with AMS, if you haven’t gotten that far — read this.

For my app, it was a longer form, so I didn’t want to display the newly created resource on the same page — but wanted to either show error messages, or a success message with the name of the new resource and a link to the full show page.

Below is the first iteration of code to make this work:

$(function () {
$('form').submit(function(event) {
//prevent form from submitting the default way
event.preventDefault();
// Create variable for div to display error messages, or JSON object data
const formMessages = $('#form-messages');
// Add class to div depending on if form submission is successful
$(formMessages).removeClass('alert-success')
$(formMessages).removeClass('alert-danger')
// Add unordered list to inner html of div
$(formMessages).html("<ul></ul>")
// Serialize form values
const values = $(this).serialize();
// Post values
const posting = $.post('/wines', values);
posting.done(function(data) {
const wine = data;
if (!data.errors) {
//If no errors, show formMessages div, add 'alert-success' as class
// add JSON data to inner HTML
$(formMessages).addClass('alert-success');
$(formMessages).show();
document.querySelector('#form-messages').innerHTML+=`<p>${wine.producer} - ${wine.wine_name} has been added to your cellar - click <a class="alert-link" href="/wines/${wine.id}">here</a> to view. </p>`
$("#producer").text(wine["producer"]);
$("#wineName").text(wine["wine_name"]);
//resets the form
$('form')[0].reset();
} else {
// Show formMessages div, add 'alert-danger' as class and show full error message(s)
$(formMessages).addClass('alert-danger');
$(formMessages).show();
data.errors.forEach(function(error){
document.querySelector('#form-messages').innerHTML+=`<p>${error}</p>` …


Image for post
Image for post

How to serialize files uploaded with Active Storage to JSON, then upload the files via an AJAX request.

This is a short guide for Rails applications that utilize Active Storage to handle file uploads. I won’t detail that process — there’s already a recent and well-written blog on the topic that also outlines how to store the images with GCS or AWS and deploy to Heroku.

The first piece is relatively straightforward. I used Active Model to serialize data. rails g wine serializer generates a directory for serializers, and creates a serializer for the wine class.

class WineSerializer < ActiveModel::Serializerend

Rachel Hawa

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store