Forem: Wasim A Pinjari

No Backend: How This Firebase Alternative Changing The Game

Wasim A Pinjari — Wed, 13 Sep 2023 15:09:12 +0000

Traditional Approach

Building a backend to talk with databases and manage authentication is a typical way of going about building websites or apps, but it doesn't have to be that way.

Building the backend is hard and requires writing a lot of code. Not only do you have to write code to communicate with databases, but you also have to write code to deal with authentication and authorization (and make sure to keep up with the security updates & patches of whatever library you are using) and if you do decide to use OAuth then you have to write even more code to handle different OAuth providers.

In some cases, you also have to write code for storage buckets to handle the user files.

Superhero Supabase Come To Rescue

Supabase eliminates the need for the backend completely out of the picture by providing simple-to-use API directly on the front end. No backend, no headache. You can have a backend if you want by choice. Supabase just removes the compulsion of it.

Supabase is an open-source Firestore alternative that uses Postgres (an open-source relational database management system) behind the scenes.

Supabase service allows developers to create a backend with a Postgres Database on the fly. You don't end up writing all the complicated code manually and have everything auto-generated for you.

It doesn't even matter which database they are using since you never have to deal with it directly. You can use simple API in the front end to request and receive data from the server where data is hosted.

Supabase abstracts all the complicated stuff and makes it super easy for you to work with everything that the backend normally has to deal with. With Supabase you can store data in tables, and files in their storage buckets, and have a login and sign-up authentication and authorization setup including OAuth providers (social logins) done easily.

How Supabase Works

The main concern of people using the Supabase service is getting hacked.

Since no backend also means code in the front end will be exposed to the world. The way Supabase works is that they provide you with a Supabase URL and a key to create a client.

Both of this information can be shared publicly without any problem since by default the Supabase RLS (Row Level Security) Policies are enabled. These policies let you define who can access your data and how much. This includes their ability to read, update, modify, and delete data.

You can deactivate it if you want (which is not recommended).

Supabase Features

Keep in mind these are current features. Since the Supabase team is working hard to bring more awesome features to you in the future.

Database: Supabase comes with a Postgres database, with extensions and daily backups. You can define: a) custom functions based on browser calls and b) triggers to handle database changes. You can also leverage Webhooks to send database changes to any external service, build search functionality using Postgres Full Text Search feature, encrypt sensitive data and store secrets using Supabase Vault Postgres extension, and use migrations to develop locally and push your changes to your production database.

Auth: Supabase helps you build email logins, passwordless logins,
social logins, and phone logins. You can control the data each user can access with Postgres RLS (Row Level Security) Policies. You get access to Serverside Auth Helpers for implementing user authentication and use Auth UI Kits to build login and registration pages with custom themes.

APIs & Client Libraries: Supabase autogenerates RESTful APIs from your database and GraphQL APIs using Supabase's custom Postgres GraphQL extension. You can receive your database changes and send messages between connected users through websockets. You can synchronize shared states across your users, including online status and typing indicators. Use official client libraries for JavaScript and Dart, and unofficial libraries supported by the community.

Storage: Supabase makes it easy for you to store and serve files. Use resumable uploads to upload large files. Cache those files using the Supabase CDN. And transform images on the fly.

Edge Functions: Supabase allows you to write globally distributed TypeScript functions to execute custom business logic.

Project Management: Manage your projects programmatically & use Supabase CLI for local project development and deployment to the Supabase platform.

That's it :)

Thanks for reading!

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link

Prop Drilling, Component Composition, Types & API

Wasim A Pinjari — Thu, 10 Aug 2023 07:54:00 +0000

Yesterday I learned some new concepts in React.

Let's start by:

Prop Drilling! 🤯

You know you're Prop Drilling when you're passing props deep down the nested component tree. The intermediary child components of the parent component end up receiving the props that they don't even need and are only acting like a middleman to pass the prop further down the nested tree.

Sometimes it's fine to pass props down one to three levels down the nested tree but it can get worse when you're passing props down to five to ten levels deep.

This also creates another where intermediary components end up receiving too many props making it harder to understand the component itself.

The way to fix this problem is through:

Component Composition! 😀

The Component Composition is an idea in which you pass other components as props you can do this directly (which is often the preferred way) by setting a prop name or indirectly by enclosing the child components inside the parent component and using the children's prop to receive the component.

The Component Composition also makes it easy to reuse a component. Let's say you create a box and put a content component inside it. You can't reuse that component of the box to pass other content because you embedded the content inside the box component.

But with Component Composition it acts as if you created a hole inside a component and you can pass other components to fill that hole thus making the component highly reusable.

function NonReuseableBox() {
  return (
    <div className="box">
      <Content />
    </div>
  );
}

function IndirectReuseableBox({ children }) {
  return <div className="box">{children}</div>;
}

function DirectReuseableBox({ element }) {
  return <div className="box">{element}</div>;
}

function App() {
  return (
    <>
      <NonReuseableBox />
      <IndirectReuseableBox>
        <Content />
      </IndirectReuseableBox>
      <IndirectReuseableBox>
        <DifferentContent />
      </IndirectReuseableBox>
      <DirectReuseableBox element={<Content />} />
      <DirectReuseableBox element={<DifferentContent />} />
    </>
  );
}

Another interesting I learned is how to make:

Component API 😎

Whenever making a component we need to think about it as someone who makes the component: the component creator and someone who uses the component: the component consumer

Even if both are you. But there will be a time when you're working with a team and you need to build a highly usable component.

You need to strike a good balance in how many props you provide to customize the component. Too few props make the component not really useable and sometimes useless and too many make it complicated and hard to use.

Along with providing props, you need to set good default values such that a component is easy to use. Users may want more control over the style and you can provide them a prop to add additional style class to the component.

If you're using state in prop then you make sure you provide a state setter function that receives the value of the state inside the component such that users can use that to manage the state in their app.

Let's say you make a slider component that allows the user to set a value and you're using state to store the value. Now if a user is using that component then how can they figure out what the current value is? If they can't then your component is useless to them. They can't perform any operation based on the slider value.

Your component is a presentational component to them. This brings us to our next concept:

Components Types 🥰

Components can be classified into various types but in a broader sense they are of three types: Presentational/Stateless Components, Stateful Components & Structural Components

Presentational/Stateless Components: These components don't do anything in and of themselves they are just there for presentation purposes. They don't have any state in them and receive data through props thus we can also call them Stateless Components.
Stateful Components: These components have state (data) and related logic inside them thus we can also call them Stateful Components.
Structural Components: These components are there to provide structure. These structural components can be huge or small. For example, the App component contains the whole app, whereas the Nav component may contain the logo, search, and nav links. They are different from the above component types because they only provide structure for these components to be inside of them.

Splitting Components ⚡

You may start out writing your app component but naturally, you will split it into different sub-components.

Just like we discuss component props having many too-small components may be useless and having too large components may be too complex and hard to understand due to complexity.

You want to find a balance here as well while splitting large components into small sub-components. You know you need to split the component when:

You're passing too many props
Your component is becoming exceedingly large
You're getting confused
You're thinking things don't belong together and it's logical they need to be separated for better clarity

Adding Type-Checking 😋

Let's get back to our component API.

In React you can add static type-checking to make sure your user of the component doesn't pass values that are not acceptable. For example, let's say your component can accept color prop then you don't want your user to pass a number as value. You want to provide warnings to your user to avoid bugs in the codebase.

For this type of type-checking, React has a built-in native type-checking. But if your project is large it's preferred to use TypeScript instead of JavaScript to do these things.

To add type-checking you have to import it and then add it to your component (see below example).

Here is the whole component I wrote for demonstrating what we learn by far about component API:

import { useState } from "react";
import PropTypes from "prop-types";

Slider.propTypes = {
  count: PropTypes.number,
  defaultCount: PropTypes.number,
  className: PropTypes.string,
  color: PropTypes.string,
  size: PropTypes.number,
  message: PropTypes.array,
  onSetRange: PropTypes.func,
};

export default function Slider({
  count = 5,
  defaultCount = 0,
  className = "",
  color = "#4c8bf5",
  size = 24,
  message = ["Avoid", "Bad", "Average", "Good", "Amazing"],
  onSetRange = () => {},
}) {
  const [range, setRange] = useState(defaultCount);

  const wholeSliderStyle = {
    display: "flex",
    gap: ".8rem",
    color,
    fontSize: `${size}px`,
    lineHeight: 0,
  };

  const sliderStyle = {
    display: "flex",
    alignItems: "center",
  };

  return (
    <div style={wholeSliderStyle}>
      <input
        style={sliderStyle}
        type="range"
        value={range}
        min="0"
        max={count}
        className={className}
        onChange={(e) => {
          setRange(e.target.value);
          onSetRange(e.target.value);
        }}
      />
      <p>
        {message.length === count
          ? message[(range > 0 && range) - 1]
          : range > 0 && range}
      </p>
    </div>
  );
}

I do like to mention it's okay to set the initial value of the state using props, the only time you should not do this is when you want to keep the state in sync with the prop, which means when the prop value changes the state should change as well.

And that's not what we're doing here. We are only providing initial value to our state.

That's it!

Thanks for reading!

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link

Sin Of Ugly Websites & Mastering Design Craft

Wasim A Pinjari — Tue, 01 Aug 2023 18:35:00 +0000

Introduction

Having an ugly website is a sin that often doesn’t go unpunished. The punishment involves getting mediocre results to bad publicity.

I recently designed this beautiful personal website: wasimapinjari.netlify.app and most people I have shown this to loved it. It feels great.

This made me wonder why I keep seeing horrendous websites now and then. Do these people don’t know what the cost of this is?

In this article, we are going to learn that and we are also going to see how to master the craft of making beautiful websites or any type of design.

A. Mindset

How Important Having A Beautiful Website Is?

Most programmers feel the task of making things look pretty is lame and it is not worth the hassle. I have mixed feelings about this. Imagine you visited a website and it looks extremely bad, outdated, and poorly designed. How likely are you going to visit it again?

And what if the website looks great but lacks content to keep you engaged or has terrible products and services that they're offering, then you probably are not going to visit it again either.

You may argue marketing is more important: what if the bad-looking website belongs to someone who has a big following? That bad-looking website may have more success than someone who is relying on good looks and content only because of the funnel the owner created.

A funnel is a concept in which you bring as many eyeballs as possible on whatever you're selling (including yourself) and there are going to be people who are going to click and potentially buy no matter what you're selling.

What I mean by selling is persuading someone to perform an action you want and buying is someone who takes the action you want. Someone saying I don’t buy that means they are unwilling to be persuaded by you or your words. They might communicate that non-verbally by simply ignoring you.

It may seem like it's probably okay to overlook website design then and just master the funnel and that's about it. I'm going to argue as you read on that this is a bad idea based on how decision-making in human beings works. I will get into the details later.

People judge a book by its cover, and a website's success can be amplified by just changing its appearance. It might be obvious that to achieve the heights of success you are better off optimizing everything by having a good-looking website along with mastering the funnel and having great content or products and services to offer.

Because people may get fooled into buying something but they are not going to stick around or keep buying if they don't have a great experience in the long term. And they're going to tell everyone about the bad experience to prevent others from going through that same experience.

Retention is the key. But before you retain you must acquire, to acquire you must attract attention.

Appearance is important because appearance creates an initial impression that a visitor has and on the basis of that he judges what type of experience he should expect from it. And once that initial impression is set it's often hard for people to change it even after they see contradicting pieces of evidence that should alter their initial impression.

