DEV Community: Desiree Lerma

What I Learned This Week: Next.js and API Keys

Desiree Lerma — Sat, 03 Jul 2021 21:14:30 +0000

If you've read my previous blogs then you're aware that I have been learning Next.js recently as I tackle my next project, WatchNext. If you have not read my previous blogs, a quick update for you: I kickstarted a new project to keep the gears in my brain spinning as I search for my first engineering role. During the kickoff process, I quickly encountered an obstacle (I wanted this projet to be frontend only). That obstacle being, how to properly hide my keys on a frontend application without them accidentally being exposed to a client after deployment. Nicholas Papadakis recommended using Next.js and thus my journey to learn it began.

Now that we're caught up let's get to the point of this blog. API KEYS!

The main tidbit of information that I've learned while exploring Next.js is how to keep my secret keys an actual secret. Next.js offers you the ability to create an API directory within your Pages directory. This API directory allows you to create API endpoints for your applications. You can then access these endpoints to get data from your external API as needed. The best thing... everything in it will be private! Including your ENV variables. Seeing as this was my first major obstacle this is a GREAT bonus for me and my current needs.

Using ENV variables is a tad different than how you would implement them on a backend application. To utilize them in Next.js, you will create a file in the highest level of your application and title it .env.local (don't forget to ensure it is included in your .gitignore file so you don't accidentally make it public!). In this file is where you will store your ENV variable like you would normally do in the backend. Now, to access it, you would interpolate it where it's needed and call process.env.ENV_VAR_NAME

/// In .env.local
API_SECRET=PUT_SECRET_HERE

// Whichever file you need to call the ENV variable, within the API directory
const URL = 'https://myapi.org/info?api_key=${process.env.API_SECRET}'

VIOLA!! You have accessed your external API without exposing your precious keys or creating a backend.

If what you've read so far about Next.js sounds like it can be useful to you, I would highly recommend using Next.js for your next project or even migrating a current project that you have to utilize the benefits that Next.js has to offer.
Just a reminder, I am still learning and growing. I am open to any tips and tricks you may have as well as open to answering any questions you may have to the best of my ability. Happy learning!

Resources:

https://nextjs.org/docs/basic-features/environment-variables

What I Learned This Week: Next.js (The Basics and Benefits for WatchNext)

Desiree Lerma — Sun, 27 Jun 2021 22:43:50 +0000

Recently, Next.js was suggested to me to be used for my next project, WatchNext. I wanted my this project to be a frontend only application, but quickly hit a road block when trying to figure out how to utilize my API while keeping my keys hidden. Then, in walks the Next.js framework.

Next.js is a React framework that is quite intuitive. It helps abstract out the complexity you would face if you built out a React only application. There are many reasons a person would wish to use Next.js, but my reasons are as follows:

Zero Configuration
File System Routing
API Routes
Fast Refresh

Kickstarting a Next.js app is a piece of cake and their documentation is quite easy to read (they also include quizzes to help guide you through it). To create a Next.js app run npx create-next-app or yarn create next-app in your terminal followed by the name of your application. The previous commands will set everything up for you automatically. Afterwards, it will return a few commands you may use to do things such as start the server. The commands that you will see are as follows:

npm run dev
  Starts the development server.
npm run build
  Builds the app for production.
npm start
  Runs the built app in production mode.

To me the file system routing makes creating an application so incredibly simple. A Next.js application has a pages directory. Any files added within the pages directory automatically become an accessible route. You may wonder, "What do I name my index/root page?" Well my friend, in the pages directory you simply title that file index. This will give you the root page that you're used to that looks like www.mywebapp.com/ or www.mywebapp.com/movies. Nested routes are easy to create as well. "How?" you may ask. Create a folder in the pages directory and viola! A nested route appears. Now, what if you want your link to be more dynamic? In the pages directory you will use bracket syntax (pages/[username]/settings.js) which will allow you to match parameters in your routes. This also makes linking between pages easier! You will need to import the React component Link to allow for client-side transitions. With Link imported you'll be able to set href equal to the desired page path.

<Link href="/movies">
<Link href="/">

To utilize API routes, create an api folder within your pages directory of your application. Any file within our API folder will be treated as an endpoint instead of a page. Within our specific file inside our API folder, we will need to export our function and have it receive req(instance of http.IncomingMessage) and res(instance of http.ServerResponse) parameters. The request method is always GET, so you will need to tell your function when/if you need it to process a POST, PATCH or DELETE request by setting your request method to your specified method (i.e. req.method === 'PATCH'). According to the documentation, if you're like me and you're using an existing API you "do not need to forward calls through an API Route." Other options are masking the URL of an external service or using environment variables on the server.

The Next.js framework also gives us a fast refresh and it is exactly what you think it is! Per documentation, fast refresh will depend on the file. If you are editing a file that is imported by other files "outside the React tree" fast refresh becomes a full reload. You will get fast refresh if you are editing a file that only exports React components. Also, if you're editing a file with exports that are not React components, a re-run of that file and the ones that import it will occur. If a file only exports React components, it will only update the code within that specific file and then re-render the component.

As we can see, Next.js has many benefits. The ones I've listed are particularly beneficial to me for my current project. Feel free to further explore the documentation to learn about the other benefits it can provide to you and your app. By no means am I an expert in Next.js, I am still learning and will continue to write as I learn more and dive deeper. Happy coding!

References:

Next.js Documentation

What I Learned This Week: Hiding Keys in React.js (Or Not)

Desiree Lerma — Sun, 20 Jun 2021 06:17:30 +0000

This week I continued with mapping out my WatchNext project that I wrote about last week. I knew I wanted to create (or at least attempt to) a frontend only application to cement my current knowledge as well as learn more about React.js. Well, I quickly came across a bit of an obstacle. The API I plan on using requires a key to access the data. Now, I know in backend development you could simply create a .env file and add it to your .gitignore to hide any secrets or keys you don't want revealed to the user. (Incase, you're wondering what .gitignore does, it does what it sounds like. It tells version control to "ignore" the files added to it). I figured this would be the way to go with my frontend app as well. However, I was very suspicious. I thought, this is too easy to be the correct way to do it.

This lead me down a mini rabbit hole of research regarding how to properly hide/store secrets and keys in the frontend. Long story short, you can't. At least not if you plan on deploying your app at all in the future.

From my search, I learned a couple of things that I thought I would share here. I am still learning (as we all are) so I may expand on these points in another blog.

NOTHING is safe in .env on the frontend (even if you add it to .gitignore). This is because after deploy your app, the key can be seen in dev tools within the Network tab.
The safest bet is to make a backend to proxy API requests and store the keys there so they don't become exposed to a user.
Serverless functions can be implemented for a bit less work than creating an entire backend.

It was also suggested to me to use Next.js, a React framework that, as stated by the documentation, does/provides the following(and MORE):

