DEV Community: Cindy

Differences Between the CSS position Property Values

Cindy — Mon, 31 Aug 2020 01:56:46 +0000

When I first started learning CSS, I was really confused about what each value of the position property did and when to use relative, absolute, fixed, and sticky. This is a summary of what I have learned about the values.

`position: static;`

The default value of the position property is static. The elements are displayed in the order (document flow) of what is written in the HTML.

`position: relative;`

The relative value is really similar to the static value except you can change the element's position relative to its normal position. So what does that mean? It means that you can use the properties left, right, top, and bottom.

Notice in the image above, even though child-one has the property left: 20px the element did not shift 20px to the left. That is because it has position: static.

child-two, with position: relative shifted both to the left and from the top relative of its 'static' position. But now child-two is covering child-three. Why? When you use the properties left, right, top, and bottom, they take the element out of the document flow while the other elements remain in the document flow. As a result, it is rare to use left, right, top, and bottom on position: relative elements since they make it difficult to style elements around the position: relative element.

`position: absolute;`

The absolute value completely removes the element from the document flow while the other elements render like the absolute element did not exist at all. Notice in the image below how child-one just 'floats' above the other element.

This is really useful for times when you want to position an element at a specific location without moving the elements around it.

Can use left, right, top, and bottom with position: absolute. The absolute value positions an element inside some parent element it can reference. An element cannot reference a parent element that has position: static. Elements can only be positioned absolutely to elements that have position value of relative, absolute, fixed, or sticky. If there is no parent element that the element can be positioned absolutely to, it will be positioned relative to the browser window (the HTML element).

In the image above, child-one is above the parent element and positioned 0px from the top of the browser window. This is because it's referencing the browser window as the parent container, not the parent element because parent has position: static.

However, grandchild-one is referencing child-three as its reference because it has position: relative, not static. grandchild-one is 10px from the top of the child-three element. Using relative to position an absolute element is one of the most common uses of position: relative. Having an absolute element relative to a relative element prevents the absolute element from falling back to referencing a previous relative element (or any element that has any value other than static) or all the way back to the browser window.

`position: fixed`

A fixed element is positioned relative to the browser window. Parent elements do not matter. For example, if you have:

.child-one {
  position: fixed;
  top: 0;
}

child-one element would stay at the top of the page even if you scroll down. Fixed elements move with the scroll to stay in the exact same position on the page.

position: fixed can be used to create a navbar that sticks to the top of the page.

`position: sticky`

The sticky value is like a combination of the relative and fixed values. By default, the element is relative and stays relative until you scroll past where the element is, then it becomes fixed. Use top property to 'stick' the element to the top of the page.

Example:

Before scrolling:

After scrolling past the element: child-two element is now fixed 0px from the top of the browser window.

Resources I referenced:
CSS position Property
Learn CSS Position in 9 Minutes
The Forgotten CSS Position

Thanks for reading! :)

Change Navbar Style on Scroll Using React and CSS

Cindy — Mon, 24 Aug 2020 01:44:52 +0000

Recently, I've been working on improving the UI of a previous project. One cool thing I've learned is changing the style of the navbar when the user scrolls.

My project had a navbar with a white background on top of a website that already had a white background, so when users scrolled, the logo and navbar items looked like they were floating. To remove the 'floating' items and make the navbar more obvious, I changed the navbar's background color on scroll.

In the navbar component, I added

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = () => {
    if (window.scrollY > 20) {
      document.querySelector(".navbar").className = "navbar 
      scroll";
    } else {
      document.querySelector(".navbar").className = "navbar";
    }
  };

Added an event listener to the window object to watch for when a user scrolls down from the top of the website.
The event listener is in the React lifecycle method componentDidMount so that it is only created once (when this component is created).
Also have componentWillUnmount to remove the event listener when the component is going to be removed from the DOM.
The handleScroll method will be called when a user scrolls. This method will add an additional className to the nav element, which I can then select in CSS to override the background-color.
- window.scrollY is a property of the Window object that returns the number of pixels that the document is currently scrolled vertically. I used this property to detect when the user has scrolled past 20 pixels. When a user does so, the HTML will look like this

// scrollY > 20
<nav className="navbar scroll">


// VS
// scrollY = 0
<nav className="navbar">

Now that I have the scroll class, I can select it in the CSS file using the class name.

