Forem: Akhil

Generate React Components using commands from your terminal

Akhil — Thu, 07 Oct 2021 17:31:36 +0000

Let's first talk about the problem statement.

Your frontend application Fatebook has become huge. You have been following a specific set of patterns to put all the components, pages, shared libraries, etc., in specific directories. Now it is time to hire people but you want to enforce them to follow the same. One way could be a well-documented instruction that they will be given on day 1 and they will be asked to adhere to it.

Another better way would be to create generators which would automatically create new components at specified directories.

Solution

In this blog, we will see the basic use of plopfile generators to create Skeletal React components based on their type from the terminal.

Install plop.js as dev dependency of your React project:

$ npm install --save-dev plop

Plop.js uses plopfile to perform actions.
add, modify, and append are a few of the most commonly used actions.
We can use the add action to create components based on a template. For templating, plop.js uses handlebar template or templateFile.

Create a generator that creates a component under the `src/shared_components` directory.

a generator consists of prompts & actions.
prompts are used to gather user data. It mainly consists of three properties type, name, and message. Internally plopjs uses https://github.com/SBoudrias/Inquirer.js/#question for executing prompts.
actions are used to perform actions of a specific type based on the template provided to it.

// generators/shared_component/Component.jsx.hbs
import React from "react";

const {{properCase name}} = (props) => { 
  return <div>{{properCase name}}</div>; 
};

export default {{properCase name}};



// generators/shared_component/index.js
module.exports = {
  description: 'Create a shared component',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: 'component name(required):',
    },
  ],
  actions: [
    {
      type: 'add',
      path: 'src/components/shared/{{properCase name}}.jsx',
      templateFile: 'generators/shared_component/Component.jsx.hbs',
    },
    {
      type: 'append',
      path: 'src/components/shared/index.js',
      template:
        "export { default as {{properCase name}} } from './{{properCase name}}.jsx';",
    },
  ],
};

We have created a generators directory at the root of the React project. Inside that, we have two files, one is the template file written with handlebars and another file is the generator itself that contains actions and prompts.

Now we can create a plopfile.js at the root level and import the generator created above to use them.

// plopfile.js
const sharedComponentGenerator = require('./generators/shared_component/index');

module.exports = function (plop) {
  plop.setGenerator('shared component', sharedComponentGenerator);
};

Now, let's add a script in package.json to run the plops.

"scripts": {
  ...
  "generate": "plop"
  },

That's it. We can go to our terminal and run npm run generate and it will show the prompt to create the shared components.

Bonus:

I currently use 3 generators, shared_component, component, and page. Below is the code for it:

// generators/component/Component.jsx.hbs
import React from "react";

const {{properCase name}} = (props) => { 
  return <div>{{properCase name}}</div>; 
};

export default {{properCase name}};


// generators/component/index.js
module.exports = {
  description: 'Create a component',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: 'component name(required):',
    },
    {
      type: 'input',
      name: 'folder',
      message: 'which folder in /src/components (default is /src/components):',
    },
  ],
  actions: [
    {
      type: 'add',
      path: 'src/components/{{folder}}/{{properCase name}}.jsx',
      templateFile: 'generators/component/Component.jsx.hbs',
    },
  ],
};

// generators/page/Page.jsx.hbs
import React from "react";

const {{properCase name}} = (props) => { 
  return <div>{{properCase name}}</div>; 
};

export default {{properCase name}};

// generators/page/index.js
module.exports = {
  description: 'Create a page',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: 'page name(required):',
    },
  ],
  actions: [
    {
      type: 'add',
      path: 'src/pages/{{properCase name}}.jsx',
      templateFile: 'generators/page/Page.jsx.hbs',
    },
  ],
};

// plopfile.js
const componentGenerator = require('./generators/component/index');
const sharedComponentGenerator = require('./generators/shared_component/index');
const pageGenerator = require('./generators/page/index');

module.exports = function (plop) {
  plop.setGenerator('component', componentGenerator);
  plop.setGenerator('shared component', sharedComponentGenerator);
  plop.setGenerator('page', pageGenerator);
};

Now, when I run npm run generate, I get the following:

Thanks for reading till the end. I hope people go through plop.js and create stunning automations and share them with the community.

Are you putting your business logic at correct place?

Akhil — Thu, 26 Aug 2021 13:44:17 +0000

This blog is a continuation of the last one where we built an expense manager application with business logic scattered in the controller.

Design pattern

Design pattern is a set of rules that encourage us to arrange our code in a way that makes it more readable and well structured. It not only helps new developers onboard smoothly but also helps to find bugs. 🐛

In Rails' world, there are a lot of design patterns followed like Service Objects, Form Objects, Decorator, Interactor, and a lot more.

Interactor

In this blog, we are going to look at Interactor using interactor gem. It is quite easy to integrate into an existing project.

every interactor should follow SRP(single responsibility principle).
interactor is provided with a context which contains everything that the interactor needs to run as an independent unit.
every interactor has to implement a call method which will be exposed to the external world.
if the business logic is composed of several independent steps, it can have multiple interactors and one organizer that will call all the interactors serially in the order they are written.
context.something = value can be used to set something in the context.
context.fail! makes the interactor cease execution.
context.failure? & and context.success? can be used to verify the failure and success status.
in case of organizers if one of the organized interactors fails, the execution is stopped and the later interactors are not executed at all.

