DEV Community: Sean Oh

Boost your styling with Bootstrap 🚀

Sean Oh — Tue, 04 Oct 2022 03:04:28 +0000

Throughout several app-building projects I have finished during my software engineering bootcamp, styling has always been a hurdle which I put aside as the last part to work on. As I've only experienced using the regular CSS (Cascading Style Sheets) in my previous projects, styling a website was nothing more than a boring, tedious job that I'd always have to modify everything manually (and which in most cases didn't work the way I wanted anyway). Then I met Bootstrap as I was working on my final project for the bootcamp, which completely changed the way I view website styling processes. Now I can't imagine how I would ever do styling without Bootstrap and really wish I knew of this when working on my earlier projects. Bootstrap is very easy to use, yet very effective in what it can do to make your websites look so much more visually pleasing.

What is Bootstrap?

According to Wikipedia, Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. In short (and in my own words), it's a tool that help you better write CSS codes more effectively and efficiently.

How to actually use Bootstrap

To use Bootstrap, you will first need to install Bootstrap which you can do in several different ways.

CDN Installation

Go ahead and add the below code inside the <head> tag in your index.html file before all other stylesheets. Note, this code may vary as the new version of Bootstrap is released.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

2. Installation via yarn

Enter the following command in your terminal:

yarn add react-bootstrap bootstrap

3. Installation via npm

Enter the following command in your terminal:

npm install react-bootstrap bootstrap

IMPORTANT : If you are installing via yarn or npm, make sure you add import 'bootstrap/dist/css/bootstrap.css'; in your index.js file.

Once installing Bootstrap using one of the above methods is completed, the world is your oyster! The real power of Bootstrap comes from it being open-source. That is, Bootstrap offers hundreds (if not thousands) of styling elements and effects that are available online, which is how you can apply styles to your HTML without having to write codes in your .css file. You can get started here and navigate through the options it provides and use the styles you'd like to use as a template in your HTML file.

A quick example would be buttons. For your website or app to be dynamic, it is inevitable that you need to add buttons on the website. In regular HTML, the codes for creating buttons would look something like this:

<button>Submit</button>
<button>Cancel</button>

which would be displayed on your browser like this:

These plain ol' buttons don't look too bad, but they could definitely look better with some styling added. By using Bootstrap, you can style it in the way you want without having to add some complex CSS codes. To do so, you can simply plug the below codes (that are pre-generated by Bootstrap) into your HTML tags:

<button type="button" class="btn btn-outline-success">Submit</button>
<button type="button" class="btn btn-outline-danger">Cancel</button>

which will then upgrade your plain ol' buttons to...

Much better!

The example I showed above is only a beginning; you can explore and find yourself many more options to add to your website. All you would need to do is to navigate through the different components or effects you want to apply, then simply add the pre-generated templates to your codes after customizing it so it is altered to the way it is needed for your website. Another effect I personally found especially helpful was hover effects, which allows Bootstrap make your website more responsive.

But what if you are using React?

Most Bootstrap codes you'd find online are provided in an HTML format so you can directly add it to your HTML tags. However, if you are a React lover (like me), the keywords and syntaxes needed to add the Bootstrap effects are a bit different. For example, classification for HTML tags would be <tag class="className" />, while the same attribute for JSX in React components would be <tag className="className" />. Hence, the code you copy directly from the Bootstrap template and paste into your React components may not work quite right. Luckily, there is a website I found which converts all the HTML codes into a JSX format for you. Living in the future sure feels great!

For me, using Bootstrap sure was a guilty pleasure because it was super easy to use and it surely made my life so much easier, yet I felt somewhat unaccomplished since it does all the magic. Like, shouldn't I spend more time and struggle more in order to yield such a result? What I've come to decide then was that Bootstrap exists for all developers around the world to help save time and code better. It is there to use, so why not use it? But I can't deny that it is still crucial that you have to have a basic understanding of how to use the classic CSS and how styling webpage and components work. If you rely fully on Bootstrap, you will never be able to learn how CSS works under the hood. As I (luckily?) spent a good amount of time struggling with classic CSS, though, I guess I could use some help from what Bootstrap has to offer for the time being. That way I could not only have a more visually appealing website, but also spend more time focusing on the website's fundamental structure, functionality, and making the user experience more pleasant.

References

Your Auth Cheat Sheet

Sean Oh — Tue, 13 Sep 2022 02:28:57 +0000

I'm not gonna lie; it took me quite some time to understand (and I'm still taking steps to get closer to the full understanding of it) the fundamental concepts of sessions, cookies, authentication and authorization along with password protection (including the crazy processes with BCrypt) in Rails. In this post, I'm just going to dabble in each concept mentioned above to give you an idea, then share my "cheat sheet" that will hopefully help you with writing sign-up and log-in/out features on your Rails backend. As the frontend design for these features is all about creativity, I will leave it up to you on that part. ~~(of course not because I'm too lazy to come up with an example)~~

