DEV Community: Payalsasmal

JS output-based Interview question

Payalsasmal — Sat, 04 May 2024 12:54:54 +0000

I recently encountered an intriguing question I'd like to share with you all. Take a guess at the expected output and share your insights! 😌

Custom Hook to get window's width and height in React dynamically.

Payalsasmal — Sun, 18 Jun 2023 07:17:53 +0000

Hey Everyone!, Today we are going to discuss how to get a window's width and height with a custom hook. This coding exercise was asked of me in one of my interviews.
The interviewer asked me, Payal, create one custom hook (for reusing the code) to get the window's width and height dynamically when we resize it.
And I took time to determine that, but today I will make others understand in a 101 way.
So, let's not waste time and start...

I am going to divide it into a few steps. Let's follow these steps:

1. How to get the width and height of a browser window

In JavaScript, we use window.innerWidth and window.innerHeight to get the browser window width and height.
So, we can use the same concept in React too. Because ultimately, React is also a JavaScript library.

2. Let's use "window.innerWidth" and "window.innerHeight" properties.



App.js

import { useRef } from "react";
import "./App.css";

function App() {
  const windowSize = useRef([
    window.innerWidth,
    window.innerHeight,
  ]);
  return (
    <div className="App">
      <div className="window">
        Width : <span>{windowSize.current[0]}</span>
      </div>
      <div className="window">
        Height : <span>{windowSize.current[1]}</span>
      </div>
    </div>
  );
}
export default App;

Here I used the useRef hook. We know useRef is a mutable object, and it doesn't change its value when a component is updated. Also, changing the value of current property doesn't make it re-render.

So, if we need the window objects to change when we resize the browser object, useRef won't be the right choice.
So, we have to think: if we resize the window using an event listener, that means the state is changing while resizing, What if we use useState to track the state and provide us the value of windows dynamically?
Let's do it in our next step.

3.Add a resize event listener and useState for tracking the state in a custom hook:



useSize.js 

import { useEffect, useState } from "react";
const useSize = () => {
  const [windowSize, setWindowSize] = useState([
    window.innerHeight,
    window.innerWidth,
  ]);

  useEffect(() => {
    const windowSizeHandler = () => {
      setWindowSize([window.innerWidth, window.innerHeight]);
    };
    window.addEventListener("resize", windowSizeHandler);

    return () => {
      window.removeEventListener("resize", windowSizeHandler);
    };
  }, []);

  return windowSize;
};

export default useSize;

Let's break down the code step by step.

Let's make a useSize custom hook. In this custom hook, we used the built-in react hook useState, which updates the state variable whenever the window's width and height change.



const [windowSize, setWindowSize] = useState([
    window.innerHeight,
    window.innerWidth,
  ]);

A return value from useState is an array with the values "windowSize" and "setWindowSize." The state is stored in a variable named "windowSize," and anytime the function "setWindowSize" is invoked, it updates the state.

useEffect used for the first re-render and when the dependency changes. But there is no dependency array for our case. So it gets called only once. For our case, we are adding a resize hook to the addEventListener() method as an action. As I mentioned, there is no dependency array in useEffect, so the callback function executed only once. That means an event listener is added to the window resize event during the initial rendering of the component, and it remains active throughout the component's lifecycle.



useEffect(() => {
    const windowSizeHandler = () => {
      setWindowSize([window.innerWidth, window.innerHeight]);
    };
    window.addEventListener("resize", windowSizeHandler);

removeEventListener() is used to remove the resize event listener in this cleanup function to prevent memory leaks and unnecessary event handling after the component is removed from the DOM.



return () => {
      window.removeEventListener("resize", windowSizeHandler);
    };

returning the windowSize variable to get the windowSize when we are going to use this useSize custom hook in our different components.



return windowSize;

4.Update the App.js file.
We are importing the useSize custom hook in App.js and utilising it like other hooks.
useSize() is passed to a variable and uses that variable to fetch the width and height from an array. because the windowSize variable is initialised as an array in state.



App.js

import useSize from "./useSize";
import "./App.css";

function App() {
  const windowsize = useSize();

  return (
    <div className="App">
      <div className="window">
        Width : <span>{windowsize[0]}</span>
      </div>
      <div className="window">
        Height : <span>{windowsize[1]}</span>
      </div>
    </div>
  );
}
export default App;

5. Hola, we get the output as we expected.😊
The window's width and height are updated when it's resized.

Conclusion
By using this hook in a functional component, you can access the current window size as an array and update it automatically whenever the window is resized.

That's All.
It's as easy as eating an ice cream.😋

I hope that was enjoyable.🥳
Happy Coding....👩‍💻

Connect me on

Deploy your React App on GitHub

Payalsasmal — Tue, 17 Jan 2023 17:58:50 +0000

Hey Everyone!...
I know that you came here when you are really tired from deploying your React App on Netlify or Heroku etc. which makes the process little complex.
But are you aware that you can deploy your React application for free on GitHub?

How?

I'm going to show you how my Emoji Search App website is online using GitHub Page.

Here it comes....

How to deploy React applications on GitHub
The following steps are required.

1. Create your react application
I know you did that step, which is why you're here. But the one who didn't, that's for them. But don't worry about it, you can skip it.

Open the terminal from which you wish to create the project.
You can create the project however you prefer. I am using below command to create project.

npx react-create-project <Project Name>

Here I give the project name emoji-search.

Now navigate to the created project folder

cd emoji-search

2. Setup a GitHub repository.

You can create the repository by clicking the New button, or you can push your codes if the repository already exists.

You can either create a remote repository or, if you already have one, proceed as described for an existing repository.

Note: Your remote name should be **origin and nothing else. Otherwise, you could be left with an error below...**

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option)`

3. Deploy your React app to GitHub Repo.

Install GitHub pages npm package.

npm install gh-pages --save-dev

Open the package.json file
Add the home,page property to the package.json file inas follows.

"https://{username}.github.io/{repo-name}"

{ "homepage": "https://PayalSasmal10.github.com/emoji-search",
  "name": "emoji-search",
  "version": "0.1.0",
  "private": true,

Add predeploy and deploy properties into the package.json file to the script object.

"scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

And finally, publish your website.

npm run deploy

Once it is completed, you might see the published message at last and one build folder will be created in your react app project. As predeploy command will create distributed versions of React App.

Now to go your repo -> settings -> pages

That's how your pages look like now.

After your successful deployment, you GitHub page will be look like below.

You can see that my site name is the same as the one I provided as my homepage in package.json.

And That's all. You have successfully deployed your React Application free of charge.

If you notice an error during your deployment, please let me know in the feedback section.

Thank you for reading the blog. If you like it, please do share.

Different types of variable declarations in JavaScript - var, let and const.

Payalsasmal — Fri, 21 Oct 2022 17:16:20 +0000

Hi everyone. Here is my first blog in JavaScript. This blog is about the ways that can be used to declare variables in JavaScript. I know, as a beginner, it is difficult to understand the declaration of variable scope.

So.. I am here to make it easy.
And here you go................

In JavaScript, there are four ways to declare a variable.

Yes, you heard it right... let's elaborate.

1. Assign variable without declaring it in JS:

Yes, we can assign the variable without using var, let and const keywords. And when we do that, it becomes a global property of window object.

But remember, this is not recommended.

x = 78
console.log(a); // output- 78

But this is not applicable when we use the strict mode.

'use strict'
x = 78;
console.log(a); // output- Uncaught ReferenceError: x is not defined

2. var:

When JavaScript was first introduced, developers only used var to declare variables.Let's see a few examples.

Hoisting: We can use variables before we declare them in our code. We would get undefined as an output, but JavaScript would not throw an error if we are using var keyword.

'use strict'

function varExample() {
    console.log(x); // output- undefined
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
};
varExample();

Global Scope: var can be used globally. We have declared x without any assignment, so for the first output we got undefined. And in the last output, we got 2 after assigning the value.

'use strict'

var x
function varExample() {
    console.log("First check", x); // output- First check undefined.
    for ( var i = 0; i< 3; i++){
        x = i;
    };
    console.log("last check", x); // output- 2
};
varExample();

Functional scope: var has a functional scope, which means we can access the var variable anywhere within the function. For example, x is declared within the for loop block but x is accessible outside of the block.

'use strict'

function varExample() {
    
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
    console.log(x); // output- 2
};
varExample();

But x can't be accessible outside of the function.

'use strict'

function varExample() {
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
    
};
console.log(x); // output- Uncaught ReferenceError: x is not defined
varExample();

Re-Declaration is allowed: We can use var to re-declare or update the variable.

'use strict'

function varExample() {
    var x = 10;
    var x = 19;
    console.log(x); // output- 19
    x = 60;
    console.log(x); //output - 60
};
varExample();

3. let:

let is introduced in ES6.Let's see the same examples with let as well.

Hoisting: We can't use variables before we declare them in our code using the let keyword. While trying to access 'c', we are getting a reference error. This is called Temporal Dead Zone(TDZ). until the value gets initialized to the variable TDZ continues.

'use strict'

function varExample() {
    console.log(c); // output-Uncaught ReferenceError: c is not defined. TDZ continues here.
    for ( var i = 0; i< 3; i++){ // TDZ continues here.
        let c = i; // TDZ ended here.
    };
};
varExample();

Global Scope: let is having global scope too. And it would show the same output as var.

'use strict'

let c;
function varExample() {
    console.log(c); // output - undefined
    for ( var i = 0; i< 3; i++){
        c = i;
    };
    console.log(c); // output - 2
};
varExample();

Block Scope: The scope of a let variable is only block scope in JavaScript. Let's check out the below example. x is declared inside the for loop block, so when we are trying to access the x outside of the block, we are getting an error.

'use strict'

function varExample() {
    
    for ( let i = 0; i< 3; i++){
        let x = i;
    };
    console.log(x); // output - uncaught ReferenceError: x is not defined
};
varExample();

Re-declaration: For let variable, re-declaration is not permitted.

'use strict'

function varExample() {
    let t = 10;
    let t = 19; // output - Uncaught SyntaxError: Identifier 't' has already been declared.
    console.log(t);
    t = 60;
    console.log(t);
};
varExample();

But updating variables are allowed.

'use strict'

function varExample() {
    let t = 10;
    console.log(t); // output - 10
    t = 60;
    console.log(t); // output - 60
};
varExample();

3. const:

The variable const is the same as the variable let. const is also introduced in ES6. The only difference is that "const" can't be updated once it is declared.

'use strict'

const x = 8
function varExample() {
    x = 11; // output - Uncaught TypeError: Assignment to constant variable.
    console.log(x);
    
};
varExample();

But if we are declaring a variable like below, then x has a different scope—one is global and another is block scope,so JavaScript treats them as different variables.

'use strict'

const x = 8
function varExample() {
    const x = 11; 
    console.log(x); // output - 11 (block scope)
    
};
console.log(x); // output - 8 (global scope)
varExample();

Summary:

We should not use variables without the var, let and const keywords.
It is a good practice to use const unless you don't have anything to override.
Try to avoid var until you don't have a browser compatible issue.
let and const does not create properties of window object when declared globally (in the top scope).
Our first priority should be to use const variable to avoid value re-assignment errors in our code Unless we are pretty sure that we will not be changing its value later. Then let should be our second priority.

Bubble Sort

Payalsasmal — Mon, 24 Jan 2022 16:15:46 +0000

Hi Everyone, Hope you are safe.
I thought to create a series of sorting algorithms. I will try my best to make it simple. If you still have doubt let me know in the comment section.

Let's begin........

Background:

Bubble sort is the simplest algorithm. This is used for understanding purpose of a student. How the sorting algorithms works.
Bubble sort is good for small size of input.

What is Bubble sort:
Take the larger number to the end and repeatedly swapping the adjacent elements.

Examples:
arr = [4, 8, 1, 2, 6, 7]
First times:

[4, 8, 1, 2, 6, 7] -> it compares between first and 2nd element i.e, 4>8. it is false. so, it didn't swap.
[4, 8, 1, 2, 6, 7] -> it compares between 2nd and 3rd element i.e 8>1. Now array is [4, 1, 8, 2, 6, 7].same way it will go for others array values.
[4, 1, 8, 2, 6, 7] -> [4, 1, 2, 8, 6, 7], 8>2,swapped it.
[4, 1, 2, 8, 6, 7] -> [4, 1, 2, 6, 8, 7], 8>6,swapped it.
[4, 1, 2, 6, 8, 7] -> [4, 1, 2, 6, 7, 8], 8>7,swapped it.

Second times:

[4, 1, 2, 6, 7, 8] -> [1, 4, 2, 6, 7, 8], 4>1,swapped it.
[1, 4, 2, 6, 7, 8] -> [1, 2, 4, 6, 7, 8], 4>2,swapped it.
[1, 2, 4, 6, 7, 8] -> [1, 2, 4, 6, 7, 8], elements(4 & 6) are already in correct position so it did not swap.
[1, 2, 4, 6, 7, 8] -> [1, 2, 4, 6, 7, 8], elements(6 & 7) are already in correct position so it did not swap.

It will go for other iterations. Check the below illustration for better understanding.

We can see that larger element is going at end position using this algorithm.

Let's implement so far we discussed:

output:

Time complexity:
The time complexity of this algorithm is O(n^2) for worst case.

when times=0 we iterate till n-1 where n = len(arr).
when times=1 we iterate till n-2 where n = len(arr).
when times=2 we iterate till n-3 where n = len(arr).
and so no.........

Based on above iteration, we calculated the time complexity.

Optimization: As per the above code, time complexity would be O(n^2) even though array is in sorted order. Because the inner loop always iterate and swap the value. If we stop the swapping then the time complexity would be O(n) for sorted array.

Output:

Worst and Average Case Time Complexity: O(n^2). worst case occurs when array is in descending order.
Best Case Time Complexity: O(n) when array is in sorted order.
Space Complexity: There is no extra array or something else so space complexity should be O(1).
Stable: Yes

How to deploy the Front-end(React) and Backend(Django) with Postgres at Heroku

Payalsasmal — Fri, 10 Dec 2021 15:24:32 +0000

Hey Everyone, I am pleased to announce that I and My friend(@thekrprince) has launched a new website called Task Tracker. (@thekrprince) developed the front-end and I developed the backend.

I deployed the Task Tracker at Heroku. In this blog I will share each steps what needs to be followed for deploying a full stack web application without any cost. Below are the steps to deploy Full stack web app using Heroku.

Front-End Setup

Move your front-end folder at root directory. Follow the below structure.

├── node_module
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── requirements.txt

2.Install axios which is simple promise based HTTP client for the browser & node.js.

npm install axios

3.Add proxy at package.json.

4.As we are going to deploy this app at Heroku, we have to add npm & node version inside engines at package.json.

5.Django protects the server from malicious websites. So protect it by adding built-in feature. Add below code at index.js.

Backend Setup

1.Back-end folder at root directory of git. Don't add your code under sub folder. Because Heroku need to understand which languages you are using.Check the below structure for your project and app.

├── node_module
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── setupTests.js
├── ToDoProject
│   ├── __init__.py
│   ├── __pycache__
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── todoapp
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── serializers.py
│   ├── tests.py
│   ├── urls.py
│   |── utils.py
│   |── views.py
├── .gitignore
├── manage.py
├── package-lock.json
├── package.json
├── README.md
├── requirements.txt

2.Add application at INSTALLED_APPS in Settings.py.

3.We need to install few dependencies. Add below dependencies in your requirements.txt

python-decouple: We can remove sensitive data like SEECERT_KEY, DB Password from settings.py and add it in .env file.
django-heroku: We have to Configure Django app for Heroku. This lib provides settings, logging and test runner configurations.
django: This will install the django.
djangorestframework: For creating the rest framework APIs we need to install it.
django-cors-headers: Django CORS(Cross Origin Resource Sharing) header allow resources to be accessed from other domains(i.e you can access your data from front-end domain).
gunicorn: Python WSGI HTTP Server.
whitenoise: This module helps to manage the static media for your application. This need to be added as a middleware in Django settings.py.
psycopg2: Psycopg is a PostgreSQL adapter for the Python programming language.
dj-database-url: This simple Django utility allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.

4.Add rest_framework, corsheaders and whitenoise.runserver_nostatic in INSTALLED_APPS in Settings.py.

5.Add corsheaders and whitenoise as a middleware in Middleware section.
Add CORS_ORIGIN_ALLOW_ALL as True after Middleware.

6.Import below requirements at Settings.py.

7.Configure your .env(This file is added at.gitignore file) file like below then configure you Database and add dj_database_url after DATABASES in Settings.py.

.env

SECRET_KEY =  xcr3tps4......
DEBUG = FALSE
DB_NAME = <DB_NAME>
USER_NAME = <USER_NAME>
PASSWORD = <PASSWORD>
HOST = localhost

8. We need to include react build template at django templates in Settings.py.

9.Add below configurations in Settings.py. STATICFILES_DIRS pointing tobuild/static path as React contains the static file to this path.

10.Add index.html or home.html at urls.py(inside ToDoProject).

Heroku Setup
1.Create an account at Heroku
2.Download Heroku CLI

3.Login to heroku account using heroku login command.

4.Create an app either using CLI or Heroku Dashboard.

CLI

heroku create <APP_NAME>

Dashboard

5.Add Heroku remote.

heroku git:remote -a tasktrackerapps

6.Add this app name into the ALLOWED_HOSTS section at Settings.py.

ALLOWED_HOSTS = ['localhost','127.0.0.1','tasktrackerapps.herokuapp.com']

7.Heroku needs to understand what types of application you are going to deploy. So, Heroku introduced buid packs. This is responsible to run dependencies of your application as well.

CLI


$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python

Dashboard

8.We have .env file configuration from backend(steps 7). We should make sure that Heroku get those value from .env. But these values are not present at my github repo.

Let's add those values using below techniques.

heroku config:set DEBUG=FALSE
heroku config:set SECRET_KEY=<SECRET_KEY>
heroku config:set DB_NAME=<DB_NAME>
heroku config:set USER_NAME=<USER_NAME>
heroku config:set PASSWORD=<PASSWORD>
heroku config:set HOST=localhost

Dashboard

9.Make sure all the config variables are added successfully else you might encounter an error while deploying the app.

heroku config

10.Now come to Postgres configuration.

CLI

heroku addons:create heroku-postgresql:hobby-dev

Confirm database is created

heroku config | grep DATABASE_URL
OR
heroku pg:info

Dashboard

Install Heroku Postgres

Click on Create One under Heroku Postgres.
Click on Install Heroku Postgres.

Choose add-on plan accordingly. I have chosen Hobby dev-free plan for tasktrackerapps app. It provides 1GB available free Postgres database.

Click on Submit Form.
Confirm database created.

11.You can push your local database to Heroku Postgres.

PGUSER=<USER_NAME> PGPASSWORD=<PASSWORD>  heroku pg:push postgres://<HOST>/<DB_NAME>  <HERUKO_POSTGRES_DB_NAME>

Example:
PGUSER=postgres PGPASSWORD=postgres heroku pg:push postgres://localhost/taskapp  postgresql-triangular-08058

12.Avoid staticfile related error at heroku by disablingcollectstatic.

heroku config:set DISABLE_COLLECTSTATIC=1

13.Create a file and name it Procfile. Add below code on it.

web: gunicorn <Project_Name_Which_Contains_Settings.py>.wsgi --log-file -

14.You must add the python version that supported by Heroku runtime at runtime.txt.

python-3.9.9

Check full folder structure

├── node_module
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── setupTests.js
├── ToDoProject
│   ├── __init__.py
│   ├── __pycache__
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── todoapp
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── serializers.py
│   ├── tests.py
│   ├── urls.py
│   |── utils.py
│   |── views.py
├── .gitignore
├── manage.py
├── package-lock.json
├── package.json
├── Procfile
├── README.md
├── requirements.txt
├── runtime.txt

15.I have chosen Github as a deployment method and connected with profile.

14.Enabled automatic deployment. Once you pushed the code, deploy the app on heroku.

Open app and check if it the app successfully deployed or not.For any application issue try with below command.

heroku logs --tail

As you see it's very simple to deploy your application at Heroku. If you face any issue feel free to comment your issue here. I would love to help you out.😄

Thank you so much for reading.✌🏻

Let's connect at Twitter and Linkedin

How can you differentiate between Array and LinkedList?

Payalsasmal — Wed, 29 Sep 2021 05:52:15 +0000

Hey Everyone, As I am posting some DSA related stuff on Twitter & LinkedIn using Python for few days it made me realize that let's write an article for everyone. Here you go.....

What is Array?

Array is a data structure that stores the same type of data in memory i.e you can't have multiple data types in an array.
Array elements store contiguously in memory location.

Syntax:

array(data_type, value_list)

Example:

Here "i" is the data type code. Check below the common data types used for the array module.

What is LinkedList?

LinkedList is the collection of nodes that stores dynamically/randomly in memory. Node has two parts data and link, data is the value store in a node and link holds the address of the next node.

Array 🆚 LinkedList

There are so many differences between Array and LinkedList. pointed few of them using examples in below

👉 As we already discussed below point in Array and LinkedList definition:-

🔸Array stores elements contiguously in the memory location.

🔸LinkedList nodes stores dynamically/randomly in memory.

See the below pic for a better understanding 👇

👉 Cost of accessing an element:-

🔸Array: In the below picture, you can see elements are stored and base addresses are assigned for each element.
These base addresses are contiguous for the array i.e 400, 401, 402..... 406,407.
So, if you know the base address of an element in an array, then you can get the base address of any element in an array.
To get the address of an element you just need to perform a simple operation that's it.

So accessing the elements of an array's cost is O(1).

🔸LinkedList: As we discussed above LinkedList is a collection of Nodes and that is a collection of two sub-parts i.e., one part contains elements and another one contains the address of the next node.
So if you want to access an element in a linked list, you have to know the first element address which is called Head here.
If you want to access the 4th node, have to traverse from the first node.
Accessing the last node, you have to traverse all the nodes.

So Average time complexity to access an element in LinkedList is O(n).

We can conclude that for accessing an element, Array is the best choice than LinkedList.

👉 Cost of Inserting the element at the beginning:-

🔸Array: If we are adding an element at the beginning, we need to shift other elements to the right to create the space in the first position.

if n numbers of elements are present in the array, the time complexity will be equal to the size of the array i.e., O(n).

🔸LinkedList: If we need to add a node at the beginning, we don't move any elements anywhere, just create a new node and add the address of the first node to the new node.

This is an easy way to add an element at the beginning. We can say this is just a constant time i.e., O(1).

We can conclude here, for inserting an element at the beginning LinkedList is the best choice than Array.

👉 Cost of Inserting the element at the end:-

🔸Array: If the array has space, we can insert an element at the end using the array index. In this case, it has constant time complexity i.e O(1).

But If the array is full then we have to copy the array to the new array. So, the time complexity is O(n).

🔸LinkedList: If we talk about LinkedList, we have to find the head then we can find the last node.

So, we are searching the whole LinkedList to find out the last node to insert an element.

So time complexity is O(n).

👉 Cost of Inserting the element at the middle:-

🔸Array: If the array has space, insert an element at the middle of the array and moving other elements to the right side of the array.

So the time complexity is O(n).

🔸LinkedList: If you want to insert an element at LinkedList, you have to traverse from head to that position.

So, the time complexity is equal to the size of LinkedList elements i.e O(n).

Based on the above discussion you can choose one or another one of your requirements.

Thank you so much for reading my article. Hope you understood the differences between Array and LinkedList. 😊

How to deploy containerized Python and Django application on Heroku

Payalsasmal — Sat, 31 Jul 2021 12:22:26 +0000

This is the first time I have launched my python and django application(as a containerized application) on Heroku. First impression with Heroku is really great 🤩, because it provides lots of services and you can use the free services as well✌️. It did not ask me any credit card details like other cloud providers.

I will be covering here that how you can make your application as a containerized application to deploy on Heroku.

If you have any application which you have created, you can take that. I will be using my Converter Site application which can help me to deploy. Now we can dive into the steps

1.I have created Dockerfile which are mandatory instructions(which are not mandatory, I mentioned that this is for my application and you can skip) for any kind of web application created using Python and Django.

#Pull the base image
FROM python:3.7-slim

# who is the maintainer/author of this file
LABEL org.opencontainers.image.authors="PAYALSASMAL, sasmalpayal@gmail.com"

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
ENV DEBUG 0

#upgrading pip for python
RUN python -m pip install --upgrade pip

#install tkinter for my application requirement, you can skip this for your application
RUN apt-get update && apt-get install -y tcl tk

#creating this dir for my application, you can skip this for your application
RUN mkdir -p /usr/share/man/man1

#installing libreoffice for my application, you can skip this for your application
RUN apt-get update && apt-get install -y \
    libreoffice-base default-jre

#copying requirements.txt file
COPY ./requirements.txt /app/requirements.txt

#install those requirements before copying the project
RUN pip install -r /app/requirements.txt

#copy the project
COPY . .

#run gunicorn. here pdfconverter is the project name
CMD gunicorn -b 0.0.0.0:$PORT pdfconverter.wsgi:application

PYTHONDONTWRITEBYTECODE: It prevents python from writing .pyc files to disc.

PYTHONUNBUFFERED: It prevents python from writing stdout and stderr stream. check this document for more info.

$PORT: This variable value will be set by Heroku at runtime.

2.Update the allow_host at settings.py. for your application.

ALLOWED_HOSTS = ['127.0.0.1']

3.Now test this application as a containerized application locally. So build the image using below command 👇🏻.

docker build -t pdfconverter:latest .

4.Now run that image using below command 👇🏻.

docker run --name pdfconverter -e "PORT=8000" -p 8007:8000 pdfconverter:latest

-e: I passed PORT as env variable. even though it will work without passing the env variable as well.

Here is an example

Make sure that your containerized application is working properly to the local at http://127.0.0.1:8007/ host.

5.As per requirements, I have added my below 👇🏻 requirements at requirements.txt file.

Django==3.2
djangoconvertvdoctopdf==1.0.1
gunicorn==20.1.0
pdf2docx==0.5.2
whitenoise==5.2.0

djangoconvertvdoctopdf: This module helps to convert from docx to pdf.
pdf2docx: This module helps to convert from pdf to docx
whitenoise: This module helps to manage the static media for your application. This need to be added as a middleware in Django settings.py
Django: This will install the django
gunicorn: This will install the gunicorn

6.We can add whitenoise middleware at settings.py.This middleware should be added after securityMiddleware.

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

7.Configure staticfiles related stuffs at settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'pdfconverter/static')
]

8.Let's create heroku application through Heroku Dashboard. Click on Create new app.

9.Provide a name of the app. As I have given pdfconverter-by-payal(as I created the app already with this name so it is showing that this name is not available). Then click on Create app button.

10.Click on Open app tab. This URL will be your application URL. It is https://pdfconverter-by-payal.herokuapp.com/ for my application.

11.We have to add the domain to settings.py without https.

ALLOWED_HOSTS = ['127.0.0.1','pdfconverter-by-payal.herokuapp.com']

12.Now we will be creating heroku.yml manifest file.

build:
  docker:
    web: Dockerfile
run:
  web: gunicorn pdfconverter.wsgi:application --bind 0.0.0.0:$PORT

As per manifest file document, heroku.yml manifest has 4 top-level sections:

setup - Specifies the add-ons and config vars to create during app provisioning
build - Specifies the Dockerfile to build
release - Specifies the release phase tasks to execute
run - Specifies process types and the commands to run for each

13.Now push your code to GitHub.

git push repo master

14.Install heroku cli in your local and then go to Heroku Dashboard under setting tab. check what is the stack here, stack should be heroku-20( which means ubuntu-20.04) by default.

15.Set the stack as container using below command 👇🏻.

16.Go to heroku dashboard. Click on Deploy tab. Click on GitHub under Deployment method. Authorized with your GitHub account and provide the repository name to connect.

17.Either you can choose automatic deployment(deploy application automatically on heroku after making changes on github) by click on Enable Automatic Deploys option or choose Manual Deploy by click on Deploy Branch. I have done Manual Deploy for my application.

18.You can see the logs if there is an issue while deploying, it will be failed.

19.I am able to see my application to https://pdfconverter-by-payal.herokuapp.com/ site and It is working as expected.

Note: You might not see the website,you might see the below error 👇🏻. so check the logs of application using heroku cli in your local.

Hope It will help someone 🤗.

Please note few things for my website:-

My website is not storing data inside the database so there is no data exposure, please feel free to use it.
This Converter Site is an open source. If you are an open source enthusiast, please feel free to contribute.

Let's connect on Twitter, LinkedIn and GitHub

Let's learn about few networking side command in Linux/Unix

Payalsasmal — Sat, 26 Jun 2021 16:33:39 +0000

Hi There!
I was working on few network side commands. I thought to share this with you all😃. Here you go ✌️

1. netstat:
netstat stands for Network Statistics. This is very basic command used to print network connections, routing tables, interface statistics etc.

Syntax:

netstat [OPTIONS]

There are various options which are supported by netstat command. Listing few of them in below

netstat -i: i stands for Interface.(Network Interface shows that how kernel links up with the software network side to the hardware network side).

Example:

netstat -r: r stands for Routing. It will show kernel IP routing tables.

Example:

2. nslookup:
nslookup stands for Name Server lookup. It helps us to check the IP address mapped to DNS(Domain Name System) and vice versa. This is very useful when we want to troubleshoot the DNS related issue.

Syntax:

nslookup [OPTIONS]

nslookup has two modes Interactive and Non-Interactive.

Interactive Mode: When we have various hosts and domains then we should use this mode.

Example:

Non-Interactive Mode: We can use this for single host or domain.

Example:

3. ping:
ping stands for Packet Internet or Inter-network Grouper. This command send a echo request to host network and when host network receive the request, it send an echo response through Internet Control Message Protocol(ICMP)

Syntax:

ping [OPTIONS]

ping -i: i stands for Interval. Interval second between sending each packet.The default waiting interval sec is 1 sec while sending packet. We can customise that using this command.

Example:

ping -w: Here w means deadline. How many packets do you want to send as request and get response. This command can help to number of packets delivery and automatically will be stopped once it is completed.

Example:

4. curl:
curl is used to transfer data to or from server using most of the protocols(HTTP,HTTPS,FTP,SMTP,TELNET etc).

Syntax:

curl [OPTIONS]

Note: we can use multiple options together. we will be seeing these in below examples

curl -o: o stands for output. We can write the output to a file.

Example:

curl -s: s stands for silent. WE can use it when we don't want to see the progress bar.

Example:

sending email: Use the below commands we can send the email. Note: If you have are using gmail and you have enabled 2 steps authentication google will not allow you to do that from non-Google app. You might get the security alert 🔒 from google.

Example:

mail.txt has below details:

5. ssh:
ssh stands for Secure Shell. It is used for logging into the remote machine and execute the commands on remote machine.

Syntax:

ssh [OPTIONS]

ssh -i: i stands for identity file. It selects a file for public key authentication.🔐

Example:
It will connect to remote ubuntu server.

server_key: This is the public key of the server
ubuntu: Server name
34.208.206.133: server ip address.

Note: For every command do man <command> and <command> --help for more info

Hope you like this articles🥰,I would love to connect on GitHub Twitter Linkedin

Kubernetes Operator

Payalsasmal — Wed, 12 May 2021 19:01:05 +0000

What is Kubernetes or k8s?

Kubernetes is an open source containerized orchestration platform. Which basically help you to deploy, manage and scale your application automatically.

What is Kubernetes operator?

Kubernetes operator is method of deploying, managing, scaling and packaging k8s application.

Now the confusion come up, both are deploying, managing, scaling the application then what is the difference between them.🤔 Let's see how both works

How Kubernetes works

Kubernetes automate the lifecycle of a stateless application like web application, Mobile application etc. So, it does not store the previous user's state to the server.
As server does not store the state, so when one application pod fail then Kubernetes can replace it with another pod automatically and Kubernetes does not have to configure extra things for stateless application.

Now question is how does Kubernetes knows I have deployed application with these number of replicas(let's say 3 replicas) and I always be having my desired number of replicas(3 replicas) up and running (feature of auto-scaling)? 😮

So Kubernetes is having controller component which is responsible to implement control-loop. Control-loop always observe the desire state and actual state of the cluster. If there is any difference then fix that immediately.

Even though Kubernetes does not have domain/application knowledge, It can deploy your application without any knowledge of your application.

How Kubernetes Operator works

Now think, you want to deploy Stateful application or complex application where you want storage, networking, cluster connection and pod should have their own volume.
You want that Kubernetes should deploy the application automatically With these requirements. But Kubernetes does not have domain/application knowledge right?

So the Kubernetes operator come into the picture. Kubernetes Operator can manage above requirements of your application using Custom Resource(CR).
If we use any type of CR we first have to register that CR to Kubernetes cluster, To register the CR we use Custom Resource Definition(CRD). This CRD handled by K8s API.

Now if I want to deploy my application and I want auto-scaling for my application as same Kubernetes did for stateless application. So Kubernetes Operator is a custom Kubernetes Controller (implement control-loop) which watch the CR and It takes action to match the desired state.

The action Kubernetes Operator takes almost everything like scale-up the complex application, upgrade the new version of application, configure application endpoints etc.

That's how Kubernetes and Kubernetes Operator work. Choose it wisely based on your application.

I hope, this blog give little bit idea about the difference between Kubernetes and Kubernetes Operator. And how they work differently.

GitHub
Twitter
Linkedin

What all we can do through Vault UI

Payalsasmal — Sun, 24 Jan 2021 17:22:02 +0000

This actually helps people who are running vault in production as a containerized application and they don't have access to exec of the pod in PROD to run vault cli commands.

We can do so many things using vault ui, listing few of them.

Vault UI CLI

I was thinking what we can do through vault CLI option which is present in UI and I learned how to use api explorer.

1.Clicked on vault UI CLI.

2.Write api in CLI and press enter. This is an api explorer. You can see warning like below after pressing enter.

3.Now you can close the CLI and you can see lots of api endpoints. There is a filter section as well, you can search the endpoints there.

4.It has 4 section- auth, secrets, identity and system. You can click on each section and use the endpoints based on your requirements.

5.Suppose I wanted to create one more root token. If your login root token is having capability to create then you can do that.
I searched with token and got so many options.

6.Now I want to create a token if I revoke this logged in token then the new token should not be revoked. So, I preferred orphan token here. Click on orphan token endpoint then clicked on Try it Out and I got the below option.

7.Clicked on Execute- send a request with your token to vault and got below response. Here client_token is the root token and others option is the lookup of this token.

NOTE- There are so many things we can do through api explorer so go ahead and explore it.

Vault Username & Password authentication

This authentication allow user to create user and password to login to the vault ui. This is more secure than root token auth
as we can also attach to the custom policy on this authentication.

Let's have a look how to do this.

1.Clicked on Access and then Enable new method.

2.Clicked on Username & Password and then Next.

3.Provide the path name and click on Hide Method Options, you can see lots of option like what kind of token will be created like default, services or batch for this authentication and many more options. Clicked on Enable Method.

4.This page will appear to update the configuration. If you want, you can update or click on userpass(path name in the left corner) if you don't want to update anything.

5.Click on Create user.

6.Provide user and password.

7.You can see there is an option called Tokens. Clicked on this and you can see attach policies, provide the type of token etc.

8.You can save and able to login through username and password.

NOTE: If you are not attaching any policy here it will attach to the default policy and default policy has all kind of capabilities, so make sure while attaching to any policy.

Let's Learn more about Linux/Unix Commands

Payalsasmal — Sun, 10 Jan 2021 17:21:53 +0000

Hi there!, Lets learn few more about Linux/Unix commands.

1.chmod:
chmod stands for change mode. It's used to change access of a file. Linux has total 27 kinds of file permissions. listing few of them.

Please don't apply this command outside of your home directory. If you will change access on System Directory with sudo command, you may have to reinstall your OS again.

Syntax:

chmod [references][operator][modes] file...

we can also say that, this syntax as who(user) as reference,what(what permission) as operator, mode as which(which permission).

[reference]: It represents that whom to give permission.

Reference	Class	Description
u	user	File’s owner
g	group	Users who are Members of the file’s group
o	others	User who are neither the file’s owner nor members of the file’s group
a	all	All three of the above, same as ugo

[operator]: It represents what permission we are making. Are we adding or removing or setting new permission?

Operator	Description
+	add the permission.
-	remove the permission.
=	set the permission and wipe out previous permissions.

[modes]: It represents which permission to be granted.

Modes	Names	Description
r	read	read permission to a file or a directory
w	write	write permission to a file or a directory
x	execute	execute permission to a file

Example:

Please see left sided values in above example ( like drwxrwxr-x or -rw-r--r-- etc), we called these symbolic value. These sections divided into 4 parts- File types, owner, group and other.

Let's make this example simple to see what permission given to which file. I am taking few examples from the above screenshot.

File types	owner permission	group permission	other permission	hard link	file/directory name
d	rwx	r-x	r-x	2	Desktop
-	rw-	r--	r--	1	get-docker.sh
d	rwx	rwx	r-x	2	payal
-	r-x	r--	r--	1	test.sh

File type: It has two types
d: for directory and
- : for regular file.

owner permission: we can see different owner permissions.
rwx: For Desktop & payal directories, the directory's owner can create files within it, can list its contents and descend into it.

rw-: For get-docker.sh file, the file owner can read from the file and write to the file but can't execute the file as "-" ( which means no permission) provided in execute position.
r-x: For test.sh file, the file owner can read from the file and execute the file.

group permission: we can see different group permission.
r-x: For Desktop directory, the member of directory's group can read and descend into it.
r--: For get-docker.sh & test.sh files, the members of the file's group can read from the file but can't write and execute as "-" provided for both places.
rwx: For payal directory, the members of the directory's group can read, write and descend into it.

other permission:
r-x: For Desktop and payal directories, the other users can read and descend into it.
r--: For get-docker.sh & test.sh files, other users can only read from the file .

File Permission can also be given through octa values:
Let's take an example from above example for Desktop directory.

 rwx  r-x  r-x
  u    g    o

Permission	Binary	Octal	User	Group	Other
r	100	4	4	4	4
w	010	2	2	0	0
x	001	1	1	1	1
total number			7	6	6

Now we can change the permission using below ways:
1.

chmod u+rwx g+rx o+rx <file>

chmod 766 <file>

So both of the commands will give same permission to the file.

2. cal:
cal stands for calendar i.e. use to see calendar in terminal.

Syntax:

cal [-jy] [[month] year]

-j: Show julian dates (days one-based, numbered from January 1)
-y: Show calendar from the current year

Example:

3. grep:
grep stands for Global Regular Expression Print. It is used to search for a particular pattern of a character and print all the contain that pattern.

Syntax:

 grep [OPTIONs]... PATTERN [FILE]..

We can use grep command in so many ways. Given few examples.

grep [options] Pattern [file]: Search the file with Options. There are so many options, I provided few as examples.

grep -c "string-to-search" [FILE] : It find the number of lines that matches the pattern.

Example:

grep -i "string-to-search" [FILE] : It search string case insensitively.

Example:

NOTE:
Do grep --help to know more about Options.

grep "string-to-search" [file] : Search the word in a single file.

Example:

grep "string-to-search" [file1] [file2] [file3] [file4]: Search the word in a multiple files.

Example:

[some-commands] | grep "string-to-search" : Put some command and search.

Example:

cat [file] | grep "string-to-search" : While concatenate the file and search particular.

Example:

4. zip:
zip command used for compressed files with .zip extension. We can zip files and directories in linux/unix. zip files use in Linux for many reasons. Even we can share the zip file with Window users instead of .tar extension as it won't be compatible.

Syntax:

zip [OPTIONS] filename.zip [list of files]

zip filename.zip [file1] [file2] : Creating zip with files:

Example:

zip filename.zip [list of files] [list of directories] : Creating zip with files and directories.

Example:

zip -e filename.zip [list of files] : Creating password protecting zip.

Example:

5. unzip:
unzip command used for unzipping the zip files.

Syntax:

unzip [OPTIONS] [filename.zip]

unzip [filename.zip] : Unzipping the above created zip file combined with files and directories.

Example:

unzip -P [password] [filename.zip] : Unzipping password protected zip file.

Example:

NOTE: Providing password in command line is not secure and it should be avoided. We can overcome this situation just providing the below command without providing the password. So, if the zip file is encrypted then unzip command will prompt with window to enter the password.

unzip [filename.zip]

Example: