DEV Community: Ben Limpic

Fullstack Deploy React / Rails / Heroku

Ben Limpic — Wed, 01 Jun 2022 01:38:36 +0000

Here is a short but hopefully comprehensive explanation of deploying a simple React/Rails application on Heroku

First, we need to be running a version of Ruby that Heroku will accept; one suggestion is running it on

-v ruby 2.7.4

Once we have verified our Ruby version, we can generate our new rails application using PostgreSQL as the database.
At this stage, we will begin building out our necessary seed data and migrations.
Before we can Seed and Migrate our Db, we must use rails db:create to create our PostgreSQL database.

The following command will install the Linux and Ruby Platforms for our Heroku Application.

bundle lock --add-platform x86_64-linux --add-platform ruby

Now we can perform our git add and commit actions.
Open the browser window by running heroku open in our terminal.
Finally, we will migrate and seed our Heroku Db by running heroku run

rails db:migrate db:seed

Onward to the front end!

Create a new react app and name it using this command.

npx create_react_app client

Next, we need to install a prefix client to create a unified version of our react app in the client/build folder.

npm install --prefix client

In the package.json file above our "private" and "dependencies" sections we will add

"proxy": "http://localhost:3000"

In our scripts we will change "start": "react-scripts start" to

"start": "PORT=4000 react-script start"

We now need to add another package.json into the root of our directory run

heroku buldpacks:add heroku/nodejs --index 1

Update the package.json by running the commands

git add .
git commit -m ""
git push heroku main

Your fullstack application is now ready for testing!

Oddly Conventional

Ben Limpic — Tue, 10 May 2022 06:39:12 +0000

One of the most challenging things about learning Active Record association methods in ruby is the wide range of possibilities condensed into each lesson. However, Active Record is a powerful tool that can correlate data in our database files through simple code to inform each relationship.

We have often discussed that dry code is good code. It is easy to forget that sometimes we need to learn complicated ways of solving problems to reduce the likelihood of creating bugs and increase the possibility that bugs can be found and corrected when they turn up. When deciding between database options, it is tempting to use methods and frameworks that we are familiar with continuously. We like to be comfortable, and we want to know what we are doing. Maybe this isn't the best strategy.

I have learned to be very comfortable with not knowing everything and opening myself up to possibilities I haven't considered before. Acknowledging a lack of understanding can be a strength in coding and can often lead you in the right direction. When learning React, I had no choice but to accept that a deep understanding of a tool takes a lot of practice and time, we don't have all the time in the world to learn everything there is to know about everything, and that is okay. When moving on to Ruby, I quickly accepted that I was not about to understand every aspect of this language before it was time to move on. I completed my assignments to the best of my ability and got to work studying SQL. SQL was a similar story to Ruby.. that said, it was easier to accept that I would be running through lessons very quickly on my way to Active Record. I studied what made sense to me, learned a lot about what I didn't understand, and was able to use that to realize the benefits of Active Record.

It can be a great benefit in any endeavor to learn enough information to ask the right questions. Knowing what questions to ask makes it much simpler to follow a trail of understanding. It is important to acknowledge where we have blind spots to attempt to understand what and why we may be missing something. I found it incredibly beneficial to practice active learning by carefully studying every code-along lesson I could. I have made it a habit of learning from code-along lessons by pretending that the copy and paste functions are out of bounds. I have learned a lot about clean and structured code through utilizing an imitation approach in every lesson. I don't copy what is in the example. Instead, I rewrite it and understand what I am writing.

I learned the most about Active Record by reviewing examples, solutions, and code-alongs until I understood what was taking place. The reason for this is that Active Record is a convention-based framework. Therefore, it is more important to adhere to the convention than to understand why the convention exists.

An example of this is the naming conventions established when creating a migration.

Model Class - Singular with the first letter of each word capitalized (e.g., BookClub).

Database Table - Plural with underscores separating words (e.g., book_clubs).

Model / ClassTable

Article -> articles
LineItem -> line_items
Deer -> deers
Mouse -> mice
Person -> people

credit: [(https://edgeguides.rubyonrails.org/active_record_basics.html#naming-conventions)]

As you can see above, it is not simply a requirement that we follow specific methods to utilize Active Record. Instead, we simply cannot write to Active Record without adhering to the conventions; otherwise, the properties under the hood will not reciprocate predictably.

Convention-based programming tools are a benefit to the student programmer. They help to limit the scope of what a solution could be and force us to learn how the program wants us to interact with it. By understanding that we don't need to understand every aspect of something to use it effectively, conventional methods become a great help.

Conditional Rendering

Ben Limpic — Wed, 20 Apr 2022 15:52:48 +0000

Conditional Rendering In React:

What is conditional rendering?

Conditional rendering is how we create dedicated components that fulfill specific tasks by implementing the ability to render or not render components based on their state and user input. Fortunately, we don’t have to worry about learning new functionality regarding conditional rendering in React, as it functions in the same way as vanilla Javascript. An example of conditional rendering could be…

Ex Use Case:
Imagine a big red button. Every time we click the button, we want to know if the button has been clicked an even or odd amount of times. If the button click is even, we want the button to turn blue. If the return is odd, we want the button to turn yellow.

Here is an example of using conditional rendering in-line. One of the cool things about conditional rendering is if you create a statement using an && logical operator, a falsey result will return the first part of the statement while ignoring everything after the &&. This method is relatively unique and clever, in my opinion. Below is an illustration of this method from React Documentation.

React Docs Ex 1.

render() {
  const count = 0;
  return (
    <div>
      {count && <h1>Messages: {count}</h1>}
    </div>
  );
}

Another interesting use case for in-line conditional rendering is the if/else ternary statement; this may be the most useful conditional statement in React. As we can imagine, we have a condition to evaluate. The conditional is found to be true, return true, and if false, return false. Again, the amount of code used and the resulting functionality is a high ratio of usefulness to lines of code.

React Docs Ex 2.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Condition ? True : false

We can do a whole lot with this little statement.

fetch( kungFu )

Ben Limpic — Tue, 29 Mar 2022 03:26:32 +0000

Aloha amigos!

I hope this blog is the start of an exciting tradition. I have always been a bit shy when writing about myself. I feel weird even keeping a journal. I don't know where I picked up on the habit of disregarding documentation but here's to making progress and writing it down.

It has been a while since I took time out to pursue rigorous study. I have often wished I could jump back into the thick of it. But, we all know what it's like, being somewhere a while and then dreaming of a greener pasture. So here I am, trying my hand at uncovering the mysteries of computer magic.

The title of this post may be a bit confusing to those of you who haven't completed an introductory course in Javascript, so let me explain. First, there is no shortcut to learning. But, if there were, maybe it would look like this.

When we utilize a fetch request, we ask an outside source, a server, for information. We do this by providing the fetch function with a URL to a destination containing the data we want to use. Once the GET request is received, a response fires back to the fetch called a promise. Think of a promise as a gift certificate. After we use the .then() method to verify whether we are exchanging our certificate for a lovely present or not, we are ready to unwrap our gift using .json(). We do so, and after another .then() request (where we figure out what to do with the damn thing), we are ready to use our brand new data!

Wouldn't it be nice if we could send a fetch request in our mind and instantly learn something new in a snap? Maybe one day, we will all blow on the dusty card of a mortal combat cartridge and click that sucker into the back of our heads. Like Neo said... "I know kung fu."