A page-based routing system
API routes to build API endpoints with Serverless Functions (now we're speaking my language!)
Client-side routing with optimized prefetching

This sounds like it is just what I need! As I stated previously, as I dive deeper, I may write a more in depth blog to share what I learned and my experience with Next.js. For now, I hope you learned something a little new here!

Special thanks to Nicholas Papadakis, Ashlee Boyer, Chris Powell and Matthew Curtis for the tips, suggestions and advice!

First Post-Grad Application: Watch Next

Desiree Lerma — Sun, 13 Jun 2021 00:16:26 +0000

So this week, or weekend, I decided to begin creating my first post-bootcamp-grad application! YAY!

As a lover of movies and television shows, I often find myself adding new items to my watchlist across different streaming services. My lists have become so long that I don't think I'll ever watch them all. I hate having multiple lists across the different services so I figured, why not create an application where you can compile your multiple watchlists into one?! Well, that's exactly what I plan to do.

The last phase of my bootcamp taught me the basics of React and Redux. I am going to be very honest, learning it was PRETTY difficult for me. I would usually learn the most during our project week because I am implementing every piece I was taught during lectures into my own application. However, since I had a bit of a harder time cementing my knowledge of it my project was quite basic. So, this time around, I want to reinforce the basics, but also take it a step further and teach myself a couple of new things.

I am the type of person who has to put my pen to paper when doing any sort of planning. I whipped out my handy dandy notebook and sketched out some quick ideas. Before I got too big for my britches, I decided to move forward and create my React app. At the bare minimum I will have the following components: User, Watchlist, Movies, Movie, Navigation Bar and Home. The API I discovered, The Movie Database API, has an ABUNDANT amount of information to utilize so I am sure I will have more components join the party later on.

The basics that I am beginning with will involve a homepage that will contain the movies component which will iterate through and display the available movies from the API. I will also implement a user profile page which will contain basic user information and the user's created watchlist. On this watchlist, users will be able to dropdown on a specific movie or tv show to gain further information on it (i.e. genre(s), overview, popularity, status and vote average).

Once again, I am just kicking off this application of mine so be on the lookout for further updates as my application grows overtime. If you have any questions or suggestions feel free to reach out to me.

What I Learned This Week: Database Constraints

Desiree Lerma — Sat, 05 Jun 2021 22:25:45 +0000

Ruby on Rails is an excellent framework to use. It utilizes object oriented programming, it's flexible, and reads very close to plain old English. One of the great benefits of Rails is that it offers us ActiveRecord for our models (the M in MVC). ActiveRecord is an ORM which allows objects to be mapped to a database. Now that you have a quick overview of what ActiveRecord is I can tell you, we can also add validations to our model because of it. I know, how cool! However, what if I told you, there is another way to limit what data is allowed in? Introducing, DATABASE CONSTRAINTS!

As a heads up, I have been mostly dealing with Postgres as a database so this blog will revolve mostly around Postgres constraints.

Now, back to our regularly scheduled program!

Database constraints are rules you give the database to follow which will allow (or not allow) certain data to be saved or passed through. Constraints can be applied anywhere from the whole schema to one row in a certain table. Listed below are constraints that you can add to your database and why may want to include them your next project or ticket.

CHECK: is given an expression and checks it as a boolean. Must not return false.
NOT-NULL: values in the column should not evaluate to NULL.
UNIQUE: each value in the column with this constraint must be unique.
PRIMARY KEYS: values in the column must not evaluate to null and be unique. Remember, primary keys are generally used to identify a record.
FOREIGN KEYS: values in the column must reference an existing record in another table (should reference a primary key or a unique constraint).
EXCLUSION: any 2 rows compared in column will have at least one return false or null.

Database constraints help to maintain the integrity of your database by helping to keep the data consistent. I read a StackOverflow answer (saved somewhere deep in my bookmarks) that made comparing model validations and database constraints a bit easier to understand, "Database constraints are law; application logic constraints are advice." I hope this blog helps you understand constraints a little bit more!

References:

https://www.postgresql.org/docs/9.4/ddl-constraints.html

What I Learned This Week: Rails ActiveStorage

Desiree Lerma — Sat, 29 May 2021 03:01:47 +0000

Recently, I completed a code challenge that included some bonus items. One of those bonus items involved image uploading which I had not yet done before. So, I decided to make it my goal this week to learn how to implement ActiveStorage to allow image and document uploading into an application. ActiveStorage eliminates the need for external gems to allow for image and document uploading. ActiveStorage also supports the use for different Cloud based storage systems such as Amazon S3, Microsoft Azure, Google Cloud Storage or you may use your computer's local disk.

First, after you've created or opened your app, install ActiveStorage with the command rails active_storage:install.
This line will do exactly what it says... install ActiveStorage. Using this command will also create ActiveStorage tables that will then need to be migrated with rails db:migrate. Let's take a quick look at the tables that were created.

Holy moly! That looks like a bunch of information, right?! Not to worry, these tables are essentially doing the following:

Storing filename, byte size, content type, etc.
Joining the attachment to the Model owner. (Think a User and their avatar)

If you are using Cloud storage you will also need to create a .env file and add that to a .gitignore file. This is extremely important so that your keys do not get used by others viewing your repository which can lead to charges on your Cloud storage account! This file will then contain the information needed to use the Cloud storage service.

# .env file
ACCESS_KEY_ID=yourid
SECRET_ACCESS_KEY_ID=yoursecretid
REGION=yourregion
BUCKET=yourbucket

In storage.yml ActiveStorage has configured the different Cloud options available. Simply uncomment whichever service you wish to use and reference your .env file.

Next, go into development.rb and/or production.rb and update the line of code that references the ActiveStorage service to use whichever service you prefer. Otherwise, it will automatically default to your local storage.

config.active_storage.service = :local
config.active_storage.service = :amazon
config.active_storage.service = :google
config.active_storage.service = :azure

Now that we've got the Cloud stuff out of the way we can move on to our Model relations. ActiveStorage gives us has_one_attached and has_many_attached which sets up mapping between records and files.

Make sure, in the associated Controller, to allow the image/document to be permitted in the params. In my example, since there are many documents, I set documents to an empty array to allow it to take in multiple.

Finally, if you're using a frontend or views, add in a file_field to the associated form for the image/document to be uploaded. If you make use of has_many_attached, be sure to set multiple to true in the form. Don't forget about the show page! In the show page (or where ever the image/document is going to be displayed) be sure to call the proper association to have the image/document display.

Tada!! Now, ActiveStorage has been successfully added to your application. I hope this walk through helps even a tad.

BONUS:

ActiveStorage supports uploading directly from the client to the cloud. To do so, set direct_upload to true to begin upload on form submission.
Use variant to transform your image/document. With variant you can do things like resize or format. To use variant you will need to add the gem image_processing which relies on ImageMagick. ImageMagick will need to be installed on your operating system as it is not a Ruby gem.
attached? is also given to us from ActiveStorage. Basically, it checks if there is an attachment present or not.

References:

Thoughts Post-Grad. What Do I Learn Now & How?

Desiree Lerma — Sun, 23 May 2021 06:27:51 +0000

I have now, officially, been a graduate from the Flatiron School's Software Engineering program for approximately two months. In that time, I have taken some much need time for self care (bootcamps are not easy y'all), searched for jobs, had some interviews, and searched for what to learn next. There is an OVERWHELMING amount of things to learn in tech, that is what drew me in after all. With the vast amount of learning possibilities comes an even larger amount of tutorials. This can make it very easy to feel lost and get a tad scatterbrained. Believe me, I know, I have a million and one freeCodeCamp videos, tutorials and articles bookmarked along with a small collection of Udemy courses and YouTube playlists. So, I figured I would write this blog about how to better organize your learning without overwhelming yourself.

