Kuan Jia Hong

Blog

  • April Fools

    April Fools

    I thought I was being funny,

    Then, I thought I was being annoying,

    But come April, I realized the truth —

    I was the fool all along,

    For caring too much what other people think.

    For a person who abandons what they love,

    Is the greatest fool indeed.

    And for us who can’t do what we love,

    Oh, what a foolish world we live in.

  • Malaysian Passport Renewal in Hong Kong

    Malaysian Passport Renewal in Hong Kong

    Renewing your Malaysian passport in Hong Kong? As someone who recently went through the process (12 July 2024), I noticed some gaps in online resources. While the official website covers the basics, here’s a practical guide answering niche questions.

    Table of Contents

    1. Key takeaways (TL;DR)
    2. Your questions answered:
      1. Q1. Can I get my passport the same day?
      2. Q2: How long will the submission process take?
      3. Q3: Is there photocopying service at the consulate?
      4. Q4. What documents do I need?.
      5. Q5. Will they take my passport photo there?
      6. Q6. Do they accept Octopus / Credit Card?

    Key takeaways (TL;DR)

    • Same-day collections possible (submit before 2PM)
    • 1-hour process. Come early—9 AM = no queue!
    • Photocopying cost HKD10/page – prepare documents ahead!
    • Passport photos taken on-site – dress modestly, no fringe covering forehead, and no white-coloured clothings
    • CASH ONLY

    Your questions answered:

    Q1. Can I get my passport the same day?

    Yes, but timing matters!

    • My experience: Submitted at 9 AM -> collected by 2 PM
    • Pro tip: Arrive before 2 PM for same day processing. Later submissions = next-day pickup.

    Q2: How long will the submission process take?

    Plan for 1 hour (but here’s what to expect):

    • Application review: ~15-20 minutes (staff verify documents).
    • Photo taken: ~5 minutes
    • Payment processing: ~10 minutes (cash only!).
    • Buffer time: Delays can happen if crowded—avoid lunch hours
    • Pro tip: Arrive right at opening (9 AM) to skip queues!

    Q3: Is there photocopying service at the consulate?

    Technically yes, but avoid it!

    • Official stance: No printing service advertised.
    • Reality: Staff may photocopy forgotten documents for HKD10/page

    If you are looking for printing shop near the consulate, one Malaysian recommend this printing shop which open before 11am:

    https://maps.app.goo.gl/SoK7cfNtPMJKt1cW9?g_st=ipc

    The cost is HKD6

    Q4. What documents do I need?.

    Always check the official website for updates, but typically:

    • Malaysia Passport (original)
    • One photocopy of passport front page
    • Hong Kong ID (original)
    • One photocopy of Hong Kong ID (both sides)
    • MyKad (original)
    • One photocopy of MyKad (both sides)
    • One hardcopy of valid work permits (e.g., IANG visa) OR student visa
      • If the permits / visa are in digital format, you will have to print it out.
    • Photocopy of valid work permits (e.g., IANG visa) OR student visa

    Q5. Will they take my passport photo there?

    Yes! But follow these rules:

    • Dress modestly (e.g., no sleeveless tops)
    • Hair: No fringe covering forehead; ears visible
    • No white-coloured clothings

    Q6. Do they accept Octopus / Credit Card?

    As per the official website, CASH ONLY

    Found this guide useful? Share it with fellow Malaysians in Hong Kong!

    Have a question not covered? Ask in the comments below

    Further resources:

  • Next.js with strict CSP cause MUI Skeleton to not render

    Solution: https://github.com/mui/material-ui/issues/45682

  • Next.js (App Router) with MUI v6.4.6

    I was working on a project that uses Next.js (App Router v15.2.0) and MUI (v6.4.6).

    It took me quite a while to understand how to integrate MUI and Next.js. For example, I was unfamiliar on how to integrate dark mode and light mode in a Next.js application with MUI.

    Thus, here is a GitHub repository that implemented MUI free react template with Next.js (with dark mode and light mode toggle implemented) for everybody reference if they are curious on how to use Next.js with MUI.

    To be honest, all the implementation details can be found in the MUI documentation (plus some Googling & ChatGPT) but it took me a while to understand the mechanics behind it and how to apply it correctly.

    The project is deployed at Vercel:

    https://nextjs-ts-with-mui-free-templates.vercel.app/

    GitHub repository:

    https://github.com/kuanjiahong/nextjs-ts-with-mui-free-templates

    Some issues I am still figuring it out:

    1. The CSS styling in production environment is different than development environment

  • Next.js: config prettier & next lint with lint-staged

    GitHub Discussion: https://github.com/lint-staged/lint-staged/discussions/1521

    In the project root directory, create a .lintstagedrc.mjs file

    import path from "path";
    const buildEslintCommand = (filenames) =>
    `next lint –fix –file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(" –file ")}`;
    const lintStagedObject = {
    "*.{js,jsx,ts,tsx}": [
    buildEslintCommand,
    "prettier –write –ignore-unknown",
    ],
    };
    export default lintStagedObject;
    view raw .lintstagedrc.mjs hosted with ❤ by GitHub

    Background information:

    I was struggling to come out with a way to combine Next.js next lint command and auto formatting code with prettier with pre-commit hook. After reading documentation and trial-and-error, the above configuration works.

  • Django – Dockerfile and docker-compose.yaml

    The below files can be used as a reference on how to deploy Django application in a container.

    Dockerfile

    FROM python:3.12.8-alpine
    ENV PYTHONDONTWRITEBYTECODE=1
    ENV PYTHONUNBUFFERED=1
    WORKDIR /app
    COPY requirements.txt ./
    RUN pip install -r requirements.txt –no-cache-dir
    COPY ./myresumebuilder/manage.py ./
    COPY ./myresumebuilder/myresumebuildersite ./myresumebuildersite
    COPY ./myresumebuilder/resumebuilder ./resumebuilder
    RUN adduser -D myuser
    USER myuser
    # Collect static files (if any)
    # RUN python myresumebuilder/manage.py collectstatic
    EXPOSE 8000
    # For production
    CMD ["gunicorn", "–bind=0.0.0.0:8000", "myresumebuildersite.wsgi"]
    # For development
    # CMD ["python", "myresumebuilder/manage.py", "runserver", "0.0.0.0:8000"]
    view raw Dockerfile hosted with ❤ by GitHub

    docker-compose.yaml

    # https://github.com/docker/awesome-compose/tree/master/official-documentation-samples/django/
    # https://github.com/docker/awesome-compose/blob/master/django/app/Dockerfile
    services:
    db:
    image: postgres:17.2-alpine
    volumes:
    – ./docker-volume/data/db:/var/lib/postgresql/data
    env_file:
    – .env
    healthcheck:
    test: ["CMD-SHELL", "pg_isready -d $${POSTGRES_DB} -U $${POSTGRES_USER}"]
    interval: 1s
    timeout: 5s
    retries: 10
    web:
    build: .
    ports:
    – "8000:8000"
    env_file:
    – .env
    depends_on:
    – db
    view raw docker-compose.yaml hosted with ❤ by GitHub

  • Raspberry Pi 5: File Upload Server

    At local machine

    GitHub Repository:

    https://github.com/kuanjiahong/file-upload-server

    Pull the repository into your local machine

    git clone https://github.com/kuanjiahong/file-upload-server.git

    Compile the TypeScript file to JavaScript file

    npm run build

    Transfer the built files to your Raspberry Pi 5. There are a few options to do it but I will be using the scp command

    scp -r dist/ <username>@<pi_ip_address>:<destination-path>

    And also to transfer the package.json file

    scp package.json <username>@<pi_ip_address>:<destination-path>

    At Your Raspberry Pi 5 Machine

    Install Node.js.

    refer to Raspberry Pi 5: Install Node post on how to install Node.js

    Set NODE_ENV=production

    export NODE_ENV=production

    Install node modules

    npm install --omit=dev

    Create a uploads directory

    mkdir uploads

    Start server

    node index.js

    Connecting to the server from local network:

    You can connect to the server that is running in the Raspberry Pi 5 by visiting http://[pi-ip-address]:[port-number]

    Connecting to the server from the internet:

    You will have to set up port forwarding at your router to allow remote devices from the internet to connect with your server that is hosted in your local network. It is not recommended to simply expose your home network public IP address. Make sure you read up all related resources and security concerns before exposing your server to the internet.

  • Raspberry Pi 5: Install Node

    Reference: https://nodejs.org/en/download/package-manager

    # installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

# verifies the right Node.js version is in the environment
node -v # should print `v22.12.0`

# verifies the right npm version is in the environment
npm -v # should print `10.9.0`

  • Hello World!

    Welcome! This is my first blog post. Hope you enjoy reading my content!