DEV Community: Shivam Sharma

Run Android Emulator without installing Android Studio

Shivam Sharma — Thu, 21 Nov 2024 16:09:12 +0000

Usually, we install Android Studio to run our code in its Android Emulator. This emulator is usually called AVD (Android Virtual Device) Emulator, which is a very handy tool especially if you don't want to setup your personal device for the testing usecase. But, sometimes you don’t need Android Studio but still need the AVD Emulator, so it's just overkill to install heavy Android Studio to just run Android Emulator.

So we'll see how we can install and run AVD Emulator without installing Android Studio. Here’s the step to step guide to install AVD Emulator to your Mac without installing Android Studio. Same can be followed for linux based devices.

Install Java (If already not)

Java is used to build and run the emulator and related tools. Java must be installed in your system. You can download Java by following below steps:

Download appropriate Java package or installer from Official Oracle website

If you use the installer(recommended), that will set appropriate paths as well.

Get Tools package

tools package is part of Android SDK, a group of packages that are needed for Android development. tools package is used for managing other packages to create AVD's. Here's the step for getting the tools package:

Go to Official Android Studio download page.
Scroll down to "Command line tools only" section.

Download the package according to your OS by clicking on it.
Extract the package to the folder you want. I use below for my Macbook:
1. Single User: /Users/shivamsharma/Library/Android/sdk
2. Globally: /Library/Android/sdk
Move content of cmdline-tools to a folder named latest inside cmdline-tools . e.g. Final path for bin becomes: /Users/shivamsharma/Library/Android/sdk/cmdline-tools/latest/bin

Add Environment variables

We need to add environment variable to our bash/zsh profile for Android and Java Executables. By doing this we'll be able to run the command line tools or binary files from evrywhere in the machine.

To do the same

Add below content in your bash file e.g. ~/.zshrc:

######## Android #########
export ANDROID_SDK_ROOT="/Users/shivamsharma/Library/Android/sdk"
export ANDROID_HOME="/Users/shivamsharma/Library/Android/sdk" #(Deprecated, but some programs still using it to locate SDK)
export PATH="$ANDROID_HOME/cmdline-tools/latest/bin/:$PATH"
export PATH="$ANDROID_HOME/emulator/:$PATH"
export PATH="$ANDROID_HOME/platform-tools/:$PATH"

Source the bash file by running source ~/.zshrc. As we have added path of cmdline-tools/latest/bin/ in PATH so we can call CLI commands available in that folder from anywhere.

Download essential packages

Now, we will download platform-tools and emulator packages.
platform-tools has some tools to communicate with Android devices when you plug them into your computer. emulator is the Android emulator.
We will use sdkmanager or sdkmanager.bat which are placed at cmdline-tools/bin to install them.

You can check if sdkmanager is working by running sdkmanager --list. This will give the list of packages available to install with sdkmanager.

Run sdkmanager platform-tools emulator to install platform-tools and emulator. Read and accept licences.
Install android image you are interested e.g. I am using android-34 here which is SDK for Android 14 by running sdkmanager "system-images;android-34;google_apis_playstore;arm64-v8a" "platforms;android-34". Read and accept licences by typing y.

Create AVD device

We will use the avdmanager command to create an AVD device. This command is usually placed in cmdline-tools/latest/bin directory, so if you've already config the environment variable correctly, you can just call the command from everywhere.

Here’s an example of a command about how to create an AVD device:

avdmanager create avd --name '${DeviceName}' --package "system-images;android-34;google_apis_playstore;arm64-v8a" -d pixel

Replace ${DeviceName} with the device name you want.

You will be asked if you want to change some default configurations. You can change it later in config.ini the file that is located in the AVD directory, so for now we will just continue the installation.

You can create any number of emulator by changing the device name in the above command

To create emulator with different Android version you can download the respective System image using command mentioned in previous step and use the system image name downloaded to create new emulator with with that android version

Run the emulator

Run the emulator using below command:

emulator -avd ${DeviceName} -no-snapshot-load

Use control + c in the terminal to close the emulator. Or switch off the device emulator using android controls.

Steps Summary

Install Java: https://www.oracle.com/java/technologies/downloads/#jdk23-mac
Download and Unzip Android Cmd tools to a new folder https://developer.android.com/studio#command-line-tools-only
- e.g. /Users/shivamsharma/Library/Android/sdk for single user, for global user at /Library/Android/sdk
Move content of cmdline-tools to a folder named latest inside cmdline-tools . e.g. Final path becomes: /Users/shivamsharma/Library/Android/sdk/cmdline-tools/latest/bin
Add below content in ~/.zshrc

######## Android #########
export ANDROID_SDK_ROOT="/Users/shivamsharma/Library/Android/sdk"
export ANDROID_HOME="/Users/shivamsharma/Library/Android/sdk"
export PATH="$ANDROID_HOME/cmdline-tools/latest/bin/:$PATH"
export PATH="$ANDROID_HOME/emulator/:$PATH"
export PATH="$ANDROID_HOME/platform-tools/:$PATH"

Reload source file: source ~/.zshrc. As we have added path of cmdline-tools/latest/bin/ in PATH so we can call CLI commands available in that folder from anywhere.
Check if you can run sdkmanager --list
Run sdkmanager platform-tools emulator to install platform-tools and emulator. Read and accept licences.
Run sdkmanager "system-images;android-34;google_apis_playstore;arm64-v8a" "platforms;android-34" to install android image you are interested in e.g. using android-34 here which is SDK for Android 14. Read and accept licences.
Create device with command avdmanager create avd --name '${DeviceName}' --package "system-images;android-34;google_apis_playstore;arm64-v8a" -d pixel
Run emulator by emulator -avd ${DeviceName} -no-snapshot-load. -no-snapshot-load is there to load the device from fresh instead of from a snapshot.

Advanced Promise: JS Promises on next level

Shivam Sharma — Fri, 25 Mar 2022 15:15:07 +0000

Hi JS Developers,

Have you ever needed to abort a JS Promise or any fetch request before completion?
Did you want to know the current status of a Promise but felt helpless?
Have you ever felt that if there's a way to bind some data to the promise so that it can be accessed if promise variables are handled from outside?
Have you ever wanted to resolve/reject a promise from the outside instead after completion?
I bet you wanted to have a timeout feature in Promises or JS Fetch requests but couldn't find any.

So I have created a single, huge but tiny size solution for that, which is an NPM package named advanced-promise. It's a very simple extension to the JS Promise class. Very easy to use and open source. Must check once. More details are in the link.

Any Open Source contribution is welcomed.😊

Hybrid App Development: Comparison among React Native, Ionic and Flutter

Shivam Sharma — Mon, 03 Jan 2022 15:07:20 +0000

I am a web developer and performed this research in May 2021 for my organization. We currently have separate Android, iOS, and web teams. We thought to create a new platform that can be served as a separate website and can be embedded into the current website and native apps. We were not trying to build and launch a separate App. So below R&D is done keeping that thing in mind. I thought it should be shared with the community so here it is.

I have compared them from a web developer's point of view and provided medals(Gold, Silver, Bronze) which is purely based on my understanding and my scenario, it can be different for you.

So get ready for React Native vs Ionic vs Flutter 🎆

Sections:

Comparison
Medal Tally
Cheat sheet
Conclusion
Articles
How to Contribute to this

Comparison

We will be comparing all the three options React Native, Ionic and Flutter on the basis of below parameters:

Language
Learning Curve
Initial Release
Powered By
Community
Github Issues Opened
Performance
Popularity
Framework Nature
Coding Architecture
Supported Platform
Pricing
Integration
Build size
Testing
Code Reusability
UI Components
StackOverflow Questions Trend
Udemy Trends
Developer Availability
Last 2 years' Share in Hybrid Frameworks used
Poll
OTA(Over the air) Update
SEO

Language

Framework	Language	Medal
React Native	JavaScript & React	🥈
Ionic	HTML+CSS+JSS (with React/Angular/Vue)	🥇
Flutter	Dart	🥉

Ionic and React Native uses JS which matches with the tech stack used by a web developer usually. Dart is by google and it has C language-like syntax which is not similar to JS. So we might need devs who can learn Dart if we go for Flutter. Ionic can be written in Vanilla JS as well.

Learning Curve

Time required to learn (for Web Developers):

Framework	Time to Learn	Medal
React Native	Low (React Dev), Medium (other Web Dev)	🥈
Ionic	Low	🥇
Flutter	High	🥉

Flutter and Dart are new so it might take more time to learn.

Initial Release

Framework	Release Year	Medal
React Native	2015	🥇
Ionic	2013	🥇
Flutter	2017	🥈

Flutter is relatively new but gaining popularity rapidly.

Powered By

Framework	Powered By	Medal
React Native	Facebook	🥇
Ionic	Drifty Co.	🥈
Flutter	Google	🥇

All are Open Source so community support is there, but React-Native and Flutter have the upper hand here.

Community

Framework	Github Stars	Github Forks	Medal
React Native	100K	21.6K	🥈
Ionic	45.9K	13.5K	🥉
Flutter	134K	20K	🥇

React and Ionic has old and strong communities. Flutter is relatively new, however, it has made its space and attracted developers to learn Dart.

Github Issues Opened

Framework	Github Issues Opened/Total	Medal
React Native	1.9K / 20.3K	🥈
Ionic	673 / 18.8K	🥇
Flutter	9.9K / 53.3K	🥉

Flutter is new and attracted more developers recently but still, 9.9K+ is a high number of issues opened.

Performance

As far as I understood in terms of performance of these frameworks while interacting with the Native OS as an App:

Framework	Performance	Medal
React Native	Bridge Based	🥈
Ionic	Plugin Based	🥉
Flutter	Native Channels	🥇

Communication via Bridge and Plugins takes more time, though React is working on resolving Bridge Jam situations. Flutter works via direct platform channels so it's faster. Flutter team states that Flutter Web is for Web Apps not for static or minimal sites. So for small web apps, Flutter gets -ve there.

Popularity

In this section we'll be seeing some of the top products using these frameworks:

Framework	Popularity	Medal
React Native	Most Popular (Facebook, Instagram, Pinterest, Skype, Tesla, Uber, Walmart, Salesforce, Vogue)	🥇
Ionic	Popular among web developers (MarketWatch, Pacifica, Sworkit, Nationwide)	🥈
Flutter	Gaining popularity faster (Alibaba, Hamilton Musical, Greentea, Google Ads. eBay, BMW)	🥇

React Native is more popular than the other two as many tech giants are using it in their production environment. Ionic is very popular among web and mobile app developers due to its easy learning curve. Flutter has just entered the market but has grown in popularity in very little time.

Framework Nature

Framework	Framework Nature
React Native	App First
Ionic	Web First
Flutter	App First

App and Web have different UI structures, so choosing "first platform" may help to decide the framework. If you want your product to be a website first then Ionic is +ve there else -ve.

Coding Architecture

Framework	Coding Architecture	Medal
React Native	Component based, Hot Reloading, React JS UI	🥇
Ionic	One codebase, Plugin based, Web UI	🥈
Flutter	Hot Reloading, Different achitecture with Dart, Enhanced graphics & UI	🥇

All have their qualities, but due to hot reloading, development and Unit testing are faster on React-Native and Flutter.

Supported Platform

Framework	Supported Platform	Medal
React Native	Android, iOS, UWP (Windows 10) Web support by github pkg react-native-web(18.8K Stars), used by some org on production like MMT, Twitter Lite, Flipkart Lite, Uber Eats	🥈
Ionic	Web, Android, iOS Native support via plugins Capacitor, Cordova	🥈
Flutter	Android, iOS, Web, Microsoft Desktop Web support is launched in Mar'21, Microsoft support is in beta	🥇

Web support on React is by open-source package, on Flutter it's new and Native support on Ionic is via plugins. So a trade-off to choose from.

RNW example source. Flipkart Lite Source

Pricing

Framework	Pricing	Medal
React Native	Free and Open Source	🥇
Ionic	Open Source with Paid Support	🥇
Flutter	Free and Open Source	🥇

All are Open Source.

Integration

Hereby Integration I mean how easily can a hybrid sub-app be integrated into an already built mobile app (Android/iOS).

Framework	Integration	Medal
React Native	Only a single app can be integrated If multiple, then need to be merged first	🥈
Ionic	Only a single app can be integrated If multiple, then need to be merged first	🥈
Flutter	Only a single app can be integrated If multiple, then need to be merged first	🥈

So for all the options, if there are multiple Hybrid Apps available then they need to be merged first. Merge time depends on, how merge-friendly the separate apps are written. So Merging guidelines will be needed to make integration smooth.

Build size

Here I created the "Hello World!" app by using these frameworks and the below calculation is the size of the build for the android app. (Not a Mac User so can't create the iOS app)

Framework	Build size	Medal
React Native	7MB	🥈
Ionic	3.5MB	🥇
Flutter	7.5MB	🥉

For small apps, Ionic size is smaller but for bigger apps, it gets worse due to separate HTML+CSS+JS files. For bigger apps, Flutter works best. (Source)

Testing

Framework	Testing	Medal
React Native	Ranges between unit testing to automated testing Testing frameworks are available	🥇
Ionic	Ranges between component testing and end-to-end testing Ionic CLI and Browser based	🥈
Flutter	Multiple testing frameworks are available	🥇

For big applications, component or widget level testing is helpful. React-Native and Flutter have many Testing Frameworks available, while Ionic has normal web-based testing.

Code Reusability

Framework	Code Reusability	Medal
React Native	90%	🥈
Ionic	98%	🥇
Flutter	<90%	🥉

As Ionic uses HTML+CSS+JS for all platforms, It has most of the code reusable, In React-Native components can be reused, but when we add web support then only the components without native functionality can be reused. Same for Flutter.

UI Components

Framework	UI Components	Medal
React Native	The same feel as Native UI component, UI Libraries also available	🥇
Ionic	Big set of pre-built and pre-styled components.	🥇
Flutter	SKIA engine powered UI in the app and Flutter web engine for web, Extensive list of widgets. Flutter web pages are not usual web pages, they are on canvas default but using HTML renderer it can be like a normal HTML web page.	🥈

Flutter Web Pages in Canvas can lead to bad SEO and compatibility issue on very old browsers. React Native provides a Native feel and can be styled with external libraries.

StackOverflow Questions Trend

Here we can see the number of questions on StackOverflow for the tags of these Hybrid Frameworks. This indirectly shows how much developers are working on the particular framework actively.

Framework	Mar'18	Mar'19	Mar'20	Mar'21	Medal
React Native	2053	2370	2861	2808	🥇
Ionic	1084	865	751	467	🥉
Flutter	590	1857	3764	5185	🥇

React Native seems consistently popular among developers while Ionic seems losing its fame. However, Flutter is gaining a lot of attraction. (Source)

Udemy Trends

Udemy is one of the most popular learning platforms with a high number of students and teachers. Below stats tells about the active status of students and teachers on these frameworks:

Framework	Courses	Students	Medal
React Native	132+	1M+	🥈
Ionic	103+	649K+	🥉
Flutter	292+	1.9M+	🥇
Dart	64+	796K+

So Dart and Flutter are gaining popularity with enough resources available. (Source)

Developer Availability

This is the number of people available in India and globally as per Linkedin Search via my account.

Framework	In India	Worldwide	Medal
React Native	42K+	235K+	🥇
Ionic	26K+	172K+	🥉
Flutter	44K+	175K+	🥈

Last 2 years' Share in Hybrid Frameworks used

Framework	in 2019	in 2020	Medal
React Native	42%	42%	🥇
Ionic	28%	18%	🥉
Flutter	30%	39%	🥈

Flutter's share is increasing sharply while for Ionic it's decreasing in the same trend. (Source: Statista)

Poll

I conducted a poll on LinkedIn for the same, but with a short description of my need, it didn't get that many responses but this sample response seems to verify my above research:

Framework	Vaotes Received	Medal
React Native	50.53%	🥇
Ionic	7.37%	🥉
Flutter	42.11%	🥈

Total Votes: 95

Public Voting:

Technical group Voting:

OTA(Over the air) Update

Framework	OTA Compatibility	Medal
React Native	Via CodePush (Source)	🥇
Ionic	Via CodePush (Source)	🥇
Flutter	Very Limited OTA support, App release is required (Source)	🥉

SEO

I know, I'm not that good at this point but still mentionable.

Framework	SEO	Medal
React Native	Same like React App (Doable)	🥈
Ionic	Doable	🥈
Flutter	Doable with Router	🥈

SEO can be achieved like other SPA frameworks but not as simple as a PHP website.

Medal Tally

Framework	🥇	🥈	🥉	Total Score (3G+2S+1B)
React Native	12	11	0	58
Ionic	9	7	7	48
Flutter	10	7	6	52

Cheat sheet

You can find the cheat sheet of this article here. This has just the medals awarded for each attribute and the final medal tally and score.

Conclusion

As a developer, for my use case, I found React Native better so I went for that and created a sample React Native App: Harry Potter Dictionary with web support. Now my organization is working on replacing some modules in android with React Native sub-apps.

Articles

For this research, I've read some articles, which can be found here. You can also have a look at them.

How to Contribute to this

You can simply create your valuable pull request to this Github repo with an optional issue having the detail of the changes, I'll merge them and modify this article as well.

You can start a discussion as well to discuss with other community members.

How to install Android SDK and build Android App without Android Studio

Shivam Sharma — Sun, 13 Jun 2021 14:24:54 +0000

This article is about installing Android SDK in Windows system and run React Native App without Android Studio. Android SDK is required to build, run and debug Android Apps on your machine. So I needed it too to build and run React Native app for android in my windows system.

But Android SDK comes with Android Studio!!! Yes, you are right but not every system can handle Android Studio :) My system is also behind the minimum system requirements so I had to go for Android SDK separately.

Step 1: Install Chocolatey

In the official React Native Documentation, Chocolatey is recommended for downloading Node and Java. If you already have that downloaded and configured then you can skip this step.

You can either follow the complete Chocolatey Installation Doc or just run below command in your Windows Powershell Window.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

You will get Chocolatey installed and Environment Variables set.

Step 2: Install Java

As per the official React Native Documentation, You can use Chocolatey to install Java. If you already have that, skip this step. Just run below command in command prompt to install Node and Java. You can skip the package you have already installed.

choco install -y nodejs.install openjdk8

Now you must have JAVA_HOME set in your environment variables, if not then you can set. To go to environment variable you can follow below steps:

1: Go To Properties:

2: Go to Advance System Settings

3: Go to Environment Variables

4: List of Environment Variables can be accessed here

Step 3: Install SDK Manager

Now firstly we need to install Android SDK Manager to install Android SDK and other tools. For that visit the official site.

1. Download sdkmanager compressed file.

2. Now you need to create a folder, where you want to keep your all SDK packages. I created C:\Android for my case. Unzip the downloaded folder in this directory. Now I'm having the folder structure as C:\Android\cmdline-tools\<unzipped files>.

3. IMPORTANT: Now, we need to move all the unzipped files in a single folder. the name of the folder will be determined by the source.properties file's content, which is one of these unzipped files. Open this file and It'll be looked like this:

Pkg.Revision=4.0
Pkg.Path=cmdline-tools;4.0
Pkg.Desc=Android SDK Command-line Tools

Notice the first line, the value 4.0 is going to be our folder name.

So create a folder named as 4.0 inside C:\Android\cmdline-tools\ and move all other files into this folder. So now full directory structure will be C:\Android\cmdline-tools\4.0\<bin | lib>.

4. Now we'll set 2 Environment variables: ANDROID_HOME and Path for cmdline-tools.

Set ANDROID_HOME to the path of the directory you made in above point 2, in my case it's C:\Android.
Add C:\Android\cmdline-tools\4.0\bin and C:\Android\cmdline-tools\4.0 in Path Variable.

Step 4: Install Android SDK packages

We'll now install the required packages via sdkmanager. For that, open Command Prompt.

1. Install Platform Tools (ADB & Fastboot)

Firstly we need to install adb, for that we can install platform-tools pkg via sdkmanager. Run below command or get it from here.

sdkmanager "platform-tools"

Now add path of platform-tools in Environment Variable Path which is C:\Android\platform-tools in my case.

2. Install Platform

Use the below command to install the Android 10 (API level 30) using the SDK manager. You can download any API level by changing the name.

sdkmanager "platforms;android-30"

Aceept T&C and it'll be installed.

3. Add System Image

I am adding the most recent default 64-bit system image by running below command. Accept T&C and it'll be installed.

sdkmanager "system-images;android-30;google_apis;x86_64"

There are some projects which need Google Play Services. We need system image specific to Google Play Services. We can add that via command as shown below.

sdkmanager "system-images;android-30;google_apis_playstore;x86_64"

4. Install Build Tools

I am adding the most recent build-tools 30.0.3 via below command.

sdkmanager "build-tools;30.0.3"

5. Install Emulator (Optional)

If you want to run your apps inside emulator instead of physical device then you can install emulator and system images to run that. But obviously, it requires good system specs. We'll cover this in very short, please comment if you want detailed article on that.

1. Install Emulator

sdkmanager --channel=3 emulator

2. Create emulator

// Create the emulator with name em30 using default system image
avdmanager create avd -n em30 -k "system-images;android-30;google_apis;x86_64" -g "google_apis"

// Create emulator with name em30ps using Google Play Services system image
avdmanager create avd -n em30ps -k "system-images;android-30;google_apis_playstore;x86_64"

This will ask many questions, answer as per yoyr need.

3. Add emulator path in Path environment variable, in my case it's C:\Android\emulator.

4. List emulator devices installed

emulator -list-avds

5. Run emulator

// Run Emulator named em30
emulator -avd em30

6. How to use my device instead of emulator

You can follow the official documentation here and a related troubleshooting here. I'll be adding article for my version of the same soon.

So everything is set now and you'll be having Android SDK set up in your system. Below are some other related and useful commands.

// list all packages available in sdkmanager
sdkmanager --list

// list installed packages via sdkmanager
sdkmanager --list_installed

// Update installed packages
sdkmanager --update

// Uninstall packages
sdkmanager --uninstall <package name>

// Delete Emulator
avdmanager delete avd -n <emulator name>

Cover Photo by Denny Müller on Unsplash

How to create React Native App for Android, iOS and Web without Expo

Shivam Sharma — Sat, 12 Jun 2021 15:47:03 +0000

Note: This article is updated on 08-Aug-2021, to solve this StackOverflow issue, In this update, Creation of .babelrc is removed, babel.config.js & webpack.config.js are updated. The changes are equivalent to this commit.

In this article, we are going to see, how to create a React Native App which can run on Android, iOS and Web Browser. We'll NOT be using Expo in this process. For web support, we'll be using the package react-native-web.

I am using a Windows machine so I'll be showing the project run in Android and Web only. I am assuming that you have already downloaded and setup Node, NPM, Android SDK, Java and Emulator/Device for build and debugging purpose. If not, don't worry follow this article.

My Environment:

OS: Windows 10 (64 Bit)
Node: 16.3.0
NPM: 7.17

In case, if you want to explore more about which Hybrid App Development Framework to choose then you can have a look at this article: React Native vs Ionic vs Flutter

Step 1: Init a React Native Application:

This step is same as the official React Native Doc. So to init a React Native app:

Open command Prompt and go to the path where you want to create the project, In my case the path is C:\Users\shivam\Desktop\React.
Init App:

npx react-native init AwesomeProject

Your folder will be looking like this commit.
You'll find a new folder AwesomeProject in the current Directory, Now open this folder using any editor, I am using Visual Studio Code.

Step 2: Run this new app in Android (optional)

If you have Android setup done and an emulator or device connected, then you can simply run the app in android by simply running below command using command prompt in the folder AwesomeProject.

npx react-native run-android

Step 3: Web Setup

As already mentioned we'll be using the package react-native-web for web support. So you can find short setup instructions in the official doc of this package.

1. Add Web packages

Add the package react-native-web for web APIs and react-dom for browser.

npm install react-dom react-native-web

If you see any error saying unable to resolve dependency tree then you can use the --legacy-peer-deps option like below.

npm install react-dom react-native-web --legacy-peer-deps

2. Babel Plugin for build time optimization

As per official doc's recommendation, use the babel plugin babel-plugin-react-native-web.

npm install --save-dev babel-plugin-react-native-web

3. Babel Module Aliasing

As we are going to alias react-native as react-native-web so as Babel supports module aliasing using babel-plugin-module-resolver, we'll be using this.

npm install --save-dev babel-plugin-module-resolver

Now, to set alias, we'll use this package in webpack configuration. (These settings will be inside web/webpack.config.js, we'll introduce this file later in this article)

4. Mock Jest

Jest can be configured using the provided preset. This will map react-native to react-native-web and provide appropriate mocks.
For this, in /package.json file, update the value of the key "jest" from "react-native" to "react-native-web". Final value:

/package.json

{
  // Other Settings
  "jest": {
    "preset": "react-native-web"
  }
}

5. Configure Flow

Flow is a static type checker for Javascript like TypeScript. It's used by React-Native by default if you don't init the project using TypeScript template.

It can be configured to understand the aliased module. For this we need to add some config text under [options] key inside the file /.flowconfig.

/.flowconfig

[options]
# Alias the package name
module.name_mapper='^react-native$' -> 'react-native-web'

Flow can be configured to pull types from React Native for Web’s source code. For that add below config text also in the [options] key.

/.flowconfig

[options]
# Point flow to the 'module' field by default
module.system.node.main_field=module
module.system.node.main_field=main

6. Package Optimization

We added a package babel-plugin-module-resolver in step-3, It is recommended for build-time optimizations and to prune modules not used by your application. To config this we'll use webpack configurattions so your /babel.config.js file should look something like below.

/babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

7. Create Entry Files

For web version, we need to create 2 entry files, First one is index.html and second one is index.web.js, both needs to be placed at root path.

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Testing React Native on the Web!</title>
    <meta content="initial-scale=1,width=device-width" name="viewport" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <style>
      /* These styles make the body full-height */
      html,
      body,
      #root {
        height: 100%;
      }
      /* These styles disable body scrolling if you are using <ScrollView> */
      body {
        overflow: hidden;
      }
      /* These styles make the root element flex and column wise filling */
      #root {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div id="react-native-web-app"></div>
    <script type="text/javascript" src="/bundle.web.js"></script>
  </body>
</html>

Notice the script name src="/bundle.web.js", We'll be using this file name while configuring webpack.

/index.web.js

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.runApplication(appName, {
  rootTag: document.getElementById('react-native-web-app'),
});

If you notice this almost same as index.js except the last line. As you can see above, we are using an App component but from where did it came? So it's the same App.js file copied with the name App.jsx inside the path /src/components/, It's just to demonstrate an important concept which we'll learn later in this article, as this file will be creating some problems. So /src/components/App.jsx will look like below:

Note: As in many Editors/IDE the same App.js file can show errors as the file is using Flow syntax for type definitions and this syntax might not be supported in your IDE, to solve this you can either add Flow Language support via extensions or remove the flow specific code. I have removed the flow specific code in the below example for saving your time in troubleshooting.

/src/components/App.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

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

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

8. Configuring and budling

We'll be using Webpack for bundling and Babel for transpiling along with babel-loader.

Install Webpack and related dependencies: Run below command in the terminal to install packages for dev environment.

npm install --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server

Tree-Shaking: React Native’s Babel preset rewrites ES modules to CommonJS modules, preventing bundlers from automatically performing “tree-shaking” to remove unused modules from your web app build. To help with this, you can install the following Babel plugin:

npm install --save-dev babel-plugin-react-native-web

Webpack Configuration:
This cofiguration is picked from the official doc and slightly modified to add .jsx support and module-resolver we added above via babel-plugin-module-resolver. So to configure Webpack create a file at /web/webpack.config.js. We will be using webpack-cli to diffrentiate between development and production builds, if you want to manage this via script then you can use this guide.

/web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.(js)|(jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        [
          'module-resolver',
          {
            alias: {
              '^react-native$': 'react-native-web',
            },
          },
        ],
      ],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.web.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  // ...the rest of your config

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js', '.jsx'],
  },
};

9. Scripts to run on web

Now we are going to add some scripts to run our web app with short command instead of full webpack-cli command. For this, we need to add below two options in the file /package.json inside "scripts" key.

To know more about webpack-cli options for webpack-5 go here and to know more about dev-tool go here

/package.json

{
  "scripts": {
    "web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
    "build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
  }
}

10. RUN OUR WEBAPP

So, Finally we are here, as we have set shortcut in our package.json for script so now we can simply run below command to start our webapp in browser.

npm run web

Wait a minute!!! I'm getting error, like below:

ERROR in ./node_modules/react-native/Libraries/NewAppScreen/components/DebugInstructions.js 11:12
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
|
> import type {Node} from 'react';
| import {Platform, StyleSheet, Text} from 'react-native';
| import React from 'react';
 @ ./node_modules/react-native/Libraries/NewAppScreen/index.js 17:0-63 20:0-27:2
 @ ./src/components/App.jsx 1:864-910
 @ ./index.web.js 1:261-292

So this is the error we talked about in Step 7. I literally spent 3-4 days to find a solution for this. And then the creator and maintainer of react-native-web package, Nicolas Gallagher helped me via this discussion.
So the issue is in the import statement on line 21 of src/components/App.jsx, where we are trying to do something like below:

This line in the stack trace is telling us that we're trying to bundle RN internal code in our web bundle: node_modules/react-native/Libraries/NewAppScreen/index.js.

First, we should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config web/webpack.config.js, we need to explicitly list everything in node_modules that needs compiling.
import {
 Colors,
 DebugInstructions,
 Header,
 LearnMoreLinks,
 ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
All this code of the problem. We should not import from Libraries. This is not part of the public API.

To solve this, remove the dependency on the library: react-native/Libraries, for that update the code of /src/components/App.jsx as below:

/src/components/App.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

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

const Colors = {
  white: '#fff',
  black: '#000',
  light: '#ddd',
  dark: '#333',
  lighter: '#eee',
  darker: '#111',
};

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        {/* <Header /> */}
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            {/* <ReloadInstructions /> */}
            <Text>Reload Instruction</Text>
          </Section>
          <Section title="Debug">
            {/* <DebugInstructions /> */}
            <Text>Debug Instruction</Text>
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          {/* <LearnMoreLinks /> */}
          <Text>Learn More Links</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

11. Finally run after Troubleshooting

We can simply run below command in the terminal if it was stopped previously to start our webapp in browser.

npm run web

You should get output similar to below screenshot, and you can go to http://localhost:8080 to see your webapp running.

I'm sure it will help someone, at least it could save my 4 days if I know this before. All the changes done to add web support can be found in this before-update commit and this after-update commit.

I created a release also for the same.

I used the same configurations on this Dummy project and faced no issues after update.

If you find any issue in the configurations and gets it resolved, don't hesitate to contribute to the repo.

You can connect with me on Linkedin or Github as well.

Techgig CodeGladiators 2021 is live now, Participate and prove your skills

Shivam Sharma — Tue, 30 Mar 2021 07:21:49 +0000

Participate from this referral link

As per Techgig's site:

Code Gladiators is an annual coding competition by TechGig, that draws the best and the brightest coding talent from all parts of India. With multiple contests in emerging technologies and the coveted title of Code Gladiators up for grabs, the competition sees enthusiastic participation and has grown from strength to strength with each passing year.

Leetcode 869. Reordered Power of 2 [Solution]

Shivam Sharma — Sun, 21 Mar 2021 16:02:34 +0000

The question is a little bit tricky but once you get the trick, you can easily write the code.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/reordered-power-of-2/

Starting with a positive integer N, we reorder the digits in any order (including the original order) such that the leading digit is not zero.

Return true if and only if we can do this in a way such that the resulting number is a power of 2.

Example 1:

Input: 1
Output: true

Example 2:

Input: 10
Output: false

Example 3:

Input: 16
Output: true

Example 4:

Input: 24
Output: false

Example 5:

Input: 46
Output: true

Note:

1 <= N <= 10^9

Explanation

So the problem is simple, we are given a number N and we need to check whether we can create a number from this number by changing the place of digits. Considering zero can not be at the leading position.

eg. from 2014 we can create 1024 but not 0124 and 1024 = 2^10 so answer should be true for this N=2014. For N=12 we have two combinations 12 and 21 and both are not in any power of 2 so for N=12 answer is false.

Solution

As a naive approach, we can try to check if the number is the power of 2 for every permutation of the digits in N and it will result in time complexity = O((logN)!∗logN) but look at the constraints condition 1 <= N <= 10^9 and for various power of 2 we can see that 2^29 = 536870912 and 2^30 = 1073741824. So instead of checking whether the permutation of N is a power of 2, we can check that any of the numbers among 2^x ; x=0,1,2...29 has the same number of digits and same frequency of digits with N. If yes then this 2^x can be created from N.

eg. If N=23 then,

We'll check if 2^0 = 1 can be created using 23 by checking the number of digits in 2^0 = 1 and 23 as the number of digits are not equal in 1 and 23 so 1 can not be created from 23.
Now for x=1, 2^x = 2 again due to the different numbers of digits, 2 can not be created from 23.
Now for x=2, 2^x = 4 again due to the different numbers of digits, 4 can not be created from 23.
Now for x=3, 2^x = 8 again due to the different numbers of digits, 8 can not be created from 23.
Now for x=4, 2^x = 16 now the number of digits are same, but the frequency of digits in 16 and 23 are not the same so 16 can not be created from 23.
Now for x=5, 2^x = 32 now number of digits are same, and frequency of digits in 32 and 23 are same (2 => once, 3=> once) so 32 can be created from 23, return true.

Implementation

C++ Code:

class Solution {
public:
    bool reorderedPowerOf2(int N) {
        int d = getNumOfDigits(N);
        int a[10]={0};
        getDigitsFreq(N,a);
        int n2=1;
        int d1;
        for(int i=0; i<30; i++){
            d1 = getNumOfDigits(n2);
            if(d==d1){
                int a1[10]={0};
                getDigitsFreq(n2,a1);
                int j;
                for(j=0;j<10;j++){
                    if(a[j] != a1[j]){
                        break;
                    }
                }
                if(j==10){
                    return true;
                }
            }
            else if(d<d1){
                break;
            }
            n2=n2<<1;
        }
        return false;
    }

    void getDigitsFreq(int N, int a[]){
        while(N){
            a[N%10]++;
            N /= 10;
        }
    }

    int getNumOfDigits(int n){
        int i=0;
        while(n){
            i++;
            n /= 10;
        }
        return i;
    }
};

Runnable C++ code:

Cover Photo by Arnold Francisca on Unsplash

Leetcode 841. Keys and Rooms [Solution]

Shivam Sharma — Fri, 19 Mar 2021 13:30:53 +0000

The question is pretty easy, it's all about just clicking the approach.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/keys-and-rooms/

There are N rooms and you start in room 0. Each room has a distinct number in 0, 1, 2, ..., N-1, and each room may have some keys to access the next room.

Formally, each room i has a list of keys rooms[i], and each key rooms[i][j] is an integer in [0, 1, ..., N-1] where N = rooms.length. A key rooms[i][j] = v opens the room with number v.

Initially, all the rooms start locked (except for room 0).

You can walk back and forth between rooms freely.

Return true if and only if you can enter every room.

Example 1:

Input: [[1],[2],[3],[]]
Output: true
Explanation:
We start in room 0, and pick up key 1.
We then go to room 1, and pick up key 2.
We then go to room 2, and pick up key 3.
We then go to room 3. Since we were able to go to every room, we return true.

Example 2:

Input: [[1,3],[3,0,1],[2],[0]]
Output: false
Explanation: We can't enter the room with number 2.

Note:

1 <= rooms.length <= 1000
0 <= rooms[i].length <= 1000
The number of keys in all rooms combined is at most 3000.

Explanation

So the problem is simple, We have a room open and we'll find keys of some other rooms then we can visit these rooms and we'll find other keys there. One room can contain no keys as well. We can not visit a room until we have key to it. So we need to find that whether we can visit all rooms or not.

Solution

Doesn't it like look a graph traversal problem??? Where rooms are like node and keys to other rooms present in a room are like edges to other nodes. And we just need to check whether we can traverse all nodes or not. So we can use Breadth First Search(BFS) or Dreadth First Search(DFS). I am using a stack-based DFS approach.

A little enhancement is that I don't want to revisit a node which we have already visited, for that we can use a bitset or a boolean array. One more enhancement we can do that, we can prevent collecting keys for the rooms for whom we already have keys. This can be done using another bitset.

So solution is easy:

Mark Room-0 visitable using bitset keysCollected and push into stack s.
Now perform below operations until the stack s becomes empty:
1. Pop room number from stack, t.
2. If Room-t is not visited yet then visit and mark it visited using bitset visited.
3. Pick those keys from here which open a room which is not visitable yet, which can be checked by keysCollected.
4. For picked keys, mark associated rooms visitable using keysCollected and push into stack s.
If count of visited rooms as per visited is equal to the count of total rooms rooms.size() then return true else false.

Implementation

C++ Code:

class Solution {
public:
    bool canVisitAllRooms(vector<vector<int>>& rooms)
    {
        stack<int> s;
        bitset<1000> visited;
        bitset<1000> keysCollected;
        keysCollected[0] = 1;
        s.push(0);

        while (!s.empty()) {
            int t = s.top();
            s.pop();
            if (!visited[t]) {
                visited[t] = 1;
                for (auto i = rooms[t].begin(); i != rooms[t].end(); i++) {
                    if (!keysCollected[*i]) {
                        keysCollected[*i] = 1;
                        s.push(*i);
                    }
                }
            }
        }
        return visited.count() == rooms.size();
    }
};

Runnable C++ code:

Cover Photo by Jaye Haych on Unsplash

Simple markdown tag insertion snippet using shortcut keys [Pure Javascript]

Shivam Sharma — Fri, 19 Mar 2021 07:54:46 +0000

I needed a tiny, light-weight plug to add markdown syntax in my textboxes, I searched online but all of them were very vast so I decided to create my own with the help of many StackOverflow articles.

It is a very small Pure JS-based scripts to achieve the same, but before that look at some features of this tiny script as below:

Features:

Define your own markdown enclosures like ++ for underline and __ for italic.
If any text is selected then it'll be enclosed with the markdown tag.
If no text is selected, then you have an option to give a default text to be inserted with markdown tags.
Markdown can be inserted using shortcut keys like ctrl+b.
If any markdown tag is already added around selected text and the same markdown is applied then the markdown tag gets removed.
Multiple markdowns can be added sequentially like as **++underlined bold text++**
Different beginning and closing markdown tags can be inserted like as in hyperlinks, the opening tag can be [ and the closing tag can be ](example.com).

Examples:

text means text is selected.

a text to bold => a text to **bold**
a text to remove **bold** => a text to remove bold
a text to remove **bold** => a text to remove bold

Shortcut commands used in snippet:

Markdown	Command	Result
Bold	ctrl+b	bold text
Italic	ctrl+i	__italic text__
Underline	ctrl+u	++underlined text++
Link	ctrl+l	[link title](http://www.example.com)

Code:

HTML:

<!doctype html>
<html>
  <head>
    <title>Markdown Tag Insertion</title>
    <script language="javascript" type="text/javascript" src="script.js"></script>
  </head>
  <body>                                                            
    </br>
    <input type="text" id="title" style="width:250px;height:35px;">
    </br>
    </br>
    <textarea id="desc" rows="8" cols="80"></textarea>
    </br></br>
    <a href="https://stackoverflow.com/a/54364217/8494462">Stack Overflow Answer Link</a>
  </body>
</html>

Javascript:

//Code to bind keyevents 
document.addEventListener("keydown", (function(e) {
        if (e.ctrlKey && !e.shiftKey && [66, 73, 85, 76].indexOf(e.keyCode) > -1) {
                var keyCode = e.keyCode;
                var focused = document.activeElement;
                var id = focused.id;
                if (["title", "desc"].indexOf(id) > -1) { // To apply only on required elemenst
                        e.preventDefault();
                        if (keyCode == 66) { //ctrl+B
                                insertFormating(focused, "**", "bold");
                        } else if (keyCode == 73) { //ctrl+I
                                insertFormating(focused, "__", "italic");
                        } else if (keyCode == 85) { //ctrl+U
                                insertFormating(focused, "++", "underline");
                        } else if (keyCode == 76) { //ctrl+l
                                insertFormating(focused, "[", "link title","](http://www.example.com)");
                        }
                }
        }
}));

/**
* @param     {Object}    txtarea       javascript Element Object to the textarea
* @param     {String}    text          markdown enclosing tag text
* @param     {String}    defaultTxt    Default Text to be inserted when no text is selected
* @param     {String}    text2         markdown enclosing tag text for closing if different from opening
*/
function insertFormating(txtarea, text, defaultTxt = "", text2 = "") {
    var selectStart = txtarea.selectionStart
    var selectEnd = txtarea.selectionEnd
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;
    var mode = 0;
    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(selectEnd, txtarea.value.length);
    var middle = (txtarea.value).substring(caretPos, selectEnd);

  // Sets ending tag as opening tag if empty
    if (text2 == "") {
        text2 = text;
    }
    var textLen = text.length;
    var text2Len = text2.length;

    if (selectStart === selectEnd) {
        middle = defaultTxt;
        mode = 1;
    } else {
        if (front.substr(-textLen) == text && back.substr(0, text2Len) == text2) {
            front = front.substring(0, front.length - textLen);
            back = back.substring(text2Len, back.length);
            text = "";
            text2 = "";
            mode = 2;
        } else if (middle.substr(0, textLen) == text && middle.substr(-text2Len) == text2) {
            middle = middle.substring(textLen, middle.length - text2Len);
            text = "";
            text2 = "";
            mode = 3;
        }
    }
    txtarea.value = front + text + middle + text2 + back;
    if (selectStart !== selectEnd) {
        if (mode === 0) {
            txtarea.selectionStart = selectStart + textLen;
            txtarea.selectionEnd = selectEnd + textLen;
        } else if (mode === 2) {
            txtarea.selectionStart = selectStart - textLen;
            txtarea.selectionEnd = selectEnd - textLen;
        } else if (mode === 3) {
            txtarea.selectionStart = selectStart;
            txtarea.selectionEnd = selectEnd - textLen - text2Len;
        }
    } else {
        txtarea.selectionStart = selectStart + textLen;
        txtarea.selectionEnd = txtarea.selectionStart + middle.length;
    }
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

Any suggestion is appreciated.

Codepen:

Leetcode 535. Encode and Decode TinyURL [Solution and Discussion]

Shivam Sharma — Mon, 15 Mar 2021 13:19:24 +0000

The question is very good and real-world related, but the test environment for this question in Leetcode is not up to the mark, As even below code is also accepted and it requires no effort.

class Solution {
public:
    string encode(string longUrl) {
        return longUrl;
    }
    string decode(string shortUrl) {
        return shortUrl;
    }
};

That is happening because Leetcode is creating a new instance for each test case hence there is no need to keep past input/output in the code. Also, there are no constraints on the length of a short URL.

But we are here to learn, so ignoring such a bad test environment, we'll be creating a real-world solution. The best thing about this question is the provided hyperlink to the article.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/encode-and-decode-tinyurl/

Note: This is a companion problem to the System Design problem: Design TinyURL.

TinyURL is a URL shortening service where you enter a URL such as https://leetcode.com/problems/design-tinyurl and it returns a short URL such as http://tinyurl.com/4e9iAk.

Design the encode and decode methods for the TinyURL service. There is no restriction on how your encode/decode algorithm should work. You just need to ensure that a URL can be encoded to a tiny URL and the tiny URL can be decoded to the original URL.

Explanation

So the problem is simple, you need to create an algorithm, which will convert a long URL to a short URL and the long URL can be achieved back from the short URL. One thing to take care of is that the short URL should always map to a single long URL but vice versa is not mandatory but good to have.

Solution

There are many solutions possible to this problem, the one we are going to use is mentioned in the attached article with the question, which is "Simple Base conversion". In this method, we have a base and the base for the system is the number of distinct characters available in the system. Simplest example for it is a Decimal System which has base=10 (0-9) or a Hexadecimal Number System which has base=16 (0-9,A-D). So first let's see how we convert a decimal number to a hexadecimal number.

Mod a number by Base and use the character present at this mod value.
Divide the original number by base.
Repeat the above steps until the number becomes zero.
Now write the characters found in a reverse manner.

Eg. 1732 => 6C4

Base	Number	Remainder	Read Direction
16	1732	4	↑
16	108	C	↑
16	6	6	↑
16	0	→	↑

Now again look at the problem we have a-z, A-Z and 0-9 i.e. 62 characters available to use in short URL, so we can see it as a decimal to 62-based system conversion problem. So we'll convert a number to a 62-based string and this string will be our short URL Hash. This hash can be appended to "http://tinyurl.com/" to form a complete short URL.

Wait a minute??? From where this decimal number came into the picture??? Actually, instead of converting a very long string to a short URL, we'll be converting a decimal number to a short URL and we'll bind this short URL to the long URL. Or to save space we can bind directly the decimal number to the long URL. This number is an increasing counter, which will be increased every time by 1 when encode is called.

For a limited number of long URLs, the first method is OK, but when we are going to convert billions then the second method is way better.

For the first method, In the encoding method, we require only decimal to 62-based conversion and a hash map to store pair of <Short URL Hash, Long URL>. Then in the decoding method, we'll just look up the short URL in this hash map and return the long URL.

In the Second method, we'll have a hashmap for the pair of <integer, Long URL> so we require both decimal to 62-based conversion (for encoding) and 62-based to decimal conversion (for decoding)

Implementation

C++ Code:
For method 1:

class Solution {
public:
    int counter=0;
    unordered_map<string,string> dict;

    string encode(string longUrl) {
        char cmap[] = "abcdefghijklmnopqrstuvwxyz\
            ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        int n = (++counter);
        string shortUrl;
        while(n){
            shortUrl.push_back(cmap[n%62]);
            n=n/62;
        }
        reverse(shortUrl.begin(), shortUrl.end());
        dict[shortUrl] = longUrl;
        return shortUrl;
    }

    string decode(string shortUrl) {
        return dict[shortUrl];
    }
};

For method 2:

class Solution {
public:
    int counter=0;
    unordered_map<int,string> dict;

    string encode(string longUrl) {
        char cmap[] = "abcdefghijklmnopqrstuvwxyz\
            ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        int n = (++counter);
        string shortUrl;
        while(n){
            shortUrl.push_back(cmap[n%62]);
            n=n/62;
        }
        reverse(shortUrl.begin(), shortUrl.end());
        dict[counter] = longUrl;
        return shortUrl;
    }

    string decode(string shortUrl) {
        int id = 0; // initialize result
        for (int i=0; i < shortUrl.length(); i++)
        {
            if ('a' <= shortUrl[i] && shortUrl[i] <= 'z')
                id = id*62 + shortUrl[i] - 'a';
            if ('A' <= shortUrl[i] && shortUrl[i] <= 'Z')
                id = id*62 + shortUrl[i] - 'A' + 26;
            if ('0' <= shortUrl[i] && shortUrl[i] <= '9')
                id = id*62 + shortUrl[i] - '0' + 52;
        }
        return dict[id];
    }
};

Runnable C++ code:

Cover Photo by Annie Spratt on Unsplash

We can have a discussion either here or here regarding this question.

Leetcode 1721. Swapping Nodes in a Linked List [Solution]

Shivam Sharma — Sun, 14 Mar 2021 13:40:08 +0000

If we get the idea correctly then this question is just a combination of two general questions, first one is "Find k-th node from the end in a linked list" and "Swap two numbers". As instead of swapping the nodes, swapping the data of the nodes is sufficient. If you are going to swap actual nodes then this is going to be a little bit more tricky. But you can try that as well to test yourself. We are going to solve this question using the above logic.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/swapping-nodes-in-a-linked-list/

You are given the head of a linked list, and an integer k.

Return the head of the linked list after swapping the values of the kth node from the beginning and the kth node from the end (the list is 1-indexed).

Example 1:

Input: head = [1,2,3,4,5], k = 2
Output: [1,4,3,2,5]

Example 2:

Input: head = [7,9,6,6,7,8,3,0,9,5], k = 5
Output: [7,9,6,6,8,7,3,0,9,5]

Example 3:

Input: head = [1], k = 1
Output: [1]

Example 4:

Input: head = [1,2], k = 1
Output: [2,1]

Example 5:

Input: head = [1,2,3], k = 2
Output: [1,2,3]

Constraints:

The number of nodes in the list is n.
1 <= k <= n <= 105
0 <= Node.val <= 100

Explanation

So the question wants two simple things from us, first one is to find k-th node from the beginning and k-th node from the end in a linked list. The second thing to be done is to swap both the nodes. As it's not asked to swap the actual node with its address so we can simply just swap the values of the nodes instead of swapping the nodes.

Solution

The problem needs to be solved in the below steps:

Step 1: Point to k-th node from the beginning.

Point a pointer x to the head.
Move the pointer forward in the linked list until we reached k-th node.

Step 2: Point to k-th node from the end.

Point 2 pointers y and t to the head.
Move pointer t till k-th node.
Now move both the pointers y & t until t has reached the last node.
So when t has reached the last node, y must have been reached k-th node from the end.

Step-3: Swap values of both the nodes.

As we can guess that Point 2 of Step-2 can be done in the same loop of Point 1 of Step-1. This will save a bit of computation for us.

Implementation

C++ Code:

class Solution {
public:
    ListNode* swapNodes(ListNode* head, int k) {
        ListNode *x=head, *y=head, *t=head;

        // Until we reach k-th node from beginning
        while(k>1){
            x = x->next;
            t = t->next;
            k--;
        }

        // Until pointer t reach last need 
        while(t->next){
            y=y->next;
            t=t->next;
        }

        // Swap values at both the nodes
        int temp = x->val;
        x->val = y->val;
        y->val = temp;

        return head;
    }
};

Time Complexity: O(N), where N is the length of linked list.
Space Complexity: O(1)

Runnable C++ code:

Leetcode 823. Binary Trees With Factors [Solution]

Shivam Sharma — Sat, 13 Mar 2021 15:37:56 +0000

This question checks your knowledge about Dynamic Programming and permutation-combination. I am also a beginner and I had to look for the answer online to understand it but once you understand it, It helps in understanding many such questions in the future.

Difficulty: Medium
Jump To:

Problem Statement
Explanation
Solution
Implementation

Problem Statement

Question: https://leetcode.com/problems/binary-trees-with-factors/

Given an array of unique integers, arr, where each integer arr[i] is strictly greater than 1.

We make a binary tree using these integers, and each number may be used for any number of times. Each non-leaf node's value should be equal to the product of the values of its children.

Return the number of binary trees we can make. The answer may be too large so return the answer modulo 109 + 7.

Example 1:

Input: arr = [2,4]
Output: 3
Explanation: We can make these trees: [2], [4], [4, 2, 2]

Example 2:

Input: arr = [2,4,5,10]
Output: 7
Explanation: We can make these trees: [2], [4], [5], [10], [4, 2, 2], [10, 2, 5], [10, 5, 2].

Constraints:

1 <= arr.length <= 1000
2 <= arr[i] <= 109

Explanation

First, we need to understand, what is a factor to a number. For a number n, x is a factor if n%x==0 so two numbers x and y can be children of n in the binary tree, only if x * y = n.

One small point to bring into notice: It's given that 2 <= arr[i]because if arr[i] is 0 or 1 then infinite solutions are possible.

So we need to find that how many such trees of any depth can be created using a given number in any quantity. for example, if given numbers are [2,4,5,10] then 7 trees are possible as below:

[2]           [4]           [5]           [10]

     [4]              [10]              [10]
    /   \            /    \            /    \
  [2]   [2]        [5]    [2]        [2]    [5]

Solution

We need to see this problem as a problem breakable into subproblems, like in the example [2,5,10,20] we can see this problem broken into subproblems [2], [2,5], [2,5,10] and then final problem [2,5,10,20]. We will solve these subproblems in order and by finding the number of trees with an item as root which is just added in the current subproblem in comparison to the last subproblem i.e.

We'll first find the number of trees with 2 as a root and no children options available i.e. 1.
Then the number of trees with 5 as a root and [2] is available as children option i.e. 1.
Then the number of trees with 10 as a root and [2,5] is available as children option i.e. 3.
Then the number of trees with 20 as a root and [2,5,10] is available as children option i.e. 7.

All the trees possible are as below:

In the end, we'll just sum up all the above number of trees to get the solution to the problem. This should be clear now that we'll be using dynamic programming.

To get the answer for each subproblem we are using the logic that 1 tree is possible with just that element to let's say n which is a tree with the only root. And for each element which is a factor of n let's say x(and another one is y) we'll add multiplication of subsolution of x and subsolution of y. Once x as a left child and then y as a left child. As factors will always be smaller than the actual number so we'll sort the array first so that we don't need to find factors in the whole array every time, we'll just see the elements before the current number is sorted array.

DP Equation:

dp[i] = sum(dp[j] * dp[i / j]) 
ans = sum(dp[i])

Let's see the code, it'll clear things more.

Implementation

C++ Code:

#define MOD 1000000007
class Solution {
public:
    int numFactoredBinaryTrees(vector<int>& arr) {
        unordered_map<int,long int> dp;
        int len=arr.size();

        // Sorting array
        sort(arr.begin(), arr.end());

        for(int i=0;i<len;i++){
            // One tree is always possible (root only)
            dp[arr[i]] = 1;

            // Check for all elements less than current element arr[i]
            for(int j=0; j<i; j++){
                // Check if arr[j] is factor of arr[i] 
                // and the second factor (arr[i]/arr[j]) is seen
                if(arr[i]%arr[j]==0 && dp.find((arr[i]/arr[j]))!=dp.end()){
                    // Add combinations in dp with arr[j] as left child
                    // So (arr[i]/arr[j]) becomes right child automatically
                    dp[arr[i]] += (dp[arr[j]] * dp[(arr[i]/arr[j])]) % MOD;
                    dp[arr[i]] %= MOD;
                }
            }
        }

        int ans=0;
        // Find sum of dp to sum solution of all subproblems
        for(auto i : dp){
            ans += i.second;
            ans %= MOD;
        }
        return ans;
    }
};

Time Complexity: O(N^2), where N is the length of arr. This comes from the two for-loops iterating i and j.
Space Complexity: O(N), the space used by dp.

Runnable C++ code: