DEV Community: alimemonzx

The must listen Podcast If you are a CEO

alimemonzx — Fri, 29 Jan 2021 14:35:37 +0000

Business wars is amazing podcast series. In which the host David Brown discusses the business strategies and competition between the biggest business in the world.

The best series so far for me was Netflix vs Blockbuster. Blockbuster's was the pioneer in movie rental business. In 2000 Netflix offered Blockbuster a partnership which Blockbuster turned down and rest is the history.

Do check out this 8 episode series on Spotify.

Some amazing series from Business Wars:

Nike vs Adidas
eBay vs PayPal
Marvel vs DC
Red bull vs Monster
Coke vs Pepsi
McDonalds vs Burger King
Ferrari vs Lamborghini

Have you heard any of this series. If yes, do let me know which one is your favourite in comments section

Deploy your React app on heroku and go severless

alimemonzx — Thu, 28 Jan 2021 19:22:43 +0000

The word serverless feels like there is no server but actually Serverless is nothing but someone else's server. So don't be confused.

Herokuapp is great for deploying your projects without worrying about setting up a server. Heroku does that for you.

So let's start with a react app and deploy it on heroku.

🛠️ Tools we need:

A react app running on your local server.
Heroku Cli
Obviously a heroku account.

Step 1:

Let's create an app.js file on the root of you project for heroku configs so heroku will run a node server and that node server will serve the content from our react build. We will use express to create a server. Run this command in terminal inside the app root directory.

npm i express

Your app.js file should look like this.

app.js:

const path = require("path");
const express = require("express");
const app = express();
const publicPath = path.join(__dirname, "build");
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get("*", (req, res) => {
  res.sendFile(path.join(publicPath, "index.html"));
});
app.listen(port, () => {
  console.log("Something cool is up and running 🚀🚀🚀!");
});

Step 2:

Make changes in your package.json file.

 "scripts": {
    "start": "node app.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I have replaced the start command with dev and start has new content which actually runs a production build of your app. The reason to do this because heroku will always look for start command and run it. We can not run dev server on heroku because of slow performance. You can do it if you want. But its not recommended.

Step 3:

Just run these commands in your terminal and there you go your app is deployed on heroku.

heroku create, This creates a new project and a git repo in your heroku account.

git add .
git commit -m "Initial Commit"
git push heroku master

Now if you want to continue your local development. You will not use npm start because npm start will run the local build if you have one, instead you will use npm run dev to continue development on local environment.

Image Credits: Dave Ceddia

Everything is 'undefined' in JavaScript

alimemonzx — Tue, 26 Jan 2021 20:26:26 +0000

To understand the title first we have to recap the concept of hoisting in JavaScript.

You may have heard that hoisting is a concept of JavaScript, in which JavaScript moves all the variable of your code at the top level and start executing.

There are statements as well like, only the variable declarations are hoisted and initialisations are not. All these explanations are explained conceptually. Things work different in reality.

How about if we take a deep look how JavaScript work. Then we can have a better understanding of hoisting and the title of this blog.

Everyone may know that JavaScript has a call stack and all the programs executes in a call stack. JavaScript has a global execution context. So whenever you run a piece of code it is run inside global execution context.

Now the fun part is global execution context does not start executing code line by line, instead it has two process before it start the execution of code.

1. The Creation Process
2. The Execution Process

Both process do their job very differently. Let's just discuss the creation process and reveal the secret of this blog.

The Creation Process:

When a program runs, javascript scans the whole program and registers all the variables in the global scope with the special value of 'undefined'. Yeah that's true, every variable is undefined in the creation Process.

In case of functions things work differently. JavaScript registers the function with its actual body. So functions are not undefined, they have their whole body in the creation process.But, if you use arrow functions they will be undefined as well. Let's make it easier with images.

Step 1: Code starts executing in GEC.
Step 2: The creation process started. It looks for all the variable and functions register them in global scope with the value of 'undefined' to variable and assigned whole function body to the function name.
Step 3: The execution process started and actually assigned the value of a. The value of a is now replaced from undefined to a string Every variable is undefined

Now let's dive actually into the code. I have used the same code and tried to run it on my browser with a debug point at line no 1.

Inside the highlighted red part you can see that var a is undefined. At this point creation process is already finished and JavaScript has already added the variable a in global scope with a default value of undefined.aFunction is also added in global context with its whole body.

So this is how JavaScript works. Before executing, it kind of scans the whole program and register all the variables and functions in their respective scopes. The creation process is also known as hoisting in JavaScript.

You can also try and debug the code in your browser, try with ES6 arrow functions and check if it is undefined or not. The information is taken from so many videos and articles and shared it here. Share your ideas in comments below.

HAPPY CODING

HOW TO WRITE GOOD FUNCTIONS

alimemonzx — Sat, 23 Jan 2021 19:21:26 +0000

Okay, So my first take on this blog "how to write good functions". If I tell you about my experience nobody taught me how to write good functions and classes. All I assume in the beginning of my career was I should write less amount of functions and do as much code as in one function which is totally wrong. At that time, I assume that it's a really good practice to write everything in one function which I assume that my function is very powerful doing all the stuff at once. As soon as I move to build advance project I always stuck in the mid of big functions and writing same amount of code again and again. Those functions made me realise that I am doing bad code. I was so frustrated with this practice.

One day my friend suggested me to read Design Patterns to get rid of this problem. I started reading SOLID principles. All those heavy words went over my head and again it the feeling was like I can never learn this. But SOLID really helps. I will write a separate blog on SOLID principles.

Uncle Bob To Rescue:

So many of you might know Uncle Bob but if not "Robert Cecil Martin" aka Uncle Bob. I was just surfing on YouTube and found a great video of Uncle Bob explaining the difference between good and bad functions. Following few point I took from his talk. So without wasting your time let's discuss how to write good functions. If you keep remember these 5 points when writing functions then you will rock.

Boring Function
Make It Like A Story
Make Them Reusable
3 Minute Strategy
No More Than 2 Arguments

Boring Functions:

If you are reading a function and whatever you read is compiling in your mind and you feel like.

Thats so boring and simple to understand whats going on.

Then the function is well written and that's exactly you have to write your functions. Good functions are always easy to understand. Let me explain in more detail.

On the other side if you are reading a function and you have a confusing eye on the screen, Moving your eyeball from top to bottom of that function thinking that, what the hell is going on here. So it's a sign of bad function.

A function should always do a one task. It should not be doing multiple tasks in its implementation. If you have multiple logics in your functions just separate them into other functions and reuse them. Doing that you will be making your functions easy to read and understand. Make sure one function is only performing one task.

Make it like a story:

Ever remember when you were a kid and reading a story book and after reading each line you smile or you become curious that what will gonna happen next. While you were reading you already know what going on and sometimes you also predict what will gonna happen next.

In the same manner we have to write our class like a story with the help of functions. Name your functions like if anybody reads your function, he shouldn't have to read the implementation. Just by reading the name he understands what is going on inside the function. To make your class beautiful like a story you have to write small functions so the reader (you) can understand just by reading the name of functions with a smiling face.

Make them Reuseable:

Always try to make your functions reusable, If you have written a function of 30 lines. I am 100% sure that there would be some chunks in your function which you can move it in different functions and reuse them in others. Even if you are repeating a single line again and again just put that line in another function, return it and reuse it.

Try not to use global variable in your functions as it results tight coupling in your functions and you can never use them again. Use parameters instead of global variables to make them more dynamic.

3 minutes strategy:

If you are taking more than 3 minutes to understand a function than there is something bad in that function. 3 minutes is a lot of time to understand. The average time to understand a function is 90 seconds (No valid stats). If you are taking more than that. Then its time to separate some chunk from your function and write them in other.

Not more than 2 arguments :

According to uncle bob, Good function are always without arguments. Now in some cases we need parameters to process the output. The fine limit is 2 arguments in a function. But you can add more where it should definitely make sense. Adding 5 6 or 7 arguments in a function is a bad practice.

Tip : Good functions are no longer than 20 lines.

So if you like this article do share it with your friends and let me know your feedback on this. I will be so happy if these 5 points help you to write your good functions. Cheers