Forem: Ganesh Raja

Babel Basic - Javascript

Ganesh Raja — Tue, 16 Jun 2020 08:42:42 +0000

I wasn't able to share yesterday's post due to some work. But yesterday I mainly worked on Babel Basics.

So basically bable is a transpiler used to convert ES6+, javascript version into ES5. we have presets to convert typescript,react into Es5 code as well.Explored about how to use babel plugins and the difference between preset and a plugin and other stuffs. It was very interesting thing to learn.

You can find the series repo here
https://github.com/ganeshraja10/Latest-Tech-Learnings

written code

multiplyBy2 = (arr) => arr.map((item) => item * 2);

let arr = [1, 2, 3];

console.log(multiplyBy2(arr));

let element = 22;
console.log(element ?? -1);

After transpiling to Es5

"use strict";

multiplyBy2 = function multiplyBy2(arr) {
  return arr.map(function (item) {
    return item * 2;
  });
};

var arr = [1, 2, 3];
console.log(multiplyBy2(arr));
var element = 22;
console.log(element !== null && element !== void 0 ? element : -1);

React + TypeScript - Super Hero/Villain Site

Ganesh Raja — Sat, 13 Jun 2020 18:17:20 +0000

Yesterday Worked on a simple node js API that returns Super Hero Data with typescript implementation.

Today I decided to work on a React Site (with TS implementation ) that Randomly displays a superhero/villain details from the node js API.

This page randomly displays a hero or villain data and when you click on show Random Hero it displays other hero. You can find the full code in my git repo.

Tomorrow will work on improving the code
https://github.com/ganeshraja10/Latest-Tech-Learnings

Here is a sample code

import React, { Component } from 'react';
import axios from 'axios';
import { Container, Row, Col, Button } from 'reactstrap';

import SuperHeroDetails from '../custom_types/SuperHeroData';
import DisplaySuperHeroProperty from './DisplaySuperHeroProperties';

const apiClient = axios.create({
  baseURL: 'http://localhost:3000',
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json',
  },
});

type SuperHeroData = {
  data: SuperHeroDetails;
};

export default class DisplaySuperHeroDetails extends Component<{}, SuperHeroData> {
  loadNewSuperHeroDetails = async () => {
    try {
      const response = await apiClient.get('/');
      this.setState({ data: response.data });
    } catch (err) {
      console.log(err);
    }
  };
  componentDidMount() {
    this.loadNewSuperHeroDetails();
  }

  render() {
    if (this.state === null || !('data' in this.state)) return <div>Loading</div>;
    const { data } = this.state;
    return (
      <div>
        <Container style={{ paddingTop: '30px', border: '2px solid red', borderRadius: '40px', margin: '40 auto' }}>
          <h1 style={{ textAlign: 'center' }}>{data.name}</h1>

          <Row style={{ padding: '20px' }}>
            <Col lg={8}>
              <DisplaySuperHeroProperty name={'Full Name'} data={data.biography.fullName} />
              <DisplaySuperHeroProperty name={'First Appearance'} data={data.biography.firstAppearance} />
              <DisplaySuperHeroProperty name={'Gender'} data={data.appearance.gender} />
              <DisplaySuperHeroProperty name={'Race'} data={data.appearance.race} />
              <DisplaySuperHeroProperty name={'Power'} data={data.powerstats.power} />
              <DisplaySuperHeroProperty name={'Speed'} data={data.powerstats.speed} />
              <DisplaySuperHeroProperty name={'Strength'} data={data.powerstats.strength} />
              <DisplaySuperHeroProperty name={'Intelligence'} data={data.powerstats.intelligence} />
              <DisplaySuperHeroProperty name={'Combat'} data={data.powerstats.combat} />
            </Col>
            <Col LG={4}>
              <img alt={'superhero'} src={data.images.md} />
            </Col>
          </Row>
        </Container>
        <Button
          onClick={this.loadNewSuperHeroDetails}
          className={'justify-content-center mx-auto d-block'}
          style={{ margin: '40px' }}
        >
          Show Random SuperHero
        </Button>
      </div>
    );
  }
}

Node JS + TypeScript - Super Hero API

Ganesh Raja — Fri, 12 Jun 2020 19:47:31 +0000

So yesterday I get started with the basics of TypeScript. Today I wanted to Setup a Simple Node JS project with typescript.

So the project concept is very simple. I have a superhero.json file in the disk. Whenever we start the server it will load the file and store it as an array. When the user makes a request it will randomly pick one superhero and return it.

It was pretty fun and interesting. Hereafter I think I should ts for all my node projects.

You can find my Repo Link here
https://github.com/ganeshraja10/Latest-Tech-Learnings

import express, { Request, Response, Application } from 'express';
import fs from 'fs';
const app: Application = express();

const data: string = fs.readFileSync('./data/super_hero.json').toString();

const SuperHeroData: any = JSON.parse(data);

app.get('/', function (req: Request, res: Response) {
  const randomSuperHero = SuperHeroData[Math.floor(Math.random() * SuperHeroData.length)];
  res.json(randomSuperHero);
});

app.listen(3000, function () {
  console.log('App is listening on port 3000!');
});

Basics of TypeScript

Ganesh Raja — Thu, 11 Jun 2020 18:21:57 +0000

So, Today I get started with the basics of TypeScript.

I was always aginst typescript because it increases the size of the codebase. Whenever you write more code the chance for the error is high. But recently I faced some difficulties maintaining the type of the object and making sure it doesn't contain any invalid values while developing.

So I decided to give it a shot and started with basics today. Very soon will build a node and react project with typescript.

You can find my Repo Link here
https://github.com/ganeshraja10/Latest-Tech-Learnings

const a: number = 22;

interface Point {
  x: number;
  y: number;
  z?: number;
  w?: any;
}

const point2D: Point = {
  x: 22,
  y: 22,
};

const point3D: Point = {
  x: 22,
  y: 22,
  z: 33,
};

type AddValueType = (x: number, y: number) => number;

const addValue: AddValueType = (x: number, y: number) => x + y;

let multiple: number | string = 22;

multiple = 'string';

interface PointX {
  x: number;
}

interface PointY {
  y: number;
}

type Point2Dim = (PointX & PointY) | string;

const Point2D2: Point2Dim = {
  x: 22,
  y: 33,
};

Detect Faces in Video using OpenCV

Ganesh Raja — Wed, 10 Jun 2020 19:22:49 +0000

So, Today I wanted to experiment with Simple OpenCV. So that the following script does is,
it loads the video from the disk, checks for face shape in every frame using the loaded cascade. if it finds an image, it draws a rectangle around it and displays the image. Unfortunately, it only detects frontal faces.

You can find the code to do this below

You can find my Repo Link here
https://github.com/ganeshraja10/Latest-Tech-Learnings

import cv2
# loading haarcascade to detect frontal face
cascade = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')

video = cv2.VideoCapture('data/avengers.mp4')  # Load video

while True:
    rect, img = video.read()  # Read the video
    if not rect:
        break
    # Convert RGB to Gray to detect edges
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
    faces = cascade.detectMultiScale(gray, 1.35, 7)  # Detect possible faces
    if faces is not ():  # List is not empty
        for x, y, w, h in faces:  # Draw Rect in all faces
            cv2.rectangle(img, (x, y), (x+w, y+h), (127, 0, 255), 2)
    cv2.imshow('img', img)  # Display the image
    k = cv2.waitKey(30)
    if k == 27:  # if key pressed is escape quit
        break

video.release()  # release the video

A Simple server with Deno

Ganesh Raja — Tue, 09 Jun 2020 12:51:30 +0000

I wanted to experiment with Deno and build a quick site. Here it is.

A Server that makes an API call to SpaceX and gets the image list. Whenever user makes a request it returns a random image. Started this to learn more about Deno

From my understanding it's still in the very early stages. But could be really healful for scripting with the permissions feature.We will see

You can find my Repo Link here
https://github.com/ganeshraja10/Latest-Tech-Learnings

import { serve } from "https://deno.land/std@0.55.0/http/server.ts";

const SPACE_X_URL = "https://api.spacexdata.com/v3/launches/latest";

const res = await fetch(SPACE_X_URL);
const response_json = await res.json();

const images_list = response_json["links"]["flickr_images"];

const server = serve({ port: 8000 });

console.log("http://localhost:8000/");
for await (const req of server) {
  let img_url = images_list || images_list[Math.floor(Math.random() * images_list.length)];
  let response = `<h1>Hey, Here is one random Space X Image </h1> <img style='height:500;width:500' src="${img_url}"/>`;
  req.respond({ body: response });
}

Day 6 - 100 days of Coding - Vs Code Extension - add restart feature

Ganesh Raja — Thu, 16 Apr 2020 18:48:22 +0000

So it's day 6 of 100 days of coding

Today's Objectives

1)Add Restart Functionality

2)Update the Format of the Data

Add Restart Functionality

To do this, I added a new command that will call the storeDate Method to make sure it stores the Data into File if it's a restarting Pomodoro.
Then it resets the value to default. Later it moves to the Start Timer Method to trigger new Pomodoro

  restartTimer() {
    if (this.tick >= 0) this.storeStatusToFile(); //Update File with Previous Pomodo Data
    this.resetPomodoTimer();
    this.startTimer();
  }

Update the Format of the Data

Here we store the ISO String of Date & time the Pomodoro was started. If it's fully completed. We trigger completed. Else store as canceled


  storeStatusToFile() {
    let status = this.tick <= 0 && this.currentAction == POMODO_TIMER ? COMPLETED : CANCELED;
    let data = [this.startedTime.toISOString(), status].join(",");
    fs.appendFile(this.fileName, data + "\n", (err) => console.log(err));
  }

Tomorrow I will be working on custom values for the PomodoTimer.

You can check the full code in my repo simple-pomodoro-timer

Day 5 - 100 days of Coding - Python - Add text into Image

Ganesh Raja — Tue, 14 Apr 2020 19:53:23 +0000

So it's day 5 of 100 days of coding. Today I wanted to try something different. I want to add the day into my cover pic daily. Doing it manually would be boring. So I thought of automating it. So today we are gonna add the Number of the day I am working on into the image using Open CV

Today's Objectives

1) Create a python script that will automatically add the given day's text into image

import cv2
import os

x_and_y = (470, 340)
font_color = (255, 255, 255)
font_scale = 2
font = cv2.FONT_HERSHEY_SIMPLEX
output_folder = './'

date = input("Enter the date to be added ") # Get Date to be added from user
im = cv2.imread('data/100_days_image_template.jpeg', 1)

cv2.putText(im, 'Day {}'.format(date), x_and_y,
            font, font_scale, font_color, 2)
cv2.imwrite(output_folder+date+".jpeg", im)

You can check the sample image in header

You can check the full code in my repo automated_python_Scripts

Day 4 - 100 days of Coding - Vs Code Extension - Store Date in a permanent file

Ganesh Raja — Sun, 12 Apr 2020 18:29:24 +0000

So it's day 4 of 100 days of coding

Today's Objectives

1)Add Pause Functionality for Rest Timer

2)Store Completed Pomodo into permanent file

I managed to complete the both the objective for today

Add Pause Functionality for Rest Timer

To Achieve this I had to Either add a new Command or adjust existing command. I decided to go with the existing command. So whenever startPomodoTimer is executed, it will check for current Action State, if it is Pomodoro Timer it will trigger start Work Timer or it will trigger rest Timer.

    if (this.currentAction == POMODO_TIMER) this.startWorkTimer();
    else this.startRestTimer();

Store Completed Pomodo into permanent file

To achieve this I had to use Vscode Context. There is a path allocated for all the plugins. To make sure our specific directory exist we need to make sure using fs module of node.

  try {
    fs.mkdirSync(context.globalStoragePath, { recursive: true });
  } catch (exception) {
    console.log(exception);
  }

So whenever a Pomodoro is completed, We need to call storeDatetoFile Method, Currently it's a simple text file that stores the start time of a Pomodoro and it's status (which is completed always)

  storeDataToFile() {
    fs.appendFile(this.fileName, this.currentTime + ",completed", (err) => console.log(err));
  }

Tomorrow I will be working on improvising the Storage feature.

You can check the full code in my repo simple-pomodoro-timer

Day 3 - 100 days of Coding - Vs Code Extension

Ganesh Raja — Sat, 11 Apr 2020 19:19:29 +0000

So it's day three of the extension building. For the first two days, we built a basic working extension and converted it into class.

Today we are gonna majorly focus on adding pause Feature to our Pomodoro Timer. To achieve this we need to store the timer into our class field. We will store the current state as either Pomodoro or Rest in our class as well. we will store the timer id into the class.

    this.tick = 0;
    this.currentTimerID = null;
    this.currentAction = POMODO_TIMER;

Whenever a new timer is called this will be updated. Whenever new tick happened tick will be updated and Whenever the actions is changed current Action will be updated.


  pausePomodoTimer() {
    if (this.currentTimerID) {
      this.vsCodeStatusBar.text = "Pomodo Timer passed. Click to Resume";
      clearInterval(this.currentTimerID);
      switch (this.currentAction) {
        case POMODO_TIMER:
          this.vsCodeStatusBar.command = "extension.startPomodoTimer";
          break;
        case REST_TIMER:
          // this.vsCodeStatusBar.command = "extension.startPomodoTimer";
          break;
      }
    }
  }

Whenever the user tried to pause (with a new command registered. ) by clicking on status bar item. We will be updating the item command to start (for resume on next click) and clear the current timer. When user tries to resume next, we will take the value and state stored in the constructor and resume it.

You can check the full code in my repo simple-pomodoro-timer

Vs Code Extension

Ganesh Raja — Wed, 08 Apr 2020 18:34:20 +0000

Today I spent time updating the code from JS file to Class Format. The update is partially done. I will be continuing this tomorrow. You can check full code in Repo as well.

const vscode = require("vscode");

const pomodo = class Pomodoro {
  constructor(context) {
    this.vsCodeStatusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment["Right"], 10);
    this.context = context;
  }
  startPomodoTimer() {
    this.vsCodeStatusBar.text = "Pomodo Started";
    this.vsCodeStatusBar.show();
    this.startWorkTimer();
  }
  appendZero() {
    this.num <= 9 ? "0" + this.num : this.num;
  }

  updateStatusBar(min, sec, icon) {}

  timer(countDownTime, callEverySecond = null, counterisDone = null, icon = null) {
    let countDownTimer = countDownTime;
    let that = this;
    let timerId = setInterval(function () {
      countDownTimer -= 1000;
      let min = Math.floor(countDownTimer / (60 * 1000));
      let sec = Math.floor((countDownTimer - min * 60 * 1000) / 1000);

      if (countDownTimer <= 0) {
        clearInterval(timerId);
        if (counterisDone) counterisDone();
      } else {
        that.vsCodeStatusBar.text = icon + " " + this.appendZero(min) + " : " + this.appendZero(sec);
      }
    }, 1000);
  }

  startWorkTimer() {
    const pomodoCountDown = 5 * 60 * 1000;
    const tomatodIcon = "🍅";
    this.timer(pomodoCountDown, this.updateStatusBar, this.startRestTimer, tomatodIcon);
  }

  pomodoDone() {
    this.vsCodeStatusBar.text = "Pomodo Done!!!";
  }

  startRestTimer() {
    const restCountDown = 1 * 60 * 100;
    const restIcon = "🌴";
    this.timer(restCountDown, this.updateStatusBar, this.pomodoDone, restIcon);
  }
};
exports.pomodo = pomodo;

Vs-Code Extension - Project Setup and Basic functionalities

Ganesh Raja — Tue, 07 Apr 2020 19:42:19 +0000

I want to build a simple Pomodoro extension for VS-code. The main reason is I want to store every Pomodo I work on So in future I can find which day was more productive and it will be helpful for me to improve my VSCode extension building Skills as well.

So to get started. We need to Install npm package called yo and set up a new vs-code extension Project. It does the basic setups and creates a folder structure project. we can open the code in VSCode and click F5 to execute the plugin in development mode. It will open a new VS Code. Open command panel and execute Hello world. This is a simple VS Code extension.

I created a new file called pomodo.js inside the folder and created Three major functions.

Start Pomodoro Timer - When the command is executed this will trigger the Work Timer
Start Work Timer - For Every second it updates the VSCode Status Bar to Display the Current Timer. For testing, I kept it as 5 mins.
Start Rest Timer - It will display the rest time similar to Work Timer. Once it's done it will display a message saying Pomodoro is done.

I have attached my pomodo.js for reference here.
Tomorrow will go detailed into code

For full code check Repo simple-pomodoro-timer

const vscode = require("vscode");

let WORK_TIME = 25;
let REST_TIME = 5;

const vsCodeStatusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment["Right"], 10);

const startPomodoTimer = () => {
  vsCodeStatusBar.text = "Pomodo Started";
  vsCodeStatusBar.show();
  startWorkTimer();
};
const appendZero = (num) => (num <= 9 ? "0" + num : num);

const updateStatusBar = (min, sec, icon) => {
  vsCodeStatusBar.text = icon + " " + appendZero(min) + " : " + appendZero(sec);
};

const timer = (countDownTime, callEverySecond = null, counterisDone = null, icon = null) => {
  let countDownTimer = countDownTime;
  let timerId = setInterval(function () {
    countDownTimer -= 1000;
    let min = Math.floor(countDownTimer / (60 * 1000));
    let sec = Math.floor((countDownTimer - min * 60 * 1000) / 1000);

    if (countDownTimer <= 0) {
      clearInterval(timerId);
      if (counterisDone) counterisDone();
    } else {
      if (callEverySecond) callEverySecond(min, sec, icon);
    }
  }, 1000);
  // return timerId;
};

const startWorkTimer = () => {
  const pomodoCountDown = 5 * 60 * 1000;
  const tomatodIcon = "🍅";
  timer(pomodoCountDown, updateStatusBar, startRestTimer, tomatodIcon);
};
const pomodoDone = () => {
  vsCodeStatusBar.text = "Pomodo Done!!!";
};

const startRestTimer = () => {
  const restCountDown = 1 * 60 * 100;
  const restIcon = "🌴";
  timer(restCountDown, updateStatusBar, pomodoDone, restIcon);
};

exports.startPomodoTimer = startPomodoTimer;