Cookies and Sessions

Even not as a developer, you might have heard of cookies before. And there is another thing called sessions when you dive deeper into learning the auth concept in Rails. So what are exactly cookies and sessions? Let's say that you recently bought a new laptop, and you're so excited to use it. You'd browse on the internet, send emails, shop online, etc. In order for you to do these things, you have probably accessed google.com, gmail.com, amazon.com, etc. In the websites' perspectives, since you have just unboxed your new laptop and accessed those websites "for the first time," these websites would have no idea who you are.

Seeing you for the first time ever, the website's reaction would probably be like "Hey, I've never seen you before. It's nice to meet you. So that I can recognize you, please have this name tag with you next time you visit here."

In this analogy, you can think of the name tag as cookies. It is a unique distinguisher for your (new) laptop so that the website doesn't have to ask who you are (or what other information you have with you) every time you visit there. Now that your laptop (or your browser) has cookies, the website will have to remember the fact that it has assigned you those cookies. To do so, the website's server will make a list of the name tags(cookies) it has assigned to various computers and browsers. Now this "list" is called a session. Going forward, when you visit the website (which you've previously visited) with the name tag(cookie) you've been assigned with, the website will see if your name tag(cookie) is in the list(session) of the name tags that it has assigned before to determine whether or not you have already visited this website in the past.

Authentication & Authorization

Authentication and authorization are two vital information security processes that administrators use to protect systems and information. They may seem to be conceptually the same, but have slightly different aspects in what they imply.

Authentication verifies the identity of a user or service. That is, when you log into your Gmail account (if you have one) using your username and password, Google's server will issue your browser the above-mentioned cookie. Then, as you navigate through several different pages on Gmail (or anywhere on google.com for that matter), your browser will show the cookie to the server, which the server then will verify the cookie and let you stay logged in.

Authorization determines the user's access rights. In addition to authentication, authorization gives certain users permission to access specific resources. For example, everyone can go to Apple Music to listen to whatever song they like for 90 seconds as "preview." However, only the authenticated users (those who paid for the premium service and logged into Apple Music) will be able to listen to the full songs, create their own playlists, etc.

Now it's time for what you've been waiting for... the cheat sheet! I highly recommend, though, that you first have gained solid understanding of the auth process in Rails and fully understand what is going on under the hood before just referring to this cheat sheet because otherwise this cheat sheet would be a mere template that probably will not make any sense.

/config/routes.rb

Rails.application.routes.draw do
  post '/signup', to: "users#create"
  get '/me', to: "users#show"
  post '/login', to: "sessions#create"
  delete '/logout', to: "sessions#destroy"
end

/app/models/user.rb

class User < ApplicationRecord
    has_secure_password
end

/app/controllers/users_controller.rb

class UsersController < ApplicationController

    before_action :authorize, only: [:show]

    def create
        # create a new user
        # save their hashed password in the database
        user = User.create(user_params)
        # save the user's ID in the session hash
        if user.valid?
            session[:user_id] = user.id
        # return the user object in the JSON response
            render json: user, status: :created
        else
            render json: { error: user.errors.full_messages }, status: :unprocessable_entity
        end
    end

    def show
        # if the user is authenticated, return the user object in the JSON response
        user = User.find_by(id: session[:user_id])
        render json: user
    end

    private

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

    def authorize
        return render json: { error: "Not authorized" }, status: :unauthorized unless session.include? :user_id
    end

end

/app/controllers/sessions_controller.rb

class SessionsController < ApplicationController

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

  def destroy
    session.delete :user_id
    head :no_content
  end

end

References

Application Structure (feat. Separation of Concerns)

Sean Oh — Mon, 22 Aug 2022 03:46:00 +0000

When I first started learning Ruby and Sinatra framework, it took me quite some time to get myself familiarized with the application structure. The idea of this whole file structure thing at first looked like this to me:

I mean okay, separation of concern is important, but how do I know what to put, and in where? For those who may be struggling to understand the application structure concepts, this post can guide you through what each of your folder(directory) and file should contain.

What is "Separation of Concerns"?

To understand the whole idea of creating this complex (and even intimidating) structure before working on your application, understanding separation of concerns would be the key concept to get familiarized with first. "Separation of concerns" is a design principle for separating a computer program into distinct sections. Without following it, your application might get very messy and hard to understand for other developers. It's like having your belongings organized in the right place. You would want your toothbrush in the toothbrush holder in your bathroom, cups in the cabinet of your kitchen, your mouse to the right-hand side to your laptop or keyboard (given that you use your mouse set up for right-handed people. (~~TMI: I'm left-handed but use a right-handed mouse.~~), and so on.

