Forem: Steven Dawn

How to Configure your New Rails API to Use PostgreSQL

Steven Dawn — Mon, 19 Sep 2022 04:07:13 +0000

Create a new Rails API and configure it to use PostgreSQL

Since learning Ruby, Ruby on Rails and PostgreSQL I recently learned that Rails will default to other SQL variants installed on my machine first like SQLite which I used in a recent project before moving on to PostgreSQL.

I'm sure I'm not the only one out there who didn't make sure that their Rails database wasn't configured to use Postgres automatically so I did some digging around to make this post to show you how to just that in 2 easy steps.

Step 1

Make your project folder and cd into it.

mkdir example-app
cd example-app

Step 2

Create the Rails backend with a PostgreSQL database using this command:

rails new my-example-app --api --database=postgresql

Bonus

After cding and running bundle install in your new rails folder you're free to set up things like git if you want your work all in one repo. You can set up your React frontend in a subfolder with:

npm install --prefix client

Now you will never have the issue of wondering if you're using anything other than PostgreSQL for your Rails app! However the real work of actually building the Rails app has just begun but you can pat yourself on the back for getting this task done.

A Break Down of Full-Stack Web Development

Steven Dawn — Mon, 29 Aug 2022 23:27:00 +0000

If you asked me to sum up Full-Stack Web Development in one picture, it would be this:

Full-Stack Development is someone who works with both the front end and back end of a web application. The front end is used for look and feel of the website while the back end is responsible for logic and infrastructure of the website.

This role is usually split between Front-End Developer and Back-End Developer. What are these things you ask?

A Front-End Developer is someone who:

Works on the look and feel of the application they're working on
Making sure requests are properly being sent to the backend

A Back-End Developer is someone who:

Creates and manages the database
Create responses that will be used for the front-end

As a Full-Stack developer, we will need to do a mix of both of these tasks whether to make sure the application we're working on is functional.

Here's an example of how an application we build would be handled:

Users visit our applications front-end, and will do some form of action, for example, try to log in or create an account.
When they hit submit to sign up, a POST request containing data from our sign up form on the front-end is sent from our front-end to our API endpoint in the back-end server that is running.
The back-end will receive the POST request at it's specific endpoint, and execute the action to create a new user in the database with the passed in data.
If everything goes well, then the user interacting with the front-end will be redirected to the login page to log in with their newly created account.

Some skills you would need to create a full-stack application

Of course these are not all the skills/languages you need but knowing some or at least one part of the full-stack would be awesome!

Front-End

HTML/CSS/JavaScript
- HTML serves as the structure of our site, CSS is used to control the presentation and JavaScript is used to control the behavior of the different elements of our website
How to make HTTP requests to our back-end
- This is how front-end devs interact with our back-end to display our data
Learn a Framework
- JavaScript frameworks like React, Angular or Next.js will take our web dev skills to the next level allowing us to easily build our applications to scale
- It is required that you have a solid grasp on JavaScript first before trying these frameworks out.
Wire-framing
- This basically means drawing your website out before even starting to code
- There are tools like Figma that we use to achieve this but using pen and paper as a start is perfectly fine too

Back-End

Learn a back-end language Ruby on Rails, Python or JavaScript with the Express.js framework
- This how we would write the back-end logic
Learn SQL
- This is how we would create/manage our database
- Any SQL is fine but I recommend starting with SQLite since I think its beginner-friendly compared to PostgreSQL but the latter is more common in the workplace
Data Structures and Algorithms
- Knowing how to efficiently manage, search and sort through our data is key to becoming a great back-end dev
Learn the MVC
- Knowing MVC (Model View Controller) patterns comes in handy when creating the logic in our back end that responds to HTTP requests, and dictates what logic should be executed upon receiving a request
Learn OOP
- OOP (Object Oriented Programming) is useful for us define our database models and allows for abstractions with concepts like Classes and Inheritance
- OOP can also be applied in JavaScript/the front-end

Going down the full-stack path is a lot of work since even understanding either end of development is difficult with their own rabbit-holes but not impossible. And even if you do not go down that path, a good Front-End developer has a decent understanding of the Back-End and vice versa and naturally a Full-Stack Dev will gravitate to one end over the other. Good luck and you got this!

Sources
FreeCodeCamp

Understanding Data Structures

Steven Dawn — Fri, 05 Aug 2022 20:49:00 +0000

Welcome to my post about understanding the basics of Data Structures!

Here, we'll go through a basic overview of the concepts you'll need to learn in order to begin mastering data structures.

Array

An array is simply a list of something surrounded by [] and can contain various data types.

The simplest data structure, the array serves as the foundation to the data structures we'll go over later in the blog. Here's an example of an array:

Shopping List: Chips, Steak, Broccoli, Milk, Eggs

let shoppingList = ["Chips", "Steak", "Broccoli", "Milk", "Eggs"]

There are no strict rules for adding elements in an array but there will be some for the other data structures we'll look at.

Queue

A queue similar to an array, it is a list but when adding or removing elements to a queue but it follows a "first in, first out" rule.

Essentially, the first element we add to the queue will also be the first element to be removed from the queue.

I like to think of Queues as the checkout conveyor belts at the grocery store. The first thing we put on the belt from our cart will be the first thing checked out by the clerk!

Stack

Also similar to an array and a counterpart to the queue, the difference between those data types and the Stack is that it follows a "first in, last out" rule. Meaning that the first item we added to the stack will be the last item removed from it.

I like to think of a stack as a stack of plates where the first plate you add is at the bottom where the last plate you add is at the top.

Linked List

Things get a little murky from here on out, starting with Linked Lists.

Linked Lists has an element (or a node) that has a variable in it where points to another element in memory. So instead of using an array to contain all the data, these elements connect to each other from their own pointer variable that relates them to one another.

Linked lists come in two flavors: singly linked or doubly linked.

Singly linked lists have a head element that points to the next element, to the next element and so on and so forth until reaching element that has a pointer set to NULL. Doubly linked lists means each element has a next and previous pointer to their respective next/previous elements.

Trees

Similar to Linked Lists, Trees are a data structure that has elements that point to each other in memory. However instead of having next/previous elements pointing to an element, Trees have a left/right child element. These children elements are what lead to the tree-like structure.

The most difficult data structure to understand but when properly implemented, can provide great performance and give you an edge in the interview process!

Conclusion

This post just scratched the surface of Data Structures but this should get you started on researching and eventually implementing these in your day-to-day work! There are more (and advanced) data structures out in the wild you'll come across on your developer journey. Good luck from here on out!

Sources
Geek for Geeks

Getting Started with React

Steven Dawn — Fri, 01 Jul 2022 20:57:23 +0000

So, you have just started to get the hang of JavaScript, HTML, and CSS but now you're wondering what the next logical step is in your Web Developer journey? The answer to that, is React.

React is a JavaScript library created and maintained by Meta.
It is easy to use, fast, and scalable. Developers use it to build complex web applications that can modify data without reloading the page.

We use React for building user interfaces and we split the different UI elements up into what React calls Components.

React's official documentation on components summarizes this nicely:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Really neat huh? Working in different components of your apps is way better than getting lost in a single index.html page in vanilla JavaScript.

Installation

Before getting into React, make sure you have Node installed on your machine. If you are running into issues installing Node, consult the official documentation.

What I recommend is to make sure you are on Node 16 because Node 17 has issues with several JS libraries. You can check in your Terminal with nvm list, the -> lets you know which one is the default.

nvm list

->     v16.13.0
        v17.0.1
         system
16 (-> v16.13.0)

If Node 16 is not the default version, you can install it and set it as the default with the following commands:

nvm install 16
nvm alias default 16
nvm use 16

After getting Node sorted, you can create a React project by running this code in your Terminal:

npx create-react-app my-example-app
cd my-example-app
npm start

After running create-react-app a new browser window will pop up at localhost:3000 with React app created!

Components

Opening my-example-app in your IDE of choice, you will see three directories: ./node_modules, ./public, and ./src we will only be writing our React code in ./src.

Opening ./src/App.js will show you the meat and potatoes of how that React Demo screen is rendering all that fancy stuff on localhost:3000 but for now, I'm going to remove everything from lines 7-20 to make things simple

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

Lets break this down:

We have our function App
We have a className that returns our heading Hello, world!

Pretty simple right? Now let's add a content component in our ./src by making sure the first letter of our component is always capitalized so React knows its a component rather than a regular JS file.

import React from "react";

function Content() {
  return (
      <div className="Content">
          <h1>This is our content!</h1>
          <img src="https://i.redd.it/9odfz0kwy2i21.jpg" alt="meme"/>
      </div>
  )
}

export default Content;

Now when we want to add this content component to our App.js we would do like so:

import Content from './Content';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
      <Content />
    </div>
  );
}

export default App;

Lets explain the things we added here:

import and export allows React to pull the code from Content.js and renders that data in our App.js
Because <Content /> is below our <h1> we told React that we want our Content component rendered below our <h1>

JSX

