DEV Community: Subramanya Chakravarthy

Introduction to Flipper for React Native Developers

Subramanya Chakravarthy — Sat, 01 May 2021 16:22:29 +0000

What is flipper?

It's a tool from Facebook to debug mobile applications.
Flipper is like vs code, where you can add plugins to improve, extend debugging capabilities

Note: This is a practical guide, so please keep flipper open on one side and explore through different options as you read

What can you do with flipper?

Start Devices

With flipper you can start both Android emulators and iOS simulators. In order to start the emulator or simulator you can use the Rocket icon 🚀 on the left bottom. It gives a list of available/created Emulators and Simulators.

ScreenShots and Videos

Did you know that you can get a screenshot of the device or record a video using flipper. Start the emulator of your choice and click the camera button to get a screenshot, similarly try the video recorder too.

React Dev Tools

Flipper comes with React Dev Tools which can be used to quickly search and debug your UI and see changes instantly as you apply them. With the settings you can hide unnecessary components based on filters.

Whenever you select a component it shows all the props it takes and the component rendered by hierarchy till the root and the source

There are shortcuts to open the source of the component, copy the contents of the component and with suspense you can even suspend the component

React Profiler

With Profiler you can find the bottlenecks of the app and debug where react spends more time.

FlameGraph shows the component tree and highlights the components rendered for a commit
The Ranked tab shows the list of components that takes lot of time to render
Interactions tab helps you to log the time taken for rendering, mounting etc

You can export the profile and share it across with fellow devs

Layout Inspector

The layout inspector helps you to see the layout bounds and modify/tweak few available values like numbers, colors

Reactotron

Reactotron is yet another debugger that helps you with logging mst, observing changes, and sending actions

Network Inspector

This can help you to lookup network requests made through the app. You can inspect query parameters, form data and response of the API

Logs

Device Logs

Flipper streams device logs with respect to android or ios and there is an option to pause these logs if necessary or overloaded

React Native logs

Any console.log statements on React Native side can be seen here

Crash Reporter

Flipper remembers the crash and provides necessary insights to debug about the crash

The Ultimate Guide to FlatList in React Native

Subramanya Chakravarthy — Mon, 29 Jun 2020 02:18:52 +0000

If you have a list of data like Facebook feed or YouTube like infinite list of videos, the most performant way to render in react-native is only by using FlatList.

Basic Usage

A basic usage of FlatList requires three props. One is data which takes an array of things like objects which is needed to render it, Second is renderItem which is a function that accepts individual item from data Array and render a component for it. And the last one is keyExtractor which is unique and is useful for performant rendering

Here's a Basic Usage of FlatList from docs

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

In a real world you get data dynamically, So Let's get some dummy data from Random User API

class FlatListDemo extends Component {
  state = {
    loading: false,
    data: [],
    page: 1,
    seed: 1,
    error: false,
  };

  componentDidMount() {
    this.setState({ loading: true }, () => this.makeRemoteRequest());
  }

  makeRemoteRequest = async () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    try {
      const response = await fetch(url);
      const data = await response.json();
      this.setState(
        {
          data: page === 1 ? data.results : [...this.state.data, ...data.results],
          error: data.error || null,
          loading: false,
          refreshing: false,
        },
        // () => this.searchFilterFunction("")
      );
    } catch (error) {
      this.setState({ error, loading: false });
    }
  };

  _renderItem = ({ item }) => (
    <View
      style={{
        flexDirection: 'row',
        flex: 1,
      }}
    >
      <Image
        style={{ width: 40, height: 40, borderRadius: 20, margin: 5 }}
        source={{ uri: item.picture.thumbnail }}
        resizeMethod={'resize'}
      />
      <View style={{ justifyContent: 'center', marginLeft: 5 }}>
        <Text>{`${item.name.first} ${item.name.last}`}</Text>
        <Text>{item.email}</Text>
      </View>
    </View>
  );

  _keyExtractor = (item, index) => item.email;

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this._renderItem}
        keyExtractor={this._keyExtractor}
      />
    );
  }
}

