DEV Community: Suyash Vashishtha

How I boosted my App Performance up to 80%

Suyash Vashishtha — Mon, 07 Oct 2024 06:35:00 +0000

⌛ Recap Time

In my last blog I talked about how I Reduced my app size from 75MB to 34MB in just 2 weeks ( View ! ). But that's not all , I also improved overall performance of our app upto 80% 🚀.

Let's discover HOW !!

🕜 The Lore

After a simple round of walk through I discovered few of the top tier issues in our app leading to bad user experience and performance single headedly. What a day !

Main Villain - Whole App UI Frozen while generating Realtime response
Side Villain - Slow response time and No frame rates
Villain's lover - Too many Api calls
The Undead Army - Poor Error handling and crashes
Sufferings - More CPU usages and Server Costs
The Tarnished - ME !

Hence a lifeless battle of recreation of universe with a better world hope begins.

The Tahiti Plan ( But this time it works )

So I started with tackling the easier problems first as it is easy to ignore the great depression than fighting it on the moment.

1. ⚛️ Curse of React

The Wisdom and Curse of ReactJs is states. As we grow older in React we realize that lesser the states more better the application. Hence this particular piece of art was using 22 ( Yes goddamn 22 useStates) in a single chat screen where all you can do is send message and receive message.

Cherry on the top !
We were using Server Side event implementation for getting chunk-by-chunk data from server , which in case was word-by-word. So if you had a query which has a response of 100 words ( THIS IS LEAST OF RESPONSE ). It will actually receive 100 events.

So if you know the maths, 100*22 = 2200 re-renders each time we get a response.

Do I have to explain any further ? ( NO )

So I begin recreating the whole screen and took down the number to 6 states now. With better and smooth functionality as before.

That is 72% more performant that previous !!

2. ❄️ The Frozen Desert

Now after witnessing the Radahn of React, we can easily conclude that app is going to be freezing quite a lot right ?

Now even with 6 states, the main issue remains same it is 100*6. We are still hanging but with less states.

The main cause was, react dom getting updated on each chunk. So to tackle this we used "Batch Processing & Frame Rates Generation.

Hell Yeahh !

So basically instead updating the DOM each time we get a chunk, we were making batches of chunk and updating it in a fixed dynamic frame rate. These frame rates were called from OS so every device will have a different FPS as per system capacity giving the app more robust and compatible performance.

We captured a limited set of chunks in a batch and hold the response till the frame is released and repeated the same till all chunks are processed.

Hence instead of updating DOM 100 times we only updated DOM 3-4 times.

Now do the maths and calculate the performance enhancement for Homework !

3. 😊 Be a good listener !

It didn't work for me to get a girlfriend, but certainly worked to make the app much better.

Apis are cool and nice way to get data but using them wisely is a skill of your own ! Now this app was using this api to get the user status from backend. But the best part is it was using it every 3 seconds !!

I get it, developer had insecurities but this is not what they meant by bringing Work-life balance.

a) Fetching

In order to get the user data every time user uses the app, is to make the call at app start or every time app gets called from recent ( App state listener ). Calling it every 3 seconds not only uses Mobile resources into a infinite stream but also cause Server overhead .

Instead of getting 100 requests from 100 users, serve will get 100 request from 1 user. Doesn't sound very scalable and reliable to me.

As well as it creates untraceable memory leaks and usages which creates problem in longer usages.

b) Data Flow

Now after resolving that inhouse DDOS attack, I discovered that this app was using many apis whose data was getting ghosted in thin air ( Poor data handling ). Instead of caching data and using it again in same flow, the app was calling apis again.

I made sure data gets cached and flowed linearly to the flow and api is called only when needed for fresh instance.

Point to remember !

This resulted in better server health and less downtime for our backend due to too much api requests. As it costs company to run backend it is crucial to use apis effectively and only when needed

Not only for backend but for frontend as well, making extra api calls make it more system consuming as it has to do more HTTP handshakes and protocols every time you make a call.

3. 😎 Its not a Error if we don't acknowledge it !

One of the crucial thing for handling apis is, ERRORS. Consoling them to the logs isnt enough as it makes user's exp far worse than their good usages.

It is important to handle errors from any action using some kind of feedback system . It can be an Alert or Popup or Toast or anything. But user should know why and how it happened so that they can report it back or atleast get to know what they did wrong !

4. 💔 Her Memories

Gottacha homie ! She aint coming back but the memory leaks will. One of the main thing we forget while attaching any listener or Api call is to remove its instance after we close that activity.

This app had tone of it, api calls were getting called even after activity is closed or in background. Causing unnecessary CPU usage and resource hogging making app more laggy and hard to use.

Proper cleaning of these makes app more faster and less over heading.

5. Declaration of Performance

Now a basic way to use any asset is to import it and use it right ?

But do you know how it works ? Every time you default import an item it gets allocated into memory with an initialization. So if you import and declare a Image or component in 5 files like this

import Profile from '../../profile'

It will create 5 instances of it for the same thing !

Instead you should call all assets in one index file and import the object from it, that way it will only be declared once and will be used by Reference everywhere.

Hence reducing the memory usage to 4/5.

✅ Conclusion -

Your a good man Arthor ! ( Sorry I just completed RDR2 and it was a great great game ) .

With these changes the app performance boosted like hell with not just better mobile side health but as well as better Server side optimization.

The Store Rating went from 3.5 to 4.1 in just 1 week of using !!!

Remember it is not just a code but a story on how users interacts with it.

As a Frontend developer, the whole product depends upon us. No matter how scalable the backend is, the end product which user is going to use is out creation and it is the only thing they make decision on. So it is most important for us to give them a smooth interaction which leads to better business for the entire company.

🚀 Drop comments if you like the blog, or share it with your homies to let them enjoy it as well !

How I reduced my app size from 75MB to 34MB !!

Suyash Vashishtha — Fri, 27 Sep 2024 07:55:59 +0000

🕜 The Lore

So recently I was hired by Neurobridge Tech. as a Senior Mobile app developer to develop and lead end-to-end product development of their Flagship app Chanakya AI !

Wanna checkout the app?
Download Android
Download iOS

Now they already had the app released and users were using it quite a much. But the app size was around 75mb at that time. So naturally we had some issues with performance, scale, etc but we will discuss that in the next post.

Back to the lore, now as industry-standard a Simple app without any complex processing at the client side or 30-40 heavy animation screens, the app size should not be more than 25 MB; but as we are using Server side event handling and some advanced features, 35Mb is fine.

But here we are with a Big Chungas 75MB Asteroid Destroyer !!

The Realization....

I started by identifying where we were using spaces. After a good look ( I was traumatized by the code base ) I discovered that the whole app needs to be refactored with better code practices and more optimized manner
(Some things are beyond salvation )

The Recreation (But Better)

Hence after getting OCD from the old code base, I started making new architecture while referring to old ones.

Now here comes the main part -

1. 🛞 Reinventing Wheel

I noticed that previously we made different screens and components for the functionalities which were 80% the same ( Logged-in user and Guest user ) So I started by combining both flows to reduce the code base.

I deleted over 300 files of code and brought the whole code base to 75% less code ( 1500 lines of code to approx 350 lines ).

One of the things to always remember is that, if 2 or more modules have the same base functionality of over 70%, it is always better to keep them in a single source while maintaining a conditional execution.

2. 🖼️ The Collector

As development is a rapid thing in startups, we often forget to delete any unnecessary files or assets that might make our app heavy from shadows.

I analyzed and modularised whole images and assets and deleted the unused media leading to size reduction while bundling assets.

3. ♾️ Domain expansion - NPM Install

As more experienced you get, the more you realize that if it can be done manually then just do it.

Don't be that guy "Just one more module bro, I can remove it anytime I want"

Using Node modules for every little thing even when you can do it yourself isn't cool ! This Bad boi had 3.5GB of Node modules in it ( YESS the freaking GigaByte ) !

I don't know how it happened, and really not interested to know as well!

All I cared about was reducing it to minimal while recreating most of the functionalities and removing unused linked modules as native linked modules get bundled even if they are not used in JS code.

4. 🦚 Geeta Method - The Single Source of Truth

Often while developing a complex and interlinked application, we forget to make it modular and more globalized.

Previously we were using all values, methods, functions, etc by hardcoding them directly in place, which led to extra compilation and memory usage. Leading to a bad product.

I Modularized every reusable item ( variables, strings, functions, data handlers, etc ) to make sure everything gets initialized only once and then can be used by reference.

✅ Conclusion

With all this refactoring and carefully crafted code in 2 weeks, we were finally able to reduce the app size from 75MB to 34MB in stores.

A Smaller app not only runs faster but plays a crucial role in user traffic. Nobody wants a Big Chungus app with a slow process, everyone likes to keep it small, fast, and quick.

🎁 Bonus Content ( Cause why not )

While keeping the app size at best, I also made the whole app 🚀 80% faster in performance and reduced the Network request down to 50% ultimately leading to

Better server health
Less Loadings
Less Overheads
Less downtime
Less running cost
Scalability stonks
Low Latency
Fast UI/UX Flow

Sounds Cool right !?
Check out my next post to see how what I exactly used to make the system 80% efficient while keeping size and deps minimal!

Click here

Thanks for Reading my Homies!

Show some love in a comment or ask anything you like :)

👋 Until Next time!

How to Send Data while Navigating Back in React Native

Suyash Vashishtha — Mon, 30 Jan 2023 18:20:20 +0000

It is one of the most common issues in Mobile apps in React Native. We can send data from ScreenA to ScreenB in params but can't send data from ScreenB to ScreenA while navigating back!

But I have got a Hack!

In this blog, I am gonna tell you how to send data from ScreenB to ScreenA while navigating back.

Let's start by making Screen A

In ScreeA, I created a button to navigate to ScreenB with no data.

Setting up Screen B

Now in ScreenB let's make a similar button for going back, but instead of using navigation.goBack() we will use navigation.navigate() here.

Reason - In navigation.navigate() function, If the given path is present in the navigation tree, it will navigate to that path instead of creating a new one, else It will create a new path.

And as we know, ScreenA was already there in our navigation tree so navigation.navigate() will move to ScreenA which is technically our previous screen.

Now you might notice here, that the arguments are different from regular ones. Let me explain-

name - Screen/Route Name
data - data to be passed in routes
merge - true if you want to merge the data with the given screen.

With this, we can send data to ScreenA.

How to handle the new data in Screen A?

When we initialised the screen we didn’t mention any routes params data because there weren't any!
So how are we going to handle this new data in Screen A?

In ScreenA we will place a useEffect for new route data with a " ? " to check if the data key exists. Initially, the data key wouldn’t exist hence it will do nothing, but after navigating back from ScreenB it will get engaged and log the new data.

Basically we are forcing new route data into our ScreenA.

And POOF, we have our data from ScreenB!

Thanks for Reading !

React States works by Reference

Suyash Vashishtha — Mon, 30 Jan 2023 09:12:59 +0000

Today I learned something cool in React. I was trying to update a post in the list of Posts ( State ) but even after changing the element's key value, it wasn't reflecting in UI ( but showing updated data in the console log. I spent hours trying to figure out why it is happening and according to JS, I was doing the right array manipulation.

So I did some research and a GitHub thread finally guided me to the right track, comes out that the React States are used by references not by value.

"React compares by reference, in the setState(newState) call, you are just setting the state to the same list. Changing the contents of the list doesn't change the reference to the list. When the next state is the same as the old state, React bails out on doing any work.
One quick thing you can do is slice the array like this:

const newData = oldData.slice(0);
newData[0] = 'something'
setState(newData);
"

GitHub Thread

Here slice() returns a new array based on the given condition, so it breaks the state reference and creates a new array reference. Now React will take the new array as a different entity and will update the state.

React is a beautiful thing ❤️

How to show Loading wrapper in ReactJS / React Native while api call !

Suyash Vashishtha — Thu, 27 Oct 2022 21:17:50 +0000

No Introduction, Let's cut to the chase

You have an API and a component to show with data provided by API. Now the problem is, that component gets called before the API call is completed resulting in throwing an undefined or null error while calling children keys in a component.

To Resolve this we use something called a Loading Wrapper. Now, this method works on both React and React Native as it uses common useState and Reacts LifeCycles to work.

Step 1 - Maintaining a Loading State

Let's start by making a loading state to check and update our application whenever the loading starts and ends.


const [isLoading, setIsLoading] = useState(false)

Now we will update it to true when the call starts and false when the call ends.

Step 2 - Calling APi with Loading State

In this step, we will simply update the isLoading state to true and false to tell our application the current loading condition.


useEffect(()=>{
     getData()
},[])

const [isLoading, setIsLoading] = useState(false)
const [data, setData] = useState(null)

const getData = async()=>{
   setIsLoading(true)

   await axios.get(url).then((res)=>{
           setIsLoading(false)
           setData(res.data)
  })
  .catch(err=>{
           setIsLoading(false)
  })
}

What the hell did you do here ????????

Well I started by setting isLoading to true when our API call started ( just before Axios) and then to false when our promise finally ended ( either with success or failure )

Step 3 - Showing Loading wrapper based on this api call

Now our application knows if the API is loading or not, let's move to the rendering part.

We will use conditional rendering to render the diff UI based on diff cases.


return(
   !isLoading ?
      data!==null?
        <YourComponent data={data} />
      :
       <h1> Can't connect to server ! </h1>
   :
   <span> Loading... </span>
)

Here, we are first checking is isLoading is false, which means the API call has ended. So we will move to render our component. If isLoading is true it will show a span tag with text as Loading...

Then, we are checking if data!==null which means the API call has been success full and populated with backend data. If it is null that means the API call is failed and there is some error in the API call.

It is not really a part of Loading Wrapper but it is most commonly used with loading states to avoid crashes and undefined errors.

So Now our loading wrapper is ready, and each time the getData() function gets called it will again trigger the loading and our render function will act accordingly.

❤️🧑🏻‍💻Thanks for reading , If you liked this blog please drop a like and comment !

Looking for open source contributors in React Native !

Suyash Vashishtha — Mon, 17 Oct 2022 10:47:34 +0000

I am looking for open-source contributors to work with me on my cute little UI Kit for react-native.

Introduction

🙋🏻‍♂️ Hi, I am Suyash. I am React Native Developer from India and working on a small-scale UI Kit for react native.

I aim to provide some miscellaneous Ui elements that are either ugly or not available in react native default element collection. A common example is Alert [ Ugly AF in the android system ].

So why would you use my UI KIT when others are available huh?

Well, the answer is, I am trying to make all these elements without using any third library or dev dependencies so the support line would be maximum and you don't have to install some other stuff that u will never see in the whole dev.

Steps to participate

Note - Use the given theme or add the colors if u think that would look cool, but don't change the previous colors.

Fork The Repo from here
Start developing something
Submit a PR with a proper description of what your magical ✨ div ✨ does and also include the screenshots ( Gotta check the aesthetic ).
If everything goes right, I will merge them asap.

Don't have an Ideas right now ?

I gotta you, try to make these -
1. Alert Pop up ( Done )
2. Vertically scrollable tabs with onScroll tab Changing
3. TextInputs
4. Dropdown

Either way, you are always welcome to use the KIT, provide review or have a nice talk about it ☕️

How to get Girlfriend as a Developer

Suyash Vashishtha — Wed, 07 Sep 2022 23:02:13 +0000

undefined is not an object

**Thanks for Reading !* *

CamelCase to normal String in JavaScript

Suyash Vashishtha — Wed, 07 Sep 2022 22:49:59 +0000

In this post we will see how we can turn any camelCase string to normal string in JS JavaScript..

Step 1 - Breaking the Camel Case

Lets take an example - "checkThisOutBro"

Now we want to break this camelCase string to "Check This Out Bro".

So, In order to do this we will use a regex



const camelToFlat=(camel)=>{
    const camelCase =camel.replace(/([a-z])([A-Z])/g, '$1 $2')

    return camelCase
}

this will give us ```check

This Out Bro


hmmmmm, well atleast it is now a simple string, lets improve it better

### Step 2 -  Taking every letter out from this string...

So after getting ```check

 This Out Bro

``` we can use split() function with " " as args to break it down in an array with each word as element.

```javascript



const camelToFlat=(camel)=>{
    const camelCase =camel.replace(/([a-z])([A-Z])/g, '$1 $2').split(" ")

    return camelCase
}

This will return [ 'check', 'This', 'Out', 'Bro' ] as output and we now have an array of words in that camelCase.

"Wow Suyash you said we will be changing camelCase to string , how come it is an array now huh ?"

Just wait a min, we will make it a string again but better !

Step 3 - Making each First letter capital this time !

Now as we have an array of words for a string, we can simply run a loop and make every letter or char at 0 index upperCase.




const camelToFlat=(camel)=>{
    const camelCase =camel.replace(/([a-z])([A-Z])/g, '$1 $2').split(" ")

    let flat =""

    camelCase.forEach(word=>{    
        flat = flat + word.charAt(0).toUpperCase() + word.slice(1) + " "
    })  
    return flat
}

After doing this, our function will take every word in camelCase array and convert it's first letter ( at 0 index) capital and join it with others to make an string

"POOOOOF ! Magic"

And now our output will be Check This Out Bro

Snippet Sauce link for code snippet !

This is commonly used while rendering keys of an object in applications ( Objects.keys(yourObject) returns array ). And generally keys are in camelCase so you want them to be a normal string but with a dynamic way..

If you liked the blog please drop a ❤️

Loading Modal in React Native with Activity Indicator

Suyash Vashishtha — Mon, 22 Aug 2022 20:48:00 +0000

Loading modals are basically a wrapper to tell our user that something is happening and restrict them to tap anywhere else.

Common example - while uploading something..

It is a most common used widget in Mobile dev industry and I don’t know why React Native doesn’t really provide one.

Edit - I have made a package for it as react-native-loading-modal , In case you want to use it.

So that's why we are making a fully customisable Loading Modal in React Native using Activity Indicator from react-native

JSX Code for Custom loading modal

don’t worry code is available at here

Styling for Custom Loading modal using Stylesheet

That's it, now you can call your Loading modal simply by doing



<LoadingModal modalVisible={true}/>

or with custom task or label



<LoadingModal modalVisible={true} task={'Your task'} />

That's it for this blog ❤️, If you guys want source code here's the link to the code website -> click here

Let me know your thoughts comments and share it with your friends !

With love Suyash ❤️🧑🏻‍💻

How to open UPI Apps in React Native | UPI Integration with React Native

Suyash Vashishtha — Wed, 13 Jul 2022 06:27:40 +0000

This post is going to be more specific for Indian clients or Indian Developers as it targets UPI payment (Unified Payments Interface) which is used in India Only.

In India majority of people use UPI for transactions as it is much easier to use.
But what if we want to integrate it to our app ? To be honest it is quite simple but tricky solution.

First, let's see How UPI generally works using QR Code

As we all know QR codes are the main method of making transactions in UPI. But how does it work ?
Well it works on UPI id and a link which is encoded inside the Qrcode for that user.
When we scan the Qrcode our scanner takes the link and process it with desired UPI App with the help of Deep Links.
And boom it opens our Phone pay or Google pay app with transaction confirmation screen.

Deep Links - Not going all in depth for this blog, but deep links are simply some local urls which points to a specific app with given parameters

Taking a QR Code example

Let's take my UPI QrCode for example

Now scan it with a local scanner or decode it using online scanners and extract the UPI Link

It will look something like this.

upi://pay?pa=suyashvashishtha@axl&pn=Suyash%20Vashishtha&mc=0000&mode=02&purpose=00

Now all we have to do is , open this link with React Native Linking APi.

Opening UPI with React Native

As of now we have a UPI link and a React Native App ( Expo or Cli, doesnt really matter )

Now in order to open our UPI Apps all we have to do is, call Linking api from react-native and pass the url to it using OpenURl() method.

*Code Snippet - *

You can copy the code from here.

.
That's it , It will open a sheet showing all the UPI apps available in the mobile and which ever you will choose will redirect you to their payment screen for confirmation

Thanks for reading this blog, I will keep uploading more blogs to help our dev community ❤️.

Comment | Share | Like

How to make Floating animation in HTML CSS

Suyash Vashishtha — Sun, 26 Dec 2021 09:08:03 +0000

Animations are one of the most attractive things when it comes to Websites. Even having some little minimalistic animations can make your website much more soothing and attractive.

In this blog, we will see how to we can make a little floating animation in HTML CSS only.

Example-

This gif is from my React JS OTT webapp Link here :)

Looks cool enough for loading screens right ? You can also use it for some on page element animations.
``

Let's jump into Development part !

- HTML

Put a simple image inside of a div. This image will be the one we are going to make a float.

- CSS

Design your parent div with a flex (recommended way but totally optional).
Then make a @keyframe with an animation -

@keyframes floater {
  0%{transform: translateY(-10%);transition: ease 0.5s;}
  50%{transform: translateY(10%);transition: ease 0.5s;}
}

Now connect your animation with you're image class. And put default translateY to -10% and transition ease 0.5s for smooth animation

.float-area{
  height:100vh;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

.floating-img{
  transform: translateY(-10%);
  animation: floater 1.5s infinite;
  transition: ease 0.5s;
  width: 80px;
  height:80px;
}

Source code -

And Poof ! You're image is floating like a charm !

Now go on and play with the values and make it more interesting according to your needs :)

Thanks for reading my blog! Please drop a Like and Comment if you found it useful

How to get Freelance Clients from LinkedIn ?

Suyash Vashishtha — Mon, 20 Dec 2021 14:27:58 +0000

Previously I wrote a blog about How to get your First client as a Developer., in which I talked about pitching sales on LinkedIn. But the main question is How to do that?.

Well in this blog, I will talk about how I scored a GIG on LinkedIn using my strategy

1. Building Profile

Yeah, I know you have created your account and uploaded a fully charming profile pic, and wrote a self-awarding bio for yourself. But that's not enough!.

A Profile is not for showing how good looing or attractive you are, but instead it is about how good you can showcase your services and skills.

- Profile picture

"Ohh yeah, I uploaded my profile pic from that party and I look super cool alright!."

That's one of the Biggest Mistakes beginners make while building up their LinkedIn profile. You shouldn't upload any type of casual photo as your profile pic, because it represents your mindset about your work ethics.

It is the first thing a client seeks, your profile pic should speak about your mindset and behavior towards your work!.

A profile pic from the top of your head to your chest will do just fine. And also keep an eye on good clothing, It can either be a plain T-shirt or a work coat or blazer but not some party costume.
``

- Cover photo

Well, it is pretty much clear by the name, a Cover photo is a big banner that shows up at the top of your profile. A good way to decorate is to put all the services you provide in symbols and logos.

For example - I am MERN STACK Developer so my Cover looks like this -

It unconsciously sends a message that this guy is Full stack developer and has these skillsets.

Images play a Big role in profile as they unconsciously tell people what are you and what you can do.
``

- Title and Bio

The perfect way to write a Title is to Write services your Provide. Something Like this -

Frontend Developer | React JS | React Native | Mobile app developer

It is one of the major factors in setting up your profile. Whenever someone searches for these services, your name will pop up with these inputs and tell what you can do just below your name; so the potential client will get a clear hint that you might be the right guy for his Job.

In Bio you should write a brief 2-3 line paragraph about you and what you can do. But here is the catch, while in interview HR always asks a common question Tell me something about yourself ?.

Now, most people think it is time to tell a good flashback story about yourself to make a good impression in front of HR and the boss.

Well, life is not some reality show like India Got Talent or something. Telling how you did something good or struggling wouldn't make any sense. When someone asks you this question, the answer they are excepting is How are you valuable to them or what you can do for them.

So in order to write a perfect bio, you must write 2-3 lines about how you love your work and how are you passionate about it. And then list all the tools and software you use to provide those services.
``

- Accomplishments

In the accomplishments section, list all the personal projects you made while learning those awesome skills you have. Remember it doesn't have to be 10-12 projects. 3 Best projects are sufficient-enough to tell others how are you a good fit.

- Experience

Considering you are a beginner, you might not have a list of experience in your hand. So in that case you have to make Posts to tell them how you made those 3 Best Projects and how you know you are the right fit for the job.

With these points Profile Building is Complete.
``

2. Creating Posts

No this is not Facebook, I know you have a great idea of how to make posts and upload pictures on social media like Facebook and Instagram.

But here it is a little different, by a post I don't mean your personal life and happy memories.** As a part of the professional community your post should talk about your professional life instead of personal.**

Use your posts to tell the world about your achievement and all the things you have done in your Developer journey.

Make Carousals of your Projects, how you build them, what tech you used to make it real etc...

Use the right hashtags, grammar, and a noble professional caption telling how you did it. Then share it with the world to let them know there is a Diamond in a Coalmine.

*These posts are one of the biggest mediums of attracting potential clients with the same requirements. *

3. Making Connections

Connections are simply friend requests but in a professional way. More connections mean more chances of getting a client.

It is not some calculus, it is simple math, more the connections you will have, the more views you will get on your Posts. And more chances of getting leads.

Make connections with people having the same Skillset or topics and HRs from different companies. What if they get a client but they don't have time to do their work? Yeah, there is a chance they will forward it to you.

So keep making connections because once Tim Sanders said
“Your network is your net worth.”
``

4. Cold mail and messages

Ok, let's put it in simple words. Cold mailing simply means messaging potential clients from the front or without any prior contact.

Suppose you have a hint that maybe that guy might have a need for a graphic designer for his business, so instead of waiting for him to ask you for the gig; you make the first step and ask him if there is any work available for Graphic Designers ?.

We have to do the same but on LinkedIn. Now after doing it for months and going with Hit n Try, I found a strategy for cold mailing. With the right target and right weapon, you can shoot a Flying eagle in his eyes.

Ok ! that was a bit too much...

But yeah, I found a perfect opening for beginners to get their clients easily.

Step 1 - Look for a company with low employees count.
Companies with a low employees count prefer freelancers more than full-time employees to save their expenditures. So chances of being selected automatically become high. Also as the employee's count is low that means the company is still in their initial stage that means it is easier to get work due to low standards bars.
Step 2 - Follow the company and make a connection with its HR or any senior. Ask them if there is any work for your niche and start the sales pitching.
Step 3 - Don't show them that you are in desperate need of work. Make an impression like you are casually browsing for work, but also make sure they think you have a genuine interest in the project.
Step 4 - After getting the work, try to complete it before the deadline with out-expectation work. This will increase your chances of getting another order from the same client.
``

5. What next ?

Now repeat the same strategy with a different topic and companies/clients. And make sure you leave a good impression at the end of order completion for any future work.

I hope it gave you a good idea of how to pitch sales/leads on Scary LinkedIn.

I would love to hear your thoughts in the comments below.

DEV Community: Suyash Vashishtha

How I boosted my App Performance up to 80%

⌛ Recap Time

🕜 The Lore

The Tahiti Plan ( But this time it works )

1. ⚛️ Curse of React

2. ❄️ The Frozen Desert

3. 😊 Be a good listener !

a) Fetching

b) Data Flow

3. 😎 Its not a Error if we don't acknowledge it !

4. 💔 Her Memories

5. Declaration of Performance

✅ Conclusion -

How I reduced my app size from 75MB to 34MB !!

🕜 The Lore

The Realization....

The Recreation (But Better)

1. 🛞 Reinventing Wheel

2. 🖼️ The Collector

3. ♾️ Domain expansion - NPM Install

4. 🦚 Geeta Method - The Single Source of Truth

✅ Conclusion

🎁 Bonus Content ( Cause why not )

Thanks for Reading my Homies!

How to Send Data while Navigating Back in React Native

But I have got a Hack!

Let's start by making Screen A

Setting up Screen B

How to handle the new data in Screen A?

React States works by Reference

How to show Loading wrapper in ReactJS / React Native while api call !

Step 1 - Maintaining a Loading State

Step 2 - Calling APi with Loading State

Step 3 - Showing Loading wrapper based on this api call

❤️🧑🏻‍💻Thanks for reading , If you liked this blog please drop a like and comment !

Looking for open source contributors in React Native !

Introduction

So why would you use my UI KIT when others are available huh?

Steps to participate

Don't have an Ideas right now ?

Either way, you are always welcome to use the KIT, provide review or have a nice talk about it ☕️

How to get Girlfriend as a Developer

*Thanks for Reading ! *

CamelCase to normal String in JavaScript

Step 1 - Breaking the Camel Case

Step 3 - Making each First letter capital this time !

Loading Modal in React Native with Activity Indicator

JSX Code for Custom loading modal

Styling for Custom Loading modal using Stylesheet

How to open UPI Apps in React Native | UPI Integration with React Native

First, let's see How UPI generally works using QR Code

Taking a QR Code example

Opening UPI with React Native

How to make Floating animation in HTML CSS

Let's jump into Development part !

- HTML

- CSS

And Poof ! You're image is floating like a charm !

How to get Freelance Clients from LinkedIn ?

1. Building Profile

- Profile picture

- Cover photo

- Title and Bio

- Accomplishments

- Experience

2. Creating Posts

3. Making Connections

4. Cold mail and messages

5. What next ?

**Thanks for Reading !* *