JSX (aka JavaScript XML) is the special language used to build our component's output. We can actually use JS, HTML and CSS in here! It looks a lot like HTML with some JS here and there but make no mistake JSX is actually closer to JS so here are a few key differences to take note of:

Self-closing tags must end with a slash (example: <img />
Methods and properties written in JSX must be done in camelCase just like regular JS
JS expressions can also be used in JSX! Heres an example:

const name = 'Steven'
const goodbye = <h1>Goodbye, {name}</h1>

Conclusion

This article covered a very basic introduction to React where we haven't even scratched the surface with things like State, Inverse Data Flow, and useEffect() but I hope this article helped you get acquainted with React and some of the first things you will encounter when you first open create-react-app and see why its the most popular frontend JS library.

Sources

React Docs
Components
JSX

Intro to Hoisting in JavaScript

Steven Dawn — Wed, 01 Jun 2022 12:49:42 +0000

When learning to program in JavaScript you were told by instructors, mentors, or a random person on StackOverflow that you want to avoid hoisting issues in your code by using const or let.

But you ask yourself, what the heck is hoisting and why do I need to avoid it? Well, this is the right place to be!

Hoisting is when the JavaScript engine moves variables and function declarations to the top of their respective scope before code execution.

Example of Hoisting variable declaration:

x = 6
var x;
console.log(x) 
// x would be equal to 6 with no errors thrown

Naturally, you would think this code would not work because you can't assign a variable and then have the declaration below that right?

Well, you could do just that with var because it will initialize variables before declaration, allowing JavaScript to hoist it to the top of the function and not throw any errors.

Example of Hoisting in function declaration:

dogBreed('Miniature Schnauzer')

function dogBreed(name) {
  console.log('My favorite dog breed is the ' + name + '!') 
}
// My favorite dog breed is the Miniature Schnauzer!

Although this code runs just fine, it is best practice to avoid invoking functions before declaring them for readability.

Mixing these two together can lead to very confusing code. Take this code snippet for example:

var dogBreed = "Pug";
var favDogBreed = function () {
  console.log("My favorite dog breed: " + dogBreed);
    var dogBreed = "Shih Tzu";
      console.log("Bob's favorite dog breed: " + dogBreed);
};

favDogBreed();
// Original favorite dog: undefined
// New favorite dog: Shih Tzu

Confusingly enough, JavaScript initialized the first dogBreed to undefined because of hoisting and then starts executing the function which is why we got this result.

Variables that are initialized in JavaScript are not hoisted though. Interestingly enough, the code snippet below prints out NaN:

console.log(x + y)
var x = 4
var y = 2
// Output is NaN

This happens because JavaScript is hoisting x and y but not their respective initializations = 4 and = 2 resulting in NaN because x and y are not numbers!

Thankfully in 2015, we got the ES6 revision of JavaScript and that introduced let and const which effectively outdates var.

Lets take another look favDogBreed but declare everything with let instead of var:

let dogBreed = "Pug";
let favDogBreed = function () {
  console.log("My favorite dog breed: " + dogBreed);
    let dogBreed = "Shih Tzu";
      console.log("Bob's favorite dog breed: " + dogBreed);
};

favDogBreed();
// This will throw a ReferenceError and not let this code run

All is now right in the world and the engineer will have to go and fix their confusing code.

However just because errors are thrown now, does not mean that hoisting is patched out of Javascript. It still occurs with variables declared with let and const but they are never initialized. Take this code snippet for example:

dogName = "Sparky";
const dogName
console.log(dogName)
// This code doesn't run

dogName = "Sparky";
let dogName
console.log(dogName)
// This results in a ReferenceError

What does this mean? For starters, hoisting is still happening with these variables declared with let and const but there are some differences.

const refuses run because of syntax error. Same thing happening with let, but JavaScript sees the variable and is aware of it, but JavaScript cannot use the variable until it has been properly declared.

When declared with let, our variable dogName is in this phenomenon called the temporal deadzone which yes, would be the sickest name for a band but is what a variable declared with let or const is in until JavaScript reaches and executes the line where the variable is declared.

The temporal deadzone does not apply to var because JavaScript initializes the variable to undefined when it is accessed before the declaration.

The best practices to avoid hoisting issues is to:

Declare variables and functions let and const where ever you can
Always declare variables at the beginning of each and every scope because this is how JavaScript and developers read code
Never ever use var

Congratulations! You now have a better idea of hoisting and how it works in JavaScript ES6. This (often overlooked) concept confuses developers both new and veterans alike and you have an edge in both understanding and avoiding hoisting related bugs in JavaScript!

Here are some additional resources on the topic:
W3Schools
MDN
JavaScript Docs