Before receiving content from the api, initially we don't have any data, For those scenarios show a Loading indicator, to do that ListEmptyComponent can be used

ListEmptyComponent={<ActivityIndicator animating size={"large"} />}

There are no separators between each contact, so let's add them by using ItemSeparatorComponent.

ItemSeparatorComponent={
  <View
    style={{
      height: 1,
      width: "86%",
      backgroundColor: "#CED0CE",
      marginLeft: "14%"
    }}
  />
}

Let's add a search box, so we can find contacts, to accomplish this we will use ListHeaderComponent

ListHeaderComponent={this.renderHeader}

Before we add renderHeader method add the following to state

filteredData: [],
error: null,
refreshing: false

And for tracking search input value add this.inputSearch = "" to constructor outside of state and undo the searchFilterFunction comment in makeRemoteRequest function and change data prop in FlatList to this.state.filteredData

And here's the renderHeader function, which contains TextInput where it has a searchFilterFunction which returns list based on input

renderHeader = () => {
  return (
    <View style={{ alignItems: 'center', padding: 10, backgroundColor: '#fff' }}>
      <TextInput
        style={{
          flex: 1,
          width: width / 1.1,
          borderWidth: 1,
          borderRadius: 15,
        }}
        underlineColorAndroid={'transparent'}
        placeholder={'Search'}
        onChangeText={text => this.searchFilterFunction(text)}
        value={this.inputSearch}
      />
      {this.inputSearch.length > 0 && <Text>{this.state.filteredData.length} items found</Text>}
    </View>
  );
};

And here's the searchFilterFunction where it combines first and last name and using filter function from JavaScript to return sorted data

searchFilterFunction = text => {
  this.inputSearch = text;
  const newData = this.state.data.filter(item => {
    const itemData = `${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`;
    const textData = text.toUpperCase();
    return itemData.indexOf(textData) > -1;
  });
  this.setState({ filteredData: newData });
};

Now the search is working with the available data, let's request for more data when user scrolls to the end. Let's add a prop onEndReachedThreshold={0.9} which takes value from 0 to 1. I have give 0.9 which means onEndReached={this.handleonEndReached} prop is called when list is scrolled to 90%. When list reaches to 90% let's make a request to get more data.

handleOnEndReached = info => {
  if (info.distanceFromEnd >= -10) {
    this.inputSearch.length === 0 &&
      !this.state.loading &&
      this.setState(
        (state, props) => {
          return { loading: true, page: state.page + 1 };
        },
        () => this.makeRemoteRequest(),
      );
  }
};

I have added few checks before making new network request

check distance from end
check search input is 0 or not
check did a request is in progress via state.loading

Let's add a scrolling indicator when new request is made, it can be done by adding ListFooterComponent prop to FlatList

ListFooterComponent={this.renderFooter}

renderFooter = () => {
  if (this.state.loading && this.state.data.length !== 0) {
    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <ActivityIndicator animating size={"large"} />
      </View>
    );
  }
  return null;
};

Have you ever used pull down to refresh or update data in some popular apps like facebook, you can add same functionality by using two props refreshing which takes state and shows loading indicator and onRefresh which will be called when you pull down.

// FlatList props
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}

//handleRefresh function
handleRefresh = () => {
  this.setState({ refreshing: true, seed: Math.random(), page: 1 }, () =>
    this.makeRemoteRequest()
  );
};

Now you can use pull to refresh data and new data will be loaded when scrolled to end but there would be lag while scrolling. In order to fix that let's control initial number of items to render and maximum render per batch

initialNumToRender={8}
maxToRenderPerBatch={2}

Here's the Code

Dart List Explorer

Subramanya Chakravarthy — Mon, 29 Jun 2020 02:09:53 +0000

Hello Devs,

I started working on flutter from last month. Initially I stumbled upon writing good code as it's a new language, but now the situation is much better. When I started learning JavaScript Sarah Drasner's Array List Explorer helped me a lot. Now I forked this array list explorer and added Most of the Dart list methods for common usage. In Future I will try to add few more list methods.

Here's the url, Dart List Explorer

Please check it out

Gracias

React Native Push Notifications using Expo 🔔

Subramanya Chakravarthy — Thu, 18 Jun 2020 07:47:29 +0000

The architecture for server based notifications is:

Your Android/ios Phone is continuously connected to FCM(Firebase Cloud Messaging)/APNS(Apple Push Notification Service), so it's best to utilize them. In order to send notifications, first we need Push Notification Id which is unique to device and app.

To get Expo Push Notification Id

askPermissions = async () => {
  const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
  let finalStatus = existingStatus;
  if (existingStatus !== 'granted') {
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    finalStatus = status;
  }
  if (finalStatus !== 'granted') {
    return false;
  }
  return true;
};

registerForPushNotifications = async () => {
  const enabled = await this.askPermissions();
  if (!enabled) {
    return Promise.resolve();
  }
  // Get the token that uniquely identifies this device
  let token = await Notifications.getExpoPushTokenAsync();
  return token;
};

We ask user to grant notifications using askPermissions function. It returns true or false representing the permission. Then we call Notifications.getExpoPushTokenAsync() async function to get notification. After getting notification you can send it to server to store the id. For demonstration purposes I will just copy the id using react-native's Clipboard method.

enablePushNotifications = async () => {
  let token = await this.registerForPushNotifications();
  if (token) {
    Clipboard.setString(token);
    this.setState({ token });
  }
};

Now whenever you want to send notification, Expo provides their server sdk in multiple languages like node.js, python, ruby. More details are here.

I am using Expo's Push notification tool to test it, instead of hosting in my server.

Now paste your Expo Push Notification, that you got from the app. Message title and Message body is necessary and you can configure extra data like Play sound, ios badge count, Android channel id, JSON data.

Now Press that big blue Send a notification button, and look at your phone. Ta-DA 🎉 you have received a notification.

Now you may want to read the notification and send the user to appropriate screen. To do that we need to create a notification listener. I will add a notification listener in the componentDidMount of top component

state = {
  token: '',
  data: null,
  origin: null,
};

componentDidMount = () => {
  this.notificationSubscription = Notifications.addListener(this.handlePushNotification);
};

componentWillUnmount = () => {
  this.notificationSubscription.remove();
};

handlePushNotification = ({ origin, data }) => {
  this.setState({ data, origin });
};

I have added a listener and calling handlePushNotification function when ever notification is clicked. You will receive a JSON object containing origin and data as keys. where origin can be either received or selected. If origin is received then app is open and it can be either in foreground or background. If origin is selected app is in closed state and opened via notification. data key represents the JSON data passed

In handlePushNotification I am just setting into state, you can redirect to specific screen or perform some action. That's it.

Migrating React Native app to AndroidX

Subramanya Chakravarthy — Sun, 14 Jun 2020 15:49:46 +0000

Learn how to migrate your existing react native app to AndroidX. What is AndroidX and why you should start migrating your app to AndroidX?.

What is AndroidX?

Android has support library which in webworld is polyfills that provide backward compatibility to API's. It has started over 8+ years ago and has grown to include device-specific UX, debugging, testing and other utilities. The adoption of the Support Library has been phenomenal, most Android apps use the Support Library today. In order to standardise these support libs google started AndroidX project to lay a solid foundation.

Why should I consider it?

Android stopped providing updates to existing support libs and it only provide updates to AndroidX. It started pushing developers to migrate to AndroidX.

Let's do this

In order to start migration, App gradle version should be greater than or equal to 3.4.1 In order to change gradle version go to your android folder and look for build.gradle and open it. Look for buildscript --> dependencies and find classpath which contains gradle version and if it's less than 3.4.1 change it.

Now open gradle.properties file and add the following lines to the end of the file

android.useAndroidX=true
android.enableJetifier=true

We just reached final step. There are multiple ways to refactor the code.

Automate using Android Studio
Use this python script MigrateToAndroidX
Do it manually
Or this npm module jetifier

Using Android Studio

From the menubar select Refactor > Migrate to AndroidX

It will look for old imports in your app as well as in your dependencies and provides a prompt Do Refactor. Just click on it and it will change all the imports and now you have successfully migrated to AndroidX. but there is a problem. you cannot commit these changes and sync up with your team and whenever you reinstall node_modules all these changes are gone and you have to repeat 😫
The solution for this problem is using the other ways

Do it Manually

This is continuation of above step.

First add patch-package as your devDependency.

Before you click Do Refactor note down all the dependency names.

After refactor run the following command

npx patch-package some-package

replace some-package with the dependency name and repeat for all dependencies that are refactored. It will create .patch file with package name and version name. commit these patches until a fix is ready from the library.

Now add this postinstall script to your package.json

"scripts": {
   "postinstall": "patch-package"
 }

Now your dependency changes will be synced up with your team 🤘🤘

Using MigrateToAndroidX python script

Clone this repo MigrateToAndroidX and make sure you have python3 installed in your system. Now bring up your terminal in this repo and run

> python3 migrateToAndroidX.py --node_modules <path>

Example

If your path is ~/projects/rnProject/node_modules/ then > python3 migrateToAndroidX.py --node_modules ~/projects/rnProject/node_modules/

Now add this postinstall script and add migrateToAndroidX.py file to your git and commit it

"scripts":{
  ...
  "postinstall":"python3 migrateToAndroidX.py --node_modules <path>"
}

This way all dependecy changes will be in sync with your teammates 🤞

Using jetifier

Add jetifier as dev dependency
> npm install --save-dev jetifier

And run
> npx jetify

Finally add this postinstall script

"scripts":{
  ...
  "postinstall":"jetify"
}

Congratulations 🎉🎉 you did it. Now your app is migrated to AndroidX

Let's make working with react native smoother by sharing this article 😉.

React Native Local Notifications In Expo

Subramanya Chakravarthy — Sat, 13 Jun 2020 14:10:07 +0000

Notifications provide short, timely information about events in your app while it's not in use. Every app wants it users to engage with their app for more time. I think Notifications are the best way to remind user gently about the presence and provide some actionable stuff like If the app is based about workouts, you can remind user not to loose streak.

I am using expo to demonstrate Local Notifications. In order to show notifications to user, firstly we have to take permission from the user

Here is the Source Code to follow along

In order to ask permissions to use expo I use this beautiful async function which returns a Boolean status of notifications

import * as Notifications from "expo-notifications";
import * as Permissions from "expo-permissions";

askPermissions = async () => {
  const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
  let finalStatus = existingStatus;
  if (existingStatus !== "granted") {
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    finalStatus = status;
  }
  if (finalStatus !== "granted") {
    return false;
  }
  return true;
};

There are two ways we can use Local Notifications, one is immediate notification and other is scheduled Notification

Let's create a function which sends immediate Notification

import * as Notifications from "expo-notifications";

sendNotificationImmediately = async () => {
  let notificationId = await Notifications.presentLocalNotificationAsync({
    title: 'This is crazy',
    body: 'Your mind will blow after reading this',
  });
  console.log(notificationId); // can be saved in AsyncStorage or send to server
};

import Notifications first and then calling presentLocalNotificationAsync from Notifications and it takes LocalNotification object which contains title, body, data, and some other options for android and ios. It returns the Notification Id which can be used to dismiss programmatically.

You can dismiss Notifications in two ways, One dismiss All Notifications or dismiss Notification By id

To dismiss all notifications call Notifications.dismissAllNotificationsAsync()

To dismiss Notification by id call Notifications.dismissNotificationAsync(localNotificationId)

Now Let's create a function which schedules Notification

scheduleNotification = async () => {
  let notificationId = Notifications.scheduleLocalNotificationAsync(
    {
      title: "I'm Scheduled",
      body: 'Wow, I can show up even when app is closed',
    },
    {
      repeat: 'minute',
      time: new Date().getTime() + 10000,
    },
  );
  console.log(notificationId);
};

The scheduleLocalNotificationAsync takes two arguments, first is notification object and second one takes schedulingOptions object. The options are whether to repeat or not and other is at what time notification should pop. In above example I'm using repeat every minute and then scheduling notification after 10 secs from current time.

Now you have scheduled notification, but what if you want to cancel a scheduled one. It's the same as dismissing notifications. You can dismiss all scheduled notifications by calling Notifications.dismissAllNotificationsAsync() or Notifications.cancelScheduledNotificationAsync(localNotificationId) based on notification id.

If you have any questions shoot me a direct message in twitter

Edit: Updated imports (Thanks to @majklfly )

Insert Delete GetRandom O(1) - LeetCode

Subramanya Chakravarthy — Sat, 13 Jun 2020 09:52:50 +0000

Design a data structure that supports all following operations in average O(1) time.

insert(val): Inserts an item val to the set if not already present.
remove(val): Removes an item val from the set if present.
getRandom: Returns a random element from current set of elements. Each element must have the same probability of being returned.

Algorithm:

The intuition here is whenever you want to achieve in less time, you have to sacrifice space. So we are gonna use extra space with hash table.

/**
 * Initialize your data structure here.
 */
var RandomizedSet = function () {
  this.nums = new Array();
  this.locs = new Object();
};

/**
 * Inserts a value to the set. Returns true if the set did not already contain the specified element.
 * @param {number} val
 * @return {boolean}
 */
RandomizedSet.prototype.insert = function (val) {
  if (!(val in this.locs)) {
    this.nums.push(val);
    this.locs[val] = this.nums.length - 1;
    return true;
  }
  return false;
};

/**
 * Removes a value from the set. Returns true if the set contained the specified element.
 * @param {number} val
 * @return {boolean}
 */
RandomizedSet.prototype.remove = function (val) {
    if(val in this.locs) {
        let loc = this.locs[val];
        let lastEl = this.nums[this.nums.length - 1];
        this.nums[loc] = lastEl;
        this.locs[lastEl] = loc;
        this.nums.pop();
        delete this.locs[val];
        return true;
    }
    return false;
};

/**
 * Get a random element from the set.
 * @return {number}
 */
RandomizedSet.prototype.getRandom = function () {
    return this.nums[Math.floor(Math.random() * this.nums.length)];
};

Introduction to Flutter and Dart

Subramanya Chakravarthy — Sat, 13 Jun 2020 03:35:53 +0000

First time looking at Flutter and Dart can be daunting. I will go through each and every line of main.dart when you scaffold your first Flutter application and explain what it is doing.

Prerequisites

You will need Flutter SDK. Installation instructions are here

Setup

To create a new Flutter app, run

flutter create flutter_intro

App naming should be Lowercase with undescores like my_app_name

This scaffolds many files necessary for android and ios.

Let's Start

The starting point is Located at lib/main.dart. Open the file

On the top you have

import 'package:flutter/material.dart';

Import in flutter is specified with package keyword followed by library or package name. In this case it's flutter and then followed by file name, here it's material.dart

material.dart contains android specific widgets like AppBar, FloatingActionButton, Dialog, DropDown to name a few. To explore all Material Widgets click here

There is also cupertino.dart which contains ios specific widgets

Next line is

void main() => runApp(MyApp());

Dart programs has an entry point called main. When you run flutter or dart file it first runs main function. In this case the main function is calling flutter specific function called runApp which takes any widget as an argument and created a layout which fills the screen.

In above example it is calling MyApp Widget to create a layout.

Widgets

In Flutter everything is a Widget. Flutter widgets takes inspiration from React.

Widget represents a visual component (or a component that interacts with the visual aspect of an application).

In Flutter we often use StatelessWidget and StatefulWidget

StatelessWidget

Some visual components do not depend on anything else but their own configuration information, which is provided at time of building it by its direct parent.

? Basically it means once widget only contains static data and won't change in it's lifetime

A basic StatelessWidget looks like this

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Text("FyndX");
  }
}

Any widget needs to override Widget build method in which you explain the UI of a widget tree, except low level widgets like Text, Container. If you don't know about override ignore it for now, I will explain later in another post. In above example, It's returning a primitive Widget Text contianing FyndX.

context is reference to the location of the widget in the widget tree. It can be thought of the address of the widget in a widget tree

In the main.dart file MyApp is returning MaterialApp. This widget can handle bunch of options like theming, routing, locale. The MaterialApp contains three arguments title, theme and home. Title takes a string which is used by the device to identify the app for the user. Basically in android recents screen you see the title. Next is theme which takes ThemeData widget that contains options like primaryColour, accentColour etc whcih are like global variables defined for you and can be used in any Widget.

The next argument is home which is basically a entry point for your app.

In the example it takes MyHomePage

StatefulWidget

Widgets that handle data which may change during it's lifetime. The data becomes dynamic

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

The MyHomePage is a stateful widget which means it can hold some state.

Constructors

In Flutter you create constructors by using class name as follows

MyHomePage({Key key, this.title}) : super(key: key);

It takes title and key as params

The next line is

final String title;

You might be wondering why final?

If you look closer MyHomePage is extending StatefulWidget and this beautiful StatefulWidget inherits Widget. The Widget is basically immutable and it stores mutable state in seperate State object.

A rule of thumb for StatefulWidget is use final for all instance fields.

createState

_MyHomePageState createState() => _MyHomePageState();

createState creates a mutable state for the Widget _MyHomePageState

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
    );
  }
}

Any Widget which is holding state should extend State Widget.

The _MyHomePageState contains one variable _counter which holds the state and a method _incrementCounter which can increment the state of the counter.

In order to update any variable of widget setState method is used where you update the _counter value to the desired value. If you update the _counter without setState flutter may not trigger the update.

In the widget to use the variable like _counter, use $ before like '$_counter'

The FLoatingActionButton contains the onPressed function which calls _incementCounter function to change _counter value

Thanks for Reading 😍

Destructuring in JavaScript

Subramanya Chakravarthy — Fri, 12 Jun 2020 14:39:57 +0000

Destructuring is introduced as one of the ES6 features. It plays an important role in everyday development as we all deal with objects and arrays. It improves readability of code

Let's say we have a object containing user details

let me = {
  name: 'chakravarthy',
  age: 23,
  social: ['twitter', 'github', 'medium'],
  props: {
    height: 180,
    weight: 63,
  },
  comments: [
    {
      'Dan Abramov': 'you are awesome',
      id: 1,
    },
    {
      'Ben Ilegbodu': 'Nailed it',
      id: 2,
    },
  ],
};

In ES5 to get name and age you would do something like this

let myName = me.name;
let age = me.age;

We can minimize the code using destructuring

let { name: myName, age, ...rest } = me;

So it's a single line of code and you are telling JavaScript to get name and age from me object and alias the variable name as myName and the rest variable will carry the object without name and age. Cool huh!

Did you know that you can assign default values. Let's say a new property isEmailVerified is introduced and you may or may not get it from the api you are calling so you can do something like this

let { isEmailVerified = false } = me;

so if there is no isEmailVerified key in object it just assigns false

Dynamic key destructuring also can be done

let dynamic_key = 'social';
let { [dynamic_key]: someVar } = me;
console.log(someVar);
// <- ['twitter', 'github', 'medium']

Accessing nested properties

let {
  props: { height },
} = me;
console.log(height);
// <- 180

Sort Colors - LeetCode

Subramanya Chakravarthy — Fri, 12 Jun 2020 03:41:02 +0000

Given an array of three group of elements sort them in order

Input: [2,0,2,1,1,0]

Output: [0,0,1,1,2,2]

One Simple way is to use Counting Sort algorithm

Algorithm:

initialize a bucket(array)
Loop through each element and increment the bucket[i]
Loop through the bucket and update existing nums

Code:

var sortColors = function(nums) {
    let bucket = new Array(3).fill(0);
    for (let i = 0; i < nums.length; i++) {
        bucket[nums[i]]++;
    }
    let bucketIdx = 0;
    for (let i = 0; i < nums.length; i++) {
        console.log(bucketIdx);
        if (bucket[bucketIdx] != 0) {
            nums[i] = bucketIdx;
            bucket[bucketIdx]--;
        } else {
            bucketIdx++;
            i--
        }
    }
    return nums
};

This can also be solved in one pass:

Algorithm:

initialize low and mid to 0 and high to nums last index
Now, consider mid as center pole
Whenever you encounter nums[mid] as 0, swap nums[mid] and nums[low] then increment low and mid. We increment low, so that next 0 will take that index and same with mid
Whenever nums[mid] is 1, just increment mid
Whenever nums[mid] is 2, swap nums[mid] and nums[high] and decrement high. This way we are putting all 2's at the end

/**
 * @param {number[]} nums
 * @return {void} Do not return anything, modify nums in-place instead.
 */
var sortColors = function (nums) {
  let low = 0, mid = 0, high = nums.length - 1;
  while (mid <= high) {
    if (nums[mid] == 0) {
      let temp = nums[mid];
      nums[mid] = nums[low];
      nums[low] = temp;
      low++;
      mid++;
    } else if (nums[mid] == 1) {
      mid++;
    } else {
      let temp = nums[mid];
      nums[mid] = nums[high];
      nums[high] = temp;
      high--;
    }
  }
};

Power of Two - LeetCode

Subramanya Chakravarthy — Tue, 09 Jun 2020 01:44:21 +0000

Given an integer, write a function to determine if it is a power of two.

Algorithm:

The intuition here is compare all the 2 ^ i values with n. If they are equal return true else if 2 ^ i is greater than n then return false

Code:

/**
 * @param {number} n
 * @return {boolean}
 */
var isPowerOfTwo = function(n) {
    let cur = 0
    let temp = 1
    while(temp <= n) {
        if(temp == n) {
            return true
        }
        temp = Math.pow(2, cur);
        cur++
    }

    return false
};

Alternative ways:

/**
 * @param {number} n
 * @return {boolean}
 */
var isPowerOfTwo = function(n) {
    return Math.log2(n)%1 === 0
};

/**
 * @param {number} n
 * @return {boolean}
 */
var isPowerOfTwo = function(n) {
    return n < 1 ? false : Number.MAX_VALUE % n == 0
};

Reverse String

Subramanya Chakravarthy — Fri, 05 Jun 2020 07:39:06 +0000

Write a function that reverses a string. The input string is given as an array of characters char[] .

Conditions:

Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.

Example 1:

Input: ["h","e","l","l","o"]

Output: ["o","l","l","e","h"]

Alogrithm:

Loop through the half of the array
swap elements
profit :-)

Code

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function(s) {
    let mid = Math.floor(s.length / 2);
    for (let i = 0; i < mid; i++) {
        // Basic Swapping
        let temp = s[i];
        s[i] = s[s.length - i - 1];
        s[s.length - i - 1] = temp;
    }
    return s
};

Alternative Approach

instead of using for loop, you can use pointers

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function(s) {
    let left = 0, right = s.length - 1;

    while (left < right) {
        let temp = s[right];
        s[right--] = s[left];
        s[left++] = temp;
    }
    return s
};