First and foremost, WRITE IT DOWN.

I am the type of person who prefers to see things laid out in front of me otherwise my mind becomes jumbled. Make a checklist of all that you would LIKE to learn or take a stab at. Then, organize your day, week or month. Whichever makes the most sense to you. I personally prefer going week by week. Every Sunday evening, I sit and plan out my upcoming week. Take a look at if you have any scheduled interviews, meet ups, hackathons, etc and add write them it. Fill in the remaining blanks with time blocks for specific goals. Choose at least ONE thing to learn each week. It is very easy to want to learn too much, but setting bitesize goals for yourself will help you see all your wins. Besides, you can always add to your goals for the week after your knock one off the list. Start by learning a new method in a language you are already familiar with. If you have a project in this language, figure out a way to implement what you learned.

If you want to learn an entirely new language please allow yourself some grace! Teach yourself the absolute basics and see how they can compare to a language you may already now. Allow yourself to connect these dots to fully understand the inner workings. I would recommend building the tiniest project you can think of to get a kickstart (I'm talking "Hello World" size, remember that small but mighty victory?). Maybe this can be your goal for the month, where each week you improve your tiny project into something bigger and better. This then goes back to learning a new method each week to add to a current project (the circle of life, am I right?).

If you have some fellow devs in your circle, reach out to them and see if they would like to learn something new with you. Ask if they'd like to collaborate on a new project together. This will help you keep up with pair programming and version control skills. It has also been said that when you teach others it helps cement your knowledge on the subject. Teaching and helping each other understand becomes an all around win.

Lastly, give yourself time to unwind and relax. Go to the gym, take your dog for a walk, read a book, watch a movie whatever you do to recenter. Do not burn yourself out. There is always going to be something new to learn and let's be honest, you will never learn it all, so why burn yourself out trying to do so. Your brain, just like everything else, needs a break at times.

So, what do you plan to learn next?

Testing 1, 2, 3... RSpec Basics and Tips for RoR.

Desiree Lerma — Sun, 16 May 2021 20:34:29 +0000

I have recently begun my dive into the job search pool and have landed a couple of interviews. Exciting, right?! In each interview I have been asked about testing. Whether it was in regards to my preference in testing or actually having to implement my own tests for a challenge, the subject came up. That's when I realized, my way of testing an application (which had been by running my server and testing pieces manually) would not be the best route when in the real software engineering world and dealing with much LARGER applications. Now don't get me wrong, I have definitely read tests before, I've just never really written them out myself until I had a code challenge which asked for such to be done. So I thought it would be a great idea to take a dive into some basic keywords to read and write tests as well as compile a small cheatsheet of RSpec matchers.

First and foremost, you want to ensure you have the rspec gem in your gem file and run bundle install. You may also generate boilerplate files with the rails generate command.

gem 'rspec-rails', '~> 5.0.0'

rails g rspec:install

Next, we'll need to require any and all files we want to include in the specific test file we're working in.
If you use scaffold to generate your files, your tests will automatically require 'rails_helper'.

require 'main/tester.rb'

Now the fun stuff. Actually writing tests!

To have a skeleton of a test, create a describe block. The describe keyword tells RSpec which class and/or string argument you want to test as well as allow you to group tests for that class/argument together. Within your describe block you will also have an it block which will define a test/test case. Like describe, it accepts class names and string arguments (describe what behavior should happen inside the block). Another important keyword is expect which is a verification step to ensure the condition we expected has been met.

describe Tester do
  it "does something" do
   test = Tester.new
   expect(test.name).to eq("something")
  end
end

Let

Alright, let's get down to business! (Extra cool points if you understood that reference) RSpec has a let method which allows you to reuse objects for many tests. The let method is essentially creating a variable to be used throughout the specific test file.

let(:valid_attributes) {
# here you will add a hash of your valid attributes
  {
  first_attr: "your first value",
  second_attr: "make sure it's the correct datatype",
  another_attr: true,
  and_so_on: 2
  }
}

Now, if you need to create an object throughout, you can simply write Tester.create valid_attributes in your describe block.

Subject

Another version of let is the subject keyword where you can only have one subject (an instance) of the object you're testing.

describe "running a test with subject" do 
  subject { Tester.new }
  # or subject (:first_test) { Tester.new }
  it "was saved successfully" do
    expect(subject).to be_an(Tester)
    # or expect(first_test).to be_an(Tester)
  end
end

The subject keyword is normally used to test ActiveRecord validations with shoulda matchers.

Context

If you find yourself wanting or needing to test different scenarios within your application context is the tool for you. With the context keyword you can describe different possibilities to be tested within that file.

describe Tester do
  context "when user is a dog owner" do
    it "displays some dog info"
    end

    it "displays dog toy info" do
    end
  end

  context "when user is a cat owner" do
    it "displays some cat info"
    end

    it "displays cat toy info" do
    end
  end
end

Now that I've reviewed the basics of creating your own RSpec tests and what the keywords mean and do, I'll provide you with a small cheatsheet of matchers I've compiled.

.to eq
.not_to be
.to be_success
.to have_http_status
.to be_a_new
.to be_an
.to be_a
.to render_template
.to route_to
.to redirect_to
.to be_redirect
.to be_routable
.to be_nil
.to start_with
.to be_between
.to end_with
.to have_attributes
.to raise_error
.to change
.to be_instance_of

I hope this blog helps you understand how to read and write RSpec tests a tad more. I know writing it certainly helped me!

Resources:

A Software Engineer's Journey: Flatiron Edition

Desiree Lerma — Wed, 24 Mar 2021 22:42:51 +0000

Last year I was working an office job as a legal assistant. While I enjoyed my coworkers presence, my job was unfulfilling to me. I had tried different career paths such as cosmetology and legal assisting, but I had yet to find something I was truly passionate about. When I discovered coding along with the highs and lows that come with it I felt like I was finally gifted an answer to my question, "What's my purpose?" Coding allows me to exercise my brain muscles as well as my creative muscles. What more could you ask for?!

Turning A Dream Into A Reality

I went through the motions to research and find a bootcamp that properly fit my needs and found my Cinderella shoe with Flatiron. After going through the application process, I was officially accepted in July 2020. That was the first step towards achieving my dream. I began my official Flatiron journey in October 2020. That sounds like such a long time ago yet it also seems like it was just yesterday. Time really does zoom by when you're having a good time, right?

Now don't get me wrong, I definitely had my fair share of obstacles and late night study sessions (I should be sponsored by energy drinks at this point). I went into Flatiron with minimal coding experience, but an eagerness to learn. While going through a bootcamp such as Flatiron you need to learn to give yourself some grace. You are being granted such a vast amount of information you will NOT immediately pick up every single concept that you are being taught, but that's where your drive will kick in. Discover the pieces you lack in and drill into them with all your might. Just because a lecture ends or an assignment is completed does not mean your learning has ended. Do some more research on your own and I guarantee you will not regret it. This can be done by taking a deeper dive into the language's documentation or simply watching a Youtube tutorial to help cement the information.

Your Brain Needs A Break

There are a couple of tips I'd like to hand out that my own instructor had to constantly remind of. The first is to TAKE A BREAK. I cannot begin to tell you how many times I had an issue that I felt like I could not solve, but I would've been able to discover if I would have just walked away from my computer to get a breath of fresh air. Your brain needs a break! I cannot stress enough how important breaks are. As I said above, you are being given a substantial amount of information to absorb in a small amount of time so you need to allow your mind and body the opportunity to just breathe sometimes. I can almost guarantee, if you've been banging your head against your keyboard for the past hour, once you walk away the solution will come to you (yay for brain magic!).

Ask Away

Another tip I would give is to ask all the questions you want and need! Every time I asked my instructor a question I would preface it with "This is probably a stupid question but..." I always felt like I was alone in my questions, but I also didn't want to allow myself to struggle. If I said out loud that it was a dumb question then it would somehow make me feel better (weird way of think I know). My instructor always assured me it wasn't a stupid question and it wasn't until the very end of my program that I discovered how my "stupid questions" weren't actually stupid AND actually helped others. I had a cohort mate tell me that he was glad I was actively asking questions in Slack and in office hours because he would usually have the same questions and me asking them helped him as well. So my advice is to ask away! You are learning totally new information and it is ok to ask for help and/or clarification. You want to make sure you are properly understanding it after all.

Community Is Key

Having my cohort community helped me immensely during this program. They helped me realize that this journey is a unique one and having someone that can relate with what your feeling can help validate that you are not alone in it! Some individuals in your community may have a better understanding of certain concepts and can help you learn them too. Or vice versa, you may have a better understanding and you can then lend your knowledge to help them out which in turn, solidifies your grasp on the subject. Learning to utilize your peers is an important skill that I think can get overlooked sometimes. Think about, in the real world you most likely will not work 100% alone. At some point in your career you will rely on others, others will rely on you and you'll work collaboratively to solve problems.

As I await my final project assessment, I look back at where I was when I first begin the Software Engineering program and I am truly astounded at all that I have learned. I went from being happy with printing "Hello World!" onto to page to now having the ability to create exciting new apps. In my journey I have created a Tv Encyclopedia through the command line, a Christmas List app utilizing the Sinatra framework, a fitness organizational app with Ruby on Rails and user authentication, a Marvel trivia game with a Rails backend and JavaScript frontend, and an app with a collection of true crime cases for informational purposes with a Rails API backend and JavaScript frontend while utilizing React/Redux. Not only did I learn the fundamentals of these languages, I learned how to learn (with my BFF Google), how to better work in a team, how to ask for help when I need it, and so much more. I cannot wait to learn more and see where this journey continues to take me as a Software Engineer.

React, A Functional and Classy JavaScript Library

Desiree Lerma — Sun, 21 Mar 2021 22:46:17 +0000

React is described as "a JavaScipt library for building user interfaces." React is one of the most, if not the most, popular JavaScript library out there so I would highly recommend dipping your toes in pool. React makes use of components that are essentially customizable and reusable chucks of HTML elements that allow a user to quickly create user interfaces for the frontend of your application. By having these separate components we are able to break down code into reusable pieces that aide in readability. React breaks their components into separate categories: class, pure and functional.

Class

All your components of could be written in this fashion and nothing would break. However, be aware that class components go through checks. If you don't need any of these checks to be implemented using a functional component is preferred (we will discuss functional components more in a moment). Class component syntax can be made simply or more complex depending on your needs. They become more complex when you begin to make use of lifecycle methods.

A bare bones class component would look like:

import React from 'react'

class Test extends React.Component {
  render() {
    return(
      <div>
        Hello!
      </div>
    )
  }
}

export default Test;

Pure

A pure component in React does not have access to the lifecycle method shouldComponentUpdate. However, it performs a shallow comparison of old and new props. The syntax of a pure component is almost the exact same as a class component. The only difference? Instead of importing Component, we import PureComponent. Using Pure component is a good idea if your component does not require any fine tuned updating.

Take a look below to see the minor difference in syntax:

import React from 'react'

class Test extends React.PureComponent {
  render() {
    return(
      <div>
        Hello!
      </div>
    )
  }
}

export default Test;

Functional

A functional component is the least complex of the three we are looking at in this blog. A functional component will not "extend" Component nor will it make use of render. Instead, it returns JSX. Since a functional components does not 'extend' Component it will not inherit what is needed to store state, but it can receive props as an argument. Functional components rely less on logic and more so on displaying what you tell it to. Functional components are best used as lightweight components, but can be made complex if the situation calls for it.

import React from 'react'

const Test = props => {
  return(
    <div>
      Hello {props.name}!
    </div>
  )
}

export default Test;

Quick side bar
JSX (JavaScript XML) allows us to easily write and add HTML in React by converting the HTML tags into React elements.

BONUS

You may have heard the words "container" and/or "presentational" components being tossed around. These are good to know about! Presentational and container components are not different types of component; instead they are a way to look at and organize your React app.
Let’s take a deeper dive into how we can implement this thinking when creating our own React app.

Containers

Container components are the big guns. They deal with logic and state. A container component is where you want to perform certain functions such as updating state or handling a submit event.

Presentational

A presentational component is only concerned with displaying content onto the page. They are not weighed down by logic and don't give state the time of day(they don't want to deal with it).

You can think of Containers as a parent that holds all their baby Presentational components in their arms.

Thanks to React making us separate our code into components we end separating our concerns instantly making our code better. Understanding components and how they interact with each is crucial to understanding and enjoying the React library. I hope this information helps you on your React journey!

JavaScript Rollercoaster Ride

Desiree Lerma — Sun, 21 Feb 2021 08:29:30 +0000

As the JavaScript phase in my Software Engineering program with the Flatiron School comes to a close I find myself reflecting on how much I have learned in the past 3 weeks. This week I was tasked with creating an application with a Rails API and JavaScript frontend. I came into JavaScript wide-eyed and bushy tailed. However, that quickly changed into feeling incredibly intimidated. JavaScript is such a dynamic language that it's quite easy to become overwhelmed with all there is to learn. However, as I began to grasp concepts little by little I developed an appreciation for JavaScript and all of the flexible functionality it provides.

My project, Marvelous Trivia, makes use of Object Oriented Programming to create a trivia game of Marvel Comic questions. My application has 2 classes, Question and Game, as well as an Index page where general functions are be rendered.

I felt lost at the start of my project because I felt as if there were so many directions I could take to execute a trivia game. To lessen the load, I began by mapping out my flow to determine where I would place a function to get the most bang for my buck. This helped immensely with determining where to begin! During my map out process I declared a relationship between my classes by having my questions belong to a game and vice versa (game has many questions). This meant I could separate my questions into different difficulty levels that my user can chose from. Then I could render only those specific questions based on a selected difficulty. This would also allow an automatic association when a player adds their own question to the database. Within the form to create a question, a difficulty level(game_id) is chosen which translates to which game that question becomes associated with.

One of my best friend throughout the creation of this application was a combination of the renowned debugger and the illustrious console.log(). These beauties helped me to better understand the inner workings of JavaScript. I would HIGHLY recommend using one or even both!

Debugger will stop your code where ever it is placed. You can then go into your console and type code from within your function to see what it is actually doing and or returning.

Console.log() allows you to pass in code snippets as an argument. When your application gets to that code it will not stop the program, but instead print the value of the argument you passed it, to the browsers console.

I used a combination of these throughout my project build. I will say I probably utilized console.log() the most to fully understand what value my JavaScript code held. This would, in turn, help me understand how my code needed to be built out to work in the way that I needed it to.

JavaScript can be an intimidating language, but please do not let it deter you from learning it. Take it in baby steps and take the time to understand the small things. JavaScript provides so much functionality to an application that can make a world of a difference. Although it will take time to understand the language I think it is worth the ride. The beauty of Software Engineering is the never ending learning after all, so take your time and start or continue to learn JavaScript.

ActiveRecord Associations: The Beautiful and Complicated

Desiree Lerma — Mon, 25 Jan 2021 05:11:56 +0000

The Ruby language has a library called ActiveRecord which provides object relational mapping (ORM) to its developers. ActiveRecord provides a TON of helpful tools for developers to help cut down on the hassle of rewriting the same old code that is necessary for any application to get up and running. One of the helpful tools that ActiveRecord provides Ruby developers is Associations. Now don't get me wrong, these associations can get a little confusing at times but are incredibly helpful when building an application that includes more that one model.

To start, Associations are simply a way of connecting two or more models in a database together. When associating models together we are allowing one (or both) to know to know about the other. When models know about each other we open up a whole new ball game! I utilized these associations through out my application, FitPlanningPartner, which I will walk you through.

belongs_to

The belongs to association on a model informs it that they are essentially a child to the model linked to the end of the belongs to statement. With this relationship, the model will have knowledge that it is associated with its parent. The way this table identifies with its parents in the database is by having a foreign key attribute that connects with the parents primary key. For instance, in my application a Workout belongs_to a User so in my database, my Workout table would have a column for user_id. Now to associate the two in our Workout model with ActiveRecord, we simply connect the two by listing belongs_to :User to create that association.

has_many

Now, on the other end of a belongs to is the has many side of the relationship. The model that holds the has many can have multiple instance of the other model. Our parent does not necessarily need to know about its child, so in the database there is no specific link to its child. In our model we simply state that is has many of the child model. In my application my User class would have many workouts. This would look something like: has_many :Workouts. This is listed as plural because our model could have multiple.

has_many, through
This is were it gets really interesting. A has many, through relationship allows a set up for a many to many association also referred to as a join table. This can sound confusing so I will provide an example based upon my application. I created a table, Routines, that joined my Workout and Exercise table. This would mean that my routine instance could then link together my Workout and Exercise through itself. In other words, Workouts have many Exercises through Routines and Exercises have many Workouts through Routines. Having this association allowed me to view Exercises associated with a Workout or what Exercises were being used in Workouts. Thanks to the through part of the relationship I was able to do
@exercise.workouts.count and get a count of how many workouts included a specific exercise.

These are just a few of the many associations ActiveRecord helps developers with! I hope this post provided some insight into the wonderful world of associations.

Resources:

https://guides.rubyonrails.org/association_basics.html