Just like that, you would want your codes located in the proper file and the proper folder. Not so related to the topic of separation of concerns, but it is also very important to name your files and folders correctly when it comes to using Active Record (a Ruby gem that will save you lots of time when writing object-relational mapping or ORM), as it is a proponent of using certain formats and grammars to ensure locating correct classes and running correct methods. You can find more info on the Active Record's naming conventions here.

Sinatra Application Structure

Alright, let's get down to business. Below is how you should set up your folders and files structure for your application, with each of their own responsibility:

app/models: This folder contains Active Record model files with the file extension of .rb. Each model file contains code that accesses and updates data in the database using classes that inherit from ActiveRecord::Base.
config (usually contains the environment.rb file): Code in this folder is responsible for environment setup, like requiring files/gems, and establishing a connection to the database.
db/migrate (usually contains timestamp_create_(model_name_in_plural).rb files): This folder contains Active Record migration files. Each migration file contains code that is responsible for creating and altering the structure of the database (making new tables, adding columns to existing tables, etc).
db/seeds.rb: This file allows us to easily add sample data to the database.
Gemfile (a file with no extension): This file lists all the gems/dependencies the application would need to depend on.
Rakefile (a file with no extension): This file contains code for common tasks that you can easily run from the command line, such as rake console.

Once you get comfortable with the concept, it's not that complicated after all. In fact, you will even feel more comfortable following this convention before you know it.

Resources

https://en.wikipedia.org/wiki/Separation_of_concerns

React Basics for Dummies

Sean Oh — Mon, 01 Aug 2022 05:45:02 +0000

By the time you have searched "react" and come across this blog post, you probably have finished some course materials on HTML, CSS, and JavaScript. Now with some basic knowledge of how to use them to create cool websites, there is something even cooler called "React".

What is React?

You can find the official definition of React here, but for those who prefer definitions straight to the point, I would put it this way: it's like a built-in software (~~officially called a "library"~~) installed inside JavaScript, so you can use that software to write your codes more easily.

Imperative vs. Declarative

If I were to pick one of the many benefits of using React, I would definitely say that React is declarative (versus imperative). Let me explain the difference between the two in a very simple way. Let's say that you order your assistant (we all have a personal assistant to run your errands, don't we?) to go to Starbucks the next building to get you a cup of coffee. An imperative way of your order would look something like this:

Go out the door of this building
Turn left
Walk 10 meters
See the sign for the name of the building
If the sign reads "Starbucks", go inside the building
Order a grande sized iced vanilla latte
Take out a wallet
Pay the full amount for the order
and so on...

I already got tired of writing more commands and therefore stopped here, but until you finally get your coffee, the list would go on, and on, and on. How would a declarative way of your order look like then?

Get me a grande iced vanilla latte from Starbucks next door

How simple is that? React allows us to give an order in a much simpler way to get the same result as you would do in the vanilla JavaScript!

I could spend the whole hour talking about the other good benefits of using React, but since I don't want this blog post to be so bombarding (honestly I feel like I have written so much already), let me introduce what React is actually composed of.

Components, Props, JSX... what?

React is composed of various "components". Components are the building blocks of React code. It is a JavaScript function, always starting with a capital letter to differentiate from the regular functions from vanilla JavaScript. A React component would look something like this:

function IAmAComponent () {
   return <h1>Hello, I am a component!</h1>
}

A component always returns what's called JSX. JSX, JavaScript XML, allows us to use HTML in JavaScript. (See that h1 tag that looks familiar?)

You may have seen the definition of component as "a function that takes in props and returns JSX." Okay, we now know component, and we also know JSX, but what are props?

Before I explain what props are, I would have to point out that I have said above "components are the building blocks of React code." What does that mean? You will create each component as a block to build, and place them in the top level component. From that top level component, you have access to each of the building block components. For example, an App component as a "parent" component, could have a "child" component called About. As the naming suggests, a "parent" component will pass down "props" to its "child" component(s). When the parent component calls child components, it will assign "props" by giving the prop's name and what that prop points to.

//Parent Component (App)

const movie = {
  title: "Inception",
  genre: "Action/Sci-fi",
  released: 2010
},

function App() {
  return (
      <About
         title={movie.title}
         genre={movie.genre}
         year={movie.released} />
  );
}

//Child Component (About)

function About({ title, genre, year }) {
  return <h2>{title} is a {genre} movie released in {year}.</h2>
}

From the example above, the App component is assigning props when it calls the About component. It's giving "instructions" on what each prop means. For example, title={movie.title} means the prop's name(or label) is title, and it refers to the value of the movie object(which was assigned as a variable on top)'s title key. You could name your prop any way you want (see the prop year above was named year, not necessarily released?), but by convention it is always best to come up with names that are relevant. It's like your mom (parent) telling you as a kid (child) "Hey, I'm going to give you this prop. (handing a prop) This prop's name is title. It means {movie.title} (the title of the movie). Whenever you play in your world, you say title to refer to {movie.title}. OK?"

Then, when the child component writes its own JSX in itself, it can use the prop name title to refer to the {movie.title} which was originated from the parent component.

This really is just the very basics of the general concept of React, and there will be a whole lot more when you actually dive into it. But having this basic concept well drawn in your head may help you understand the awesome features of React moving forward!

Resources

https://en.wikipedia.org/wiki/React_(JavaScript_library)

Love and Hate Relationship with ARRAYS

Sean Oh — Mon, 11 Jul 2022 22:47:48 +0000

During my prework era (my coding bootcamp required completion of about 3 weeks' worth of learning materials before the cohort started which was called prework), I first came across the concept of array. It was when the lesson material briefly explained what the array is, what it looks like, and what it's used for. Very concise and straightforward. "I like this," I thought--only to find two weeks later thinking of arrays makes me want to throw up. Why are there so many methods, why is it such a difficult and complicated process to access one single value, and to make things even worse, how do I link them to my assigned function, etc.? WHY ISN'T ANYTHING I DO WORKING?!

I started hating almost everything about arrays, and almost lost interests in knowing more about it. Then I gave it a second thought, "maybe we can work this out." Just like any other love and hate relationships, I decided to look more closely into this and become better friends with it. Then I was mesmerized by how their methods can make things so convenient and make your life so much easier. Among various methods available for arrays to use in JavaScript, I would like to share some of my favorite iterator methods: .filter(), .map(), and .forEach().

* These are all built-in methods

.filter() "Hey, create a new array with elements I want only!"

.filter() searches through an array, passes each element to a provided callback function. Then it returns a brand new array including elements only that passed the callback function.

Example:

[5, 6, 7, 8, 9].filter(function (num) {
  return num < 8;
});

// => [5, 6, 7]

.map() "Hey, create a new array with each element transformed!"

.map() transforms every element in an array to another value. Like .filter(), it accepts a callback function and passes each element in turn to the callback. The difference, though, is that .map() will return an array of same number of elements in transformed version, while .filter() will give an array with elements that passed the callback function only.

Example:

[1, 3, 5].map(function (num) {
  return num ** 2;
});

// => [1, 9, 25]

.forEach() "Hey, perform this action for each element in my array!"

.forEach() loops through an array and passes a callback function on each element. This does NOT create a new array (like .filter() or .map()), and therefore is useful when you want to iterate through an array to log values.

Example:

weather = [
  "sunny",
  "cloudy",
  "rainy",
  "windy"
];

weather.forEach(function(status) {
  console.log(`Tomorrow's weather could be ${status}.`);
});

// =>
Tomorrow's weather could be sunny.
Tomorrow's weather could be cloudy.
Tomorrow's weather could be rainy.
Tomorrow's weather could be windy.

While I like the nature of arrays and how it can do so much, I'm frankly still far from fully grasping each and every method. But hey, practice makes permanent, and getting to know more about something(or someone) always helps to understand better. That's how all relationship works anyway. I hope my relationship with arrays soon will lean more towards the 'love' side and move away from the 'hate' side. ~~(It will take some time)~~

Reference Sources: