DEV Community: Rafael Nazario

Building Solid Fundations on Rails Associations

Rafael Nazario — Thu, 16 Jul 2020 18:13:29 +0000

First of All

Hey new Devs, how are you doing?
Please follow me on twitter so we can interact more =D

Introduction

Learning Ruby on Rails is an awesome experience. I have been overwhelmed for its potential at the very first tutorial I took. It's amazing how with only a few commands and changes on files can result in your pages.

The first steps of building your web application are creating and correctly connecting the database of its application, but most of the text that should help with a bit more advanced topics are confusing.

Migrations

This is the very first step when building any Rails application. Creating the tables for your application is pretty easy. Just run on the terminal:
rails generate model modelName.

Model

At this point, is now time to connect each table as it has to be. For example, in this example, an Appointment must be a mutual agreement between Doctor and Patient. That is the diagram after the main connection we are creating.

Simple Relations

In order to create these associations, let's recall the fundament here. Creating a one-to-many association requires that the 'one' part of the relation has_many relation; the 'many' part of the model needs the belongs_to relation. In this example, a patient can attend to multiple appointments, but an appointment can have only one patient, so:

This is the simplest relation that can be built on Rails. A has_many requires a relation name and if the model-relation is the name of another class, it automatically refers to that class, requiring a 'class-name_id'. This association works fine because the belongs_to creates a reference for the column that it exists (on this example, patient_id, created since the first migration).

But there are some moments in which this is not that simple. At some tutorials, this is the point that starts to be confusing, but it is still simple! It's shown on the relation for the Doctor model.

Nicknamed Relations

This kind of association is way more used and readable on the code. The fundament here is that the programmer can create nicknames for its association that represents exactly its purpose, and the tags are pretty much the same.

The change on the has_many tag is that now it's required to point the relation to the correct class and foreign_key.
In order to complete the relation, the belongs_to tag that goes on the Appointment model refers to a doctor and points it to the Doctor ID (Primary Key). Since the column is not named directly to the class name, it must also point which column of the model is to refer to the Doctor table.

Advanced Relation

So far, the fundament of creating direct relations should be fully understood. What about the SOURCE - THROUGH relations? Those are a bit tricker.

Source - Through Fundament

Most of the topics I have read about this relation were really confusing (and actually, this is what inspired me to write this article). There are a lot of paragraphs that explain everything in a too much technical way, that means almost nothing to beginners, especially if your mother language is not English (like me). So, is it that confusing?
spoiler-alert: NO.

The best analogy for this association is to think about getting a car ride from your friends. The same way, the association through-source works getting 'rides' on other associations.

In this example, the association who_attend of the Doctor class gets a ride first on the association Doctor-->Appointment THROUGH the to_attend association (now, the pointer is at the Appointment Class). Next, it takes a ride on the association Appointment-->Patient SOURCE the patient association.

Wrapping up

I encourage you to build the same application and test it in many different ways. First, finish this simple application building the association for the Patient-->Doctor using the same concept.

Also, don't stop there! Build as many different applications you can just to practice the fundament of the relations.

Fundaments are important! Focus on it, buddy!

Bootstrap - A Quick Guide to Beginners Avoid Hating it.

Rafael Nazario — Thu, 27 Feb 2020 17:18:42 +0000

First of All

If you are a beginner and you want some help with Bootstrap, follow me and ask for anything on twitter.

Introduction

Well, if you are here it is probably because you have heard of this important tool for styling in an easier way your pages. Maybe, because you have already tried it by yourself and started hating it and now it is wondering "Why the hell people say that it's way easier to apply bootstrap?"

One thing I know for sure: Bootstrap IS amazing.
But there are some stages that you go through before thinking this way, specially if you try learning it only by reading its documentation.

The Stages of Learning Bootstrap

For my own experience, learning Bootstrap by yourself having only the help of the documentation provided is really difficult and you probably are going to face most of the following feelings:

You do not understand the main concept of it and think that it is not that powerful tool that you were expecting it to be;
You try small tests and then you just do not like it;
Everything is not working and then you start hating it;
You remember how 'easier' it is with your css styling and then you totally hate it;
You finally understand the main concepts and start enjoying it a little bit;
You understand how to apply and connect everything and you finally love it.

Main Concepts You Must Know

- Bootstrap

You may think of Bootstrap as a Lego pack of pieces. You have a lot of small pieces and with it is possible to build whatever you want, but only if you assemble it on the correct way.

Bootstrap was developed as a way to avoid writing the most common css-code for every page we build. And that is all! So, if this is a stylesheet, all you have to do is go to the Bootstrap Home Page and link to your header the stylesheet and the javascript functionalities (if you need).

Then, you start adding all the small classes that Bootstrap provides you and there is no need for any styling, it is already done! After understanding it, it is important to master the main classes and how its interaction happens.

Following, you can read about the main classes that you probably will use.

- -fluid

This class is used to apply some small responsiveness on the element. It basically sets the width of the component to stretch through width as 100% according the different views that your page will be seen.

- Grid

In my opinion, this is the most useful resource of bootstrap, but it has its peculiarities.
Once you want to trigger a grid use, you must ALWAYS be using a row class and nest the columns as its children.

Important: Every row class creates 12 columns. Never forget about it.

So, since we have 12 columns inside each row, time to assemble your columns. For the main example, we are assembling 3 columns. Even though it would be possible to just add 3 col classes, for best practices, that is how it should be coded:

Note: By only adding col classes without the index of how many rows the component should take will divide the content for the number of classes that have no index. This is helpful in a few cases, but it is not the best practice.

So, what to do when you need to access and split up these columns? You have to nest another row - which is going to be divided in 12 columns as well. How intuitive is that, eh?

- Responsiveness with Grid

This characteristic is what makes grid the most important tool of Bootstrap.

In order to correctly understand it, take a look at this viewport description from the Bootstrap official documentation that shows all its breakpoints.

As you can see, the order of the viewports go from extra-small (xs) to extra-large screens (xl). Then, any application that you do for a viewport, if there is no other higher viewport defined, it is going to apply to all above. Pretty logical, right?

How can you get responsiveness then?

It is simple! You are free to add multiple classes!

For the next example, we will be applying the following specifications: The content should take the whole screen on mobiles (1 column only), 2 columns once it is a tablet portview and finally, 4 columns once it is being seen on a laptop and up. In order to do it, you just have to add the viewport before the index. Here is the solution for this:

For computers:

For Tablets:

For Mobiles:

Flex Display

One of the most important tool for displaying content in CSS is Flex-box, and it would not be different in Bootstrap.

Displaying flex in Bootstrap is usually a move to fit the content inside the container or even inside the grid column. Just like the original tool, the most important functionality is to justify or align the content according to the main direction chosen to be the reference.

Using it is pretty simple, and also justifying and aligning the content. The next example covers its main utility.

- Margins and Paddings

I am pretty sure that this styling was the most recurring coding of your CSS until this point, right? Well, not anymore!

Bootstrap works with margins and paddings using rem units that goes from index 0 to 5. You can also choose each side individually and you can even apply the negative margins concept.

I am not creating any example for this section! These are classes that you have to use multiple times and get used to how much it "moves" the component from its original placement, after understanding the documentation.

Personal Insights of Bootstrap

Learning and practicing the use of Bootstrap through your projects will not only help you on the page that you are using the tool, but for your entire coding for CSS as well.

The main result that I achieved by applying myself through all these stages, with a lot of research, try and error, resetting my entire project and finally understanding it is that now I think clear of the whole result naturally.

After understanding Bootstrap, it is easier to plan your page and create small classes for yourself that will fit n-components instead of only the components that are exactly the same through your page, resulting in a cleaner and way more compact code, which in my opinion, is quite elegant.