DEV Community: Atif Aiman

Deploying A Web App To Your Own Domain - What You Might Wanna Know

Atif Aiman — Tue, 16 Jul 2024 16:14:29 +0000

Salam and hello everyone!

Again, it has been a very long time back then when I wrote the last article. This time, just a simple and basic thing, I want to write a basic topic, on what you should know when deploying a web app (can be frontend, backend, or some sort) to your own domain.

However, before diving into the stuff that you need to know, you have to learn few terms and how is it related to the deployment.

If you see any mistake throughout my article, please, comment down below, so others can learn together as well.

So, let's dive right in!

TL;DR

Identify what kind of deployment are you using, and the identifier to your deployed app. It can be IP address or another domain.

Buy a domain, use DNS records to map it to your deployed app, and you are done!

Basic Terminology

IP Address
This is a unique identifier assigned to device on a network. You can say, it is like an address to your home, that is unique to the whole network. So, internet knows where to route you to the right destination. E.g. 74.132.0.3. It is further divided into IPv4 and IPv6, but let's keep it simple this time.
Domain Name
A human-readable name, which helps user to navigate to an address easily instead of IP address. For example, google.com.
DNS (Domain Name System)
DNS is responsible to translate domain name to the IP address. For example, when you enter www.example.com, DNS will help to translate that into the IP address, which is 93.184.215.14. You can check out how it happens behind the scene.
HTTP (HyperText Transfer Protocol)
HTTP is a protocol to transfer data between a client and a server. Of course, there are a lot of protocols in the network, but HTTP is usually used for web servers.
HTTPS
A secured version of HTTP, where it requires SSL or TLS to establish connections for the protocol.
SSL/TLS
A tool that helps to establish secure communication on the internet.

Yu can google these terms and check them out what they do in depth, but let's focus on the deployment for now.

Building Your Application

There are tons of ways available to build your application. With the emergence of AI, building a simple application should be accessible for all developers from different backgrounds. Whether it is for a website, a server, or a service, developers have a lot of options to choose from.

Different languages such as Golang, Rust, Javascript, PHP, Python, Ruby, or different libraries or frameworks such as Express, Wordpress, Feather.js, React, Vue and others, might impact on how the system will be deployed.

For example, PHP system might be relying on Apache server to run the code, that has different strategy on how a Node.js server works that either requires Node.js environment, or just build it and run on PM2. You might also know about containerisation or virtualisation, which also another part of the deployment you might want to explore as well.

To put it simply, there is no "one rule fits all" when it comes to deployment, but you can Google on how each of these languages and libraries are deployed, and see what are the use cases when a deployment strategies is being used.

However, there is a common thing that you can look out when it comes to deployment. As you deploy your app/server/service, there will be an identifier to it, whether it is IP address, or a service domain. You might want to learn on how to get the IP address of the service. Make sure that it is a static address.

How User Opens The Web

There are lot of things happen when user opens a website. But I will try to put it as simple as possible, so you will know what to do next after you deploy your own web app. Here are simple chronology of how it works:

User tap in www.example.com into the address bar
When this happens, the browser will go to the internet to find the domain registrars (some sort of librarian, you ask them about book, then they will search it for you), to find the records of the domain.
Look up for the records
After finding the domain registrar, it will look up for the records inside the DNS of the domain. For example, after finding example.com, it will do a look up for the record of www and where it points to. In our case, www record points to 93.184.215.14. A single domain could store a lot of records, which will be explained later.
Returns the destination address
It can be an IP address, it can be another domain, depends on the record kept in the DNS of the domain.
Redirect to the given address
After getting the destination address, it will try to communicate with the address.
Establishing connection through protocol
Here is where HTTP/HTTPS comes in. For sure, there are a lot of protocols in play as well, such as TCP/IP, so that user can communicate to the server.
Returns the content
After establishing connection, the server will response with the needed resource (or as simply, content) to the user, and ready to be consumed.

Acquiring a Domain

For a certain services, such as Vercel, Cloudflare, or Netlify, after deploying the web app, the domain is assigned to them, but usually has "provider domain". For example, when you deploy on Vercel, your deployed app will get a domain like kena-lol.vercel.app. While it is okay to have the domain straight away, you might think "hmmm, it will be cooler to have my own domain name instead". This is where the custom domain comes in, but to do that, you need to require a domain name first.

To acquire a domain name, you have to buy it from the domain registrars. Depends on your needs, you can google all the domain registrar, but the commons such as Namecheap, Porkbun, IONOS, Hostinger, DreamHost, AWS Route 53, Cloudflare or others, or private ones to acquire exclusive domain extensions such as .my through MYNIC.

To buy a domain, I would suggest that you pick up any domain registrars and look up to their documentations, since each of them might have different processes. The pricing depends on the algorithm sets by each registrars, so you might want to compare the pricing and the services.

After buying the domain, you are ready to map it to your app.

Mapping to Your Deployed App

After registering your domain, you should have access to the dashboard of the registrar, where you can configure the settings of your domain.

I would like you to focus on the DNS first, you can explore the rest of them after mapping your domain.

You might want to look out for "DNS Records" on the registrar picked by you.

You might see that, there will be 2 records already assigned to a resource, that is @ and www.

@ is just an indication of the root of your domain. This is equivalent to user entering example.com without anythings comes before example.com. While www is actually what we call as subdomain, which is a domain under a domain, so this is equivalent to www.example.com.

You can add your own subdomain later on, such as test, so it will have test.example.com and map it to another resource.

Records

Record is a way you want to map a subdomain to a resource. There are a lot of record types, such as:

A: Usually called A record, where we use the IPv4 address as a resource. This will be useful when you have full access to the resource and assign the IP straight to it.
AAAA: Usually called AAAA record, is just like A record but for IPv6.
CNAME: Usually called cname record, where we use the domain name given by the deployment provider to establish resource assignment. Usually, this requires the other party to validate the domain ownership, to make sure that you really own the domain.

And there are other record types as well, such as MX record for email service, NS record to point to different DNS, SRV record for specific port assignment, and so on. You can explore them more later on.

Here is where you want to map your domain to its resources based on record type.

For example, assuming that you have 3 services. 2 services that you have access to its IPv4, and 1 service that you deployed on Vercel.

For the first one, you want to deploy it on your root domain. Let's say, the IPv4 of your server is 199.59.243.226. On the record, you should select A record, put @ or your own domain example.com as the name, and the IP address in the content part. You might want to also have it as www as well, so you can create another A record, put www as the name, and the exact same IP address as the content. With this, user can access the same app when they enter example.com or www.example.com.

(This depends on the your DNS manager, might have slight difference in naming)

For the second one, let's say you want to create a different subdomain, let's pick it core. So, your deployed service's IPv4 is 142.250.191.46. Same process, you put core as the name, pick A record and put 142.250.191.46 as the content. User can see the site when they enter core.example.com.

For the third one, you don't have the IP, but instead Vercel assigned you to a domain - tricky.vercel.app. Vercel has its own dashboard if you want to map it, and they have its own way mapping the domain. Just go to Vercel dashbord, go to settings, go to domains sections, and enter your desired address. For example tricky.example.com. Vercel will tell you step by step on how to add it to your DNS records, and they will handle the rest.

Of course it depends on the provider, as different provider has different approaches.

DNS Propagation

After adding the records, the whole internet needs to know how to go to that resource. For this, DNS propagation will happen, and it might take some time, and it can be as quick as 1 minute, or as long as 24 hours.

So, how does this happens? Just imagine, that after saving the records, the DNS has to tell every main router on the internet that there is a new cool kid on the block. Every router need to save this info on their so-called router table, so it will know where to go to. Remember when user enter a domain, it will find the registrar? Yup, there is where this DNS propagation comes in.

After the DNS propagation done, you should be able to open your deployed app using your desired domain name.

And boom, it is done!

SSL Setup

So, what is SSL (Secure Socket Layers)? You can treat this as another layer of security before a user gets the page from the internet. When user tries to establish a connection through HTTPS (by adding the protocol of https at the end of the URL - e.g. https://kena.lol), it will try to check if there is a certificate that acknowledge the authenticity of the page, and will only establish connection if it is present, and user will be able to see the page. Most browsers nowadays are enforcing the HTTPS protocol for more secure browsing.

These certificates need to be renewed in intervals. Previously, it can be as long as 5 years, but as more security concerns are addressed, the maximum lifespan for a certificate is 1 year, so you have to renew it at most every year (more accurate - 398 days, extra few days to allow mitigation). You can choose to shorten the lifespan, however you have to remember to keep renewing it, manually or automatically.

Often that some providers like Cloudflare already has SSL/TLS in place if you are using their services. But in case that you are deploying on your own, you can use services like Let's Encrypt (often used with other services such as NGINX) or auto-renewal such as Caddy (Let's Encrypt also has auto-renewal feature as well).

Shout out to @koas for pinging about SSL 🎉

How Much Does It Cost

Well, it depends on your deployment strategy. If you are using local deployment on your own machine, or if you are using deployment service such as Vercel, or Cloudflare, or Netlify, or Render.io, or Fly.io, there should be a free ones that you can use. So, your deployment cost could be zero! If you add your own custom domain, the only cost you pay is the domain acquisition!

If you are using something like shared hosting, you might have to pay for the hosting, but you might have limited stuff that you can do.

If you are using VPS, it depends on the size of VPS that you are using, whether it is from AWS, or GCP, it can vary based on the variant you pick.

As I say, it all depends on what language/library/framework and your deployment strategy.

So, it doesn't have fix price, it all depends on your deployment strategy and the need of your own domain.

Extra Stuff

