Forem: IVEWOR

**Rethinking My Career, and Life!

IVEWOR — Wed, 17 Jul 2024 06:02:16 +0000

It’s 2024, and six months have already passed. I have been coding and building websites since 2017. I won’t bore you with all the details, so let’s jump into the main part: why I should rethink everything.

Career

As I mentioned, my professional career started in 2017. I was pursuing Chartered Accountancy after 12th grade, but due to some issues, I had to drop out, one reason being my interest in programming. I started learning on my own from the internet and got my first job in Chandigarh as a WordPress developer. Since then, I have been partially successful in transitioning to other technologies like pure backend or frontend.

One reason for my partial success was that I was able to make good money, at least for me. I got new contracts and projects as a freelancer because of my problem-solving skills and ability to create nice user interfaces without using pre-built templates.

Some might think there’s no problem-solving in WordPress, but speed is a major issue for WordPress website owners who rely heavily on plugins. I limit plugin usage by custom coding features, which became my selling point. Even though I lacked experience in PHP and never formally learned it, I managed by reading WordPress docs and looking at code.

In 2023, I joined a web shop full-time, earning 1 lakh every month. My expenses were less than 30%, and I saved the rest, but I chose to invest in personal side projects, which amounted to nothing and wasted every penny.

After three months, I got sick of the work because I wasn’t doing anything special for the past six years. I left the office to freelance for the same company and focus on side projects, but this cycle of working for three months and then leaving to work on side projects repeated without success.

Eventually, I ran out of money, and freelancing work was at its lowest. The company I worked for shut down because the owner couldn’t handle running both it and a therapy center. Then the marriage happened, and now it’s July 2024.

Although I got some freelancing work on Upwork, the platform is worse these days. I couldn’t focus on a full-time job even when it was enough for my living because of my business mindset, which never succeeded. I always thought I would succeed this time but always failed and burnt tons of money.

I also tried stock trading and investment but, being impatient, never tasted success. Now, whenever I look at job posts, I feel I can’t do anything. Even for JavaScript developer positions, they ask for skills I never heard of or never used. I stayed back from applying because I probably worked on some of those things but never knew the professional terms.

This is the main drawback of working too much with web shops and then looking for product-focused companies like most startups these days. Now, I’m 26, workless, and cannot apply for jobs because I don’t know everything they ask for.

I can apply for entry-level jobs, but in India, they don’t pay much, and I won’t be able to survive on that alone. So, it’s not worth it. If I look for a job outside India, basically remote jobs, the same technology gap exists, and I don’t have a degree. I’m just a high school graduate and nothing else.

Now, I’m in too much debt and can’t even focus on learning because every 30 days there’s a huge EMI to pay, and I can’t ask for help every month. My stress level is at an all-time high because of these things. I’m losing my hair every day. Life is at its worst spot right now, and it has been since mid-2023. But I have to take some action because there’s no option to leave everything behind.

The Plan

Frankly speaking, I’m not sure what the plan is, but I have to do something because I never planned for my life to be what it is today. I have started learning new things, focusing on React.js and Next.js. There are lots of entry-level jobs in these technologies, and I can get very good in a short span if I just do it every day. If I get a job, it will super boost my progress, reaching a level in three months that might take a year if I do it myself.

I could write a lot more about this stuff, but this is the summary of everything going on.

Learning React: Creating a Roll a Dice App - R1

IVEWOR — Tue, 18 Jun 2024 12:47:21 +0000

It's not too late to learn react so, here is my journey. I will try to post everyday about the progress I made. I tried to learn react last year but was not able to finish it and now I'm again a noob.

So, this is my 2nd shot in learning react. Haven't touched the basics of it but instead I will try to learn it by building some projects.

The first project I build is Roll a Dice. This is a very simple one and gave a good idea of how the file structure works and everything to the base level in react. Also, I'm using next.js to build this small web application. I just want to be comfortable with both of these things at the same time that's why.

What I learn

React.js and Next.js file structure
Running and creating a react application
Some jsx
HTML and CSS in react
useState Hook
and other basic stuff

Now, let's build.

Roll a Dice Web App in React.js and Next.js

Create repo

This is not necessary but it's an good idea to keep everything in Github repo for various needs. But mine is to have some commits everyday on my profile and learn every system that I need to accomplish in real world job.

I just then cloned that repo in my system. Opened the terminal, cd into project directory.

Creating the project

Since, I'm using Next.js so, the command to create the project will be:

npx create-next-app@latest .

. in the end so, it won't create another directory in the project project folder and take base directory name as it is.

You can then select your preferred configuration like JS or TS. I'm using JS, for tailwind say no. Since it's a very small project we don't need that.

After completion of the installation. Run the command to test if it's working.

npm run dev

Visit localhost:3000, you should see the vercel/next.js landing page.

If upto this point if everything is working fine. Congratulations, we have now learned how to create a react project using next.js.

Clean up the files

The next step is to clean some files and remove the unwanted code from our project.

You can read about the project structure here, I won't talk about this here.

Remove everything except the page.js and layout.js from the src/app directory.

layout.js

The default code should look like this:

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

We're going to remove some of it and keep and add what we need for this project.

Remove the second import of CSS or just rename it to style.css. We can keep the fonts. Next we have export metadata. We're going to change it instead of removing to

export const metadata = {
  title: "Roll a Dice",
  description: "A simple roll a dice web app!",
};

Next keep the remaining Root function. The end code of the file should look like this:

import { Inter } from "next/font/google";
import "./style.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Roll a Dice",
  description: "A simple roll a dice web app!",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Next, create a style.css file under the same directory src/app, because we need one style file and we imported it on the top of layout.js file.

page.js

In this file, let's remove everything and write from the beginning. Let's first have a function to render our homepage with a simple heading text.

export default function Home() {
  return (
    <main className="page">
      <h1>Roll a Dice</h1>
    </main>
  );
}

In this code, we have a simple react function which returns a simple h1 in our application.

Next, we need the dice image and a button to roll it. We want the image to randomly change to another one upon clicking that button.

Images

Before that let's collect some images for the dice. I have already downloaded them from the web. So, you can copy these 6 images from the repo. Store them in the public folder. Make sure it is present in the root directory, same level as src directory.

- roll-dice
-- src/app
-- public/all-your-images.png

Make sure the dice images are named like this:

dice-1.png
dice-2.png
...
dice-6.png

You can name it whatever you want just please adjust it accordingly in the code.

page.js

Now, let's create an image and the button, which we talked earlier. For the image we need to import the Image component from next.js since we're using next.js.

import Image from "next/image";

export default function Home() {
  return (
    <main className="page">
      <div className="img-side">
        <Image src="/dice-1.png" width="400" height="400" />
      </div>

      <div className={"text-side"}>
        <h1>Roll a Dice</h1>
        <p>
          Roll a Dice is a user-friendly web app that simulates dice rolls.
          Perfect for games or decision-making, it offers quick, random results
          with a single click.
        </p>
        <button>Roll the dice</button>
      </div>
    </main>
  );
}

Now, our web app looks like this:

style.css

Let's add some styling to it. I won't talk about this much. Here's the CSS:

body {
  background-color: #f0f0f0;
  padding: 10px;
}

body,
* {
  margin: 0;
}

.page {
  max-width: 850px;
  padding: 20px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 28px;
  display: grid;
  gap: 20px;
  align-items: center;
}

.img-side img {
  width: 350px;
  height: auto;
  max-width: 100%;
}

.text-side h1 {
  margin-bottom: 10px;
}

.text-side button {
  padding: 12px 28px;
  line-height: 1;
  border: solid 2px #222;
  background-color: #222;
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.5px;
  border-radius: 18px;
  margin-top: 30px;
  cursor: pointer;
  transition: cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.2s all;
}

.text-side button:hover {
  opacity: 0.9;
}

@media (min-width: 850px) {
  .page {
    grid-template-columns: 1fr 1fr;
  }
}

Now, the web app looks like this:

Adding the functionality

Again in page.js, we're going to import a useState which an react hook using import { useState } from "react";. First let's do the destructuring and initialize the variable with 1.

import Image from "next/image";
import { useState } from "react";

export default function Home() {

const [num, setNum] = useState(1);

Then we're going to create random number generator function inside our Home function, which is going to return a number from 1 to 6.

import Image from "next/image";
import { useState } from "react";

export default function Home() {

  const [num, setNum] = useState(1);

  const randomNumberInRange = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }


....rest of the code

Now, we need a function that fires our randomNumberInRange function.

import Image from "next/image";
import { useState } from "react";

export default function Home() {
  const [num, setNum] = useState(1);

  const randomNumberInRange = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  const handleClick = () => {
    setNum(randomNumberInRange(1, 6));
  };

  return (

....rest of the code

Now, we have to assign the handleClick function to the button. So, it works on click. Let's do that:

<button onClick={handleClick}>Roll the dice</button>

We're mostly done with our web app. We just need to make some adjustments in the Image tag so, it can use the random num from our function. To do that, modify the Image src to <Image src={"/dice-" + num + ".png"} width="400" height="400" />.

Now, the page.js code should look like this:

"use client";

import Image from "next/image";
import { useState } from "react";

export default function Home() {
  const [num, setNum] = useState(1);

  const randomNumberInRange = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  const handleClick = () => {
    setNum(randomNumberInRange(1, 6));
  };

  return (
    <main className="page">
      <div className="img-side">
        <Image src={"/dice-" + num + ".png"} width="400" height="400" />
      </div>

      <div className={"text-side"}>
        <h1>Roll a Dice</h1>
        <p>
          Roll a Dice is a user-friendly web app that simulates dice rolls.
          Perfect for games or decision-making, it offers quick, random results
          with a single click.
        </p>
        <button onClick={handleClick}>Roll the dice</button>
      </div>
    </main>
  );
}

Now, if you click on the button. The image should start changing like rolling a dice.

And that's it for this web app, atleast for now.

If you have any suggestions or feedback, then please share! The repo is here

Learn GO: Creating Variables in GO Lang

IVEWOR — Wed, 12 Jun 2024 20:55:27 +0000

I just started learning Go and I want myself to be fully committed to it. So, I thought may be should start writing about it. It will help me to basically learn each part in some more details and will also help me to track the progress.

I won't be talking about why you should or should not use this language. I just finds this very beautiful and as I always wanted to learn a low level language.

So, let's get started with our first tutorial on how to create variables in GO.

Go is an statically typed language. Basically, we need to assign a the variable type in order to create one like we in other languages such as TypeScript and C++.

For creating a variable in GO the syntax looks like this:

_var_ variableName type = "value"

For example, if I have to create a variable of string then I'd do something like this:

_var_ myVariable string = "hola hola!!"

However, type is not always necessary as we can also specify the type in value, like this:

_var_ myVariable = "hola hola!!"

As strings are in quotes which is used to define strings in a language.

Another version of creating variable is the below one. Which is quite fancy and short, and will probably makes you look like an expert.

myVariable := "hola hola!"

This is short declaration of a variable which is pretty useful and great.

Next we can also make creating variables more cooler 😎. By assinging several variables at once. Like this:

var me, myGF, myWife := "programmer", "programmer", "scientist"

Now, there are various data types in GO such as string, float, int, int8, int16, int32, int64, uint, uint8, uint16, uint32, uint64, uintptr, and so on. You read more about GO Data Types here.

There are other things in GO variables as well. Which I will be talking about in the next post, for now that's it.

If you have questions of suggestions for me to improve do let me know.!!