Amin Roslan

Defer vs EOF calls in Go

Thu, 20 Feb 2025 00:00:00 +0000

Key Differences:

Execution Order

func deferExample() {
    defer fmt.Println("1")
    defer fmt.Println("2")
    defer fmt.Println("3")
}
// Output: 3, 2, 1 (LIFO - Last In First Out)

func normalExample() {
    fmt.Println("1")
    fmt.Println("2")
    fmt.Println("3")
}
// Output: 1, 2, 3 (Sequential)

Error Handling

func withDefer() {
    f, err := os.Open("file.txt")
    if err != nil {
        return // file will never be closed
    }
    defer f.Close() // guaranteed to run even if error occurs later
    // ... work with file
}

func withoutDefer() {
    f, err := os.Open("file.txt")
    if err != nil {
        return // file will never be closed
    }
    // ... work with file
    f.Close() // might not be reached if panic or early return occurs
}

Early Returns

func withDefer(x int) {
    defer fmt.Println("cleanup")
    if x < 0 {
        return // cleanup still runs
    }
    // ... more code
}

func withoutDefer(x int) {
    if x < 0 {
        fmt.Println("cleanup")
        return // need to duplicate cleanup code
    }
    // ... more code
    fmt.Println("cleanup")
}

Key advantages of defer:

How SSR Works in React

Thu, 20 Feb 2025 00:00:00 +0000

Server-Side Rendering (SSR) is when React components are rendered to HTML on the server before being sent to the client. Here’s the flow:

Server Receives Request
- User requests a page
- Server runs React code

Server Renders React

React components are rendered to HTML strings
Initial state is serialized

// Example server code
const html = ReactDOMServer.renderToString(<App />)
const state = JSON.stringify(initialState)

Server Sends Response
- HTML is sent to browser
- Initial state is included in a script tag
- React client bundle is included
Client Hydration

I Need A Job AI

Thu, 20 Feb 2025 00:00:00 +0000

Javascript Asynchronous Precendence.

Thu, 20 Feb 2025 00:00:00 +0000

What would the output of the following function be?

function main() {
  setTimeout(() => console.log(3), 0)

  new Promise((resolve) => resolve(2)).then((val) => console.log(val))

  console.log(1)
}

console.log(1) runs first, Promise goes second and lastly setTimeout. This is because JavaScript has different types of queues for handling asynchronous operations:

Call Stack: Executes synchronous code immediately (console.log(1))
Microtask Queue: Handles Promises and process.nextTick(), has higher priority
Macrotask Queue: Handles setTimeout, setInterval, and I/O operations

Even though both setTimeout and Promise are asynchronous operations, Promises are processed in the microtask queue which is processed immediately after the call stack is empty, while setTimeout callbacks go into the macrotask queue which is processed later.

ReserveKit

Wed, 05 Feb 2025 00:00:00 +0000

ReserveKit Devblog - #1 Building the Foundation

Wed, 05 Feb 2025 00:00:00 +0000

Hello readers,

I recently launched ReserveKit, a ready-to-use booking API and backend that integrates seamlessly into any project. While our Product Hunt launch on February 3rd, 2025, didn’t generate massive traffic, we did gain some valuable early signups. This post dives into the initial development process, sharing the challenges and solutions encountered while building ReserveKit’s foundation.

The Idea: Solving a Common Problem

The popularity of padel and pickleball has exploded in Malaysia, creating a surge in demand for sports centers. A common thread among these centers is the need for a robust booking system. This need resonated with me, as I’d considered building such a system for a friend’s sports center five years prior. Although that project didn’t materialize, the idea remained.

Encode Google Service Account to Base64

Wed, 08 Jan 2025 00:00:00 +0000

Example Google service account JSON:

{
  "type": "service_account",
  "project_id": "test_project",
  "private_key_id": "abc123",
  "private_key": "-----BEGIN PRIVATE KEY-----\nblahblah\n-----END PRIVATE KEY-----\n",
  "client_email": "api@test_project.iam.gserviceaccount.com",
  "client_id": "107309273795607181234",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/api%40test_project.iam.gserviceaccount.com",
  "universe_domain": "googleapis.com"
}

Encode the file to base64. Base64 Encoder

Place the base64 string as an environment variable

GSA_BASE64="ewogICJ0eXBlIjogInNlcnZpY2VfYWNjb3VudCIsCiAgInByb2plY3RfaWQiOiAidGVzdF9wcm9qZWN0IiwKICAicHJpdmF0ZV9rZXlfaWQiOiAiYWJjMTIzIiwKICAicHJpdmF0ZV9rZXkiOiAiLS0tLS1CRUdJTiBQUklWQVRFIEtFWS0tLS0tXG5ibGFoYmxhaFxuLS0tLS1FTkQgUFJJVkFURSBLRVktLS0tLVxuIiwKICAiY2xpZW50X2VtYWlsIjogImFwaUB0ZXN0X3Byb2plY3QuaWFtLmdzZXJ2aWNlYWNjb3VudC5jb20iLAogICJjbGllbnRfaWQiOiAiMTA3MzA5MjczNzk1NjA3MTgxMjM0IiwKICAiYXV0aF91cmkiOiAiaHR0cHM6Ly9hY2NvdW50cy5nb29nbGUuY29tL28vb2F1dGgyL2F1dGgiLAogICJ0b2tlbl91cmkiOiAiaHR0cHM6Ly9vYXV0aDIuZ29vZ2xlYXBpcy5jb20vdG9rZW4iLAogICJhdXRoX3Byb3ZpZGVyX3g1MDlfY2VydF91cmwiOiAiaHR0cHM6Ly93d3cuZ29vZ2xlYXBpcy5jb20vb2F1dGgyL3YxL2NlcnRzIiwKICAiY2xpZW50X3g1MDlfY2VydF91cmwiOiAiaHR0cHM6Ly93d3cuZ29vZ2xlYXBpcy5jb20vcm9ib3QvdjEvbWV0YWRhdGEveDUwOS9hcGklNDB0ZXN0X3Byb2plY3QuaWFtLmdzZXJ2aWNlYWNjb3VudC5jb20iLAogICJ1bml2ZXJzZV9kb21haW4iOiAiZ29vZ2xlYXBpcy5jb20iCn0="

Decode and parse the JSON when asked for credential

const credentials = JSON.parse(
  Buffer.from(process.env.GSA_BASE64, "base64").toString("utf-8")
)

// Google Sheets API setup
const auth = new google.auth.GoogleAuth({
  credentials,
  scopes: ["https://www.googleapis.com/auth/spreadsheets"]
})

DSA Visualizer

Tue, 31 Dec 2024 00:00:00 +0000

useMemo & useCallback skips re-render

Sat, 07 Dec 2024 00:00:00 +0000

The useMemo and useCallback hooks in React help optimize performance by preventing unnecessary re-renders. useMemo memoizes the result of a computation, ensuring the value is only recalculated when its dependencies change. useCallback memoizes a function reference, preventing child components from re-rendering when the function is passed as a prop unless its dependencies change. Together, they help minimize redundant rendering, especially in components with heavy computations or deep prop trees.

Creating Persistent Modals in Next.js with Parallel Routes and Route Interception

Thu, 14 Nov 2024 00:00:00 +0000

In Next.js, creating modals with parallel routes is a well-documented approach, but there’s one thing missing from the official docs: how to make the modal persist across page reloads. I faced this challenge recently when I was tasked with rebuilding our settings page as a modal, and I wanted to share the approach I took.

Initial Considerations

When rebuilding the settings as a modal, there were a couple of options:

What happens when rebasing.

Tue, 22 Oct 2024 00:00:00 +0000

When rebasing MyBranch onto master, “incoming” refers to MyBranch (the branch being replayed), and “current” is master. Rebase resets MyBranch to master, replays its commits, and temporarily considers master as “current.” After rebasing, MyBranch becomes “current” again. This differs from merging, where “incoming” is the branch being merged, and “current” remains your branch.

ImagineKraft

Sat, 20 Jul 2024 00:00:00 +0000

Import Scanner 🕵️‍♀️

Sat, 26 Aug 2023 00:00:00 +0000

How I reduced a search function query’s execution time by 85%

Thu, 24 Aug 2023 00:00:00 +0000

Let’s make something clear, I am not a database expert. Though I work with different databases in the past, I would most likely use an ORM but I would never see myself doing SQL queries, until recently.

So I have been doing alot of SQL queries lately for my Postgres DB on Supabase. If you have read my previous blogpost, you know that I use Supabase as the backend for Cafeist. Supabase’s Javascript API client is really helpful. It makes it easy to make queries to the API. However, once I started to become more ambitious with the features that I implemented, I realised there were limitations with the existing Javascript client. With that said, I decided to go raw.

Building a Web App for Cafes

Sat, 12 Aug 2023 00:00:00 +0000

This article was enhanced by ChatGPT so pardon the bombastic sentences.

A Brief Backstory of My Café Adventures

Coffee has always been a source of delight for me. Its aromatic allure and the satisfaction of finding the perfect cup with a delightful taste have always enchanted me.

Earlier this year, my beloved café, which I frequented often, temporarily closed its doors for renovations. This event prompted my partner and me to embark on a café-hunting expedition within our locality.

Cafeist

Thu, 20 Jul 2023 00:00:00 +0000

5 Tools I Use as a Remote Software Engineer

Thu, 13 Jul 2023 00:00:00 +0000

Time is a bitch. It doesn’t wait for you, it doesn’t care if you are slacking, and it only seems to help when you are heartbroken — as the saying goes, “only time can mend a broken heart.” That said, if you are able to control your time, you are able to control everything in your life.

As a software engineer who works remotely, I appreciate the flexibility that comes with the job.

Qwerqy/UI

Sat, 08 Jul 2023 00:00:00 +0000

Supercharging My Coding Routine with Github Copilot and ChatGPT

Thu, 29 Jun 2023 00:00:00 +0000

Over in Superside Design System’s team, I am responsible to improve our Storybook documentation and update components to keep up with our design updates.

Our client-side applications recently been revamped to a new theme, namely Design System 2.0 and there has been alot of work need to be done and bugs that need fixing.

A few months ago I have been experimenting with AI, mostly trying to use it as a tool. I watched videos on Youtube, read engineering blog posts and checking out tweets by developers.

Streamlining Version Control for Efficient Collaboration

Thu, 22 Jun 2023 00:00:00 +0000

As a Frontend Engineer at Superside, we have about 60+ members worldwide working on the codebase day-to-day, around the clock. In a fast-paced environment, version control is the backbone of my workflow.

Over the past year, I have come to rely on several key Git commands that have greatly improved my efficiency and collaboration with teammates. In this blog post, I will share my most used Git commands and explain how they have enhanced my development process.

YNAB Recap Report Tool

Sat, 17 Jun 2023 00:00:00 +0000

A tool to generate recap reports based on YNAB transactions csv. The following reports will be generated:

All transactions table
Total outflow per categories
Total outflow per flags

This tool will work perfectly when you set a flag for each of your spending transactions. This tool does not process inflow, only outflow (expenses, spending, etc)

Personally I have been using YNAB since 2018. I have always find zero-based budgeting to be awesome and fits my budgeting style. However, I still need a way to

Exploring Polymorphic Components in React with TypeScript

Thu, 15 Jun 2023 00:00:00 +0000

Polymorphic components are a powerful concept within React that enables adaptability and flexibility. In this blog post, we’ll explore polymorphic components and demonstrate their usage with TypeScript.

Understanding Polymorphic Components

Polymorphism refers to the ability of an object to take on different forms or behaviors based on the context. Think of it as Ditto from Pokemon.

In the context of React:

Polymorphic components in React allow for the creation of versatile UI elements that can adapt their rendering and behavior based on the context.
By leveraging polymorphic components, developers can build reusable and adaptable components that suit different use cases.
TypeScript’s type system enhances the correctness and maintainability of polymorphic components, providing strong typing and error detection.

If you are in a scenario of building a components library, having a few components that adapts polymorphism helps

Blueprint for Building Layouts with Grid System

Thu, 08 Jun 2023 00:00:00 +0000

In the world of UI design and development, creating responsive layouts that adapt seamlessly to various screen sizes is crucial. One effective tool for achieving this is a grid system. In this blog post, we will explore the importance of grid systems, discuss the perspectives of engineers and designers regarding grids, and demonstrate the process of building a React component for a page’s layout using a grid system.

Grid System

A grid system in the digital world is akin to a print layout in organizing elements on a page. It serves as a guide for designers, enabling them to create multiple layouts that support responsive themes for different screen sizes. By establishing a consistent grid structure, designers can align and position elements more efficiently, ensuring a visually appealing and harmonious user interface.

Full-blown Frontend Engineer!

Thu, 01 Jun 2023 00:00:00 +0000

Transitioning to a full-time front-end engineering role can be an exciting and transformative experience. The possibilities for growth and exploration are endless. At the start of 2023, I was assigned to the Design Systems team at Superside, a renowned design and development company. In this blog post, I will share my insights into why choosing one side of the branch can be great, the inner workings of being in a foundational team, and the contrasting working style compared to product-focused teams, and the challenges and inspirations encountered along the way.

Flawer Co

Thu, 11 Feb 2021 00:00:00 +0000

Raffle System

Mon, 11 Jan 2021 00:00:00 +0000

Kountr

Wed, 06 Jan 2021 00:00:00 +0000

Whether it is a game with your circle of friends, or a company monthly presentation, you can use Kountr to keep count!

Kountr is a counter app that is made easy to use for everyone. Even if you are as young as a baby, or old as a cassette, you can use it!

In Kountr, you can start as either a Host, or a Participant. As a Host, you set the name of the counter, and then you can start. As simple as that! You can start inviting your friends to join the session by passing them the shareable link that is available on the dashboard once you start the counter. You have the option to reset the counter, or if you want to kill the mood, end it.As a Participant, you will need a session link from a Host, once you have it, you can go into the session. As. Simple. As. THAT!!

Porter's Pantry

Fri, 11 Sep 2020 00:00:00 +0000

Discord OpenID Connect Wrapper for Cognito

Fri, 25 Oct 2019 00:00:00 +0000

Porting my Discord bot project into AWS Ecosystem

Thu, 17 Oct 2019 00:00:00 +0000

Why You Should Learn To Code?

Thu, 19 Sep 2019 00:00:00 +0000

Server to server communication using Socket.io for Battlev

Fri, 19 Apr 2019 00:00:00 +0000

Progress Update: Project Battlev is progressing just nicely. Already decided on what type of design I want for the interface, the color scheme. I’ve also converted my API server to Typescript for type checking. In this post I will try my best to share how I implemented my idea on how to make my API server and my Discord client server to communicate with each other using Sockets.

Back to back communication.

So to bring you guys up to speed, I’ve set up the dashboard, and have placed in the ability to change my Clientbot’s nickname in one of my guilds in Discord. I do this by doing a PUT request to my API server and within the endpoint, it will update the document based on the body of the request. All good and dandy, sounds like it’s done. But not quite…

Authenticating Battlev with Discord OAuth2.0 [Part 2]

Thu, 04 Apr 2019 00:00:00 +0000

Hello my fellow readers! I am back with exciting news!

I managed to get the OAuth 2.0 thing working to log in into the dashboard of my project Battlev. It was hard at first to be honest. It was actually the first time I’m implementing authentication on a Nodejs-based server.

Thanks to the help of Passport.js, I don’t have to go through the whole process of creating sessions on the server and client. With that being said, do note that the client-side and the server are both running in separate ports. Had trouble with CORS but I solved it. In this post, I will try my best to explain the steps I took to implement this authentication feature.

Refining the Battlev Project

Sun, 24 Mar 2019 00:00:00 +0000

Hello again, in this short blog post I will be sharing about my thoughts on one of my side projects, Battlev.

(If you guys don’t know what Battlev is, check out this post here.)

For the past 1 month, I’ve setup a semi-production build of Battlev on Heroku alongside it’s landing page. There are two components, the page and the bot itself. For the bot, I’ve placed it in 4 servers where all of them are my friends’. The bot is mostly used for it’s ability to play music in voice channels, and having light chats via the Cleverbot API integration. However, it only lasted until last week as my free dyno for this month has depleted. So I’m taking this project a bit further.

Are you a builder or a developer?

Sat, 02 Mar 2019 00:00:00 +0000

While I was driving in my neighbourhood, a thought came across my mind. It’s one of those philosophical thoughts you get every once a day. This one speaks

You are either a builder or a developer. Which one are you?

I didn’t answer. I let the thought float around my mind. Making sure it doesn’t drift apart, I try very hard to think about it until it seeps in.

So, today I get the chance to actually talk about this in the blog. What’s the difference? Builder or Developer? Build or Develop? On the surface, they both mean the same. Well, not really.

Implementing Server Side Rendering logic to a CRA production app

Wed, 27 Feb 2019 00:00:00 +0000

Implementing SSR to a production React (CRA) product (Part 2: Middleware & State Management)

Wed, 20 Feb 2019 00:00:00 +0000

This page's structure has been updated on June 2023

Hello guys, welcome back! This is part 2 of the guide series on how to implement SSR to your ongoing production React product.

Recap

So in part 1 of the guide series, I showed you how I prepared the bootstrap file that will be the entry script to run our project, and by using react-app-rewired how we can override the current CRA configs to enable some Webpack configs to work with SSR.

How to create a Discord bot in Node.js that fetches images from Imgur

Sat, 16 Feb 2019 00:00:00 +0000

This page's structure has been updated on June 2023

It’s the weekend now and I just got back from a Chinese New Year party. I always thought of building my own Discord bot and have it in my Discord channel where it’s convenient for us to request anything from it. I know there are alot more better Discord bots out there, however I just felt having a bot that is built personally by me. It’s like having my own child!

Implementing SSR to a production React (CRA) product (Part 1: Setting up Babel Register & Override CRA script)

Mon, 04 Feb 2019 00:00:00 +0000

This page's structure has been updated on June 2023

There I was, trying to find out what the heck is SSR on google. I get server-side rendering, that’s basically what backend frameworks like Laravel and Rails do, but what do you mean with React? Isn’t React already good enough?

Turns out I was wrong. So I started studying and researching about it. Guides after guides. Finally, I got a bit of a grasp on what it is.