DEV Community: AmeyaKulkarni2001

Nodejs CLI : Introduction

AmeyaKulkarni2001 — Wed, 09 Nov 2022 06:32:03 +0000

Introduction

We use CLI's in a lot of places like when using git, npm, firebase. heroku etc

For example

git init

There are mainly 3 parts to a CLI

Keyword
Command / Input
Flag

Keyword

Keyword means the activation sequence to a script

For example

git add -> here git is the keyword
npm init -> here npm is the keyword
firebase deploy -> here firebase is the keyword

Input

The words following the keyword without the - are called input, they give direction to the process started by the Keyword

For example

If we type git add . the add part tells git to add the following file to the repo

Flags

Flags provide additional input to the command and they also help in passing data

For example

gcc input.c -o output

In the above example -o is the flag which tells the C compiler that the output file should be named output

Now that we know the basics we can move towards the setup

Setup / Installation

Go to the place where you want to setup the coding environment, in my case it will be

$HOME/Coding/cli

npx create-node-cli intro

The above command will setup a basic backbone to develop a cli

After running this command, it will give use several options

CLI name? ‣   (kebab-case only)
CLI command? ‣   (optional: if different from CLI name)
CLI description? · 
CLI version? ‣ 0.0.1
CLI license? ‣ UNLICENSED
CLI author name? ‣ 
CLI author email? ‣ 
CLI author URL? ‣

In our case it will be

CLI name? ‣   intro
CLI command? ‣   
CLI description? · Gives a introduction
CLI version? ‣ 0.0.1
CLI license? ‣ UNLICENSED
CLI author name? ‣ 
CLI author email? ‣ 
CLI author URL? ‣

Now to start working go into the inrto directory and open your favourite editor

cd intro

Explaining the directory structure and features

.
├── index.js
├── package.json
├── package-lock.json
└── utils
    ├── cli.js
    ├── init.js
    └── log.js

1 directory, 6 files

We will start with index.js

const init = require('./utils/init');
const cli = require('./utils/cli');
const log = require('./utils/log');

const input = cli.input;
const flags = cli.flags;
const { clear, debug } = flags;

(async () => {
    init({ clear });
    input.includes(`help`) && cli.showHelp(0);

    debug && log(flags);
})();

So, we see that we are requiring various files such as init, cli and log we will see whats in them and there use later

We can also see that the code already has input and flags defined

Now the first line we see is the init({clear}) to find what this does we can go to the init.js file and see that it is the part we see every time theintroduce keyword is run

In the async part of the code we can also see a statement

input.includes('help') && cli.showHelp

This means that we are checking if the input has help as a parameter and if it has it then we are running showHelp from cli

So, if we run

node index.js help

it will show us the help part, lets run this part and see what happens

   USAGE  

  $ intro <command> [option]

   COMMANDS  

  help  Print help info    

   OPTIONS  

  -c, --clear    Clear the console Default: true         
  --noClear      Don't clear the console Default: false  
  -d, --debug    Print debug info Default: false         
  -v, --version  Print CLI version Default: false

So, it gives us a help text, now if we go into the cli.js we can also see these options defined there

const commands = {
    help: { desc: `Print help info` }
};

const flags = {
    clear: {
        type: `boolean`,
        default: true,
        alias: `c`,
        desc: `Clear the console`
    },
    noClear: {
        type: `boolean`,
        default: false,
        desc: `Don't clear the console`
    },
    debug: {
        type: `boolean`,
        default: false,
        alias: `d`,
        desc: `Print debug info`
    },
    version: {
        type: `boolean`,
        alias: `v`,
        desc: `Print CLI version`
    }
};

So, now we know what is the function of cli.js it shows us the help options, we also define our flags there and in the future when we add new inputs and flags, we have to add them here so, it can be used as documentation.

Making a Intoduction CLI

Now lets start with our main work

We want the user to enter their name, and then, we can introduce them using our CLI

So, we need to take a input from the user, and we know that for taking input we can use flags. Lets name the Command/Input as hello


//cli.js
version: {
    type: `boolean`,
    alias: `v`,
    desc: `Print CLI version`
},
user: {
    type: 'string',
    alias: 'u',
    desc: 'takes the name of user'
}

//index.js
if(input.includes("hello")){
        console.log(`hello ${flags.user}`);
}

For the flag, we add a user flag in the cli.js which is of a type string, and can be used as -user or -u because of the alias

Then, in the index.js we check if the command includes hello and then log the name of the user.

Lets check if it works

node index.js hello -u {your name}

and hopefully it works

Final step

Now to put everything together we need to run npm link this tells the OS to accept our new cli whose keyword will be intro.

If you have forgotten or want to rename the Keyword, we can go to package.json to review everything

"name": "intro",
"description": "Introduces the person",
"version": "0.0.1",
"license": "UNLICENSED",
"bin": {
    "intro": "index.js"
},
"keywords": [
    "intro"
],

Here we can change the keyword to be what ever you want.

After running npm link lets check our program

intro hello -u {your name}

and voila you made your first cli which should hopefully be working

If you had any problems following along here is the github repo link

Resourses I Use For Web Development

AmeyaKulkarni2001 — Tue, 25 May 2021 10:21:11 +0000

**)MDN Web Docs

MDN Web Docs is the almost go-to site for Web developers, so I didn't mention it here

1) HTML Cheat Sheet

A cheat sheet which contains all basic HTML tags and attributes

There are a lot HTML tags, each tags have their own attributes, each tag has a different function, this cheat sheet helps a lot with that type of problems, just download it and keep it around.

It also isn't a large sheet, just 2 pages with almost 10 times amount of information

2) CSS Cheat Sheet

All properties of CSS arranged on 2 sheets

There are a lot of CSS properties, many of which even I don't know exist, and they do dozens of things, which I havent bothered exploring yet. This sheet also has loads of info, which can act as your look up sheet, just keep it around

3) Color Hunt

Helps choose appropriate color scheme for your side

Color hunt is a site from which you can select an appropriate color scheme for your website so that it looks sophisticated and doesn't look the all over the place types, it also has a chrome extension available

4) Favicon

Favicon is one of the most known websites to design an appropriate icon for your webpage.

5) Google Fonts

Google Fonts has a variety of fonts which you can import and import for your website

6) Flaticon

This website has a large collections from where I download icons and emojis when I have to put them in the website

How To Increase React Productivity

AmeyaKulkarni2001 — Sat, 22 May 2021 14:14:06 +0000

Using React Dev Tools

As almost all developers familiar with React know, it has a lot of components which are linked with each other to from a big component tree with a lot of branches, all components have states and props being passes up and down the tree.

It can get very confusing in later stages but worry not, Facebook which is the creator of react, has a Chrome Extension which some of the people don't know of.

It adds new tabs to the Chrome developer tools, which make the complex structure of react apps a bit easy.

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on

Here App.js has a subcomponent of Entry which ca be seen using the dev tools

It also shows where the data is coming from and what props are there in that component

Learning Basic of Command Line

AmeyaKulkarni2001 — Sat, 22 May 2021 06:07:24 +0000

What is a Command Line?

It's provides a way of interacting with your computer, without the need of a GUI like file explorer.

The command line varies for Windows and Mac, so for explaining, I will use a common platform called Hyper Terminal.

Installation MacOS

Download Hyper from the above link and Unzip it.
Move it to application folder.

Installation Windows

Download Hyper from the above link
Run setup.exe
Install GitBash, to use Bash.
While installing Git Bash make sure you have Git Bash checked in Windows Explore Integration options, and keep all default options, then restart your computer.
Now, we have to manage the Hyper Configurations, for that please go to this site
Copy the details.
Now after opening preferences, replace what is in the text file with what you copied in the git gist, now save it.
Reopen hyper.
Now to check type the following in your hyper terminal

echo $SHELL

It should return /bin/bash if it is installed correctly.

What is Bash, Understanding Command Line

Kernel is the base of the computer system on which everything operates(In Layman Language).

Shell is like a cover or shell(pun 😆), which shields or covers the kernel from the user. Shell, provides a interface between user and kernel. It provides two types of interface, GUI which is the File Explorer and Terminal or Command Line.

Bash is a type of shell. BASH = Bourne Again Shell after Mr. Bourne. Bash Shell is a CLI ( Command Line Interpreter) for the Unix System. A lot of systems run on UNIX such as Linux, a lot of servers(such as a node development server), and even MacOS. But, windows uses DOS instead of Bash. This is the reason we aren't directly using the command line provided by windows.

Command Line provides greater control over your computer hardware, it is also easier and faster. We can also view hidden folders with the help of command line.

Command Line Techniques

List

It displays all the files at your given location

$ls

For eg-

The ~ sign shows where your current location is.

Change Directory

It helps in changing your current location, to one location down

$ls
(Shows whrere you can go) 

$cd <where to go>

For eg-

We can also go a level above by using

$ cd ..

We can also specify the full path of where to go

$cd <Superparent>/<Parent>/<Child>

For eg-

Make Directory

It is used to make a new directory or folder at the desired location

$mkdir <Directory Name>

For eg-

Creating A File

It is used to make a file.

$Touch Text.txt

Opening a file

For Windows

$start Text.txt

For MacOS

$open Text.txt

Delete Files and Folders(Please Use These Commands wisely, as it can delete important files)

For Files

$rm Text.txt
$rm * (Removes all the files of the folder)

For Folders

$rm -r AllDocs/

Clear Previous Lines

$clear

Exiting The Terminal

$exit
   OR
$logout

Learn More?

If you want to learn more about command line this is what I recommend-

https://www.learnenough.com/command-line-tutorial

Learning Basics Of React

AmeyaKulkarni2001 — Fri, 21 May 2021 18:45:40 +0000

JavaScript Refresher

Let and const

Let almost as same as var but, differs in the scope of variables
Const is used to create variables which never vary
In var

console.log(x);
var x=5; 
console.log(x);
// output: undefined , 5

In Let

console.log(x);
let x=5;
console.log(x);
//Output: Error

Arrow Functions

function printName(){
 console.log("Ameya");
}
//It can be written as
const printName = () => {
  console.log("Ameya");
}
//If there is only one line then it can be further reduced to
const printName = () => console.log("Ameya");

Exports and Imports

Exports can be written as

const Calc = () =>{
    let x = 1+1;
    return x;
}
export default Calc;

Here we don't call Calc Calc()

Imports can be written as

import Calc from "./<Where ever the code is>"

Spread and Rest operator

...

^ is the Spread or rest operator. Just three dots, it can be as

const name = {
    Firstname: Ameya,
    Lastname: Kulkarni
}
const StudentID = {
    ...name,
    Rollno: 23
}

The StudentID will have Firstname Lastname and Rollno

Destructuring

It allows us to access values of arrays or objects

const array = [1,2,3];
const [a,b] = array;
// a will have the value of 1 and b of 2

Components & Props

What are components

User interface is made of components, and since react works in a declarative way, it is based on components.

There are many components laid inside components, making a tree.

Components are re-usable.

Props

Props are means of sending data down the tree, thus sharing data between two components at two different levels.

import card from "./<some place>"
const App = () => {
    <Card 
        name = "Ameya"
        id = 3
    />
}

const card = (props) =>{
    <h2>{props.name}</h2> // it will give value Ameya
}

export default Card;

React State & Events

Events

An event takes place when a action is done.

const buttonClickHandler = () =>{
    console.log("I got clicked");
}
<button onClick = {buttonClickHandler}/>
//         ^ is a type of event which happens on click of button

We can come back to Events later

State

When, we change value or update a component, it doesn't get updated because the react page once rendered doesn't reload.

When, we use State, react understands that it has to reload that certain component which then results in updating of that page

import React, { useState } from 'react';

const updateName = () =>{
    const [name, setName] = useState(""); 
    //returns the value and function(which is used to set value)
    setName("Ameya")

    return(
    <div>
    <h2>{name}</h2>
    </div>
    );
}

Lifting the State Up

We know that props can be used to send data from Parent to Child but, there is no way to send data from Child to Parent.

This can be done with the help of a method called "Lifting the State Up", it uses props and functions to do it.


const SendData = (props) =>{
    const data = {
        Firstname: Ameya,
        Lastname : Kulkarni,
        rollno   : 23   
    }
    props.onSendingData(data)
    return <h2>Ameya</h2>;
}
export default SendData;

import SendData from "./SendData";

const ReceiveData = () =>{
    const sendingDatahandler = (receivedData) =>{
        const data = {
            ...receivedData
        }
    }
    return <SendData onSendingData={sendingDataHandler} />;
}

A function is declared in Parent and is sent to Child via props, the function, then activates in the Child, and its function is to receive data.

This received data is then transferred back to Parent, because that is the origin of the function.

But one thing to be remembered is that if there is a Super-Parent, and we want to send it data from child then the data has to go from Child → Parent → Super-Parent and not directly