Usually, the cheapest domain will be .xyz (or probably something else, I don't know) or else, if you have extra money, you can go to .ai or any extensions that you see fit.

For example, mine is atifaiman.dev, using .dev as the extension. I also map it to alserembani.com if you are curious.

Conclusion

So, that is what you might wanna know when you want to deploy to your own domain. For sure, there are tons of thing you need to know, but this article should serve a simple way for you to have your own domain to your web app.

So, that's it for today, and peace be upon ya!

[A Year In Review] My Wellbeing Year of 2023

Atif Aiman — Sat, 23 Dec 2023 17:25:02 +0000

Salam and hello everyone!

Well, it has been another year, and it is good to have a retrospective writing of how far I have been this year. A year I spend most of my time balancing between community and professional careers - pursuing my next milestone - to become a developer relation kind of guy.

And to start with...

Rocket Learning with Xsolla

I have been in the industry for 4 years (in the early year of 2023). Moving to Xsolla is a right step for me at that time, because my goal is to deepen my mastery over frontend development. Developing more and more React apps, learning the "root" of the React itself, the bundlers, the customisation, which brings to me learning micro frontend using Module Federation. Well, it is fun, though there is a use case that I feel is wrongly used.

Not just that, I reflect my skills through the hiring process as well, since I have been the only bar raiser locally, so I had to interview most of the front-end candidates. While I learn how to understand people, I also have to reflect my skills as well, and how can I keep my professionalism when hiring devs. Of course it is not easy, but I had to do it anyway. From there, I learn how our local talent is (though the sample that I get is still small, and there are still a lot of blind spots that I need to learn as well).

I also enroll in a lot of courses to upskill myself, and the courses help me in understanding deeper both the development and the workflow. Learning SAFe (Scaled Agile Framework), Epic React, Microfrontends, and Three.js Journey, are something that is eye-opening for me.

There is a lot of planning underway, but until August, I feel that I need to have a move on, for a change of air, thus I joined Decube, a data observability product.

My Wellbeing

Beside the dev part, this has been a healthy year for me as well, for I have weekly sports routine, going to the gym, meeting people and share some insights. I went to the several natural places in Malaysia such as Fraser, Cameron Highlands, Taiping. I also went to hotsprings, do some extreme sports such as water rafting, just to enjoy myself.

Since Xsolla provides us with gym membership, I maximise that opportunity by going to the gym, picking up weights, and improving my wellbeing. At the same time, playing badminton and futsal weekly increases my stamina a bit, so I no longer feel fatigue quickly.

However, I got COVID-19 twice this year 😅 - once around February, and another one on December. Well, I braved through both times, which brings me to 4-timers overall since COVID-19 started. What a life!

Starting A Community

Since my personal brand effort for years started to bear fruit, I keep on writing articles here on dev.to, while engaging with my followers and friends on Twitter. Discussing more about careers, engaging with other people, exchanging ideas and knowledge.

Around March 2023, I just thought that I wanted to start a community using Discord. Little did I know, just in less than 1 year, we reached more than 2k members (both active and passive members), and appointed a total of 10 admins to help me curate the contents. I didn't really expect to go that far, but I am happy other people share the same sentiments.

This year alone, I met a lot of great people. Just to make me feel that I am nobody - people share their insights, and I share mine. Zahin Zulkipli, Afrie Irham, Malcolm Kee, and others are the people I met and I adore, because I know that I still have a long way to go.

The Malaysian dev landscape on Twitter has been more livelier as well, thanks to the people. But of course, it is only because these people are in my circle.

Passion in Teaching

I am invited to become a mentor and a coach to a boot camp organised by KelasProgramming, a local programming course company by Iszuddin Ismail. And for a 6-month long online bootcamp, I coach nearly 100 students for web development.

It has been an experience to coach people and mentor them at the same time. This forces me to structurise what I know, and share it with the students. I know it is not perfect for now, but I identify my weakness in delivering content, and plan to improve it, both in the next batch of bootcamp, and my content creation that I plan to start next year.

A Change of Air

In September, I moved to Decube, a startup company. Honestly, I didn't really learn much about frontend stuff, but now I had to learn more about project management and leadership. I also paved my own way to be DevRel (though it is not official), by leveraging my personal brand.

It is not easy though, because from day 1 I joined, I had to be involved in building a new module. Luckily, with my heuristic approach in code diving, I am able to pick up quickly and manage to deliver with the whole team.

What's Next?

This is an important question, since this affects what I want to do next year.

First, I am gonna spend my incoming years to reach my goals by growing alongside Decube for now. I need to pave the road myself, and I have a clear goal now.

Continuing my passion in teaching is something that I need to improve, both in bootcamps and the community. I will start the content creation next year, but slowly (because I am still shy in front of the camera 😖). I already have some in plan, just wait for it!

Probably, there will be a "next stage in life"? I don't know.

But one thing for sure, I will continue to take care of my health, the community, and my career. Hoping for a yet challenging future ahead.

My Takeaway In 2023

I learned that there is more to life than coding alone. Taking care of your health, exploring the unknown, teaching and learning (yeah, forgot that I learned Russian and Japanese this year alone), learning insights from great people. It has been a learning year for me generally, and I want to keep on giving.

And that's it, folks! Thanks for reading till the end, and have a great 2024 ahead!

Until next time of writing, peace be upon ya!

Vector Map Creation for Stadium Bukit Jalil, Malaysia

Atif Aiman — Mon, 04 Dec 2023 15:17:09 +0000

Salam and holla guys!

Before I blabber myself talking about the process of me creating the vector maps, I would like to give you some background about a project that I have contributed, called BukitJalilStadium, which kickstarted by a great guy, @afrieirham, and you should check out his profile and his project!

In case you are curious, you can check out the repository of Bukit Jalil Stadium and the deployed version: bukitjalilstadium.com.

In case you don't know where Bukit Jalil Stadium located, it is one of the main stadium of Malaysia, which is located at Kuala Lumpur, Malaysia. You might want to pay a visit and Stadium Bukit Jalil can be one of the spot you want to look out for!

Well, let's get started!

Inspecting the original BukitJalilStadium.com

Afrie has created this website, because he is inspired from a project by Peter Askew, person behind VaughtHemingway. And overnight, the project created by Afrie suddenly become a Malaysia's sensation.

As a normal, curious person, I just look into the website, and it is cool, considering the high-definition photo he took previously, and well-organised photo. However, there is something that I feel kind of cumbersome - I need to keep crosschecking between the link and the stadium layout he provided before. Mind that, within a short time, he actually done a really great job, but I really wish we can improve the experience of navigating each seatings in the stadium.

If you noticed, the top section is a list of seat codes (which are the links), and the image of stadium layout. I feel like it is tiring to keep seeing which seating that I want to survey from.

And then, the eureka idea comes in! What if we can interact with the stadium layout, and just navigate from the layout?

Utilising the AI to Learn

Honestly, even though I wish I can do something, I don't know how to do it. So, since now we have second big brain, why not just try asking AI to find a possible solution? That is when I open ChatGPT 3.5 to prompt how can I make the stadium layout interactive.

You can follow my prompts with ChatGPT on how can I implement stadium layout interactions, as we did with maps.

Straight away, ChatGPT suggests SVG map. If you follow my prompts, I even ask for silly improvements, including rotations, non-rectangular seating shapes, and so on. Alas, I got the idea on how to do it. I tried to run the suggestions given by ChatGPT, and well, I am pretty satisfied. But, there are some challenges that I faced, right before the development.

Problem Identification

Even though I already got some idea, there are several things that I need to consider:

I have no SVG whatsoever for the stadium layout. Though it is elliptical, I still need to map the seatings to each sectors.
I need to think about ease of access, so that user can choose between interacting with vector maps, or just with the links that we had before.
I need to think about scalability - what can we do next with this vector maps, so I can put that in mind when doing the vector maps interaction.

Well, yes, I am a bit overthinking kind of guy, but hey, this is a new problem for me, and I would love to see how this will turn out.

Let's start with the first problem, shall we?

SVG Map Creation

I was from the graphic design background. I learn to utilise whatever tools that I learn to used before, for all my contents, including this article's header. I craft all my assets on my own.

And there is where it hit the nails. Why don't I just create my own SVG in Figma?

What I did, is I take stadium layout provided by the original website, and take it into my Figma. And all the tracing job begins. And all of that, is a manual job.

And so, this is the comparison after I traced all the layouts with the photo, side by side.

The thing that I love about Figma, is I can just use pen tool, and create whatever vector stock that I need, and change it to something else, without having to rely on designers to do it for me. You might ask - "why don't you just use the tool to trace it instead?". Well, I am a perfectionist, and I feel fragile after testing some of them, and not getting what I want 😅, so, manual job, here I go!

So, I have traced every sectors in the stadium, that is nice! But does the challenge stops there?

Bringing the Vectors to Code

To preface the next challenge, here is the output, after I exported it from Figma as SVG. (I will just put few example, because the output is so damn long!)

<svg width="2139" height="1718" viewBox="0 0 2139 1718" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M531 1577.5L517.5 1613.5L661.5 1662.5L674 1626.5L531 1577.5Z" fill="white" stroke="black"/>
  <path d="M531 1577.5L674 1626.5L702 1531L655 1517L646.5 1539.5L611.5 1527.5L619 1506L573 1485.5L531 1577.5Z" fill="white" stroke="black"/>
  // The rest of SVG
</svg>

There are another set of problems coming in:

It is hard to store each paths, because if I want to change something, or at least include something, I need to go through all paths (for Stadium Bukit Jalil, we have a total of 133 sectors, including roofs). So, I need a simpler way to store these info, without jeopardising the assets).
The path of each sectors are not arranged as I want, it is damn messy. But the sectors are shaped as I traced in Figma.
There are position constraint and preset fill and stroke. I need to make is customisable.
I have to make every paths interactive, so every paths should be wrapped with something.

So, let's go through each of these problem.

Problem #1: Path Storage

I need to store all these paths inside SVG properly, so that I can reuse whatever stuff that is generated and modify it at will. Assume that we can just throw all these information to the database, and we can disable from there (like, what if the stadium manager want to disable one sector for maintenance purpose).

To do that, I have to split all the props from the paths. Do you think I want to do another layer of manual jobs? Nah, we can do it the "React way".

So, for temporary, I did this code.

import React, { useEffect, useRef } from 'react';

const SvgComponent = () => {
  const svgRef = useRef(null);

  useEffect(() => {
    // Function to extract all attributes from a path element
    const extractPathAttributes = (pathElement) => {
      const attributes = {};
      // Get all attributes of the path element
      for (let i = 0; i < pathElement.attributes.length; i++) {
        const attribute = pathElement.attributes[i];
        attributes[attribute.name] = attribute.value;
      }
      return attributes;
    };

    // Reference to the SVG element using useRef
    const svgElement = svgRef.current;

    if (svgElement) {
      // Get all path elements in the SVG
      const paths = svgElement.querySelectorAll('path');

      // Extract attributes from each path
      const pathAttributesArray = Array.from(paths).map(extractPathAttributes);

      // Console it, so I can copy later on
      console.log(pathAttributesArray);
    }
  }, [svgRef]);

  return (
    <div>
      <svg ref={svgRef} width="100" height="100">
        <path d="M10 10 L90 10 L50 90 Z" fill="red" stroke="blue" />
      </svg>
    </div>
  );
};

export default SvgComponent;

And, this is the sample output in the console:

[
  {
    fill: "white",
    stroke: "black",
    d: "M58.5 639.5L22.5 628.5L1.5 696L38 707.5L58.5 639.5Z"
  },
  {
    fill: "white",
    stroke: "black",
    d: "M109.5 445.5L143.5 462.5L62.5 628L28.5 610.5L109.5 445.5Z"
  },
  {
    fill: "white",
    stroke: "black",
    d: "M147.5 452.5L120 427L221 306L250 330.5L147.5 452.5Z"
  }
]

What I did, I just copy whatever is in the console, and paste it into a file to store all these info, into sectors.ts. This will serve as configurations, and I can scale it to whatever I feel I need to add, which I will describe later on.

Well, now, I have list of arrays of sectors' configuration. That is nice. Let's go to the next problem.

Problem #2: Path Arrangement

We have all sectors' information, but there is one thing - THE SECTOR PATH ARRANGEMENTS ARE EVERYWHERE!

I went through yet another manual job - rearranging all paths. Since I need to identify all paths, I add another attribute to each path, id.

{
  id: "312",
  fill: "white",
  stroke: "black",
  d: "M147.5 452.5L120 427L221 306L250 330.5L147.5 452.5Z"
}

If you refer to the original photo, each sectors has its own "code", thus I use it as ID. This is important, since I need to identify which sector I am modifying, rendering (React requires key identification), and well, readability when I go through each items for further modification.

And well, I am the perfectionist. Guess what I did to these arrays of path information? Yeah, I rearrange every sectors arrangement! Takes nearly 1 hour to do so 😭.

Okay, cool! Now we solve 2 problems - storage and arrangement. Onto the next!

Problem #3: Path customisations

This is not really a big problem, because we have all paths processed and arranged according to my vision. So now, we need to jump into React code and start mapping all these info.

<svg width="2139" height="1850" viewBox="0 0 2139 1750" className="w-[800px] h-auto">
  {
    sectors.map(({id, ...sectorProps}) => (
      <path
        key={id}
        className="hover:fill-[#444]"
        {...sectorProps}
      />
    ))
  }
</svg>

Since now, we know that all of the elements inside <svg> we have are all <path>, we can just loop into sectors, and pass all the props to the <path> element.

And voila! We have our customisable paths, so we can remove, add, or do something on top of them. For example, interactions! Just a simple one, I make it so that it will change the fill once it is hovered. If you want to make the sectors to have its own category, you can actually change fills and strokes inside sectors, and it will automatically change the paths.

Now, for the last problem.

Problem #4: Interactions

Well, in HTML, we can have different ways for interaction. We can have buttons, anchors (links or <a>, if you are not aware), and others. But, I need to make it accessible as well, so that people with challenges, such as people without mouse (I am looking at you guys, Vim users!) can benefit from this feature!

I can use button, however inside SVG, button behaves differently, so button have to go out of the question. Now, leave me using anchors. The benefit of us using map from the array to the <path>, is that, we can just wrap the <path> that we have with <a> without so much effort. React rocks!

<svg width="2139" height="1850" viewBox="0 0 2139 1750" className="w-[800px] h-auto">
  {
    sectors.map(({id, ...sectorProps}) => (
      <a id={id} key={id} href={LINK_TO_PAGE}>
        <path
          key={id}
          className="hover:fill-[#444]"
          {...sectorProps}
        />
      </a>
    ))
  }
</svg>

So now, you have vectors which are interactive! Of course, you can change it anyway you want, and ready for future improvement, such as search function!

The Result

And so, I sent the video to him, and he decided to post it.

// Detect dark theme var iframe = document.getElementById('tweet-1729773452109008949-270'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1729773452109008949&theme=dark" }

Of course, there are still a lot of stuff happening here, but I will keep this article focused on the vector map interactivity. From here point onwards, it is up to you to add more creativity. As you see from the X post, I also added other interactions, such as displaying ID as I hover through sections, added some texts, active states and so on. But once you get the basics of how we add the vectors, you just have to add more on top.

Conclusion

Well, that is how you want to make a simple interactive vector maps! Since I have this perfect use case to do it, so I just go crazy over it, and make one myself. At least, now I understand how people do vector maps, and do so many things with it. But, you also need to have the ability to make vectors yourself, and Figma being free (of course limited) is a tool to create a lot of stuff!

Just simple steps - create assets in Figma, extract paths for scalability, and just wrap all those paths in anchor for interactivity (and accessibility on top).

It doesn't have to be <path>, it can be square at first, or ellipsis. Once you grab the fundamentals, you can make your own paths in Figma, and go wild with it.

And that's it, folks! A long article, but I hope this will be beneficial for you guys. Until next time, goodbye, and peace be upon ya!

The Difference Between `var`, `let` and `const` in Javascript

Atif Aiman — Sun, 09 Jul 2023 15:10:38 +0000

Salam and hello everyone!

Today, I want to write a simple article, describing a fundamental stuff in Javascript, which is the variables. We will look into how we declare the variables, and how it differs from each other.

This article will only focus on the method of variable declaration, and not the data types in Javascript. So, stay tuned!

If you are tired of reading these long words, just scroll to the conclusion, and see the answer.

Javascript Back In Days

Before 2015, the only way for us to declare variable in Javascript is only one - using var.

var clan = "Uzumaki";

Simple, right? So, after we declare a variable, we can do some modification to the variable in any way possible. Let us consider one situation, where we have a function:

function guardKonoha() {
  var clan = "Uzumaki";
  console.log(clan); // Output: "Uzumaki"

  var clan = "Uchiha";
  console.log(clan); // Output: "Uchiha"

  if (true) {
    var clan = "Haruno";
    console.log(clan); // Output: "Haruno"
  }

  console.log(clan); // Output: "Haruno"
}

Great! We can declare a variable using var, and we can modify the variable anywhere in the function, even in the if section. This is what we called as functional-scoped - as long as it is in the same function, it can be modified or redeclared.

Well, suppose that is good, right? Okay, let me bring to you another example.

function attachKonoha() {
  if (true) {
    var clan = "Otsutsuki";
  }

  console.log(clan); // Output: "Otsutsuki"
}

Wait, although the variable is declared in if statement, we can still console it? The answer is, yes! As I said just now, it is function-scoped, we can declare, and we can redeclare as long as it belongs to the same function.

Well, if that is the case, that means var can be troublesome? It depends on the usage though, if you see it as desirable output, then it is good to go! However, the variable can be redeclared anywhere in the function, so you might want to be careful with that.

The Introduction Of `let`

In 2015, the ECMAScript has released a new way to declare a variable, called let. In the beginning, this might look similar to var on first glance, but wait until you see this.

// `var` declaration
var transformations = "Kekkei Genkai"
console.log(transformations); // Output: "Kekkei Genkai"

var transformations = "Kekkei Touta"
console.log(transformations); // Output: "Kekkei Touta"


// `let` declaration
let element = "Raiton ⚡️"
console.log(element); // Output: "Raiton ⚡️"

let element = "Fuuton 💨"
console.log(element); // Output: "Fuuton 💨"