Meaning a bad-looking website is going to set an expectation that content is going to be low-quality. But when someone reads the content and loves it. He feels dissonance and gets confused. He feels a need to be consistent with his initial impression and dismisses the good content as a fluke.

What Is More Convincing To You?

Someone saying they know how to design well or someone showing you a great portfolio of amazingly designed projects.

Visuals have the power to communicate things that words simply don't.

There is a technique in writing which goes by show, don't tell.

The whole idea is to paint a picture of what's happening and allow readers to imagine and experience the story instead of explicitly declaring it.

Instead of writing "Joe doesn't like the design" you write "Joe fumed and rip the design into pieces and threw it out of the window."

What Does A Beautiful Website Communicate Anyway?

You may feel like you're wasting your time looking at the clock annoyed thinking when this hellish work of tweaking little details is going to end as no one is going to care about it anyway. And they usually don't.

You can use beautiful templates instead if you don't want to create something custom. But some don't even bother to do that much.

What you don't realize here is that you've more to lose by not making that investment.

What Do You Lose?

Let's say you meet someone attractive for the first time and you don't know anything about them. Because they're attractive, that is going to hijack your brain and you're going to start assuming positive things about them like they are intelligent, kind, caring, and belong to a good household without any evidence that verifies those assumptions.

They might be dumb, mean, selfish, and belong to a terrible household, who knows?

What Just Happened?

When you see someone attractive their attractiveness creates a halo effect around them and this effect makes people idealize them.

A halo effect is a phenomenon in which people ascribe positive or negative attributes or qualities to someone or something based on superficial appearances.

By definition, the halo effect also works in the opposite direction where people get repulsed because something is unpleasant to their eyes and they start assuming negative things about the thing that repulsed them.

The sad part that most people don't like to hear is that if you feel the pull or repulsion to someone or something then you're probably not alone. People like to assume they are unbiased and logical so let them think that.

You're better off assuming you're a highly biased and emotional creature. You can get easily manipulated by appearances because it's threatening for you to assume what you see is fake and people and things are not open books that you can read every time. You must learn to look past appearances.

Don't expect someone to like something when even you don't like it, don't hope people are understanding. As we already established flowery words don't mean much if there are no flowers.

This means if your products and services are great, but your website is ugly people are going to assume your products and services suck.

Most won't even going to bother trying your content or products and services assuming it's going to be cheap and low-quality anyway.

They are less likely going to recommend it to others because that will mean they lack taste and good judgment.

They are going to assume a lack of authority and credibility based on looks.

Association is another powerful thing that you must be aware of where people assume negative or positive things about someone merely because of its association with someone or something positive or negative.

If you hang out with terrible people, you are terrible. That's what association looks like.

The reverse is true as well if your website looks great maybe your content is as well.

That's why making your website pretty is one of the best investments you can make that will pay dividends in the long run. Uglyness is a bad association to have.

What Is The Point Of Making A Website Look Pretty?

A pretty website increases the likelihood of getting the below things:

It will help you grow quickly because you stand out from the competition.

It will help you convey authority and credibility quickly.

Your visitors are going to expect your content to be good. They expect to get charged a premium price for your products and services. They're not going to be surprised by it. This is more important than it looks because if people feel unfairly treated they leave.

The eyes are the most powerful sense among all senses of the human body. If you manage to please them, then you will bypass most of the logic and suspicion people naturally have toward the unfamiliar.

A pretty website makes people comfortable since people want to associate themselves with something elevated and high-end. They want to feel pride in their choices.

A pretty website also conveys that you care and you've made sure to please the visitor's eyes with alluring visuals.

Your visitors will love recommending your website to others as it will make them seem cool in the eyes of others showing off their good taste. Thus setting off the viral effect.

It will command attention and help you solidify powerful branding.

People like to follow an expert authority on subject matters and a pretty website is going to help you communicate that authority indirectly and lower people's walls towards trying your products and services and help you gain their trust way faster.

How? A pretty website will help you create a halo effect. This means that just because your website looks cool people will automatically start associating positive attributes to it instantly without verifying it. They think a great-looking website has great things to offer.

It's just like when people see a successful person they tend to associate them with being competent, hardworking, smart, and high energy without even verifying their automatic assumptions because of the halo effect that surrounds them.

These people are sometimes aware of the effects they are having on others and they might be secretly terrified of ruining the halo effect themselves thinking you might not going to accept them once they take off the makeup or you realize they are not as charismatic, cool and funny as they pretended and in fact have a boring life that you won't want to be a part of.

A halo effect has only one problem that you may need to maintain it. A lack of halo effect is disenchantment. It's when fantasy collides with reality. When love turns into hate.

Sigmund Freud once said beauty has no obvious use; nor is there any clear cultural necessity for it. Yet civilization could not do without it.

The same applies to your website.

The halo effect primes people to expect a good experience with your website, it will also make them think your content or product and services are high-end if they decide to become a paying customer they expect to receive great customer service from you.

They will come thinking your products and services are expensive and get relieved if it's not that much. Instead of coming thinking it must be cheap and getting disappointed because it is too costly.

Dealing with expectations is a huge part of success. You must address them. As disappointment is expectations minus reality. You're better off exceeding those expectations with reality.

I do realize I am making a generalization here as if whatever I am saying applies to every single person who visits your website. This is not true. How about you view it as half of the people don't care as much?

Everything is an opinion and they are only better if hold loosely. You can't really put people in a category and predict them as they come from different experiences, cultures, genetic makeups, upbringings, values, temperaments, or whatever.

I am all about probabilities. My question is always to find out how to increase the odds of something happening.

Lastly, it might seem like we are manipulating people with visuals but the truth is we can't. Our focus is to attract them, keeping them requires giving them something they want and caring about their wants, needs, and desires.

Most people focus on how can I get something but the transaction occurs when we understand that to receive something we must give others what they might be looking for. Sometimes that requires empathy, other times common sense.

For example, if you're looking for an awesome partner then figure out what they might be looking for and then provide it. It may be as simple as becoming a dream partner yourself through personal improvement.

Solve your emotional problems, inspect yourself, and find a way to deal with your insecurities such that no one can push your buttons without your permission. Being emotionally secure with an epic lifestyle is alluring.

B. Getting Good At The Craft

1. Acquire Deep Design Knowledge:

Designing is an art form that needs special attention to detail.

There are 2 stages of learning: first is knowledge acquisition where you learn the rules of the games and once you master them, you enter the second stage where you learned enough that you can experiment and start breaking those rules and create something revolutionary and different from others thus setting off a new trend.

While making sure that it's not too strange that no one can relate and that's why you learn those rules in the first place, even if you're breaking them now.

In the design context, it means learning typography, color theory, designing based on the target audience, alignment, color balance, white spacing, etc.

2. Resist Your Urge To Suppress Your Authentic Self-Expression:

We all learn by copying others because most often what they are doing seems to work and it's self-evident as they manage to attract our eyes to them.

If it didn't work why would we pay any attention to them? Sometimes you learn what not to do as they managed to attract our negative attention.

Whatever way our attention goes at least we didn’t ignore them. On the other hand not learning from others can be fatal as we might put ourselves in dangerous situations or waste our valuable time, money, resources, and emotional investment.

That’s why people seek to be naïve followers and not leaders by taking initiative, failing, and often learning things the hard way which ultimately leads them to success or tremendous failure.

Leaders are held accountable for any mistakes, not followers and it's often better to judge and criticize than to be at the receiving end of that.

Despite all the perks of being a follower the glory and benefits belong to those who play in the field, not to those who are passive observers criticizing and judging them harshly.

Followers receive the vile satisfaction of feeling right and smart, nothing else.

I follow people who are smarter than me to learn from them or dumber than me for entertainment but there is a point where being a follower or passive consumer becomes toxic.

One day you wake up and realize your life is a mess and you wasted it. You probably know everything and have seen everything but that was a shallow experience and you never really experienced those things in your real life.

As Steve Jobs said while lecturing at University why he doesn't like consultants because they give recommendations and tell others to follow suit without ever being held accountable for any of those.

He compares that to someone who is proudly telling everyone how he has seen the different images of fruits without ever actually tasting them.

According to him one must bear responsibility for one's recommendations and deal with the scars of being wrong and pick himself up again.

So go ahead, create something, and get your hands dirty, you may make mistakes and those mistakes will pave the path to success as you eventually learn how to navigate through failure.

3. Be Bold In Your Designs By Assuring Yourself That Not Everyone Needs To Like Them:

Most people don’t like to be bold because they feel like they are exposing themselves to the unknown and need more data before they act. And they never act.

They get stuck into analysis paralysis and the opportunity passes before their eyes. They feel frustrated and anxiety-ridden. It is almost as if they entered into the state of the unknown which they fear by avoidance of the unknown.

They don't know when they will get the opportunity again or they might never get any, who knows the unknown?

Whenever designing, listen to your inner voice. Be bold with your art. Unknown needs to be explored not to be avoided. It's okay to design something wild and strange looking.

"How bold one gets when one is sure of being loved" - Sigmund Freud

4. Be Different:

It's okay to look at other people's designs and even copy them. We all are imperfect mirrors even if we copy someone we still manage to add our touch and create something completely different that doesn't look like a copy.

But some people take it too far. They feel like doing something else or adopting a completely new style but they shy away from it and feel like what others did is way better and then they go out of their way to change themselves to fit their design into a certain type of mold that the other person laid down for them or they themselves deem it to be perfect.

The problem with this approach is you create something that is already out there in the wild and there is nothing new about your design. It's not creative or some people like to say original.

What is original anyway? Everything is a remix. We mix and match some pieces from different places and call the weird combination original.

You are not running behind the original. What you're running behind is creating something unique something that hasn't been done before thus creating something original in an ironic way.

You create certain combinations that don't exist in the market that you bring to the table.

5. Refine By Seeking Feedback:

Seeking feedback is important because whenever we're working on something for a long time, we get emotionally attached to it and the more time we spend the harder the detachment becomes.

You might recall the time when you thought something looked stunning and after some months or even years, you look back and cringe and think to yourself: what I was doing?

I am probably going to cringe at this article and my flawed perspective after some time looking back, I might edit or even delete this article, who knows?

That's why you should show your work to others and seek feedback because they are viewing your work with complete emotional detachment. One reason why I showed you my website at the start.

You will have moments where you worked hard and other people think it's complete garbage. You telling them how hard you worked or the amount of time you spent doing something is not going to change their opinion. They might feel bad for you and that look on their face is only going to intensify your feelings of you're no good.

I once spend a month creating an animation in Adobe After Effects and then I excitedly showed it to one of my best friends. He responded by saying my animation looks clownish and he did like the ending portion of my animation which I spend the least time on.

His response felt like a kick in the stomach. As he uttered those words I frowned trying to maintain my composure. I resist my impulse to defend and I let the feedback land. I listen intently and let him know that I appreciate his honest feedback.

This brings us to our next concept: sunk cost fallacy.

This is a phenomenon in which someone is unwilling to accept a loss because they have made a significant investment in it, even after it is obvious the more they invest the greater the loss will be and it’s better to just let go.

You should aim to have no sunk cost. Once you know something is not working just move on. That doesn’t mean you don’t have patience. You realize good things take time, but you also realize when things are going south and no amount of money, time, resources, and emotional investment is going to fix the situation and you’re better off just quitting and starting something else. Insanity is doing the same thing over and over and expecting different results.

We all want a return on our investment and that doesn’t always mean you should invest more if you’re not getting any returns that you hoped for.

The emotional scars that come with loss might make you hesitant and vigilant with future investments. But human beings are naturally vulnerable and your closing off is going against your nature and that might be your true defeat.

Be careful with whom you decided to show your work, the larger the sample size the better. This means showing your work to as many people as possible and if those people are related to your field that is even better and if they are experts in your field then that's ideal.

Why experts? Because they can accurately tell you what's right and what's wrong. They have the vocabulary to describe the fine details that normal people don't possess.

They have experienced and seen enough things to know what to get impressed by and what to not. They have fine-tuned instincts and gut feelings they developed from experience and they can tell what is most likely going to be a hit and what is a flop. They don't need to be right all the time, but most of the time they are.

Normal people don't have wide experience and they won't even be able to tell you why they prefer something over something else. They may give you reasonable answers but those answers won't going to help you much. Because they don't know how to describe with correct words that they don't even know exist.

Larger sample sizes allow you to weed out fake reviews and get a general feeling for how your work is perceived by a mass audience.

People are bad at judging what's good and what's bad at the moment. If something is unfamiliar or outright strange they are going to respond negatively with harsh judgment and criticism, no matter how good your work is.

People love control, they surround themselves with what is familiar and banish what threatened their feeling of control which is often unfamiliar things. They hate change because it is anxiety-inducing and the illusion of loss of control is panicking.

Assume 50% won't like you and if that number becomes larger and larger then you may want to reconsider your work. The same feedback received continuously may be a sign something is truly wrong.

Or you may want to just go ahead and release the work just for fun. Because history is filled with work that wasn't considered favorably at the onset but as people get comfortable with newness, the work was proved to be a massive success.

The feedback is the tool that will help you stay in touch with reality. Forbidding you from creating something bizarre. It doesn't mean people always know what they want. They may sometimes need to make adjustments to realize the new thing is the future.

6. Never Reveal Half-Finished Work To Others:

You may want to take baby steps and seek feedback instantly, but sometimes it's hard for people to see the big picture, and getting judged on half-finished work is not fair.

You may want to complete a small project first and then seek feedback on completed work instead of spending months or years completing certain work and then seeking feedback.

You can do both as well: you may keep working on big side projects that you don't reveal and have mini projects ideally related to side projects that you're continuously seeking feedback on.

7. Resist Your Urge To Brag About How Hard You Worked:

When you're giving guidance to someone you may want to let them know that they need to work hard for their success.

You may want to be someone who shows them the correct path and help them understand that making money is hard in the beginning. It may be easy once they get skilled and have followers and connections.

But in the beginning, you let them know that it's going to be difficult before getting easy.

You help them manage their expectations to prevent them from getting discouraged and encourage them to work hard and get skilled to get what they want.

But in a general sense, nothing spoils the illusion of greatness more than bragging about how hard you work or the amount of time you invested in perfecting something.

You telling them about the time and work that goes into it will only raise questions in their mind as if you may not know what you are doing if it takes that much effort.

People love fantasy. Easy money is a fantasy that you spoil by making them realize nothing is as easy as it seems.

And nothing takes more work than making something look effortless. It is far better to let others do bragging for you. Let them acknowledge that you must have worked hard for your achievements and you thank them as if you can do more if you work harder.

That's the ultimate God flex.

Thanks for reading!

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link

Controlled Elements & String to Number Conversion

Wasim A Pinjari — Mon, 31 Jul 2023 08:23:00 +0000

Keeping UI in sync with data is one of the primary goals of React library.

React achieve this by re-rendering the UI whenever there is a change in data.

In React we allow users to give their input data by using form elements whether it's an input text field, a select dropdown list with multiple options, or checkboxes and radio buttons.

By itself, HTML form elements have a way of storing data (state) in DOM (Document Object Model) temporarily. But it's quite limited and what we can do with it.

For example, let's say you want to make changes to certain UI components as soon as the user types a specific word in the input field. We can't do that because there is no way for React to know what's being typed by the user.

Similarly, as soon as the user submits the form if we want to reset the inputs without refreshing the page, we can't do that since React isn't in control of data (state).

That's why we take the control of data (state) from DOM to React which also allow us to keep all the data (state) centralized in our React application.

The user input data is dynamic and it changes over time. In React we store dynamic data using the useState() hook. This hook makes sure the UI is re-render whenever there is a change in data.

Let's take an example:

function Form() {
  const [input, setInput] = useState(""); // string datatype
  const [select, setSelect] = useState(1); // number datatype

  function handleSubmit(e) {
    e.preventDefault(); // prevent page refresh

    if (!input) return; // prevent empty input submission

    // capture user data
    const data = {
      name: input, quantity: select
    }

    console.log(data); // log the data in console

    // Reset the form input
    setInput("");
    setSelect(1);
  }
  return (
    <form onSubmit={handleSubmit}>
      <h1>How many cookies do you want?</h1> 
      <input type="text" value={input} placeholder="Type your name..." onChange={(e) => setInput(e.target.value)} />

      {/* converting string to number using + prefix or Number() function */}
      <select onChange={(e) => setSelect(+e.target.value)} value={select}>

        {/* {} forces the value to be set as a number instead of string */}
        <option value={1}>1</option>
        <option value={2}>2</option>
        <option value={2}>2</option>
      </select>
      <button>Give Me</button>      
    </form>
  );
}

We create two pieces of state to store two pieces of data.

2 ways to convert a string to a number value.

Adding a + prefix: setSelect(+e.target.value)
Wrap it with Number function: setSelect(Number(e.target.value))

Also enclosing data in quotation marks "" make it a string while wrapping it in curly braces {} force the string to be converted into a JavaScript number.

<option value="1">1</option> // string datatype
<option value={1}>1</option> // number datatype

You might be asking why we have to make e.target.value number conversion if we already set the number as a value in the option.

This is because when we receive an event object (e) the value we receive is always a string.

Thanks for reading!

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link

Why Should You Use OnSubmit() Instead Of OnClick() Event Listener

Wasim A Pinjari — Fri, 28 Jul 2023 09:57:00 +0000

Let's say this is my React form component:

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
  }
  return (
    <form onSubmit={ handleSubmit }>
      <input type="text" placeholder="Type anything..." />
      <button>Submit</button>      
    </form>
  );
}

You can add onClick() event listener on the button instead of onSubmit on the form like so:

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
  }
  return (
    <form>
      <input type="text" placeholder="Type anything..." />
      <button onClick={ handleSubmit }>Submit</button>      
    </form>
  );
}

Nothing will seem to change really. Everything is working the same. But there is a slight difference.

To understand the difference you need to know in HTML you can press Enter button on your keyboard to submit the form. If I type something in my input and press Enter the form will be submitted.

This functionality of HTML form gets disable if you add onClick() event listener to your submit button.

If that's what you're looking for then feel free to use onClick() event listener to your submit button.

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link

How & When To Use JavaScript Array.from() Method

Wasim A Pinjari — Fri, 28 Jul 2023 08:03:00 +0000

This is a quick demo explaining when & how to use JavaScript Array.from() method.

Suppose you want to write an array containing numbers from 1 to 100. It's probably a bad idea to write that manually.

This is a use case for using Array.from() method.

const array = Array.from({ length: 100}, (_, index) => index + 1);
console.log(array);

We pass on two arguments:

In the first argument, we create an object mentioning the length of an array in key/value pair. This will create an empty array with 100 undefined items.

In the second argument, we pass an arrow function to map all the items in the created array to a new array that the Array.from() method going to return instead of the old array.

We're essentially passing an Array.map() method as the second argument since we're performing that action on an array containing 100 undefined items.

We keep the first parameter of Array.map() method blank using underscore, this is the item that the method is currently looping through.

In the second parameter, we receive the index of the currently looped item. We're using that index and adding one to it since the array start from index zero.

Let me illustrate what is happening a little better:

const array = [1, 2, 3];
const newArray = array.map((item, index) => item + index);
console.log(newArray)

// output: [1, 3, 5];

Here we're performing the map method on an array.

What happens is we pass a function (also known as a callback function) in the map method as an argument, that function receives the first element of the array as the first argument which is 1 and its index as the second argument which is 0.

Then it proceeds to create a new array and push the value that it returns in that in each iteration. It keeps looping through all the array items and pushes whatever it returns to the new array and after the whole iteration is done it returns the new array.

For those who are confused, argument is the what we pass in a function and the parameter is the defined variable name for the argument.

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link

Tutorial Heaven, Dealing With Procrastination & Interview Preparation

Wasim A Pinjari — Thu, 27 Jul 2023 11:57:00 +0000

Lesser Known Form Of Procrastination

A subtle form of procrastination that most people often don't talk about is overpreparation.

This is not a type of procrastinator who doesn't like to do anything. This is a type of procrastinator who wants to perfect themselves for the task before taking action.

They want to read everything and watch all the available tutorials. When asked questions they can answer with rather surprising details.

But here is the problem. They don't seem to get anywhere regardless of their knowledge.

Someone with minimal knowledge may be having adventures but they are stuck.

Personal Story

I'm one of those who wants to learn everything beforehand and acquire every piece of information before doing anything.

I classify myself as an analyzer or rather over-analyzer. Someone who takes pride in logical reasoning and coming up with the best solutions by taking all the alternatives into account. I take my time before every decision to make sure it's not a stupid one.

This is bad because most successful people share a trait which is that they make decisions quickly with firmness. They do think about it but not as long and hard as average people. They don't take a lot of time before reaching decisions and once they reach a decision they don't easily change it.

They have a problem-solving approach to life they have the confidence to fix things that they overlook and nothing is set in stone. They will always have the option to ask forgiveness if they made a huge oversight in their decision and hurt someone.

Unsuccessful people take a long time before reaching a decision and once they reach it they don't commit. They are quick in changing the decision they previously made and are easily influenced.

I have my share of annoyed impatient people who want everything quickly. I label them as someone with short-term vision who can't resist the lure of instant gratification and they are doomed to fail. Are they?

Nope. It's not that simple. There are a lot of them who are successful. I am just projecting my insecurity on them. I don't want to seem impatient myself. I want to seem like a secure person. Who offers freedom and doesn't going to bother someone with constant pressure to be quick in their act.

I frown upon people who just can't seem to wait. I don't want to be frowned upon myself. That's probably why I keep distancing myself from my impatience and keep rejecting it as bad.

I should find a way to integrate my shadow side into my personality, instead of suppressing my impatience. I should view that as a sign something is wrong, I should act quickly instead of waiting around.

Problem With Information Overload

The problem with gathering unnecessary information is that most of the time it leads me down the road of acquiring unnecessary information that I don't even use. For example, I once watched a 4-hour course and never applied that knowledge anywhere.

Gathering useless information beforehand is counterproductive because:

It gets outdated quickly and you will eventually need to get updated with the latest information.
You waste time learning everything that you don't even need to know to do the task at hand and since you didn't use that knowledge you eventually going to forget it. You lose what you don't use. If you just want to know how to create a branch in Git then Google it. There is no need to go through a 20-hour course.

Before we go further I want to emphasize that anytime I say tutorial or course. It doesn't mean it has to be paid. YouTube is filled with free courses and tutorials.

Value Of Doing Long Courses

The value of going through a long course like I once did a 60-hour course is to save time. I think wasting months if not years to acquire the same knowledge with trial and error is worse than taking a long course.

You learn what experts in the field know rather quickly. It's a form of delayed gratification. The only thing that will be left for you is to figure out a way to apply and practice the knowledge that you acquire.

What I am against is learning something that you think is good to know without asking yourself if you need to know that right now and for what purpose.

If you're a beginner you need to pay your dues and need to spend time acquiring the essential knowledge. It's either through trial and error also known as building things and Googling your way through it. Or you can do a long-winded course and learn everything. One learning approach is more active while the other is more passive.

Combining Active & Passive Learning

I prefer doing both. I built my website after completing a basic web development course. You can check that out here: wasimapinjari.netlify.app

I learn a lot doing this. I have to figure out SEO, security, how to install Google Analytics, and check reports to name a few. I lose track of time building it. It's interesting. I don't think that's in the scope of the course to teach that. That's why actively learning and doing things on your benefits you more than passive learning. You learn the most important stuff first and learn the optional good-to-know stuff later as you move forward in your journey.

To illustrate the value of combining both approaches, let's take an example.

Let's say you're doing interviews after interviews and no one is telling you what you're doing wrong. You're just getting rejected left, right, and center.

After some frustration, you decided to take an interview course from someone who had experience interviewing people at Google. That person tells you what they look for and you gain valuable insights about what you may be doing wrong all along in interviews.

You may learn that:

You want to keep your intro short since you're not going to get infinite time to solve the interview problem. Quickly go through your resume in reverse chronological order and tell them what value you bring to the company by matching the skills you have with the job description. You can put your open source contribution as relevant work experience if you don't have much experience to talk about.
You need to tell the interviewer what different ways you could potentially solve a problem (algorithm design skills).
You should ask clarifying questions about the problem and point out the edge cases. Figure out the limits by asking what you can and cannot do. They might test you by not providing you with any details to see how you deal with ambiguity because you're paid to do the work and you may have to figure details out yourself as a part of the job.
What is the algorithm's time/space complexity (algorithm analysis skills)?
What makes you decide to choose one algorithm over another to solve the given problem (maybe because you have less time or maybe because it's more optimal or maybe there are space restrictions)? Sometimes you may point out some algorithm that is hard to write like the KMP algorithm just to let them know that you know what might be a better-performing algorithm. They might be hoping that you solve the problem with the easy less-optimal solution and know you're on a time limit which shows you're aware and good at time management. Also, you're not just some over-optimizer freak who is oblivious to deadlines.
You have to explain the thought process behind your code as no explanation (code analysis skills) means you're a bad communicator and unsuitable for a leadership position that you might get promoted to. You will make decisions at work without bothering to explain your thought process to the team. Ideally, explain as you write but it's not required you can write the code and explain your thought process later.
You may have to write the code in small handwriting and start from the top-left of the whiteboard for further code refactoring and solving follow-up questions to your solution.
You may need to write clean good looking code using classes, methods, and properties (writing maintainable code skills).
You may need to know how to handle behavioral questions beforehand like tell me how do you handle a conflict in the past? What's something that you didn't like about your last job? Where do you see yourself in 5 years? The pattern of answering all these questions is the same just be honest and positive. Being honest doesn't mean you tell them everything you can omit negative information since they are strangers and you can't expect them to accept you as flawed and have empathy. You will get plenty of time to make them understandable friends later once you get hired. Resist being negative in your answers. If they ask what your biggest weakness is then don't say you're an arrogant narcissist say your good-bad qualities followed by how you fix that problem. For example, I have high standards for my work and people might get frustrated at me for being slow. I figure out that managing expectations through communication is key to solving interpersonal problems. The reason for reading the job description carefully before interviewing is they might be a startup and looking for someone to work fast. Even if this answer is good they might not like to hear that and reject you.
It may be a good idea to bring your resume and whiteboard pens with you. If the interviewer can't find any one of those or worse both then it's your fault and you won't get extra time to solve your problem.
Come up with nice questions beforehand to ask the interviewer in the end. For example, what is the best part about your job?
You may want to say thanks to the interviewer and possibly end the interview on a high note. Since the last impression is the lasting impression. How you made them feel is the last thing they will remember about you. This itself won't be going to make them hire you on the spot. But if they have another more suitable opportunity in the future they might reach out since you're so nice to them and feel free to send them a thank you letter over email as well after the interview.

These are a few guidelines. Sure you can figure these things out yourself through expensive trial and error or you can learn that from someone more experienced than you.

Limits Of Imagination

Another argument for why I don't consider a long-winded course a tutorial hell is this: For me to come up with a solution I must know what tools I have at my disposal. How I am supposed to figure out a solution to a problem without having a proper understanding of what tools I have? I can't Google what I don't even know exist.

For example, let's say I don't know if there is an array map method in JavaScript. I am not going to Google search that because I don't know it exists. I will use a for loop to find a solution to my problem. Is it going to be right? Yes. But are there other better and easier ways? Definitely.

Knowledge of tools allows us to come up with better solutions and be more productive with our time. Sure if you're contributing to open-source projects you will learn these things by either looking at the code and figuring out what this new-looking code does, or asking more experienced developers in the community or you may get this knowledge as feedback to write your code in this way.

A lack of knowledge or perspective is a hindrance to our ability to imagine and come up with novel solutions.

Sure you don't need to be hyper-optimized, productive, and obsessed about performance. The difference is not going to be major anyway unless you're doing something crazy like rendering a 4K 3D model in a game. You just need to ship the working product. And iterate as you go. There is always going to be time for writing better algorithms and code refactoring.

Understanding Tutorial Heaven

Tutorial hell is an over-hyped notion. I think it's tutorial heaven if you're gaining knowledge from someone whose content is extraordinary. You saved the pain they went through to acquire knowledge.

You may be wondering what about the fact that when we learn things ourselves through pain they stay with us longer. Is it better to learn things the hard way?

Maybe. It's your choice.

What I learned through doing open source contributions is learning actively is way more fun and engaging because you are solving real problems, you get feedback from other people, and sometimes instantly if you're contributing to an active project.

You feel good and get a sense of accomplishment when your pull request gets merged and you grow with the community which is there to support you. You see the project getting better with time and sometimes that can be satisfying to watch.

It might be not as painful as you imagined. You might be misled by someone like me. It's only painful when you're completely oblivious and you are looking for spoon-feeding.

Overcoming Analysis Paralysis

I also tend to waste time gathering information beforehand that I could collect on the spot by just asking simple questions and paying attention.

What this looks like is I start paying attention to someone and start assuming things about their wants, needs, personality, where they might come from, whether are they going to find me interesting, etc. instead of going there and just starting a conversation and figuring that out on my own rather quickly. I argue that I need to know more about them before I open my mouth. I need more data.

Or another example is I could listen to talks about open source and hear what's the best practices and whatnot. Rather than actually jumping in and just playing around and figuring things out as I move forward.

The problem with too much data is it often fails us. The more you know about something the more certain you get. With certainty comes confidence or rather over-confidence.

And certainty is the root cause of most bad decision-making. Uncertainty makes you look for alternatives being certain makes you blind to them.

Their also a paradox of choice at play here the more options you have the more that will freeze you and the harder the decision-making gets. It's exhausting and anxiety-provoking. The more unsatisfied you will be with whatever choice you make. Grass will be always greener on the other side.

This is what happens when you look for the best. If you strive to find the best you risk not even enjoying the best after you find it. You wasted too much time in your quest for perfection and you know too many other alternatives. You're induced with this question of whether is this the best one. Did I make the right choice? What if there is something even better out there?

The other problem with looking for the best is that human beings are adaptive. They get used to things. If I go around looking for the perfect coding language. I might discover they are all the same with slight variations in syntax and features. Everyone has their strengths and weaknesses. I might be better off just choosing anything that's not too far off from meeting my standards.

The ideal action is often to just get started doing things and gather information as you go. It's way more fun to live life like that just take whatever is good enough for you and stop looking.

Let your intuition and unconscious take over after getting started. Your brain is constantly analyzing patterns to get better at rapid decision-making.

It's life and death for your brain. We are forced to do things instantly all the time. Imagine finding your friend approaching a bus while being on the phone. That's when we rely on our instincts and gut feelings. All the unconscious learning is at play. There is quick pattern recognition and you know what to do in a split second.

This is one reason why you see everyone saying learn by building and get out of tutorial hell.

Your brain is a machine that feeds on data. The more data it has the better. It starts catching up with the patterns and you start honing and developing accurate instincts and gut feelings.

The best way to illustrate this is for you to start recalling how you learn your mother tongue. Did you go through grammar lessons or a dictionary containing the meaning of every word? No.

You're forced to learn it. You must know what people are saying. You're a dependent infant. You start making sense of what people are saying by watching them closely. Their tone of voice, body language, and behavior. You try to feel what emotions they are feeling to assess the situation. You take clues from the environment, the objects they are holding or wearing or showing off or giving to others. Every detail and nuance is the raw unprocessed data to make sense of the words that come out of their mouth.

If you see they are holding a piece of paper and calling it money. Then you associate that paper with the word money. You see them getting emotional over money. You figure out that must be important.

You're learning actively rather than passively.

Passive information gathering is a form of procrastination to keep ourselves from failing. It also comes from a desire to please with flawless perfection. Which seems to me a defense mechanism to keep oneself from looking flawed and signaling others that they are indeed unworthy of attention.

Or maybe it's not and you might have high standards for your work. You may have good taste and know what good things look like.

I am attracted to amazing things and I unconsciously know unless I have that I will have a hard time getting any attention.

And it often takes a lot of time to get recognition by progressively pushing out mediocre work rather than something extreme and extraordinary that grabs people.

I don't know the exact science/psychology behind procrastination. The only thing I know is that awareness is the first step toward change.

A Better Alternative

I will recommend starting small and building upon it. Go one step at a time. First, get comfortable and practice the basics and avoid learning too much too soon. You must practice what you learn to make knowledge stick and see results quickly.

Don't just learn everything and ask what now.

For example, if you want to learn to become a social butterfly then start by holding eye contact with people, after you get comfortable doing that you may want to start asking strangers for time, after you get comfortable asking try to hold a conversation a little longer by asking random questions after asking for time. And so on.

When I first started with open source. I only know a handful of Git commands. I didn't know how people collaborate using Git.

I watch a video of someone walking me through how to find an issue in an open-source project and fix it. I learn I have to fork a project, run the project locally, find an issue, create a branch, solve the issue, commit changes in a newly created branch, push it to the forked repository, and make a pull request.

This is me learning incrementally. I don't have to finish a 20-hour Git course and learn every single command. I just learned what I needed to do the thing I want to do.

I started by opening small easy issues and fixing them. I am looking forward to moving on to solving other people's issues.

Considering A Gray Area

I may seem all over the place with this article.

I realize most people including myself have black-and-white thinking caused by having a limited perspective on things but everything exists in a gray area.

For example, someone is not untrustworthy or trustworthy. It's not an either-or. It's more like someone is untrustworthy to do some things and trustworthy to do other things.

For example, you can trust me to help you with your CSS code but don't trust me to fix your teeth because I am not a doctor.

What's good about something is often bad about it. Procrastination is good if that means the end result is close to a perfect product filled with creativity which is often the result of delay since coming up with novel new ideas takes time, curiosity, and some showering. You shouldn't expect much creativity and originality if you're rushing to do something.

Similarly, if you think free software is amazing maybe it's not as amazing as it could be because it's free and some developers don't have enough resources to make it better by hiring amazing people to work on it. Why should they? What do they get? Bunch of complainers and pissed-off people.

Just like I don't have the resources to hire a good editor to edit this messy article. It seems like I mixed three different unrelated articles into one.

All jokes aside, thanks for reading!

Follow me: @wasimapinjari

Links: wasimapinjari.bio.link