DEV Community: Mohammad Abdul Alim

Explaining Maximum Subarray Sum problem with Kadane's Algorithm

Mohammad Abdul Alim — Fri, 07 Oct 2022 10:30:48 +0000

There is no alternative of solving dynamic programming related problems in order to get a job in FAANG or big companies and also be a very good programmer. We developers often try to ignore problem solving and focus on only development but we need to remember that in order to solve real life big production problems or optimize something we need to be a very good problem solver. This will help us a lot in solving problems in our day to day career.

So keeping this thing in mind I started solving dynamic programming related problems and in the very beginning I came to know about The Maximum Subarray Sum problem which can be solved easily with Kadane's Algorithm. Today I would like to discuss about this algorithm and solving the problem with it.

At first let us know the description of the problem. It says that

We are given an integer array, we need to find the contiguous subarray that has the largest sum and return that sum. For example: [-2,1,-3,4,-1,2,1,-5,4] is an array. Here the subarray [4,-1,2,1] has the largest sum which is 6.

Now let us see what Kadane's Algorithm says

Initialize 2 variables as current_sum to 0 and max_sum to minimum negative value which represent the sum in the current position and maximum sum in that array.
Assign the maximum between the current array element and the sum of that element with the current_sum as the current_sum.
Assign the maximum between max_sum and the current_sum as the max_sum.
Repeat steps 2 and 3 for all the elements of the array.
Return the max_sum.

Here I would like to solve the problem in C++ but you have the liberty of choosing any language.

int findMaxSum(vector<int>& nums) {
    int max_sum = INT_MIN;
    int current_sum = 0;

    for(int n:nums) {
        current_sum = max(n, current_sum + n);
        max_sum = max(max_sum, current_sum);
    }

    return max_sum;
}

The running time complexity is O(n) as there is a single loop which runs for n times which is the total number of elements in the aaray. In the same time, the space complexity is O(1) since we do not need any external data structures.

Thus we have solved the maximum subarray sum problem using Kadane's algorithm. Now let us see how our approach resembles with a dynamic programming one. In dynamic programming approach, the main problem is divided into a group of smaller problems and each solution of those small problems are utilised again so that they are not needed to be calculated again which is called memoization. Here we have calculated the maximum between each array element and the current sum and assign that maximum as the current sum in that element index. After that we have compared the current and maximum sum in that position and assigned the maximum between them as the maximum sum. Thus in every step we have solved the problem and also used the previously calculated result to be utilized again. Thus we have used dynamic programming approach in our solution.

Understanding and implementing dynamic programming approach is really very hard but with regular practice and a bit hard work we can achieve it. I hope we start solving problems in order to be a very good developer.

Happy coding!!!

Developing a simple URL shortener with node, express, ejs and mysql

Mohammad Abdul Alim — Fri, 17 Dec 2021 00:40:33 +0000

A URL shortener is a pretty simple system that shortens longer URLs. On hitting the short URL, a user is automatically redirected to the actual URL. The main advantage of this is a user can share a short form of a very long URL. Today I would like to develop a simple URL shortener with node, express, ejs and mysql.

Features

Our web app will have the following features:

Shorten lonnger URLs
Redirect to main URL upon clicking the shorter one
Copy the shorter URL to use anywhere
Show the number of time a particular URL has been shorten

Project Setup

We will need the followings for this project:

Node runtime environment
MySQL as a database which also be obtained by using XAMPP or similar packages
express application framework
ejs to generate HTML template views
shortid to generate unique and short ids for URLs
nodemon as a watcher to obtain auto reloading the project on each save

Project Description

At first lets create a folder named url-shortener in our local machine and go to that folder. Now its time to create the package.json file and install necessary packages. Following commands will do so:

npm init -y
npm i express ejs mysql shortid
npm i --save-dev nodemon

We also need to update the script property with "dev": "nodemon index.js" which means on running npm run dev nodemon will run our entry file. So our package.json file will look like:

{
  "name": "url-shortener",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "mysql": "^2.18.1",
    "shortid": "^2.2.16"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

Now lets create the index.js file in our root directory along with two directories named public and views to store assets and ejs files respectively.

Lets describe the index.js file gradually. At first we import all the packages and start the express server.

const express = require("express");
const shortid = require("shortid");
const mysql = require("mysql");
const app = express();

app.listen(3000);

Now if we run the npm run dev command then in http://localhost:3000/ of our browser express will run but we need to specify routes. Before that we specify the view engine and static file path.

app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
app.use(express.urlencoded({ extended: false }));

Now we define our home route like this:

app.get("/", (req, res) => {
    res.render("home.ejs");
});

Here it says whenever a request is created to the root path, it will show the home template file as the response. So inside the views directory we create the home.ejs file and write the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
    <link rel="stylesheet" type="text/css" href="/styles/home.css" />
</head>
<body>
    <div class="container">
        <h2>URL Shortener</h2>
        <p>Convert long URL to shorter one with a single click. Its easy, simple and absolutely free!</p>
        <form action="/shortUrl" method="post">
            <input type="url" placeholder="Enter the URL" name="fullUrl" required />
            <input type="submit" value="Convert" />
        </form>
    </div>
</body>
</html>

Here we have added a css file named home.css which should remain in a folder named styles of the public directory. This means we have to create the styles directory inside public directory and create home.css inside it. Then we write the follwing css code:

.container {
    width: 50%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

h2 {
    margin: 0;
}

p {
    max-width: 350px;
}

input[type="url"] {
    height: 28px;
    width: 250px;
    padding-left: 8px;
    border-radius: 4px;
    border: 1px solid #000;
}

input[type="submit"] {
    padding: 10px 20px;
    color: #fff;
    background-color: #349ded;
    border: none;
    border-radius: 4px;
    margin-left: 5px;
}

input[type="submit"]:hover {
    cursor: pointer;
    opacity: 0.85;
}

.span-link {
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #349ded;
    color: #fff;
}

.result-container {
    background-color: #dddcdc;
    padding: 10px;
    min-width: 200px;
    display: flex;
    justify-content: space-around;
}

a {
    text-decoration: none;
}

.copy-span:hover {
    cursor: pointer;
    opacity: 0.75;
}

Now upon saving our code our browser should look like this:

Now if we add a URL in the input section and click Convert, it will not work because we have not defined our route /shortUrl for <form action="/shortUrl" method="post">. In order to create this route we need to create our database and table at first. I have used XAMPP to do so. After running Apache and MySQL processes of XAMPP control panel we go to http://localhost/phpmyadmin/ and create a database named url_shortener. Then we create a table named url which has the following structure:

We can see that the table has four properties namely an auto increment id, fullUrl, shortUrl and counts which stores the number of times a particular URL gets shortened. Now its time to connect our database. We add the followings in our index file:

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "url_shortener"
});

db.connect(err => {
    if(err) {
        console.log("Error connecting to DB");
        return;
    }
    console.log("Connceted to DB");
});

After this its time to create our /shorturl post route. Here our logic is pretty much simple. Our request body contains a parameter named fullUrl that is given as an input by the user. At first we query to the db with that parameter whether an entry exists. If not then we create a new entry with that fullUrl, its generated shortid and counts 1. Then we pass shortUrl and counts as object to a new view named result.ejs. If the entry exists then we simply increase its counts by 1 and pass shortUrl and counts as object to the view. Lets see our route now:

app.post("/shorturl", (req, res) => {
    const fullUrl = req.body.fullUrl;
    if (!fullUrl) {
        return res.sendStatus(404);
    }
    db.query('SELECT * FROM `url` WHERE `fullUrl` = ?', [fullUrl], (error, results) => {
        if (error) {
            console.log("we got error");
            return;
        }

        if (results.length === 0) {
            const short = shortid.generate();
            const url = { fullUrl: req.body.fullUrl, shortUrl: short, counts: 1 };
            db.query('INSERT INTO `url` SET ?', url, (err, res) => {
                if (err) {
                    console.log("Error creating table");
                    return;
                }
            });
            res.render("result.ejs", { shortUrl: short, times: 1 });
        } else {
            const _short = results[0].shortUrl;
            const _counts = results[0].counts;
            db.query('UPDATE `url` SET `counts` = ? WHERE `shortUrl` = ?', [_counts + 1, _short], (err, res) => {
                if (err) {
                    console.log("Error updating table");
                    return;
                }
            });
            res.render("result.ejs", { shortUrl: _short, times: _counts + 1 });
        }
    });
});

In the same time we create result.ejs file inside views directory and add following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
    <link rel="stylesheet" type="text/css" href="/styles/home.css" />
</head>
<body>
    <div class="container">
        <h2>URL Shortener</h2>
        <p>Your shortened URL is</p>
        <div class="result-container">
            <span><a id="short-url" href="<%= `/${shortUrl}` %>" target="_blank"><%= shortUrl %></a></span>
            <span onclick="copyUrl()" class="copy-span" id="copy-action">Copy</span>
        </div>
        <p>It has been converted <%= times %> times</p>
        <br />
        <a href="/"><span class="span-link">Try Another</span></a>
    </div>
    <script>
        const copyUrl = () => {
            const copyTextarea = document.getElementById("short-url").href;
            navigator.clipboard.writeText(copyTextarea);
            document.getElementById("copy-action").innerHTML = "Copied";
        };
    </script>
</body>
</html>

Now upon saving our files lets copy https://www.youtube.com/watch?v=dwKSRsmpYjc&ab_channel=INSIDE, paste it to our input field and click Convert. We see something like this:

Here by clicking the Copy field we can copy our short URL and clicking the short URL we can go to a new tab but unfortunately it will not redirect to the actual URL because we have not defined our corresponding route yet. So lets define it:

app.get("/:shortUrl", (req, res) => {
    db.query('SELECT * FROM `url` WHERE `shortUrl` = ?', [req.params.shortUrl], (error, results) => {
        if (error) {
            return res.sendStatus(404);
        }

        if (results.length === 0) {
            res.render("error.ejs");
        } else {
            res.redirect(results[0].fullUrl);
        }
    });
});

Here we are sending a dynamic parameter with our route path and looking for an entry with that short URL in our database. If an entry exists then we simply redirect to the fullUrl of it. Otherwise we render an error.ejs page that shows an error page and asks to visit the home page. Its code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error Page</title>
    <link rel="stylesheet" type="text/css" href="/styles/home.css" />
</head>
<body>
    <div class="container">
        <h2>URL Shortener</h2>
        <p>The URL you entered does not exist!</p>
        <br />
        <a href="/"><span class="span-link">Visit Home Page</span></a>
    </div>
</body>
</html>

Thus we have developed a simple URL Shortener website very easily. The full code can be found here. Please feel free to share your thoughts rerarding it.

Happy coding 😀😀😀

My first react native app from scratch

Mohammad Abdul Alim — Wed, 08 Dec 2021 06:47:04 +0000

React has been a very popular javascript library for developing user intefaces basically the front end of web applications. In the similar way react native is also a very popular library for building cross platform mobile applications. It means by writing javascript code we can generate both android and ios applications separately. An interesting thing is that if someone has a good knowledge over react then he has almost 80% knowledge of react native. So the react developers should give it a try. Today I would like to discuss about a react native app that can be built easily with all the knowledge of react plus some new knowledge of react native. So those who are familiar with react and also want to start learning react native are encouraged to go through this post.

Today I will build a ToDo app with react native and will run it in an android device. It will have the following features:

Add a task
Show all tasks
Mark a task as done
Delete a task

Project setup

At first we will setup the environment for react native using this doc as per our OS. After successfully setting up the environment we will initiate a react native project using the following command and go to that directory.

react-native init TodoApp
cd TodoApp

Now we will be using two third party libraries for Async Storage and vector icons using the following command

npm i @react-native-async-storage/async-storage react-native-vector-icons

Code Description

We will be editing inside the src directory. We will add four components in our project. These are the main App, Delete Modal, Add Modal and Todo Item. Each of these components are functional component with hooks and will have a stylesheet associated with them. Let us describe them one by one.

Add Modal

This component is mainly a Modal that will be popped up on clicking an add button to add a todo task. It will contain two TextInput for task title and timestamp. It will also have two TouchableOpacity for adding the task and discarding it. Inside src directory we will create a js file named TaskModal and write the following code:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import { COLORS } from './App';

const TaskModal = ({ isOpen, onClose, onSuccess }) => {
    const [title, setTitle] = useState('');
    const [date, setDate] = useState('');

    const addData = () => {
        if(title && date) {
            onSuccess(title, date);
            setDate('');
            setTitle('');
        }
    };

    const closeModal = () => {
        onClose();
        setTitle('');
        setDate('');
    };

    return (
        <Modal
            visible={isOpen}
            onRequestClose={onClose}
            transparent={true}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <TextInput
                        placeholder="Add a task"
                        style={styles.input}
                        value={title}
                        onChangeText={(value) => setTitle(value)}
                    />
                    <TextInput
                        placeholder="dd-mm-yyyy hh:mm"
                        style={styles.input}
                        value={date}
                        onChangeText={(value) => setDate(value)}
                    />
                    <View style={styles.actionHolder}>
                        <TouchableOpacity
                            onPress={addData}>
                            <Icon name="checkcircleo" size={30} color={COLORS.blue} />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={closeModal}>
                            <Icon name="closecircleo" size={30} color={COLORS.red} />
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      },
      modalView: {
        backgroundColor: "white",
        borderRadius: 20,
        padding: 16,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
      },
      input: {
        height: 40,
        width: 250,
        margin: 12,
        borderWidth: 1,
        padding: 10,
        borderRadius: 6,
      },
      actionHolder: {
          flexDirection: 'row',
          justifyContent: 'space-around',
          width: 100,
      }
});

export default TaskModal;

After completing the rest of the code and successfully building this component will look as following:

Todo Item

This component will render a todo task row. Here we will have the title of the task and a timestamp of doing it along with a check and delete button. Inside src directory we will create a js file named TaskItem and write the following code:

import React from 'react';
import Icon from 'react-native-vector-icons/AntDesign';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { COLORS } from './App';

const TaskItem = ({ task, onDelete, onCheck }) => (
    <View style={styles.parentHolder}>
        <View style={styles.mainHolder}>
            <View style={styles.itemHolder}>
                <Text style={{...styles.itemText, ...styles.largeText}}>{task.title}</Text>
                <Text style={{...styles.itemText, ...styles.smallText}}>{task.time}</Text>
            </View>
            <View style={styles.actionHolder}>
                <TouchableOpacity onPress={() => onDelete(task.id)}>
                    <Icon name="delete" size={18} color={COLORS.red} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.spaced} onPress={() => onCheck(task.id)}>
                    <Icon name={task.completed ? `checkcircle` : `checkcircleo`} size={18} color="#2b5fed" />
                </TouchableOpacity>
            </View>
        </View>
    </View>
);

const styles = StyleSheet.create({
    actionHolder: {
        flexDirection: 'row',
    },
    spaced: {
        marginStart: 16,
        marginEnd: 4,
    },
    parentHolder: {
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#fff',
    },
    mainHolder: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    itemHolder: {
        flexDirection: 'column',
    },
    itemText: {
        color: '#1f1b1b',
    },
    largeText: {
        fontSize: 16,
        fontWeight: '500', 
    },
    smallText: {
        fontSize: 14,
    },
    blueText: {
        color: '#2b5fed',
    },
    fadeBlueText: {
        color: '#c7d2f2',
    }
});

export default TaskItem;

In the add task modal if we add title Attend office meeting and timestamp 14-12-2021 9:30 AM and press the check button then a new todo task will be created which will look like this:

On clicking the check button the task will be checked and look like following:

On clicking the delete button a delete confirm modal will pop up. For this we need to create a js file named ConfirmDelete in src directory of the root folder and write following code:

import React from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import { COLORS } from './App';

const ConfirmDelete = ({ isOpen, onClose, onDelete }) => {
    return (
        <Modal
            visible={isOpen}
            onRequestClose={onClose}
            transparent={true}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.content}>Are you sure you want to delete this task from your task list?</Text>
                    <View style={styles.actionHolder}>
                        <TouchableOpacity onPress={onDelete}>
                            <Icon name="checkcircleo" size={30} color={COLORS.red} />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={onClose}>
                            <Icon name="closecircleo" size={30} color={COLORS.blue} />
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      },
      modalView: {
        backgroundColor: "white",
        borderRadius: 20,
        padding: 20,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
      },
      content: {
          width: 200,
          textAlign: 'center',
          marginBottom: 10,
          color: '#1f1b1b',
          fontSize: 16,
      },
      actionHolder: {
          flexDirection: 'row',
          justifyContent: 'space-around',
          width: 100,
      }
});

export default ConfirmDelete;

This will look like following:

On clicking the check button the task will be deleted and on clicking the cross button the delete action will be discarded.

App

Now we are left with our final and main component. In this App component we will render discussed three components along with FlatList which will contain all the tasks. The wrapping component will be a SafeAreaView. At the very beginning the app will look like:

The code of App is:

import React, { useState, useEffect } from 'react';
import Icon from 'react-native-vector-icons/AntDesign';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
  FlatList,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import TaskItem from './TaskItem';
import TaskModal from './TaskModal';
import ConfirmDelete from './ConfirmDelete';

export const COLORS = { white: '#fff', main: '#1f1b1b', blue: '#2b5fed', grey: '#f2f2f2', red: '#e3360b', fadeBlue: '#c7d2f2' };


const App = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [deleteTaskId, setDeleteTaskId] = useState(0);
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    if (tasks.length !== 0) {
      AsyncStorage.setItem('todos', JSON.stringify(tasks));
    }
  }, [tasks]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const todos = await AsyncStorage.getItem('todos');
      if (todos != null) {
        setTasks(JSON.parse(todos));
      }
    } catch (error) {
      console.log(error);
    }
  };

  const openConfirmModal = (id) => {
    setConfirmOpen(true);
    setDeleteTaskId(id);
  }

  const deleteTask = () => {
    const newTasks = tasks.filter((task) => task.id !== deleteTaskId);
    setTasks(newTasks);
    setDeleteTaskId(0);
    setConfirmOpen(false);
  };

  const checkTask = (id) => {
    const newTasks = [...tasks];
    const _tasks = newTasks.map((task) => (
      task.id === id ? {...task, completed: !task.completed} : task
    ));
    setTasks(_tasks);
  };

  const addTask = (title, date) => {
    const task = {
      id: new Date().getTime(),
      title,
      time: date,
      completed: false,
    };
    setTasks(prevTasks => ([task, ...prevTasks]));
    setModalOpen(false);
  };

  return (
    <SafeAreaView style={styles.background}>
      <TaskModal isOpen={modalOpen} onClose={() => setModalOpen(false)} onSuccess={addTask} />
      <ConfirmDelete isOpen={confirmOpen} onClose={() => setConfirmOpen(false)} onDelete={deleteTask} />
      <View style={styles.header}>
        <Text style={styles.headerText}>TODO APP</Text>
        <TouchableOpacity onPress={() => setModalOpen(true)}>
          <Icon name="pluscircle" size={30} color={COLORS.blue} />
        </TouchableOpacity>
      </View>
      <FlatList
        data={tasks} 
        renderItem={({item}) => ( <TaskItem task={item} onDelete={openConfirmModal} onCheck={checkTask} />)} 
        />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: COLORS.grey,
  },
  header: {
    padding: 16,
    backgroundColor: COLORS.white,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: COLORS.main,
  },
  bottomView: {
    position: 'absolute',
    bottom: 20,
    right: 20,
  },
  addContainer: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: COLORS.blue,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  addIcon: {
    fontSize: 32,
    color: COLORS.white,
  },
});

export default App;

On clicking the plus button in the top right corner then add task modal will be opned i.e. <TaskModal isOpen={modalOpen} onClose={() => setModalOpen(false)} onSuccess={addTask} /> this will be rendered. Here two functions are passed as props to the modal component which indicates lifting the state up. If we have a look at the addTask method which will be called when the user will add a task and press the check button in TaskModal component, it takes title and time from user input, creates a unique id and by default false for then completed field. Then the task will be prepended to the tasks state. The tasks are being rendered in a flatlist which takes two props data as array of data to display and renderItem which takes a method that tells how to display each row.

The final task is to save the todo tasks in device. We are using Async Storage for this purpose. We have used two useState hook one will be invoked when the app component is mounted then we will retrieve the data in form of string from the storage. The other will be invoked whenever the tasks state changes.

To run the project in an android device we will use the following command after connecting our android device:

react-native run-android

After adding four tasks our app should look like this:

Thus we have built a simple Todo App with react native. The project codebase can be found here. Feel free to share your thoughts.

Happy coding 😀😀😀

React with Typescript

Mohammad Abdul Alim — Tue, 19 Oct 2021 07:58:29 +0000

At present react js has been a very popular library to build beautiful and scalable user interfaces. Today I would like to build a demo react project with typescript.

Project setup

We would like to use the create-react-app environment built by facebook developer team to create our project. Our project will have a form to add favorite tv series and show the list. It will be a single page website. At first we will run the following command



npx create-react-app --template typescript fav-tv-series
cd fav-tv-series
npm run start

The first command will create a react app named fav-tv-series having typescript template. Then after going to that directory we will run the third command which will create a process running on port number 3000 and look like this

Creating Interface

In typescript our main concern will be defining strict type to every data that will be used. interface is a pretty good way to define a data and use that as a type in ts. In the src folder of the root folder we will create a directory named interfaces and inside it we will create a file named SeriesProps.tsx. Here we will create an interface named SeriesProps like following



export interface SeriesProps {
    seriesList: {
        name: string;
        imdb: number;
        cover: string;
        seasons: number;
        genre: string;
      }[]
}

Updating App

At first we will update the existing App.tsx file by removing the existing code. Our single page web application will contain two components. One is a form where a user will give necessary inputs about his favourite series and another is a list containing those serieses. The data will be stored in a state named seriesList and updated with the help of setSeriesList method.



import React, { useState } from 'react';
import { SeriesProps } from './interfaces/SeriesProps';
import './App.css';
import List from './components/List';
import Form from './components/Form';

function App() {
  const [seriesList, setSeriesList] = useState<SeriesProps["seriesList"]>([]);

  return (
    <div className="App">
      <h1>My Favourite TV Series</h1>
      <Form seriesList={seriesList} setSeriesList={setSeriesList} />
      <List seriesList={seriesList} />
    </div>
  );
}

export default App;

Creating List

In src directory of root folder we will create a directory named components and there we will create the List.tsx file. Our component will look like below



import React, { FC } from "react";
import { SeriesProps } from "../interfaces/SeriesProps";

const List:FC<SeriesProps> = ({seriesList}) => (
    <div className="series-list">
        {seriesList.map((series) => (
            <div className="series-item">
                <img src={series.cover} alt="Series-cover" />
                <p><b>{series.name}</b></p>
                <p>{series.genre}</p> 
                <p>{series.seasons} seasons</p>
                <p>★★★★★ {series.imdb}</p>
            </div>
        ))}
    </div>
);

export default List;

Here we can have a look at FC which means Functional Component and it guides us with types. Here we have passed SeriesProps as props and finally we have used map function to render tv series list.

Creating Form

Now we are left with creating the form element where we will give necessary inputs. Here we will use controlled components to build input elements. For simplicity we will create a state object where the necessary input values will be kept. We will use useState for this.



const [input, setInput] = useState({
        name: "",
        genre: "",
        cover: "",
        imdb: 0,
        seasons: 0
    });

Now we will render the components. Here we will have five input fields having three text and two number type inputs.



return (
        <div className="form-container">
            <div className="form-div">
                <label htmlFor="name">Name</label>
                <input type="text" name="name" id="name" value={input.name} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="genre">Genre</label>
                <input type="text" name="genre" id="genre" value={input.genre} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="cover">Cover Link</label>
                <input type="text" name="cover" id="cover" value={input.cover} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="imdb">IMDB Rating</label>
                <input type="number" name="imdb" id="imdb" value={input.imdb} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="seasons">Total Seasons</label>
                <input type="number" name="seasons" id="seasons" value={input.seasons} onChange={handleChange} />
            </div>
            <button type="button" onClick={handleClick}>Add Series</button>
        </div>
    );

Here we can see that the value of each input field will be stored to the state object. We can see that all input fields have a function named handleChange which will be invoked as an onChange listener and the button has an onClick listener named handleClick. We will implement these two methods now. The handleChange method is quite straight forward. Here we destructure the input state and update the particular state element needed to be updated. One important thing to notice is that the type of event we are passing to that function. Here the type is ChangeEvent<HTMLInputElement> which means our handleChange method will only accept html input element change event. One thing to notice is that we have kept the name and value of each input same for which we can use [name]: value statement.



const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { value, name } = e.target;
        setInput({
            ...input,
            [name]: value
        });
    };

Before implementing the handleClick method we need to define a props which will be used to update and store the series list. As we have already defined a state in our App.tsx using useState, we need to pass those in this Form component and use in our handleClick method. Lets have a look at the following interface.



interface Props {
    seriesList: SeriesProps["seriesList"],
    setSeriesList: Dispatch<SetStateAction<SeriesProps["seriesList"]>>
}

Now we will implement our handleClick method.



const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
        const { name, genre, cover, imdb, seasons } = input;
        if(!name && !genre && !cover && !imdb && !seasons) return;
        const series = { name, genre, cover, imdb, seasons };
        setSeriesList([...seriesList, series]);
        setInput({
            name: "",
            genre: "",
            cover: "",
            imdb: 0,
            seasons: 0
        });
    };

Our method only accepts a mouse event coming from an html button element. At first we have destructured our input state. Then we have checked whether any input field is empty. If so then we won't move further. Otherwise we have created a series object and appended it to the series list. After that we have made all fields empty. So our complete Form.tsx looks like this



import React, { FC, useState, ChangeEvent, MouseEvent, Dispatch, SetStateAction } from "react";
import { SeriesProps } from "../interfaces/SeriesProps";

interface Props {
    seriesList: SeriesProps["seriesList"],
    setSeriesList: Dispatch<SetStateAction<SeriesProps["seriesList"]>>
}

const Form: FC<Props> = ({ seriesList, setSeriesList }) => {

    const [input, setInput] = useState({
        name: "",
        genre: "",
        cover: "",
        imdb: 0,
        seasons: 0
    });

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { value, name } = e.target;
        setInput({
            ...input,
            [name]: value
        });
    };

    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
        const { name, genre, cover, imdb, seasons } = input;
        const series = { name, genre, cover, imdb, seasons };
        if(!name && !genre && !cover && !imdb && !seasons) return;
        setSeriesList([...seriesList, series]);
        setInput({
            name: "",
            genre: "",
            cover: "",
            imdb: 0,
            seasons: 0
        });
    };

    return (
        <div className="form-container">
            <div className="form-div">
                <label htmlFor="name">Name</label>
                <input type="text" name="name" id="name" value={input.name} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="genre">Genre</label>
                <input type="text" name="genre" id="genre" value={input.genre} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="cover">Cover Link</label>
                <input type="text" name="cover" id="cover" value={input.cover} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="imdb">IMDB Rating</label>
                <input type="number" name="imdb" id="imdb" value={input.imdb} onChange={handleChange} />
            </div>
            <div className="form-div">
                <label htmlFor="seasons">Total Seasons</label>
                <input type="number" name="seasons" id="seasons" value={input.seasons} onChange={handleChange} />
            </div>
            <button type="button" onClick={handleClick}>Add Series</button>
        </div>
    );
};

export default Form;

Now we are only left with adding css styles. For simplicity we have made change only in the App.css files which looks like



.form-container {
  width: 400px;
  margin: auto;
}

h1 {
  text-align: center;
}

.form-div {
  margin-bottom: 10px;
}

input[type='text'],
input[type='number'] {
  float: right;
  width: 70%;
  padding: 3px;
}

input[type='checkbox'] {
  margin-left: 110px;
}

button {
  margin: 10px 0;
  padding: 10px 0;
  width: 100%;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
}

p {
  line-height: 5px;
}

.series-list {
  display: flex;
  flex-flow: wrap;
  margin: 50px auto;
  width: 90%;
}

.series-item {
  padding: 0 20px 20px 0;
  width: 300px;
}

After we are finished with all coding, we can have a look at our browser's http://localhost:3000/ link. After adding some data it should look like following

The whole project is in github. You can very well have a look in it here.

Happy Coding 😀😀😀😀😀

Its time to learn Typescript

Mohammad Abdul Alim — Tue, 12 Oct 2021 05:57:41 +0000

Javascript has been a very popular language. From being a scripting language that used to run in a browser to having node runtime environment has taken it to another level. At present we can build scalable website with js libraries like react and also build cross platform mobile applications with react-native. In the backend we can develop highly scalable api with express and so on. That means we can do everything with javascript.

Despite of being very popular javascript has got some drawbacks. In order to overcome these Microsoft introduced an open source language named Typescript which is a superset of javascript. It has got a good number of benefits over javascript. Lets point out those in brief here.

As ts is a superset of js, we can easily start learning ts in an existing js project. We can start by simply replacing .js extions to .ts.
The main purpose of ts is Type Safety which means we must assign types to a data. This has made the life of every js developer easier by thousand times. Javascript has many weird functionalities and almost all of these can be eradicated by assigning scrict type to each data.
Typescript supports classes, inheritances and interfaces. This feature ease all object oriented programmers a lot.
We can detect type errors in compile time with the help of ts. In larger projects this saves a lot of time and work. IDEs like VS Code, atom etc have excellent support of ts.
We can use ES6 and beyond features in ts and compiler will convert it to ES5 or our required version. This means all the latest features of js are fully supported by ts.
Day by day the popularity of ts is increasing. Tech giants are using it and the number of contributors is also increasing. This yields a large community to get support from.
Another very big advantage of ts is that we can use it with almost all popular js frameworks and libraries. We can use it with react, react-native and also in node js development.

So without any hesitation and delay we should learn this beautiful language and bring our skillset to another level.

Happy Learning!!!!

An overview of TypeORM

Mohammad Abdul Alim — Mon, 04 Oct 2021 20:13:24 +0000

One of the most popular Object Relational Mapping or ORM is TypeORM. At first lets talk a bit about ORM. As the name suggests, ORM is a programming technique that relates or maps object oriented model to relational database model. In a nutshell, you can craete or query data from a relational database using object oriented way with ORM. Almost all of the object oriented programming languages support ORM and their frameworks use ORM e.g. django in python, laravel in php, nestjs in node etc. ORM helps us in many ways. It helps us by revoking the direct use of writing sql queries.

Some of the main benefits of using ORM includes:

It speeds up the development by eliminating repetitive usage of SQL code
It reduces development time a lot
It overcomes all the vendor spicific SQL differences because it knows how to convert to vendor SQL code
It can be used with both relational databases like mysql, oracle, postgresql, maria db and nosql like mongodb
It abstracts things like caching and indexing
It can catch general issues like input validations

Now lets go to our main topic TypeORM. The official documentation says:

TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript (ES5, ES6, ES7, ES8).

Features

Lets find out some basic features of typeORM:

entities and columns
database-specific column types
entity manager
repositories and custom repositories
clean object relational model
associations (relations)
eager and lazy relations
uni-directional, bi-directional and self-referenced relations
supports multiple inheritance patterns
cascades
indices
transactions
migrations and automatic migrations generation
connection pooling
replication
using multiple database connections

More features can be found in the official documentation

Installation

We can install TypeORM from npm registry very easily with the following command

npm i -g typeorm

Here i is the alias for install and -g means we are installing it globally in our machine. In order to use it in a project we need to omit -g. In addition we can install two optional modules named reflect-metadata and @types/node as follows

npm i reflect-metadata @types/node

Now according to the database you would like connect, just install its module. Suppose I would like to connect to mysql db so I will do the following

npm i mysql

Connection

In order to interact to a database we need to create connection of TypeORM with that particular database. This connection can be created in several ways. One way to achieve this is using createConnection method. Let us suppose that we would like to connect to a mysql db which can be achieved in the following way

import { createConnection } from "typeorm";

const connection = await createConnection({
    type: "mysql",
    host: "localhost",
    port: 3306,
    username: "admin",
    password: "12345",
    database: "blog-world"
});

We can connect with multiple databases using createConnections method which takes an array of object as input where we can use our different databases.

Another way of connecting to a database is to use ormconfig.json file where all those object key value prperties will be stored as json format and exported when needed. I personally prefer this way.

Entity

Entity is a class which will represent a table of our database or document in case of mongodb. This means all the properties of an entity get converted to columns of a table. Entity supports all basic types like number, string, boolean, array and even an object of other entity. Lets build a writer entity for our blog-world database.

import {Entity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity() 
export class Writer {
    @PrimaryGeneratedColumn() 
    id: number;

    @Column()  
    name: string;

    @Column() 
    phone: string;

    @Column() 
    isFeatured: boolean;
}

Here each property tagged with @Column represents a column in db table. There can be different types of columns based on its nature. A model must have a Primary Column which will represent that row. If it is auto incremented then @PrimaryGeneratedColumn needs to be used. We can also use @PrimaryGeneratedColumn("uuid") to generate unique id everytime. In that case type of id will be string instead of number. There can be other columns like @CreateDateColumn which automatically sets entity's insertion date. Based on different databases Spatial Columns can be used too. We can use enum as type of a column. Let us add a column named gender to our above entity.

export enum Gender {
    MALE = "male",
    FEMALE = "female",
    OTHER = "other" 
}

@Entity 
export class Writer {
    // other properties will remain same

    @Column({
        type: "enum",
        enum: Gender
    })
    gender: Gender;
}

Relations

In order to add reference of another entity to an entity we need to use relations. Relations can be one-to-one, one-to-many, many-to-one and many-to-many. TypeORM has support for all of these relations using @OneToOne, @OneToMany, @ManyToOne and @ManyToMany respectively. Lets see its implementation with code. At first we create an Avatar entity. Here each writer can have a single avatar and we would like to assign one avatar to a single writer which represents a one-to-one relation.

import {Entity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity()
export class Avatar {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    url: string;

    @Column()
    text: string;
}

Now in our Writer entity we need to add this Avatar property along with necessary relation decorator.

import {Entity, OneToOne, JoinColumn} from "typeorm";
import {Avatar} from "./Avatar";

@Entity 
export class Writer {
    // other properties will remain same

    @OneToOne(() => Avatar)
    @JoinColumn()  
    avatar: Avatar;
}

In order to establish one-to-many and many-to-one relations we will create a new entity named Blog. A writer can have many blogs but one blog will be written by one writer only which satisfies our requirement.

import {Entity, PrimaryGeneratedColumn, Column, ManyToOne} from "typeorm";
import {Writer} from "./Writer";

@Entity()
export class Blog {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    title: string;

    @Column()
    cover: string;

    @Column() 
    content: string;

    @ManyToOne(() => Writer, writer => writer.blogs)
    writer: Writer;
}

Now we update Writer entity as follows to establish one-to-many relation.

import {Entity, OneToMany} from "typeorm";
import {Blog} from "./Blog";

@Entity 
export class Writer {
    // other properties will remain same

    @OneToMany(() => Blog, blog => blog.writer)  
    blogs: Blog[];
}

Now we are left with many-to-many relation which can be established by adding another entity named Category. A blog can have multiple categories and a category can be assigned to multiple blogs too.

import {Entity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity()
export class Category {

    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    name: string;
}

Now we will update Writer entity as follows

import {Entity, ManyToMany, JoinTable} from "typeorm";
import {Category} from "./Category";

@Entity 
export class Writer {
    // other properties will remain same

    @ManyToMany(() => Category)  
    @JoinTable()
    categories: Category[];
}

@JoinTable() is required for @ManyToMany relations. We need to put @JoinTable on one (owning) side of relation.

CRUD Operations

In TypeORM we can perform CRUD operations using EntityManager, Repository and Query Builder. EntityManager and Repository are quite similar in syntax while performing necessary operations. The difference is that an Entity Manager handles all entities, while Repository handles a single entity which means that when using an Entity Manager we need to specify the Entity we are working with for each method call. Let us explain it with an example. Suppose we would like to fetch a Writer with a id given.

import {getManager} from "typeorm";
import {Writer} from "./entity/Writer";

// using entity manager
const entityManager = getManager();
const writer = await entityManager.findOne(Writer, 1);

// using repository
const writerRepository = getRepository(Writer); 
const writer = await writerRepository.findOne(1);

// now lets update writer's name
writer.name = "Zlatan Ibrahimovic";

await entityManager.save(writer);
await writerRepository.save(writer);

This is a simple task performed but other tasks like joining and complex operations can also be performed with the help of both entity manager and repository. Now lets talk a bit about query builder. According to the documentation:

QueryBuilder is one of the most powerful features of TypeORM - it allows you to build SQL queries using elegant and convenient syntax, execute them and get automatically transformed entities.

So we can have an idea that how powerful query builder is. Its time for some coding examples again. We perform the above query i.e. find out the first writer using query builder.

const firstWriter = await connection
    .getRepository(Writer)
    .createQueryBuilder("writer")
    .where("writer.id = :id", { id: 1 })
    .getOne();

We can also perform join queries using query builder very easily. Almost all sql queries we perform can be done in TypeORM but in many cases like very complex queries, it can be difficult.

In this post I have tried to discuss the basic topics of TypeORM briefly. Advanced topics like Migration, Indices, Transactions, Listeners, Subscribers etc have not been discussed here. The official document is very elaborative and nicely explained with lots of examples. You are highly encouraged to have a look at it.

Some interesting facts about javascript

Mohammad Abdul Alim — Wed, 28 Jul 2021 10:23:17 +0000

We all know that javascript is one of the most popular programming languages now-a-days. Javascript is a very strange language in deed. One reason is it has got syntax similar to C, C++ and Java but semantically this is not similar which makes developers confused. Another weird thing to mention is its prototype inheritance which can be achieved similarly using es6 class. Let us discuss some interesting facts about this very language.

Many programming languages use semi colon at the end of a statement. Javascript does so but you can also use semi colon at the beginning of a statement.

;var a = 2
;console.log(a)

The above code snippet will display 2 in the console without throwing any error!

In javascript you can add a number with a string. The result will be a string without any error.

var b = 5 + '9';
console.log(b);

The above code snippet will display "59" in the console!

In javascript the comparison operators act really weird in many cases. Lets see some examples:

NaN == NaN // -> false
NaN === NaN // -> false
[] == true // -> false
[] === true // -> false
[] == false // -> true
[] === false // -> false
{} == {} // -> false
{} === {} // -> false
{} >= {} // -> true
{} > {} // -> false

Things got a bit messed up, right?

Javascript has a nice feature named Immediately Invoked Function Expression where a function can be executed just after it has been defined without being called explicitly.

(function() {
  console.log('works well');
})();

function() {
  console.log('generates syntax error');
}();

Here the first function works fine as it is a IIFE but the second one generates SyntaxError.

In javascript the difference in parenthesis position can make two functions different.

function f1() {
   return
   {
      grade: 'A+'
   }
}
function f2() {
   return {
      grade: 'A+'
   }
}
typeof f1() === typeof f2(); // -> false

In javascript undefined is not a reserved word although it a has a special meaning. This is the only way to determine whether a variable is undefined but the following code snippet looks quite weird.

undefined = "I am defined now!";
var c;
console.log(c == undefined); // -> false

Avoid using inline css styles

Mohammad Abdul Alim — Tue, 20 Jul 2021 11:18:05 +0000

While developing a website we can add styles in various ways. We can write css styles in a css file and import it in html file, write in <style> tag of <head> or write inline style within each element of the <body>. I would like to share some problems with inline styling.

Lack of reusability

Using the same css class multiple times should be one of the major aim in adding style to a website. As our project gets larger if we do not use same class for same type of styles, there is a good possibility of writing redundant styles which unnecessarily makes the project larger. If we write inline style, we can never use it multiple times which breaks the DRY principle.

Inability to use css selectors

We cannot use css selectors while writing inline styles. Selectors like before, after, hover, focus etc are very much useful for styling which we simply cannot use in inline styling.

Difficulty in code readability

In a large html file there will be a lot of elements. If in addition there is inline styles then it becomes very much difficult for someone to read and understand that html code. Inline style hampers code readability a lot.

Lack of writing media queries

Web developers now-a-days must make the website responsive. In order to make the site responsive writing media queries is a must where different css rules are applied based on screen width. Inline style does never allow us do that.

Maintenance problem

Suppose you are dealing with an html file containing inline css styles. In that case you have to face difficulties in debugging and adding new codes which can be recovered by simply going to the element class in css stylesheet very easily.

No scope of caching

Browsers cache external stylesheets so that those can be loaded easily for further rendering but inline styles cannot be cached since those are with the html code segment. So everytime you visit a webpage inline styles need to be loaded with html.

All of these issues are seen while using inline styles. If the project is larger, using inline styles is not a good idea. Inline styles can load css faster which is negligible. We can use inline styles in smaller projects though.

VS Code Thunder Client: An awesome alternative to Postman

Mohammad Abdul Alim — Sun, 04 Jul 2021 20:20:50 +0000

Suppose you are working on the front end of a project. You are using a VS Code editor. You have successfully designed the user interfaces and now its time to bind data from back end api. You are given a collection of rest api endpoints. So at first you want to test these. What if you could test these in the editor without opening another app like Postman? This is absolutely possible now if your VS Code is having the latest version (1.57).

You can test the endpoints using a VS Code extension named Thunder Client which is a lightweight rest client. You can have it from its official website or from the extensions section of VS Code. Once you have added the extension to your editor and hit the New Request button, it should look like following:

As you can see initially an endpoint is given and if you send a GET request to it, you will get the initial info about Thunder Client as json response. Now lets discuss the features of this very extension:

All the major http requests like GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD can be sent.
Query parameters can be added like key value pair or if you add these in the url then those can be seen automatically in the section as pairs.
There are separate sections to add Basic Auth, Bearer Token and OAuth2.0 which is pretty cool.
A separate section for adding necessary http headers as key value pairs.
A body section where data can be sent using json, xml, text, form, form-encoded, graphql.
Another cool feature call Tests where you can add your necessary conditions for testing like you want the response code to be equal to 200 or you want the response body to contain a fixed value.
In the response section you can see the headers, cookies and test results along with the response. The response being marked up with colors looks beautiful along with status, size and time.
There are some demo codes to make request in different languages along with third party libraries.
You can creat a collection, add an activity to a collection, import collections and even import postman collections.
You can also create environment, define secrets like tokens and use those in sending requests.

All these features together make Thunder Client a great choice to test restful api endpoints. If you are a newbie or work in a project that is not very complex or don't want to run extra processes to test api then you should definitely give it a try.

Managing external libraries in AWS lambda functions

Mohammad Abdul Alim — Sat, 03 Jul 2021 18:01:17 +0000

The popularity of microservices is increasing everyday. The main reason behind this is that we do not need to take care of the server related configurations. Just write down your code and see the magic. Definitely aws lambda is one of the best microservices to perform varieties of tasks.

When we write a lambda function, it is quite obvious that we may need third party modules and those will not be present in that environment. So we need to add them to lambda. Now the question comes how we can manage them properly? The best answer would be using lambda layers. According to aws document:

A Lambda layer is a .zip file archive that can contain additional code or data. A layer can contain libraries, a custom runtime, data, or configuration files.

So the idea is that we can create a lambda layer and keep other third party libraries in a zipped file. We can create multiple layers as per our requirements and use the same layer to multiple lambda functions. Let us create lambda layers in both node & python runtime & use it in respective lambda functions.

Lambda layer using node

In order to add a node lambda layer we will have to keep the installed dependencies and files in a folder named nodejs. Here the folder name has to be nodejs so that aws lambda can identify the dependencies. Let us now build a layer which contains the node-fetch module that creates http requests with node js.

Create a folder named nodejs.
Go inside that folder.
Open the path in terminal.
Create a package.json file using npm init -y.
Then install required dependencies. Here only node-fetch will be installed using npm i node-fetch.
Inside the nodejs folder there will be one folder named node_modules and two files named package.json & package-lock.json. Compress the nodejs folder to a zipped file.

Now we are ready to create our lambda layer. Just go to the aws console Create layer section like the following screenshot. Name your layer, choose a runtime like Node.js 14.x & upload the zipped file created. Thus our lambda layer will be created.

Now we will use this layer in our lambda function. Assuming that you know how to create a lambda function ( if you don't, no worries coz its quite simple), just add the layer you created to your lambda function. In our lambda function we will make a GET request to an api & show the response in a json format. Our lambda function code is:



const fetch = require("node-fetch");

exports.handler = async (event) => {
    try {
        const response = await fetch(event.url);
        const json = response.json();
        return json;
    } catch(e) {
        return e;
    }
};

We will create a test event containing:



{
  "url": "https://reqres.in/api/users"
}

Now if we hit the Test button we should see a response like following:



{
  "page": 1,
  "per_page": 6,
  "total": 12,
  "total_pages": 2,
  "data": [
    {
      "id": 1,
      "email": "george.bluth@reqres.in",
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://reqres.in/img/faces/1-image.jpg"
    },
    {
      "id": 2,
      "email": "janet.weaver@reqres.in",
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": "https://reqres.in/img/faces/2-image.jpg"
    },
    {
      "id": 3,
      "email": "emma.wong@reqres.in",
      "first_name": "Emma",
      "last_name": "Wong",
      "avatar": "https://reqres.in/img/faces/3-image.jpg"
    },
    {
      "id": 4,
      "email": "eve.holt@reqres.in",
      "first_name": "Eve",
      "last_name": "Holt",
      "avatar": "https://reqres.in/img/faces/4-image.jpg"
    },
    {
      "id": 5,
      "email": "charles.morris@reqres.in",
      "first_name": "Charles",
      "last_name": "Morris",
      "avatar": "https://reqres.in/img/faces/5-image.jpg"
    },
    {
      "id": 6,
      "email": "tracey.ramos@reqres.in",
      "first_name": "Tracey",
      "last_name": "Ramos",
      "avatar": "https://reqres.in/img/faces/6-image.jpg"
    }
  ],
  "support": {
    "url": "https://reqres.in/#support-heading",
    "text": "To keep ReqRes free, contributions towards server costs are appreciated!"
  }
}

Lambda layer using python

Now we will create a lambda layer to perform the similar functionality in python. We will be installing necessary modules for requests to make http request and fetch data from remote api. Now we have to do as following:

Create directories like this build/python/lib/python3.8/site-packages. We must not make any spelling mistake otherwise we will encounter error while running the lambda. Another important thing is the version of python. You must use the same version of python everywhere. Here I am using 3.8 so while selecting runtime I must select Python 3.8 to avoid errors.
Now go inside the site-packages folder and install requests using pip like this where -t . means install everything inside this folder.
Now come back to the build folder & compress the python folder to a zipped file.
Now create a lambda layer like previous way & upload the zipped file. Select Python 3.8 as runtime. ```

mkdir build/python/lib/python3.8/site-packages
cd build/python/lib/python3.8/site-packages
pip install requests -t .

Now its time to write down the lambda function. After creating the lambda, code will be as following:

import json
import requests

def lambda_handler(event, context):
response = requests.get(event['url'])
data = response.json()
return data

Our test event will be same as before & after running the lambda we will get similar json response as output.

Should I start using a CSS preprocessor?

Mohammad Abdul Alim — Fri, 25 Jun 2021 14:57:32 +0000

If you want to be a good web developer then having a sound knowledge in css is a must. It is css which makes a website look so beautiful. In small projects where there will be a few html files, writing pure css codes does not bother us much. When we start working on a large project then managing every files in a structured way is a must. If we continue writing pure css in such projects then there is a good chance that we have to write same css rules or codes in multiple files. As the number of css file increases, we will be losing our control over them. In order to get rid of such problem and gaining more control over css we should definitely use a css preprocessor.

Now the question is, what is a css preprocessor? According to Mozilla Developers org:

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.

This means that css preprocessors let us write css rules in a structured way which get converted to pure css by any compiler or loader. saas, less and stylus are the most popular css preprocessors.

Now let us discuss some reasons for using css preprocessors in web developement:

Preprocessors let us use variables and functions that makes our developement easier.
We can join multiple stylesheets into one by importing all of them into a main css file.
Repititions can be avoided by writing the common rules together and using that as a mixin or function.
Introduction of Darken and Lighten functionality.
Introduction of nesting class which will give a style unique identity like having a class with similar name will not override the design if one is nested inside a particular class.
All of this features together helps us writing css with less effort and time but efficiently.

So we should really start learning and using any css preprocessor to achieve an awesome developement experience. It will really be cool.

CSS preloaders from scratch

Mohammad Abdul Alim — Mon, 21 Jun 2021 11:40:04 +0000

Most of the websites now-a-days fetch data from remote server and then display it to the user. This very fetching of data being an asynchronous task it takes some times to be displayed. In the meantime preloader or loader is shown to the user. Using css selectors and animations we can design a lot of preloaders easily. Lets have a look at some simple preloaders developed with css.

Circular Loader 1

If you have a look at the css code, the border-top property is the bluish portion on the cirular path. If animation property is not used then it will remain fixed on the top of whitish cirular path. The animation does the trick here. This is linear means its speed will be uniform & it will continue infinite times and take 1s to complete one cycle.

Circular Loader 2

This very code is similar to that of Loader 1 just have a look at the border-right-color and border-left-color properties. Instead of border-top those two properties have been added and made transparent what did the trick.

Circular Wave Loader

Here we can see that the circular loader is loading like wave. This wave effect has been created with the help of before and after selectors along with transform: scale() property. This very scale property along with the animation is creating the wave effect continuously.

Circular Dot Loader

Here there are total 8 dots. Initially without animation property three dots will be visible. Each dot has been created with the help of box-shadow property. The dotSpin keyframe is divided into 8 percentage areas representing each dot. Each percentage area's box-shadow has 8 values 3 of which are bluish colored and rest 5 are white or invisible. Thus the animation has been created.

Ellipsis Loader

We know about the text-overflow: ellipsis property that shows ... when text is overflowed. Here such ellipsis has been used as a loader. Here the ASCII code of ellipsis \2026 has been added at after selector and the width property is varying in the keyframe which does the trick for the animation.