Forem: nickwarren47

LWC (Lightning Web Components) vs. React Components

nickwarren47 — Tue, 13 Dec 2022 04:46:04 +0000

I had an wonderful interview today and was asked about working with LWCs or "Lightning Web Components." I must admit, I had done some research on LWC but knew very little about them. So, I decided to change that and travel down the Salesforce-LWC rabbit hole. Let me show you what I found.

What is an LWC?
As stated before, an LWC is a "Lightning Web Component" through the Salesforce software suite. At first, I thought that an LWC may be another version of a React component. They do share some similarities but work differently. According to Salesforce's developer guide, an LWC is defined as a "...reusable custom HTML element with its own API." More specifically, an LWC must contain an HTML file, JavaScript file, and a metadata configuration file (note: the files must share the same name in order for the framework to associate them).

What Does an LWC Do?
Similarly to React components, LWCs control or dispatch DOM events by communicating between parent and child components. Salesforce makes it very easy to create custom events by using the CustomEvent() constructor. The CustomEvent() constructor serves a similar function to Ruby on Rails' "Generator" commands that allow you to build SQL tables (and other controllers, migrations, etc.) using the generator command. According to the Salesforce Developer manual, to dispatch the event in the LWC, you can use the method EventTarget.dispatchEvent(). Note, for ease of use, it's best practice to conform to the DOM event standard of not using uppercase letters, no spaces, and use underscores to separate words. Also note, the event names start with the string "on," so it's also best practice to not have your event start with the word "on." Let's see an example of a markup (our event is called "jump"):
<c-my-component onjump={handleJump}
In the code snippet above, this is an example of the code (or "markup") in the HTML code. As you can see, we are instructing our LWC to run our event called "jump" in the markup by using the "on" string.

Now, we've laid out the basic groundwork for the LWC, let's see what an LWC looks like in code for both the HTML and JS. To start, let's name our component "sprinter" and our component an image to the right of the screen. When the user clicks on the "Move Right" button, the parent component will listen for the event and move the image to the right...



<!-- sprinter.html -->
<template>
   <lightning-layout>
     <lightning-button label="Move Right" image-name="roadrunner" 
      onClick={moveRight}></lightning-button>
   </lightning-layout-item>
</template>

In the above code, it follows a similar format to JSX used in React where the entire HTML is housed in the (in React it's either a or <>). Note: again, when the user clicks on the "Move Right" button, the image moves to the right. Therefore, in the JS file, we need to develop the function to handle the event...



<!-- sprinter.js -->
import { LightningElement } from 'lwc';

export default class Sprinter extends LightningElement {
      moveRight(){
         this.dispatchEvent(new CustomEvent('right'));
      }
}

LWC vs. React Components
One of the really neat features (in my opinion) is that LWCs allow you to add components within the body of another component, this is called "composition." Let's compare this to React's components. In a React, you build each component by creating the .js file and then link the component by either importing/exporting the component to another component. Additionally, you can send info (in the form of "props") from the parent component to the child component and then import the child component into the parent component.

In comparison to the example presented in the previous section ("What Does an LWC Do?"), let's try to develop a similar component using React to compare (I'm using Tailwind CSS for the image formatting):



import React from 'react'

function Sprinter () {
    let img = null

    function initialPosition(){
       img.style.position = 'relative';
       img.style.right = '0px';
    }
    function moveRight(){
        img.style.right = parseInt(img.style.right) + 10 + 'px';
    }

return (
<div> 
   <button onClick={moveRight}> Move Image 
      <img 
        src="http://The_Road_Runner.png" 
        alt="Road Runner" 
        className="w-1/3 h-1/3"
      />
   </button> 
</div>
)
} 

export default Sprinter;

Note: I have not tested the above code, HOWEVER, I am using this to illustrate how React incorporates both the JS and "HTML" (for React it is JSX) into the same component. This is different from LWCs as they will require 2 separate files to house both the HTML and the JS. One similarity between LWCs and React components is their ability to import and export themselves. Notice how both incorporate the "import/export" keywords followed by the name of the component.

Conclusion
Admittedly, this blog is merely my first steps into the world of learning more about LWCs and Salesforce. There is still so much to cover on the topic but I thought by comparing it to my more well known framework, React, I could better connect the concepts. There will be more blogs to come on this subject.

Sources Cited:

Salesforce LWC User Guide

Salesforce Lightning Component Library

LWC Blog

Image

7 Tailwind CSS Tips I Wish I Knew Earlier

nickwarren47 — Sat, 29 Oct 2022 04:51:35 +0000

For anyone who sees Tailwind for the first time, it can look like ancient Greek when compared to other Frameworks BUT Tailwind's ability to allow for customization makes it an extremely powerful CSS UI kit. While I was learning to use Tailwind, I faced a steep learning curve and it took me awhile to learn a lot of the small details that make Tailwind so great. That being said, I want to share my 7 Tailwind CSS tips that I wish I knew when I first started learning about it.

1. Tailwind Acronyms and Their Meanings
What makes Tailwind so confusing is their use of various acronyms and what exactly they mean. Here is a quick list of various acronyms used by Tailwind to help you navigate:

"bg" = background (this is used to establish that the image, pattern, or color will serve as the background for whatever you are applying it to)
"gr" = gradient (used to change the intensity of color from one side to another)
"m" = margin (this is used to add space around an object/text/image/etc. in relation to the overall size of the window. Margins can have many sub variants like "my" (top and bottom margin), "mx" (left and right margin), "mt" (margin on top), "ml" (margin left), "mr" (margin right), "mb" (margin bottom)) - Note: when margin is used like this "m-4" the number at the end is the amount of pixels for the margin size. Also, since margins are used for relational spacing in the window, you can also use things like "mx-auto" to center an object in the window.
"p" = padding (unlike margin, padding is used for the space between objects on the window rather than their relation to spacing in the window. Just like margin, padding also uses the same sub variants like "py", "px", etc.)
"w" = width (used to size the width of an object). Note: Tailwind uses both pixels (up to 96) and fractions for sizes (ex: w-4/9). The use of fractions is much easier for changing screen sizes but note that there are only certain fractions that are accepted by Tailwind and you should consult their site.
"h" = height (used to size the height of an object). Note: same rules apply to height as they do width.
"col" = column (used for spacing objects into parallel vertical lines)
"tr" = top right
"br" = bottom right
"tl" = top left
"tr" = top right

2. How Does Applying Colors to Objects Work?
When applying a color, Tailwind will want you to specify 3 things:

where is it being applied to
what color do you want (you will have to see what types of colors are available on Tailwind's website)
what opacity/shade do you want applied to the color

An example of this will look like:
<div className="bg-blue-400 text-slate-600">Hello<div>

In the example above, I am telling Tailwind that I want the background to have a blue color with an opacity of 400 and the text to have a color of slate gray with an shade of 600. The higher shade number, the darker the color and the lower the number, the lighter the shade is.

3. There Is a Difference Between Tailwind and Tailwind React
This may seem strange but there truly is a difference using regular Tailwind and Tailwind React. One example of this comes from using "className" instead of "class" to specify features. Be careful to know what type and version of Tailwind you are using.

4. Other Frameworks Like Flowbite Can Simplify Using Tailwind
For those who may have used UI kits, like Semantic UI, that provide premade features to add to your React components - you will definitely want to add Flowbite to your imports. Flowbite has premade features that you can find the code and add it to your JSX. To install Flowbite, go to this link: install and to see the different components offered, go to this link: components. Note: you will also need to import Flowbite at the top of your component with the specification of the component you are using. For example:
import { Card, Carousel } from 'flowbite-react'

5. Centering Things in Tailwind Can Be Hard, Try These
I found centering objects with Tailwind to be a particularly tough objective. There are a few ways I found that will help you to center objects/text. For text, try this (sometimes the centering techniques for objects/images also work on text):
className="text-center"
For objects/images, try this:
className="flex items-center justify-center"
className="container mx-auto"
className="ml-auto mr-auto"

6. Using Grids, Columns, and Rows
Grids, columns, and rows are a great way to organize images/cards/objects on a React app. I usually use this command to help me achieve this:
className="grid grid-cols-3 gap-1 justify-center"
Let's explain what this code is doing, first we specify that we want to use a "grid". Then we tell Tailwind that we want to have 3 columns with "grid-cols-3". We use the "gap-1" to specify how much spacing we want between the objects in the grid. Finally, this last one is optional but it helps to center the objects "justify-center".

7. Font vs. Text What's the Difference?
This one can be confusing, text and font seem like they are the same thing, right? Well, let's see how they differ. In Tailwind, the font allows you to determine the type of font to use, the size of the font, it's smoothing, the weight, and the style (italic or not). The text, on the other hand, allows you to give the letters colors, decorate (underline, line through, etc.), overflow, indent, and alignment. The text gives the user the ability to also make changes on how the text flows around objects or images.

Conclusion
Tailwind truly is a remarkable UI kit and I hope that these tips will help to get you started on making some amazing apps.

React Weather App Made Easy!

nickwarren47 — Sat, 29 Oct 2022 03:11:39 +0000

When I was developing one of my travel apps, I wanted to give the user the ability to see the weather conditions at any dive site. After much thought, I decided to dive in (SCUBA dive pun intended). I will show you how to quickly develop a basic React weather app to add to any app you are making.

Getting Started With The API
When building an app like this, the best place to start is to find an API that will suite your needs. For this app, I wanted to find an API that was free and didn't have too many restrictions on the amount of fetches you could make to the API. I elected to use this API: OpenWeather. In OpenWeather's site, I signed up for free and created an account. After that was done, I went to their section titled "API" and then selected the "Current Weather Data."

In the "Current Weather Data" section, I then selected "Get API Key" from the "Free" data column. Note: the API key may take 24 hours to become activated, so be sure to plan accordingly if you need to deploy this app quickly.

After receiving your API key, now you will need to take a look at the API documentation for using the key in conjunction with the URL. I want to note that the code I am displaying is what I used to render the weather feature in my app. I highly recommend reading the API documentation as this may have changed after writing this blog. Also, for obvious reasons, I will be excluding the API key I used from this article. To retrieve data from the API, you will need to make some additions to the URL:
https://api.openweathermap.org/data/2.5/weather?q=${location}&units=<add unit type here>&appid=<add API key here>
You will notice in the code snippet above that you will need to add the unit type (either metric or imperial) and you will need to supply your API key. You will notice the "${location}", don't worry about this right now, we will come back to it in a little bit.

Adding Your Code To React
Now that you have everything you need from the API, it's time to add some code to VS. To start, if you haven't already, I would recommend creating a React app using the command:
npx create-react-app my-project
After first creating your app, then you will need to run:
npm install axios
After running this command, you will then have axios available to you for your app. Now, create a file in your project directory for the weather app (for mine, I just called it "Weather.js"). For simplicity, we will also just call our page "Weather.js". Now, on the "Weather.js" page, we will need to type in the following:

import React, { useState } from 'react'
import axios from 'axios'

function Weather(){
}

return(
<div>
</div>
)

export default Weather;

Now, let's set up our state variables and the weather API URL as constants:

import React, { useState } from 'react'
import axios from 'axios'

function Weather(){
    const [data,setData] = useState({})
    const [location, setLocation] = useState('')

    const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=imperial&appid=*******************`
}

return(
<div>
</div>
)

export default Weather;

Again, you will notice in the WeatherUrl const that I obscured the API key (be sure to copy and paste your own API key in after the "appid=") and I set units to "imperial". If you do not specify the units, the API will default to Kelvin temperature values. Also, note that I set the "data" state to an empty object and the location to an empty string. The data we will receive from the API will be in an object and the location will allow us to search by location when we enter a string data type.

In the next step, we will both fetch our data and set up our location search capabilities (we will call it "searchWeatherLocation"):

import React, { useState } from 'react'
import axios from 'axios'

function Weather(){
    const [data,setData] = useState({})
    const [location, setLocation] = useState('')

    const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&units=imperial&appid=*******************`

    const searchWeatherLocation = (event) => {
        if (event.key === 'Enter'){
            axios.get(weatherUrl).then((response) => {
                setData(response.data)
                console.log(response.data)
            })
            setLocation('')
        }
    }
}

return(
<div>
</div>
)

export default Weather;

This is why I added the "${location}" to the API to allow for the location to change depending on the user's inputs. Also, I highly recommend adding in the console.log(response.data) to test if the data is being received from the API. This will allow you to do 2 things:

Make sure that you are getting a connection to the API and that your API key, URL, and code are correct.
It allows you to see what data the API will give you and you can determine what weather data you want to display (in my case, I displayed the temp, feels like temp, humidity, weather description, and wind speed).

Time To Display Data
Once you are receiving the data from the API, you can now begin to display the results. For my app, I used Tailwind CSS as my UI kit framework and I will be showing the styling I used to display the data with Tailwind styling.

We have ignored the "return ()" section of our code but now we can add the following code:

return(
<div>
   <div className="flex items-center justify-center">
      <input 
         value={location}
         className=" bg-transparent rounded-lg border-white text-white font-bold text-2xl border-8 mb-20"
         onChange={event => setLocation(event.target.value)}
         onKeyPress={searchWeatherLocation}  
         placeholder="Enter City Name Here..."
         type="text"/>
    </div>
 <div className='flex items-center justify-center my-36'>
    <div className="top">
       <div className="temp">
          <h1 className="text-6xl text-white font-bold">Current Weather In:</h1>
       </div>
       <br/>
       <div className="location text-center">
          <p className="text-4xl text-white font-bold">{data.name </p>
       </div>
       <div className="temp text-center">
           {data.main ? <h1 className="text-8xl text-white font-bold">{data.main.temp.toFixed()}°F</h1> : null}
       </div>
       <div className="description text-center">
         {data.weather ?  <p className="text-3xl text-white font-bold">{data.weather[0].description}</p> : null}
       </div>
       <br/>
       <div className="flex items-center justify-center pl-11">
          <div className="feels text-center">
              {data.main ? <p className="text-3xl text-white font-bold pr-9">{data.main.feels_like.toFixed()}°F</p> : null}
              <p className="text-3xl text-white font-bold pr-9"> Feels Like</p>
  </div>
</div> 
</div>
)

Now, this may look like a jumble of code but let's break it down. The first part of the code is establishing the ability to search based on location with some Tailwind CSS styling mixed in (the "className" are used for Tailwind styling):

   <div className="flex items-center justify-center">
      <input 
         value={location}
         className=" bg-transparent rounded-lg border-white text-white font-bold text-2xl border-8 mb-20"
         onChange={event => setLocation(event.target.value)}
         onKeyPress={searchWeatherLocation}  
         placeholder="Enter City Name Here..."
         type="text"/>
    </div>

In the code above, the "onChange" is setting the "setLocation" setter function in our state to the input value and "onKeyPress" is telling the code to go run our "searchWeatherLocation" function.

As for the styling, we can also break that down too...

       <div className="temp">
          <h1 className="text-6xl text-white font-bold">Current Weather In:</h1>
       </div>

This section is just adding the text to say "Current Weather In:"

       <div className="location text-center">
          <p className="text-4xl text-white font-bold">{data.name </p>
       </div>

This section of code is grabbing the location name from the data and displaying the name.

       <div className="temp text-center">
           {data.main ? <h1 className="text-8xl text-white font-bold">{data.main.temp.toFixed()}°F</h1> : null}
       </div>

This section of code is grabbing the "main temp" from our data which we had to drill down into to let React know we want this specific value. I also added a ternary expression so that it will either display the temp if it is present or not display anything. This will be important for when our app is not in use and we haven't given it a location yet.

<div className="description text-center">
         {data.weather ?  <p className="text-3xl text-white font-bold">{data.weather[0].description}</p> : null}
       </div>
       <br/>
       <div className="flex items-center justify-center pl-11">
          <div className="feels text-center">
              {data.main ? <p className="text-3xl text-white font-bold pr-9">{data.main.feels_like.toFixed()}°F</p> : null}
              <p className="text-3xl text-white font-bold pr-9"> Feels Like</p>
  </div>

I lumped both of these sections of code together because they follow the same trend as the one I talked about above this code. Again, we are telling React what section of the data by clarifying that we want {data.main.feels_like} for example. This will depend on what data you want but for this blog, I just grabbed the location name, temp, feels like temp, humidity, description, and wind speed. There are many other data points that are provided by OpenWeather for you to use. For the other data points like humidity and wind speed, I followed the same code pattern as the code shown above.

The Finished Product
Congratulations, you now have a fully functional React Weather app!! For my app, I Tailwind CSS techniques to make a transparent background for displaying the weather.

Conclusion and Things to Look Out For
One thing I want to note is that when you are using an API key, it is very important to hide it if you are using an API that contains your personal info or you have to pay for. It is very important that you look into properly hiding your API key.

Reflection on My Flatiron School Software Engineering Bootcamp

nickwarren47 — Wed, 05 Oct 2022 16:23:05 +0000

"A journey of a thousand miles begins with a single step."
-Chinese Proverb

About 5 months ago, I had taken my first step in my training to become a Software Engineer. Undoubtedly, it was nerve racking to move into a field that I had some experience in but to fully commit was another animal all together. That being said, I have NEVER regretted that decision since. Becoming a Software Engineer has been one of the best decisions of my life and I am incredibly grateful for the training I received at Flatiron School's Software Engineering Bootcamp program. Now, I know what you might be thinking, "He's probably been paid by them to say all this." I want to assure you, I am not being paid or given anything by Flatiron School to write this. What I'm about to tell you is purely to share my experience and will hopefully help you in making a decision on whether to put your first foot forward on your journey.

My Experience
To start, I will fully admit that I thought the software engineering bootcamps were gimmicks and not worth peoples' time. Obviously, I was completely wrong in that thought. In my time at Flatiron School, I learned more than I ever thought possible. In the time I spent at Flatiron, I have gained so much experience in JavaScript, React, Rails, Ruby, Sinatra, Semantic UI, Tailwind CSS, Algorithms, Data Structures, JSON, HTML, and CSS. No joke, I learned, in depth, how to use these software languages/platforms/concepts. Not only did I learn about them, I use them all on a daily basis when making web applications. The staff are very professional and have years of experience to help teach you the concepts. Honestly, I was shocked by the collective knowledge of all of the staff and their willingness to teach you everything they know.

My Advice
I will not sugar coat it, Flatiron's program is extremely intense! I spent between 12-14 hours every day just coding and learning. Keep in mind, this also included weekends as well. The time commitment alone caused many to drop out. Not to mention the intensity of the program and the density of the content. There were days I wasn't sure if I was going to be able to make it through the program. There are many friend and family events that I had to miss so that I could study. For the entirety of the program, the program was my life. I know this may seem dramatic or inflated but anyone who made it through the program can attest to this fact.

What I said above is very intimidating and I don't blame you for being nervous after reading it. There is good news though, when you are in this program, it is meant to be a collective experience. What I mean by this is that the program is designed for you to rely on those around you. There were many late nights I spent working with those in my cohort to better understand concepts, prepare for code challenges, or to work on projects. Working with those around me helped me in so many ways. I have better experience working with others in software based projects, I have a better understanding of software concepts, and it helped me to know I wasn't alone in feeling overwhelmed at times. We all leaned on each other and that made the program so much more enjoyable and beneficial to my learning.

For those who may be starting a software engineering bootcamp program or considering joining one, this are some helpful tips that helped me in the program:

Rely on those around you! You are not alone in the program and you will find that your cohort mates will also be experiencing the same problems, struggles, and questions as you.
Don't be afraid to ask questions, even if you think it's a 'dumb' question. Most likely, someone else is wondering the same thing.
Go to study hall, make appointments with your TAs (teacher's assistants), ask questions to the TCs (technical coaches), go to social events. You will be amazed by the resources available to you and take advantage of the resources.
The internet is your best friend. If you don't understand something, your first reaction should be to look it up and see if you can find info about your issue.
Be prepared. Before going to lecture, read up on what is going to be talked about. Take notes on things you have questions on and don't be afraid to ask questions during lecture. Sometimes, the lecturers will have a worksheet that will ask questions to test your learning, these are very helpful and are a great resource.
Don't be afraid to express how you feel. Every Friday, Flatiron has a "Feelings Friday" where it is encouraged for you to talk about how you are feeling about the past week. It is very liberating to say how you are feeling and 9 times out of 10, those in your cohort feel the same exact way.
At home, make sure those around you know that you are in this program and ask for help, people will help you so that you have less to worry about and can focus on the program.
Practice as much as possible. Practice really does make perfect and the more practice you can get in during the program, the better off you will be. Labs are an excellent way to get practice on concepts and I highly recommend doing as many of them as you can.

Conclusion
I won't lie, taking the Software Engineering Bootcamp at Flatiron School was one of the hardest things I have ever done in my life. However, I also believe this to be one of the most rewarding experiences in my life. I know that bootcamp programs are very difficult but as the saying goes, "nothing worth having comes easily."

Sources Cited:
Cover Photo

Encryption, Authentication, and Authorization in Ruby on Rails

nickwarren47 — Wed, 14 Sep 2022 14:14:01 +0000

Have you ever been to a website and been denied access for not inputting the correct username or password? If not, well welcome back from North Korea because this web protection is seen unanimously across the internet. It is the first line of defense for a majority of web applications to prevent malicious users from uploading corrupted data, changing attributes on the site, or just helping to monitor traffic in and out of a web app. The question then becomes, how does this actually work in code? Well, we can look at the backend framework of Ruby on Rails to see how authorization capabilities are built into the code.

Description of Encryption
Before we see how Ruby on Rails allows us to authorize users in code, it would be helpful for us to first take a look at an encryption gem called "BCrypt". In Rails, a username and password are stored in a session hash in the database. This works just fine for functionality purposes but if a person is able to compromise the database, they will be able to see everyone's username and password and can use them for nefarious purposes. To prevent this, we need to encrypt the username and password so that an attacker won't be able to decode them and use them. To do this, we can create a hash function to handle our inputs and reduce them into indistinguishable code. For example:

def basic_hash(string)
  input.bytes.reduce(:+)
end

In the code above, the hash function takes in a string and outputs the sum of the bytes from the string. This is a very basic means of encryption but has one flaw. What if we input a name of "Nick" and "Nhcl"? Both inputs would allow us to log in because the byte size of "h" is one less than "i" and the size of "l" is one higher than "k". Therefore, both inputs will work. Obviously, this posses a serious security risk as there are many string varieties we can use to get into the account. So what can we use to fix this? Well, Ruby has many gems (pre-programmed code segments) that we can use to add specific features to our code. One of these gems is BCrypt. BCrypt is a Ruby Gem what is a called a "cryptographic hash" meaning that it is designed to be incredibly difficult for an attacker to decipher the hash even with a given output in mind. For anyone who may be interested in learning more about the BCrypt Gem/would like to download it, there is great documentation of the gem here:

BCrypt Gem Open Source Documentation

The idea of BCrypt is that it will be extremely time consuming and labor intensive for an attacker to decipher the password and username hash. However, attackers are relentless and if they use thing called a "rainbow table." Basically a rainbow table is a password cracking method where hackers use a database of millions of leaked hash passwords to compare the hash produced by BCrypt (or other encryption software) to those in the table. This is a very labor and time intensive process but it can be successful in cracking the password from the hash. However, there is another method to add further complexity to the hashed password and that is a process called "salting." Salting adds a further layer of complexity to the hash by adding a "salt" which is a random string of code to the end of the password BEFORE it is hashed. Therefore, the rainbow table's effectiveness is greatly reduced as the salt provides more randomized code to the hash. BCrypt incorporates salting into its encryption, making it a very powerful tool for protecting passwords and sensitive data.

Authentication in Rails

Now that we've taken a small dive into encryption, let's see how we use it and other features to allow us to authenticate users in our Rails app. Authentication is the process of determining if someone is who they say they are. For example, if you go onto a website and enter a username and password in the signup page, you will thereby need to consistently provide the same username and password each time to verify that it is indeed you. With the constant threats of hackers compromising passwords, other authentication methods are being used such as 2-factor, biometric, CAPTCHA, and token authentications. For the purposes of this article, we will only focus on password authentication in Rails. To start authentication in Rails (in addition to uploading the BCrypt Rails gem), we need to first create some custom routes:

#in config/routes.rb 
  get "/me", to: "users#show"
  post "/signup", to: "users#create"
  post "/login", to: "sessions#create"
  delete "/logout", to: "sessions#destroy"

These routes allow us to help the user to signup, login, logout, and to see the current user. You may have noticed that the login uses a POST action (to create the login) and logout incorporates a DELETE action. The reason for the create and delete actions is that the user, when logging on, creates a sessions hash which uses cookies to keep track of the interactions between the user and the server. Once the user logs out, the session hash is thereby destroyed along with the cookies that were used in the hash. We will need to define the actions in our various controllers (we will need a user_controller and a sessions_controller file).

Note: If you would like to user a Rails generator to produce the controller files mentioned above, you can run:
rails g controller Users --no-test-framework
rails g controller Sessions --no-test-framework

Let's take a look at first setting up the signup action in the user_controller.rb file:

# in app/controllers/users_controller.rb 
class UsersController < ApplicationController 

    def create
        user = User.create!(user_params)
        session[:user_id] = user.id
        render json: user, status: :created
    end

    def show
        user = User.find_by(id: params[:user_id])
        if user 
          render json: user, status: 202 
        else 
          render json: {errors: user.errors.full_messages}, 
          status: 422
        end
    end

    private

    def user_params 
        params.permit(:username, :name, :email, :password)
    end

Note: status code: 202 = accepted, status code: 422 = unprocessable entity
In the code above, we first used the "create" action method to set up a user account that included the "username", "name", "email", and "password," (note: these were created using the "user_params" in the private method at the bottom. We additionally set up a "show" action method to allow a user to find their information based on their "user_id." Note: the "user_id" is not visible to the client but is used by Rails to find the user.

Now let's take a look at a the sessions_controller.rb file to see how a login/logout session are created for the user.

# in app/controllers/sessions_controller.rb 
class SessionsController < ApplicationController 

    def create 
        user = User.find_by(username: params[:username])
        if user&.authenticate(params[:password])
            session[:user_id] = user.id 
            render json: user, status: 201 
        else 
            render json: { error: "Invalid username or password" 
            }, status: 401 
        end 
    end 

    def destroy 
        session.delete :user_id 
        head :no_content 
    end 
end

Note: status code: 201 = created, status code: 401 = unauthorized
In the code above, we set up the code so that if a user is authenticated, they will have access to the session that was created. If they are not authenticated, they will get an error message. Additionally, the "destroy" action method deletes the session based on the "user_id" and will return back a status of "no_content."

It may look simple but this code is extremely useful for creating the user authentication in our Rails app. Also, keep in mind, this is only for the backend of our app, the frontend also handles some of the logic for when a user is authenticated and what pages they can and can not access.

Authorization in Rails
Another feature we can add to our Rails app is authorization. Authorization is the process of giving certain users access to specific resources. Let's think of an example; let's say you are on a web app where there is a "premium" feature. The app developers want people to be able to see certain content for free so the user can determine whether or not they want to purchase the premium feature. And if you decide that you want to purchase the premium feature, the app developer must then authorize you to have access to the features in the premium section. Another example might be giving someone administrative access to an app so they can change specific code/features that the rest of the public shouldn't have access to.

Let's see how we will implement this in code. The first place to start coding for this will be in our application_controller.rb file. We will want to create a method that allows us to determine whether or not a user is authorized.

#in app/controllers/application_controller.rb
class ApplicationController < ActionController::API 

  before_action :authorize 

  private 

  def authorize 
    @current_user = User.find_by(id: session[:user_id])
    render json: {errors: ["Not authorized"]}, status: 
    :unauthorized unless @current_user
  end

In the code above, you will notice that there is a "before_action :authorize" code. This code is telling our code to make sure the authorization method is run before performing any other action method. In the "authorize" method, the code is basically saying to find the "current_user" based on their ID in the session controller. If that ID is not found, then an error will be rendered unless the current user has been found. Now, you may be wondering, why are we handling the authorization in the application_controller.rb file and not the user_controller.rb or session_controller.rb files? If you look at the previous examples in the authentication section, you may notice how both include a "...<ApplicationController" in the class. This is telling Rails that the "user_controller" or "session_controller" classes will inherit code from the application_controller.rb file, thereby allowing those child controllers access to code we placed in the parent controller (in this case, the "application_controller"). This will be important for the next code we need to implement.

For each of our methods in both the sessions_controller.rb and the user_controller.rb files, we need to instruct our code which methods require authorization and which ones don't. For example, let's look at our sessions_controller.rb file:

# in app/controllers/sessions_controller.rb 
class SessionsController < ApplicationController 

    skip_before-action :authorize, only: :create

    def create 
        user = User.find_by(username: params[:username])
        if user&.authenticate(params[:password])
            session[:user_id] = user.id 
            render json: user, status: 201 
        else 
            render json: { error: "Invalid username or password" 
            }, status: 401 
        end 
    end 

    def destroy 
        session.delete :user_id 
        head :no_content 
    end 
end

You will notice that we added this line of code: "skip_before-action :authorize, only: :create." This is instructing the code to not require the user to be authorized when they sign in. The user only needs to be authorized when they log out of the session. This is a useful application for determining what sections of the code our user can and cannot access without having the proper permissions.

That's it, we have successfully built out the authentication and authorization in the backend of our app. That being said, there is a setup for the front end but that is an article for another time.

Conclusion
The ability to authorize and authenticate a user is a very valuable tool for web app security. It will inevitably make your app much more user friendly and give you further control over the app.

Sources Links

Salting and Hashing
Ruby Documents on Hashing
Rainbow Tables Explained
Rails Authorization
Cover Photo
Rails Authentication
Rails Authentication
Rails Authentication and Authorization

SQL - Foundation of Databases

nickwarren47 — Sun, 21 Aug 2022 01:40:00 +0000

Every great coding language has evolved from another language that allows it to grow and gain the greatness that it has today. Many great modern day coding languages like React, Swift, Kotlin, Sinatra, Ruby, Python, etc. have risen from other foundational languages like Vanilla JavaScript, C++, Fortran, BASIC, and of course, SQL. These foundational coding languages set the scene for the development of newer languages that allow for more functionality, user comfort, cross-language compatibility, and so much more. SQL has led to the development of numerous database apps that use SQL either directly or indirectly. As directly coding with SQL may be slowly become phased out by other more user friendly applications, its value in database construction can not be understated. To fully appreciate the depth to which SQL has influenced the development of databases globally, let's take a look at its inner workings and functionality.

A Brief History of SQL
In June 1970, Dr. E.F. Codd published the paper "A Relational Model of Data for Large Shared Data Banks in the Association of Computer Machinery journal. Dr. Codd is credited for creating the definitive model for relational database management systems. After Dr. Codd published his findings, IBM developed the coding language Structured English Query Language (SEQUEL or SQL for short). After SQL's development, it has been the long standing relational database management language. From this language, many databases, applications, and coding languages have been developed.

SQL Keywords
One important thing to note when using SQL are the "keywords." The keywords allow us to tell SQL exactly what we need it to do. For example, if we want SQL to update an existing row, we would use the "UPDATE" keyword. There are many keywords and for a full list, please see the "SQL Keywords Citation" in the "Works Cited" section of this article. Here are a few keywords to give you an idea of what there is:

CREATE DATABASE (produces a new database)
CREATE TABLE (produces a new data table)
DELETE (deletes a row from a table)
DROP COLUMN (deletes a column in a table)
JOIN (it joins together two or more tables)
SELECT (selects data from a database/table)
UPDATE (it updates an existing row in the table)

SQL in Code
Keep in mind that SQL is centered around a database. SQL may not be the code that makes a website look "pretty" but it most certainly serves as the backbone to support the database features available on the website. Let's take a look first at the data types accepted by SQL:

Null: This represents "no value" (ex: null)
Text: Any alphanumeric character used to represent text (ex: hello)
Integer: A whole number value (ex: 4,5)
Real: A number value that includes a decimal (ex: 2.45, 3.4).
Blob: Generally used for holding binary data.

These data types are important for adding data to database table. Lets take a look at an example:

Let's say that the United Federation of Planets has requested our help in transferring their old spreadsheet table into a database table in SQL. In our example, we have this table of data we want to add to SQL:

Using VS Code, let's develop our SQL database table using the SQLite extension and add this command into our terminal:
$ sqlite3 federation_database.db

Now, let's create our table in the SQLite prompt:
Note: when we add the table, we need to include the name of the column, the data type (in call capital letters), and we need to specify the id as an integer and as the primary key so that the table can be connected to other tables.

CREATE TABLE alien_species (
  id INTEGER PRIMARY KEY,
  name TEXT,
  home_planet TEXT,
  federation_member TEXT, 
  light_years_from_earth REAL
)

From here, SQLite will create the table but it will not populate it with data. To do that, we need to use this SQL command to add an individual line in our database table:
INSERT INTO federation_database (name, home_planet, federation_member, light_years_from_earth) VALUES ("Humans", "Earth", "Yes", 0.0);

That's a lot of code! And keep in mind that that is only for just one line of code, what if we need to add more lines? Let's see how that will look:

INSERT INTO federation_database (name, home_planet, federation_member, light_years_from_earth) VALUES ("Humans", "Earth", "Yes", 0.0);
INSERT INTO federation_database (name, home_planet, federation_member, light_years_from_earth) VALUES ("Vulcans", "Vulcan", "Yes", 16.5);
INSERT INTO federation_database (name, home_planet, federation_member, light_years_from_earth) VALUES ("Romulans", "Romulus", "No", 1.3);
INSERT INTO federation_database (name, home_planet, federation_member, light_years_from_earth) VALUES ("Klingons", "Kronos", "Yes", 90.1);
...

You can start to see why other coding languages/apps have been developed to handle this monotonous coding. Keep in mind, those other coding languages/apps don't replace SQL but instead use SQL coding in the background while making the coding for the user easier. Hence SQL still serves as the backbone for the application even without the developer's knowledge.

Now that we've added the data, let's take a look at using CRUD on the data. We've already seen the "Create" side of CRUD, but what about the Reading, Updating, and Deleting the inputs?

SQL CRUD: Reading
Let's start with "Reading" by using Select.

In our example, let's say we want to look up a species by their name and want to get other data like their homeworld, we would need to use the following command to grab the data:
SELECT id, name, home_planet, FROM federation_database;

We will get this output:

1|Humans|Earth
2|Vulcans|Vulcan
3|Romulans|Romulus
4|Klingons|Kronos
5|Borg|Null
6|Cardassians|Cardassia

Note: you don't have to add the id number but it helps for demonstration purposes to include it

A faster way to retrieve all the data would be to use the "*" selector to retrieve all the data in our database table:
SELECT * FROM federation_database;
Outputs:

1|Humans|Earth|Yes|0.0
2|Vulcans|Vulcan|Yes|16.5
3|Romulans|Romulus|No|1.3
4|Klingons|Kronos|Yes|90.1
5|Borg|Null|No|1000.1
6|Cardassians|Cardassia|No|15.2

Another handy tool is to use the "WHERE" keyword to find a specific value. For example:

example 1: SELECT * FROM federation_database WHERE name="Klingons"; Outputs this:

4|Klingons|Kronos|Yes|90.1

example 2: SELECT * FROM federation_database WHERE light_years_from_earth > 80;

Outputs this:

4|Klingons|Kronos|Yes|90.1
5|Borg|Null|No|1000.1

SQL CRUD: Updating
From our example, let's say we messed up on the location of the homeworld of the Borg. We can change this by using:

UPDATE federation_database SET home_planet="Null" WHERE home_planet="Borg Alpha";
Outputs this:

1|Borg|Borg Alpha|No|1000.1

So instead of the Borg homeworld being "Null," we now changed it to "Borg Alpha."

SQL CRUD: Deleting
Finally, we can delete data from the database. In our example, let's say the Romulan homeworld was destroyed by a supernova, we will want to remove them from the database. To do so, we would use this code:
DELETE FROM federation_database WHERE id = 3;
Outputs this:

1|Humans|Earth|Yes|0.0
2|Vulcans|Vulcan|Yes|16.5
4|Klingons|Kronos|Yes|90.1
5|Borg|Null|No|1000.1
6|Cardassians|Cardassia|No|15.2

Conclusion
SQL, in our modern day coding, doesn't cut it as an efficient coding language but its ability to create and organize databases has become the cornerstone for most (if not all) electronic databases.

Discussion Questions

What other coding languages use SQL under the hood?
How do other coding languages make it easier to use SQL?

Sources Cited
Cover Photo

SQL History

SQL Keywords Citation

SQL Creating Tables and Adding Inputs

React Components - The Building Blocks of Software Success

nickwarren47 — Sat, 30 Jul 2022 21:52:12 +0000

On first glance, React components look like some esoteric construction that only the most experienced software engineers could understand or even use. However, this couldn't be further from the truth. React components are revolutionary in their ability to compartmentalize various code and share it to construct more complex software applications. Let's take a deeper look at this amazing application.

What are React Components?
In a nutshell, React components are independent, reusable code snippets that allow us, as the coder, to piece together to create more complex code. Conceptually, components work in the same way as JavaScript functions as they accept various inputs and then produce JSX elements that dictate how the code should be displayed on the DOM. A way to think about components is that they are the bricks, planks of wood, pipes, etc. that come together to construct a building. In our analogy, each material used serves a different purpose but when they are combined, they each contribute to the proper function of the building. Components are no different, they each have their own functionality but when combined, they produce a unique web application that functions the way it is intended.

Enough analogies and memes about components, let's see some code.

React Components Example Code

function Home(){
    return (
        <div>
            <h1> Welcome to Components in React! </h1>
            <h2> 
                This is an example of one component. We
                will first see how this displays on the
                DOM and then we will see how to properly import
                and export this in the next example. 
            </h2>
        </div>
    )
}

Let's closely examine our code example above:

First, we declared our function "Home"
Next, we declared our return by using JavaScript XML (JSX) which "tells" the app what we want to be displayed on the DOM and how we want it to be laid out. Here's how the code will be displayed on our app:

The next step to using components is to compartmentalize them into parent and child components.

Parent and Child Components
Understanding the relation between parent and child components is what allows us to properly share "props" ("properties") or data between individual components. To start, let's look at our code example below:

function App(){
  return(
    <div>
      <Home />
      <About />
    </div>
  )
}

In our example above, we have a new component called "App" (our parent component) that includes both "Home" and "About" components which are our child components. To clarify, the "App" component does not have the "Home" and "About" components on the same file, the "Home" and "About" have their own separate files that are imported onto the "App" component file. Let's see this import and export of components in our code:

import Home from "./Home"
import About from "./About"
function App(){
  return(
    <div>
      <Home />
      <About />
    </div>
  )
}

export default App;

In our example above, you will notice that we are telling our "App" file to grab the "Home" and "About" components from their respective files as seen in "./Home" and "./About". Additionally, we exported our "App" component so that it can be used by other components as well. Note: In the files for "Home" and "About," these components are also exported in the same way as "App". One final thing we need to discuss are the use of "props" in sending data from parent component to child component.

Props
Props allow us to send data and functions from parent to child components. This is helpful as it allows us to further connect components but by also having them still be compartmentalized. Before we see an example of this, there are two very important rules that apply to sending props and the child-parent component relation:

Props can ONLY be sent from parent to child component
Child components can only import into parent components, parent components can NOT import into child components.

Note: the 2nd rule is important when we are sending props from parent to child component as the child component MUST be imported into the parent in order for the props to be successfully sent to the child component.
Prop example (parent component passing props to child):

import Home from "./Home"
import About from "./About"
function App(){

  return(
    <div>
      <Home articleText="Hello, I'm a prop that is a string" number={2}/>
      <About />
    </div>
  )
}

export default App;

In our example, the parent component("App") sent the props named "articleText" and "number" to the child component("Home"). These props will then be used by the child component to either be displayed, used in a function, etc. Now, let's see how the child component received the props from the parent component...

function Home(props){
  return(
    <div>
      {props.articleText} {props.number}
    </div>
  )
}

export default Home;

In our example code, the child component took in the props and then displayed the props in the

tag. Note, the prop can also be "destructured" meaning that we can declare it as a parameter in the function and thereby shorten the declaration of it in the child component function. For example:

//parent component:
import Home from "./Home"
import About from "./About"
function App(){
const article = "Hello, I'm a prop that is a string"
const number = 2
  return(
    <div>
      <Home articleText={article} numberValue={number}/>
      <About />
    </div>
  )
}

//child component:
export default App;

function Home({articleText, numberValue}){
  return(
    <div>
      {article} {number}
    </div>
  )
}

export default Home;

In example above, we sent our props from parent to child but in the child component, we destructured the prop names so that instead of declaring the props as "props.articleText", we could declare it simply as "article" as that is the value of the prop.

Conclusion
We merely just touched on the basics of React components. The possibilities of what you can do with React components are almost endless. Regardless, now you have the tools and building blocks to create amazing apps - time to get building.

Discussion Questions

What are some other React components that exist?
Can you think of any examples, in apps that you use, where they may incorporate React components?

Sources Cited and Helpful Links
W3School - Components

ReactJS - Components and Props

W3Schools - React

ReactJS - JSX

W3Schools - React JSX

Cover Photo

Communicating with a JSON Server with GET, POST, DELETE, and PATCH Requests...It's Easier Than You Think

nickwarren47 — Sun, 10 Jul 2022 21:21:31 +0000

If you are a just beginning to get your feet wet with coding, learning about server requests such as GET, POST, PATCH, etc. can feel more like being thrown into the open ocean, rather than just getting your feet wet. Don't panic, the communication between you (the client/browser) and the server is actually very interesting and easy to understand once you get some practice with it. So what do you say, shall we take a swim in the JSON ocean together?

What is a server and JSON anyway?
Any time you open a website, an app, or even that cute puppy video on YouTube, you are establishing a communication between your browser and the server. This is what is referred to as a "GET" request (we'll learn more about these later on). The GET request is, just like the name suggests, getting or fetching the server based on the URL that was entered. Once the browser contacts the server, the server then delivers a response by displaying the website you requested. This is what is known as the "Request-Response cycle," meaning that for any request you make (GET, PATCH, DELETE, etc.) you will receive a response from the server. This communication between the browser and the server is run through "JavaScript Object Notation" or JSON for short. The JSON is what establishes the virtual handshake between your browser and the server. JSON provides a lightweight format for sending information between the browser and server. Another way to think about it is that JSON is the language that the server speaks, while your browser speaks in JavaScript. In order for what you write in JavaScript to convert to JSON, you will need to convert the information into a string using this command:
JSON.stringify()
This command will convert the information you are sending in the body of the request, into strings. Additionally, the server will send you JSON data in a string format and you can convert it back into JavaScript data by using this command:
JSON.parse()
This may seem a little esoteric but we will see how these commands are used when we run our various requests below.

How does a URL line get me to a website?
This is a bit off topic but it is important to understand the constituent parts of a URL and how they guide our browser to the correct website. A URL is primarily composed of three separate parts: the protocol, the domain name, and the path. Let's take a look at an example by using the W3School website URL on JSON as an example:
https://www.w3schools.com/js/js_json_intro.asp
In this example, the "https" is the protocol meaning this is the format in which we want to send our request through Hyper Text Transfer Protocol (HTTP). The "www.w3schools.com" is the domain name. The domain name is basically just the name of the website. For example, Google's domain name is "google.com." Finally, the portion of the URL with "/js/js_json_intro.asp" is the path. This is what will get us to the exact webpage we are looking for, in this case it is the JSON intro on the W3School website. To recap, the various parts of the URL are just methods for refining the search of the specific website page we wish to access. Our HTTP provides the method that we want to access the website, the domain name is the general name of the website where our page is located, and the path directs our browser to the exact page we are interested in.

Let's talk about GET, POST, PATCH ,and DELETE Requests
Now, I want to clarify that there are other request methods but the primary methods all fall under the acronym of "CRUD" or "Create, Return, Update, and Delete." CRUD refers to the methods in which we can interact with the server. For example, let's say you want to fill out a form on a website, you will first need to access the website by using a "return/GET" request. Once you are on the website, you will then "create/POST" by filling out the form and submitting it. Then, once the form is submitted, let's say you misspelled something, you can use the "update/PATCH" request on the same form which will change the form on the server as well. Now, let's also say you change your mind and want to get rid of the form, you can finally use the "delete/DELETE" request to remove the file from the server. One more thing to note are the fetch() and .then() parts of the code. The fetch() is the part of the command that makes the connection to the website server. In the fetch() you will add the URL but also note that the URL needs to be incased in '' (quotation marks) in order to designate the information as a string for the server's JSON to recognize it. The .then() directs the JavaScript in what it should do with the data it sends and receives. We will see more examples of the .then() below.

Let's see the CRUD in code...
For a "create" request, we will use a "GET" request. This request would look like this in code:

fetch('http://localHost:3000/file')
.then(res => res.json())
.then(json => displayData(json))

function displayData() => {...

In the code example above, for demonstration purposes, I used a locally hosted URL that directs to a db.json file on my VS code. Now, depending on the server, you may or may not have access to where you can make changes to the server data. This won't affect a "GET" request, but it will for the other requests we will look in to. The first .then() in the request is instructing the request to send the response(res) to be converted into JSON script. The second .then() is instructing the JavaScript code to place the JSON data directly into our function which was labeled "displayData". Note, the function name can be anything you want it to be but it is important for the name to be consistent in both the second .then() and with the name of your function below. This consistency ensures that the data we receive from the server is directed to the exact part of our code we need it to go to.

For the "POST" request, we have to make some additions to our code:

fetch('http://localHost:3000/file', {
  method: 'POST',
  headers: {
      'Content-Type':'application/json'
  }
  body: JSON.stringify(functionAbove)
  })
  .then(res => res.json())
  .then(json => consol.log(json))

For the POST method, we have to first specify that we are using the POST request method. For any request besides "GET", you must specify what type of request you are making. Next, we added the "header." The header allows us dictate the type of data we will be sending and receiving. Finally, we have the "body". The "body" instructs our JavaScript to convert the data that is housed in the body of our command (in this case it's in the "functionAbove" which is hypothetically above our request) to be converted into strings to be sent to the server. Note, for POST requests, this is destructive meaning that it will make changes directly into the server data array without cloning a new data array. One last thing to note, because you are not getting data from the server but rather sending data to the server, you will not get any response back. That's why, for the second .then() there is a consol.log() to confirm that that data we sent was indeed posted.

For PATCH and DELETE requests, we will lump these requests together as they don't differ much from a POST request except that with the PATCH, we are telling the server to make a change to a specific part of our server array data. This will make a change in an element of the data array instead of adding an element to the data array. For this, we will need to specify where in our data array we need to make the change. To do this, we will need to use the code:
${}
With a DELETE request, we are then telling the server to remove a section from our data array on the server. Again, both will contain a console.log() in the second .then() to help us ensure that our data was indeed edited/deleted from the server.

PATCH Request:

function changeArray(dataChange){
fetch(`http://localHost:3000/file/${dataChange.name}`, {
  method: 'PATCH',
  headers: {
      'Content-Type':'application/json'
  }
  body: JSON.stringify(functionAbove)
  })
  .then(res => res.json())
  .then(json => consol.log(json))
}

For the example above, you will note that we added the ${dataChange.name}
to the end of our URL. This is important because we are telling the request where exactly we wish to change our data array. Since our data, hypothetically, on the server is also an object, we can use the "dot"(.) notation to specify where in the object we wish to change (in this case, the "name").

DELETE Request:

function deleteData(removeData){
fetch(`http://localHost:3000/file/${removeData.name}`, {
  method: 'DELETE',
  headers: {
      'Content-Type':'application/json'
  }
  body: JSON.stringify(functionAbove)
  })
  .then(res => res.json())
  .then(json => displayData(json))
}

For the example above, just like in the "PATCH" request, you will note that we added the ${removeData.name}
to the end of our URL. This is important because we are telling the request where exactly we wish to delete part of our data array. Since our data, hypothetically, on the server is also an object, we can use the "dot"(.) notation to specify where in the object we wish to delete.

Conclusion
The CRUD-JSON requests provide an excellent tool for managing the data housed within a server. Now that you have swam through JSON and the various requests, you will feel more comfortable the next time you have to take the plunge into these various browser-server communications.

Sources cited:
-Cover image courtesy of: Taylor Vick, Unsplash
-JSON info/domain name info: https://www.w3schools.com/js/js_json_intro.asp,
https://www.cloudflare.com/learning/dns/glossary/what-is-a-domain-name/