.navbar {
  background-color: #fff;
}

.scroll {
  background-color: #f1f1f1;
}

The scroll background-color will override the default background-color as long as scroll is under navbar in the CSS file.

Thanks for reading! :)

Using Netlify Forms for a Contact Form

Cindy — Fri, 14 Aug 2020 18:08:06 +0000

Netlify is a great platform for hosting static websites. I used it to host my personal website. One feature I discovered while working on my website was Netlify Forms. You can use Netlify Forms to create a simple contact form. It's also great because by default, it displays a success message when a visitor submits a form.

The form was incredibly simple to set up due to great documentation.

Step 1: Create an HTML form

Add name, method, and data-netlify attributes.

<form name="contact" method="POST" data-netlify="true"></form>

Step 2: Spam prevention.

You can add a honeypot field and/or a reCAPTCHA 2. Submissions that do not pass these filters will automatically be rejected.

Honeypot field

A honeypot field is a hidden form field that tricks bots into completing a field that humans can't see. So, if a form is submitted with the honeypot field completed, that form will be rejected.

Add a hidden honeypot field to your form by adding the netlify-honeypot="bot-field" attribute to your

tag. "bot-field" is the name of the hidden field. You can pick whatever name you would like, just make sure that the name in the form tag matches the name attribute of the hidden field.

So far, this is what the form looks this:

<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <div class="hidden">
    <label>Don't fill this out if you're human: 
      <input name="bot-field"/>
    </label>
  </div>
</form>

reCAPTCHA 2

You can choose to add reCAPTCHA 2 instead or have both. Netlify provides a CAPTCHA you can use or you have the option of adding your own. I chose to add the honeypot field for my website because I don't like how CAPTCHAs look, but if you would like to add it to your website, then please refer to the Netlify docs.

Step 3: Add the other input fields you need to complete the form

<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <div class="hidden">
    <label>Don't fill this out if you're human: 
      <input name="bot-field"/>
    </label>
  </div>
  <input
    name="name"
    type="text"
    class="nameZone"
    placeholder="Full Name"
   />
   <input
     name="email"
     type="email"
     class="emailZone"
     placeholder="Email"
   />
   <input
     name="subject"
     type="text"
     class="subjectZone"
     placeholder="Subject"
   />
   <textarea
     name="message"
     class="messageZone"
     placeholder="Message"
   ></textarea>
   <input type="submit" value="Send Message" class="btn" />
</form>

And that's it! You can log onto your Netlify account and click on your website to review recent form submissions. If you click on 'Site settings' and go to 'Forms', you can set form notifications so that you get a Slack or email notification.

Responsive Background Image Using CSS

Cindy — Fri, 07 Aug 2020 01:20:36 +0000

Recently, I've been working on my portfolio (shameless plug 😅) and learning about how to make it more responsive. A responsive website will adapt to a change in screen size so that the website will nicely display the page content.

You can create a responsive background image with just CSS.

HTML

<div class="bg"></div>

CSS

.bg {
  height: 100vh;
  min-height: 500px;
  background-image: url(images/bg.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #1d3557;
}

height: 100vh means the height of this bg element to be 100% of the viewport height
min-height: 500px sets the minimum height of the element
background-position: center center will center the image vertically and horizontally at all times
background-repeat: no-repeat prevents the image from repeating and creating the tiled look
background-attachment: fixed keeps the image fixed in the viewport so even when you scroll down it won't move. Creates the parallax scrolling effect where the background content moves at a different speed than the foreground content while scrolling. When scrolling, it looks like the rest of the website scrolls on top of the background image.
background-size: cover will make the background image resize to fit the size of the screen
background-color: #1d3557 will set a background color that will be displayed while the background image is loading

This code worked well on laptops, but on iPhones and iPads (haven't tested on other types of devices), the background image was very zoomed-in, leaving me with a pixelated image.

After some research, I learned that the problem was with the background-attachment property. Some mobile devices have a problem with background-attachment being fixed, so to fix this, you just need to use media queries to turn off the parallax effect for mobile devices by setting background-attachment to scroll.

/* Increase/decrease the pixels if needed */
/* For all devices with a screen size smaller than 1366px, the background-attachment property will be scroll instead of fixed */

@media only screen and (max-device-width: 1366px) {
  .bg {
    background-attachment: scroll;
  }
}

Now, you should be able to see the full background image on all devices instead of a pixelated corner of the image!

Deploying Rails API Backend + React Frontend App to Heroku

Cindy — Fri, 10 Jul 2020 00:48:22 +0000

In this post, I’m going to write about my journey hosting an app on Heroku for the first time. I'll also be going over the steps on how to deploy, so please feel free to follow along. I struggled a lot, especially with deploying the backend, before I was finally able to get the app up and running, so I'll also talk about what kind of errors I ran into and hopefully, that will help anyone who is experiencing the same issues.

Preparation Before Deploying
Setting up Heroku CLI
Deploying App to Heroku
- Step 1: Setting up Rails API Backend
- Step 2: Deploying Rails API Backend
- Errors I Encountered for Rails App and How to Debug
- Step 3: Deploy React Frontend

Preparation Before Deploying

I already had my Rails backend and React frontend in two separate GitHub repositories. This is important because the setup is different. If you have your app is set up where both the frontend and backend are combined into one, you can refer to this video
My Rails API already has PostgreSQL as the database. If you don't have PostgreSQL set up, refer to Converting Rails from SQLite3 to PostgreSQL. For future reference, if you know that you will be creating an app that you plan to deploy to Heroku, run rails new your-app-name-here --api --database=postgresql so you don't have to switch from SQLite later.
I created a Heroku account. If you want to learn more about how the free option of Heroku works, read How FREE Heroku really works and how to get maximum from it?
I installed Heroku's Command Line Inteface (CLI). This allows you to create and manage your Heroku apps from the terminal. I followed Heroku’s guide to set it up.
Rails version 6.x
Ruby version 2.6.1 and above
Pushed all changes to Git before deploying
I deployed from the master branch of my project

Setting up Heroku CLI

Since I use a Mac, I just opened up my terminal and ran

$ brew tap heroku/brew && brew install heroku

After you have installed the CLI, in your terminal, run

$ heroku login

Follow the prompts to log in to your Heroku account.

Deploying App to Heroku

Since I had my frontend and backend on separate repositories, I had to deploy the two separately to Heroku, so I created two separate Heroku apps. Using my app as an example, I named one Heroku app, the-next-episode-api, for the Rails backend and the other as the-next-episode for the React frontend. Note, the names of the apps don't have to match what you have for your GitHub repos.

Step 1: Setting up Rails API Backend

Make sure you have a root route/path in your config/routes.rb and a static page that can be rendered when the app is first opened before React takes over. I didn't have one the first time I deployed my backend and I got a 404 error when I opened the Heroku app in the browser.

Heroku's guide goes over how to create a welcome page. The guide also explains that "Rails 6 no longer has a static index page in production by default. When you’re using a new app, there will not be a root page in production, so we need to create one."

From the Heroku guide:
We will first create a controller called welcome for our home page to live:

rails generate controller welcome

Next we’ll add an index page:
In file app/views/welcome/index.html.erb write:

<h2>Welcome to ...</h2>

Now we need to make Rails route to this action. We’ll edit config/routes.rb to set the index page to our new method:

In file config/routes.rb, on line 2 add:

root 'welcome#index'

You can verify that the page is there by running your server:

rails server

And visiting http://localhost:3000 in your browser. If you do not see the page, use the logs that are output to your server to debug.

Step 2: Deploying Rails API Backend

Navigate into the directory of your Rails backend
```
cd the-next-episode-api
```
Create Heroku app
```
heroku create the-next-episode-api
```

Initialize Heroku git remote

git remote add heroku git@heroku.com:the-next-episode-api.git

Add, commit, and push to your Heroku remote

git add .
git commit -m "first Heroku deploy"
git push heroku master

Migrate your database (don't need to run heroku run rake db:create)
```
heroku run rake db:migrate
```
(only if you need to seed database)
```
heroku run rake db:seed
```
If you have any keys you need to keep secret, like for JWT or external API, Heroku does not recognize ENV variables, so you need to configure those variables. There are two ways to do so:

Method 1: Can do so in Heroku CLI

heroku config:set API_KEY=put-your-api-key-here

Confirm variable is set, by running

heroku config
GITHUB_USERNAME: joesmith
API_KEY:   your-api-key-here

OR

heroku config:get API_KEY
your-api-key-here

Method 2: Go to your app's settings on heroku.com and scroll down to Config Vars and add it there.

Errors I Encountered for Rails App and How to Debug

404 Error (page can't be found)

Solution: add root route to config/routes

I mentioned this before in the Setting up Rails API Backend section, but to fix this, I had to figure out why I was getting this error. To get a more detailed look at the error, I ran heroku logs in the terminal and scrolled up until I saw an error that said ActionController::RoutingError (No route matches [GET] "/").

So after some research, I realized I was getting this error because I did not have a root route.

500 Error

Solution: Fix a couple of methods in my application_controller.rb

I was getting a 500 error because of the authorization/authentication methods I had in my application_controller. The methods were looking for a JSON Web Token or current_user, but logging in and creating a user shouldn't require a JSON Web Token. That wouldn't make sense, so I added a check to check if a token exists (shouldn't exist if user is trying to log in/sign up),

def user_id
  if decoded_token
    decoded_token[0]["user_id"]
  end
end

After updating these methods, I used Postman to check all my endpoints to make sure they are working like they're supposed to. Now, I was able to create a new user and log in without needing a token. I also checked the other endpoints that didn't need authorization and ones that did. They all worked!

So, I added, committed, pushed (git push heroku master) the changes, and opened the Heroku app again. I went to Postman and replaced http://localhost:3000/api/v1/shows with https://the-next-episode-api.herokuapp.com/api/v1/shows and I got my JSON data. I checked all my other endpoints too just in case and everything worked, so I moved onto deploying my React frontend.

Step 3: Deploy React Frontend

1. If using React Router, create file in project's root directory named static.json that has the following code:

{ "root": "build/", "routes": { "/**": "index.html" } }

In this stack overflow post, the second answer explains why we need this file,

"The public static directory is mapped to the / endpoint, and visiting this endpoint from a browser will download the index.html webpage. This webpage in turn loads the React components. And because React Browser Router is a React component, the routes are loaded dynamically after visiting the / endpoint. In other words, before the index.html webpage is loaded all our React Browser Router routes will result in 404 errors on Heroku. To resolve this issue, a static.json file can be used to map any endpoints with the following pattern /** to the index.html file, which in turn will load React Browser Router and correctly load the react components for that route."

2. Update all the URLs in your fetch requests or any other reference to your Rails API

Replace all http://localhost:3000 with the URL of your deployed backend, https://your-app-name-here-api.herokuapp.com.

If you have your routes namespaced, like http://localhost:3000/api/v1/..., replace ONLY the http://localhost:3000 part. Leave this part /api/v1/.... So, it should look something like

https://your-app-name-here-api.herokuapp.com/api/v1/...

3. Create Heroku app set to create-react-app buildpack:

heroku create your-app-name-here --buildpack https://github.com/mars/create-react-app-buildpack.git

Without the buildpack, Heroku will deploy the development build (which is slow) of your React app instead of the optimized production build.

4. Initialize Heroku remote:

git remote add heroku git@heroku.com:your-app-name-here.git

5. Add, commit, and push to Heroku remote:

git add .
git commit -m "First Heroku deploy with create-react-app"
git push heroku master

6. Open app and you're done!

heroku open

This is my app, The Next Episode if you want to check it out.

Thanks for reading and hope this helped!

Form in a Semantic UI React Modal

Cindy — Tue, 16 Jun 2020 05:41:30 +0000

Modality is a design technique that draws a person's attention to a task or some important information. A modal grabs a user's attention by covering and temporarily disabling interactions with the main view of the site until the user dismisses the modal by clicking the close button or clicking anywhere outside of the modal.

I like to put short forms in modals because doing so allows the website to stay clean and simple. In this post, I'll be going over how I implement a controlled form in a controlled modal using React and the Modal component from Semantic UI React.

Install semantic-ui-react library

Run the following in your React project

npm i semantic-ui-react  OR  yarn add semantic-ui-react

Create a form component

In React, you want to create a controlled form. A controlled form is a form that derives its input values from state and updates state. Controlled forms are useful because we can easily pass the form data to other components.

You can use the Form component that Semantic UI React offers or just the regular HTML form tag. If you plan to use the

component, remember to import it

import { Form } from "semantic-ui-react";

// src/components/Login.js

import React, { Component } from "react";

class Login extends Component {
  state = {
    fields: {
      username: "",
      password: "",
    },
  };

  handleChange = (e) => {
    const newFields = { ...this.state.fields, [e.target.name]: e.target.value };
    this.setState({ fields: newFields });
  };

  handleLoginSubmit = (e) => {
    e.preventDefault();
    // whatever you want to do when user submits a form
  };

  render() {
    const { fields } = this.state;

    return (
          <form onSubmit={(e) => {
            this.handleLoginSubmit(e);
            this.props.handleClose();
           }}>
            <label htmlFor="username">Username</label>
            <input
              className="username"
              type="text"
              name="username"
              placeholder="Username"
              value={fields.username}
              onChange={this.handleChange}
            ></input>
            <label htmlFor="username">Password</label>
            <input
              className="password"
              type="password"
              name="password"
              placeholder="Password"
              value={fields.password}
              onChange={this.handleChange}
            ></input>
            <button>Log In</button>
          </form>
    );
  }
}

export default Login;

Notice that I am calling a method handleClose() when the form is submitted. I will explain in the Create modal section why I am invoking this method.

Import

At the top of the file of the component where you want to use the Modal, add

import { Modal } from "semantic-ui-react";

Create modal

In a separate file from Login.js, I'll just call it Modal.js. Remember to import the form into this file.

// src/components/Modal.js

import Login from "./Login";

class PostsList extends Component {
  state = {
    modalOpen: false,
  };

  handleOpen = () => this.setState({ modalOpen: true });

  handleClose = () => this.setState({ modalOpen: false });

  render() {
    return (
       <div>
          <button onClick={this.handleOpen}>Login</button>
          <Modal
            open={this.state.modalOpen}
            onClose={this.handleClose}
            closeIcon
          >
            <Modal.Header>Login</Modal.Header>
            <Modal.Content>
              <Login handleClose={this.handleClose} />
            </Modal.Content>
          </Modal>
        </div>
     )
   }
}

To create a controlled modal, we will need state. Notice in the state I have a key, modalOpen, that I initially set to false. I will be using that property to handle opening or closing the modal.

I also wrote methods, handleOpen and handleClose, which will set modalOpen in state to true or false. I will explain these in a bit.

The Modal component has many props, such as open. This prop takes a boolean value and controls whether or not the Modal is displayed. If open=true, then the Modal is displayed. Set open={this.state.modalOpen}. Because modalOpen is initially set to false, the Modal is not displayed.

To open the Modal, we have a button that says Login. When a user clicks the button, handleOpen method will be called, changing modalOpen from false to true, which will display the Modal.

The Modal component also has onClose prop that will invoke handleClose when the modal is closed, setting modalOpen back to false.

Notice I am passing the handleClose method to the Login component. This is because I want the modal to close when the user submits the form. Without this method, the user would have to submit the form and then click the close icon or click outside of the modal in order to close the modal.

A Modal has three main sections, the header, content, and footer, but you don't have to include all three. The Login component (the form) will go in between Modal.Content, which is the body of the Modal.

When you are done, you should have something that looks like this:

Types of Components in React

Cindy — Thu, 21 May 2020 02:55:10 +0000

There are two types of components in React: function and class.

Function Component

Function components are the simplest way to write a component. To write a function component, just declare a function.

import React from "react";

function Book(props) {
  return <h1>{props.book.title}</h1>
}

export default Book

Remember to import React in order to return a JSX element.

With ES6, you can now use arrow functions to define a function component. If you have a simple component, you can even take advantage of the implicit return that comes with arrow functions. If you are only passing one argument, you can drop the parentheses.

// should also have imports and exports here

const Book = (props) => {
  return <h1>{props.book.title}</h1>
}

const Book = props => <h1>{props.book.title}</h1>

Class Component

Class components are defined using the ES6 class.

Unlike function components, class components use a render method to return JSX. A class component must have the render method.

import React from "react";

class Book extends React.Component {
  render() {
    return <h1>{this.props.book.title}</h1>
  }
}

export default Book

Differences when using props

In function components, props must be explicitly passed as an argument in order to use the props.

In class components, access props by writing this.props.book. We do not need to explicitly pass in props to use it, unless we are trying to access props in the constructor method.

If for some reason you want to save the author from props to the state of the component, you can do so like this (however, usually you don't want to initialize state from props because it creates a second source of truth):

// function
const Book = props => <h1>{props.book.title}</h1>

// class
class Book extends React.Component {
  constructor(props) {
    super();
    this.state = {
      author: props.book.author
    };
  }

  render() {
    return <h1>{this.props.book.title}</h1>
  }
}

State

Function components do not have state. However, React Hooks now make it possible to use state in function components. I do not talk about hooks in this article, but you can read more about it in the React Docs. If you are going to need state to store data that you know is going to change, then use a class component. Class components extend React's Component class, which gives the component the ability to have state. You can set initial state like in the example above, or now with ES7, we can use the state property to set initial state:

class Book extends React.Component {
  state = {
    author: this.props.book.author
  }

  render() {
    return <h1>{this.props.book.title}</h1>
  }
}

Which one should I use?

Use function components when you simply want the component to display content. In this example, we just want to display a book's information.

const Book = (props) => {
  return <div>
    <h1>{props.book.title}</h1>
    <h3>{props.book.author}</h3>
    <p>{props.book.summary}</p>
  </div>
}

If you know that you are going to be writing more business logic, need state, or making fetch request to an API, then use a class component. Also, if you need to use any lifecycle methods, such as componentDidMount, use a class component. Function components do not have lifecycle methods.

I like to start with a class component if I'm not sure which one to use. Later on, when I know the component will only be rendering content, I'll change it into a function component.

It is a good idea to change class components to function components. Function components are more stable and predictable because it returns the same thing every time, as long as the props are the same. Functional components update based on prop changes or if their parent component re-renders. When other developers see that you are using a function component, they can easily understand your intentions.

Thanks for reading!

Rendering JSON in a Rails API

Cindy — Thu, 30 Apr 2020 19:11:05 +0000

To go over rendering JSON in a Rails API, I will use an example.

Example:

Models: doctor, patient, appointment
Relationships:

Doctor has many patients
Doctor has many appointments, through patients
Patient has many doctors
Patient has many appointments, through doctors
Appointment belongs to a doctor and belongs to a patient

# app/controllers/appointments_controller.rb

def index
  appointments = Appointment.all
  render json: appointments.to_json
end

def show
  appointment = Appointment.find_by(id: params[:id])
  render json: appointment.to_json
end

In this example, we have all of Appointment model's instances / objects assigned to the local variable, appointments. By using render json:, we are converting all the model instances into JSON. to_json method can add tacked on, but it is optional, as it will be called implicitly, thanks to Rails doing work behind the scenes.

# config/routes.rb

Rails.application.routes.draw do
    get '/appointments' => 'appointments#index'
    get '/appointments' => 'appointments#index'
end

Once you have the routes, controller, and models set up, you can start the Rails server to view your appointments.

# '/appointments/'
[
    {
        id: 1,
        doctor_id: 1,
        patient_id: 1
        },
    {
        id: 2,
        doctor_id: 2,
        patient_id: 2
    }
]

Adding relationships

So far we can only see the appointments information, which is a bunch of ids. What if we wanted to see an appointment's doctor and patient information? We can add options, such as include.

# app/controllers/appointments_controller.rb

def index
  appointments = Appointment.all
  render json: appointments.to_json(include: [:doctor, :patient])
end

def show
  appointment = Appointment.find_by(id: params[:id])
  render json: appointment.to_json(include: [:doctor, :patient])
end

[{
    id: 1,
    doctor_id: 1,
    patient_id: 1
    doctor: {
        id: 1,
        name: "Bob",
        created_at: "2020-04-26T21:56:50.874Z",
        updated_at: "2020-04-26T21:56:50.874Z"
    },
    patient: {
        id: 1,
        name: "Fred",
        created_at: "2020-04-26T21:56:50.924Z",
        updated_at: "2020-04-26T21:56:50.924Z"
    }
}]

We now have both the doctor's and patient's information, but what if we don't want to show certain attributes, like created_at and updated_at?
We could use the option, only:

# app/controllers/appointments_controller.rb

def show
  appointment = Appointment.find_by(id: params[:id])
  render json: appointment.to_json(
        :include => {
          :doctor => {only: [:name]}, 
          :patient => {only: [:name]}
        })
end

However, it is best practice to try to keep most of our logic out of our controllers. So, we can move this logic of arranging our JSON data the way we want it to a serializer class.

What is serialization?

Serialization is the process of translating data structures or object state into a format that can be stored or transmitted and reconstructed later (Wikipedia).

What is JSON serialization?

JSON is a data format that encodes objects in a string. JSON serialization is the process of transforming an object, in our case, a hash because we are writing Ruby, into that JSON string.

Generate serializer classes using Fast JSON API

Fast JSON API is a gem you can install in your project. It is one of many gems that you can use. Fast JSON API gives us a new rails generator, serializer, which allows you to quickly create a serializer class. You will need a serializer class for each model, for which you have data you want to serialize.

Running rails g serializer Appointment will create a serializers folder within app folder and then create a file called appointment_serializer.rb. You will need to add the relationships to AppointmentSerializer, just like you would in the models files.

# app/serializers/appointment_serializer.rb
class AppointmentSerializer
  include FastJsonapi::ObjectSerializer
  belongs_to :doctor
  belongs_to :patient
end

Do the same thing for doctor and patient serializer. We need a serializer for these models as well because we want to specify the attributes we want to show.

# app/serializers/doctor_serializer.rb
class DoctorSerializer
  include FastJsonapi::ObjectSerializer
  attributes :name
end

# app/serializers/patient_serializer.rb
class PatientSerializer
  include FastJsonapi::ObjectSerializer
  attributes :name
end

Then, in the controller:

def show
  appointment = Appointment.find(params[:id])
  options = {
    include: [:doctor, :patient]
  }
  render json: AppointmentSerializer.new(appointment, options)
end

Notice AppointmentSerializer.new(). In order to start using the serializer, we have to create a new instance of the AppointmentSerializer class and then pass in the variable to turn it into JSON. We will also pass in the options parameter to the serializer to include the doctor and patient objects and their attributes. We used this for the show action, but this can be used in any of the controller actions.

# RESULT:

{
  "data": {
    "id": "2",
    "type": "appointment"
    },
    "relationships": {
      "doctor": {
        "data": {
          "id": "2",
          "type": "doctor"
        }
      },
      "patient": {
        "data": {
          "id": "2",
          "type": "patient"
        }
      }
    }
  },
  "included": [{
      "id": "2",
      "type": "doctor",
      "attributes": {
        "name": "Bob"
      }
    },
    {
      "id": "2",
      "type": "patient",
      "attributes": {
        "name": "Fred"
      }
    }
  ]
}

This is the way Fast JSON API structures the data. Other serializer gems will structure data differently.

Thanks for reading!

Rails Routes - CRUD & RESTful

Cindy — Thu, 09 Apr 2020 04:49:43 +0000

CRUD

C = Create
R = Read
U = Update
D = Delete

CRUD are the four ways we can interact with data. These are the basic functions that all models should have.

REST = Representation State Transfer
REST is an architectural pattern for defining routes. It is a way of connecting the HTTP verbs (GET, POST, PATCH/PUT, DELETE) and the CRUD actions. RESTful routing allow developers to keep things simple and consistent for other developers or users to use.

Imagine we had the model / class: Recipe

Create

Need to be able to create a new class object and save the object to the database.

Create the routes - two parts.

First - GET the HTML form to create new object, in this case, recipe.

# In the routes file
get '/recipes/new', to: 'recipes#new', as: 'new_recipe'

- get = HTTP verb
- '/recipes/new' = route
- recipes = controller name
- new = action that will be in the controller file

* as: is an option that you can use to rename your route if needed

This is what the controller action would look like in the controller file:

# In the recipes_controller.rb file

class RecipesController < ApplicationController

def new
end

end

Second - POST the new recipe

post '/recipes', to: 'recipes#create'

- post = HTTP verb
- '/recipes' = route
- recipes = controller name
- create = action

# In the recipes_controller.rb file

class RecipesController < ApplicationController

def new
end

def create
end

end

Read

There are two ways we can read / get data from the database. We can get all of the objects, recipes, of a class or a specific object of a class.

get '/recipes', to: 'recipes#index'

- index = action

Index page will render the index view page that will display all the objects of a class.

get '/recipes/:id', to: 'recipes#show'

- :id = id of the record / object that was 
automatically assigned when record was created in 
the database

The id number is needed in order to find the object and then render the show page (show view) of that specific object.

# In the recipes_controller.rb file

class RecipesController < ApplicationController

def new
end

def index
end

def show
end

end

Update

Also has two parts:

First - Need route and controller action to render the edit form (edit view).

get '/recipes/:id', to: 'recipes#edit'

Note: Need to pass in id number again in order to find the specific object we want to edit.

Second - Need route and controller action to update the object

patch/put '/recipes/:id', to: 'recipes#update'

- patch & put = HTTP verbs. Use patch when you
 want to make a small change to the object. Use 
put when you want to replace everything.

# In the recipes_controller.rb file

class RecipesController < ApplicationController

def new
end

def create
end

def index
end

def show
end

def edit
end

def update
end

end

Delete

Use to delete a record / object from database.

delete '/recipes/:id', to: 'recipes#destroy'

# In the recipes_controller.rb file

class RecipesController < ApplicationController

def new
end

def create
end

def index
end

def show
end

def edit
end

def update
end

def destroy
end

end

A shortcut to get all seven of these routes in rails is to write:

resources :recipes

You can also limit down to specific routes by using only. Just list the routes you need.

resources :recipes, only: [:new, :create, :show]

Ruby Enumerable

Cindy — Thu, 19 Mar 2020 03:38:16 +0000

The Ruby Enumerable module is an amazing tool. It provides many ways (methods) to go over every element in an array and do something to the elements or grab certain elements from the array. There are many methods, but I am going to go over a few that I use often.

select method

Array#select (# denotes a method) will go through every element in the array and pick out the elements that satisfies the condition that is inside the block, which starts and ends with a curly brace ({}) plus anything inside the curly braces. These elements are then put into a new array and the new array is returned. The elements that do not satisfy the condition are not included in the new array.

The word in between the | | (“pipe” character) represents one element. You can call it whatever you like, but I usually like to call it based on what is in the array. In the example, we had an array of numbers, so I used the word “number”. I like to keep the word singular to remind myself that it represents one element. If we had an array of names, I would use |name|.

There are two ways you can write the block. One using curly braces, one using do…end. If the block is going to be just one line, use curly braces. If the block is going to be multiple lines, use do…end. In the example, I used do…end for a block that usually can be done in a one line, which works, but the code looks better and more concise if you use curly braces when you can.

map / collect method

Array#map and Array#collect have the same function. They will go through every element in the array and do “something” to every element. That “something” / action will be written inside the block. For this method, you will have an action inside rather than a condition like we did for the select method. These newly modified elements are then put into a new array and the new array is returned.

find method

Array#find will go through every element in the array until it finds the first element that satisfies the condition. That element is returned and the looping / iterating will end.

If there are no elements that satisfy the condition, nil will be returned.

DEV Community: Cindy

Differences Between the CSS position Property Values

position: static;

position: relative;

position: absolute;

position: fixed

position: sticky

Example:

Change Navbar Style on Scroll Using React and CSS

Using Netlify Forms for a Contact Form

Step 1: Create an HTML form

Step 2: Spam prevention.

Honeypot field

reCAPTCHA 2

Step 3: Add the other input fields you need to complete the form

Responsive Background Image Using CSS

Deploying Rails API Backend + React Frontend App to Heroku

Table of Contents

Preparation Before Deploying

Setting up Heroku CLI

Deploying App to Heroku

Step 1: Setting up Rails API Backend

Step 2: Deploying Rails API Backend

Errors I Encountered for Rails App and How to Debug

Step 3: Deploy React Frontend

Form in a Semantic UI React Modal

Install semantic-ui-react library

Create a form component

Import

Create modal

Types of Components in React

Function Component

Class Component

Differences when using props

State

Which one should I use?

Rendering JSON in a Rails API

Example:

Adding relationships

What is serialization?

What is JSON serialization?

Generate serializer classes using Fast JSON API

Rails Routes - CRUD & RESTful

Create

First - GET the HTML form to create new object, in this case, recipe.

Second - POST the new recipe

Read

Update

First - Need route and controller action to render the edit form (edit view).

Second - Need route and controller action to update the object

Delete

Ruby Enumerable

select method

map / collect method

find method

`position: static;`

`position: relative;`

`position: absolute;`

`position: fixed`

`position: sticky`