Forem: Narottam04

Seamlessly Convert Web Apps to Android App: Automate with Capacitor and GitHub Actions

Narottam04 — Tue, 23 May 2023 18:53:10 +0000

What I built

I have developed a GitHub action that allows you to transform a web app, written in any javascript framework, into a production-ready Android app that is prepared for deployment on the Play Store.

It makes use of Ionic's Capacitor, which allows for the integration of native functionality into your web application and simplifies the packaging of your web app as native apps.

Category Submission:

DIY Deployments:
By automating the conversion of websites into Android apps and generating necessary files for testing, the project streamlines the deployment process for open source projects or personal projects, enabling developers to easily deploy their websites as production Android apps to play store.

App Link

Github Repository(Action): https://github.com/Narottam04/action-capacitor-android

Example Web App Converted to Android App:

Web App: https://pokecards.pages.dev/

Android App Release: https://github.com/Narottam04/PokeCards/releases/tag/2023-05-23-17_45_41%2B0000

Screenshots

Demo of web app converted to android app using github actions

The app is created using eleventy js(11ty) and converted to android app using action-capacitor-android. Download the app from github release mentioned above in app link.

Description

action-capacitor-android offers a streamlined solution for converting your web apps into production Android apps. With custom GitHub action, developers can automate the conversion process, generating signed .aab file for deployment to play store and .apk files for testing. This automation simplifies the deployment workflow for open source projects or personal projects that would like to have a native app for their web apps, empowering developers to effortlessly transform their web apps into fully functional Android apps, accelerating their deployment process and developer experience.

Link to Source Code

Github Repository(Action): https://github.com/Narottam04/action-capacitor-android

Github actions marketplace:
https://github.com/marketplace/actions/capacitor-android-action

Permissive License

MIT

Background

I wrote an article last year on how to use Ionic Capacitor to transform any web project into an Android app. The story has received a lot of attention on DEV, with 12,389 views, 320 reactions, and 57 comments thus far.

Here is the link to the article: Convert Your Website into an Android App using Capacitor

In addition, I created an app with Capacitor that has over 2,000+ downloads on the Play Store. Given the app's popularity, I decided it was time to fix some bugs and improve the application UX for the users. However, the process of updating the app has been time-consuming, forcing me to run ten different CLI commands and wait for Android Studio to launch on my slow potato laptop😭😭. This entire process takes an additional 10 to 20 minutes of my work just to get a 5MB build.

While there are third-party services that provide automated builds, they are not free. As a developer working on side projects, I found the cost unjustified. As a result, I decided to create this GitHub action to improve my present workflow and enable faster distribution of updates to my users.

How I built it

Instructions to use this github action is in repository README file

Following the hackathon announcement, I immediately dived into the documentation and developed a basic action that simply echoes a few lines. Following that, I referred to the Capacitor documentation and began creating the action.

Let's go through the code and explore each section:

name: Build Android
run-name: Creating Production Ready Android App 🚀
on:
  push:
    branches:
      - master

The name field specifies the name of the GitHub Actions workflow.
The run-name field provides a description or title for the workflow.
The on section defines the trigger for the workflow. In this case, the workflow will be triggered when there is a push event to the master branch.

jobs:
  build:
    name: Build APK
    runs-on: ubuntu-latest
    # TODO: add the default directory - COMMENT IF IT'S NOT IN SUBFOLDER
    # defaults:
    #   run:
    #     working-directory: ./frontend
    steps:

The jobs section specifies the tasks to be executed as part of the workflow. In this case, there is a single job named "Build APK."
The runs-on field specifies the operating system environment where the job will run. In this case, it is set to ubuntu-latest, indicating that the job will run on a Linux-based environment.
The steps section contains a list of individual steps or tasks that will be executed within the job.

The subsequent steps perform various actions required to build the Android app:

steps:
      - name: Checkout source
        uses: actions/checkout@v3
        # TODO: add your branch to checkout
        with:
          ref: master

      - name: Setup java
        uses: actions/setup-java@v3
        with:
          distribution: "zulu"
          java-version: "11"

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 19.x

      - name: install dependencies
        run: npm ci

      - name: Create Build Folder
        run: npm run build

      - name: Add android folder if not present
        run: if [ ! -d "./android" ]; then npx cap add android; fi

      - name: Capacitor update
        run: npx cap update

      - name: Capacitor copy
        run: npx cap copy

      # TODO: Check for folder structure in README for generating splash screen 
      - name: Generate icons and splash screen to android folder 
        run:  if [ -d "./resources" ]; then npm install @capacitor/assets --save-dev && npx capacitor-assets generate --android; fi

      - name: Build app bundle
        run: cd android && ./gradlew bundle && ./gradlew assembleDebug

      - name: Extract Android signing key from env
        run: |
          echo "${{ secrets.RELEASE_KEYSTORE }}" > android/release.jks.base64
          base64 -d android/release.jks.base64 > android/release.decrypted.jks

      - name: Sign dev build
        run: jarsigner -keystore android/release.decrypted.jks -storepass "${{ secrets.RELEASE_KEYSTORE_PASSWORD }}" -signedjar ./android/app/build/outputs/bundle/release/app-release-signed.aab ./android/app/build/outputs/bundle/release/app-release.aab release

      - name: Check folder content of android output
        run: ls ./android/app/build/outputs/bundle/release

      - name: Set Tag
        id: current-datetime
        run: echo "CURRENT_DATETIME=$(date +'%Y-%m-%d-%H_%M_%S%z')" >> "$GITHUB_OUTPUT"

      - name: Build Release
        shell: bash
        run: |
          hub release create ${{ steps.current-datetime.outputs.CURRENT_DATETIME }} \
          -m ${{ steps.current-datetime.outputs.CURRENT_DATETIME }} \
          -a ./android/app/build/outputs/bundle/release/app-release-signed.aab \
          -a ./android/app/build/outputs/apk/debug/app-debug.apk
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

Checkout source: This step checks out the source code repository using the actions/checkout GitHub Actions action.
Setup java: This step sets up the Java environment using the actions/setup-java GitHub Actions action. It installs the Zulu distribution of Java 11.
Setup Node.js: This step sets up the Node.js environment using the actions/setup-node GitHub Actions action. It installs Node.js version 19.x.
Install dependencies: This step installs the project dependencies using npm ci, which ensures a clean installation based on the package-lock.json file.
Create Build Folder: This step runs the command npm run build to create the build folder for the project.
Add android folder if not present: This step checks if the android folder exists in the project. If it doesn't, it adds the Android platform using npx cap add android.
Capacitor update: This step updates the Capacitor configuration and dependencies using npx cap update.
Capacitor copy: This step copies the web app files into the native project using npx cap copy.
Generate icons and splash screen to android folder: This step checks if the resources folder exists in the project. If it does, it installs the @capacitor/assets package as a development dependency and generates the icons and splash screen for the Android platform using npx capacitor-assets generate --android.
Build app bundle: This step navigates to the android directory and runs the Gradle tasks bundle and assembleDebug using ./gradlew. These tasks generate the app bundle and debug APK.
Extract Android signing key from env: This step takes the value of the RELEASE_KEYSTORE secret, which is assumed to be base64-encoded, and decodes it to obtain the signing key file (release.jks). The key file is saved as android/release.decrypted.jks.
Sign dev build: Sign the debug build of the app using the provided keystore and password in github actions secrets.
Check folder content of android output: List the contents of the output directory to verify the presence of the signed app bundle.
Set Tag: Set the current date and time as a tag for the release.
Build Release: Create a GitHub release with the tag name and message, including the signed app bundle and debug APK as release assets.

Additional Resources/Info

My Experience In Tackling Critical Dependency Issues In React Native

Narottam04 — Wed, 15 Mar 2023 12:48:13 +0000

In 2022, I successfully landed an internship as a frontend developer on the React Native stack. As I was already familiar with React JS for web, I thought it would be good to have some experience with the native mobile stack. I am writing this article to share my experience of a few stressful days, during which I had to fix a dependency bug from a package that was crashing the entire app.

Severity Of The Bug

Before going into the bug, let's understand the severity of the situation. My team and I were working hard on polishing the app, removing all the bugs, and improving user experiences so that we could finally roll out the app to new users and apply to VCs for funding. But as everything in this world, things never go as planned.

Upgrading Expo SDK

Our previously functioning app started crashing when Expo released SDK 47, which was a problem as Expo only supports the previous three releases. Since we were using SDK 43, I was tasked with upgrading the SDK before it impacted other team members. I came across the official Expo SDK 47 blog and thought the process would be straightforward, but I was wrong. After following all the steps, my console was filled with a daunting stack of red errors.

I tried to read through the error which I found almost gibberish to be honest lol and started my quest on debugging.

Debugging Quest

The first thing I did after skimming through the error stack was to search on Stack Overflow to see if people were getting similar errors after upgrading the SDK. Since SDK 47 was new, I could not find any relevant sources for my problem. So, I second-guessed myself and tried to repeat the steps provided by Expo SDK 47 again, but sadly it didn't work. 😢.

Since Expo SDK 47 wasn't working and Expo also supports the three previous releases, I decided to upgrade to a previous SDK version and try my luck. I cloned two new repositories where I upgraded to SDK 45 and SDK 46. Unfortunately, luck was not on my side as I encountered similar red stack errors on both SDK versions.

As more team members started experiencing issues related to the deprecated SDK, my desperation began to increase. I received text messages from the group alerting me to their similar problems. It felt like I was trying to solve an error that wasn't in the code because it was working fine yesterday. This only added to my frustration.

More Debugging….

I have discovered that one of the best ways to solve bugs is to take a break and step away from the problem when you're feeling frustrated. Doing something enjoyable like taking a walk, having an ice-cream, or indulging in something that comforts you can help you clear your mind and refresh your perspective. Personally, I prefer to take a walk during sunset as it is incredibly soothing, and the colors of the sky make everything feel ten times better. Pic of sunset taken by me…

After going for a walk, I decided to ask for help and solve the problem through pair programming. My team members attempted to upgrade, but they encountered the same error. Fortunately, we received a clue that the error was caused by a dependency called "react-native-reanimated." With this hint, I decided to investigate the issue on GitHub within the React Native package.

Previously, I had been able to resolve almost all of my errors by searching on Stack Overflow. So, this was the first time that I felt like one of those senior engineers after searching for and finding an open issue.

Finally The Solution…

Finally, after skimming through various GitHub issues and opening more than 15 Chrome tabs, I discovered an issue with the package we were using, "react-native-skeleton-content." It was using a different version of "react-native-reanimated" under its dependencies, which caused the error we were facing😭😭.

To resolve the issue, I added resolutions in the "package.json" file with the version of "react-native-reanimated" that "react-native-skeleton-content" required. This allowed us to use the correct version of the package and eliminated the error.

"resolutions": { "react-native-reanimated": "^2.9.1" },

Well, our fix did work. We were able to add some new features, resolve some bugs, and improve the user experience of the app. But just when we thought we had resolved platform-specific errors and could focus on rolling out features and debugging some edge cases in our codebase…

WE WERE NOT ABLE TO MAKE A NEW BUILD FOR USERS.…..☠☠

The team finally decided to migrate from Expo to React Native. One of the expert team members handled the migration from Expo to React Native, and the adventure thus continued.

Similar Frameworks / Stacks

My experience as a developer with React Native wasn't very pleasant. However, I would like to introduce an another framework that I worked extensively in 2022, i.e. Ionic Capacitor. Capacitor offers the stability of web development along with native plugins that can be added to provide native features. Link to a blog article that introduces ionic capacitor.

I created a side project called Cryptocademy using React JS and Capacitor, which has garnered over 500 downloads on the Play Store and currently has more than 800 signups. Over the course of a year, I never encountered any platform-specific issues and dependency issue with React JS and Ionic/Capacitor. Overall, my experience working with capacitor js was always pleasant

One of the downsides of using Capacitor/Ionic is that the documentation and community content could be better. Most of the available content for Ionic/Capacitor on the internet is written in Angular JS, which can be difficult to convert to React JS. This has been a pain point for me personally. The examples of plugins in the Capacitor documentation could be improved. I have found that many plugins are difficult to implement because of a lack of examples. Even if I manage to find a blog post on a plugin, it is often written for Angular or is several years old, which can make it challenging to apply the examples to my current project.

I have not tried flutter yet. If you are a flutter developer, I would love to know your developer experience with it in comments.

Learnings

I learned a lot during my first internship and I'm really grateful for the experience. Before this, I only worked on my own projects, so it was great to work with other people's code, debug it, and do pair programming. Having more experienced colleagues also helped me improve my skills.

I would like to know about your experience with the React Native stack. Have you encountered similar issues, and if so, how did you resolve them? Please let me know in the comments.

Stonks - Realtime Trading Simulator [Linode DEV Hackathon]

Narottam04 — Mon, 20 Feb 2023 18:19:16 +0000

What I built

I created a stock trading simulator in which users can practice trading stocks with virtual USD. Users can buy and sell any stock, compete with other users, and improve their investing skills.
It uses linode managed Postgres SQL, Node JS for backend and React Js for frontend.

Category Submission:

Smooth Shifters: I migrated my project from Supabase to Linode's PostgreSQL and Express server hosted on linode server, resulting in significant performance improvements for the app, as well as a reduction in the bundle size and complexity of the frontend code.
Integration Innovators: Linode managed Postgres SQL was used as the main backend to handle stock buying and selling.
Wacky Wildcard:: I had a great time developing this project. As a college student with limited funds, I have been hesitant to invest in stocks in the past, but this app provides me with the opportunity to learn and compete alongside others. I am eager to develop my investing skills and test them against other users on the app.

App Link

Link to web app: https://stonks-app.webdrip.in/ OFFLINE FOR NOW, COMING SOON!!!

Link to Android APK: https://drive.google.com/file/d/1Le1Hy_RFhBCnmT3wBeEs5KNihzy6SjNy/view?usp=sharing

Download the app through above link and test it on android phone.
Coming soon on playstore😍😍

Screenshots

Login Page:

Dashboard:

Search Page:

Stock Details page - Candlestick chart:

Stock Details page - Line chart:

Buy Stock:

Portfolio:

Watchlist:

Android App Demo

Description

The Stonks app is the perfect way to learn about Stocks trading without any risk. With the Stonks virtual trading simulator, you can trade and invest in stocks without spending any real money. Plus, detailed candlestick charts and USD converter will help track prices and trends. And if you want to compete with others, global leaderboard will let you see how you stack up.

Link to Source Code

https://github.com/Narottam04/Stonks

Permissive License

MIT

Background

I have always wanted to learn stock trading, but being a college student with limited funds has made it difficult to pursue. This motivated me to create an app that not only enables me to learn to trade before I invest real money but also allows me to have fun and compete with others.

This is my first project as a frontend developer where I used TypeScript with Express.js and hosted my server on a Linode Nanode. Additionally, I worked with backend packages like PM2 and Nginx, and learned how to use the Nano editor and copy files from my local machine to the remote server. This was my first experience working with backend technologies, and I would like to express my gratitude to Linode for providing me with the opportunity and motivation to learn and upskill.

How I built it

I chose this project because I want to learn TypeScript and Node.js, as well as learn how to host an API on a virtual server.

The Express server is connected to a managed PostgreSQL database on Linode, which handles user transactions such as buying and selling stocks, user net worth, watchlists, and other related activities. The Express server is then hosted on a Linode Nanode server.

Linode nanode server

Linode Manged postgres database

The frontend of the application was created using React.js, and for authentication, Firebase was used due to its better integration with the Ionic Capacitor library. The resulting frontend app was then converted to an Android app using CapacitorJS from Ionic.

Additional Resources/Info

Tutorial to host express server on linode:
https://www.youtube.com/watch?v=sD8X4CApdpo&ab_channel=TheFullStackJunkie

SignLanguage - Learn ASL Practically - (MongoDB Atlas Hackathon 2022 Submission)

Narottam04 — Thu, 08 Dec 2022 18:16:50 +0000

What I built

SignLanguage now GestureAcademy is a platform where users can practically learn American Sign Language using machine learning and access videos for over 20,000+ ASL phrases.

Category Submission: Search No More

App Link 🎉🎉🥳

https://gestureacademy.webdrip.in/

App Previews & Features

Homepage

The homepage displays the entire application preview. Users can look up terms for videos and alphabets, as well as play games.

Phrases Dictionary

Signlanguage includes around 20,000 phrases from which users can learn ASL.

Lightning Fast Fuzzy Search

Users can search for any video from 20,000+ video using the fuzzy search feature implemented using MongoDB Atlas search in the ASL phrases dictionary.

The video below shows how quickly MongoDB can search through over 20,000 video documents.

Game Of ASL

Users can play games that have been created using mediapipe and tensorflow machine learning libraries to help them learn and validate their learning.

Learn Numbers

Learn numbers from 0-10 in chronological order with the help of artificial intelligence.

Random Numbers

Show your hands on screen and AI will try to predict the numbers from 0-10 based on your hand signs.

Link to Source Code

Narottam04 / SignLanguage

SignLanguage is a platform where users can practically learn American Sign Language using machine learning and access videos for over 20,000+ ASL phrases.

SignLanguage

SignLanguage is a platform where users can practically learn American Sign Language using machine learning and access videos for over 20,000+ ASL phrases.

App Link 🎉🎉🥳

https://gestureacademy.webdrip.in/

App Previews & Features

Homepage

The homepage displays the entire application preview. Users can look up terms for videos and alphabets, as well as play games.

Phrases Dictionary

Signlanguage includes around 20,000 phrases from which users can learn ASL.

Lightning Fast Fuzzy Search

Users can search for any video from 20,000+ video using the fuzzy search feature implemented using MongoDB Atlas search in the ASL phrases dictionary.

Game Of ASL

Users can play games that have been created using mediapipe and tensorflow machine learning libraries to help them learn and validate their learning.

Learn Numbers

Learn numbers from 0-10 in chronological order with the help of artificial intelligence.

Random Numbers

Show your hands on screen and AI will try to predict the…

View on GitHub

Permissive License

MIT License

Background

Developing software applications or products that solve real world problem statements has always intrigued me. When I started learning ML and explored it's possibilities I thought of making a project that would be a part of something bigger than itself i.e. helping out community and reaching people in an easily accessible manner. This was my motivation for developing this app SignLanguage.

YouTube is a great source of knowledge, but its algorithm doesn't promote short videos or videos that entice users. SignLanguage solves this problem by collecting these resources and making them easily accessible through our webapp. This webapp has around 20,000+ curated video phrases and features like fuzzy Search which can help users to learn American Sign Language(ASL) with ease.

SignLanguage also has a number of games that users can play to practice their ASL fundamentals while having fun.

Tech Stack & Libraries Used

The app is basically built using eleventy js (11ty) for frontend, MongoDb Realm as a backend and mediapipe and tensorflow js for machine learning.

Eleventy Js
Mongo Db
Mongo Db Realm functions
Mongo Db Realm HTTPS Endpoints
Mongo Db Atlas Search
Tensorflow
Mediapipe

How I built it

Collecting 20,000+ ASL words was a difficult effort, therefore I wanted a backend that was simple and quick to set up. So, I choose Mongo Db realm as I was using Mongo Db to store my data.

Creating 20,000 Documents

The first time I saw my data, I wondered if I could even store this data into MongoDB and how difficult it would be. However, MongoDB Compass makes importing JSON data extremely easy.

Mongo Db Atlas Search

Creating a Search Index for my data collection was a breeze, and I was impressed with how fast and precise the results were.

Mongo Db Realm HTTPS ENDPOINTS

After adding data and creating search index, I wanted to create an API that could be used by the frontend. Mongo DB makes creating api easy through their HTTPS ENDPOINTS & realm function services.

I built a search Index endpoint called /searchVideo which took a realm function and returns search results from atlas search.


exports = function(request,response){
  let collection = context.services.get("mongodb-atlas").db("SignLanguage").collection("videos");
  const {searchVid} = request.query

    let pipeline = [
        {
          $search: {
            index: 'searchVideos',
            text: {
              query:searchVid,
              path: {
                'wildcard': '*'
              }
            }
          }
        }
    ];

    return collection.aggregate(pipeline)
};

I also built an simple API endpoint called videoApi and alphabetSong which returns paginated data from database.

exports = function(request,response){
  const {start} = request.query

  let data = context.services.get("mongodb-atlas").db("SignLanguage").collection("videos").find().skip(parseInt(start)).limit(12).toArray();

  return data;
};

For creating ASL game, One of the issues I experienced was creating and gathering datasets for deep learning model. I had to personally collect the dataset because the datasets obtained on Kaggle either did not predict results correctly or were of poor quality.

Machine Learning workflow model is shown below

A brief overview of creation of classifying model is;

We first predict key-points on hands using the Open CV Python package and the mediapipe hands model by google.
Following this, a custom model is created using Tensorflow that classifies the keypoint.
This model is then converted to tfjs model which can be used in browser to predict hand signs.

Thanks!

Hope you liked my project! if you have any feedback please feel free to comment down below.

Introducing Cryptocademy: A real time virtual crypto trading simulator

Narottam04 — Mon, 20 Jun 2022 12:32:28 +0000

In this article, I will share my experience building my first solo big project that I've been working on for the past few months. My goal in creating this project was to improve my web development skills and to add something meaningful to my portfolio. It would be greatly appreciated if you could try it out and let me know what you think of it. You can comment or you can email me at webdripdev@gmail.com.

Cryptocademy app doesn't involve any real money and it is for educational purpose

Introducing Cryptocademy

The Cryptocademy app is the perfect way to learn about cryptocurrency without any risk. With the cryptocademy virtual trading simulator, you can trade and invest in crypto without spending any real money. Plus, detailed candlestick charts and USD converter will help track prices and trends. And if you want to compete with others, global leaderboard will let you see how you stack up. Plus, cryptocademy has curated resources to help you learn about cryptocurrency and blockchain from scratch. And to keep you up to date, cryptocademy sends daily cryptocurrency news right to the app.

Check out this short video to learn more about cryptocademy.

Link to the app 🎉

Cryptocademy is a cross-platform application, so you can test it on your web browser or download it from play store[only 5mb]😎😎.

Website: https://cryptocademy.webdrip.in/

Android App: https://play.google.com/store/apps/details?id=com.cryptocademy.android

What problem it is trying to solve?

Let’s look at some of the problems this cross-platform app is trying to solve.

Risk of losing real money.

It is difficult to predict whether the price of tens of thousands of coins will increase or decrease at a particular time or over a period of time since many of these coins are new and unstable on the market.

If people want to experiment or learn how to trade coins by investing real money. Taking this route is risky because the chances of losing well-earned money are high.

Also, crypto is in winter right now. Here is a look at my portfolio. It's a good thing I purchased the coins virtually using cryptocademy because I would've had an emotional breakdown 😅 😂.

What is cryptocurrency?

The technology behind cryptocurrency is not well known by most people. They are unaware of the fundamentals. Investing in something you don't understand the problem it is trying to solve can be risky.

Similar Apps🤔

Numerous apps are available that attempt to solve this issue. Several of these apps provide limited coins while others lack real market prices. The majority of these apps do not have curated resources, search coins, and much more features that cryptocademy provides.

Talk is cheap! show me 📷

A overview of all the features of cryptocademy

Discover the future of digital finance.

Real-time, risk-free trading simulator that allows you to master crypto trading at zero cost. Buy from over 10k+ coins using virtual usd and start your trading journey

Analysis of coins

See detailed cryptocurrency price change candlestick charts, USD converter, social media trends and followers of over 10k+ coins

Keep track of your virtual portfolio.

You decide how to utilize mock $100000 virutal USD! Buy, sell, trade, and profit🚀🚀🚀. Learn how to become a savvy investor with cryptocademy.

Compete Globally

Do you have what it takes to be a better investor, compete globally with other users and become a better investor.

Search Coins

The majority of the apps I tried did not offer this capability. You may search for and learn about any coin on Cryptocademy. Coin prices and details are provided by coingecko api.

Daily Top Cryptocurrencies News

Get the latest news on Cryptocurrency and stay up-to-date on major crypto like Bitcoin, Ethereum etc..

Curated resources to learn fundamentals.

We curated the best resources we could find on the Internet to learn about cryptocurrencies, trading, blockchain, and web 3.0. As time progresses, there will be more articles and resources available on the app.

Tech stack

React Js - Frontend
Firebase - Authentication
Supabase - Postgres SQL database
Framer motion - Animation
Tailwind CSS - Styling
Redux Toolkit - State management
Capacitor - In order to convert the Web App to Android app and deploy it to the Play Store
Netlify - Hosting

Challenges Faced!

Redux

Many would argue that I could have utilized context API for state management instead of redux. I believe redux is one of those libraries where, even if you grasp the concept, you really need to code to understand it. But, I think using the redux toolkit was a good choice because it simplified caching results, refetching, etc. Overall, I think it was a good experience.

Authentication & Database

When I first started my project, I used Firebase authentication and hoped to use the decentralized peer-to-peer database Gun.js, but I ran into many unexpected errors. I literally wanted to give up while debugging one problem after another. I was having a hard time visualizing my data in gun.js, so I decided I needed a relational database rather than peer-to-peer. When I started working with supabase, everything started to click and I was so happy implementing one feature after another.

I really like the developer experience of supabase and would recommend other to try it out (not sponsored).

I wanted to switch my authentication from firebase to supabase, but I didn't want to write any code and logic to do so 😅

Charts

I decided to utilise apexchart; however, the example in the documentation was written in class component, and this was the first time I transformed a class component code into a functional component. I suppose I need to work more on the candlestick chart and make it more detailed, but for now, I am pleased with the results.

Contributing

PRs are always welcome.

If you want to file an issue or add a new feature to this programme, I would appreciate any collaboration and effort. You can add/contribute here :)

Thanks!

Hope you like my project! Please let me know what do you think about my project.

Convert your website into an android app using capacitor 😱.

Narottam04 — Thu, 09 Jun 2022 12:31:55 +0000

According to Atwood's Law, "Any application that can be written in JavaScript, will eventually be written in JavaScript."

In this article, we will learn how to convert a website or web application to an android app that can be deployed on the Android play store or installed on a mobile device using a library from Ionic called a capacitor. I will use react for this demo, but you can use any other framework or even plain old JavaScript.

Prerequisite

A production build folder. Most frameworks have a build command to create a build folder for you. If you are using vanilla JavaScript add all your assets and files to a folder.
Android studio

Step 1: Create a react application.

We will begin by creating a react application using the following commands. You can skip steps 1 and 2 if you already have an existing project and build folder.



npx create-react-app my-app
cd my-app

Now to run our react application we use the below command



npm start

Our demo application will look something like this.

Step 2: Create a Build folder for your application.

A build folder is crucial in converting our react application to an android application. We use the following command to create a build folder for our react application. If you are using another framework, it might have different commands, so I recommend reading the documentation for the framework you are using. If you are using plain JavaScript, create a folder that contains all your files and assets.



npm run build

Step 3: Install capacitor

To create our android application, let’s first install capacitor cli and its core library.



npm install @capacitor/core 
npm install -D @capacitor/cli 
npx cap init

The first question will be to enter the name of your application, and the second one will be to enter the package id of application com.yourAppName.android.

Now, open the capacitor.config.ts file in webDir and enter the name of your build folder if it is different.

Step 4: Create your android application

To create an android application, make sure you have installed and configured your android studio properly.

Assuming everything above has been set up, run the following command.



npm install @capacitor/android
npx cap add android

With the first command, we will download the capacitor android library into our project, and with the second command, we will generate the android code.
Now, it's time to open the android studio using the following command.



npx cap open android

Alternatively, you can open Android Studio and import the android/ directory as an Android Studio project.
It will take some time for your application to open, but it should look something like this once it is ready.

By clicking on the play button in android studio, you can now run your android application.

The emulator screen on my potato laptop was entirely black for some reason. However, if you have the same problem as me, create an apk and run it either on an android simulator like Nox player for windows or on an actual android device.

Click on Build >> Build Bundle(s) / APK(s) >> Build APK(s) to generate a installable debug apk file.

To submit the app to the play store, we need to create a signed bundle, but now for testing, we will create a debug application.
It will show a similar message in the bottom right corner if successfully built.

click on locate folder or navigate to android\app\build\outputs\apk. Now you can run your application either on your android phone or android simulator like nox player etc.

Hurray! it works 🥳🥳🥳.

Bonus Section: Create a custom splash screen for your android application

An app would not be complete without a customized splash screen and icon. If we want to create a splash screen and custom icon, we must install the capacitor plugin first.



npm install -g cordova-res

cordova-res expects a Cordova-like structure: place one icon and one splash screen file in a top-level resources folder within your project, like so:



resources/
├── android/
        └── icon-background.png
        └── icon-foreground.png
├── icon.png
└── splash.png

I am using icon and splash from the project I worked on for two months. With my new project, newbie cryptocurrency investors will be able to try investing in cryptocurrencies without any risk. If you are interested in learning more, subscribe to my newsletter to receive updates on https://blog.webdrip.in/

Next, run the following to generate icons and splash screens of different sizes for your app.



cordova-res android --skip-config --copy

The command should generate two folder icons and a splash. You will not need to configure anything because all assets generated on this folder will be copied to your Android code folder.

Now to test our splash screen follow step 4 again.

Reference

Capacitor Docs

I hope this post was informative. 💪🏾 Feel free to comment or reach out to me if you have any questions.In the next blog, we will be adding a push notification feature to our capacitor app.

For more such insights, checkout my blog website blog.webdrip.in

Hoisting in JavaScript 🔥 😍[Visually Explained]

Narottam04 — Wed, 01 Jun 2022 12:04:03 +0000

Developers often have a love-hate relationship with JavaScript because sometimes it doesn't work as expected. Learning JavaScript fundamentals and its quirks can assist developers in debugging and writing clean code. This blog post aims to explain one such peculiarity, i.e. hoisting using animated gifs 🌟✨. After reading this blog, you will be one step closer to becoming a Rockstar Developer 🎸😎.

Execution of JavaScript code.

Before understanding the concepts of hoisting let’s first learn how javascript will run code behind the scene through an example.

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

In this simple example, we initialize two variables, a and b, and store 2 and 4, respectively.

Then we add the value of a and b and store them in the sum variable.

Let's see how JavaScript will execute the code in the browser 🤖

When the JS first receives our code, it will create an execution context. Execution context will first scan through all the code, and allocate memory to all the variables and functions. For variables specifically var, JavaScript will store undefined in the memory, and for functions, it will keep the entire function code reference in memory.

Now that we have scanned and allocated memory to the code, we can execute the code. JavaScript will again start going through the whole code line by line.

As it encounters var a = 2, it assigns 2 to 'a' in memory. Until now, the value of 'a' was undefined.

Similarly, it does the same thing for the b variable. It assigns 4 to 'b'. Then it calculates and stores the value of the sum in memory which is 6. Now, in the last step, it prints the sum value in the console and then destroys the global execution context as our code is finished.

If you want to learn more about execution of code in JavaScript, I wrote an article about it on the dev community.

Link: How Javascript works explained visually

Hoisting in var

To understand hoisting in a variable defined with var, let's take the example we took in the execution of code. However, in this example, we're going to print the sum at the beginning, not at the end.

console.log(sum);

var a = 2;
var b = 4;

var sum = a + b;

The above code would throw an error in other programming languages, but not in JavaScript.

As we saw in the section on the execution of code, when JS first receives our code, it will create an execution context. Execution context will first scan through all the code, and allocate memory to all the variables and functions.

Now after scanning the code it will start the execution of the code line by line. In the first line, javascript checks the value of sum in memory and prints undefined as an output.

Now, as it encounters var a = 2, it assigns 2 to 'a' in memory. Until now, the value of 'a' was undefined.

Similarly, it does the same thing for the b variable. It assigns 4 to 'b'. Then it calculates and stores the value of the sum in memory which is 6.

If we console log after we calculate the sum let’s see the output.

Initially, it will print undefined, after computing the sum, it will print 6. This peculiarity in javaScript is called hoisting. Let’s learn hoisting in let, const keywords, and functions.

Hoisting in let and const

When we refer to a variable declared with the var keyword before its declaration, it simply returns its default value: undefined! However, as demonstrated in the previous example, this can sometimes result in "unexpected" behavior.

Therefore, ES6 introduced two new JavaScript keywords to combat this unexpected behavior: let and const. These two keywords are Block Scope. To keep this article concise we would be learning more about the scope in another blog.

Let’s see the hoisting in let and const through an example.

console.log(a);
console.log(sum);

var a = 2;
let b = 4;
const c = 6;

const sum = a + b + c;

So let’s start with the execution of code again, when JS first receives our code, it will create an execution context. Execution context will first scan through all the code, and allocate memory to all the variables and functions. I know I've mentioned this multiple times, but it's important 😅.

As opposed to var where undefined is stored in memory, let and const variables are uninitialized.

After scanning the code it will start executing the code line by line. The first line will print the value of ‘a' i.e. undefined in the console. But when we try to access a let and const keyword before initialization, a ReferenceError gets thrown whenever we try to access uninitialized variables. Uninitialized variables cannot be accessed since they are in a temporal dead zone.

Temporal dead zone simply means we don't have access to the variables before declaration.

If we try to print the value of ‘b’ instead of the sum the result would be the same.

The value of the sum must be printed once the deceleration of the value to the variable is complete.

Here is the visualization of the execution of code.

Hoisting in function

When javaScript begins scanning code and comes across a function, it stores the function's reference in memory. It is the reason why we can invoke the function before we have created it. Let’s see it in action through an example.

printSum(4,5)

function printSum(a,b){
    const c = a + b;
    console.log(c);
}

The output of the following code will be.

Let's try to visualize, first JavaScript will scan the code, it will encounter a function in the 3rd line, and it will add a reference of the function to the memory.

Javascript will now run the code line by line. It comes across a function on the first line. When a function is executed in javascript, it creates a new execution context within our global execution context. Consider the function execution context to be a mini execution context, with its memory and a location to execute the code in the function.

Read more about how functions execute code in this blog post.

Once all the code inside the function is executed, the execution context of the function is destroyed.

Reference

Namaste JavaScript

I hope this post was informative. 💪🏾 Feel free to comment or reach out to me if you have any questions.

For more such insights, checkout my blog website blog.webdrip.in

How Cryptocurrency Works Explained Visually

Narottam04 — Sat, 29 Jan 2022 13:30:52 +0000

In 2008, when Lehman Brothers Holdings Inc. filed for bankruptcy, it shook people's faith in banks so much that a new class of assets appeared without formal bank backing. The first cryptocurrency named Bitcoin was invented in 2008 by an unknown person or group of people using the name Satoshi Nakamoto. The idea was to make a decentralized open source digital currency, without a central bank or single administrator. Here, is the link to the proposed whitepaper by Satoshi Nakamoto

In this article, we will explore how cryptocurrency actually works, from transactions to data storage. Since, Bitcoin is the first and most well-known cryptocurrency, I will focus on it in this article.

Bitcoin ≠ Blockchain

It is a common misconception that people use the word blockchain and Bitcoin interchangeably, but that's not true

Bitcoin is not just a coin but a protocol based on the technology of Blockchain. Protocol is set of rules that guides the participants on the network how to communicate with one another. An example of a protocol for bitcoins is how public and private keys for authentication should be managed, how mining should be done for transactions to be confirmed, etc. Ethereum, waves, neo, and ripple are a few other examples of similar protocols like bitcoin.

This protocol, like Bitcoin and Ethereum, has a coin that is typically named after the protocol name, which enables human interaction. This coin is used to reward people who mine, to add blocks to the blockchain, and, most importantly, to buy stuff from one another.

Tokens are layer 3 and rely on smart contracts that are constructed on protocols from layer 2. Ethereum is the most popular protocol for creating smart contracts and for creating token. Bitcoin protocol does not have token because it does not support creating smart contract on their protocol.

A Secure Alternative to Traditional Banks 🤔

To truly comprehend cryptocurrencies, let us first examine how blockchain and traditional client-server architecture function.

Client Server Architecture

Basic concept of this architecture is, client(user) will make a http request to the server and if everything is correct it will send back that webpage served from the centralized database as a response.

The fact that all data is stored on a centralized server controlled by the bank and companies is a huge issue. Furthermore, because the data is housed on a centralized server, the likelihood of the server being hacked is very high, implying that your data and privacy is at risk.

Blockchain

Blockchain solves major two flaws that are present in traditional client server architecture i.e. data privacy and security of data. Blockchain is a distributed immutable ledger which is completely transparent.

Let's break down the definition in simple terms. Distributed means that the data is stored in a network of computers, eliminating the need for centralized servers. You can think of ledgers as an account book, keeping track of all the transactions taking place on the blockchain, and it is immutable, meaning that once it is added to the blockchain, it can never be changed.

Blockchain transactions are pseudonymous, so you can see other people's transactions but not alter the data contained within them. Some cryptocurrencies do allow you to encrypt a data payload or require it by defualt.

Bitcoin Mining

Now that we've covered the fundamentals of blockchain, let's look at how transactions work in the bitcoin protocol. As an example, suppose Bob wishes to send 1BTC to Alice.

Bob conducts a transaction in order to send money to Alice. The transaction initiated by Bob is initially saved in Mempool (It is an area where all unconfirmed transactions are stored). To add a transaction from mempool to the bitcoin blockchain, miners must first solve a mathematical problem that takes an average of 9 minutes to solve. The miner who solves the mathematical problem first will tell all other miner in the network that it has successfully solved the problem. Now, other miners in the network will first check if the mined block is genuinely from Bob or a hacker attempting to penetrate the chain. After double-checking everything, the transaction is successfully posted to the blockchain, and Alice receives 1BTC from Bob.

It should be noted that the miner who solves the mathematical problem first will receive a reward or transaction fee in the form of bitocin.

Mathematical Problem

Now that we have a fundamental grasp of mining, let us look at the mathematical problem that miners are solving in order to add it to the bitcoin network.

When Bob conducted a transaction with Alice, the transaction looked like the one shown below. Each transaction is identified by a Block number, a nonce, data, a previous hash, and a hash.

The block number, as the name implies, is the current block number that is to be added to the blockchain. Data contains the transaction details of Bob wallet to Alice wallet. In the blockchain, hashes are like fingerprints, and they are used to remember previous blocks. The previous hash contains the hash value of the previous block that is already mined in the blockchain.

Nonce is a variable value or number that the miner can alter to get the proper hash, all other data in the block, such as the block number, data, and previous hash, are immutable by nature and cannot be changed by anyone.

SHA 256 Algorithm

When a file is processed by this algorithm, SHA 256 creates an encrypted data file with 64 hexadecimal characters and 4 bits per character.

Hash is generated when we pass block no, data and prev hash & nonce in SHA 256 algorithm. Miners are given a target value by the bitcoin protocol,

The hash generated by miners should be less than the bitcoin protocol's target value in order to be successfully added to the blockchain. Miners change the nonce number to generate hash numbers, and the miner who generates the hash that is less than the target value first receives a reward for successfully solving the mathematical problem.

To explore the demo yourself visit to this website: https://demoblockchain.org/block

Above is a demonstration of the transaction that we were attempting; you can try it yourself on the website. Be sure to observe how the hash changes when you change the block no, nonce, or data in the block. A change like this prevents hackers from hacking blockchains, which we will discuss in the following sections.

Chain Of Blocks

Now that you have a basic understanding of how bitcoin is mined using the SHA 256 algorithm, let's look at how a successfully mined block is added in the blockchain.

The first block on the blockchain is also known as the Genesis block, and it’s Previous Hash value is 0. Our Bob and Alice transaction is the third block that has been successfully added, with the previous hash value equal to the value of the second block's hash.

Distributed P2P Networks

Let's zoom out a bit to see how this blockchain is kept on decentralized distributed Peer to Peer networks or P2P networks.

If one peer in a distributed P2P network requires data, it will contact the peer who has that data stored. The benefit of this P2P network is that it cannot be hacked by a hacker since the data is kept in many locations and if one data is tampered with, the other data will stay safe. We will look at the benefits of p2p in the following section, but first let's see how the successfully minned block of Bob and Alice is stored in p2p networks.

Let the figure below serve as an example of a P2P network with miners and users.

Consider 'A' to be the miner who, successfully solves the mathematical problem of the transaction between Bob and Alice and adds it to the local blockchain i.e. at block 3. Once uploaded to the blockchain, it will alert the other user on the network of the newly mined block and instruct them to include it in their own block. Below is an animation that will help you visualize it.

The other user will first verify that the block mined by 'A' is correct, and then the block will be successfully added to the blockchain.

When the block is successfully added, our peer-to-peer network will resemble the following image.

Resources

So, that’s all folks. This was a quick introduction of how cryptocurrency works, and I hope you learned something new from this blog today. If you want to learn in more depth about blockchain and cryptocurrency in general I recommend you following sources mentioned below.

For more such insights, checkout my blog website blog.webdrip.in

Storebay: An E-commerce Application With Custom Admin And Checkout functionality

Narottam04 — Thu, 13 Jan 2022 18:14:13 +0000

Overview of My Submission

