DEV Community: Koushik KM

How are you marketing your open source project?

Koushik KM — Tue, 12 May 2020 05:57:26 +0000

Hello guys, I recently made an open-source project but I am not sure how to market it effectively.

Well I tried

writing a blog post about it
post on Linkedin. etc

But there is very little traction. So how you guys do it?

JobTriage: Organize your job search

Koushik KM — Tue, 28 Apr 2020 18:56:50 +0000

Searching for a job is exhausting. We may have to constantly prepare for interviews, apply for companies, have multiple interview calls, and of course constantly facing rejections. The best way to reduce this pain is by organizing your job search. Not only it will make job search easy but
organizing things will have a soothing effect.

Remember the time when you organize your laptop by deleting unnecessary files and arranging your folders etc. How does it feel? Exactly! That's what I am talking about. Organizing things has always been a meditation for humans and I thought we can apply the same to job search

TLDR: Check out JobTriage - an interactive way to manage your job applications

Job Triage

JobTriage is the new open-source project for managing your job search. It is indeed an interactive way to manage and track your job applications with a kanban board. In this post, I will discuss the features and some important components of the job search.

JobTriage lets you add job applications along with priority(high, medium, low). You can add notes, time log for each application, and prepare your interviews according to its priority.

Self-analysis

Self-analysis is very important and basic yet we fail to give importance. It should be given the same weightage to that of technical interviews. I will discuss some basic components of self-analysis.

1. Personal pitch

"Tell me about yourself" - The most daunting question asked in an interview. You are with you for the entire life and suddenly you know nothing about yourself. Lack of practice is the main reason for this problem.

Personal pitch is something you say to sell yourself under 60 seconds. An ideal personal / Elevator pitch should be in 60 seconds, with most of the part covering your academic and work experiences and highlights in your career.

It should be small and precise
Practice it regularly
Modify your pitch a little based on the interview

2. Behavior analysis

STAR stories: It is a method to construct your answers in an organized way. The answers should follow this pattern:

Situation
Task
Action
Results

Some example questions are

Tell me your hardest challenge
What was the most stressful situation you have faced?
When is the last time you had to introduce a new idea or procedure to people on this job? How did you do it?
Tell us about the setbacks you have faced. How did you deal with them?

Traditional and cultural fit questions: These are very common questions asked in an interview.

What are your strengths and weakness?
How do you keep up with current trends and advances in the field?
What is your ideal job?
What is your ideal company?

How job triage can help ? Well, it can't prepare a pitch for you but you can add your pitch and stories in the platform, improve and practice it constantly. We are going old school here. If you write it, you remember it better.

Blogs

The blogs section will be available on our site. It will comprise of blogs which will help to accelerate our career. Everyone can contribute to this. This is a community process and we should help one another to become better. If you want your thoughts to be posted on our site, please make a PR in this repository. Don't worry we will give proper credits and link your site/social account.

This does not mean that you can only add your thoughts. If you come across some good content share it with us. We will try to get permission from the author and add it to our site.

Future

It is definitely not going to stop here, this just a first version and there will be more features like chrome extension, weekly emails about your interview events, Google calendar integration, etc.

Tech stack

Backend: Ruby on rails
Frontend: React
Database: Mongo

Important links

Github Repo: https://github.com/jobtriage/jobtriage
Home page: https://jobtriage.org/
App: https://app.jobtriage.org/

As I said before this is a community process. Use the application, create issues, and feature requests to our repo. If you have time, come contribute with us 💜

Happy Triaging :)

How to save blogs and articles effectively

Koushik KM — Mon, 30 Mar 2020 08:19:18 +0000

Help me out!!!

How are you guys saving the blogs and articles that you want to read later?

And how effectively going back to read it afterward?

Thanks :)

Writing your first Github action

Koushik KM — Fri, 13 Mar 2020 16:19:15 +0000

Two days back I came to know about hackathon by Github and I thought of making some useful action. But before that, I decided to do something fun and learn about the basics of Github action. So I created action-pr-gifs Inspired from action-cats. action-pr-gifs will post gif as a comment in PR based on the type of the PR. Check out my action and have fun!

Let's make a simple GitHub action to post a comment in a PR!

Setting the repo

You can create an action in 2 ways

Docker container action
Javascript action

Docker container

This type of action is ideal if you want to run your actions with a particular Operating system, environments, etc. Note that they are slow when compared with javascript action as it has to retrieve the container.

Javascript action

JavaScript actions can run directly on a runner machine. This is much simpler and faster and I will be using javascript action in this tutorial.

Instead of creating a node repo from scratch I will recommend using template provided by the GitHub team. It has almost everything to start your first GitHub action. But if you want to start everything from scratch like me, you can always do that.

Before writing any actual code, please make sure to configure eslint with your project. It will make sure that you use the same coding style across the project.

action.yml

Add a file action.yml in your root folder and add the following line.

name: 'Action name'
description: 'A sample description'
inputs:
  github-token:
    description: 'Pass in secrets.GITHUB_TOKEN'
    required: true
runs:
  using: 'node12'
  main: 'dist/index.js'

Did you note that I added dist/index.js as main? I will come to that later.

Actual code

Add a new function run in index.js or src/index.js whatever you prefer. This is a simple function to post a comment You are awesome on every pull request. Note that this should be triggered for PR event only. So if it triggered for any other event, the function should throw an error.

const core = require('@actions/core');
const github = require('@actions/github');

async function run() {
  try {
    const githubToken = core.getInput('GITHUB_TOKEN');

    const { context } = github;
    if (context.payload.pull_request == null) {
      core.setFailed('No pull request found.');
    }

    const pullRequestNumber = context.payload.pull_request.number;
    const octokit = new github.GitHub(githubToken);
    const message = 'Wow! you are awesome';

    octokit.issues.createComment({
      ...context.repo,
      issue_number: pullRequestNumber,
      body: message,
    });
  } catch (error) {
    core.setFailed(error.message);
  }
}

run();

Build

GitHub downloads each action run in a workflow during runtime and executes it as a complete package of code. So you need node_modules to run your code. If you added it to .gitignore, please remove it. Alternatively, you can use zeit/ncc to build your source code so that you don't need node modules.

Install ncc using the following command

yarn add @zeit/ncc --dev

Build your source using

ncc build index.js (or) ncc build src/index.js

This will build your source files to the dist folder. This will be your main file and remember to build and commit this file every time you make a change in the source file.

Testing

There is nothing much in this action to test. But it is always recommended to write tests for your GitHub action. You can check my repository for some examples.

That is it, You have written your first Github action. It is time to test it

Adding action to repositories

Before listing the action in the marketplace you can test it once in the same repository. Create a file .github/workflows/main.yml with the same structure and add the following line.

name: PR

# Controls when the action will run. Triggers the workflow on push or pull request 
# events but only for the master branch
on:
  pull_request:
    branches: [ master ]
jobs:
  pr_check:
    runs-on: ubuntu-latest
    name: A job to Post comment on PR
    steps:
    - uses: actions/checkout@v2
    - name: PR Action
      uses: koushikmohan1996/action-pr-gifs@master
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Based on your action you should change koushikmohan1996/action-pr-gifs@master with your username/reponame@master. Here I used branches: [master] so the action will trigger only if the PR is created to master branch. You can remove this if you want this in all branches.

After you tested everything, you can add this action to Marketplace by creating a release. Note that you need a readme file and license file to make a release in the Marketplace.

Check this sample pr of action-pr-gifs. Drop a comment if you have created any cool Github action or if you come across one.

Signing off!

Part 1 - Setting up Monorepo, APIs and frontend components.

Koushik KM — Sat, 07 Mar 2020 08:00:17 +0000

In this series, I will be covering on how to get started with Ruby on Rails, Mongo DB and React stack or I call them R3M. I will not bore you with a lot of explanation, So if you stuck at any point feel free to ask in comment. Being said that I assume you have a basic understanding of these languages and installed all the required software and tools. Okay, let's hop in. :)

TLDR: If you are bored to read step by step process and want to figure things by yourself kindly check my example repository.

Github repository link: https://github.com/koushikmohan1996/ror-react-mongo

Monorepo

In this example, I will be using monorepo architecture. Monorepo will be very efficient for small apps and it is very easy to maintain. CI and CD will be very easy and we can make atomic commits in monorepo structure. You can read about Monorepo and other architecture online.

Setup

Create 2 folders server and client before proceeding to next steps

1. RoR

Setting up and running an RoR app is very simple. They have an excellent document on how to do that. Since we are using react for our frontend we don't need View support from rails. Also, we will be using mongoid as ORM so we can avoid default ORM (active record) support from rails. Run the following command to create a Rails app.

rails new server --api --skip-active-record

Add the below line in Gemlock file to add ORM support provided by mongo

gem 'mongoid', '~> 7.0.5'

Generate Mongo configuration file using the following command

rails g mongoid:config

Start rails server

rails s

2. React

Create a react app with the following command

npx create-react-app client

Now start the react app with npm/yarn command (according to your package manager)

yarn start (or) npm start

Note: Rails app may run in the same port of React. I this case React will automatically change its port.

Backend API

To make everything simple, I will be building a simple notes app that can store title and content as a note.
No authentication! No complex DB structure!. If you need an example of authentication in Rails, I will cover it in a separate article.

As a first step, we should create a model to store notes details. Rails provide an easy way to generate these models using rails generator commands. You can learn them in detail from their official document.

rails g model Note title:String content:String

This command will create a model notes.rb in the models folder. You can check if the fields are correctly added to it.

Resources can be used for creating routes. It will support API architecture (get, post, put delete) by default. Add resources :notes to routes.rb file. You can now check the list of supported routes using command rails routes

Add a controller using the following generator command.

rails g controller notes

If you access http://localhost:3000/notes in browser or postman, it will throw an error saying that the action show is not defined in the NotesController. Let's go ahead and define it. Add the following line to notes_controller.rb

# GET /notes
  def index
    @notes = Note.all

    render json: @notes
  end

Similarly, you can add other methods for CRUD operation. You can also skip everything and use rails generate scaffold Note title:string content:string to generate Models, Controller, and routes. Refer notes_controller.rb in the example repository for all CRUD operations.

Since we are using React server and may host frontend in as separate service, we should add cors support. To do that add gem 'rack-cors' to Gemlock file and the below code to application.rb. You don't have to use a GEM for this but it provides a lot of customization which can be used later.

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
      resource '*', headers: :any, methods: [:get, :post, :options, :delete, :put]
  end
end

API server is almost ready now. You can check it by adding notes using any API tool such as Postman. If you check the API response you will see something like this:

[
  {
    "_id":{
       "$oid":"5e622d49a394011924987ee3"
     },
    "content":"Sample notes",
    "title":"Test"
  }
]

Even though it is good enough, getting the id of the notes is tedious in frontend with this response. It will be much easier if we get the id directly as a string rather than an object with an additional layer. Add an as_json method in models/note.rb to override its default behavior. Now check the response again.

def as_json(*args)
  res = super
  res['id'] = self.id.to_s
  res
end

With this API server is ready and we can move forward to frontend. Yay!

Frontend

I prefer React over other frontend frameworks. React highly flexible and small in size. But you may need additional packages like Router, Redux to build big applications. But I am not going to use these in this tutorial. Also, I will be using hooks based on components rather than class-based components. If you never worked on hooks you can check React's official document.

There are many ways to organize files in your React app and this can change based on the size of your app. Create two folders screens and service in client and create a file APIservice.js under service folder.

const API_URL = 'http://localhost:3000'

export const addNote = (title, content) => {
  return fetch(`${API_URL}/notes`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ title, content }),
  }).then(res => res.json());
};

You can add other methods similarly or you can copy it from the repo.

Instead of writing a single big component break your components into small pieces. It will be very easy to write and maintain many small components rather than a single big component. In our case, we will be splitting the MainPage.js into 3 components.

A form to get inputs and submit it.
A card component to display notes
A container component to hold these components.

To make it simple am adding all the components in single file. But you can opt to create a components folder and maintain each component separately.

Getting inputs from a form

const NotesForm = (props) => {

  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    addNote(title, content)
      .then(props.handleNoteAdded)
      .catch(e => setError('Error occurred while adding note'));
  };

  return (
    <div>
      <form style={{ display: 'inline-grid' }} onSubmit={handleSubmit}>
        <input type="text" placeholder="Title" className="input" onChange={e => setTitle(e.target.value)} value={title} />
        <textarea type="text" placeholder="Content" className="input" onChange={e => setContent(e.target.value)} value={content} />
        <input type="Submit" value="Add Notes" className="input" />
        <p className="error">
          {error}
        </p>
      </form>
    </div>
  )
};

Card to display notes

const NotesCard = (props) => {
  const { title, content, id } = props;

  const handleDelete = () => {
    deleteNote(id).then(props.onDelete);
  };

  return (
    <div className="card">
      <span><b>{title}</b></span>
      <p>{content}</p>

      <button onClick={handleDelete} className="card-button">Delete</button>
    </div>
  )
}

Now you can use these 2 components to compose a new component which will be our main page. Check out MainPage.js for the entire code.

<div className="main-page-body">
  <NotesForm handleNoteAdded={getNotes}/>
  <div className="card-container">
    {
      notes.map(notesObj => <NotesCard
        content={notesObj.content}
        title={notesObj.title}
        id={notesObj.id}
        onDelete={getNotes}
      />)
    }
  </div>
</div>

Motivation

With this a basic version of Notes app ready. I am new to Ruby on Rails and am not an expert in React too and that is the motivation to start this series. This series will have tutorials, information which I wish I would see in a single place to kick start my project. In the next article, I will cover about writing tests for React and Rails app. If you want anything, in particular, feel free to drop a comment.

Happy to help :)