Forem: Garrick Ng

5 Tips for Writing Clean and Maintainable Code

Garrick Ng — Sun, 07 May 2023 08:44:27 +0000

As developers, writing clean and maintainable code is essential to ensuring the long-term success of our projects. Code that is well-structured, easy to read, and easy to modify can save us hours of frustration and make it easier to collaborate with other developers. In this article, we'll cover five tips for writing clean and maintainable code.

Write code that is easy to read

One of the most important aspects of writing clean code is making it easy to read. This means using descriptive variable names, writing comments where necessary, and avoiding unnecessary complexity. When you write code that is easy to read, you'll spend less time trying to decipher what it does, and more time making meaningful changes.

Follow a consistent style

Consistency is key when it comes to writing clean and maintainable code. Choose a style guide or coding standard and stick to it. This includes things like indentation, variable naming conventions, and the use of white space. When all developers on a team follow the same style guide, it's easier to understand and modify each other's code.

Use functions and classes effectively

Functions and classes can help make your code more modular and easier to understand. Use functions to break down complex logic into smaller, more manageable pieces. Use classes to encapsulate related functionality and data. When you write functions and classes that are focused and easy to understand, your code will be more maintainable and easier to test.

Write unit tests

Unit tests are an essential part of writing clean and maintainable code. They allow you to catch bugs early, ensure that your code works as intended, and provide a safety net for future changes. When you write unit tests, you'll have more confidence in your code, and you'll be able to make changes with less fear of breaking things.

Refactor frequently

Refactoring is the process of improving the design of existing code without changing its external behavior. When you refactor code, you improve its structure, readability, and maintainability. Refactoring can be time-consuming, but it's an investment that pays off in the long run. When you refactor code frequently, you'll be able to make changes more quickly and with less risk of introducing bugs.

In conclusion, writing clean and maintainable code is a critical skill for developers. By following these five tips - writing code that is easy to read, following a consistent style, using functions and classes effectively, writing unit tests, and refactoring frequently - you'll be well on your way to writing code that is easy to maintain and modify over time.

Follow Me On
Website - https://garrick.monster/
Linkedin - https://www.linkedin.com/in/garrickng724/
Github - https://github.com/GarrickBee

How to Deploy React Application On GitLab Page With Router For Free

Garrick Ng — Sun, 04 Dec 2022 06:00:00 +0000

Checkout this site — Garrick.monster. It is completely free to deploy and navigation ready. Want to know how it is done? Here is how.

1. Setting Up GitLab

I assume you are familiar with setting up a GitLab account and creating a GitLab repo, but if you don’t here is the link

Make sure you have your gitlab repo ready, if you are shy to share your code to the public, you may choose to private your repo.

2. Init React Project

Run this command, I am using typescript here, why not.

yarn create react-app my-app --template typescript

If you have your repo create ready, you may run this to create react in your current repo

yarn create react-app . --template typescript

Change the display text to your desire text and commit it.

3. Create GitLab Pipeline

Building The React Page

To build the react pages, we need to ask GitLab to pull the latest or desired NodeJS image and compile the react project into a single page application which can be run by GitLab pages.

Create a yaml file name .gitlab-ci.yml in your project root directory.

The first stage that we need to ask GitLab CI to do is build stage where GitLab will compile the application and store it at build folder.

Setting Up The Page According to Gitlab Requirement

The second stage that we need to ask GitLab CI to do is move all the build folder files to public as GitLab will take public path folder as the root directory to serve to the outside world.

- mv build public # Move whole build folder to public
- cp public/index.html public/404.html # copy index.html to 404.html so that if there is a page not found error, we can still display our desire custom 404 page.

The default domain rules for GitLab pages is listed here — GitLab Pages Default Domain

In this case, GitLab pages will be using this format

http(s)://groupname.example.io/projectname
https://garrick-open-source.gitlab.io/gitlab-pages-with-react-router/

At package.json, you will need to add homepage:gitlab-pages-with-react-router as this path will serve as the react root directory for the react application — https://garrick-open-source.gitlab.io/gitlab-pages-with-react-router/

{
"name": "gitlab-pages-with-react-router",
"homepage": "gitlab-pages-with-react-router",
}

In order for the assets to work perfectly, PUBLIC_URL has to be set to the GitLab page url which is https://garrick-open-source.gitlab.io/gitlab-pages-with-react-router so that your public assets can point correctly.

Final Yaml File

After committing your .gitlab-ci.yml file to the repo, GitLab will start to run the pipeline accordingly to build and release your application.

After all stages is passed and completed, you should be able to browse your website at https://garrick-open-source.gitlab.io/gitlab-pages-with-react-router

Tips: Sometimes you might be facing some issue where the page has been
rebuild but there is no changes in the website, press CRTL+F5 to clear
the cached.

4. Setting Up Custom Domain

To setup custom domain what you need to do is make sure you have a custom domain or subdomain and DNS point is point to GitLab. Gitlab Custom Domain

Go to gitlab Setting -> Pages -> New Domain , follow the instruction and update your DNS record. After setting up the DNS record, click verify to verify if the domain has been attached to the pages successfully.

Then we need to have some tweaks at our GitLab CI

Remove the homepage value in package.json as now we are pointing to the root domain.
Change the PUBLIC_URL path to your domain, in this case https://gitlab-react-page.garrick.monster

When GitLab CI finished buidling your repo, your page should be accessible by the custom domain. Take note that the old GitLab Default pages url will not be able to access anymore due to the change of PUBLIC_URL setting and homepage value.

5. Adding Router

We are going to use react-router-dom as our router module.

Take note that GitLab Pages is not a server, it only serve static html file. Hence you cant expect the routing work exactly like a traditional server.

When you are trying to access https://gitlab-react-page.garrick.monster/hello-world , GitLab pages will serve you https://gitlab-react-page.garrick.monster/hello-world/index.html instead which cause error 404 and you will stuck in a loop thinking what goes wrong.

To avoid this issue , instead of using BrowserRouter, we are going to use HashRouter instead. By adding a #/ between the domain and the path, we are not going to trigger the browser to reload the page which brings to error 404.

And there you go. This is how you setup a GitLab Pages with router for free — https://gitlab-react-page.garrick.monster/hello-world

Here is the full repo:
https://gitlab.com/garrick-open-source/gitlab-pages-with-react-router

Feel free to drop me a message if you have any questions or feedback.

Follow me on:

Website - https://garrick.monster/
Linkedin - https://www.linkedin.com/in/garrickng724/
Github - https://github.com/GarrickBee

How to Automate Bank Statement to Personal Accounting Software (Wave) - Part 1

Garrick Ng — Wed, 23 Nov 2022 16:33:47 +0000

Recently with the rise of digital wallet, transactions your-text-here are really hard to track as we use different accounts for different transaction purposes. Personally I have several bank savings accounts, credit cards and a couple of e-wallet services but all of them aren't connected.

Problem Statements

Most of the Malaysian bank or e-wallet doesnt support public API service.
Service doesn't come with recurring monthly statement eg. email
Service provide recurring monthly statement but with different format or delivery methods
Records of transaction only available for 90 days

Hence, I came across wave accounting software which provides free personal accounting management with GraphQl Api support. Hence, the idea is straightforward: whenever the bank sends you an email statement, we are going to build an event trigger script to help us update all the statements to wave through the provided api.

Design and Plan

The whole idea of this project will be create a event listener that will trigger a bot to process the file when:

We receive an email from the bank to the bot email
We send it manually to the bot email

But we will cover only the worker to wave accounting part in this post only.

1. Create a Wave Account and a API Token

Go to website Wave official website and register an account. After registring an account, go to the dashboard and familiarize the tools, accounting terms which I am not going to discuss much here. If you are a business owner, is a great tool for you to record down your statement by creating a business account, but for personal use , a personal account will be sufficient.

Then go to Wave Developer to create an application

Insert your desire application name and description (optional)

Click agree and create.

Once redirected back to the application page. click the application name that you just created.

Click the create token and you should be able to generate a token, save the token somewhere secretly and we will use it during our API integration.

2. Create Your API Module

Wave is using graphql and kindly go through Wave API Documentation for more info. You may test your api using postman.

Test Your API

Eg
POST https://gql.waveapps.com/graphql/public

Set your header with Authorization = Bearer YOUR_AUTH_TOKEN

query {
  businesses {
    edges {
      node {
        id
        name
      }
    }
  }
}

And you should be getting a response like below

{
  "data": {
    "businesses": {
      "edges": [
        {
          "node": {
            "id": "XXXXXXXXXXXX",
            "name": "YOUR ACCOUNT NAME"
          }
        }
      ]
    }
  }
}

Making a call to Wave API

Here are a simple script that I wrote to communicate with the wave module using axios

Creating Transaction function

Next is create a function to read from your desire file such as PDF, excel, csv. I will discuss further for statement reader in the next post to guide you through how to read the pdf statement.

Extract info from your bank statement

// Get pdf file
const  mbbPdfBuffer  =  fs.readFileSync("data/april-jun-2022.pdf");

// Get transaction list
const  mbbTransactionList  = await MBBPdfModule.convertMbbPdfBufferToTransactionList(mbbPdfBuffer);

Pass Information To Wave Module

const transactionPromises = [];
// Loop transaction list
for (let i = 0; i < mbbTransactionList.length; i++) {
  const transaction = mbbTransactionList[i];
  // * Create Transaction
  transactionPromises.push(
    createTransaction({
      externalId: transaction.externalRefId,
      date: transaction.date,
      description: transaction.description,
      anchor: {
        accountId: WAVE_ACCOUNT_ID.MAYBANK_SAVING,
        amount: transaction.amount,
        direction:
          transaction.transactionDirection == TRANSACTION_DIRECTION.INCOME
            ? WAVE_TRANSACTION_DIRECTION.DEPOSIT
            : WAVE_TRANSACTION_DIRECTION.WITHDRAWAL,
      },
      lineItems: [
        {
          accountId: transaction.target.id,
          amount: transaction.amount,
          balance: WAVE_BALANCE_TYPE.INCREASE,
        },
      ],
    })
      .then((result) => {
        return { transactionId: transaction.externalRefId, ...result };
      })
      .catch((err) => {
        throw {
          transactionId: transaction.externalRefId,
          error: err.message,
        };
      })
  );
}

Post the result

await Promise.allSettled(transactionPromises).then((results) => {
  for (const result of results) {
    if (result.status == "rejected") {
      report.errors.push(result.reason);
      continue;
    }

    report.success++;
  }
});

Final Outcome

The transaction is well grouped by your own custom category with the date and time of the transaction.

What comes after is the juicy report graph which helps you under stand your transaction better.

Conclusion

We have cover how we can use wave to act as the data storage for all of your transaction but it this blog post doesnt show you how to read the data from your pdf, the details of the module etc.

Things to cover in the upcoming post:

Statement Reader code walk through
Automate Bot base on event
Deploy application to AWS

Follow me on:
Website - https://garrick.monster/
Linkedin - https://www.linkedin.com/in/garrickng724/
Github - https://github.com/GarrickBee

Top 5 Mindset to Become a Self -Taught Freelance Web Developer ( As a Mechanical Engineer Graduate)

Garrick Ng — Sun, 20 Nov 2022 15:30:24 +0000

As Mechanical Engineer graduate from University of Malaya, I always find my self have deep interest on projects, classes , works or things that are related to programming. Switching career after graduating is more so like a change of wife or your life partner — catastrophic and stress. I am a complete self-taught programmer (No Coding Boot Camp or etc. but purely Stack Overflow and YouTube videos).

Know Your Goal And Stay On Course

Before starting out this journey, you have to ask yourself why you want to choose this journey as your future career? This will determine how you achieve the goal and what characteristic of programmer you will become.

Professional career for 2 years and I am still learning. What determine a best programmer? For me , not by how good is he in solving LeetCode problems but giving output consistently such as contribute in open source project development, create a repo that have at least 1k of likes on GitHub , able to share his knowledge to the community, able to solve daily problems using your skills, able help others grow, answer Stack Overflow questions , be humble etc.

If you don't set your course right, your gas soon will be drained out fast as this journey isn't easy at all. Roller coaster your life will become — sometimes up, sometimes down. What keep the coaster moving is your passion or else thats the end of the journey.

Avoid Yourself From Stuck In A Tutorial Loop Hole

Pick any language ( But not Html CSS as it don't teach you much on the fundamentals) to start with and go through some tutorials — I recommend freecodingbootcamp.

The things you should always avoid — Stuck in a Tutorial Loop Hole. After watching a series of tutorial and you feel like not learning anything which cause you to watch another tutorial again and again. Sometime event start to buy courses from Udemy , switch language without reason and change to another tutorial video. This month works on React , next month works on Angular. Tutorial loop hole it is.

Try to find video that teach you how to build a projects rather than teaching you how to play with all the functions , data structure etc. For example, you can search for how to build WhatsApp using python which will bring more interest, goal and fun in your starting journey. After finishing the projects, start build another projects without watching the tutorial video but browsing through stack Overflow whenever you have any questions. You will soon know how to tackle problems and learn deeply about what that language can do. When you are confidence enough, switching language is much more easier sometimes you don't even have to go through tutorial series again as the concept is the same.

Be Confidence , Brave and Bumble

I came across with a Medium size company. I have an interview with a group of young engineers and soon they find out I am a self thought engineer , they try to criticize me on my fundamental of CS knowledge in a not so humble way but no questions on my practical projects. What is the point for a tons of theory or passing your exam 100% but couldn't even setup a server , or complete a full stack projects that works?

Soon, I met a Ex google engineer that’s so humble in giving guidance and sharing his knowledge in a good way. Will share more if there is any chances.

Striking Your Goal

If you get up in the morning and think the future is going to be better, it is a bright day. Otherwise, it’s not. — Elon Musk

So do your future. Sometimes goal is what keep you going to improve your self for your better future or dream, soon the world’s future little by little.

Start Doing It Now

I believe most of the readers that came across this article are similar as me from few years back that curious about how the pros become a software engineer through self-taught process. Start working on it is the only way to become the pros. Like right now.

So coder , prepare your keyboard and start coding. Have fun with your Hello World program.

Follow me on:
Website - https://garrick.monster/
Linkedin - https://www.linkedin.com/in/garrickng724/
Github - https://github.com/GarrickBee

How To Start A Technical Blog In 10 Minutes

Garrick Ng — Sun, 20 Nov 2022 14:46:58 +0000

1. Stop Thinking and Start writing

Many people stuck in starting a blog post is mostly due to thinking to start a blog post. We tends to plan the journey of writing the blog post but in fact a journey is created by walking through not planning. Yes, you might said hey, a project has to be well planned before executing it right?

Indeed, but how to define a well plan project? Is it guarantee that there will be no risk or troubles happened in between a well-planned project? No, so why we bothered? Writing blog is no a big project and is easier than you think . Take your initiative , open up your note book and start writing anything that is in your mind. That’s your first blog post. If I am telling you this is my first blog post, will you believe it? Actually I don’t care and you might not care as well. The worse is that you skip the entire blog or even shut down your computer. No big deal. Every experts start with a poor writing skills. First baby step is the important key.

2. Commit to one type of blog

Find a good topic and commit to it. The most simplest way to start a blog topic is writing what you know or learn. Never start to research for topic to write for your very first blog post as this will stop you from writing it. Spending days in researching your topics only will lead to procrastinating and in the end, no progress is actually done. Research along the way, learn a long the way.

3. Be Confidence

Confidence does not mean you have to be the Expert. An expert is created not by years of experience but the confidence in sharing his knowledge. Be confidence in sharing your knowledge or even your learning journey.

There are no experts saying “ Well, I am the professional, lets stop learning today and flex among others.”. The day you stop learning from others is the time where you lose the title as experts. Documents your learning journey and after years of doing it, you will be able to compare the results, mistakes and journey along this blogging experience. You will be able to influence others with your own way.

4. Structure your blog post

It will be painful to let your reader to read in non structural way. Structure you blog with beginning, middle, and end which will ease your reader in consuming your idea.

Introduction

Start with a little bit of context to help others understand where your post fits into the big picture. Give a summary on what reader will get from your blog content.

Middle

Feed what ever information that you have promised to your reader. Use headings, numbered lists and structure formatting to help people understand where they are and enable them to skip around to the content they are most interested in.

Conclusion

If your reader made till this section, congratulations your reader really care about the content of this blog post. Give a round up of what you written in this blog , let them refresh on what they have learned though out this blog post in a quick way.

5. Get feedback and collect leads

You wont know what people are going to get from your writing until they read it. Ask for feedback so that you can know the pros and cons of your blog post. How they feel, what should be improve. Turn your cons to pros and keep your pros in a consistent way. Quality is important but consistency is the king of everything. Consistence in generating good content that the reader needs, the tittle of experts blogger is not far away from you.

Collect reader emails or ask for a click of share or like from your reader will be nice. I will talk more on collecting leads in the next articles.

Lets give it a wrap on what I have discussed today. Stop thinking on what you should write for your first blog post, write something that you have learn or know currently and commit to it. Be confidence on your writing and never afraid of criticism. Structure your blog post nicely. Get feedback and collect leads from you readers.

This marked as my first post for my technical blog post journey. I am Garrick Ng a self learn software engineer base in Malaysia who start of with PHP programming language. Looking forward to learn more stacks able to join Google in future or working with Elon Musk, I am a big fan of him.

Thanks for reading this post and have a nice day.

Follow me on:
Website - https://garrick.monster/
Linkedin - https://www.linkedin.com/in/garrickng724/
Github - https://github.com/GarrickBee