In this example, we can see that the behaviour is similar to each other. Let us look deeper into the usage - in the function. Since we already see the var redeclaration at the top, let us see the example for let instead.


function guardKonoha() {
  let clan = "Uzumaki";
  console.log(clan); // Output: "Uzumaki"

  let clan = "Uchiha";
  console.log(clan); // Output: "Uchiha"

  if (true) {
    let clan = "Haruno";
    console.log(clan); // Output: "Haruno"
  }

  console.log(clan); // Output: "Uchiha"
}

So, noticed the difference? Let me show you chunks by chunks.

In the first part, I declare clan using let as Uzumaki, then redeclare it the first time to Uchiha. It sounds okay. But then, I entered to if block and redeclare the second time to Haruno. Well, I logged the value inside if just fine, but when I logged after that outside of if block, suddenly it is logged as Uchiha (?)

Well, that happens! But what is the reason behind it? let is actually block-scoped, where it will only affected in a block instance. While we did redeclare the variable in the if scope, the value outside remains the same, because it has different blocks!

Oh, so we just have to be careful about variable redeclaration, right? Well, let us go into second example, where we try to declare it inside the if block. What will, do you think, will happen?

function attachKonoha() {
  if (true) {
    let clan = "Otsutsuki";
  }

  console.log(clan); // Throws error!

!!! It throws an error! Since let is a block-scoped, means that if we declare it inside if block, we cannot get if outside the if block? Yes it is! With this, we can prevent variable pollution by not allowing redeclaration of variable outside the scope.

Before We Go Into `const`

Before we go into const example, let me give you a new word - mutable. So, what is mutable?

Mutability is an ability for a variable to be reassigned.
Note that every variable can be redeclared, but it doesn't mean that it is mutable.

let clan = "Hyuga";

// This is redeclaration
let clan = "Namikaze";

let clan; // Becomes undefined

// This is reassignment
clan = "Sarutobi";

You need to pay attention to the let usage.

Redeclaration means that we replaced the existing memory of the variable to the other value.

Reassignment means that we replaced the value of the existing variable, but there is no change in the memory allocation.

Mutability only affects the reassignment, while the redeclaration remains intact.

Both var and let are mutable, means that the value can be reassigned anytime.

var village = "Konohagakure";
village = "Otogakure";

let eye = "Sharingan";
eye = "Byakugan";

Okay, now we are ready to explore const!

The Immutability of `const`

The same year, ECMAScript released yet another way to declare a variable using const, which should be immutable. Let us look into the usage.

const beast = "Kurama";
console.log(beast); // Output: "Kurama"

const beast = "Gyuki";
console.log(beast); // Output: "Gyuki"

beast = "Chomei"; // Throws error!

As you can see, we first declared beast as "Kurama", then we redeclared as "Gyuki". We don't see any problem, until I attempt to reassign the beast to "Chomei", which throws an error instead! This is what we called as immutable, where we cannot reassign a const variable.

So, that is the difference between let and const.

const is also a block-scoped, means it behaves similar to let in term of position of declaration.

function summonBeast() {
  if (true) {
    const beast = "Saiken";
  }

  console.log(beast); // Throws error!
}

Well, const is a short word for "constant", where it should be constant throughout the code.

Misconception of Immutability

Did I say that immutability means that the value won't be able to reassigned, right? Well, let us look further into more example. But this time, we will look into arrays and objects!

const beasts = ["Shukaku", "Matatabi", "Isobu", "Son Goku"];
console.log(beasts[0]); // Output: "Shukaku"

beasts[0] = "Kokuo";
console.log(beasts[0]); // Output: "Kokuo"

Chotto matte kudasai! I thought const should be immutable right?

Well, you are right! const is indeed immutable. However, what happens here is not reassignment, since the value is still an instance of the Array.

While basic type of variable such as number, string and boolean have literal values, it applies a different case for array and objects. Both array and object are instances as a value, so once it is declared, we cannot change its instance. For example:

const beasts = ["Shukaku", "Matatabi", "Isobu", "Son Goku"];

beasts[1] = "Kurama"; // This is okay 👍🏽

beasts = ["Kokuo", "Saiken", "Chomei", "Gyuki"];
// Throws error! 👎

const beasts = ["Kokuo", "Saiken", "Chomei", "Gyuki"];
// Variable redeclared, so this is okay 👍🏽

So, for both array and object, you can still change the value inside it, but you cannot change the instance itself.

So, is there a way if I want to make sure any of the value inside array or object instance become immutable too? The answer is yes, we have! We have to freeze it, using Object class.

const beasts = ["Shukaku", "Matatabi", "Isobu", "Son Goku"];
Object.freeze(beasts);

beasts[0] = "Kurama"; // Nothing happened!

Object.freeze() will convert array or object to become readonly.

Conclusion

Well, that's it, folks!

TL;DR

var is function-scoped and mutable.
let is block-scoped and mutable.
const is block-scoped and immutable.

So, I hope you get the gist of it, and have fun with Javascript!

Until then, peace be upon ya!

How I Imagine My Future in 2023

Atif Aiman — Mon, 26 Jun 2023 17:51:14 +0000

Salam and hello everyone!

I want to announce that I finally reach 1K followers on DEV! 🎉🥳 Thank you everyone for sticking with me, read all of my stuff 😊

But today, it is not about any tutorial. I feel that it is time for me to revisit my dream from day 1, and what I want to do from now on. One heck of the journey, but I am still in the beginning.

From Where It Begins

I started know the first code back in the Myspace era, where you have to customise the templates, so that you become one of the cool kids on the block. But did that makes me go into programming? No, I just do it out of fun of the fame race.

But I started to see this code stuff when I was 16, when my cousin, who is studying in his community college nearby my hometown, suddenly shows how he created a website to me (he didn't become a developer though). Just imagine, from dreaming of becoming a doctor and following both my parents' step, to become a programmer. But that time, it is not enough for me to have a clear dream of becoming one, just yet!

I explored a lot of stuffs just to seek my purpose, I have been a teacher in local school, become karate instructor (since I was a karate athlete), and graphic and motion designer. Those were fun times! However, the stuff didn't really satiate my hunger.

As The Door Opens

Here in my country, we have something called foundational studies, which kind of have the same level of diploma programme. I took 2-year foundational studies, and during that time, I am exposed to lots of these programming stuffs, both in academics and self-exploration. Learning about C in class, and Python during free time in Coursera (shout out to Dr Charles 🧙🏻‍♂️), I started to see my dream as a programmer, just it feels uncertain of the state of the industry during that time (plus I have crippled self-esteem for a reason). Do I give up? Nope!

While I am doing design stuffs and organising some workshops on Adobe (was an ambassador before), I tried to really understand how industry is. Except, I didn't really look into local industry, but rather the trend of the world. Twitter is one of the biggest contribution of where I am now, thanks to all communities out there and DEV.

Achieving top scores in software development subject, I have some confidence in it, but the path remains unclear. Right after graduation in 2018, I feel like I need to force myself to tap into one, and the one that feels close to home for me is frontend and mobile development, since I have design background. So, I decided to become a research assistant at the same university I studied before for a year, developing an app. But here's the problem. I don't know how to develop an app 🥶

So, I went to my university library (during this time, my old laptop has broken, so I had to go to my university library and use the computer) and learn some stuff. I just choose to pay $20 for a Pro subscription for only one month on Codecademy. I don't know what taking over me, but every day I spent my time learning as much as I can for a month. Going hometown, I just borrow my mom's laptop to do the same.

My First Successful App

Soon after I enrolled Pro subscription on Codecademy, I created an app for the whole year of 2018. Without knowing the best practice, I just throw whatever I know about React Native. Little did I know, as the time passed by, I completed one app by myself. How awesome is that, right?

That is my first step going to the coding world. Building something, get some confidence, then I step out to the industry world, learning from a lot of awesome people I had. I am in utmost grateful to Him, I met a lot of great people from different walks of life.

Well, my dream becomes clearer. I want to be a really awesome frontend developer there is. I head out to communities out there, learning lots of stuffs, but of course I need to build myself some stuff!

The Valley of My Dream Graph

In 2020, there are a lot of stuffs going on. The lost of my loved ones, and several months later the COVID came, the closure of my current company at that time. I feel lost. I don't know what to do. I spent days and weeks and months with playing games, just to distract myself from those.

I see my dream diminishing, lost interest, become astray of what I really want to be. One day, I saw an ad in my social media about an event that I heard previously, but somehow catches my attention. Jomlaunch in 2020. A local event in my area, for all developers, creators, and solopreneurs. I didn't expect I've created bonds with a lot of amazing guys. Because of them, the inspiration that diminishing is now rekindled.

People Trust In You

They ask me to build a web app for a day, and throw it on Digital Ocean. And who can guess, that we manage to secure a win and get some credits and merchandises, right? At that point, it becomes my "aha!" moment, and explore a lot of stuffs, learn and relearn stuffs until I understand most of the fundamental stuff of web development.

I wrote a lot of stuff. From Medium in 2019, and now actively writing articles right here in DEV, and get my articles features multiple times, I get the motivation to keep writing and teach a lot of code stuff, especially on React.

But of course, life is not a straight line. I got demotivated, I stopped writing for quite a long time, and try to get back my writing habits. Now, I just want to write when I feel I want to.

Writing is liberating. When you write things about coding, I have to recollect what I understand previously, and structure it, so that people can read and understand what I tried to write about. As you write, you are actually teaching yourself, and gain much more understanding, since you need to do the research as well.

Did I Reached My Goal?

I worked on some companies, and all of them give their trust on me to develop a high-end frontend stuff, aiming for a pixel-perfect quality. Not just that, I believe that if I learn fullstack, I can reach different understanding on how we can further improve my standing on frontend development.

Well, today I think that somehow my dream is as clear as it is, which is to become an awesome frontend developer, and I reached it! 5 years it takes for me to reach where I am today.

But, not just frontend stuff, I learn a lot of things - backend, architecture, the opinions, developments, entrepreneurship. And I gained a lot of insights on how a product should be.

Discovered Different Goal

Throughout my journey, I interacted with a lot of people and system, and somehow I feel that more and more domain has been unlocked. I love how Dan Abramov, Evan You, Rich Harris and others discuss some stuffs, agreeing, disagreeing on how a library should be. I love how Lee Robinson interact with other developers as a DevRel of Vercel. To reach their point, I need to widen my vision - study lots and lots of stuff.

As I stick with my goal, I discovered a different goal - to become something like DevRel - just talk about these code stuffs, the architectures, the challenges, the "hit-the-mark" question, so that I can solve the pain points. These discussion spark my other part of my passion - to exchange these infos.

My Next Dream

So, what is my dream now?

Well, I want to be an evangelist. I love to read, involve in discussion on how stuff is built. Language-agnostic, celebrating different approaches, solving the problems on the fundamental parts. It can be DevRel, or Individual Contributor, or anything revolves around that domain.

I can imagine myself, standing on a stage, telling a company's architecture decisions.

I know it is still far away from what I have now, and I need tons and tons and tons of reading, learning, and exploring, but that doesn't stop me. I dreamt of frontend development, and I have become one.

So, that will be my next milestone. While doing that, I will build my reputation, and probably my course in the meantime (while assisting bootcamps in my local communities), keep the development talks going through one of the platform I started.

Am I that great? I've seen far much better people, given the same experience I had. I feel the insecurities. That doesn't mean that I need to stop now. I just have to continue running, or brisking, or walking, or crawling, but I need to focus.

So many people starts to see me as a figure. I can feel the pressure from lots of people expecting the best out of me. Some times, I just want to tap out, and have a relax pace. But hey, at least people trust you more than yourselves, which means people trust my judge! I will try my best to fulfill that image.

Conclusion

This is a time for a different adventure. I will look forward to exploring more stuffs and talking about them. If you might have any suggestion, please let me know in the comment section below, and I might look into it :)

And again, without you guys, I won't be here, keep writing about code stuffs. Apologise if my grammatical errors are everywhere, but I try to improve from time to time. Delivery quality! Thanks for reading up until this point, and have a great day ahead!

Until next day, and peace be upon ya!

CSS 🤝 HTML Data Attributes

Atif Aiman — Fri, 09 Jun 2023 18:02:35 +0000

Salam and hello everyone!

Whoa! It has been a long time, since I wrote the last article here, but here we are! This time, I will write about things that "I believe" some of the developers didn't know that you don't have to do conditions for classes in HTML!

To explain further, let us go deeper on what is the problem that I attempt to highlight here.

Style States For A HTML Component

Let me bring a use case here. Just imagine that you have tabs, and you need to track the state whether the tab is active or not. Of course, one way of doing it is using Javascript!



<nav id="tab">
  <a href="#" />
  <a href="#" />
  <a href="#" />
</nav>

<script>
  const activeTab = 0;

  const navTab = document.getElementById("tab");
  const targetTab = navTab.children[activeTab];

  targetTab.className.add("tab-active");
</script>

For a vanilla Javascript, it makes sense that you can use className.add() to add the tab-active class, right?

So, let's head to the CSS part!



#tab a {
  // Initial state of tab
}

#tab a.tab-active {
  // Active state of tab
}

That's cool! With the change of activeTab value, we will trigger the tab-active based on that. Keep in mind that you need to remove the class if it is no longer active!

This will be one way of solving the conditional issue with vanilla code. Let's jump to one of the framework, and we will try to replicate this thing, shall we? And of course, I will choose React!

Things Are Going To Get Tough

By using React, stuffs are getting easier. But are we? Let us try to replicate a simple way of doing the same thing I previously attempted to do.



const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => (
          <a href={tabConfig.href} className={activeTab === index ? 'tab-active' : ''} />
        )
      }
    </nav>
  );
};

Nice! Except, that it is unnecessary to set the className to an empty string if it is not active, right? This might affect the readability as the component grows!

So, let me introduce to you, the data-attributes!

Some of you might heard about data-attributes, and you might be interested in this!



const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => (
          <a href={tabConfig.href} data-active={activeTab === index} />
        )
      }
    </nav>
  );
};

Not much change huh? Okay, let us take this slow from here.

What I did just now, is that I set data-active to the <a> instead of className. So, I don't have to declare unnecessary className conditions.

Before we are going to do that, we need to change something to the CSS we had previously.



#tab a {
  // Initial state of tab
}

#tab a[data-active] {
  // Active state of tab
}

So, I removed the tab-active class, and replaced it to a[data-active] instead.

What are we improving right here? It is readability of the implementation. Instead of playing the guessing game of which class are we going to trigger, we just set the condition to the data attributes. With this, developer will understand which element/class/id is having states, as we treat pseudo selectors, like :hover!



.myComponent {
  // Initial state of component
}

.myComponent:hover {
  // Hover state of component
}

.myComponent[data-active] {
  // Active state of component
}

Can I use value other than boolean? Well, of course, you can set other values to the data attributes, with a condition that it should be string.



.myComponent {
  // Initial setting of component
}

.myComponent[data-variant="primary"] {
  // Primary state of component
}

This sounds interesting, right? Not convincing enough? Let us try to introduce a CSS framework - Tailwind CSS 😄

Here Comes The Trouble

Let us bring the original problem. Now with Tailwind!



const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => (
          <a href={tabConfig.href} className={activeTab === index ? "text-blue-500" : ""} />
        )
      }
    </nav>
  );
};

Well, this is not wrong, except that this might work on your local machine, but not in production after build. You might find the glitch, only to learn that Tailwind fails to tree shake the class for production build. The classes that we add in the condition only works if the behaviour is expected, but that is not the case. So, what are my options?

Of course, you can just provide condition for the whole component, right? 🤔



const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => activeTab === index
          ? (
            <a href={tabConfig.href} className="text-blue-500" />
          ) : (
            <a href={tabConfig.href} />
          )
      }
    </nav>
  );
};

One, we are duplicating codes, and two, we are reducing the readability with all those ternaries. Just imagine that the next developer have to come in and guess what are you trying to do here. So, I am bringing the better suggestion! Let's use data attributes!



const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => (
          <a href={tabConfig.href} className="data[active]:text-blue-500" data-active={activeTab === index} />
        )
      }
    </nav>
  );
};

Now, let's us break this into parts:

I am adding data-active to the a element to control the state.
I am adding data[active]: to the className to trigger the style if the data-active returns true.
As the className is no longer in conditions, the behaviour can be expected, thus this approach is safe from tree shaking. Thus, it works better!

Okay, let's spice things up! I will add all needed styles using Tailwind to see how it will affect the readability when using data attributes.



const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => (
          <a href={tabConfig.href} className="px-2 py-4 text-black bg-slate-200 data[active]:text-blue-500 data[active]:bg-zinc-200" data-active={activeTab === index} />
        )
      }
    </nav>
  );
};

As usual, the dilemma of using Tailwind is to increase the class names, right? To improve this, I will "kinda" introduce my own way of breaking classes into parts.



/**
 * @param classNames string[]
 **/
const c = (classNames) => classNames.join(" ");

const Tab = (tabList) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <nav id="tab">
      {
        tabList.map((tabConfig, index) => (
          <a href={tabConfig.href}
            className={c([
              "px-2 py-4 text-black bg-slate-200",
              "data[active]:text-blue-500 data[active]:bg-zinc-200"
            ])}
            data-active={activeTab === index}
          />
        )
      }
    </nav>
  );
};

What I did, is I just separate it into lines, then use the join function to reassemble the class again. Since it doesn't involve any conditions, the class are still safe 😁. With this, I can separate className to lines, which each represents each state. Readable, tree-shakable and working!

You can learn more about how data attributes can be used in Tailwind if you are interested!

Conclusion

Data attributes are beneficial for a lot of thing, and CSS string is one of them. We can leverage CSS data attributes for this purpose. Of course, this is just one of the way to do this, but data attributes are just too awesome to let it by. Now you know!

Well, I hope this strengthen your knowledge on CSS. Keep healthy folks, and peace be upon ya!

[A Year In Review] The Great Escape of 2022

Atif Aiman — Tue, 27 Dec 2022 15:22:00 +0000

Salam and hello everyone!

Whew! What a year in 2022, I believe there are tons of things I learned, my motivation has from haywire to barely manageable, and new challenges arise. The first time I jump despite the stability I can have something greater, and full of the unexpected.

Career Jumps

Well, prior to 2022, I had to keep changing my job because of a lot of things - company closure before the lockdown, a company with the financial crisis, and some of the part times. And since August 2021, I moved to my local payment gateway company as an "Application Developer" through connections. There, I was initially responsible for spearheading the development of the new payment solution engine, but somehow, along the way, I believe the company got distracted and focused on a different project. Well, that is just a normal thing that happens in a company, except the deadline is extremely close upon knowing that we had to do that.

I would say, there are some red flags, and it doesn't have a good environment to nurture my curiosity - to learn something new. Though it is a dream that, a company adopts remote working, the new approach management introduces to us is "Anytime, Anywhere, Anyone", where one can work anywhere one wants, anytime, and it doesn't matter who you are. This sounds good until they become too literal with that statement. Funny, my colleague said that they actually mean "Every time, Everywhere, Everyone", including weekends.

That exhausted me to a time when I decided that I had to resign as soon as I can, because of the mental exhaustion I get non-stop from previous years, even without any backup plan. So, early this year, I took a great risk to tender my resignation without any remorse.

A Great Jump

From a great risk, I, as anyone does, search for a new job, hoping that I can secure one good job. Scouring my LinkedIn, and some job portals, I manage to get 3 interviews. My memory is still fresh, around mid-March, I saw a lot of job postings coming from Xsolla. At that time, I know too little of Xsolla, assuming that it might be another startup company. After some study, I am quite surprised that it is an international company, in game commerce! After a week of applying, I landed an interview with Xsolla. Well, the process is very quick! I got the result a week after I got interviewed, and I am hired! I am extremely glad that I manage to secure a job after taking the risk, especially post-COVID. And, in early May, I joined Xsolla!

Since this is my first MNC (multi-national company), I didn't have any expectations yet, except that it has a good environment for me. Well, I am not disappointed! With a pantry full of food, full of pleasant coworkers, and a happening team! Well, what's in for me?

A proper chance for me to explore things. From Javascript things to Module Federation, to Web3 and NFT, to Scrum methodology, to more understanding of Typescript with utility types, concurrency, Golang and Rust. I mean, a lot! Xsolla give you 4 hours every week for your education, so you can pick up new things for yourself, and indirectly benefit the company. I am also exposed to a proper developer culture, which is code reviews, understanding developers' coding behaviour, becoming a bar raiser and reading lots and lots of articles, the developer matrix, and so on. Not to forget, a lot of challenges as well with integration points, and unclear objectives, but well we strive despite the challenges.

I haven't felt this for a long time since my first company. An experience where you have autonomy, but at the same time you need to also contribute to the company. The funny thing is, my current team lead was also my colleague from my previous company. What a small world! Other than that, I got a chance to know everyone through events such as our town halls, Xsolla events, and the event that I organised every week - badminton 🏸!

Other Things To Be Thanked For

There are other good things I managed to acquire as well, thanks to Him. Though I lost my car last year, I managed to get full insurance reimbursement for me to purchase another car - which is now a one-year celebration! I managed to resolve my financial issue, get the proper gear for work-from-home, get in touch with my friends, acquire new friends, meet someone great that I longed for 2 years, attend my friends' marriage, experience Airbus flight simulators, and learning the Russian language in addition to my language belt.

And along the way, I had my own downs as well. 2 times COVID, which brings me to 3 times overall COVID experience (including last year), fail for my PSD exam.

But overall, I feel grateful to Him and my friends who help me along the way. Without them, I might still be wandering in the dark, with spikes. I never believe in accidental events, for I know He has the best thing He plans for me.

Into the future

Well, as you learn more things, you will realise that you still have a lot to learn, as if you know nothing yet. That is the same reason I feel thrilled so that I have a lot to explore. From learning about development, management, the consultation. And start taking care of close friends, and families. And of course, myself, despite my anxiety and lack of self-esteem.

Closing

I don't have any proper closing, only gratefulness. Might as well feast your eyes, since you guys read till the end.

Creme caramel, made by hand.

Just a lamp decoration.

My clingy cat.

My own fried rice with sardine and sunny side egg 🍳

...and as usual, may you guys have a blast year ahead, and peace be upon ya!

Extra

This is done by ChatGPT, me asking to improve this article. And this is the outcome.

Salam and hello!

It's been quite a year in 2022, with many challenges and new experiences. One of the biggest changes for me was making a career jump. Before this year, I had to keep changing jobs due to a variety of reasons, such as company closures and financial crises. In August 2022, I was able to secure a position as an "Application Developer" at a local payment gateway company through connections. Initially, I was responsible for leading the development of a new payment solution engine, but unfortunately, the company ended up focusing on a different project. While it's normal for companies to pivot, the tight deadline made it a stressful experience.

Additionally, the company culture wasn't particularly nurturing for my curiosity or growth. Despite the convenience of remote work, the management introduced an "Anytime, Anywhere, Anyone" policy that turned out to be more like "Every time, Everywhere, Everyone," including weekends. This was too much for me to handle, and I eventually decided to resign without any backup plan.

Taking this risk paid off, as I was able to secure a new job at Xsolla, an international company in the gaming commerce industry. It's my first time working at a multinational corporation, and so far, I've been pleasantly surprised by the great work environment, kind coworkers, and fully stocked pantry. Xsolla also gives its employees 4 hours per week for education and personal growth, which has allowed me to learn about a variety of topics such as Javascript, Module Federation, Web3 and NFT, Scrum methodology, and more.

In addition to my job, I've also been fortunate enough to acquire other good things this year. Despite losing my car last year, I was able to buy a new one and also started a small business on the side. I've also been able to spend more quality time with my family and participate in community events.

All in all, while 2022 has had its ups and downs, I'm grateful for the opportunities and experiences it has brought me.

Di Sebalik Tabir: atifaiman.dev

Atif Aiman — Sat, 06 Aug 2022 21:21:00 +0000

Assalamualaikum dan helo semua!

Moga korang semua sihat je 👍🏽

Kali ini, aku nak bercerita sikit, di sebalik pembuatan portfolio aku, atifaiman.dev.

Amaran: artikel kali ini tersangatlah panjang, dan cerita pasal aku je. Jadi, kalau tak sudi, dah boleh dah angkat kaki 🥲. Tapi kalau korang baca sampai habis, aku doakan korang dimurahkan rezeki dan mendapat hidayah yang berkekalan.

Sejarah

Sebelum aku terjun untuk bercerita berkaitan pembuatan portfolio aku sendiri, aku cerita serba sedikit sejarah aku menjejakkan diri ke dunia web development.

Aku mula tahu tentang HTML dan CSS, daripada abang saudara aku pada tahun 2010, masa tu abang saudara aku sedang belajar berdekatan dengan rumah aku. Walaupun dia tidaklah menjadi seorang jurutera perisian, tapi cukup untuk membuka mata aku untuk mempelajari pengaturcaraan.

Jadi, aku mula jinakkan diri dengan HTML dan CSS, walaupun ketika itu tidaklah kelihatan menarik. Kemudian, secara senyap-senyap, aku pergi ke cyber cafe berdekatan sekolah dan klinik ibu aku untuk belajar serba sedikit. Cuma ketika itu, lebih kepada "ingin tahu" dan bukannya "ingin buat", jadi aku tinggalkan setelah aku tahu. Alhamdulillah, inilah yang menjadi pencetus untuk aku jadi "pakar IT" pada ketika itu setelah aku hilang minat untuk menjadi pakar ortopedik, dan sebaliknya bermula cita-cita aku untuk menjadi aktuaris dan kemudian menjadi "pakar IT". Biasalah, ketika itu aku begitu naif dengan dunia luar.

Tahun 2013, untuk tahun kedua asasi aku, aku menjejakkan kaki ke Pusat Asasi Sains UM (PASUM), untuk mengambil subjek sains untuk asasi aku, Asasi Pengajian Islam dengan Sains. Pensyarah Sains Komputer aku ketika itu, Dr Zahurin Kamali (dia masih lagi paksa aku panggil dia Mr. Z, sebab dia rasa panggil macam tu pelik, dan masa aku asasi, dia masih dalam pengajian PhD beliau). Beliau memang nampak yang aku minat sangat sains komputer, jadi bila aku minta sumber tambahan, beliau rujuk aku ke Coursera pada waktu itu, dan aku bersama kawan-kawan aku belajar Python semasa cuti semester.

Kemudian, aku terus mengambil Sarjana Muda Pengajian Islam dengan Teknologi Maklumat. Aku perlu pergi dan kembali dari Akademi Pengajian Islam (API) dan Fakulti Sains Komputer dan Teknologi Maklumat untuk mengambil kursus berdaftar bawah sarjana muda aku. Kendatipun, aku sangat minat dengan subjek sains komputer, jadi aku banyak mendapat keputusan yang baik dalam subjek yang melibatkan pengekodan. Sampai sekarang aku tak boleh lupa, ujian akhir untuk subjek asas pengaturcaraan aku ialah membuat karakter Dota 2 😂 dalam Java (tanpa antaramuka grafik).

Pada ketika ini, aku banyak menghabiskan masa aku dalam reka bentuk grafik dan gerakan (motion & graphic design). Aku banyak terlibat dengan acara-acara yang memerlukan video korporat. Malah, untuk latihan amali, aku ditugaskan untuk membuat video untuk papan iklan di stadium dan tepi jalan (mungkin ada antara korang yang pernah nampak video aku 😖).

Ya, aku tau yang tak ramai tengok iklan tepi tu pun 🥲. Tapi banyak jugak la kerjasama dapat seperi ICE Watch, Calpis, Air Asia, Proton. Siap dapat pujian daripada diorang. Terharu 🥹.

Bila aku mula terlibat dalam dunia pembangunan web? Selepas tamat semester akhir, aku mula mempersoalkan diri aku, "apa yang ingin aku lakukan selepas ini?". Pada mulanya, aku mempersoalkan sama ada aku ingin teruskan dalam dunia reka bentuk grafik atau mungkin ke arah reka bentuk 3D (pada ketika itu, aku hampir menguasai asas 3D). Tapi setelah aku berfikir, beristikharah, jadi aku bertekad untuk memulakan perjalanan aku sebagai seorang pengaturcara. Pada ketika itu, seorang pensyarah aku mengiklankan jawatan sebagai Pembantu Penyelidikan (Research Assistant) untuk projek Autentikasi al-Quran (lebih ke arah pembangunan aplikasi). Sejujurnya aku tidak serba tahu tentang pembangunan aplikasi telefon pintar walaupun sekelumit, dan aku tidak tahu mana perlu aku rujuk. Aku bersyukur aku telah didedahkan dengan pelbagai Kursus Terbuka Dalam Talian Besar-Besaran (Massive Open Online Courses, MOOC), jadi aku mengambil langganan Pro di Codecademy, untuk belajar dari sifar sehingga menguasai asas pembangunan aplikasi. Di sinilah aku bermula untuk mempelajari React, dan secara spesifiknya, React Native.

Bayangkan, tanpa ada sebarang rujukan tetap, atau tiada siapa yang boleh sahkan sama ada apa-apa yang aku buat itu betul atau tidak, aku terpaksa siapkan dalam masa setahun. Berbekalkan sebulan aku fokus habis-habisan mempelajari React Native, merujuk kepada artikel "amalan terbaik" dan kemahiran pengekodan aku, aku berjaya juga siapkan aplikasi itu dalam setahun. Masa itu, aku menggunakan tetimbun asas, iaitu MongoDB, ExpressJS, React Native dan NodeJS (MERN). Masa ini, aku sudah berjaya mengenalpasti minat aku, iaitu frontend!

Jadi, untuk pekerjaan pertama aku dalam industri, aku menjadi seorang pembangun frontend di sebuah syarikat perdagangan kripto. Di situ aku banyak belajar dan diajar oleh orang yang aku segani sehingga sekarang (walaupun dia kini berada di negaranya kembali, Iran), kerana dialah yang mencampakkan keraguan aku dan ajari aku erti keyakinan diri. Di sini jugalah aku belajar tentang Typescript, tetapi seperti pemula lain, semua taip pembolehubah, aku meletakkan "any" 😅.

Kemudian, COVID-19 mula "menghantui" dunia. Hari pertama Malaysia mengisytiharkan Perintah Kawalan Pergerakan (PKP), iaitu pada Mac 2020, syarikat itu mengisytiharkan untuk tutup. Sejujurnya, aku agak tertekan, dan tidak sentuh pengaturcaraan selama 5 bulan atas sebab putus semangat.

Macam biasa, selepas 5 bulan, aku sudah mula rasa terdesak, dan ketika itu aku mencari pelbagai jawatan, asalkan menggunakan Javascript. Akhirnya pada September 2020, aku berjaya menjadi pengaturcara timbunan penuh (fullstack developer). Aku masih teringat, sebelum aku mendapat jawatan tersebut, perekrut itu bertanya pada aku, adakah aku mahu menjadi pengaturcara timbunan penuh atau menjadi yang lebih terperinci seperti frontend, tetapi jawapan aku ketika itu ialah "asalkan dapat kerja, saya sudah okay".

Semasa aku di syarikat kedua, aku ditugaskan untuk mengendalikan satu projek dari perancangan sehingga penyebaran (deployment). Jadi, aku bertekad untuk mempelajari Next.js, dan ketika itu jugalah aku mempelajari kewujudan Zeit (yang kini menjadi Vercel). Aku menjadi pembangun timbunan penuh secara profesional sehinggalah pada tahun ini (2022), aku bertekad untuk kembali fokus kepada frontend di syarikat terkini, Xsolla.

atifaiman.dev Versi Pertama

Pada awal 2021, ketika aku di syarikat kedua sebagai Pembangun Timbunan Penuh, aku terdetik untuk mula mewujudkan jenama diri aku, iaitu Atif Aiman. Sebelum ini, aku lebih dikenali sebagai al-Serembani, jenama yang aku gunakan ketika aku berkecimpung dalam dunia reka bentuk gerakan dan grafik. Jadi, aku membuat portfolio pertama aku.

Pada waktu ini, aku tidak menggunakan portfolio aku untuk mencari kerja, sebaliknya sebagai platform aku untuk belajar membuat website secara serius. Seperti korang lihat, website aku pada ketika ini sangat asas, hanyalah stail yang agak asas. Fokus aku ketika ini ialah untuk memastikan segalanya berfungsi. Sebab itu aku tekankan "utiliti sebelum estetika".

Timbunan yang aku pakai ketika ini ialah Next.js, Typescript, dan Vercel sebagai penyebaran. Waktu ini juga aku mempelajari asas regex, seperti yang dapat dilihat dalam gambar di atas. Kali pertama juga aku membeli domain di Namecheap, dan ketika ini aku membuat pelarasan sendiri untuk SSL di Namecheap.

Penulisan Artikel Teknikal

Aku telah memulakan penulisan artikel berkaitan React sejak 2019. Untuk korang yang berminat (tetapi masa itu, ilmu aku tersangatlah cetek dan asas). Korang boleh lihat artikel aku di akaun Medium aku. Terdapat juga satu artikel aku yang ditampilkan dalam satu komuniti, tapi aku sudah lupa di mana artikel aku diletakkan 😅.

Bermula akhir 2020, aku berpindah ke DEV.to untuk menulis semua artikel aku sehingga ke hari ini, kerana aku ingin menulis dengan lebih terbuka, supaya semua boleh mendapat manfaat daripada penulisan aku.

atifaiman.dev Versi 2

Pada Oktober 2021, aku menyertai sebuah acara yang sudah lama aku sedar kewujudannya, tetapi kali ini mereka anjurkan secara dalam talian. Acara ini ialah Jomlaunch 2021, dan di situ aku bertemu dengan ramai orang yang hebat. Kebetulan ketika itu aku memang mempunyai perancangan untuk berpindah kerja kerana mempunyai beberapa masalah ketika itu, jadi aku mula mengubah portfolio aku untuk digunakan untuk tujuan perburuan kerja.

Portfolio aku ketika ini kebanyakannya terinspirasi daripada beberapa sesawang, antaranya Lee Robinson, fvtrx dan beberapa portfolio lain. Terdapat juga beberapa penambahbaikan yang dicadangkan oleh beberapa orang lain, dan juga penambahbaikan daripada diri aku sendiri, sebab ketika ini aku mula menjinakkan diri aku dengan SCSS.

Untuk korang yang nak lihat sumber kod untuk versi kedua, korang boleh melawati repositori atifaimandev v2.

Tetimbun aku ketika ini ialah Next.js, SCSS, Typescript dan Vercel.

atifaiman.dev Versi 3 (Terkini)

Macam biasa, aku rasa portfolio aku kurang menarik, dan aku ingin mengubah struktur portfolio aku. Kebetulan, ini adalah kemaskini paling mutakhir.

Untuk kali ini, aku bukan sahaja ingin menggunakan portfolio untuk mencari kerja, sekaligus untuk meletakkan segala sumber seperti blog, dan beberapa kandungan akan datang. Portfolio aku kali ini lebih bersifat experimentasi, di mana aku mula melibatkan elemen seperti Lottie, Tailwind, dan membuat komponen UI sendiri seperti sidebar.

Untuk korang yang mahu lihat sumber kod, boleh terus lawati repositori atifaimandev-v3.

Timbunan kali ini ialah Next.js, Tailwind CSS, Typescript dan beberapa pepustaka seperti Lottie. Kebanyakan pemformat sebelum ini, aku menggunakan pepustaka, tapi kali ini aku menggunakan Web API. Kali ini juga aku memfokuskan SEO (walaupun separuh siap 🥲) dan juga kebolehcapaian.

Rancangan Akan Datang

Jadi, apa perancangan aku akan datang? Aku rasa (dan harapnya lah), yang portfolio aku tidak mempunyai perubahan secara major, tetapi lebih membuat eksperimentasi lain, seperti elemen 3D (menggunakan three.js), memperkayakan SEO (dengan penjanaan auto gambar SEO seperti Github). Aku juga mahu membuat kandungan dalam Youtube dan Tiktok akan datang, cuma aku tidak mempunyai infrastruktur yang aku rasakan baik (sebenarnya aku malu je 😖). Tapi doa-doalah aku ada kekuatan akan datang.

Tambahan

Untuk makluman korang, sepanjang pembangunan portfolio aku, aku tidak mengeluarkan sebarang kos pun (kecuali untuk pembelian domain). Ya, kos sifar! Di Vercel, anda boleh membuat penyebaran secara percuma. Antara kerangka yang disokong termasuklah Next.js, Nuxt, Create-React-App (CRA), Vue, Ember.js, Svelte, Angular, Hugo dan Gatsby!

Malah, korang boleh juga menggunakan templat tersedia di Vercel! Korang boleh tengok templat yang disediakan oleh Vercel menggunakan kerangka yang disokong tadi!. Semuanya percuma, dan sumber kod akan diletakkan dalam Github anda sendiri (atau mana-mana pembekal sistem Git).

Antara solusi penyebar atas awan lain yang korang boleh guna secara percuma ialah Netlify dan Heroku. Untuk memastikan website anda selamat di sebalik HTTPS, anda boleh cuba lawati Cloudflare untuk memasang SSL.

Portfolio aku menggunakan domain tersuai (custom domain), tetapi Vercel juga mempunyai domainnya sendiri untuk ada masih mempunyai portfolio tersendiri. Website aku juga boleh dilawati di atifaimandev.vercel.app, tetapi korang akan diubah hala ke atifaiman.dev atas sebab beberapa tetapan yang aku telah buat.

Jadi, bolehkah anda membuat portfolio anda sendiri secara percuma? Jawapan saya adalah YA! Asalkan korang membuat sendiri, menggunakan beberapa kerangka yang disokong, korang dah tiada masalah untuk memulakannya!

Tapi bagi teman-teman saya yang majoritinya menggunakan Laravel, aku minta maaf yang aku tiada tips untuk penyebaran web secara percuma 🙇🏽‍♂️. Mungkin ini masanya korang ceburi JAM Stack? 😈

Okay lah, panjang sangat cerita pasal diri sendiri ni 😅. Moga lembaran yang panjang ni, korang dapatlah sedikit manfaat. Tak perlu menjadi seperti aku, tapi sekurang-kurangnya korang tau macam mana nak mulakan portfolio korang sendiri 😊.

Sekadar itu sahaja bebelan aku untuk minggu ini. Lepas ni aku sambung bebel berkaitan React kembali, jadi tetapkanlah doamu bagiku untuk kekal istiqamah menulis dan berkongsi 🤲🏼.

Baiklah, sampai sini sahaja, terima kasih kerana membaca, dan Assalamualaikum!

Let's Talk About Hooks - Part 3 (useCallback and useRef)

Atif Aiman — Sat, 30 Jul 2022 04:04:46 +0000

Salam, and well, hello there!

We are now in the third series of the React Hook series, and it is time for the next 2 hooks, which are useCallback and useRef!

These two hooks are the hook that I use most other than useState and useEffect, so you might need to keep in mind that you might, as well, use these hooks to do wonders in your app.

So, in this article, these are the topics that I will cover:

useRef - The Reference Hook For Unmonitored Things
useCallback - The Next Level of Your Callback Function!
The Difference Between useMemo And useCallback
The Misconception of useEffect, useMemo And useCallback
Conclusion

Well, time to get going!

`useRef` - The Reference Hook For Unmonitored Things

Before we jump to the way how useRef works, let's just do some revision on what is ref, by the way.

Refs provide a way to access DOM nodes or React elements created in the render method. - React Documentation

So, to access your DOM elements, let's say, your <div> component, you pass your component to the ref, so you don't have to do something like document.getElementById() or something similar. Plus, using ref helps you to keep track of the components to do a lot of things, like programmatically styling the components, or extracting the form's values.

Don't get me wrong here. I wouldn't say that document.getElementById() shouldn't be used, in fact, I advise you to actually learn how to use them, so you can also understand how ref simplifies things in React.

So, how is the syntax, you ask? Well, look below!

const theRef = useRef(initialValue);

Yes, it is that simple. The hook only needs one parameter, which is the initial value. Hmmmm, it should be the component, right?

Well, before mounting, your component isn't there yet, but later on, the component will be mounted and ready to be referred. So, useRef will handle this hassle, and update with the component that you will bind later on.

But then, initialization will always be undefined? Hmmm, about that, I will get back to this to explain first how to use useRef fully, and then we will get back to this question.

So, useRef will return the ref, which is the thing that you want to refer to. How can I bind this to the component?

const theRef = useRef();

return (
  <div ref={theRef} />
);

In your component, you can pass ref props to any of the HTML components, and then pass the created ref to the prop. So, if you console the value of theRef later on, you will get the component object, and from there, you can do a lot of things, such as theRef.target.classList.add('force')!

But bear this in mind! Ref is not something monitored by React lifecycle. That means, the ref is not affected by rerenders at all, but instead only affected by the changes of the ref itself. So, that means, we can update the ref too? The answer is yes! As much as you do DOM manipulation, that is you updating the ref, but it doesn't trigger the rerender.

So, if I can update the ref without triggering the rerender, does that mean that throughout the React lifecycle, the ref value will not be affected? Yes, it won't!

You can actually use useRef for something other than DOM manipulation. Let's say, you want to keep track of something, maybe the number of clicks, but you don't want to trigger the rerenders, then useRef will be a perfect hook for you! With this, initializing ref with something will make sense.

Let's look to another example of useRef that is not a DOM-thing.

const clickAmount = useRef(0);

const handleClick = (e) => {
  e.preventDefault();
  clickAmount++;
}

return (
  <button onClick={handleClick} />
);

What do you think if I click the button above? The handleClick will add 1 to clickAmount each time. However, there will be no rerender. Yes, no rerenders!

Okay, let's add some complexity to the component.

const [theState, setTheState] = useState(0);
const clickAmount = useRef(0);
const randomThing = 0;

const handleClick = (e) => {
  e.preventDefault();
  clickAmount++;
}

const handleUpdateState = (e) => {
  e.preventDefault();
  setTheState((prevState) => prevState + 1);
}

const handleUpdateVar = (e) => {
  e.preventDefault();
  randomThing++;
}

return (
  <div>
    <button name="updateRef" onClick={handleClick} />
    <button name="updateState" onClick{handleUpdateState} />
    <button name="updateVar" onClick{handleUpdateVar} />
  </div>
);

Whoaaa, a lot of complexity here. First, let the force calm you for a second, and let me guide you through the way.

Let us consider several cases:

I click updateVar and then I click updateState
I click updateVar and then I click updateRef
I click updateRef and then I click updateState

FOR THE FIRST CASE, when I click updateVar, the value of randomThing will increase by 1. Then I click updateState and theState will increase by 1. But what do you think happened to randomThing? The answer is, that it will reset to 0 because the component is rerendered and all variables that are not wrapped inside the hook or functions will be reset to the initial value that is assigned to the variable.

FOR THE SECOND CASE, when I click updateVar, the value of randomThing will increase by 1. Then I click updateRef, and the value of clickAmount will increase by 1. But, what do you think happened to randomThing? The answer is, it won't change! Remember that useRef didn't trigger the rerenders, so randomThing will keep its value until the rerenders.

FOR THE THIRD CASE, when I click updateRef, the value of clickAmount will increase by 1. Then I click updateState, and theState will increase by 1. But, what do you think happened to clickAmount? The answer is, that clickAmount won't change! Yes, as I say that ref won't be bothered by rerenders, so the clickAmount won't be reset and it keeps the value until the component unmount.

To summarize this

State will always trigger rerenders.
Declared variables inside the component, that are not wrapped in hooks or functions, will always be reset during rerenders.
Ref, on the other hand, will keep the value, even after the rerenders since ref is not affected by the rerenders. Unless unmounting happens, then all inside components become non-existent, including refs.

Sheesh, after the long explanation of useRef, let's dive into useCallback. Brace yourself for yet another long explanation 🥶

`useCallback` - The Next Level of Your Callback Function!

Let's get knowledge of what callback is!

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. -MDN Web Docs

As you can see, a callback function is indeed, just another kind of function. The way of writing is the same, it is just how you use the function.

const useForce = () => {
  // Do anything you want
}

const approachEnemy = (callback) => {
  // Do what you need to
  callback();
}

approachEnemy(useForce);

The first function, useForce is the function for when you will use the force to do things. And the second function, approachEnemy is the function for when you want to approach the enemy. If you noticed, I passed useForce inside approachEnemy so that means that I will useForce every time I approachEnemy. useForce is what we call the callback function. With this way of writing function, we can change what we want to pass to the first function, providing flexibility to the first function. With this, instead of useForce, I can instead useLightning to approachEnemy too! 😈

Well, if you ever passed a function as a prop to a component, that is a callback as well!

const CompParent = () => {
  const myFn = () => {}

  return <CompChild onFunc={myFn} />
}

const CompChild = ({ onFunc }) => (
  <button onClick={onFunc} />
);

But, of course, adding events and all sorts of things makes it different, but passing a function as a parameter is considered a callback function. I hope you get the idea!

Oooooookay, back to the topic. So, for a callback function, it matters when you want to trigger the function. Let's say if I pass a callback function, when do I want it to trigger? You can put it anywhere in the function to call the passed callback, but it might as well be complex when you throw something else in the mix, like loops and conditionals.

Going back to the React topic, we are usually writing the functions to handle things, like handling events, triggering API, or maybe your DOM manipulations like focusing and blurring elements.

const handleClick = (e) => {
  e.preventDefault();
};

return <button onClick={handleClick} />;

Do you know, that onClick is an event function that triggers when the user clicks the element? Passing a function to the onClick only means that handleClick is a callback function. handleClick won't trigger, unless the onClick function is triggered. But doing this way, every time you click the button, the function will be triggered.

Let's get to the more complex component!

const [anakinSide, setAnakinSide] = useState('jedi');
const announceSide = () => {
  console.log(`I am now a ${anakinSide}`);
};

return (
  <div>
    <button onClick={announceSide} />
    <button onClick={() => setAnakinSide('sith')} />
  </div>
);

So, for this case, I would like to announce which side Anakin is currently on when I click the button. And then, I create another button to change Anakin's side. But just imagine, it must be annoying if I keep telling you the same thing a thousand times that Anakin is a jedi, when you know he didn't change side yet, unless he is! So, I would like to only announce Anakin's side, only when there is a change in Anakin's side.

To do this, useCallback will serve its purpose!

const [anakinSide, setAnakinSide] = useState('jedi');
const announceSide = useCallback(() => {
  console.log(`I am now a ${anakinSide}`);
}, [anakinSide]);

return (
  <div>
    <button onClick={announceSide} />
    <button onClick={() => setAnakinSide('sith')} />
  </div>
);

Now, I wrapped announceSide function with a useCallback hook, and I passed a dependency, which is anakinSide. When this happens, every time you click the button to announce which side is Anakin is on, it will check anakinSide cache to see if there is any changes to the previous change. If there is no changes, then announceSide won't trigger! That means, the component will only announce when Anakin changes side, despite many attempts to do announcement. So, let's see how callback is written!

const theFn = useCallback(callback, [arrayOfDependencies]);

So, only two things that you need to pass to the useCallback hooks, which are the callback function, and the array of dependencies. When there is any changes to any of the dependencies, the callback will be triggered.

Well, this hooks sound similar to what you read before? 🤔

The Difference Between `useMemo` And `useCallback`

As you guessed, useMemo and useCallback indeed has 100% similar structure of using the hook. However, there are some points that you need to pay attention to.

First, useCallback should be used for, as you guessed, the callback function. That means, the purpose is to run the function, but it will try to memoize the function based on the dependencies. While useMemo memoize not just the dependencies, but the value itself.

To put it into context, let's dive into the following examples.

const saberColorOptions = useMemo(() => {
  return ["blue", "green", "purple", "red"];
}, []);

const shoutLikeChewbacca = () => useCallback(() => {
  alert("roarrrrrrr");
}, [];

For useMemo example, I declared saberColorOptions that returns the array. Although I didn't put any dependency, useMemo will always cache the value. You can say that useMemo will "keep his eye on" the value of saberColorOptions if there is any change. So, saberColorOptions' value won't change, despite thousands of rerenders triggered.

For useCallback example, I create a function called shoutLikeChewbacca. If I passed the function to another function as a callback, it will always run once, since I didn't pass any dependency. So, it keeps the cache of the function, and not the value.

useMemo is used to assign value and keep cache, while useCallback is to cache the dependency to run the function.

The Misconception of `useEffect`, `useMemo` And `useCallback`

These three hooks require 2 things, which is a function, and array of dependencies. So, I would understand the difference between useMemo and useCallback, but now useEffect?

You need to know that useEffect is a hook that shaped based on component lifecycles. It will always trigger during the rerenders, while it meets the change of one of the dependencies. While useMemo and useCallback is NOT dependent to component lifecycles, but rather the cache. That means the rerenders doesn't affect the hook, but instead the changes of the dependencies. This might look the same at first, but let me give an example.

Let's say I have a state called warshipName. If I trigger the state setters, I will trigger the rerenders. useEffect which contains warship as a dependency will be triggered, whether warshipName changes value or not, as long as the state setters is triggered. useMemo and useCallback on the other hand, monitor its cache instead, so they will only be triggered if warshipName value changes.

Other than that, since useEffect is based on component lifecycles, it is understandable that useEffect is one of the most common hook used to handle effects after rerenders. However, useMemo and useCallback will create a cache that monitors the value of all dependencies. Which means, that using useMemo and useCallback ALWAYS come with a cost. Use useMemo and useCallback when there is necessity or when it involves some certain of complexity. The example given is actually quite simple, where it is better if you get rid of the hooks altogether, and just use a simple callback function instead. Like I said in previous article on useMemo, only use the hooks when it uses a lot of resources, so you won't have to repetitively execute the same function only when necessary.

Conclusion

Yeah, I have covered 6 hooks at this point, and there are still a lot of hooks provided by React for your perusal. And throughout my experiences, I keep studying on how people use these hooks to create their own hook. In my early years, I was so naive to try to optimise everything using hooks, but little did I know that I did it backward most of the time. Well, the learning process never stop!

My take is, memoization doesn't equal to performance. Memoization on simple things often jeopardise performance more than it shouldn't. At one phase, you wish that you can abstract a lot of things, just to realise you make things more complicated and slows down the performance.

However, never falter, for these hooks do not exist for no reason, it is just you need to really know when to actually use it! Just learn how to use it, apply it in your personal projects, and see how it actually is in action, so you already have a hook when the time comes.

Well, until next time, keep yourself at the high ground at all times, and peace be upon ya!

Let's Talk About Hooks - Part 2 (useLayoutEffect and useMemo)

Atif Aiman — Sun, 17 Jul 2022 03:19:06 +0000

Salam and hello, folks!

Continuing the React Hook series, now I am going to talk about another 2 hooks, which are useLayoutEffect and useMemo. To the topic, we go!

But before that, I want to mention that these two are a rare hook, where you will only use them when there is a particular use case (even though I didn't encounter one yet). But don't worry, maybe you found this hook in your existing project and want to understand how these two hooks work. Well, I got you covered!

Let's start, shall we?

In this article, these are the topics covered:

useLayoutEffect - Yet another lifecycle hook!
The difference between useEffect and useLayoutEffect, and why it matters
useMemo - The memoization hook
When to not use useMemo
Conclusion

`useLayoutEffect` - Yet another lifecycle hook!

In the previous article in this series, I explained how useEffect is one of the most used hook works. To simply put it a way to understand, it covers componentDidMount and componentWillUnmount. Well, useLayoutEffect does a lot of the same thing as useEffect, and in fact, the way you write useLayoutEffect is the same!

useLayoutEffect(() => {
  // do your `componentDidMount` thing here
  return () => {
    // do your `componentWillUnmount` here
  };
}, [<all_dependencies_here>]);

useEffect(() => {
  // do your `componentDidMount` here
  return () => {
    // your `componentWillUnmount` here
  };
}, [<all_dependencies_here>]);

Welp, two hooks with quite similar names, with the same way to write them. What is the catch?

The difference between `useEffect` and `useLayoutEffect`, and why it matters

However, what difference does it make compared to useEffect then?

Well, need to know a key difference of "when" both of these hooks run. useEffect will run right after if there are any changes to any of the given dependencies to the hook, while useLayoutEffect will run after each change to the "layout", which means if there is a change to the DOM (DOM mutations). This includes if the change involves ref as well.

Not to be mistaken, you indeed supply the same array of dependencies to useLayoutEffect as you supplied to useEffect, but it will run after the DOM change, and if any of the dependency changes. Unlike useEffect which will run right after one of the dependencies changes.

So, when to use useEffect and when to use useLayoutEffect? Well, since useEffect is triggered as the dependencies change, useEffect is the hook you will use most of the time. useEffect is DOM independent, which means that DOM doesn't affect the behaviour of useEffect. Simply, useEffect is to monitor state changes.

useLayoutEffect triggers when there is a DOM mutation, so you can utilise that if you need to do some DOM-related activities, such as measuring performance, or detect DOM changes such as scroll position.

`useMemo` - The memoization hook

The fourth hook in this series is useMemo. This is for memoization. So what is memoization?

In programming, memoization is an optimization technique that makes applications more efficient and hence faster. It does this by storing computation results in a cache and retrieving that same information from the cache the next time it's needed instead of computing it again. - Germán Cocca, freeCodeCamp

Memoization is an optimization technique, so your app becomes faster by utilising caches. Just imagine, you are calculating the value of infinity, so you don't want to run it every time the component rerenders, right?

const [x, setX] = useState(0);
const valueOfInfinity = () => calculationOfInfinity(x);

Just imagine, this function will run EVERY TIME component rerenders 🥶

But first, let's see how useMemo is written, shall we?

useMemo(() => {}, [array_of_deps]);

// example
const valueOfInfinity = useMemo(() => calculationOfInfinity(x), [x]);

The first part of the useMemo hook is the function you want to run. It could be an expensive function or something you want to keep a cache of the dependency. The expensive function here means that this requires a lot of resources to run the function.

The second part of the hook is the array of dependencies. And yes, it behaves similar to useEffect, where it will only run the function when one of the dependency change value.

Let's say we consider the example above. Just imagine the formula to calculate infinity is extremely complex, and it will surely consume a lot of resources each time the function runs, right? And adding to that, it depends on x, which possibly changes, since it is a state.

When you trigger useState, it will trigger the rerenders. When that happens, the function will run each time, even though the state value is unchanged. You could even trigger the useState to value "3" even though the value is already "3". But since setState is triggered, the component will rerender anyway.

We don't want that to happen. If the value of dependency is unchanged, we want to keep it that way and not trigger the function. So useMemo will hold the value of dependency and will observe the changes, so if the value is the same as the previous value, it won't run the function. So, even though we set x to 3, even though x is already equal to 3, the function won't run. Neat, right?

This can also be used to avoid children's rerenders too. Example:

const TheButton = useMemo(() => <button>This button</button>, []);

// In your return
return () => (
  <TheButton />
);

In this example above, since you didn't add any dependency to the <button> component, it will only run once. Even though your parent component rerenders, <TheButton> won't rerender, since it will be the same throughout the component lifecycle. But of course, a simple component like the above example is too simple, and note that the component should be a pure component.

When to not use `useMemo`

Well, you just feel like "Hey, that means I can optimise everything by sprinkling useMemo everywhere in my code, right?

Chotto matte! If you have this thought, you need to rethink your decision. Most of the time, useMemo make your app less optimised than you think!

const [x, setX] = useState(0);
const [y, setY] = useState(1);
const theSum = useMemo(() => x + y, [x, y]);

Even if you can calculate x plus y using your fingers, why do you think your app needs to monitor changes for x and y, for the sake of adding x to y?

Most of the time, huge calculations are done by the backend, and the frontend will only retrieve the value from the API, and display it to the user.

So, to what level of complexity do you need to use useMemo? The answer is, it is so rare unless you need to calculate the value of infinity during rerenders. Personally, I didn't use useMemo, except for once, which is to calculate the effective interest rate of a loan based on several variables. Since that is a frontend-only app, so I had to use it. If you ask me, I do feel that the calculation might not need useMemo in the first place.

In case you are wondering how to calculate effective interest rate.

Conclusion

That's it about useLayoutEffect and useMemo. Though they are hooks provided by React, the use case for them is not as easy as you think, thus the usage of these hooks is quite rare. At least, you know how to write them and how they work, so when you need to use these hooks by encountering the use case, you already know how to use them.

While useMemo is keeping the cache of its dependency for it to run the function, then what is useCallback? Well, keep yourself posted for the next article on the React hooks!

And as usual, take care of yourselves, and peace be upon ya!

Let's Talk About Hooks - Part 1 (useState and useEffect)

Atif Aiman — Sun, 22 May 2022 08:59:23 +0000

Salam and holla!

Today, I will explain React, specifically the hooks. I will write the hooks in series, so you can take it slowly to understand how hooks work under the hood, and use it appropriately on your code.

Bear in mind, that these writings are of my own, and there might be a better way to use hooks, but my focus will be on understanding how each React hooks work.

And for this one, I will focus on the most basic hooks of all - useState and useEffect.

Let's start, shall we?

In this article, these are the topics covered:

What Is Hook, By The Way?
useState - The Pillar of States
useEffect - The Lifecycle of Components
The Reusability of Hooks
Conclusion

What Is Hook, By The Way?

In the beningging.... Uhhh, I mean,

In the beginning, React components are created using class components. So, the methods of React components are extended from Component object, which contains several setters and getters for states and other stuff like the lifecycle of the component. This is good, but there are some concerns addressed by the React, which are:

The Reusability: When you write functions, and you want to use it in other components, you are required to restructure your code to adapt the scalability, especially when you deal with higher-order components.
Verbosity: Using methods in class components can be a hassle, especially when you want to separate different concerns in your component, but class components only allow you to only use the method from Component class such as componentDidMount, componentDidUpdate and others. With those, it is hard to read the code and find the relation between the concerns and only view it from a component lifecycle perspective only.
The Nature of OOP: Object-oriented Programming (OOP) is one of the coding paradigms and is also available in Javascript, however, React found that OOP becomes a barrier for beginners to learn.

You can learn more about the motivation behind hooks in React.

With these, the hooks are established, with a condition that we are moving from class components to functional components.

Here's the general difference between class components and functional components.

// Class Component

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      // Your states here
    };
  }

  componentDidMount() {
    // Your lifecycle actions
  }

  render() {
    return (
      <YourJSXHere />
    );
  }
}

------

// Functional Component (Arrow Function)

const MyComponent = () => {
  const [myState, setMyState] = useState();

  useEffect(() => {
    // Your lifecycle actions
  }, []);

  return (
    <YourJSXHere />
  );
};

Disclaimer: This article won't discuss class components vs functional components. Instead, will focus on the usage of hooks, and thus will show only functional components at this point.

`useState` - The Pillar of States

Well, I did write about the basics of states and props, and you can take a look at it in my article here:

[ReactJS] The Basic of State and Props

Atif Aiman ・ Sep 5 '21 ・ 6 min read

#react #javascript #beginners

And, to also understand a bit about destructuring, you can just read about destructuring below.

Javascript - Destructuring the Thing!

Atif Aiman ・ Oct 16 '21 ・ 7 min read

#javascript #webdev #beginners

But, to simplify it, the state is something that changes, so that React can trigger rerender when it happens.

The hook that does the thing is useState. Let us take a look at its usage.

import { useState } from 'react'; 

const MyComp = () => {
  const [myState, setMyState] = useState();

  // ...
}

useState is a hook to create the state for you. It returns 2 values, which are the value of the state and the state mutator. You will pass a value inside useState, which is the initial value.

Using the example above, myState is the state itself, so you can use it in your JSX. When you trigger the mutator, React will trigger the rerender, and then you can see the changes in your render.

State can be any name you want. myState is just an example, so you can use something like teacher, isToggle or anything that reflects on what changes you want to monitor.

And setMyState is the mutator function, for you to change the state. It can be any value, such as string, number, boolean, and even object. Let's see how we can use the mutator function to change the state.

const [isActive, setActive] = useState(false);

// This is function to handle click events
const handleToggle = () => {
  setActive((prevState) => {
    return !prevState;
  };
};

Okay, it is time to slow down the clock and let's see what we have here.

setActive in this example is the mutator function for the state isActive. Assuming that the user presses the button to toggle the active state, we call the mutator function to change from false to true, and vice versa.

So, we pass a function to the setActive which returns a new value for the state. For the function, it will accept one parameter, which is the previous state, and then you can do whatever mutations you want, and finally returns the new value to the mutator function.

This is an example of string manipulation.

const [myName, setMyName] = useState('');

const updateName = (newName) => {
  setMyName(() => {
    return newName;
  }

  // Can also be shorter
  setMyName(() => newName);

  // Make it shorter!
  setMyName(newName);
};

Noticed that I omit the prevState thing? Yeah, that is actually optional, and you can make it shorter!

So, that is how you use useState. Three things to pay attention to:

Initialisation: You can initialise the value by passing it to useState. So it will be useState(initialValue)
Your state: You can call the state later to get the value anywhere in your code, as long as it is inside the functional component.
The state mutator: To change state, use mutators. If you try to change state directly without using a mutator, React will just ignore your existence, and just don't pay any attention. Sad life.

`useEffect` - The Lifecycle of Components

Before introducing useEffect, let us revise what is the lifecycle of components inside React.

Across render cycles, there are 4 main phases, which are mount, update, error handling and unmount.

The mount phase is the born of the component in the render. When the user opens a page, the mount phase will be triggered.

The update phase is when there is a change in state. Remember that I mentioned rerenders when the state changes? Yes, this is the phase that is responsible for the changes to the render.

The error handling phase is when there is some problem with the lifecycle. For example, somehow there is an error regarding your state, and later React will send a signal (or error) for logging, and will handle the render for you.

And finally, unmount is the end of your component's life, which happens when you close the page or are redirected away from the page.

In class components, there are a lot of methods available for you to use to allow granular control of the lifecycle. Functional components, however, only require one hook to manage it.

Let's get into the usage of useEffect, then!

When Should I use `useEffect`?

When you need to update values that are reflected in the DOM, then you need to use useEffect where it will be triggered when its dependencies have changed. Wait, what is a dependency? I will get to it soon. Let's see the anatomy of the useEffect.

useEffect(yourActionsDuringChanges, [dependencies]);

There are two things that you should pass to useEffect, which are your function to be triggered during dependency updates, and the array of dependencies.

useEffect(() => {
  // Any functions you want during dependency updates
  // componentDidMount, componentDidUpdate, componentDidCatch

  return () => {
    // componentWillUnmount
  }
}, [dependencies]);

As you can see above, functions that you put inside useEffect will run as soon as React detect changes to any dependency. Comparable to class methods such as componentDidMount, componentDidUpdate and componentDidCatch, but now it can be packed into one useEffect function. While the componentWillUnmount method is comparable to the function's return, it will run during the component unmounting.

Then, what is a dependency? Well, dependency is the variable that you want useEffect to listen for changes. Let's see an example then.

const [humanName, setHumanName] = useState("Atif");
const [catName, setCatName] = useState("Armel");

useEffect(() => {
  console.log(`My cat's name is ${catName}`);

  return () => {
    console.log(`${humanName} says goodbye.`);
  }
}, [catName]);

Using the example above, there are 2 states declared, which are humanName and catName. And for useEffect, I pass a function and one dependency only, that is catName. Okay, I have questions for you.

When I open the page, what happened?
If I update catName to "Akamaru", what happened?
If I update humanName to "Kiba", what happened?
When I close the page, what happened?

Well, do you get the answer? Here's the answer.

When I open the page, the component will be mounted. For the class component, this is the phase we called componentDidMount. So, the console will print out My cat's name is Armel.
If I update catName to "Akamaru", useEffect will be triggered, since catName is included as a dependency for it. For the class component, this is the phase we called componentDidUpdate. So, the console will print out My cat's name is Akamaru.
If I update humanName to "Kiba", useEffect won't be triggered, since humanName is not one of the dependencies of useEffect. Nothing happened.
When I close the page, the component will unmount. For the class component, this is the phase we called componentWillUnmount, getting ready for a cleanup. The console will print out Kiba says goodbye. Remember that in number 3, I've updated humanName, that is why the console print out "Kiba" instead of "Atif". useEffect won't be triggered by the change of humanName, but it will still refer to the current value of the humanName.

Can we include more than one dependency? Well, sure you can! If I want to track changes to both catName and humanName, I can just add it, so useEffect will be triggered when any one of the dependency from the array of dependencies changes.

Can we add other than states as dependencies? For your information, you can also include things like props, refs and others as well, as long as the value changes. But be mindful of what you include as dependency, because in some cases, rerenders can be quite expensive.

The Reusability of Hooks

Remember when I said that hooks are reusable? Yes, hooks are indeed reusable. Notice in previous example, I used two useStates? You can declare as many states you want. Same applied to useEffect as well!

const [humanName, setHumanName] = useState('Atif');
const [catName, setCatName] = useState('Armel');

useEffect(() => {
  console.log(`I've changed my name to ${humanName}`);
}, [humanName]);

useEffect(() => {
  console.log(`I've changed my cat's name to ${catName}`);
}, [catName]);

As you can see, there are 2 useEffect, where the first one will be listening to humanName, while the latter will be listening to catName. With this, you can seperate the concern, while dealing with the same lifecycle phases. Do as much as you want!

"Well, this is interesting. But how about I just want to run it only once, during the mount, or maybe during the page closure?"

Well, I got just the thing for you!

useEffect(() => {
  console.log("Just open the page!");
}, []);

useEffect(() => {
  return () => {
    console.log("Will close the page");
  }
}, []);

Notice that I didn't include any dependency, but remember that useEffect will always trigger during mounting, so the console only prints out once.

For the second one, I just log the console in the return, which means that it will only happen during unmount, so the console only prints when you close the page.

So, there are three ways (actually!) to use useEffect.

// Runs once during mount
useEffect(() => {
  // Anything
}, []);

// Runs during dependency update
useEffect(() => {
  // Anything
}, [yourDependency]);

// Runs as long as there is rerenders
useEffect(() => {
  // Anything
});

For the first and the second, I've already explained how it works, but the third one will run as long as there is rerenders.

I would recommend you to add an empty array or array of dependencies unless you know what you are doing. Rerenders are already costly, triggering useEffect every time will be expensive too.

There is another thing that you need to bear in mind.

// Don't do this
const [humanName, setHumanName] = useState('Atif');

useEffect(() => {
  setHumanName(() => 'Ahmad');
}, [humanName]);

If you make an attempt to update your state, which happens to be included as your dependency, this will trigger and runs indefinitely, and your computer will enter a phase of "Dormamu, I've come to bargain!" thing. Nope, don't do this!

Same as the following example.

// Don't do this
const [humanName, setHumanName] = useState('Atif');
const [catName, setCatName] = useState('Armel');

useEffect(() => {
  setCatName(() => 'Akamaru');
}, [humanName]);

useEffect(() => {
  setHumanName(() => 'Kiba');
}, [catName]);

I know, some of you might have weird ideas, but this also triggers an infinite loop! Updating each other's dependency will throw you into the unknown!

Conclusion

Well, that's it for useState and useEffect! These 2 hooks are the basic hooks which can be used in React functional components. If you understand every behaviour of these states, you can already develop your own hooks by just using useState and useEffect! You can head to useHooks to see them in action on how you can make your own hooks.

Before I close this article, there is a similar hook as useEffect we called useLayoutEffect. So what is the difference then? There are still a lot of hooks that you can discover, but it will be for other articles.

Any questions, or if you detect some error, please comment down below, and share (if you will) for more understanding of how hook works in React.

Until next time, adios, and may be peace upon ya!

A Note On The 10K Days

Atif Aiman — Fri, 13 May 2022 07:16:41 +0000

Salam and hello folks! A long journey indeed for all of us. A different us, different obstacles, with a similar goal - a seek for happiness and things we enjoy most.

This article is for my personal record, but you are more than welcome to scroll and read it, but this won't be a short one. And no, it's not about PowerLevel10K!

If you want to share your journey, you can just put the link down below in the comment section, and I will take the time to read it.

Let's begin, shall we?

The First Day

Born 3 days after Christmas festivities at Negeri Sembilan, blessed with a pair of doctors as parents. Not so much to tell, but I am grateful for the humble starting. The almanac of my story starts here -

A Thing About ADHD

Well, during childhood, I was having difficulty having sleep and becoming "overly" active. However, despite my parents observing my symptoms of mild ADHD, they didn't bring me to meet paediatrics but instead decided to grow me up normally like other kids. Well, wild imaginations, us siblings cheering up during thunders, and lots of crazy things my siblings and I did.

But you know what? I only discover that I had mild ADHD in my 20s, so looking back at what happened before is something I always think of, not even bothering about my shortcoming but instead going through everything. I am also glad people see pass through it and just be a history and part of my life.

The First Milestone of Education

Sekolah Rendah Islam Seremban (SRI Seremban) is my first primary education institution, where I was first nurtured. 5 years at SRI Seremban mostly taught me basic education things like counting, reading, and things children mostly need. But here I first discovered my interest in Mathematics. Like hey, give me a complex addition question, and I can calculate with my fingertips, though it's not like the Asian kids that calculate with those finger movements 🤣. But it all begins with my Mathematics teacher, who is strict since he was in Territorial Army Regiment.

But in the 6th year, I had to move to SK Taman Tasik Jaya Seremban, so I could look over my younger sister who has a learning disorder since the school has a special class for her. Different environments. I managed to get 4 out of 5 As in UPSR.

The Learning Continues

For secondary education, I moved to SMKA Sheikh Hj Mohd Said for 5 years, where I was mostly shaped into who I am now. The way of thoughts, philosophy, the attitudes. I was famous in school for "bad" nerd things - I've never completed most of my homework throughout 5 years there. Of course, I am not proud of it, but thinking that again, I found it funny, because my teachers just decide to not bother me that much, for I will score on the exam either way.

I learn a lot of things during my secondary years. I learn to document mostly here because I involved myself in a lot of events. Being the committee member of events, secretary of librarian, and president of the Karate club. I was so active, that I managed to discipline myself and reduce 15kg in 3 weeks. What a crazy thing!

Well, I am still looked up to as a high achiever, expected to score in exams. With struggles and sweats, I managed to score a straight one for both PMR and SPM. What a nerd guy.

My ambition at that time got a wild ride. Initially, I aimed to be a doctor (specifically orthopaedics, thanks to my parents' exposure), and later be a Karate instructor, then an actuarist, and finally a computer scientist. Even my parents even asked me once to be a pilot (and I considered it as well). But having these ambitions, I did learn a little bit to be what I wish for, but the situation changes my mind about things I want to focus on. Yet, I was naive at that time.

It's Varsity Time

In Malaysia, we have things like A-Level studies we called foundational studies. And so, right after secondary school, I enrol the Foundation of Islamic Studies and Science at the University of Malaya (UM) for 2 years. At the same time, I was also a Karate athlete representing the University of Malaya. My favourite course is computer science, and having a sporting lecturer.

And later straight away enrolled on Bachelor of Islamic Studies and Information Technology, a double major degree. During that phase of my life, a lot of things happened. Facing mild depression, being a graphic and motion designer for events around UM, getting silver for Karate competition for 2 years streak, the passing of my beloved grandmother, and my parents' separation.

Of course, I love many things despite having challenges such as the success that I've gained and things that I regret at times. Dismissing headaches and stomach pain from not eating well, are things that I wish that I could've done better. These are things that taught me what life is:

Learn what matters most. Of course, we will repeatedly be making mistakes here and there, it is just a matter of life learning.
Learn about yourself. Sometimes we thought we know about ourselves, but we are not. These obstacles will highlight what you are and what you are capable of. We won't know until we try.
Trust yourself. I have low self-esteem and have always been hard on myself (even until this moment). I am glad that people around me believe in me, so I don't want to let them down. The success that I have right now is thanks to the people around me.
Stand on your ground. Be firm on your principles, and don't let others compromise those. It's okay to be different, for that is what we are - human. Variation is a blessing.
Learn from your mistake. Learning can also happen outside the education environment, so grab the most out of it.
Hunger for knowledge. As I said, life is the non-stop process of learning, find your path. Set the objective.
Be active in learning. Discover a lot of things, and you will discover what you want to be. Exposure is everything for you, good or bad.

Post-Graduation

I graduated from UM in 2018. Honestly, it was still unclear to me what I wanted to do in life, given that time I was into graphic and motion design. I question myself whether I want to pursue that path, or maybe another path that I think I am best at. That was the moment that I decide that I want to venture into the programming world since I scored on top in the programming course. However, I still don't have confidence in my skill or decided what language or framework I want to focus on. Luckily, one of my lecturers seeks a research assistant, specifically on app development. So, I took the opportunity and apply for it. What scares me the most at that time is that, I don't even know what I want to build an app with, so I "out of my mind" challenge myself to learn React for 2 weeks and nothing else, right before being appointed as a research assistant for 1 year. Little did I see myself that I managed to complete the development of the app (don't talk about the code quality, I was also cringed looking into the code now).

With this, I gained a lot of confidence in coding, but I found out that I love to develop the UI and designs, so I commit myself to being a front-end developer. So, after ending my contract as a research assistant, I seek a frontend developer position. I got 2 offers, but I decided to go to SPEZA, a cryptocurrency exchange company as a junior frontend developer.

My First Job

Given that I have low self-esteem, I always doubt myself whether I managed to do things right. Thankfully, I got one of the best mentors I had in SPEZA, who comfort me and keep me assured that I have what is needed. And so, I used their trust to make it through and learn a lot of things, enjoy most of the job, facing obstacles together.

But well, good things always last. After 5 months of working, suddenly the world is hit by an infamous pandemic, the COVID-19. The company had to close down their operation, and the country went on lockdown (MCO). It was tough for me and the team, and even cause a bit of distress for me. Honestly, I stopped coding for a while after closure, calming myself with games. 7 months into jobless life, and at the end of that, I desperately try to keep myself and my skills relevant. I tried to relearn full-stack development and seek a job after the MCO. So, I managed to get a job at an e-commerce platform company as a full stack developer. I still remember that the recruiter who recruited me asked me whether I wanted to go for full stack developer or focused on a specific stack such as front end stack. I was so desperate, that I said that I willingly accept any position as long I can pay the bill.

The Next Challenge: The Finance

As a full-stack developer, I had to develop frontend, back end and anything that revolved around them. However, the moment I entered the company, I was assigned to a project and expected to single-handedly manage it. With no guidance at that time (all other teams were occupied with different projects), I had to do it from end to end. And I mean, from project planning, requirement management, managing clients, designing, developing, testing, deploying and delivering it - all without any clear experience. I stressed out, and I even tried to voice out to the management for that, but in the end, I managed to hold out and finished what I started. This might be tough for me, but it was a challenge all along.

So, what happened is that, the company faced a financial shortage, and I didn't get full pay for 5 months. I did have my savings before, but all evaporates for those 5 months. So, I decided to find an exit plan.

In November 2020, I decided to join a local event, JomLaunch, where the developers gather to see the local digital product, the pitches and have some discussions. I met some awesome guys, which I didn't expect to get to know. A famous yoyo guy, who is also a famous nomad developer, Fajar, who eventually be a partner of the project that we worked on right now, Jombuat. I also met some other guys, who then become my colleague a year after.

The Next Challenge: The Principle

Later at the end of 2021, I joined a local payment gateway company, with a vision of me creating a new engine for the payment solution. It is not bad at all, but at some point, I thought a while back that I am strayed away from what I wanted to focus on - the front end development. Being appointed as team lead just a month after joining, I had to oversee the legacy system, brainstorm the new engine, and later on had to work on different projects. This kind of thing happens to me before in the previous company, where you have to be the whole department. Standing on my principle, I choose to just quit and continue to seek another opportunity, specifically in front end development.

So, as usual, I went to different job postings (sorry I ignored most of the recruiters at this point) that match my preferences, and then there is one job posting that strikes me the most - Mid/Senior React Developer at Xsolla, a gaming commerce company. I am so curious, so I decided to apply and pray for the best. After 2 interview phases, I managed to join Xsolla, and at the time I am writing, I am already 1 week here, so not so much to talk about - except for the humongous documentation to read 😵‍💫. Well, I'm not bibliophilic.

Other Things

Well, a lot of things happened as well along the path. Planning for the personal brand growth, writing articles on React and Javascript, meeting cool guys that I looked up to since secondary school such as Afiq Sazlan (HAS Academy, his books) and others such as Fajar Siddiq and Anoush Siahkar, getting 2 years of free Adobe subscription thanks to Adobe Live events, joining different events and create new connections, managing communities, organizing classes on kinds of stuff like Github and React. I have already miscounted the blessing that I've gained after all those hardships that I faced. Even during the hard times, like my car was stolen - thankfully the issue was resolved quickly and get full insurance coverage, a really bad gastritis attack (I was shivering like hell), got haemorrhage dengue when I was 10 years old, and all those beloved people that passed away, including my friends and cousins who are at the same age as me.

All of these serve as a lesson for me and will continue to be until my ending days. Today is the 10,000th day of my life, and I am still strong, and still seeking the happiness in my story. A lot to learn and a lot to do. So here's what I will continue to seek at this point:

Teaching others. Teaching gives me satisfaction when I can see how I can contribute to society.
Career growth. At this point, I still want to do some coding and gather more experiences than I need, so I can pass on a lot of things to the next generation. At the same time, I want to find my way up.
Establishing my personal brand. I continue to offer some courses to the new students and coaching to developers to improve both them and myself. Wait till I have my own Youtube courses.
Improving current connections. I am an introvert, so I didn't really go around and make lots of new connections, but I try to reach out to those who make me who I am today.
Learn to lead. Honestly, I tried to avoid all those leadership roles since childhood, because I was afraid that I would let others down. Now, I need to learn all those things and cope with things so I can continue to grow.
Explore different domains. Right now, I can comfortably say that I am an expert in frontend development (yeah, CSS is just at my fingertips), and am able to do some backend things, but I will love to explore blockchain things and maybe some new things in the future.
Taking care of my health. Investing in wellness is not a waste. Previously, I have bad back pain, so I buy an ergonomic chair, and I worked comfortably after that. Same as taking care of the meal (I cannot eat spicy things anymore 😭).
Improve my finance management. Not getting a 5-month salary really left a dent in my saving, so now I want to improve my saving habit (though I was strict on saving before).
Taking care of my mental health. It matters the most that I need to take care of my mental health. Faced a lot of burnout in my previous company for the overwhelming pressure, I need to sort things out and the priorities.
And finally, be happy. Everyone deserves to be happy. I have been harsh towards myself for things happening around me. Seeking the meaning of happiness to me is my mission.

Conclusion

Everyone has a different set of origin, the story and the climax. To compare those differences is not the way to achieve things in life, but to retrospect what you have done and what you could have done better. The learning process should be forever, and the thing that you might need to pay attention to is the method of learning - to see what matters in learning, and what can be implemented in your life. Lessons can be gained either from others' stories or your own.

It's not wrong to have regrets, but it is wrong if you choose to stay in it. This is how He elevated you to the next level of you - a greater you.

Well, what a long one, huh? Initially, I wish to write a 10,000-word long, but I give up, and decided to stop here.

But - I am extremely glad that you read this far, for someone as insignificant as me. I wish your life will be full of blessing, and a lot of good things will happen to you in the future. So, here is a potato who codes.

You are also welcomed to read my other articles as well, if you are into React, Javascript and stuff.

So, till the end of my article, happy 10,000th day to me on 15th May 2022, and peace be upon ya!

DEV Community: Atif Aiman

Deploying A Web App To Your Own Domain - What You Might Wanna Know

TL;DR

Basic Terminology

Building Your Application

How User Opens The Web

Acquiring a Domain

Mapping to Your Deployed App

Records

DNS Propagation

SSL Setup

How Much Does It Cost

Extra Stuff

Conclusion

[A Year In Review] My Wellbeing Year of 2023

Rocket Learning with Xsolla

My Wellbeing

Starting A Community

Passion in Teaching

A Change of Air

What's Next?

My Takeaway In 2023

Vector Map Creation for Stadium Bukit Jalil, Malaysia

Inspecting the original BukitJalilStadium.com

Utilising the AI to Learn

Problem Identification

SVG Map Creation

Bringing the Vectors to Code

Problem #1: Path Storage

Problem #2: Path Arrangement

Problem #3: Path customisations

Problem #4: Interactions

The Result

Conclusion

The Difference Between `var`, `let` and `const` in Javascript

Javascript Back In Days

The Introduction Of let

Before We Go Into const

The Immutability of const

Misconception of Immutability

Conclusion

How I Imagine My Future in 2023

From Where It Begins

As The Door Opens

My First Successful App

The Valley of My Dream Graph

People Trust In You

Did I Reached My Goal?

Discovered Different Goal

My Next Dream

Conclusion

CSS 🤝 HTML Data Attributes

Style States For A HTML Component

Things Are Going To Get Tough

Here Comes The Trouble

Conclusion

[A Year In Review] The Great Escape of 2022

Career Jumps

A Great Jump

Other Things To Be Thanked For

Into the future

Closing

Extra

Di Sebalik Tabir: atifaiman.dev

Sejarah

atifaiman.dev Versi Pertama

Penulisan Artikel Teknikal

atifaiman.dev Versi 2

atifaiman.dev Versi 3 (Terkini)

Rancangan Akan Datang

Tambahan

Let's Talk About Hooks - Part 3 (useCallback and useRef)

useRef - The Reference Hook For Unmonitored Things

useCallback - The Next Level of Your Callback Function!

The Difference Between useMemo And useCallback

The Misconception of useEffect, useMemo And useCallback

Conclusion

Let's Talk About Hooks - Part 2 (useLayoutEffect and useMemo)

useLayoutEffect - Yet another lifecycle hook!

The difference between useEffect and useLayoutEffect, and why it matters

The Introduction Of `let`

Before We Go Into `const`

The Immutability of `const`

`useRef` - The Reference Hook For Unmonitored Things

`useCallback` - The Next Level of Your Callback Function!

The Difference Between `useMemo` And `useCallback`

The Misconception of `useEffect`, `useMemo` And `useCallback`

`useLayoutEffect` - Yet another lifecycle hook!

The difference between `useEffect` and `useLayoutEffect`, and why it matters

`useMemo` - The memoization hook

When to not use `useMemo`

`useState` - The Pillar of States

`useEffect` - The Lifecycle of Components

When Should I use `useEffect`?