DEV Community: Salman Shaikh

Why not to start freelancing

Salman Shaikh — Thu, 03 Nov 2022 16:47:16 +0000

Hello all,

Recently, Many newbie programmers have been coming to me for freelancing advice. My first response to them is, "Don't do it" I know it sounds weird at first but trusts me. I have an explanation for this.

Reasons for becoming a freelancer:

Insufficient job income
Manage premium expenses
Urge to try something new

If you belong to 3rd point, You should skip this article. Go ahead. For others, freelancing is not a good idea.

Why not start freelancing for money?

Tough Competition
De-moralizing

Tough Competition

A lot of competition going on in the current freelancing market space. Unless you have a referral or something, it's hard to find a client. I will tell you why:

The current biggest freelancing marketplaces are:

Fiverr
Upwork

Both have a large number of freelancers. Let's say you enter these marketplaces.

Fiverr

Fiverr allows 10 bids per day on buyers' requests (which is going away). The catch is you cannot see all the offers. Because when you join Fiverr, You will be a "Level 0" seller.

Fiverr allows a buyer to show their requirement to the specific level of sellers only. Most buyers prefer at least a "Level 1" Seller. So "Level 0" sellers won't be able to see those requests.

From my observation, "Level 0" Sellers can see a maximum of 10-15 buyer requests. Whereas "Level 1" Seller can see a minimum of 1000-1200 Buyers Requests.

I guess now you can see why it's hard to get clients on Fiverr as a newbie freelancer.

Upwork

Upwork doesn't have these types of filters like Fiverr, But they do have something else. It's called Connect.

We can use it to bid on projects. They give you 10 Connects for free every month. But after that, you have to buy connect from Upwork. Applying on a listing takes 3-4 connects on average.

So, it's not easy to get clients on Upwork either.

I am not saying these platforms aren't good/you shouldn't use them. You can use them when you are ready to.

De-moralizing

Tough competition leads us to de-moralizing. Even after doing great in your work, You start feeling worthless and inefficient to work.

We don't see how much time and experience it takes to get into freelancing and start comparing ourselves to others with better experiences and knowledge.

Also, they take 20% of your income ;-;

My Advice

The current biggest freelancing marketplaces are full of competition because many freelancers are looking for jobs and are more experienced than you.

The current time is to gain knowledge and experience. Don't struggle to get clients. Freelancing does teach so many things. But that is possible when you have clients. I am not saying you cannot. I am saying it's hard because of (experienced) competition.

It's not the time to start freelancing. But to learn skills, harness technologies/frameworks, and gain experience. After that, you will be ready to jump into the freelancing world.

"If you are willing to fight a battle, Never go unprepared."

Good Bye, and Don't worry, you got this.

Journey to functional approach

Salman Shaikh — Thu, 17 Feb 2022 09:35:17 +0000

Hello all,

It's been a while since I made Monkeytype clone in React. I wrote the whole app in the Class Components approach because I was a newbie at that time, and it was the easiest way to make a React app. But after some time, I understood why it's not the best approach.

Why functional instead of class?

In Class-based components, You can't use one component's function in other component because it integrates functionality with UI very tightly.

States in class-based components are mutated using this.setState(). Some of you might have observed the problem here. For others, "this" is the problem. It prevents/makes it hard to mutate the state when the helper function is not in the same scope.

Class-based components causes the following issues:

Lesser Reusability

For example, If we have counterIncrement function in a class component. It'll definitely use this.setState() to increase the counter. We can't use that counterIncrement in any other component because it's bound to that class only.

Duplication

We have to write same counterIncrement function in all the other components or pass it somehow as a props and that creates lots of duplicate code everywhere.

Increased Complexity

Just because we're passing and creating functions it creates confusion that what function is doing what.

Beginning of the journey

Recently, I re-wrote the entire app using Function Components. I noticed that I was passing so many states as props.

Result component before state management:

<Result
    words={this.words}
    typedHistory={this.state.typedHistory}
    timeLimit={this.state.timeLimit}
    spaces={this.words.indexOf(this.state.currWord)}
    resetTest={() => this.resetTest()}
/>

At that point, I knew that I required a state management library. So I chose redux because it was co-developed by React team members. It made everything super easy to manage. On the other hand, I had to re-write every core function to integrate redux in the app.

Result component after state management:

<Result />

Looks so clean ✨.

So, How I'm passing props now? Answer to that is useSelector() hook from react-redux library. It makes fetching state from any component piece of cake.

Redux word seems scary, but it's not even that horrifying if you know what you're doing. I enjoyed working with the react-redux library. There were some hiccups due to typescript, but everything else worked as expected.

Also, I noticed some performance gain after switching to the functional approach. It might be just a placebo, but the typing-test feels much smoother than before.

I encourage people to use the functional approach when making any react app. It will make your code easy to maintain in the long run.

You can check out the new and fresh typing-test code here:

slmnsh / typing-test

Typing test website build with React

typing-test

NOTE: This is my recreation of already existing monkeytype

This site is currently live: Visit Here

How to run locally

git clone https://github.com/salmannotkhan/typing-test.git
cd typing-test
npm install
npm start     # to start local server at `localhost:3000`
npm run build # to create production build run

Got new ideas?

Did you know? You can add your theme and wordlist ideas into typing-test.

Here is how you can do it:

To add new theme:

Add theme colors into src/stylesheets/themes.scss in following format:

.theme-name {
    --bg-color: background-color;
    --font-color: font-color;
    --hl-color: highlight-color;
    --fg-color: forground-color;
}

Note:
highlight-color is used for caret, wrong characters, timer, selected and onhover colors
forground-color is used for correctly typed characters
Using hex codes for colors is recommended

To add new wordlist:

Rename your wordlist as <wordlist-name>.json and place it inside src/wordlists.

Important:
The JSON file should…

View on GitHub

Salman Shaikh ・ Aug 5 '21

#react #javascript #typescript #showdev

typing-test: monkeytype clone in ReactJS

Salman Shaikh — Thu, 05 Aug 2021 19:08:44 +0000

Hello all,

I wanted to make a typing test website with ReactJS and JavaScript. So I looked around for good typing test website and one website came to mind monkeytype. it's quite popular for the minimal look. So I thought why not make clone of it.

After adding features and polishing the logic I thought about switching to TypeScript for experiment.

First I kept tsconfig.json settings to very loose and then tried tightening them step by step.

It was smooth three phase process (suggested by Mike North in Frontend Masters) for converting existing JavaScript codebase to TypeScript.

After 2 weeks of writing and refactoring, typing-test is ready to use for everyone.

If anyone wants to add new theme to typing-test take a look at this.
All contributions are welcomed :)

Features:

Colorful multiple themes support
- default
- mkbhd
- coral
- ocean
- azure
- forest
4 time limits (15s, 30s, 45s, 60s)
Smooth cursor
Instant Tab restart
Previous word correction

Screenshot:

Visit Site

Source Code

Unofficial Fiverr API: New way to get your Fiverr Data

Salman Shaikh — Mon, 02 Aug 2021 10:52:04 +0000

Hello all,

I'm a freelancer on Fiverr and a Python Developer. Recently, I thought about integrating Fiverr reviews on my portfolio.

I started digging for an official or already existing API that I can use to fetch and show them on my portfolio. But I didn't find any, so I took this opportunity to build one.

Presenting Unofficial Fiverr API 🎉

Features:

Get seller details 🙋‍♂️
Get seller gigs details 💼
Get seller reviews 🌟
- Group by buyers
- Filter by Impression
- Sort by time or relevance
- Limit no. of reviews(added in v1.2)

It's built with Python FastAPI and hosted on Vercel.

Now you can integrate your Fiverr reviews into your portfolios or anywhere.

API Documentation

Source code

Checkout my other projects