Storebay is an E-Commerce platform. It is built on the MERN stack (MongoDB, Express, React, Node js). It has features like a custom admin panel to manage users, PayPal checkout, reviews,android and ios app and more.

Submission Category:

E-Commerce

Link to Code

Narottam04 / StoreBay

MongoDB Atlas Hackathon

Storebay: A cross-platform ecommerce application [Android, IOS, Web]

Overview of My Submission

Submission Category:

E-Commerce

Live Url 🎉🎉🥳

https://storebayapp.herokuapp.com/

Main Tech Stack

React - For Frontend Tailwind CSS - For Styling Node Js, Express - For Backend PayPal : For Payment MongoDB Atlas : For Database MongoDB Atlas Search : For autocomplete search functionality Capacitor Js: For converting existing web app to android and ios

Installation Guide

Step 1: Clone Github Repository

git clone https://github.com/Narottam04/StoreBay.git

Step 2: Install dependencies in backend and frontend on root of the folder

npm install

cd frontend
npm install

Step 3 : Add .env

NODE_ENV = development/production
PORT = 5000
MONGO_URI = ADD_YOUR_MONGO_URI
JWT_SECRET = ADD_PASSWORD

…

View on GitHub

Live Url 🎉🎉🥳

https://storebayapp.herokuapp.com/

Main Tech Stack

React - For Frontend
Tailwind CSS - For Styling
Node Js, Express - For Backend
PayPal : For Payment
MongoDB Atlas : For Database
MongoDB Atlas Search : For autocomplete search functionality
Capacitor Js: For converting existing web app to android and ios

App Preview & Features

HomePage

Login Page

Profile Page

Admin Page

Using a custom admin panel, a user can make other users admins, manage products, add new ones, update existing ones, and mark a delivery as successful.

Product overview

Reviews

Each signed in user can only add one review per products.

Cart

Checkout Process

Step1

User must add their shipping address for step 1

Step2

User must choose a payment method. Currently only paypal payment method is working

Step 3

Step 3 is order summary where you can view your product,shipping and payment details

Step 4 [IMP]

Payment using paypal

That's all folks, I hope you enjoy this project

Web 1.0, Web 2.0 & Web3 Explained

Narottam04 — Fri, 24 Dec 2021 12:40:47 +0000

We can all agree that the web has changed dramatically over the years, both as a consumer and as a developer. Thanks to advancements in the web, producing attractive websites and applications has never been easier.

The purpose of this blog post is to explore the past of the web, as well as discuss the potential future of the web, i.e. web 3.0.

Web 1.0 Beta

The concept of hypertext predates the World Wide Web by several decades. However, almost all hypertext systems relied on local files. Tim Berners-Lee wished to develop a system that could work across networks, allowing individuals to link from one file on one machine to another file on another.

So in December 1990, he coded an app with Objective-C for his next computer system and named it world wide web.

WorldWideWeb was more than just a file-browsing application. It was both a browser and an editor.

You can check the first worldwideweb browser: https://worldwideweb.cern.ch/

Web 1.0

Web 1.0 was the first stage of the World Wide Web revolution, usually referred to as read-only web. Websites were informational and contained only static content that was hyperlinked together or in simple words there was no CSS, dynamic links, interactivity like logging in the users, comments on the blog posts etc.

The websites were built using Server Side Includes or Common Gateway Interface (CGI) instead of a web application written in a dynamic programming language such as Perl, PHP, Python or Ruby.

In the era of Web 1.0 i.e. from 1991 to 2004, users on the internet were consumers of content created by content creators.

Web 2.0

Web 2.0 from 2004 till now, is the second stage of the World Wide Web revolution, usually referred to as read-write web. Emphasis was given to user-generated content, ease of use, participatory culture and interoperability.

Some of the early platform based on web 2.0 are YouTube, Facebook, Amazon and so on. Due to CMS technologies such as WordPress, blogging, creating a ecommerce shop became extremely popular.

Web 2.0 brought about a fundamental shift, where people could share their perspectives, opinions, thoughts, and experiences through a variety of online tools and platforms.

Web 2.0 Disadvantages

Before looking at disadvantages let's see how a traditional web 2.0 application works.

A client(user) will make a HTTP request to the server and if everything is correct it will send back that webpage as a response.

A major flaw here is that all data is stored on a centralized server, controlled by the companies.

Facebook, Google, and Twitter began storing users data in their servers so that they can serve us better content through machine learning. This in turn would make us stay on their websites longer, therefore providing more ad revenue for these companies.

The companies eventually started selling our information to advertisers, which meant more money for them!

Facebook's data-sharing deals exposed

To summarize web 2.0 we can say that users are the product.

Web3

The web3 concept aims to create a decentralized, but secure, internet in which people can securely exchange money and information, without the need for middlemen or big tech companies.

Unlike Web 2.0 where data is stored in a single database or on a cloud provider, Web 3 applications either runs on blockchain, peer to peer nodes (servers).

In contrast to web 2.0, where you are the product, some people predict that in web3, you will be the content owner. According to web3 specialists, the corporation will be run by a decentralised group known as a DAO (Decentralized Autonomous Organization) removing the need of CEO’s and upper management in a company. Because your digital identity is not tied to your real identity in web3, you can be anonymous on the internet while still living your usual life.

An example of web3 application is Obsidian for Whatsapp, Odyessy, LBRY for YouTube, etc.

Is the buzz surrounding Web3 worth it?

Varied people have different perspectives on this; some believe it is a hoax created by cryptocurrency traders, while others believe it is a real deal. In my opinion, blockchain and web3 are still in an early stage of development and have a long way to go.

Some valid current arguments as of writings are:

The compute and bandwidth problem to scale blockchain. Here is an link to the article about it https://www.stephendiehl.com/blog/web3-bullshit.html
Mining is not eco-friendly and consumes a lot of energy to mine and verify transactions. Here's a Cambridge University article about it.

https://www.cisl.cam.ac.uk/resources/sustainability-horizons/september-2019/environmental-footprint-of-cryptocurrency

https://www.business-standard.com/article/pti-stories/bitcoin-use-causing-co2-emissions-comparable-to-las-vegas-study-119071900858_1.html

Personal Opinion: Creating an unregulated social media platform, such as YouTube or Facebook, where users can add any data but it cannot be erased, could be a double-edged sword. On the one hand, you have freedom of speech, but on the other hand, there may be people publishing explicit content that cannot be deleted by anybody. This can be highly dangerous unless there is a means to check if the information contains explicit content by machine. I would love to hear your opinion on this issue.

References

I've been learning about blockchain for about two weeks now, and while I don't believe it is yet at the level where it can transform the entire web, I do find the idea and the conecpt of blockchian and decentralized web intriguing. This is the first post in a series on blockchain, so if you're interested in learning more about this technology, keep a watch out for my article next week, in which I'll explain blockchain using animated gifs.

For more such insights, checkout my blog website blog.webdrip.in

How JavaScript Works🔥 🤖 [Visually Explained]

Narottam04 — Thu, 09 Sep 2021 12:39:39 +0000

JavaScript is one of the most loved and hated languages in the world. It is loved because it is potent. You can make a full-stack application by just learning JavaScript and nothing else. It is also hated because it behaves in unexpected and upsetting ways, which, if you're not invested in understanding the language, might make you hate it 💔.

This blog will explain how JavaScript executes code in the browser, and we will learn it through animated gifs 😆. After reading this blog, you will be one step closer to become a Rockstar Developer 🎸😎

Execution Context

"Everything in JavaScript happens inside an Execution Context."

I want everyone to remember this statement as it is essential. You can assume this Execution context to be a big container, invoked when the browser wants to run some JavaScript code.

In this container, there are two components 1. Memory component 2. Code component

Memory component is also known as variable environment. In this memory component, variables and functions are stored as key-value pairs.

Code component is a place in the container where code is executed one line at a time. This code component also has a fancy name, namely 'Thread of Execution'. I think it sounds cool!

JavaScript is a synchronous, single-threaded language. It is because it can only execute one command at a time and in a specific order.

Execution of the code

Let's take a simple example,



var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

In this simple example, we initialize two variables, a and b and store 2 and 4, respectively.

Then we add the value of a and b and store it in the sum variable.

Let's see how JavaScript will execute the code in the browser 🤖

The browser creates a global execution context with two components, namely memory and code components.

The Browser will execute the JavaScript code in two-phase

1> Memory Creation Phase

2> Code Execution Phase

In the memory creation phase, JavaScript will scan through all the code and allocate memory to all the variables and functions in the code. For variables, JavaScript will store undefined in the memory creation phase, and for functions, it will keep the entire function code, which we will be looking at the following example.

Now, in the 2nd phase, i.e. code execution, it starts going through the whole code line by line.

As it encounters var a = 2, it assigns 2 to 'a' in memory. Until now, the value of 'a' was undefined.

How Functions Are Called In Execution Context?

Functions in JavaScript, when you compare with other programming languages, work differently.

Let's take an simple example,



var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

The above example has an function which takes an argument of type number and returns the square of the number.

JavaScript will create a global execution context and allocate memory to all the variables and functions in the first phase when we run the code, as shown below.

For functions, It will store the entire function in the memory.

Here comes the exciting part, When JavaScript runs functions, it will create an execution context inside the global execution context.

As it encounters var a = 2, it assigns 2 to 'n' in memory. Line number 2 is a function, and as the function has been allocated memory in the memory execution phase, it will directly jump to line number 6.

square2 variable will invoke the square function, and javascript will create a new execution context.

This new execution context for the square function will assign memory to all the variables present in the function in the memory creation phase.

After assigning memory to all the variables inside the function, it will execute the code line by line. It will get the value of num, which is equal to 2 for the first variable and then it will calculate ans. After ans has been calculated, it will return the value which will be assigned to square2.

Once the function returns the value, it will destroy its execution context as it has completed the work.

Now it will follow a similar procedure for line number 7 or square4 variable, as shown below.

Once all the code is executed, the global execution context will also be destroyed, and this is how JavaScript will execute the code behind the scene.

Call Stack

When a function is invoked in JavaScript, JavaScript creates an execution context. Execution context will get complicated as we nest functions inside a function.

JavaScript manages code execution context creation and deletion with the the help of Call Stack.

A stack (sometimes called a “push-down stack”) is an ordered collection of items where the addition of new items and the removal of existing items always takes place at the same end eg. stack of books.

Call Stack is a mechanism to keep track of its place in a script that calls multiple functions.

Let's take an example



function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

We are creating a function 'a', which calls another function 'insideA' that returns true. I know the code is dumb and doesn't do anything, but it will help us understand how JavaScript handles callback functions.

JavaScript will create a global execution context. Global execution context will assign memory to function 'a' and invoke' function a' in the code execution phase.

An execution context is created for function a, which is placed above the global execution context in the call stack.

Function a will assign memory and invoke function insideA. An execution context is created for function insideA and placed above the call stack of 'function a'.

Now, this insideA function will return true and will be removed from the call stack.

As there is no code inside 'function a' execution context will be removed from the call stack.

Finally, the global execution context is also removed from the call stack.

Reference

Namaste JavaScript Playlist on YouTube

I hope this post was informative. 💪🏾 Feel free to reach out to me if you have any questions.

For more such insights, checkout my blog website blog.webdrip.in

100+ Free Illustration Resources For Your Next Personal or Clients Project

Narottam04 — Sat, 31 Jul 2021 03:24:38 +0000

Hey Folks, I have written this same blog with preview of each illustration website and license on my blog website blog.webdrip.in

Link to the post: https://blog.webdrip.in/posts/2021-04-29--30-free-illustration-resources-for-your-next-project/

If you liked my blog please checkout my blog website, I hope this resources would be helpful for your future projects ❤️

If you find any free illustrations resources that you want to add and if there is any mistake in this blog post, you can comment down or email me at blog@webdrip.in

Forem: Narottam04

Seamlessly Convert Web Apps to Android App: Automate with Capacitor and GitHub Actions

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

Permissive License

Background

How I built it

Additional Resources/Info

My Experience In Tackling Critical Dependency Issues In React Native

Severity Of The Bug

Upgrading Expo SDK

Debugging Quest

More Debugging….

Finally The Solution…

Similar Frameworks / Stacks

Learnings

Stonks - Realtime Trading Simulator [Linode DEV Hackathon]

What I built

Category Submission:

App Link

Screenshots

Android App Demo

Description

Link to Source Code

Permissive License

Background

How I built it

Additional Resources/Info

SignLanguage - Learn ASL Practically - (MongoDB Atlas Hackathon 2022 Submission)

What I built

Category Submission: Search No More

App Link 🎉🎉🥳

App Previews & Features

Homepage

Phrases Dictionary

Lightning Fast Fuzzy Search

Game Of ASL

Learn Numbers

Random Numbers

Link to Source Code

Narottam04 / SignLanguage

SignLanguage is a platform where users can practically learn American Sign Language using machine learning and access videos for over 20,000+ ASL phrases.

SignLanguage

App Link 🎉🎉🥳

App Previews & Features

Homepage

Phrases Dictionary

Lightning Fast Fuzzy Search

Game Of ASL

Learn Numbers

Random Numbers

Permissive License

Background

Tech Stack & Libraries Used

How I built it

Creating 20,000 Documents

Mongo Db Atlas Search

Mongo Db Realm HTTPS ENDPOINTS

Thanks!

Introducing Cryptocademy: A real time virtual crypto trading simulator

Introducing Cryptocademy

Link to the app 🎉

What problem it is trying to solve?

Risk of losing real money.

What is cryptocurrency?

Similar Apps🤔

Talk is cheap! show me 📷

Discover the future of digital finance.

Analysis of coins

Keep track of your virtual portfolio.

Compete Globally

Search Coins

Daily Top Cryptocurrencies News

Curated resources to learn fundamentals.

*Tech stack*

Challenges Faced!

Tech stack