DEV Community: Yehezkiel Gunawan

Coffee Talk

Yehezkiel Gunawan — Thu, 28 Jul 2022 10:11:00 +0000

Disclaimer

This article is made from my perspective and experience of making coffee talk sessions. Maybe not 100% valid but I hope this can enlarge your perspective about 1 on 1 sessions.

Introduction

On the second week of July 2022, I made a free 1 on 1 session called “Ngupi”. It actually a slank word from “kopi” in Indonesian which means coffee. That time, I only created 3 slots for those who want to have an online coffee talk with me.

Some of you may be wondering what is “coffee talk” actually? Actually, regarding the term itself, it’s like you’re going to a cafe with someone and talking about a topic while you’re enjoying the coffee at that place. But due to covid pandemic and restrictions, I made it online through G-Meet.

By the way, thank you Dian Yehezkiel, Fathan, and Bryan who attended my first 1 on 1 session. Actually, your knowledge and daily skill as a frontend engineer surpass mine🤣. As I’ve stated on Twitter that I even need to learn from you guys 😁.

Based on my conversation with those three, here are two important points that I got through it.

Brilliant Ideas Can Be Produced from A Casual Talk

In Indonesia, we are usually familiar with the term “nongkrong” which means hanging out with some friends. I’ve experienced how casual talk can even influence my life until now. That moment happened in early 2020 before covid restriction began when I was working on my bachelor thesis.

At that time, my friends and I got stuck with our thesis progress. I still remember almost every day I hang out with them just to go to a minimarket and buy some snacks. Then we just sit on the roadside in front of the campus. Some of them are smokers so they usually smoke while snacking, but non-smokers like me and some of my friends, generally just sit and snack together. Even we often did it with our lecturer regularly😂.

There was an interesting thing for me at that time. When we were stuck on our bachelor thesis project, we just share our progress and even ask for informal counseling sessions with our lecturer that usually join us in snacking. After around an hour and we back to the lab to work on our thesis, we got a new idea to solve the problem that exists in our thesis, and it works🤯.

I can tell you guys, that this casual counseling session with our lecture advisor is more useful than the formal one🤣. Why? Because when we’re in a casual talk, we become more authentic and just tell what we’ve faced and asked for help. It’s very different in a formal counseling session, we generally awkward.

Same as this casual 1 on 1 session. It’s not a mockup interview session. Just casual talk. We can talk about random things like career, study, or even technical things like front-end development. Sometimes, this coffee talk session will have brilliant ideas or insights through this spontaneous session.

It is Like Counseling Session

This 1 on 1 session is not like mockup interview. Mockup interview’s purpose is to prepare the attendee on how to get ready for the interview session when finding a job. Usually if the attendee wants to prepare himself for a technical interview (for a programming-related job), the mockup interview session will contain live coding and technical questions. In other words, it has technical and specific purposes.

I actually want to help other people who want to work as a front-end engineer through the mockup interview session. But, I think I can’t for now because I still need to learn and my work experience is less than 2 years🤣. So this is why I create a casual 1 on 1 session where everyone who joins this can discuss everything (mostly technical).

Through Cal.com the attendee must explain what topic they want to be discussed, so we can make sure that it is not losing its essence. For example, the topic is sharing both of our experiences in frontend engineering to gain new insights. So during the session, we discuss our experience, what issues may be faced, and how to tackle them like a counseling session.

Note that this “counseling” is actually not only for the attendee, but it also works for me. I also can learn and find out something new from the attendee’s perspective and experience. In other words, this is like two ways counseling session. Both attendee and the event creator learn and discuss a topic together to gain new insights.

Closing

So yeah, this is my experience and story about casual 1 on 1 sessions. Don’t get me wrong, who knows if this small thing can change a person’s life through casual discussion? I think if the experienced developers in Indonesia also make this similar open session, we can contribute to generating the new excellent software engineers generation for this nation.

Hope this article gives you another perspective. Let me know if you have some feedback or similar experience, you can share it in the comment section below.

Life Update: Pursuing Master’s Degree

Yehezkiel Gunawan — Fri, 08 Jul 2022 10:10:06 +0000

Disclaimer

This is pure my recent experience. All things in this article are purely my opinion. Maybe there are some of you who don’t relate to my story and maybe it cannot be 100% valid, but I hope this can help you to determine your future life path😁.

Introduction

The story started when I was about 2th semester college student in 2017. I still remember there’s a college subject named Computer & Society. On that subject, I learn a lot of theories about tech ethics and law in Indonesia. That subject is interesting because the lecturer is actually about an insurance company IT manager.

One time, my friends and I have a casual talk with him after class and he shares why he wants to be a lecturer while working full-time as an IT manager. Here’s his answer:

I actually didn't want to be a lecturer at first. I just took a master's degree then I got a lifetime benefit, being a lecturer for undergraduate students. Don’t worry, I can still work on my full-time job as usual. But I also can be a lecturer on the weekend like this. When I teach you all, actually it’s a giving back from me.

His statement made me consider continuing my graduate study after I graduated from the future that time.

After I graduated in 2020, I worked at a software house at Gading Serpong. At that place, I know a senior from college who has to own a graduate degree. He was a backend engineer at that time. His name is ko Vincentius Kurniawan.

One day, I have a deep talk with him, asking him why he took a graduate study and become a lecturer too. He answered like this:

Having a master’s degree doesn’t make your dream smaller. Most people think that a person who has a master’s degree mostly just becomes a lecturer. But they forget, that being a lecturer is actually not a final dream. It’s a lifetime privilege, you can use it as a side hustle, for your hobby to teach, or just give back. You can still work on your full-time job while being a part-time or freelance lecturer.

I know he also teaches as a part-time lecturer at my former campus. In other words, he has a double job as a backend engineer on the weekdays and as a lecturer on the weekend.

His statement made me more confident to take graduate study. And yeah, after working as a frontend engineer for around a year, I finally decided to pursue a master’s degree.

Luckily, I got very supportive colleagues, a manager, and even my CTO who has signed a recommendation letter for me🤣. For your information, I still work as a frontend engineer as usual at my current workplace. I take a graduate study online program at Binus (Information System), so I can learn outside of working hours online. And of course, remote working is also a benefit for me, so I don’t have to worry about commuting. The only things I need to worry about are electricity and internet connection🤣.

So, here is the explanation of my reasons why I am finally pursuing a master’s degree in Information systems.

Degree vs Just Certificate

There’s an old friend asking me why I should pursue the master’s degree while there’s a lot of Bootcamp and I can get a certificate from there too? Here’s my answer.

A BootCamp usually last for about 3-6 months. At the end of the program, the participant can claim the certificate as a prove that he or she has completed all the courses and finished the final project. I can say this is a very good thing. You can use it to apply for a job and improve your first impression in front of recruiters.

Now let’s compare this with the official master’s degree (and its certificate). Usually a master’s study take 1,5 - 2 years to be completed. I can get the master’s degree certificate after I finish the final thesis and publish it as a research paper. This also can prove that I’ve finished my master’s study and officially get a new degree behind my name🤣.

Now, what’s the difference? Someone who has a master’s degree has more powerful benefits. After I get my master’s degree soon, I can have the authority to give a recommendation letter to another person who wants to pursue their graduate study. I also can be a lecturer if I want. And mostly someone who has completed his or her graduate study will get a promotion on their full-time job because there’s some rescaling on the salary and benefit at their workplace (depends on the workplace).

Remember that, people who pursue their graduate study doesn’t mean they just want to be a lecturer. That’s the wrong assumption. Being a lecturer is not a final dream, it’s a lifetime privilege to all those who has completed their graduate degree. I can be a part-time lecturer without leaving my full-time job as a front-end engineer. When I retired in the future, I can switch careers as a full-time lecturer if I want. It means I have an alternative income as a lecturer.

I Can Learn Beyond My Specialization

At a Bootcamp, the participant usually just takes one subject that wants to be completed until the end of the program. For example, the participant takes Frontend Engineering BootCamp for 6 months. It means, in 6 months, he/she mainly or even only learns the frontend development. It means, the participant mainly just learns things that his or her preferences.

I take an Information System major for my master's study. There are a lot of subjects that need to be completed for about 1,5 years. Even though I have a bachelor's degree in Informatics and work as a frontend engineer, I have to learn the subjects related to project management and software architecture which are beyond my current specialization. Got the point? I have to face subjects that maybe not be “my preferences”. But don’t get me wrong, things like this can enlarge my capacity to learn and break my mental block to understanding other fields.

A friend of mine also asks me, “You have an informatics or computer science background. Why do you take an Information System major, not Informatics?”. My answer is simply because I have learned technical things for about 4 years of my undergraduate study. Then I worked as a frontend engineer for almost 2 years. Too many technical things that I’ve faced and experienced. I want to enlarge my skillset and prepare for my next career path, yeah being a tech lead😁.

This is why I take an Information System major, so I can learn to be a product-minded software engineer. Who knows in 2-3 years I’ll be a frontend lead. It means I have to improve my communication and project management skills through this major.

Networking at University Feels Different

Actually, networking can be gained everywhere. But I don’t know, networking through university colleagues feels different for me. At a BootCamp, someone can get new friends or new network who have the same interest in a field based on the chosen subject that he or she prefers for the Bootcamp. But in the university, I can know new people who have more diverse interests and backgrounds.

For example, currently, I know several friends who have diverse backgrounds like Project Managers, SAP Consultants, IT Consultants, etc. When they’re asked about their thesis topic interest, some of them are interested in the security field, some in project management, and anything else. In this kind of diversity, I feel I can learn a lot from this kind of environment.

Closing

So yeah, those are my three main reasons why I finally pursue a master's degree in Information systems. There are a lot of things that I want to tell here, but it seems hard to express them in the form of this short article. Should I talk about it on a Twitter Space or Podcast? Please invite me as a speaker if you don’t mind🤣.

If you have something to be discussed here, you can comment in the comment section below.

How To Publish ESLint Rules as NPM Package

Yehezkiel Gunawan — Wed, 22 Jun 2022 10:17:13 +0000

Disclaimer

In this tutorial, I’ll focus on the specific use case for typescript code-based. You don’t have to imitate this tutorial 100%. You can adjust the specific parts based on your needs

Introduction

Lately, I’ve been too lazy if I have to rewrite the exact same ESLint rules for my personal projects. Look at this. You maybe noticed this in my previous blog titled, Standardize Your Next.js Project.

{
  "env": {
    "node": true
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "unused-imports", "@typescript-eslint"],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "@next/next/no-img-element": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ],

    "no-eq-null": "warn",
    "import/order": [
      "warn",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          "parent",
          ["sibling", "index"],
          "object"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "complexity": "warn",
    "no-console": ["error"]
  }
}

Then I knew an old friend who told me that he created his own ESLint rules as an npm package. You can see his here. Like before, I asked him why he put an effort to create this thing? Simply because when he creates a new project (especially a personal project), he just needs to extend the ESLint rules. No need to rewrite the whole ESLint rules from scratch.

module.exports = {
  extends: ['sznm'],
};

So, his statement inspires me to create my own ESLint config library.

Preparation

First thing first, don’t forget to make an empty directory, then run npm init or yarn init. You can change eslint-config-test with your preferred folder name. Remember that eslint-config prefix must exist so it can be published at the NPM registry as the ESLint Config library.

mkdir eslint-config-test
cd eslint-config-test
yarn init

You will have package.json file like this.

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now, install the dependencies that we’ll use to make our ESLint config. Remember, you don’t have to imitate this 100%. You may have some other preferred tools, that’s okay.

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-sonarjs eslint-plugin-unused-imports

Setup The ESLint Rules

Now, you can start to write your own preferred ESLint rules. Start with creating eslintrc.js file, then modify it. Here’s mine, you can use it as a reference.

module.exports = {
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:sonarjs/recommended",
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "import", "unused-imports"],
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        moduleDirectory: ["node_modules", "src/"],
      },
    },
  },
  rules: {
    "no-unused-vars": "off",
    "no-var": "warn",
    "@typescript-eslint/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        vars: "all",
        varsIgnorePattern: "^_",
        args: "after-used",
        argsIgnorePattern: "^_",
      },
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "import/order": [
      "warn",
      {
        groups: [
          ["builtin", "external"],
          "internal",
          "parent",
          ["sibling", "index"],
          "object",
        ],
        "newlines-between": "always",
        alphabetize: {
          order: "asc",
          caseInsensitive: true,
        },
      },
    ],
    complexity: "warn",
    "no-console": ["error"],
  },
};

After you finish this step, now you can import it at index.js file.

const eslintrc = require("./.eslintrc.js");
module.exports = eslintrc;

Publish It To NPM Registry

Yep, technically you can now publish your rules. You can run npm publish or yarn publish. Then follow the step in the terminal. You can also create an NPM registry account if you don’t have it before.

Now how to use it? When you want to use it, you can easily extend it at your eslintrc file in your project folder. Here’s mine, you can access it at eslint-config-yehezgun.

Closing

This tutorial seems short, but it will have a long-term effect on you. You can now just need to adjust the ESLint config that has been published if you want to make some changes, then it will be implemented to all the projects that use the ESLint rules (you have to update the dependencies too).

Thanks for reading, hope it helps.

Reference:

eslint-config-sznm
Freecodecamp blog - How To Create Your Own ESLint Config Package

Retrospective: After One Year Working as a Frontend Engineer

Yehezkiel Gunawan — Fri, 27 May 2022 10:16:37 +0000

Disclaimer

Again this is based on my experience. This story may not be 100% and relate to some people. At least this story can be your reference for your career life.

Introduction

The story began when I just graduated from college in June 2020. That was a challenging moment because the Covid-19 pandemic began to invade the whole world, including my country, Indonesia. Not only that, but my college friends also face the same issue. That was struggling to get a job. I even found several of my friends to work outside the IT (not linear with his degree) world to earn for living.

After several weeks, one by one of my friends get their first job and that made me very anxious about my future. I've tried my best to apply to many companies but the covid-19 pandemic also causes so many hiring freezes. Thank God, in September 2020, with several of my college friends and even juniors, we got a job at a software house company at Gading Serpong. It is just a small company and the office is not too big, but at that time we only think to earn to live because of the pandemic situation no matter the salary or environment.

At that time, I work as a frontend engineer but mainly used Ionic & Angular to develop a hybrid mobile app. That's KAI Access. To be honest, I don't like this role. I actually prefer to work as a frontend engineer who focused on web development, but because of the situation at that time and I was still a fresh graduate, I still tried to be optimistic that this job may be the suitable one for me.

I was wrong. In June 2021, I got burned out with my job. It even influences my physical body, so I have to take a rest and do WFH even though the company has implemented WFO. I had to work in a job that I don't like for about a year and finally, I realized at that time, that I should find another job.

Luckily an old friend offer me a freelance project, so I joined him to make a warehouse system using React outside of working hours. That is the first time I learn React through a real case project. Since that, I started to like to craft something using React.

In August 2021, I continued to learn React (and Next.js) by myself. The first thing I made using Next.js is my personal web, yehezgun.com. It's just a mainstream project actually. But, since I published it on my Linkedin and caused some recruiters to approach me. This made me encouraged and keep posting my other mini-projects or articles about twice a month.

Thank God, in November 2021 a recruiter from my current workplace approached me through Linkedin. I was offered a frontend engineer role, but this time for web development. I continue the recruitment process and finally, here I am now. So happy with my current role, because the environment is very supportive. My current manager also supports the employees if they have some activities outside primary work like joining the devs community or being a course instructor.

For about a year (almost 2 years exactly😂), I learned so many things from getting my first full-time job, going through burnout, and getting a better job. Like a retrospective session, I'll share 4 primary points related to my previous story.

Fundamental is Crucial

I've written about this before in my previous article Why Fundamental Matters?. This made me realize that I should strengthen the fundamental things before going further.

Back in the old days when I learn frontend development prematurely, I directly jump into tools and frameworks like React, Angular, and Vue without learning the Javascript basics first. I got my first job and it uses Angular (Ionic) as the main tech stack. Struggled enough when I have to handle some issues that cannot be resolved with any help from the third-party library, so I had to create the logic by myself.

Another problem is when I joined my current workplace in January 2022. I have to relearn Javascript basics because I have to use React as my main tech stack. Not only that, I even have to understand the CSS basics because I work on a project that uses Tailwind CSS for styling purposes.

If only I have a solid understanding of the basics and fundamental things, it's not a big problem when I have to use tools or frameworks. I just need to adapt to the syntax and don't need to re-learn everything.

Focus on The Essential Things

I don't know if it is just me or if someone else who also feels the same thing that the more experience we got in the real industry work, the more we realized that we need to choose wisely what tools or frameworks can solve the problem.

For example, I've learned Angular for a long time since I was a college student until I worked in my first workplace at a software house. At first, I think that Angular is easy because with the CLI feature I can generate pages and components easily, and it's an imperative paradigm.

Everything changes when I've worked for around 6 months and realized that the community support for Angular is quite rare and it's hard to find the related or relevant solution when doing some troubleshooting. So because of that, I even made some logic by myself from scratch😵. Not only that but when I was searching for a new job the common market required React as the main tech stack skill.

I actually mentioned it in my previous article about Frontend Fatigue. I should choose a framework that has proven, has huge community support and of course, it can help me to solve the problem that I want to solve.

Focus on problem-solving. Choose the right and suitable tools that can help us to solve the problem, not make it heavier😂.

What You Do Now Can Determine Your Future

I still remember when I started a habit to publish the article routinely at the beginning of 2021. At first, I post articles in Indonesian (Bahasa) at diskusi.tech. Not a hard topic, I just share my experience and how to handle the problem that I've faced.

In the middle of 2021, I started to build my own personal website, yehezgun. com. At that time, I started to expand my English writing skill and post some articles in English. Not only that, I also keep making and publishing some mini projects on my personal website.

It took about six months until I was finally approached by some recruiters and finally I can get my current job because of that habit. I've mentioned it in my previous article about How To Get Hired Without Applying.

Not only my personal portfolio, but I also joined as a volunteer (cloud advisor) at Bangkit Academy. That's beyond my expertise and experience actually, because I didn't have any cloud computing background but I have to guide my students to learn about cloud engineering🤯. But don't get me wrong, with this experience I learn twice. I learn for myself, then I learn to deliver the material to my student so they can understand what they learn. This affects my career so much and helps me to understand the cloud-related things in my current job even though I'm just a frontend engineer.

Remember that the current version of yourself is built and developed by your previous version of yourself too.

Environment Matters

At first, I think working at a software house can be fun because I can learn so many things through the projects that exist, but I was wrong. The project that I handled is based on the client's request and most of them "cannot be interrupted or adjusted". If the client says A, I have to deliver it as A, not B.

The other problem is there's no proper code pattern. A lot of projects but each of them has its own code style and doesn't have a standardized code. When I have to deal with a project that I don't usually work on, I need a longer time just to understand the flow and how the code works.

This made me realize, that I should work at an in-house company that has a dedicated product that usually has a standardized and proper development pattern. Finally, in November 2021, I resigned from my previous workplace and join my current workplace in January 2022.

Working on a dedicated product is like you're adding a new puzzle piece to the existing puzzle board. Of course, because of that, the codes that are produced must be standardized and have the proper pattern so the quality of the product still can be maintained. But in my case, I got a project that has to rewrite the whole landing page from Vue to Next.js😁, but because of it, I can learn while working on it, especially about Next.js which is my current favorite go-to framework.

The most interesting part is finally I have the seniors that can be my career mentor. This is the first time I can have a real mentor in my life. When I was stuck on my task, I can ask them for help with what approach I can use to solve the problem. Even though we work remotely, we can still communicate properly through G Meet or Slack Chat. For me, this is the best work culture that can help me to grow.

Culture fit is real. It helps a person to grow and become better from time to time.

Closing

So yeah, this is my story. Feels like a career retrospective right? I hope this can give you a new insight from the (not really😂) experienced frontend engineer perspective.

Why Fundamental Matters?

Yehezkiel Gunawan — Mon, 28 Mar 2022 10:28:03 +0000

Disclaimer

Like previous articles, this is just based on my experiences and some of my friend's stories. Maybe you have a different story, but at least this story can be a reference for you.

Introduction

The story began when I was graduated in June 2020 and struggled a lot on finding a job. I skipped the fundamental one and learn the frontend frameworks like React, Vue, and Angular. It is kinda hard to pass the user interview session which uses the live coding interview method, because they usually ask the basic question and solve it fast without using any framework or tool, just with plain Javascript at that time.

But it doesn’t bother me too much because I got my first job as a frontend engineer at my previous workplace (a software house company) in September 2020. At that time I use Ionic and Angular as the main tech stack. I rarely code custom CSS for about a year, because the built-in UI from Ionic is so fascinating and it’s more than enough to deliver the required app to the client.

The new problem appears when I didn’t want to extend my contract there because I want to search for another opportunity to grow. Then I experienced the same problem as what I’ve done in 2020. Mostly I failed on user interview sessions that implement the live coding test.

After struggling a lot, by the grace of God, finally, I can get my current job in December 2021 (onboard on January 2022). Luckily the entrance test is a take-home test so I can maximize my ability. The user interview session did well and I’ve decided to choose this place as my next career journey.

Then another problem appears. For the first three months, I’ve been given some tasks related to styling things. I have no problem when coding the code for integration purposes like fetching data or data manipulation. But styling-related task actually is my greatest weakness.

Like I’ve told you in my previous article titled “I Remake My Personal Site using Tailwind CSS”, I was too dependent on tools, library, or framework. In this case, I was too dependent on styling tools like Chakra UI. I can make the styling using Chakra UI, but when I have to deal with another tool that is not my preference, I struggled much.

That time, I even struggled to make a simple layout for several hours using custom CSS and Tailwind CSS, LOL. This is why I realized, the fundamentals should be not skipped before you jump into tools like Chakra UI, Bootstrap, or other tools.

After about 3 months of struggling with the basic things, here is my reason why you should start or even restart with the fundamentals before going further.

Why Fundamental Matters?

Imagine Struggling At A Job Which Not Use Your Preferred Framework

This is what has happened to me actually😆. So in short, I skipped the fundamental of Javascript and CSS and directly jump into React, Next.js, and Chakra UI.

When I got my first job as a frontend engineer, I got a project which use Ionic and Angular as the main tech stack. For the first three months, I struggled with Ionic and Angular syntax. But luckily I didn’t struggle much when doing some styling because Ionic has provided a nice base UI, so I usually just do some minor styling like changing color or just the font family.

About one year later, I quit that job and found a new opportunity. While finding a job again, I back to my old bad habit, directly learning React and Chakra UI without learning the fundamentals, and successfully created my own personal site. Shortly, I finally can get my current job as a frontend engineer at the new company.

Luckily I code using React and Next.js in my current workplace so I didn’t struggle much for the logic things. But for styling purposes, I have to use Tailwind CSS. As a UI Component user who switches to utility class tool, that’s very “horror” for me, because I have to understand CSS basics when I made some styling.

During the probation period, I struggled a lot with these styling-related things😫. I even need several hours just to make a simple layout for the website. Luckily, along with the time I also learn Tailwind CSS in my free time and can cope with it. You can read my article here which contains my experience when learning Tailwind CSS.

Okay, do you realize something here? You can directly jump into the framework or library without learning the fundamentals. That’s not a big problem until you got a job which not use your preferred framework. You will struggle a lot to adapt to it because there’s no core concept or solid understanding of it.

Soon or Later You Cannot Rely on Tools Anymore

When I’m still a frontend engineer at my previous company, I was too dependent on third-party tools almost for every single task like making a timer and even displaying the formatted date. I was ever given a task by my former manager to display the map on the mobile app. At that time the only thing that existed in my mind is I have to find a suitable third party that can be used for that case.

Several days later, finally I found the Angular Google Maps library and luckily can solve the problem for a while. But the new problem appears when the client asks for some customization. That’s the first thing that has made me sick for several days just to customize the layout of the displayed map. It’s easy to initialize and integrate, but again third-party tools are usually hard to customize.

The second case is when I got my current job. I discussed with the UI/UX team about the new website project that will be developed. The manager proposes the tools that can be used for the styling purpose. But in the end, we decided to use Tailwind CSS (a utility class styling framework), because we need a customizable tool and if the tool cannot be customized, we have to make our own tool to solve the problem.

My manager also said the same thing in my probation review statement.

Strengthen your fundamental understanding of CSS. One day you can’t rely on tools anymore.

How To Cope or Deal With It?

How to deal with it? What if I’m already like you, skipped the fundamentals, and rely on tools?

Don’t worry there’s still hope here, LOL. I even still struggle with this thing. But here are some tips from me. I even still doing these even I’m a full-time employee now and it’s very helpful for me.

Re-learn Again From Scratch

If you have free time outside your main job, please spare time just to learn the basics again. You can learn from any sites like Freecodecamp or Hackerrank to push yourself re-learn the basics through the coding challenges. If you’re a frontend engineer and want to sharpen your understanding of flexbox, you can try Flexbox Froggy Game. It’s a free web-based game that can help you to learn about flexbox through its gameplay.

In my case, it’s hard to find a suitable time for learning again from scratch because I’ve struggled in finding a job and need it quickly (when I was a job seeker). And now, still hard to find it because I’m a full-time frontend engineer in my current workplace. But it doesn’t mean I can’t learn the basics.

In my free time, I usually follow Kevin Powel on Twitter and watch some of his videos on Youtube to sharpen my concept and understanding of basic CSS. If finding suitable free time to learn is hard for you, at least push yourself to learn the basic concept by reading the official docs like MDN or watching some youtube videos that explain more about the basics.

Learn a Tools or Framework That Push You To Understand The Basics While Using It

For me, this tip is very useful. When I have not much time to re-learn the basic, I choose a tool or framework that force me to understand the basics while using it. Like I’ve said before in my previous article here, I found it when I’m using Tailwind CSS.

Even I’m not using the CSS syntaxes directly but I can learn and understand the basic CSS concepts through Tailwind syntaxes. To produce good and effective “styling” codes, I have to understand basic concepts like flex, grid, margin, padding, and other CSS concepts.

This also works when I code in React. Even React is a Javascript library, but it contains Javascript syntax which made the developer must face and sharpen the basics first before going through. I have even re-learn basic Javascript syntax so I can produce clean and effective code in React.

Luckily, my current workplace also uses React and Tailwind CSS as the main tech stack so I can use my work time to work on the task and learn new things through it😁.

Closing

Learn the basics first before jumping into the framework or tools. It will make your path smooth. You can easily solve any problems that you’ll face because you understand the concept, not only the tools that be used.

Soon or later you cannot rely on tools anymore. I’ve experienced it before when I was developing Map Feature for KAI Access and it was very exhausting for me just to find the suitable tools that actually have deprecated.

You’ll also struggle a lot to find a new job because nowadays most companies implement live code interviews or “agnostic” test cases for the programmer candidate. I even failed so many technical interviews before due to a lack of basic skills.

But don’t worry, keep learning. Don’t fear missing out (FOMO). I know so many frameworks and tools out there. You can read my article about Frontend Fatigue for more details, hope it helps you to determine the suitable tools for you.

But anyway again, learn the basics first! I know this method will make you seem like a slow learner. It’s better to be a slow learner with solid understanding than you force yourself to learn everything and be burnout and exhausted. Learning is a marathon, not a sprint.

Thank you for reading my article, hope it helps. Let me know if there’s something that you want to discuss in the comment section below.

I Remake My Personal Site using Tailwind CSS

Yehezkiel Gunawan — Tue, 15 Mar 2022 10:41:02 +0000

Disclaimer

This post may seem opinionated. I just share why I finally move to Tailwind CSS as my main CSS utility tool.

Introduction

So, previously I used Chakra UI for my personal site yehezgun.com. Everything changes when I got a new full-time job as a frontend engineer in my current company. I realized that I’m too dependent on the development tools like UI libraries and some npm registry packages.

I was ever given a task to fix some layouts using native or vanilla CSS and it took about 2 hours for me just to give some styling for a static page. I realized I have to strengthen my fundamental skill again before going further.

Then I found that Tailwind CSS is interesting, so I started to create my own Next.js + TS + Tailwind CSS Starter Template. Thanks to Theodorus Clarence, his starter template helps me a lot to re-create this template on my own. I use his idea and components splitting concepts and modified them based on my current needs.

I don’t say that Chakra UI is bad. Actually, it helps me a lot if I’m developing a site with a short deadline because it increases productivity. But for learning purposes, I prefer Tailwind CSS. Here are whys I finally use Tailwind CSS for my future personal projects.

I Learn CSS Basics While Using Tailwind CSS

Tailwind CSS is not UI Component, it is a utility-first framework for styling purposes. When we work with Bootstrap, Chakra UI, or other UI Component libraries, we just set for example class btn if we want to make a button component or just set <Button></Button> (usually in React UI Libraries).

But in Tailwind CSS, I have to style the component from scratch as I did with plain CSS, but I can completely custom designs in the HTML class name. For me, it feels like writing the inline CSS styles but is a more elegant and much cleaner way.

Code Example:

<button class="bg-sky-600 py-1 px-2 rounded-md">
  Save changes
</button>

If I want to add a hover effect, I just add hover:bg-sky-700 in the class name.

Notice something?

I realized that when I’m using Tailwind CSS, I also feel pushed to re-learn the CSS fundamentals again after a long time, LOL. This is interesting when I made a custom styling with Tailwind, I have to know which styling concept I have to use even I didn’t use the original CSS syntaxes.

For example, when I want to create a layout like below. When I use the UI component like Chakra UI, I can easily use the Flex component and add some gaps and spacing using its props. But when I use Tailwind, I have to set my own flex, flex item, spacing. And of course, I have to custom the buttons below by myself using Tailwind.

This is very good for me. When I was finding a new job last year, I was interviewed by some users of the companies and they said the same thing, “You’re really good using these tools. But we need an employee who can write and understand the basics. In this case, that’s plain CSS because we still use it in our systems.”

I’ve read Theodorus Clarence’s docs site, he stated that you have to cover the fundamental of CSS before jumping into frameworks like Bootstrap, Chakra UI, or even Tailwind CSS. And this is very true. In my case, I was often rejected by the recruiter when I have to live code using plain CSS. That’s very embarrassing for me, LOL.

As a full-time worker and has graduated almost two years ago from college, I need to find an effective learning method so I can adapt to the current situation and deliver it fast. Actually, I can learn CSS from scratch, but it takes a too long time and I need a job fast at that time when I was a job seeker.

Until I found Tailwind CSS and yeah as I said before, I can learn the basic CSS through every Tailwind syntaxes.

Very Customizable

Because Tailwind CSS is a utility-first framework, you can fully customize every page or component in your website. You even can make your own design system if you want using Tailwind CSS.

Have you seen Theodorus Clarence’s Next.js + Tailwind CSS Starter Template? For me, it’s like a mini design system packed as a starter template. This inspired me to make a similar template of mine, so when I want to create a new project, I can generate it from the starter template and don’t have to worry about the base config or style and of course, I can be more focused on the development process.

This thing made me realize that I have full control when styling the website using Tailwind CSS.

I Can Maximize The Use of HTML5 Tags

This is very opinionated actually, LOL. But when using Tailwind, I can maximize the use and understanding of HTML5 tags.

Like the first point explanation, when I use the base HTML5 tags, I actually learn about the structure of HTML5 and what’s the best practice that I can implement when creating the web structure.

And like many people said, using proper HTML5 tags can also increase the SEO percentage. You can read the article here.

Closing

If you found that learning the fundamentals takes a long time for you, learn and use a tool, library, or framework that forces you to understand the fundamentals through its features.

As full-time workers or job seekers who graduated from college, we have to find an effective learning method, because we’re racing against time, especially when we need a new job fast. Learning from scratch is sometimes too exhausting and we need more time for that.

This is why we have to choose what tools, library, or framework wisely. Choose those that push you to understand the basics while you using them. In my case, Tailwind CSS is very helpful for me to understand the basic CSS syntaxes while I’m using it through its syntaxes.

I hope you can also learn something from these articles, I’m still an amateur in this. Feel free to have some discussions, you can write it in the comment section below.

References:

How to Setup and Integrate Umami to Your Next.js Site

Yehezkiel Gunawan — Sun, 20 Feb 2022 05:55:13 +0000

Disclaimer

In this article, I will focus on how to self-host and set up Umami, then integrate it into the Next.js-based project.

Introduction

Often, when someone or organization wants to set up the web analytics tool, they usually use Google Analytics. But as some people know that we cannot collect real data because when there’s a person visit a website and he or she set an adblocker in their browser, the analytic tool cannot work properly. And of course, there’s also a privacy issue with this tool.

Alright so are there any alternatives? Yes, I’ll recommend Umami. Why? According to its official docs, Umami is open source and can be the privacy-focused alternative to Google Analytics.

Okay, so let’s jump to the main point. How to set up and self-host Umami? In this article, I’ll explain how to set up Umami with Vercel and Supabase.

Preparing The Account

First, of course, make sure you already have a Github account. If you don’t have it yet, please make it first because it will be needed to deploy our self-host Umami.

After you have a Github account, make sure you also registered at Vercel and Supabase.

Setup Supabase

Now, you can log in to Supabase and go to the main dashboard and click “New Project”. Use the organization and project’s name based on your preferences and needs.

Fill in the form fields based on your personal preferences. Also, select the closest region to your domicile in the region form field.

After you click the “Create New Project” button, go to the SQL Editor section.

Then, you can copy the SQL Schema query from Umami’s Github Repository. After that, you can run the query.

Deploy on Vercel

You can easily deploy Umami to Vercel just by open Umami’s Docs (Running on Vercel section) and clicking the “Deploy” Button. Then, you can select Github and fill in the repository name and after that, you can just follow the default steps.

If you have reached the step like the image below, head back for a while to Supabase.

In Supabase, go to the Settings menu and then click the “Database” section. Go to the “Connection String” segment. Select “URI” and copy & paste it to DATABASE_URL on your Vercel settings. Don’t forget to change “YOUR_PASSWORD” into your own Supabase database password.

For the HASH_SALT field, you can use Password Generator to generate some random string and copy & paste it. After that, you can deploy it to Vercel.

If you want to change the domain after the deploy process, you can go to the project settings and select the Domain menu, then click the “Edit” button.

Configuring Your Umami

Now you can open the deployed Umami on your browser. The default username is admin and the password is umami. You can change it later if you want. You can go to the Settings menu and go to the profile section to change your current password.

Adding Umami to Your Website

In the Settings menu, go to the Website section and click “Add Website” Button. You can add your website name and link there and enable the “Share URL” if you want.

After the website is added, you can copy the “Tracking Code”. You can paste it into your project soon.

Now for the final step, go to your web project folder. In my case, I use Next.js and I paste the code in the _document.tsx file.

And yeah, congratulations! You just need to push the newest commit of your project and you can watch the statistics of your own site at Umami. The statistics will appear on your Umami dashboard within 24 hours.

Closing

You can follow these same steps on your other projects. Hope it helps. Let me know if you have some feedback or something to discuss in the comment section.

Reference: How to Setup Umami with Vercel and Supabase (by Jacob Bouchard)

This is How I Switch from Angular to React

Yehezkiel Gunawan — Sat, 12 Feb 2022 06:44:47 +0000

Disclaimer

Again, this is just based on my experience as a front-end engineer. You maybe have a different experience or context when you read this, but at least it can give you some reference for your career.

Introduction

The story began when I was working as a frontend engineer at my first workplace using Angular at that time. At first, I enjoyed Angular but it changed when I want to switch jobs in the mid of 2021. Most of the job vacancies required React as the main skillset. After that, I change my mind and take a maneuver from Angular to React as my main frontend tech stack.

Not only that, when I did some troubleshooting or debugging I need more time to google some stuff if I code using Angular. It’s very different when I use React, I just enter some keywords and the search result will display more accurately based on my needs. This lasted for about almost one year until I finally realized it was time for me to change.

Actually, most of the frontend frameworks still use Javascript (or Typescript) as the main programming language. The main difference is the approach implemented in each framework. This is what I did to overcome and I still do this until now. There are still many things that I don’t understand yet about React, but when I did this, it helps me and I can get a new job because of it. Hope it can help you.

Back to Fundamentals

React, Angular, Vue, and Svelte are using Javascript (or Typescript) as the main programming language. The main difference is only the approach in each framework. So it will be easier to back to the basics first, learn Javascript fundamentals before switching to another framework.

The framework can change over time, even in just months you maybe need to re-learn it again. If you skip the fundamentals, it will be hard to switch to another framework. Having a solid fundamental Javascript skill can make learning some frameworks easier and faster. You just need to adjust the related syntax according to the framework.

In my case when switching to React, mostly I have to learn Javascript again because as I know React contains more Javascript syntax and logic. Very different when I use Angular, everything can be done with its CLI and default config. I have to make my own custom config while using React.

A site like freecodecamp.org and hackerrank.com is very helpful for me. I can re-learn Javascript syntax and features through it and train my problem-solving skill.

Learn The Framework Philosophy

This is the most important part after you learn the basics. Before jumping into any frameworks, you have to discover its philosophy. Why? Because you have to know how it works, why the founder made the framework, and what problem this framework wants to solve.

Actually, I skipped this part about the first 3 months when I learn React, LOL. When I face some issues, it takes more time for me to discover what is the main problem of that issue because I didn’t know how it works. I often produced dirty code because I don’t know the best practice for this that time.

Luckily, I follow Theodorus Clarence on Twitter and he amazingly often tweet some basic things about React (and Next.js). I even just realized some basic things like state management and React DOM after about 6 months of learning and using React, LOL. Why didn’t start earlier, LOL. This is why you should follow useful accounts like him. It can give some new insight even through some simple tweets or tips and tricks.

A friend of mine also gave me a Github repo that contains the explanation of React Philosophies. It can be accessed at React Philosophies. I still processing this, too many things to understand but now at least I can understand some best practices that I can implement by myself.

Create Projects

Remember that programming is about problem-solving. You cannot learn programming just by watching tutorials on Youtube. You have to try it by yourself.

You don’t need to create a complex project, just create a simple one and you can use it by yourself. For example, I created a simple food app using React + Line Frontend Framework (LIFF) app. It just sends the food list that you’ve selected through LINE Browser. And through this, I can understand how the LIFF Framework works and can be used if I need it.

There’s a term called “Tutorial Hell”. It usually happens you read or watch some tutorials and you feel that you have understood all the material, but there will be great confusion when you try it by yourself. I never experienced this, but I overcome it by directly creating a project using a framework that I want to learn.

For example, instead of learning React, I’d rather create some projects using React and its supporting libraries.

Code Reviews

When you finished your projects, don’t stop there. Review it by yourself or by your friends. Note that every programmer has their own blindspot so maybe there are some things that are missed when you create the project.

I remember when I worked on my first freelance project using React, I always ask my frontend friend to review my code before merging it at the GitLab Repository. At that time, the code that I made worked properly, but sometimes my friend found that there were some parts that can be improved or made more readable.

Many may ask, how to produce better code? In my opinion, you have to regularly do some code review, either review it by yourself or ask your friend to review it. Experience never lies, you will know the right thing after you do or see the wrong ones.

Closing

So yeah this is my story when I switched to React. I know maybe some of you have different contexts or testimonies, but I hope this can inspire and even help you if you want to switch to another framework. Let me know if there’s something that wants to be discussed.

Standardize Your Next.js Project with ESLint and Husky

Yehezkiel Gunawan — Sun, 30 Jan 2022 12:33:13 +0000

Disclaimer

In this article, I’ll focus on Next.js (using Typescript) based project. You can adapt it to your own needs based on your project source code and the problem that you’ve faced.

Introduction

Based on my experience in the software development world, Javascript (and Typescript) is the “wildest” programming language. We can use any code styles or conventions by our own preference in every project if we use Javascript.

When I work on a personal project, actually it’s not a big problem because I code for myself and only me who know the code, LOL. But imagine this, how if I have to work in a team with several people and each of them has their own code style? BOOOM, it will be chaos right?

This is just a simple reason why we need a standardized convention in our project source code as software engineers. I think it’s a common problem that needs to be reminded so as a developer we have to keep our code structure clean as has been set.

Why We Need Standardization In Our Project Source Code?

Before we go too far, I think we have to start with “why” first. Why do we need the standardized convention in our code? Here’re the whys.

Every Team Member Has Their Own Code Style

Like I’ve told in the Introduction section when I was making my personal projects, I code for myself so maybe I can use whatever code style I like. But everything changes when I have a full-time job and have to work in a team with several people. Every team member has their own code style and it may be confusing when I got a task and need to understand someone’s code that has a very different style.

Not only me actually, when other teammates read my code, they were also confused with my code style, LOL. This is why we need to make an “agreement” so we can use a consistent code style in our code base.

To Increase Maintainability and Readability

I have been worked at a software house company that has a project-based work culture. Our task is finished when the requested app is delivered to the client.

I was a newbie junior frontend engineer at that time and I code with barbaric style. In my mind, I just have to finish and deliver it to the client before the deadline. That was a dark moment in my career life, hahaha.

The situation changes when I switch jobs to another company and now I’m working in an in-house company that has their own product that needs to be developed. The main focus is change now.

In the previous company, my main focus is just to code and deliver. But in the current company, I also have to think about how to make my code is maintainable so it will be easier to be improved or updated when needed.

The answer is quite simple, make and follow the code convention so the code style in the project code base is consistent even it was developed by different people. The consistent code style makes it readable, and if it’s readable, it will be easier to be maintained.

Not Only Code but Commit Message Also Need To Be Standardized

When working with a team, it’s important to tell the informative message when pushing a commit to the Github (or Gitlab) repository. The best code style is useless if the commit message is bad. Other team members don’t understand the changes that you’ve made, and it can cause confusion and chaos in the future.

Thankfully, there’s Conventional Commit that can help the developers to make a proper commit message before they push their code to the Git Repository.

How To Standardize The Project Source Code?

I’ll tell you based on my experience as a front-end engineer. Luckily there are some tools that can help us to make the code convention. Here’s what I usually use.

Prettier (Code Formatter)
ESLint (Linter for JS-based project)
Next Lint (built-in linter for Next.js)
Husky (automated linter trigger)
Lint Staged (run linter before commit)
Commit Lint (check the commit message before committing)

For giving an example purpose, I’ve prepared a simple Next.js (Typescript) project. You can use https://github.com/yehezkielgunawan/next-tailwind-polos if you want to try to standardize the source code using those tools. You can clone it to your local device and don’t forget to install the dependencies using yarn or npm install

Here’s what we’ll do in the next section:

Configure Prettier
Configure base ESLint rules
Install & configure the base husky setting (Reference: Husky setting Yehez-Tailwind-Starter)
Install & configure lint-staged and commitlint

In the steps below I’ll use yarn, actually, you can just adapt it by your preference if you use npm. You can see the official docs so you can match them by your need.

Prettier Configuration

I assume that you’ve already cloned the example project source code, so I will focus on the tool's functionality.

Make sure you’re open the project folder through VS Code or your terminal, then run yarn add --dev --exact prettier. Then create a file named .prettierrc.json in the root folder, or you can just run echo {}> .prettierrc.json in your terminal.

In the .prettierrc.json file, you can fill the configuration like below or you can fill it by your needs (reference: Prettier Config Options).

{
  "endOfLine": "lf",
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Now, you can just run yarn prettier --write [directory scope] to format your code. Or if you use VS Code, you can set Format on Save in your VS Code Settings. You also can use the shortcut to manually format the file (using VS Code) by pressing Shift + Option + F (in MacBook) or Shift + CTRL + F (in Windows).

Configure The Base ESLint Rules

Because we use Next.js we will use ESLint for Next.js. But luckily in the newest Next.js version, it has automatically installed when we initiate the project. So in this case, we just focus on the eslintrc.json file wherein the root project.

But make sure, the lint command exists in the package.json file.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
...

Here are my ESLint rules in eslintrc.json. You don’t have to imitate this 100%, just match it by your own preference or current needs.

{
  "env": {
    "node": true
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "unused-imports", "@typescript-eslint"],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "@next/next/no-img-element": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ],

    "no-eq-null": "warn",
    "import/order": [
      "warn",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          "parent",
          ["sibling", "index"],
          "object"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],
    "complexity": "warn",
    "no-console": ["error"]
  }
}

In this case, I use third-party ESLint plugins like import, unused-import, and typescript-eslint.

After the config process is finished, you can run yarn lint to check if your code is already matched with the ESLint rules or not. You can also run yarn lint --fix to automatically fix your code based on the rules that have been set. Remember that sometimes we need to manually edit the code, so don’t overly rely on the automated fixing code.

Configure Husky Base Setting

Want some automation addition? I usually use Husky to automate the checking process before committing or pushing to the Github Repository.

Because we’re using yarn, we’ll install it by running npx husky-init && yarn in the terminal. It will automatically generate the prepare command in package.json and a base pre-commit config.

After that, we’ll install the Lint Staged to trigger and run lines on git staged files by executing npx mrm@2 lint-staged. It will automatically generate the base command triggers in pre-commit husky config file. After that, you can delete or modify the content by your own preference. After that, it will run the linter before the commit process. So you have to make sure that your code is matched with the linter rules.

Like I’ve mentioned before, not only code, we also need to standardize our commit message before pushing it to the Github repository. So we’ll set Commit Lint by executing yarn add --dev @commitlint/config-conventional @commitlint/cli in the terminal.

Don’t forget to set the commitlint config as our base commit config by running this command in the terminal.

echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

Now integrate the commit lint into the husky config by executing yarn husky add .husky/commit-msg 'yarn commitlint --edit $1' . It will generate a new husky config file named commit-msg.

Now you cannot make any “barbaric” commit message anymore, LOL.

Want to add some additional config before pushing your code to Git Repository? For example, I run npx husky add .husky/pre-push 'yarn lint' to generate the husky config that triggers the linter before pushing my code.

And YEAH!!! IT’S FINISHED. Note that, you don’t have to imitate my method 100%. You can match it with your needs.

Closing

Actually this is not an absolute way. There are so many ways or even tools that also help us to standardize our source code. Hope it helps you guys. I’m sorry if still there’s some grammar error. I’m still learning how to write in English properly, hahaha. Let me know if you want to discuss something in the comment section.

How To Get Any Programming Project Ideas?

Yehezkiel Gunawan — Tue, 11 Jan 2022 08:07:10 +0000

Disclaimer

This article may be opinionated because it is based on my personal experiences. But at least it can be your reference on your working for the portfolio as a programmer.

Introduction

Several days after I published my article titled How To Get Hired Without Applying, some of my friends asked me, How you easily can get some ideas to create your project for your portfolio?. This is the same question when I knew a friend who routinely develops his projects and publishes them.

I knew exactly when we were just graduated in 2020 before getting a full-time job, he routinely publish his projects through Linkedin, Twitter, and his site. You can see some of his projects at https://sznm.dev/projectsss. That time, I asked him the same question as the question in the previous paragraph.

In general, these are what I got from his answer. This answer makes me realize that it’s not too hard to generate some ideas in your head.

Start From What Problem You’ve Faced

Remember, the “How” will not exist without “Why”. When you want to create a solution, there must be a problem to be solved. This is the most crucial thing that I’ve tried when I wanted to switch jobs to another company last year.

When I switch to React from Angular, I have to create something using React to strengthen my fundamental skill. That time I felt exhausted when I have to initiate a project from scratch, especially when I have to face the “config things” like husky, ESLint, and Prettier config.

Like I said in my previous article titled Why Making A Starter Template Matters? then I made a starter template using Next.js, Chakra UI, and Typescript. It may be confusing and exhausting in the first place, but when I want to create some projects in the future I just use the starter template that I’ve made before without getting burnout due to “config things”.

Another example, when I post a microblog on Linkedin, I felt I need a link shortener. I think it’s better if I have my own link shortener so I can customize it with my own preferences. Then I made it at https://link.yehezgun.com/.

Got the point? You can find out the problem that you’re facing, then make a plan to solve it. After that, implement what you’ve planned.

You Don’t Need to Create Something from Scratch

Thanks to technology, we now can search for information that we wanted through the internet. I remember a time when I watched an online talk between Pak Sandhika Galih (Web Programming UnPas) and Mathdroid. The talk is titled Tips Belajar Programming, Indie Hacker & Reverse Engineering. You can watch it on Youtube (the talk is in Bahasa Indonesia).

In this modern world, when you want to create a project, especially a coding project, you can easily google for it, search the references that you need, then implement it into your project. You can even imitate someone's project, manipulate it then remake it by your preferences. ~Mathdroid

That statement was so inspiring for me. For your information, I actually have tried this method and because of it, I can get a new job.

It will be exhausting when you create a coding project from scratch. But remember that they're so many tools or libraries out there that can be used for your project. For learning purpose, it will be better to create something from scratch to understand how it works in general, but in long term, you will need tools that help and boosts your productivity due to deadlines or something else prior.

But don’t be wrong about this. The latest tools don’t mean the best. Find suitable tools for your problems!

You Even Can Remake A Project That Already Existing

Can’t create something original? You can remake an app or project from what’s already existing. For your information, when I made my own Next.js + Chakra UI + TS Starter Template, I actually just imitate the idea from my friend, you can see his project at https://github.com/sozonome/nextarter-chakra.

Imitate doesn’t mean I remake it with 100% similarities. I took the layout reference and what tools can be useful for me, then I remake it based on my needs. Don’t worry, by remaking it actually you also learn how to make it step by step. When you already know what to do, it will be easier for you to do the next step.

Analyze, imitate, then modify. This is the very simple thing that enables a country in Asia which currently is one of the most developed countries. Yeah, you must know what I mean.

Another example is when I made my Yehez-Shortin (link shortener). It actually a common idea. Most newbie web developers even made this when they just learned a new programming language. But I modified the layout and the feature based on my preferences, like dark mode and custom URL alias.

Closing

In this modern era, you can easily find the idea. You just need an internet connection then google it by yourself. Even actually you can find an idea around you.

Sometimes you tried hard to generate or find some ideas to create a coding project. Remember that, coding actually is problem-solving. So start to define or find a problem that you want to solve, then go ahead to solve it.

Thanks for reading, hope it can trigger you to develop your project, LOL. I’m sorry if there are still many grammar errors due I’m learning to write in English properly.

Reference:

Bangkit Academy Class 6: Idea Generation & MVP Planning
Agustinus Nathaniel’s Portfolio (https://sznm.dev/)

My 2021 Recap

Yehezkiel Gunawan — Mon, 27 Dec 2021 09:09:57 +0000

Introduction

Well, without realizing it we are already at the end of 2021. Is it just me or not, this pandemic era makes time goes faster? I remember the last time we can meet each other by a person is about March 2020, and we're almost done everything online for nearly 2 years LOL.

I hope you're all good until today. Like most people do at the end of the year, I'd like to write some of my yearly recap and hope for the next year as a newbie frontend developer. Feels opinionated, but I think this can give you some new insight for planning what to do for the next year. For me, writing this can also be a self-reminder for myself when I read it again.

What I've Learned Throughout The Year

Struggling to Overcome Burnout of Fulltime Job Workload

We all know the Covid-19 pandemic has caused a lot of companies to enable Work From Home (WFH) regulation, except my previous company at that time LOL. From February 2021 until I resigned, still had to Work From Office (WFO) 100% every day even it's a software house company and very possible to do everything remotely.

I started to feel that I'm not enjoying my job at my previous company due to the toxic environment. I even did not learn anything except about mitigation and survival, LOL. For about one year I work spontaneously rather than making planning like a sprint planning routine like common tech companies did. When there're requests from the client, then my senior and I just work on it based on the requests.

The manager didn't give support at all. They just give ideas (actually add the workload for the devs) without explicit and concrete examples. So I have to think harder about the implementation. When the app is successfully developed, the developer never received any appreciation, only the managers.

In August 2021, I got burned out and didn't have the energy to work anymore because of the workload and the workflow. It lasts for several weeks. Luckily it was not a busy moment because there's a lack of client requests at that time. Actually, I still love coding, but not for the company's tasks.

I even spoke directly to him, and luckily the manager did not deny the facts that I've spoken. But the general environment and situation make the changes very impossible to be implemented. So I can say, there're no changes until I resigned from that place.

I learned that work culture and environment are very crucial. After I survived in this company for about one year and three months, I decided to not extend the work contract and luckily I got a new job for the next year.

My Favourite Learning Path

In August 2021, after I healed from my burnout, I work on a freelance project with 2 of my former college friends. We made a web app using React (frontend) and Node.js (backend). I fell in love with React because of this.

I struggled a lot on the first week because I used Angular before then I have to switch to React in a short time. But, when I understand the code pattern and the basic things of React I finally finished all of my tasks for the project. Thanks to Agustinus Nathaniel for guiding and helping me to understand React properly.

After that, I invested my money to buy a domain for myself and challenged myself to build my own portfolio site using Next.js. Finally, I can finish it within a month. Not only that, I still developed some personal projects using React & Next.js to sharpen my understanding of React things.

Finally I Got a New Job

I remember the moment I decided to prepare for my resignation in September 2021. After I finished developing my personal site, I challenged myself to make several personal projects and published them on Linkedin. Sometimes I wrote some articles and published them on Linkedin once a week.

My life changed since that time. I got several direct messages which contain a job offer as a frontend engineer (React-based). I also got a lot of phone calls from the talent hunter who offered me a job for their client company.

Now, I'm very selective in finding a job because of my past job experience. I don't want to get into the same toxic place. So when I got a phone call from the talent hunter or recruiter, I did some research by myself to find out the information details about the company, including the company reviews at Glassdoor.

I can identify the red flags regarding that company just by looking at the former employee reviews. Not only reviews, if the company does not have a professional profile like Linkedin Page, actually it can be a red flag too.

Besides that, if I know that I have some friends who work there, I usually contact them and ask them about the work culture and situation there. Actually, I have got an offer letter from a Financial Technology (FinTech) company where some of my friends work there with a high salary. But without asking for more details, I canceled the offer because my friend often overwork and still have to work remotely from home on the weekend (hustle culture). I know the salary is interesting, but hustle culture is not for me and can lead me to burnout again.

What you see is what you get. If you know you've been warned through the red flag that you got from the previous reviews or the information that got from friends, the reality won't be far from that.

Luckily, in November 2021, a recruiter from another hospitality company reach me through Linkedin. Then I followed the recruitment process and finished the take-home project. The pleasant moment is when during the user interview session with the squad leader. The user was not judgemental. He was even amazed at my take-home project result when he reviewed it. We spent time for the interview for about one hour, talking about my previous projects and experiences. It was so fun.

Several days later, I do the final interview with the manager. He is the first supportive manager that I've ever met. He cares about the employees' mental health and workload. He even explained and tell the truth of the company's current situation to me during the interview. We talk about many things during the interview for about more than one hour, LOL.

Finally, after the salary negotiation and the last interview, I received the offer letter. The recruiter was very helpful. She even reminds me of when there are some mistakes in my submitted personal data.

For your information, I live in Bogor, Indonesia, and the company is at Bandung. It's pretty far from my home city, but luckily I got the option to work remotely even after the pandemic ends, yeah!!!

I'll start to work again in January 2022. Wish me luck and I hope this is the better job for me to grow.

Projects I've Worked on in 2021

yehezgun.com

As I mentioned before, this is the first personal project that I've done in 2021 using React & Next.js. You can access and take a look at yehezgun.com. I don't like to make complex designs. I'd rather make the simple one so I can understand it by myself when I want to make some improvements, LOL.

Personalized Starter Template

So far there are two starter templates that I've made.

yehez-nextchakra-starter.yehezgun.com -> Next.js (Typescript) + Chakra UI starter template
yehez-vitechakra-starter.yehezgun.com -> React (using Typescript and Vite as builder) + Chakra UI starter template

You can read my previous article about the benefits of making your own starter template here.

Personal Link Shortener

When I wrote an article, sometimes I refer to some links as references. So I thought it will be great if I can have my own link shortener, so I don't need to use and repeatedly search for a link shortener. You can access and even use it at link.yehezgun.com.

Personal Live Markdown Editor

The reason I made this is because I need a live markdown previewer when I wrote documentation (Readme file) for a project that I have made. I made it using React Markdown Previewer to enable the live markdown preview. You can access the live demo at markdown.yehezgun.com.

Personal Docs Site

I've been exhausted from googling the same thing repeatedly. So I decided to make a site that contains the frequent things that I usually access or use to resolve "the redundancy" LOL. I made it using Shuding's Nextra. You can see mine at docs.yehezgun.com.

You can read my previous article about the reason why I made my own personal docs site here.

KAI Access App & A Freelance Project

As I told you before, I never worked on a freelance project with my friends. Unfortunately, it's a private project based on client requests. But I can explain a little about what we've made.

We made a warehousing system in the form of web and mobile apps. One of my friends created the mobile app, and I developed the web app, especially the CRUD process. So the employee just needs to scan the QR Code of the goods and the changes will be automatically done on the server. The other employee can also check and validate the data through the website.

The KAI Access App, actually it's an app developed by my senior and me when I was working in the previous company. My senior developed it from scratch using Ionic & Angular. I just developed the requested feature like the Taxi Order system and PPOB feature.

Hope For 2022

2021 is a tough year for me personally. You have read my experience about how I struggled to survive and finally can get the new job. Thank God I can survive this year, LOL.

I know there're a lot of things changed and delayed due to the Covid-19 pandemic since 2020. But there're some things that I want to achieve and learn more deeply in 2022.

Tailwind CSS

I know I'm still a newbie in React development. I even still struggled with CSS even I'm a frontend engineer, LOL. So I decided to learn Tailwind CSS as my preferred and go-to CSS utility tool. Why? Because after I read the docs, it can push me to understand the design and little CSS fundamentals while I learn and use it. It also allows me to make my own design system.

Clean Code

For about one year I work in the previous company, I got a bad legacy code. It was very exhausting when I have to improve some features. The code is like a mess, LOL. If I optimize my parts, it also means I have to optimize the following features. That's why I often code like a barbarian. I realized that I cannot do this anymore and had to change my behavior.

Work-Life Balance

This is actually the common dream. Every people want to achieve it, LOL. I wish can achieve it through my new job soon. Hopefully, I also get a healthy environment and work culture, especially supportive colleagues.

Yeah, that's all from me. That's my 2021 recap and hope for the next year. What's yours?

How To Get Hired Without Applying

Yehezkiel Gunawan — Wed, 22 Dec 2021 09:54:55 +0000

Disclaimer

This is just my experience when finding a new job as a front-end engineer. Maybe it seems opinionated, but at least it can be a reference for you. I will tell my story from a front-end engineer perspective.

Introduction

The story starts when I was graduated from college in 2020. That is the moment when the Covid-19 pandemic began. I have no idea what to do after graduating because I feel overwhelmed with what subject can be focused on.

It changes when a friend told me that there's a free scholarship course at Dicoding Indonesia. So I registered for that scholarship and got free access to the class. I found that I enjoy crafting something using HTML, CSS, and Javascript at that time.

Soon, I decided to learn some frontend frameworks like Angular, Vue, and React. I started to learn those frameworks by making a simple to-do list. Actually, among those frameworks, I mostly like React as my main framework, but suddenly I got an offer from a company that uses Angular in their codebase. I worked there for about 1 year and 3 months.

During my first journey as a full-time front-end engineer, I realized that the bigger the community of a framework or library, the bigger also the support system. I struggled enough when I have to do some troubleshooting using Angular and it takes more time than when I used React (in my personal project).

So, I started to re-learn React again after working for a year. Luckily, the company also considered migrating to React because some of the frontend engineers complained and told the same reason as I think before. We learned to React together at the office almost every day then.

I learn React by making some mini-projects and publishing them on Linkedin. Then, many jobs offers come to me through phone calls and email until I finally found the suitable one for me. Actually, most of the projects are not spectacular, I even made it just for myself at first.

I think similar things may work for you if currently, you're searching for a new job as a developer. Here are my tips based on my experiences.

Start with CRUD

Everything in the developing world is about to Create, Read, Update, and Delete (CRUD). When I re-learned React again after a long time, I started again with CRUD. I just follow the MDN React To-do list tutorial and re-code it in my VS Code. This seems very mainstream, but it helps me so much when I make a new project.

This trick also works when you're learning a new framework. You can only need to think about how to Create, Read, Update, and Delete the data using the framework you learn while you trying to understand the syntax too.

Build Your Online Presence

If you want to get recognized by the recruiter, you have to make yourself recognizable by building your online presence. As a developer, you can start by building your own site, developing & publishing your project on Linkedin and Github, and writing some articles or blogs.

Build Your Own Site

As a frontend engineer, you can start building it by making your own personal site using your framework or library preferences. For example, after I learned the basic CRUD, I push myself to build my own website using Next.js. You can access it at yehezgun.com.

You don't have to make a spectacular one, just be yourself. Your site is your playground, don't be too a perfectionist. I even still trial and error in modifying something at my current personal site.

You may be asked, Why do I need to make my own site?. Actually, there are no formal rules here, back to your preferences. For me, I can do some experiments on my own website because it's mine and I have full control of it.

Make Some Mini Projects

In my opinion, this is the most effective way to understand the technical concept and even get hired. If you're confused about what project you should make, you can start to make a project that can be used by yourself.

For example, I started to make my own Next.js starter template. You can check it at https://yehez-nextchakra-starter.yehezgun.com/. Why did I make it? The story began when I need to make a new project using Next.js, I wasted my time just doing some repetitive things like ESLint & husky config, base navbar, and base layout. So I decided to make my own starter template as a base template, so I can focus on the development process. You can read the details on my past article here.

Publish Your Project

The next step is show your work. I have to say, it's mandatory for a developer to have a Github (or Gitlab) account. GitHub is a great way to showcase your projects and show what other technologies you are interested in — by forking, starring, or contributing to them. It also gives other people an idea about the amount of work you have been putting in, by the number of contributions shown on your profile (Mircea Oprea, 2019).

The other way to publish your project is through Linkedin. You can use this platform to attract the recruiter when they see your published project and offer you the job. For example, I re-code my personal site and publish it as a Linkedin Post here. Just in several days, I got so many private chats on Linkedin which are job offers. And finally, I can get a new job because of this simple thing.

Share Your Idea or Story Through Article

Why does writing a blog matter? By writing a tech blog that contains some tutorial, story, or just an idea, you're helping other developers out there to generate new insight or even help them to solve their problems. In other words, you have contributed to the developer world when you write a technical blog.

You can start writing a blog by writing a process while making a project or making some simple tutorials. For example, I wrote an article about how to self-host the Notion API Worker, you can read it here. Without realizing it, I've helped some developers to self-host their own Notion API Worker when they want to use it.

For me, writing can sharpen my understanding of something, because you read twice or even several times when you write. You will surely read your own writings before publishing them and make sure the readers understand them.

Join The Developers Community or Event

This also gives a significant impact on my career as a front-end engineer. In early 2021, I joined a big event in Indonesia held by Google and the partner companies. Yes, you're right I joined Bangkit Academy as a volunteer.

Yeah I know, I got nervous and feel inferior because of too many pro developers who join as volunteers. The most challenging moment is when I have to co-assist my partner in a live teaching session. His coding and technical skill amazed me because he can explain all the technical processes fluently. But, I'm proud for joining this event because I can enlarge my networking with other developers and learn a lot of things from them.

Sometimes this thing can give you a new opportunity if they offer a new job in their working place.

Closing

Build and strengthen your online presence. Soon or later, the opportunity will reach you. Just be consistent and keep going!

I did all those tips since September 2021, and it works. Finally, after I struggled to find a new job opportunity, I found one. I even didn't apply it by myself. A recruiter reached me through my Linkedin and I follow the recruitment process. Indeed, I didn't need to do the live code session because I showed my previous work in the user interview session. So it can be called a live code review session because they just review my previous works.

Hope my story can inspire you, especially those who struggled to find a new job. Sorry if there's some grammar error here, I'm still an amateur at writing articles in English.