Let's refactor our expense manager

We can create interactors for the following:

create user
authenticate user
process a transaction
- create a transaction record
- update user's balance

Create a directory named interactors under app to keep the interactors.

app/interactors/create_user.rb

class CreateUser
  include Interactor

  def call
    user = User.new(context.create_params)
    user.auth_token = SecureRandom.hex
    if user.save
      context.message = 'User created successfully!'
    else
      context.fail!(error: user.errors.full_messages.join(' and '))
    end
  end
end

app/interactors/authenticate_user.rb

class AuthenticateUser
  include Interactor

  def call
    user = User.find_by(email: context.email)
    if user.authenticate(context.password)
      context.user = user
      context.token = user.auth_token
    else
      context.fail!(message: "Email & Password did not match.")
    end
  end
end

app/interactors/process_transaction.rb

class ProcessTransaction
  include Interactor::Organizer

  organize CreateTransaction, UpdateUserBalance
end

app/interactors/create_transaction.rb

class CreateTransaction
  include Interactor

  def call
    current_user = context.user
    user_transaction = current_user.user_transactions.build(context.params)
    if user_transaction.save
      context.transaction = user_transaction
    else
      context.fail!(error: user_transaction.errors.full_messages.join(' and '))
    end
  end
end

app/interactors/update_user_balance.rb

class UpdateUserBalance
  include Interactor

  def call
    transaction = context.transaction
    current_user = context.user
    existing_balance = current_user.balance

    if context.transaction.debit?
      current_user.update(balance: existing_balance - transaction.amount)
    else
      current_user.update(balance: existing_balance + transaction.amount)
    end
  end
end

app/interactors/fetch_transactions.rb

class FetchTransactions
  include Interactor

  def call
    user = context.user
    params = context.params

    transactions = user.user_transactions

    if params[:filters]
      start_date = params[:filters][:start_date] && DateTime.strptime(params[:filters][:start_date], '%d-%m-%Y')
      end_date = params[:filters][:end_date] && DateTime.strptime(params[:filters][:end_date], '%d-%m-%Y')
      context.transactions = transactions.where(created_at: start_date..end_date)
    else
      context.transactions = transactions
    end
  end
end

Let's now refactor our controllers to use the above interactors.

app/controllers/users_controller.rb

class UsersController < ApplicationController
  skip_before_action :verify_user?

  # POST /users
  def create
    result = CreateUser.call(create_params: user_params)

    if result.success?
      render json: { message: result.message }, status: :created
    else
      render json: { message: result.error }, status: :unprocessable_entity
    end
  end

  def balance
    render json: { balance: current_user.balance }, status: :ok
  end

  def login
    result = AuthenticateUser.call(login_params)

    if result.success?
      render json: { auth_token: result.token }, status: :ok
    else
      render json: { message: result.message }, status: :unprocessable_entity
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :email, :password, :balance)
  end

  def login_params
    params.require(:user).permit(:email, :password)
  end
end

app/controllers/user_transactions_controller.rb

class UserTransactionsController < ApplicationController
  before_action :set_user_transaction, only: [:show]

  def index
    result = FetchTransactions.call(params: params, user: current_user)
    render json: result.transactions, status: :ok
  end

  def show
    render json: @user_transaction
  end

  def create
    result = ProcessTransaction.call(params: user_transaction_params, user: current_user)

    if result.success?
      render json: result.transaction, status: :created
    else
      render json: { message: result.error }, status: :unprocessable_entity
    end
  end

  private

    def set_user_transaction
      @user_transaction = current_user.user_transactions.where(id: params[:id]).first
    end


    def user_transaction_params
      params.require(:user_transaction).permit(:amount, :details, :transaction_type)
    end
end

✅✅ That is it. Our controllers look much cleaner. Even if someone looks at the project for the first time, they will know where to find the business logic. Let's go through some of the pros & cons of the interactor gem.

Pros 👍

easy to integrate
straightforward DSL(domain-specific language)
organizers help follow the SRP(single responsibility principle)

Cons 👎

argument/contract validation not available

- the gem looks dead, no active maintainers

That is it for this blog. It is hard to cover more than one design pattern in one blog. In the next one, we will see how we can use active_interaction and achieve a much better result by extracting the validations out of the models.

Thanks for reading. Do share your suggestions in the comments down below.

Create REST APIs in minutes

Akhil — Mon, 23 Aug 2021 14:41:55 +0000

In my Ruby on Rails series, I have already shared few blogs showcasing the magic of Ruby on Rails. In this blog, we will see how we can create a full-fledged REST API in minutes.

Expense Manager API

Create a user
Add transactions
Monthly report

STEP 1: Create Rails project in API mode

rails new expense_manager --api
cd expense_manager

Open up the Gemfile and uncomment bcrypt gem as we will use it to generate password digest.

STEP 2: Scaffold models, controllers, and routes

Instead of generating each of them individually, we will scaffold them.

User will have name, email, password_digest(store password hash given by bcrypt), auth_token for token-based authentication, and a balance field that contains the current balance.

rails g scaffold User name:string email:string password_digest:string auth_token:string balance:decimal

UserTransaction will deal with amount of transaction, details and transaction_type(enum to discinct between Credit & Debit).

rails g scaffold UserTransaction amount:decimal details:string transaction_type:integer user:belongs_to

It creates models, controllers, and migrations. We need small modifications in create_users.rb migration file to add default 0 as balance for users.

t.decimal :balance, default: 0

STEP 3: Refine the models

We have two models: User and UserTransaction. User model has a has_many relation with UserTransaction. Every UserTransaction belongs_to a User.

# app/models/user.rb

class User < ApplicationRecord

  EMAIL_FORMAT = /\A[^@\s]+@([^@\s]+\.)+[^@\s]+\z/

  # methods for authentication
  has_secure_password

  # associations
  has_many :user_transactions

  #validations
  validates :email,
    presence: true,
    format: { with: EMAIL_FORMAT }

  validates :password,
    presence: true,
    length: { minimum: 8 }

end


# app/models/user_transaction.rb
class UserTransaction < ApplicationRecord

  enum of_kind: [ :credit, :debit ]

  # associations
  belongs_to :user
end

STEP 4: Refine the controllers

Let's refine the controllers generated by scaffold and include proper authentication. We will generate auth_token on login. We are going to accept auth_token as query parameters for now.

# app/controllers/application_controller.rb
class ApplicationController < ActionController::API

  before_action :verify_user?

  def current_user
    @current_user ||= authenticate_token
  end

  def verify_user?
    return true if authenticate_token
    render json: { errors: [ { detail: "Access denied" } ] }, status: 401
  end

  private

  def authenticate_token
    User.find_by(auth_token: params[:auth_token])
  end
end


# app/controllers/users_controller.rb
class UsersController < ApplicationController
  skip_before_action :verify_user?

  # POST /users
  def create
    user = User.new(user_params)

    user.auth_token = SecureRandom.hex

    if user.save
      render json: { message: 'Create successfully!' }, status: :created
    else
      render json: user.errors, status: :unprocessable_entity
    end
  end

  def balance
    render json: { balance: current_user.balance }, status: :ok
  end

  def login
    user = User.find_by(email: params[:user][:email])
    if user && user.authenticate(params[:user][:password])
      render json: { auth_token: user.auth_token }, status: :ok
    else
      render json: { message: 'Email & Password did not match.' }, status: :unprocessable_entity
    end
  end

  private

  # Only allow a list of trusted parameters through.
  def user_params
    params.require(:user).permit(:name, :email, :password, :balance)
  end
end


# app/controllers/user_transactions_controller.rb
class UserTransactionsController < ApplicationController
  before_action :set_user_transaction, only: [:show, :update, :destroy]

  # GET /user_transactions
  def index
    user_transactions = current_user.user_transactions

    if params[:filters]
      start_date = params[:filters][:start_date] && DateTime.strptime(params[:filters][:start_date], '%d-%m-%Y')
      end_date = params[:filters][:end_date] && DateTime.strptime(params[:filters][:end_date], '%d-%m-%Y')
      render json: user_transactions.where(created_at: start_date..end_date)
    else
      render json: user_transactions
    end
  end

  # GET /user_transactions/1
  def show
    render json: @user_transaction
  end

  # POST /user_transactions
  def create
    user_transaction = current_user.user_transactions.build(user_transaction_params)

    if user_transaction.save
      render json: user_transaction, status: :created
    else
      render json: user_transaction.errors, status: :unprocessable_entity
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_user_transaction
      @user_transaction = current_user.user_transactions.where(id: params[:id]).first
    end

    # Only allow a list of trusted parameters through.
    def user_transaction_params
      params.require(:user_transaction).permit(:amount, :details, :of_kind)
    end
end

STEP 5: Add routes

# config/routes.rb
Rails.application.routes.draw do
  resources :user_transactions, only: [:index, :create, :show]
  resources :users, only: [:create] do
    post :login, on: :collection
    get :balance, on: :collection
  end
end

⚡⚡ Our REST API is ready to use. We have trimmed down the controller and the routes to very basic actions that we need.

The only modification we needed apart from the default ones we adding the filter's query and authentication in the application controller.

We can use the above REST API in our React, Vue, or any front-end framework. Let's just see a quick example using fetch:

// create a user
fetch('http://localhost:3000/users', {method: 'POST', headers: {
      'Content-Type': 'application/json'}, body: JSON.stringify({user: {email: 'test@example.com', password: 'iamareallycomplexpassword', name: 'Ram'}})})


// login with that user
fetch('http://localhost:3000/users/login', {method: 'POST', headers: {
      'Content-Type': 'application/json'}, body: JSON.stringify({user: {email: 'test@example.com', password: 'iamareallycomplexpassword'}})})
// => response
{ auth_token: "09a93b1c0b40e2edf0560b8a7d7e712c" }

// create user_transactions using the above auth_token
fetch('http://localhost:3000/user_transactions?auth_token=09a93b1c0b40e2edf0560b8a7d7e712c', {method: 'POST', headers: {
      'Content-Type': 'application/json'}, body: JSON.stringify({user_transaction: {amount: 12, details: 'first transaction', of_kind: 'credit'}})})
// => response
{
  id: 1,
  amount: '12.0',
  details: 'first transaction',
  of_kind: 'credit',
  user_id: 2,
  created_at: '2021-08-23T07: 44: 35.356Z',
  updated_at: '2021-08-23T07: 44: 35.356Z',
}

// list all transactions
fetch('http://localhost:3000/user_transactions?auth_token=09a93b1c0b40e2edf0560b8a7d7e712c')
// => response
[
  {
    id: 1,
    amount: '12.0',
    details: 'first transaction',
    of_kind: 'credit',
    user_id: 2,
    created_at: '2021-08-23T06:55:50.913Z',
    updated_at: '2021-08-23T06:55:50.913Z',
  },
  {
    id: 2,
    amount: '12.0',
    details: 'first transaction',
    of_kind: 'debit',
    user_id: 2,
    created_at: '2021-08-23T07:44:35.356Z',
    updated_at: '2021-08-23T07:44:35.356Z',
  },
]

// filter transactions by date for monthly reports
fetch('http://localhost:3000/user_transactions?filters[start_date]=10-08-2021&filters[end_date]=24-08-2021&auth_token=09a93b1c0b40e2edf0560b8a7d7e712c')
// => response
[
  {
    id: 2,
    amount: '12.0',
    details: 'first transaction',
    of_kind: 'credit',
    user_id: 2,
    created_at: '2021-08-23T06:55:50.913Z',
    updated_at: '2021-08-23T06:55:50.913Z',
  },
  {
    id: 3,
    amount: '150.0',
    details: 'refund from amazon',
    of_kind: 'credit',
    user_id: 2,
    created_at: '2021-08-23T07:44:35.356Z',
    updated_at: '2021-08-23T07:44:35.356Z',
  },
  {
    id: 4,
    amount: '120.0',
    details: 'flight tickets',
    of_kind: 'debit',
    user_id: 2,
    created_at: '2021-08-23T07:48:29.749Z',
    updated_at: '2021-08-23T07:48:29.749Z',
  },
]

// check user balance
fetch('http://localhost:3000/users/balance?auth_token=09a93b1c0b40e2edf0560b8a7d7e712c')
// => response
{ balance: 32.0 }

One thing to notice is the dirty code inside the controller and validation scattered in the model. As this is not even 1% of real-world applications, the code inside the controller is not that dirty but as the codebase grows, it becomes messy. It is a quite popular issue, fat controller, skinny model. At times if we don't follow any design pattern, it can lead to fat model, fat controller and it will be hard to understand the code in long run. Debugging would be near to impossible if we don't clean it up.

In the next blog, we will talk a bit about few design patterns that we follow in the Rails world and then we will clean up the above application code by using the interactor gem which is based on command pattern.

Thanks for reading. If you liked it then do follow me and react to this blog. Also if you can, please share it wherever you can.

️‍🔥️‍🔥 Best resources to learn Ruby on Rails for free

Akhil — Thu, 19 Aug 2021 19:40:48 +0000

I have been writing blogs on Ruby on Rails but none of it looks beginner-friendly even to me. Internet is full of free tutorials but curating is the hard part. So I thought instead of reinventing the wheel, let's post a list of tutorials that I found helpful during my early days of Rails.

💎 Ruby programming

🎥 Video course by freeCodeCamp: https://www.youtube.com/watch?v=t_ispmWmdjY

📚 Interactive course by BigBinary Academy: https://academy.bigbinary.com/learn-ruby

💎 🚂 Rails framework

GO RAILS

Level 1

Building full-stack application from scratch -> https://gorails.com/series/rails-for-beginners

Too many cooks spoil the broth

There is a sea of courses on Rails but if I would have mentioned all of them just for the sake of a huge blog, it wouldn't be different than a fuzzy Google search.

Going through the course is just the beginning of your Rails journey. To become proficient in Rails, try to build products using the acquired knowledge. Start with building an MVP and then incrementally add features to it. It is difficult to get motivation for building a product without any reason so the best way would be to participate in Hackathons.

🤟🤟 Thanks for reading. If you find it helpful, do share it and hit a thumbs-up. 👍

Understand the basics of Ruby on Rails by building a blog app

Akhil — Wed, 18 Aug 2021 13:46:48 +0000

Table of contents:

What is MVC?
Directory structure of Ruby on Rails application
Build a blog post application that supports all CRUD operations
- How to generate models
- How to write migration files
- How to generate a controller and its views

Ruby on Rails is a web application framework written in Ruby. If you want a little bit more intro stuff, please go through Rome can be built in a day which I wrote as a part of my RoR(Ruby on Rails) series.

What is MVC?

MVC stands for Model-View-Controller. MVC is an architectural pattern that makes it easy to put a specific piece of code at a specific place.

Model is the one that usually maps to a database table and handles data related logic.
View is the markup part that renders an HTML view.
Controller is the one that is responsible for fetching data from model objects and send it to the View.

Directory structure

The above screenshot shows the directory structure of a vanilla Rails application. Most of the application code resides under app organized in their respective directories. The Model-View-Controller each has its respective directory as models, views and directories.

With the default configuration, let's start building a blog-post application.

System setup

For this blog, we are going to use https://ssh.cloud.google.com/ which is free and comes with Ruby and Rails installed. It also has a cloud IDE, so that we don't have to spend time setting up our local.

STEP 1: Initialize a new project

Run the following in the IDE's terminal to create a new project

$ rails new blog_app
$ cd blog_app

Once the project is created, run cd blog_app to go to that directory. Open up the project directory in the IDE too. Now, we can try running the default app to see if everything went well.

$ rails s --port 3001

On top of the IDE, click on the web preview as shown in the screenshot to open your application. If everything is well and good, you should see Yay! You’re on Rails! page.

STEP 2: Generate the Post model

If your server is still running, turn it down and run the following command to generate the Post model along with the required migration file.

$ rails generate model Post
Running via Spring preloader in process 4985
      invoke  active_record
      create    db/migrate/20210817174254_create_posts.rb
      create    app/models/post.rb
      invoke    test_unit
      create      test/models/post_test.rb
      create      test/fixtures/posts.yml

Migrations are like version control for databases, allowing us to modify and share the application's database schema. 20210817174254_create_posts.rb will be used define the schema of posts table.
We need to store title, and description of posts. title will be a string while description will be text column.

# db/migrate/20210817174254_create_posts.rb

class CreatePosts < ActiveRecord::Migration[6.1]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :description

      t.timestamps
    end
  end
end

By default, t.timestamps is present in every migration file which adds created_at and updated_at column to tables.

Column types supported

- `primary_key`
- `string`
- `text`
- `integer`
- `bigint`
- `float`
- `decimal`
- `numeric`
- `datetime`
- `time`
- `date`
- `binary`
- `boolean`

Now, in order to reflect the migration changes in the database, we need to run the migration.

$ rails db:migrate
== 20210817174254 CreatePosts: migrating ======================================
-- create_table(:posts)
   -> 0.0035s
== 20210817174254 CreatePosts: migrated (0.0036s) =============================

STEP 3: Generate PostsController and Views

When a route is hit by a client, it passes the execution to appropriate action of a controller. Let's say we open localhost:3001/users in the browser, the router will dispatch it to index action of users_controller. Action are methods defined inside the controller class.
For every CRUD operation, there has to be a route defined mapping to a controller's action. Rails by convention uses resourceful routes to them. Routes are defined in the config/routes.rb file. Let's open up that file and add the following code:

# config/routes.rb
resources :posts

To check all the routes that the above code creates, run rails routes.

Output of rails routes

Prefix      Verb     URI Pattern                     Controller#Action
posts       GET     /posts(.:format)                 posts#index
            POST    /posts(.:format)                 posts#create
new_post    GET     /posts/new(.:format)             posts#new
edit_post   GET     /posts/:id/edit(.:format)        posts#edit
post        GET     /posts/:id(.:format)             posts#show
            PATCH   /posts/:id(.:format)             posts#update
            PUT     /posts/:id(.:format)             posts#update
            DELETE  /posts/:id(.:format)             posts#destroy

Let create PostsController with all the actions mapping to each resourceful route.

$ rails generate controller posts
Running via Spring preloader in process 1559      
      create  app/controllers/posts_controller.rb
      invoke  erb      
      create    app/views/posts
      invoke  test_unit
      create    test/controllers/posts_controller_test.rb
      invoke  helper
      create    app/helpers/posts_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/posts.scss

The posts_controller.rb file will contain code to fetch data from the model objects and present it to the respective view. Add the following code to the controller file:

# app/controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :set_post, only: %i[ show edit update destroy ]

  # GET /posts
  def index
    @posts = Post.all
  end

  # GET /posts/1
  def show
  end

  # GET /posts/new
  def new
    @post = Post.new
  end

  # GET /posts/1/edit
  def edit
  end

  # POST /posts
  def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        redirect_to @post, notice: "Post was successfully created."
      else
        render :new
      end
    end
  end

  # PATCH/PUT /posts/1
  def update
    respond_to do |format|
      if @post.update(post_params)
        redirect_to @post, notice: "Post was successfully updated."
      else
        render :edit
      end
    end
  end

  # DELETE /posts/1
  def destroy
    @post.destroy
    respond_to do |format|
      redirect_to posts_url, notice: "Post was successfully destroyed."
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def post_params
      params.require(:post).permit(:title, :description)
    end
end

Every controller should inherit from ApplicationController so that it has access to helper methods and objects. In the PostsController, the first line is before_action :set_post, only: %i[ show edit update destroy ] which says Rails to first invoke set_post method whenever there is a request for show, edit, update or destroy action.

index action assigns all the posts fetched from the database to @posts that will be used by its respective view. But wait, there is no view created yet. Let's also create a view for index action.
Views are named as <action_name>.html.erb. So for the index action, the view will be index.html.erb. erb is the template engine used by Rails to pass objects' values to templates, based on which the final HTML will be built and rendered.

<%# app/views/posts/index.html.erb %>

<p id="notice"><%= notice %></p>

<h1>Posts</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td><%= post.description %></td>
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Post', new_post_path %>

We are using a table to print all the posts. On top, we are printing notice that will contain the notice passed from the action.

Similarly, let's create view files for each of the actions.

show

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<p>
  <strong>Description:</strong>
  <%= @post.description %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

new

<h1>New Post</h1>

<%= form_with(model: @post) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<%= link_to 'Back', posts_path %>

edit

<h1>Editing Post</h1>

<%= form_with(model: @post) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<%= link_to 'Show', @post %> |
<%= link_to 'Back', posts_path %>

update and destroy action doesn't need views as they are redirecting to show and list actions/pages respectively.

P.S: Both new.html.erb and edit.html.erb share a lot of common code. In that case we can extract out that common code to a partial and then render it in other templates.

<%# app/views/posts/_form.html.erb %>

<%= form_with(model: post) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

And then replace the common code in new.html.erb and edit.html.erb templates with just <%= render 'form', post: @post %>.

STEP 4: Run the application

We are all set now and we just need to re-run the app as we did in the beginning. Run rails s -p3001 to run Rails on 3001 port and then open localhost:3001/posts. You will see something like this:

🎉🎉 We are done. Try creating, editing, and doing all the fun stuff with the app.

Bonus

Our app currently accepts text and shows it as it is. We can add markdown support to make it look like an actual blog application. For that first add gem 'kramdown' to Gemfile. The edit the show page as following:

<% # app/views/posts/show.html.erb %>

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<p>
  <strong>Description:</strong>
  <%= sanitize Kramdown::Document.new(@post.description).to_html %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

DONE!! Now if we write the post's description in markdown format, it will be able to render it.

What if we want the resources to be served as REST API also?

In order to do that, we need to respond with JSON response whenever it is requested. To make serializing to JSON easy, we will use a gem called jbuilder. Let's first add gem 'jbuilder', '~> 2.7' to the Gemfile. Then we need to change our controller to the following:

# app/controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :set_post, only: %i[ show edit update destroy ]

  # GET /posts or /posts.json
  def index
    @posts = Post.all
  end

  # GET /posts/1 or /posts/1.json
  def show
  end

  # GET /posts/new
  def new
    @post = Post.new
  end

  # GET /posts/1/edit
  def edit
  end

  # POST /posts or /posts.json
  def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: "Post was successfully created." }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /posts/1 or /posts/1.json
  def update
    respond_to do |format|
      if @post.update(post_params)
        format.html { redirect_to @post, notice: "Post was successfully updated." }
        format.json { render :show, status: :ok, location: @post }
      else
        format.html { render :edit, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /posts/1 or /posts/1.json
  def destroy
    @post.destroy
    respond_to do |format|
      format.html { redirect_to posts_url, notice: "Post was successfully destroyed." }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def post_params
      params.require(:post).permit(:title, :description)
    end
end

Now when the request comes for JSON, it will fetch the data and render the respective jbuilder file which in turn will return serialized JSON. Let's now add the respective jbuilder files under app/views/posts along with the partial containing common jbuilder code.

# app/views/posts/_post.json.jbuilder
json.extract! post, :id, :title, :description, :created_at, :updated_at
json.url post_url(post, format: :json)


# app/views/posts/index.json.jbuilder
json.array! @posts, partial: "posts/post", as: :post

# app/views/posts/show.json.jbuilder
json.partial! "posts/post", post: @post

Now, we can make fetch requests to get JSON responses from the API. Let's try running fetch('https://localhost:3001/posts/1.json').then(res => res.json()).then(json_res => console.log(json_res)) in the browser console with localhost:3001 open. You will get the json response as configured in the show.json.jbuilder file.

Optional resources

Ruby/Rails naming convention: https://gist.github.com/iangreenleaf/b206d09c587e8fc6399e
Rails guides: https://guides.rubyonrails.org/index.html
Jbuilder: https://github.com/rails/jbuilder
Kramdown: https://github.com/gettalong/kramdown

That is it for this. I know I am not able to cover everything but it is not even possible in one blog.
If you really liked this blog, don't forget to like it and follow me. Thanks for reading.

Ruby on Rails: Rome can be built in a day

Akhil — Sat, 07 Aug 2021 12:39:19 +0000

What is Ruby on Rails?

Ruby is a language developed in the mid-1990s by Matz while Rails is a web framework developed in 2003 by DHH. Ruby on Rails can be used to build an MVP in minimal time. It comes with all the basic tools needed to build an application, unlike other web frameworks that are just routers.

Let's first see some of the products built with Ruby on Rails

During the early days of my career when I used to tell my friends that I am working on Ruby on Rails, their first reaction used to be, I haven't heard of it, is anyone even using it? and my response used to be a list of applications that people are using every day that is running on Ruby on Rails. So here is a brief list:

GitHub
Gitlab
Twitter
Twitch
Airbnb
Hulu
Coinbase
Soundcloud
Shopify
Dribble
Unsplash
500px
Kickstarter
Visit https://stackshare.io/rails for more.

The products mentioned above are not small ones, but the ones that process millions of requests every day. Some of them are Rails monolith while some are using Rails in a few of their micro-services.

Why Ruby on Rails?

Rails is a "batteries included" framework
- When a new project is created(rails new <project_name>), it is created with a directory structure that you will always find handy to put stuffs into.
- It comes with all the basic gems(libraries for non-rails people) that you will need to bootstrap a new product from zero.
- It follows Convention over Configuration. Even when the project grows large you will know where to find what. Any new people can get going with a Rails project in no time.
- It comes with generators that help you create MVC objects like controllers, views, models with a single command. For instance to create a new model, run rails generate model <model_name> or even shorter rails g model <model_name>
- ActiveRecord is by far the best-loved feature of Rails. It is an ORM with such a straightforward syntax to create objects. For instance, creating a user object from the parameters looks like User.create(<parameters>)
- Entire Rails framework has a DSL that is human-readable and at the same time performant on machines. For instance, the following code-block shows a model declaration in Rails:
```
  class Post < ApplicationRecord
    belongs_to :user
    has_many :comments
    validates_presence_of :title
  end
```
- Let's not forget the fact that it has an active community with awesome people who are contributing day in and day out to Rails and other gems.
- It also has a great documentation/guide that can be referred to, to get up and running on Rails.

Ruby is ❤️
- It is one of the easiest languages to learn with a heck of a lot of free tutorials and guides.
- Ruby's official documentation beats every other existing language with its simplicity.
- The metaprogramming in Ruby allows for the creation of intuitive DSLs and APIs that are too difficult to achieve in other languages.

Resources to learn Ruby on Rails

Ruby on Rails repo: https://github.com/rails/rails

Ruby

Ruby on Rails

After going through the above resources, you can start looking into open-source applications built with Ruby on Rails to get a better understanding of real-world applications. Upon getting acquainted with them, you can even start contributing to them.

Thanks for reading. Feel free to add your comments. Do like and share if you find this information useful.

Build a markdown editor-viewer in Svelte

Akhil — Thu, 22 Jul 2021 18:07:02 +0000

Before we dive into writing the code, this blog assumes that the reader knows the basics of Svelte(I will anyway explain each line of code).

What are we building?

A textarea to enter markdown data.
A button clicking on which will show formatted data.

Demo: https://svelte.dev/repl/da8f6dd0b0ad4fada3011a44702d8d68?version=3.40.1

Screencast: https://www.loom.com/share/1809491290b54906a4b990df89ce9fc3

Step 1:

Let's first create the textarea and the button and bind the textarea to the component.

<script>
    let rawData = '';
</script>

<main class='main-container'>
  <form class='form'>
    <textarea type='text' bind:value={rawData} class='markdown-input' placeholder='Enter your markdown content here...'/>
    <button class='show-btn' on:click={() => ({})}>
      Show Preview
    </button>
  </form>
</main>

Here, we have taken a main tag with class='main-container' and we will use it at the end for styling the UI. The <textarea type='text' bind:value={rawData} class='markdown-input' placeholder='Enter your markdown content here...'/> binds the textarea with rawData which means when we will change the value inside textarea, the same value will be updated in rawData variable. The button for now is not doing anything on click.

Step 2:

On clicking the button, we want to hide the editor and process the markdown value stored in rawData and show it in the UI. To process the markdown, we will use marked package which is quite easy to use. We need to conditionally show the rendered markdown only when the Show Preview button is clicked, and so we will use Svelte's if-else directive.

<script>
    import marked from 'marked';

    let rawData = '';
    let preview = false;

    function showPreview() {
        preview = true;
    }
</script>

<main class='main-container'>
    {#if preview}
        <div>
            {@html marked(rawData)}
        </div>
    {:else}
        <form class='form'>
            <textarea type='text' bind:value={rawData} class='markdown-input' placeholder='Enter your markdown content here...'/>
            <button class='show-btn' on:click={showPreview}>
             Show Preview
            </button>
    </form>
    {/if}
</main>

We have taken preview as false by default and based on it's value we are conditionally rendering either the form or the formatted markdown using @html marked(rawData).
If we only put this marked(rawData), it would render the html equivalent of the markdown as plain strings. We want the output of marked(rawData) to be rendered as html so we will use @html directive.

showPreview function get invoked on clicking the button which then assigns preview = true and hence the UI is re-rendered and the if condition is satisfied and hence the preview is shown.

Step 3:

Let's use the classes assigned in the above steps to style the app.

<script>
    import marked from 'marked';

    let rawData = '';
    let preview = false;

    function showPreview() {
        preview = true;
    }
</script>

<main class='main-container'>
    {#if preview}
        <div>
            {@html marked(rawData)}
        </div>
    {:else}
        <form class='form'>
            <textarea type='text' bind:value={rawData} class='markdown-input' placeholder='Enter your markdown content here...'/>
            <button class='show-btn' on:click={showPreview}>
             Show Preview
            </button>
    </form>
    {/if}
</main>


<style>
    .main-container {
        display: flex;
        flex-direction: column;
        padding: 1rem 0.6rem;
        margin: 0;
        height: 100%;
        width: 100%;
    }

.form {
        height: 100%;
        width: 95%;
}

    .markdown-input {
        width: 100%;
        height: 90%;
        border: unset;
        border: 1px solid #9c9a9a;
        padding: 0.8rem 1rem;
        border-radius: 10px;
        background: transparent;
    }

    .markdown-input::placeholder {
        font-size: 1.2rem;
        font-weight: 100;
        font-family: sans-serif;
        letter-spacing: 1px;
    }

    .markdown-input:focus {
        outline: unset;
    }

    .show-btn {
        width: 100%;
        padding: 0.6rem 1.5rem;
        background: transparent;
        font-weight: 300;
        font-size: 1.5rem;
        border-radius: 10px;
        border: 1px solid #9c9a9a;
    }

</style>

We have used vanilla CSS so it would be self-explanatory.

Step 4:

We can make it more intuitive by adding one more enhancement. Currently, once we click on show preview we can't go back to EDIT mode. Let's add one more function to assign preview = false when the preview area is double-clicked. We will rename the showPreview to togglePreview and assign preview = !preview.

<script>
    import marked from 'marked';

    let rawData = '';
    let preview = false;

    function togglePreview() {
        preview = !preview;
    }
</script>

<main class='main-container'>
    {#if preview}
        <div on:dblclick={togglePreview}>
            {@html marked(rawData)}
        </div>
    {:else}
        <form class='form'>
            <textarea type='text' bind:value={rawData} class='markdown-input' placeholder='Enter your markdown content here...'/>
            <button class='show-btn' on:click={togglePreview}>
             Show Preview
            </button>
    </form>
    {/if}
</main>

<div on:dblclick={togglePreview}> invokes togglePreview on double-clicking the div showing the preview.

That is it! We have built a markdown preview application using Svelte. Hope you like it and learn something new. Do leave your comments and suggestions to keep me motivated.

Thank you all for reading this.

React + Tailwind starter template

Akhil — Sat, 21 Nov 2020 17:30:12 +0000

I struggled a lot to integrate Tailwindcss with create-react-app few months back while working on a pet-project. Since then I thought of creating a starter template out of it so that new projects can be easily bootstrapped with that.
Finally I created a starter template with cra + tailwindcss.

https://github.com/WorkNTrack/create-react-app-tailwind-starter

It can be used to quickly get started with zero configurations. Production builds are enabled with purge so that unused css won't be dumped in the production builds.

For info or how the integration is done, please follow this blog in which I have explained each of the steps.
https://blog.24x7dev.com/blog/tailwind-with-react/

Ruby 2.8 adds endless method definition

Akhil — Wed, 16 Sep 2020 08:09:38 +0000

Ruby 2.8 adds endless method definition

Rails 6 added Array#including/excluding and Enumerable#including/excluding

Akhil — Wed, 19 Aug 2020 12:18:01 +0000

Rails 6 added Array#including/excluding and Enumerable#including/excluding

Rails 6.1 adds annotate_rendered_view_with_filenames to annotate HTML output

Akhil — Thu, 30 Jul 2020 06:33:35 +0000

Rails 6.1 adds annotate_rendered_view_with_filenames to annotate HTML output

Jul 30 '20 Author: akhil-gautam

See Full Post

Forem: Akhil

Generate React Components using commands from your terminal

Let's first talk about the problem statement.

Solution

Install plop.js as dev dependency of your React project:

Create a generator that creates a component under the src/shared_components directory.

Bonus:

Are you putting your business logic at correct place?

Design pattern

Interactor

Let's refactor our expense manager

app/interactors/create_user.rb

app/interactors/authenticate_user.rb

app/interactors/process_transaction.rb

app/interactors/create_transaction.rb

app/interactors/update_user_balance.rb

app/interactors/fetch_transactions.rb

app/controllers/users_controller.rb

app/controllers/user_transactions_controller.rb

Pros 👍

Cons 👎

- the gem looks dead, no active maintainers

Create REST APIs in minutes

Expense Manager API

STEP 1: Create Rails project in API mode

STEP 2: Scaffold models, controllers, and routes

STEP 3: Refine the models

STEP 4: Refine the controllers

STEP 5: Add routes

️‍🔥️‍🔥 Best resources to learn Ruby on Rails for free

💎 Ruby programming

💎 🚂 Rails framework

GO RAILS

Level 1

Level 2

Level 3

Level 4

Level 5

freeCodeCamp

Too many cooks spoil the broth

Understand the basics of Ruby on Rails by building a blog app

What is MVC?

Directory structure

System setup

STEP 1: Initialize a new project

STEP 2: Generate the Post model

Column types supported

STEP 3: Generate PostsController and Views

STEP 4: Run the application

Bonus

What if we want the resources to be served as REST API also?

Optional resources

Ruby on Rails: Rome can be built in a day

What is Ruby on Rails?

Let's first see some of the products built with Ruby on Rails

Why Ruby on Rails?

Resources to learn Ruby on Rails

Ruby

Ruby on Rails

Build a markdown editor-viewer in Svelte

What are we building?

Step 1:

Step 2:

Step 3:

Step 4:

React + Tailwind starter template

Ruby 2.8 adds endless method definition

Rails 6 added Array#including/excluding and Enumerable#including/excluding

Rails 6.1 adds annotate_rendered_view_with_filenames to annotate HTML output

Rails 6.1 adds annotate_rendered_view_with_filenames to annotate HTML output

Create a generator that creates a component under the `src/shared_components` directory.