DEV Community: Deeksha

Fixing my everyday errors!!

Deeksha — Sat, 30 Oct 2021 16:59:33 +0000

1. How do I kill a process currently using a port on localhost?

npx kill-port 8001
Expected output: Process on port 8001 killed

2. Using import in server.js

Inside package.json add


"type": "module",

3. sh: react-scripts: command not found after running npm start

run npm install or yarn add
💡 stack-overflow

4. axios baseURL

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

5. Heroku `error code = H10`

Heroku dynamically sets the PORT, which can be accessed with process.env.PORT

const port = process.env.PORT || 8001;

6. If we get "Failed to load config "react-app" to extend from"

yarn add eslint-config-react-app
💡dev.to

7. Installing npm

sudo apt-get install npm

8. Installing n

sudo npm install n -g

9. Installing Node LTS version

sudo n lts

10. Checking node version

node --version

10. Installing java version 11

sudo apt install openjdk-11-jre-headless

11. Installing vs code

11.1.sudo apt install wget -y
11.2wget -O vscode.deb 'https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64'

12. Installing Storybook

npx sb init

13. Clone a specific branch

git clone -b <branchname> <remote-repo-url>
💡 https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/

Useful VS Code Extensions!!

Deeksha — Wed, 11 Aug 2021 16:28:27 +0000

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. Few VS Code extensions that will make you a more productive developer are shared here. The extensions provided here are mostly for web developers, but some general-purpose extensions will benefit everyone, even a beginner as well.

Prettier

Prettier is an opinionated code formatter that supports many languages. It removes all original styling* and ensures that all outputted code conforms to a consistent style.
Remember: In order to use prettier, in settings add a ✔ on the format on save

GitLens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

Current File Path

This extension displays a current file path from absolute (root directory) or workspace highest directory in StatusBar by Unix style or Windows style.

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
It is a good tool for beginners. Many times in the early-stage most of the errors are due to missing brackets.

Emmet

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Live Share

Live share enables you to collaboratively edit and debug with others in real-time, regardless of the programming languages you are using or app types you are building. You can instantly and securely share your current project, start a joint debugging session, share terminal instances, forward localhost web apps, have voice calls, and more!
Unlike traditional pair programming, Visual Studio Live Share allows developers to work together while retaining their personal editor preferences, as well as having their own cursor.

ES7 React/Redux/GraphQL/React-Native snippets

This extension provides you with JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code. It gets you quickly up and running with the codes and components that you need simply just by typing few letters.

Tabnine

Tabnine studies publicly shared code and use A.I deep learning algorithms that provide us with the ability to predict your next coding needs and suggest one-click code completion.
Tabnine works with all major programming languages including JavaScript, Python, TypeScript, PHP, C/C++, HTML/CSS, Go, Java, Ruby, C#, Rust, SQL, Bash, Kotlin, Julia, Lua, OCaml, Perl, Haskell, and React.
Remember: Use Tabnine only when you have completely understood a language. It is supposed to save your development time not hinder your learning.

NOTE:

Some of these will require minor changes in settings, refer to documentation, blogs, google search, youtube videos on how to set this up.
If further guidance/help is needed reach out to me at edudeek@gmail.com

Happy Learning!!

Recursion with JavaScript

Deeksha — Mon, 31 May 2021 15:30:34 +0000

Definition: A process or a function that calls itself.

Where is it used ???

(Other than our own code)

JSON.parse / JSON.stringify inside JavaScript engine is often written recursively.
document.getElementById and DOM traversal algorith are often written recursively.
Recursion is also seen with more complex data structures.(Trees and Graphs)
At times it is seen as a cleaner alternative to iteration.

Any time a function is invoked, it is placed on the top of call stack. When JavaScript sees the return keyword or whenever the function ends, compiler will remove it from stack. We are used to functions being pushed on the call stack and popped off when they are done. When we write recursive functions we keep pushing new functions onto call stack.

How recursive functions work?

We invoke the same function with a different input until we reach the base case.
Base Case:It is the condition for which solution is provided. The solution for the bigger problem is expressed in terms of smaller problems.

function factorial(num){
    if(num===0||num===1) //Base Case
    {
        return 1;
    }
    else return num*factorial(num-1);

}

Common recursion pitfalls

Errors in the base case

function factorial(num){
    if(num===1||num===1) //Base Case
    {
        return 1;
    }
    else return num*factorial(num-1);

}

Forgetting to return or returning wrong thing

function factorial(num){
    if(num===0||num===1) //Base Case
    {
        return num ;
    }
    else return num*factorial(num-1);

}

Instead of return using console.log for base case.

function factorial(num){
    if(num===0||num===1) //Base Case
    {
        console.log(1);
    }
    else return num*factorial(num-1);

}

Maximum call size stack exceeded / stack overflow.

function callMyself(){
  callMyself();
}

callMyself();

DEV Community: Deeksha

Fixing my everyday errors!!

1. How do I kill a process currently using a port on localhost?

2. Using import in server.js

3. sh: react-scripts: command not found after running npm start

4. axios baseURL

5. Heroku error code = H10

6. If we get "Failed to load config "react-app" to extend from"

7. Installing npm

8. Installing n

9. Installing Node LTS version

10. Checking node version

10. Installing java version 11

11. Installing vs code

12. Installing Storybook

13. Clone a specific branch

Useful VS Code Extensions!!

Prettier

GitLens

Current File Path

Bracket Pair Colorizer

Emmet

Live Share

ES7 React/Redux/GraphQL/React-Native snippets

Tabnine

NOTE:

Happy Learning!!

Recursion with JavaScript

Definition: A process or a function that calls itself.

Where is it used ???

How recursive functions work?

Common recursion pitfalls

Happy Learning!!

5. Heroku `error code = H10`