Forem: SeongKuk Han

Build a Voice Chat App Using AWS Chime SDK (React + Node.js)

SeongKuk Han — Tue, 18 Nov 2025 01:33:33 +0000

I’m going to show you how to implement voice chat using the Amazon Chime SDK. It took me a while to get it working the way I wanted, and good information was weirdly hard to find. AI hallucinations didn’t help either — they just stressed me out. Hopefully this post helps anyone in the same situation.

What is the Amazon Chime SDK?

The Amazon Chime SDK is a set of real-time communications components that you can use to quickly add messaging, audio, video, and screen sharing capabilities to your web or mobile applications.

Features

Voice Chat
Voice Recording

The example consists of two pages.

Voice Room List

This page shows active voice rooms and past rooms. When a room has no attendees, it moves to the past rooms list.

The audio recording starts as soon as the meeting is created, and each past room will get a download button once processing is finished.

Voice Room

Users can talk to each other here. If the user clicks the leave button, the server deletes their attendee. When no attendees remain, the server deletes the meeting and the Chime Concatenation API merges the audio files from the Media Pipeline into a single file.

Here’s how it works:

Create a Meeting

Clicking the Create Room button sends a request to the server to create a meeting.
The server creates the meeting, a media capture pipeline attached to it, and a concatenation pipeline attached to the media pipeline.
The server returns the meeting ID to the client.
The client receives the meeting ID and navigates to the voice room page.
The client connects to the WebSocket server and sends the meeting ID.
The server creates an attendee and returns the Chime Meeting and Attendee objects.
The client sets up the Chime SDK using those objects.
Users can now talk.

Joining a meeting works the same way — it starts from step four.

You can find the full code on GitHub, but here I’ll highlight a few important parts:

Setting up Amazon (IAM User, S3)
Creating Amazon Resources (Meeting, Attendee, Media Pipeline, Concatenation Pipeline)
Setting up the Chime SDK on the frontend

Set up Amazon

Your IAM user needs permission to access the Amazon Chime SDK.

"Service": "mediapipelines.chime.amazonaws.com"

This allows the Chime SDK to access your S3 bucket and create audio files.

I also added an extra policy so the IAM user can access S3 directly.

Create Amazon Resources

Meeting

const meeting = await meetingClient.send(
  new CreateMeetingCommand({
    ExternalMeetingId: uuidv4(),
    MediaRegion: region,
  }),
);

Before creating anything, you should understand the two “panels”:

Control Panel — manages resources
Data Panel — manages media flow

Available regions are listed here:

https://docs.aws.amazon.com/chime-sdk/latest/dg/sdk-available-regions.html

Older SDK versions may only support us-east-1.

Attendee

const attendee = await meetingClient.send(
  new CreateAttendeeCommand({
    ExternalUserId: uuidv4(),
    MeetingId: meetingId,
  }),
);

You need a meeting ID to create an attendee. The client needs both the meeting and attendee objects to connect. You aren’t charged until someone actually joins the meeting.

Media Pipeline

const pipeline = await mediaClient.send(
  new CreateMediaCapturePipelineCommand({
    SourceType: "ChimeSdkMeeting",
    SourceArn: meeting!.Meeting!.MeetingArn,
    SinkType: "S3Bucket",
    SinkArn: `arn:aws:s3:::${bucketName}`,
    ChimeSdkMeetingConfiguration: {
      ArtifactsConfiguration: {
        Audio: { MuxType: "AudioOnly" },
        Video: { State: "Disabled" },
        Content: { State: "Disabled" },
      },
    },
  }),
);

In this example I record audio only. You just pass the bucket name — no need to specify the bucket region because S3 bucket names are globally unique.

This pipeline records audio and uploads small audio chunks roughly every five seconds.

But I want a single audio file, not a pile of tiny ones, so this is where the Concatenation API comes in.

Also note: the media pipeline records even when no one is in the meeting. You must explicitly delete it using DeleteMediaCapturePipelineCommand so you aren’t billed unnecessarily and so your final audio doesn't include an empty five-minute tail.

Concatenation Pipeline

await mediaClient.send(
  new CreateMediaConcatenationPipelineCommand({
    Sources: [
      {
        Type: "MediaCapturePipeline",
        MediaCapturePipelineSourceConfiguration: {
          MediaPipelineArn: pipeline.MediaCapturePipeline!.MediaPipelineArn,
          ChimeSdkMeetingConfiguration: {
            ArtifactsConfiguration: {
              Audio: { State: "Enabled" },
              CompositedVideo: { State: "Disabled" },
              Content: { State: "Disabled" },
              DataChannel: { State: "Disabled" },
              MeetingEvents: { State: "Disabled" },
              TranscriptionMessages: { State: "Disabled" },
              Video: { State: "Disabled" },
            },
          },
        },
      },
    ],
    Sinks: [
      {
        Type: "S3Bucket",
        S3BucketSinkConfiguration: {
          Destination: `arn:aws:s3:::${bucketName}/${meetingId}/concatenated/`,
        },
      },
    ],
  }),
);

Here, you specify where you want the final merged audio file to go. I place it in a concatenated folder inside the meeting folder (the meeting ID is the default folder name created by the Media Pipeline).

This pipeline doesn’t need to be deleted — it runs automatically once the Media Pipeline is destroyed.

Setting up the Chime SDK on the Frontend

const setupChime = useEffectEvent(async () => {
  const configuration = new MeetingSessionConfiguration(
    value.meeting!,
    value.attendee!,
  );

  const logger = new ConsoleLogger("ChimeLogs", LogLevel.ERROR);
  const deviceController = new DefaultDeviceController(logger);
  const meetingSession = new DefaultMeetingSession(
    configuration,
    logger,
    deviceController,
  );

  deviceController.setDeviceLabelTrigger(async () => {
    return navigator.mediaDevices.getUserMedia({ audio: true });
  });

  const audioVideo = meetingSession.audioVideo;
  const mics = await audioVideo.listAudioInputDevices();

  await audioVideo.startAudioInput(mics[0].deviceId);
  await audioVideo.bindAudioElement(audioRef.current!);

  meetingSession.audioVideo.start();

  session.current = meetingSession;
});

value.meeting and value.attendee come from the server.
I call getUserMedia with audio-only permissions because otherwise the browser will prompt for video as well.

Once audioVideo.start() runs, users in the same room can talk to each other.

To clean everything up when the user leaves the room, I use the following code:

const destroyChime = useEffectEvent(async () => {
  if (!session.current) return;
  const meetingSession = session.current;

  meetingSession.audioVideo.stop();
  await meetingSession.audioVideo.stopAudioInput?.();
  meetingSession.audioVideo?.unbindAudioElement?.();
  await meetingSession.deviceController.destroy();
  await meetingSession.destroy();
});

It’s a bit rough — it throws an error — but it still works.
Use it as a reference rather than a final implementation.

Wrap Up

This example might miss a few small details, and your own setup may vary depending on your project. Treat this as a reference rather than a full guide.

You can find the full code here:

https://github.com/hsk-kr/chime-audio-recording-example

Hope it helps. Happy coding!

React: Building an Independent Modal with createRoot

SeongKuk Han — Tue, 30 Sep 2025 22:44:49 +0000

Back in 2021, when I started React for the first time in my career. I managed modal components by using conditional rendering.

const Component = () => {
  // ...

  return (
    <div>
      {visible && <Modal onOk={handleOk} />}
    </div>
  );
}

This is based on the idea that a component is rendered when it has to.

In another way, modal components decide whether it should be rendered or not by the logic written inside the modal component.

const Component = () => {
  // ...

  return (
    <div>
      <Modal visible={visible} onOk={handleOk} />
    </div>
  );
}

Here, we don't need to do conditional rendering, but passing a prop to render it.

As I dived into React more, I used a context provider to manage modal components so that I can simply use hooks to render modals.

const Component = () => {
  const {showModal} = useModal();

  const handleModalOpen = () => {
    showModal({
      message: 'hello',
      onConfirm: () => { alert('clicked'); }
    });

  }

  return (
    <div>
        {/*...*/}
    </div>
  );
}

const ModalProvider = () => {
  // ...
  return (
    <ModalContext.Provider value={{
      showModal,
    }}>
      <Modal {...modalState} />
    </ModalContext.Provider>
  );
}

I even wrote a post about this management, here.

In the side project I recently started, I had to create modal components.

I didn't want to write code from different places, I just wanted to call a function and render a modal component, and an idea came to my mind – render a component on a new root.

In this way, we don't write extra code to render a modal somewhere like in the root or wherever. Modal rendering logic is done inside the component.

The implementation could be different depending on your project.

In my project, I wrote the modal component like this:

import { useCallback, useState } from 'react';
import Text from '../../Text';
import Button from '../../Button';
import { createRoot } from 'react-dom/client';
import Input from '../../Input';

type ConfirmModalProps = {
  title: string;
  titleColor: 'red';
  message: string;
  confirmText: string;
  confirmationPhrase?: string;
  cancelText?: string;
  onConfirm: VoidFunction;
  onCancel: VoidFunction;
};

type ConfirmParameters = Omit<ConfirmModalProps, 'onConfirm' | 'onCancel'> & {
  onConfirm?: VoidFunction;
  onCancel?: VoidFunction;
};

const ConfirmModal = ({
  title,
  titleColor,
  message,
  confirmText,
  confirmationPhrase,
  cancelText = 'Cancel',
  onConfirm,
  onCancel,
}: ConfirmModalProps) => {
  const [input, setInput] = useState('');

  const confirmButtonDisabled =
    confirmationPhrase !== undefined && input !== confirmationPhrase;

  return (
    <div className="absolute z-50 inset-0 bg-black/50">
      <div className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-lg p-6 shadow-lg w-full max-w-[calc(100%-2rem)] sm:max-w-lg bg-gray-900 border border-gray-700 flex flex-col gap-2">
        <Text size="lg" color={titleColor} className="font-bold">
          {title}
        </Text>
        <Text>{message}</Text>
        {confirmationPhrase ? (
          <Input
            className="w-full"
            placeholder={`${confirmationPhrase}`}
            onChange={(e) => setInput(e.target.value)}
          />
        ) : null}
        <div className="flex justify-end gap-2 mt-2">
          <Button color="lightGray" onClick={onCancel}>
            {cancelText}
          </Button>
          <Button
            color="red"
            varient="fill"
            onClick={onConfirm}
            disabled={confirmButtonDisabled}
          >
            {confirmText}
          </Button>
        </div>
      </div>
    </div>
  );
};

export const useConfirmModal = () => {
  const confirm = useCallback(
    ({ onConfirm, onCancel, ...params }: ConfirmParameters) => {
      const tempElmt = document.createElement('div');
      document.body.append(tempElmt);
      const root = createRoot(tempElmt);

      const handleConfirm = () => {
        tempElmt.remove();
        onConfirm?.();
      };

      const handleCancel = () => {
        tempElmt.remove();
        onCancel?.();
      };

      root.render(
        <ConfirmModal
          {...params}
          onConfirm={handleConfirm}
          onCancel={handleCancel}
        />
      );
    },
    []
  );

  return {
    confirm,
  };
};

The main logic is here:

export const useConfirmModal = () => {
  const confirm = useCallback(
    ({ onConfirm, onCancel, ...params }: ConfirmParameters) => {
      const tempElmt = document.createElement('div');
      document.body.append(tempElmt);
      const root = createRoot(tempElmt);

      // ...

      root.render(
        <ConfirmModal
          {...params}
          onConfirm={handleConfirm}
          onCancel={handleCancel}
        />
      );
    },
    []
  );

  return {
    confirm,
  };
};

It adds the modal component in the body. There is no other code needed. I don't need to write code somewhere else

What I need to do is just calling the function:

  const { confirm } = useConfirmModal();

  const handleDeleteClick = () => {
    confirm({
      title: 'Are you absolutely sure?',
      message:
        'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
      titleColor: 'red',
      confirmationPhrase: 'delete my account',
      confirmText: 'Yes, delete my account',
    });
  };

This modal component itself is independent.

It might not be a good fit on your project though, I wanted to introduce a way to manage modal components in react in this post.

I hope you found it helpful.

Happy Coding!

React: How to Test useState (with Examples)

SeongKuk Han — Sun, 31 Aug 2025 21:12:37 +0000

I recently had to update an SDK from my company. I made changes and wanted to write test code to make sure it works the way it's intended. Since there is no UI – because it's a context provider component, I needed to test the state changes. However, it doesn't seem that React Testing Library supports testing states directly. After some research, I found out I can test it by mocking the useState function.

In this post, I will show you how I tested it with some code.

Test State Changes

There are multiple states in the component I needed to test, but only one state has an object type of state so, it is enough to check if a change I expected happened or not. I didn't need to know which state made the change.

Let's see an example.

import { useEffect, useState } from 'react';

function Counter() {
  const [cnt, setCnt] = useState(0);
  const [message, setMessage] = useState("Click button please!");

  const increase = () => setCnt((prevCnt) => prevCnt + 1);
  const decrease = () => setCnt((prevCnt) => prevCnt - 1);

  useEffect(() => {
    const isLow = cnt < 0;
    const isHigh = cnt > 10;

    if (isLow) setMessage('Cnt is low');
    else if (isHigh) setMessage('Cnt is high');
    else setMessage("Cnt is a good number");
  }, [cnt]);

  return (
    <>
      <button onClick={increase}>increase</button>
      <button onClick={decrease}>decrease</button>
      <span>{message.toUpperCase()}</span>
    </>
  )
}

export default Counter

In this component, when you click the increase or the decrease button, it changes the cnt state. Also, the message state changes depending on the cnt.

Let's test this compoennt, here is a util function I wrote:j

import equal from "fast-deep-equal";
import { vi, } from "vitest";

export const watchStates = () => {
  vi.mock("react", async () => {
    (window as any)['stateChangeHistory'] = [];
    const origin = await vi.importActual<typeof import("react")>("react");

    const addStateChangeHistory = (value: any) => (window as any)['stateChangeHistory'].push(value);

    const useState = vi.fn().mockImplementation(<T extends any>(initialValue: T) => {
      const [value, setter] = origin.useState(initialValue);

      addStateChangeHistory(value);

      return [value, setter];
    })

    return {
      ...origin,
      useState,
    };
  });

  /**
   * Returns true if all the changes are included and the length is the same as state changes
   * */
  const exact = (...args: any) => {
    const stateChangeHistoryCopy = [...(window as any)['stateChangeHistory']];
    clear();

    for (const arg of args.flat()) {
      const index = stateChangeHistoryCopy.findIndex((v: any) => equal(arg, v));
      if (index === -1) return false;
      stateChangeHistoryCopy.splice(index, 1);
    }

    return stateChangeHistoryCopy.length === 0;
  };

  /**
   * Returns true if all the values are included in the state changes
   * */
  const include = (...args: any) => {
    const stateChangeHistoryCopy = [...(window as any)['stateChangeHistory']];
    clear();

    for (const arg of args.flat()) {
      const index = stateChangeHistoryCopy.findIndex((v: any) => equal(arg, v));
      if (index === -1) return false;

      stateChangeHistoryCopy.splice(index, 1);
    }

    return true;
  };

  /**
   * Clear state changes
   * */
  const clear = () => {
    (window as any)['stateChangeHistory'] = [];
  };

  return { clear, exact, include };
};

It returns three functions:

exact: : It returns true if all the changes it gets from the parameters are made. If there are more changes apart from the parameters, it will return false.
include: It returns true if all the changes it gets from the parameters are made. It doesn't matter if there are more changes or not.
clear: Clear the history of state changes.

clear is called after either exact or include called – The function names may not be intuitive.

Let's see how to use them.

When the Counter component renders, there are two stage changes.

cnt: 0
message: Clicking button please!

In the state history, there will be [0, 'Click button please!'].

If you use the exact function, you should use it like this:

exact([0, 'Clicking button please!']); // or it could be ['Clicking button please!', 0];

If you use the include function, the following lines will be true:

include(0);
include('Clicking button please!');
include(['Clicking button please!', 0]);

But remember, the clear function is called afterwards – or you could simply delete the line not to call the clear function.

Here's the full test code example for the Counter component.

import { watchStates } from './test/utils/state'; // it must be placed at the top of the file
import { afterEach, expect, test } from 'vitest'
import Counter from './Counter';
import { render, fireEvent, cleanup, act } from '@testing-library/react'

test('renders Counter', async () => {
  const { getByText } = render(<Counter />)

  expect(getByText('CNT IS A GOOD NUMBER')).toBeInTheDocument();
})

test('increase button increases cnt', () => {
  const { include } = watchStates();
  const { getByText } = render(<Counter />)

  const increaseBtn = getByText(/increase/);

  act(() => {
    fireEvent.click(increaseBtn);
  });

  expect(include(1)).toBe(true);
});


test('increase button decrease cnt', () => {
  const { include } = watchStates();
  const { getByText } = render(<Counter />)

  const decreaseBtn = getByText(/decrease/);

  act(() => {
    fireEvent.click(decreaseBtn);
  });

  expect(include(-1)).toBe(true);
});

test('when cnt is over 10, it should change the message', () => {
  const { include } = watchStates();
  const { getByText } = render(<Counter />)

  expect(include('Click button please!')).toBe(true);

  const increaseBtn = getByText(/increase/);

  act(() => {
    for (let i = 0; i < 11; i++) {
      fireEvent.click(increaseBtn);
    }
  });

  expect(include([11, "Cnt is high"])).toBe(true);
});


test('when cnt is less thna 0, it should change the message', () => {
  const { include } = watchStates();
  const { getByText } = render(<Counter />)

  expect(include('Click button please!')).toBe(true);

  const decreaseBtn = getByText(/decrease/);

  act(() => {
    fireEvent.click(decreaseBtn);
  });

  expect(include([-1, "Cnt is low"])).toBe(true);
});

afterEach(() => {
  cleanup();
});

Here is one point.

import { watchStates } from './test/utils/state';

This line should be called at the top of the file to mock the useState function before the component uses.

2. Test Stage Changes With Name

The previous example is enough to use for the task I had to deal with. Because the change is unique and there are no other states with the same value.

However, in the real world, states can have the same value. We may want to know the exact state.

Let's see another example.

import { useEffect } from 'react';
import { useStateTest } from './test/utils/state';

function Mod() {
  const [cnt, setCnt] = useStateTest(0, "cnt");
  const [modThree, setModThree] = useStateTest(0, "modThree");
  const [modFive, setModFive] = useStateTest(0, "modFive");

  const increase = () => setCnt((prevCnt) => prevCnt + 1);

  useEffect(() => {
    setModThree(cnt % 3);
    setModFive(cnt % 5);
  }, [cnt]);

  return (
    <>
      <button onClick={increase}>increase</button>
      <span>{cnt}</span>
      {<span>{`cnt mod 3 = ${modThree}`}</span>}
      {<span>{`cnt mod 5 = ${modFive}`}</span>}
    </>
  );
}

export default Mod

There are three states.

cnt is a number.
modThree is a number, the same as cnt % 3,
modFive is a number, the same as cnt % 5.

If we want to know the change of modThree, in the previous example, we cannot guarantee it.

To track state changes with a name, I wrote this code at the top of the utility file:

export const useStateTest = <T>(initialValue: T, stateName: string) => {
  (window as any)["testStateChangeHistory"] ??= new Map();

  const [value, setter] = React.useState(initialValue);

  (window as any)["testStateChangeHistory"].set(stateName, value);

  return [value, setter] as const;
};

export const watchTestStates = () => {
  const getStateValue = (name: string) => {
    return (window as any)["testStateChangeHistory"].get(name);
  }

  return { getStateValue };
};

However, you should use the useStateTest function instead of the normal useState function.

Think of it like adding a data-test-X attribute to a tag — in that sense, it feels like a reasonable extra step.

With this utility function, you can test the Mod component like this:

import { watchTestStates } from './test/utils/state';// it must be placed at the top of the file
import { afterEach, expect, test } from 'vitest'
import Mod from './Mod';
import { render, fireEvent, cleanup, act } from '@testing-library/react'

test('renders Mod', async () => {
  const { getByText } = render(<Mod />)

  expect(getByText('increase')).toBeInTheDocument();
});

test('Mod initial values', () => {
  const { getStateValue } = watchTestStates();

  expect(getStateValue('cnt')).toBe(0);
  expect(getStateValue('modThree')).toBe(0);
  expect(getStateValue('modFive')).toBe(0);
});

test('Mod changes depending on cnt', () => {
  const { getStateValue } = watchTestStates();
  const { getByText } = render(<Mod />)

  expect(getStateValue('cnt')).toBe(0);
  expect(getStateValue('modThree')).toBe(0);
  expect(getStateValue('modFive')).toBe(0);

  const increaseBtn = getByText(/increase/);

  act(() => {
    fireEvent.click(increaseBtn);
  });
  expect(getStateValue('cnt')).toBe(1);
  expect(getStateValue('modThree')).toBe(1);
  expect(getStateValue('modFive')).toBe(1);

  act(() => {
    fireEvent.click(increaseBtn);
  });
  expect(getStateValue('cnt')).toBe(2);
  expect(getStateValue('modThree')).toBe(2);
  expect(getStateValue('modFive')).toBe(2);

  act(() => {
    fireEvent.click(increaseBtn);
  });
  expect(getStateValue('cnt')).toBe(3);
  expect(getStateValue('modThree')).toBe(0);
  expect(getStateValue('modFive')).toBe(3);
});

afterEach(() => {
  cleanup();
});

Why `window` is used to store the history

When you mock a function, the context is different, which means you can’t access variables from a parent component.

To make it work, I used the window object, which has a global context.

This way, both watchStates and the mock functions can access the same variable.

This is it.

https://github.com/hsk-kr/react-use-state-test

You can find the full code from this repository.

I hope you found it helpful.

Happy Coding!

React Drag and Drop Example: Moving a Square to Different Areas (Desktop Only)

SeongKuk Han — Sun, 27 Jul 2025 14:28:13 +0000

Preview: https://hsk-kr.github.io/react-drag-n-drop-desktop-only/

Github: https://github.com/hsk-kr/react-drag-n-drop-desktop-only

The other day, I got a report from my Chrome extension GitHub repository saying that the extension doesn't work anymore.

It was a project I built in 2024, one year ago. I opened the project and realized that most of the dependencies were outdated. I thought, “Okay, let’s update the dependencies first and make it brand new.” I updated everything — and as a result, I couldn’t even start the dev server.

The breaking changes were okay. The project is quite small, and I could fix things — I’m still working on it, though. Another problem was that the react-dnd package wasn’t compatible with my project setup. I checked the npm website and saw that the last publish was 3 years ago.

Okay, it still works fine — but 3 years ago? That made me feel a bit uneasy. I originally installed the package just to use a drag-and-drop feature, but thinking about it now, what I need is very limited. I just need to implement dragging a component from one point to another. I don’t even need to support mobile browsers since this is a Chrome extension.

If you follow programming-related content on social media, you might have seen this meme. I’ve also been in situations where I installed some dependencies even though I didn’t need most of their features. It makes sense that a library provides many features — we don’t use it just for one thing. But if we only need a small part of the implementation and it doesn’t affect the core logic, it might be better to write your own instead of relying on someone else’s code.

So I decided to implement drag and drop the way I needed. It doesn’t fit every use case because it’s not standardized, but I wanted to share it for anyone who might find it useful.

Implementation

The implementation consists of five files:

context
types
components – Drag, Drop
hooks – useDnd

Let’s look at the code one by one.

types.ts

type DragNDropKeyValueSet = {
  shape: number;
};

export type DragNDropKeyValuePair = {
  [K in keyof DragNDropKeyValueSet]: {
    name: K;
    value: DragNDropKeyValueSet[K];
  };
}[keyof DragNDropKeyValueSet];

export type DragNDropName = keyof DragNDropKeyValueSet;

export type DragNDropValue<K extends DragNDropName> = DragNDropKeyValueSet[K];

export type StartDragCallback = () => boolean | void;

export type EndDragCallback = (data: DragNDropKeyValuePair) => boolean | void;

EndDragCallback: An event triggered when dropping
StartDragCallback: An event triggered when starting a drag
DragNDropName: Each drag-and-drop item has a name to identify its value
DragNDropValue: A value from DragNDropKeyValueSet
DragNDropKeyValueSet: A name-value set. A component that receives a drop event will get this value from the component that started the drag.

- `DragNDropKeyValuePair`: A single type from `DragNDropKeyValueSet`

context.tsx

sjimport {
  createContext,
  type ReactNode,
  useCallback,
  useEffect,
  useState,
} from 'react';
import type {
  DragNDropKeyValuePair,
  DragNDropName,
  EndDragCallback,
  StartDragCallback,
} from './types';

type DragNDropContextType = {
  dragging: boolean;
  startDrag: (
    callback?: StartDragCallback,
    data?: DragNDropKeyValuePair
  ) => void;
  endDrag: (name: DragNDropName, callback?: EndDragCallback) => void;
};

export const DragNDropContext = createContext<DragNDropContextType>(
  {} as DragNDropContextType
);

export const DragNDropProvider = ({ children }: { children?: ReactNode }) => {
  const [dragging, setDragging] =
    useState<DragNDropContextType['dragging']>(false);
  const [data, setData] = useState<DragNDropKeyValuePair | undefined>(
    undefined
  );

  const startDrag: DragNDropContextType['startDrag'] = useCallback(
    (callback, data) => {
      const hasCallbackReturnedFalse = callback?.() === false;

      if (hasCallbackReturnedFalse) return;
      setData(data);
      setDragging(true);
    },
    [dragging]
  );

  const endDrag: DragNDropContextType['endDrag'] = useCallback(
    (name, callback) => {
      const areDifferentNames = data && name !== data?.name;
      const hasCallbackReturnedFalse = data ? callback?.(data) === false : false;

      if (!dragging || areDifferentNames || hasCallbackReturnedFalse) return;
      setDragging(false);
    },
    [data, dragging]
  );

  useEffect(() => {
    const setDraggingFalse = () => setDragging(false);

    window.addEventListener('dragend', setDraggingFalse, { capture: true });

    return () => {
      window.removeEventListener('dragend', setDraggingFalse);
    };
  }, []);

  return (
    <DragNDropContext value={{ dragging, startDrag, endDrag }}>
      {children}
    </DragNDropContext>
  );
};

The context holds one value at a time and manages it through drag events from the Drag and Drop components.

Drag.tsx

import {
  Children,
  cloneElement,
  type ReactElement,
  type HTMLAttributes,
  useCallback,
} from 'react';
import useDnd from '../useDnd';
import type { DragNDropName, DragNDropValue, StartDragCallback } from '../types';

type Props<K extends DragNDropName> = {
  children: ReactElement<
    Pick<HTMLAttributes<HTMLElement>, 'draggable' | 'onDragStart'>
  >;
  name: K;
  value: DragNDropValue<K>;
  onDragStart?: StartDragCallback;
};

export const Drag = <K extends DragNDropName>({
  children,
  name,
  value,
  onDragStart,
}: Props<K>) => {
  const { startDrag } = useDnd();

  const handleDragStart = useCallback(() => {
    startDrag(onDragStart, { name, value });
  }, [name, value, onDragStart, startDrag]);

  return Children.map(children, (child) =>
    cloneElement(child, {
      ...child.props,
      draggable: true,
      onDragStart: handleDragStart,
    })
  );
};

export default Drag;

It passes an onDragStart event to the child component and makes it draggable.

Drop.tsx

import {
  Children,
  cloneElement,
  type ReactElement,
  type HTMLAttributes,
  useCallback,
  type DragEvent,
} from 'react';
import useDnd from '../useDnd';
import type { DragNDropName, EndDragCallback } from '../types';

type Props = {
  children: ReactElement<
    Pick<HTMLAttributes<HTMLElement>, 'onDrop' | 'onDragOver'>
  >;
  name: DragNDropName;
  onDrop?: EndDragCallback;
};

const Drop = ({ children, name, onDrop }: Props) => {
  const { endDrag } = useDnd();

  const handleDrop = useCallback(
    (e: DragEvent) => {
      e.preventDefault();
      endDrag(name, onDrop);
    },
    [name, onDrop, endDrag]
  );

  const onDragOver = useCallback((e: DragEvent) => {
    e.preventDefault();
  }, []);

  return Children.map(children, (child) =>
    cloneElement(child, { ...child.props, onDrop: handleDrop, onDragOver })
  );
};

export default Drop;

It passes the onDrop event to the child component, and also the onDragOver event to prevent the default behavior and make it work based on our logic.

useDnd.tsx

import { useContext } from 'react';
import { DragNDropContext } from './context';

const useDnd = () => {
  return useContext(DragNDropContext);
};

export default useDnd;

Usage

Now, let's see how to use it.

In the example, there are three components: the start point, drag point, and bin.

You can create a rectangle by clicking a button — red, blue, or green — and they’ll be placed in the start point.

You can move a component from the start point or a drag point to another drag point by dragging it.

If you drag it into the bin, it will be deleted.

types.ts

import type { ComponentProps } from "react";
import type Shape from "../components/Shape";

export type ShapeColor = 'red' | 'blue' | 'green';

export type ShapesWithArea = Record<'start' | 'dragA' | 'dragB', Array<ComponentProps<typeof Shape>>>

The types are shared across the components.

Shape.tsx

import type { HTMLAttributes } from "react";
import type { ShapeColor } from "../types/Shape";

export type ShapeProps = { color: ShapeColor } & HTMLAttributes<HTMLDivElement>;

const Shape = ({ color, style, ...rest }: ShapeProps) => {
  return (
    <div style={{ width: 40, height: 40, backgroundColor: color, ...style }}{...rest} />
  )
}

export default Shape;

It draws a rectangle using the color from its props.

StartPoint.tsx

import type { ShapeColor } from "../types/Shape";
import Shape, { type ShapeProps } from "./Shape";
import Drag from "../lib/dnd/components/Drag";

const StartArea = ({ shapes, createShape, onDragStart }: { shapes: Array<ShapeProps>, createShape: (color: ShapeColor) => void, onDragStart: VoidFunction }) => {
  const onCreateShapeClick = (color: ShapeColor) => () => {
    createShape(color);
  }

  return (
    <div>
      <h2>Start Point</h2>
      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', width: 150, height: 150, border: '1px solid black', overflowY: 'auto', alignContent: 'flex-start' }}>
        {shapes.map((shape, shapeIdx) => (
          <Drag name="shape" value={shapeIdx} onDragStart={onDragStart}  >
            <Shape {...shape} />
          </Drag>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 4 }}>
        <button onClick={onCreateShapeClick('red')}>Red</button>
        <button onClick={onCreateShapeClick('blue')}>Blue</button>
        <button onClick={onCreateShapeClick('green')}>Green</button>
      </div>
    </div >
  )
}

export default StartArea;

This is where the Shape component is created when you click one of the buttons.

DropArea.tsx

import Shape, { type ShapeProps } from "./Shape";
import Drag from "../lib/dnd/components/Drag";
import Drop from "../lib/dnd/components/Drop";

const DropArea = ({ shapes, onDrop, onDragStart }: { shapes: Array<ShapeProps>, onDrop: (index: number) => void, onDragStart: VoidFunction }) => {
  return (
    <Drop name='shape' onDrop={(args) => {
      onDrop(args.value);
    }}>
      <div>
        <h2>Drag Point</h2>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', width: 200, height: 200, border: '1px solid black', overflowY: 'auto', alignContent: 'flex-start', }}>
          {shapes.map((shape, shapeIdx) => (
            <Drag name="shape" value={shapeIdx} onDragStart={onDragStart} >
              <Shape {...shape} />
            </Drag>
          ))}
        </div>
      </div >
    </Drop>
  )
}

export default DropArea;

The shape can be dropped into this component and can also be moved to another DropArea.

Bin.tsx


import Drop from "../lib/dnd/components/Drop";

const BinArea = ({ onDrop }: { onDrop: (index: number) => void }) => {
  return (
    <Drop name='shape' onDrop={(args) => {
      onDrop(args.value);
    }}>
      <div>
        <h2>Bin</h2>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', width: 50, height: 50, border: '3px solid black' }} />
      </div >
    </Drop>
  )
}

export default BinArea;

If the Shape is dropped here, it will be deleted.

App.tsx

import { useState } from "react";
import StartArea from "./components/StartArea"
import type { ShapeColor, ShapesWithArea } from "./types/Shape";
import DropArea from "./components/DropArea";
import { DragNDropProvider } from "./lib/dnd/context";
import BinArea from "./components/BinArea";

type ShapesWithAreaKey = keyof ShapesWithArea;

function App() {
  const [shapesWithArea, setShapesWithArea] = useState<ShapesWithArea>({
    start: [],
    dragA: [],
    dragB: [],
  });
  const [dragStartArea, setDragStartArea] = useState<ShapesWithAreaKey | null>(null);

  const createShape = (area: ShapesWithAreaKey) => (color: ShapeColor) => {
    setShapesWithArea((prevShapesWithArea) => ({
      ...prevShapesWithArea,
      [area]: prevShapesWithArea[area].concat({ color }),
    }));
  }

  const moveShape = (from: ShapesWithAreaKey, to: ShapesWithAreaKey, index: number) => {
    if (from === to) return;

    setShapesWithArea((prevShapesWithArea) => ({
      ...prevShapesWithArea,
      [from]: prevShapesWithArea[from].filter((_, i) => i !== index),
      [to]: prevShapesWithArea[to].concat(prevShapesWithArea[from][index]),
    }));
  }

  const removeShape = (area: ShapesWithAreaKey, index: number) => {
    setShapesWithArea((prevShapesWithArea) => ({
      ...prevShapesWithArea,
      [area]: prevShapesWithArea[area].filter((_, i) => i !== index),
    }));
  }

  const handleDragStart = (from: ShapesWithAreaKey) => () => {
    setDragStartArea(from);
  }

  const handleDrop = (to: ShapesWithAreaKey | 'bin') => (index: number) => {
    if (!dragStartArea) {
      throw new Error('dragStartArea must be set before drop event');
    }

    if (to === 'bin') {
      removeShape(dragStartArea, index);
    } else {

      moveShape(dragStartArea, to, index);
    }
  }

  return (
    <DragNDropProvider>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <StartArea
          shapes={shapesWithArea.start}
          createShape={createShape('start')}
          onDragStart={handleDragStart('start')}
        />
        <DropArea
          shapes={shapesWithArea.dragA}
          onDrop={handleDrop('dragA')}
          onDragStart={handleDragStart('dragA')} />
        <DropArea
          shapes={shapesWithArea.dragB}
          onDrop={handleDrop('dragB')}
          onDragStart={handleDragStart('dragB')} />
        <BinArea
          onDrop={handleDrop('bin')} />
      </div>
    </DragNDropProvider>
  )
}

export default App;

The shapes are managed in this component. The from and to parameters are assigned here, and the index is shared through drag and drop. Using those, it moves or deletes a shape based on the drop action.

Conclusion

It seems a bit complicated, to be honest, since this drag-and-drop logic is based on the data structure I’m using in my Chrome extension. The implementation can vary depending on your use case.

The main point is that we don’t need to rely on a library — if the logic is simple enough, it might be better to implement it ourselves.

Thanks for reading this, and I hope you found it helpful.

Happy Coding!

Sharing Types and Values Across Frontend and Backend Using a PNPM Monorepo (React + NestJS)

SeongKuk Han — Sun, 29 Jun 2025 14:23:43 +0000

Here's a video. – Sorry for my English. Just look at the code and what I did.

No edit, only for your reference.

At the end of the video, the frontend wasn't able to import in a subpath, and the error was gone at some point, even though the code was the same. I have a doubt that there might have been a cache issue or a file encoding issue (it happened during the video once). You can check the code; I attached the GitHub repository URL at the bottom of this post. Thanks.

pnpm is my favorite package manager. I recently started a side project and decided to use pnpm as a package manager and structure it as a monorepo. If you work alone on both frontend and backend, you might find situations where you need the same types and values on both sides. If you set up your project as a monorepo, you can add a new package and share them instead of defining them on both sides.

In modern TypeScript, you can simply add a package and import what you want. However, you may encounter a situation where you can't import values from the shared package because they use a different module system.

In my case, NestJS uses commonjs as a module system, and Vite uses a modern module system.

In this post, I will show you an example of how to share a package between projects that use different module systems in a monorepo.

I will set up a React project using Vite and a backend server using NestJS.

The example will be simple.

The shared package has a Language type and values languages and defaultLanguages.

There is an API endpoint GET /languages, which returns languages.

The frontend requests the API and updates the state with the result from the endpoint. Before requesting the API, the state has defaultLanguages from the shared package as a default value.

Both sides use the Language type.

Let's get started.

1. Setup Shared

1-1. Set up Project

> mkdir pnpm_mono_shared
> cd pnpm_mono_shared
> pnpm init

1-2. Set up Monorepo

Create a file pnpm-workspace.yaml in root.

packages:
  - 'frontend'
  - 'backend'
  - 'shared'

Add those three projects.

1-3. Create Shared Package

> mkdir -p shared/src/types
> touch shared/src/types/languages.ts
> mkdir -p shared/src/const
> touch shared/src/const/languages.ts
> cd shared
> pnpm init

1.4. Define Types and Values

// shared/src/types/languages.ts
export type Language = "javascript" | "go" | "c";

// shared/src/const/languages.ts
import { Language } from "../types/languages";

export const defaultLanguages: Language[] = ["javascript"];

export const languages: Language[] = ["javascript", "go", "c"];

2. Setup Backend

2-1. Set Up Backend/Nestjs Package

> npm i -g @nestjs/cli
> nest new backend

2-2. Reinstall Dependencies

> rm -rf backend/node_modules
> pnpm install

The initial node_modules directory is generated by Nest CLI, so you need to delete and reinstall it to use it in our monorepo.

2-3. Add Shared Package

> pnpm add --filter backend --workspace shared

The --filter option is used to select a project, and when combined with --workspace, it adds the package by searching within our workspace.

2-4. Add `getLanguages` Endpoint

// app.service.ts
import { Injectable } from '@nestjs/common';
import { languages } from 'shared/src/const/languages'

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }

  getLanguages() {
    return languages;
  }
}

// app.controller.ts
import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';
import { Language } from 'shared/src/types/languages';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) { }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('languages')
  getLanguages(): Language[] {
    return this.appService.getLanguages();
  }
}

2-5. Enable CORS

Enable CORS to accept requests from the frontend, which is hosted on a different domain.

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(process.env.PORT ?? 3000);
}
bootstrap();

3. Setup Frontend

3-1. Set Up React Package

> % pnpm create vite
[│
◇  Project name:
│  frontend
│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└
...

3-2. Install dependences and Add Shared Package

> pnpm install
> pnpm add --filter frontend --workspace shared

. 3-3. Write App

import { useEffect, useState } from 'react'
import { defaultLanguages } from 'shared/src/const/languages';

function App() {
  const [languages, setLanguages] = useState(defaultLanguages);

  useEffect(() => {
    setTimeout(async () => {
      const res = await fetch('http://localhost:3000/languages');
      const languages = await res.json();
      setLanguages(languages);
    }, 3000);
  }, []);

  return (
    <>
      {languages}
    </>
  )
}

export default App

It displays the defaultLanguages from the shared package. After 3 seconds, it requests the getLanguages endpoint and updates the state.

4. Test

Backend

> pnpm run --filter backend start:dev

You will see this error

Error: Cannot find module 'shared/src/const/languages'

Let's test frontend.

> pnpm run --filter frontend dev

It won't have any problems.

Let's build it.

> pmpm run --filter frontend build

You will see this type error.

../shared/src/const/languages.ts:1:10 - error TS1484: 'Language' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

1 import { Language } from "../types/languages";
           ~~~~~~~

As mentioned, changing it to import type solves the problem.

However, the issue is on the backend — it still doesn't work. Let's fix that in the next step.

5. Compile Shared

5-1. Set up Typescript

> pnpm add --filter shared typescript -D

> cd shared
> pnpm exec tsc --init

{
  "compilerOptions": {
    "target": "ES2023",
    "module": "nodenext",
    "declaration": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

5-2. Create index.ts

// shared/src/index.ts
export * from './const/languages';
export * from './types/languages';

It will serve as a fallback option for modules that don't support the exports field in package.json.

5-3. Set Up Bundler tsup

You can compile with different options manually, but setting it up is a pain. tsup makes this easier.

> pnpm add --filter shared -D tsup

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts', 'src/const/languages.ts', 'src/types/languages.ts'],
  format: ['esm', 'cjs'],
  outDir: 'dist',
  dts: true,
  clean: true,
});

5-3. Update package.json

{
  "name": "shared",
  "version": "1.0.0",
  "scripts": {
    "build": "tsup",
    "build:watch": "nodemon --watch src --ext ts --exec 'pnpm run build'"
  },
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./const/languages": {
      "import": "./dist/const/languages.mjs",
      "require": "./dist/const/languages.js"
    },
    "./types/languages": {
      "import": "./dist/types/languages.mjs",
      "require": "./dist/types/languages.js"
    }
  },
  "packageManager": "pnpm@10.6.4",
  "devDependencies": {
    "tsup": "^8.5.0",
    "typescript": "^5.8.3"
  }
}

In the modern module system, it uses the exports field, and you must explicitly define each path. This prevents the use of **/* for security reasons.

The build:watch script compiles the code whenever there are file changes, but you need to install nodemon first. I included it here as an example.

5-4. Update import paths

// backend/app.service.ts
import { Injectable } from '@nestjs/common';
import { languages } from 'shared';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }

  getLanguages() {
    return languages;
  }
}

// backend/app.controller.ts
import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';
import { Language } from 'shared';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) { }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('languages')
  getLanguages(): Language[] {
    return this.appService.getLanguages();
  }
}

6. Result

Conclusion

I discovered tsup while writing this post. Initially, I tried to configure everything myself and eventually got it working, but it was too complicated. So, I decided to use a bundler — tsup, which was recommended by ChatGPT.

I hope you found this helpful.

Happy coding!

You can find the code here

Github: https://github.com/hsk-kr/pnpm-monorepo-example

Show Maintenance Page with Nginx - (Web + Nginx + Docker)

SeongKuk Han — Fri, 25 Apr 2025 00:27:05 +0000

For the past year, there has been lots of news hitting our industry. AI is at the center. Besides all the topics, I also started to work on my side project, which I would’ve never tried before. After work, we only have a few hours. If you have a strong willingness to do something, you can do whatever you want. But for me, I want to rest, I want to look around, I want to kill my time by doing unproductive things while trying to do something productive. Out of that, I have a couple of hours a day, and AI enables me to make some meaningful progress towards my goal. This post is not about that, but I just wanted to mention it.

I will launch my service, and it will be a B2C service. I’ve never created a service that directly faces users. As I have been working as a software developer, I have learned how to read code, write code, and use code that’s already there. However, I’ve never created a service from scratch to a ready-to-launch level.

I built my own server, set up a deployment process, and handled DB migration. But I still have one concern – what should I do when an emergency situation happens? Users will pay for my service, and I have to be responsible. There will be moments when I have to stop the service for a bit, or during the build-deploy process, to deploy safely, I may need to pause the service for a minute.

For that, I thought it would be good to show a page that lets users know the service is under update or maintenance. It should be achievable as soon as possible.

To be honest, I got help from AI. This method is very useful, and I felt like sharing it.

The example includes:

Web Service: I made it using Nginx and its development server. But it could be any web service depending on your purpose.
Nginx: Nginx will control the flow.
Docker: I deployed the service using docker-compose. In my web service, I used docker-swarm, but anyway, this can be used in any type of service.

Web Service

pnpm create next-app maintenance

I didn’t edit the website. I just needed a web service to show this example.

Nginx

I created a data folder in the root. Inside the data folder, there’s an nginx folder, and it has two files: maintenance.html, which will be shown to users in maintenance mode, and nginx.conf to configure nginx.

maintenance.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>We will be back soon!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Sorry!</h1>
  <p>We are updating our web server to provide a better and more convenient service. Please wait a moment. The service
    will be back shortly.</p>
</body>

</html>

You can add more content depending on your purpose. I created a simple one.

nginx.conf

server {
    listen 3000;

    error_page 503 /maintenance.html;         # where to send 503s
    location = /maintenance.html {            # serve the static page
        root /nginx-data;
        internal;                             # prevent direct linking when not in maintenance
    }

    location / {
        if (-f /nginx-data/maintenance.flag) {
            return 503;                           # send 503 Service Unavailable
        }

        proxy_pass http://frontend:3000;
    }
}

The default port for the Next development server is 3000. I proxied port 30000 to 3000. frontend is the name of the container in the docker-compose file, which I’ll mention later.

When a 503 error happens, it will redirect to the /maintenance.html path.

Below that, there is a definition for the /maintenance.html root.

root /nginx-data means the file will be read from this root path. Using internal, this page can’t be accessed directly. This page should only be shown on our intention.

In the location / block, it proxies requests to http://frontend:3000.

But if there is a file `/nginx-data/maintenance.flag`, it will return 503, which shows our maintenance page.

Docker

FROM node:23-alpine

RUN npm install -g pnpm

WORKDIR /app

COPY . .

RUN pnpm install

CMD ["pnpm", "run", "dev"]

This is for the Next.js service. It’s very simple. It installs the dependencies needed to run the Next.js app and starts the development server.

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    networks:
      - custom 

  nginx:
    # Build the custom Nginx+Certbot image
    image: nginx:latest
    restart: always
    ports:
      - '30000:3000'
    volumes:
      - ./data/nginx:/nginx-data
      - ./data/nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - frontend 
    networks:
      - custom 

networks:
  custom:
    driver: bridge

Here, what we need to look closely at is the nginx container. It uses the latest nginx image. Since my port 3000 is already used, I used 30000. Port 30000 will connect to port 3000 inside the container.

In our nginx folder, there is a nginx.conf file. This file will be copied to /etc/nginx/conf.d/default.conf inside the container.

If you wondered what the nginx-data folder was, it’s our nginx folder. It’s mounted in the /nginx-data folder inside the container.

Result

Let’s run docker compose with docker compose up.

Go to localhost:30000 to see if the app runs properly.

Here are two shell script files to create or delete the maintenance.flag file. If nginx detects the file, it will redirect requests to our maintenance page.

The maintenance-on file creates the maintenance.flag file.
The maintenance-off file removes the maintenance.flag file.

Now, if you go to localhost:30000 you will see this maintenance page.

If you run maintenance-off, you will see the website back to our Next.js app.

Conclusion

This example handles a very basic case. You can run this command from your remote machine. In my case, I turn it on between deploy and before the web service is stable. I also created GitHub Actions so I can turn maintenance mode on and off with one click.

I hope you find it helpful.

You can check the full code here:

https://github.com/hsk-kr/nginx-maintenance-page-example

PS.

I’ve been actively using AI on my side project. It’s very helpful, and I’m happy that I finally got to work on my project, which I couldn’t even start before.

Since January 2022, I’ve been writing at least one post a month. A few days ago, I didn’t know what to write. I felt like AI does much better than I do. I tried to write posts that are hard to find online, but now, we can simply ask AI anything.

But then, a couple of days ago, I had some issues in my project because I applied code that AI generated without understanding it. I tried to find posts that can help with it, but it wasn’t easy. After some research, I found one post and I managed to make it work – even better, I was able to make it more efficient.

AI does a better job than I do, but asking AI what to do is still up to me. We can get knowledge from AI, but if we don’t know what to ask, it’s hard. Searching for things and reading posts we didn’t expect can teach us something new. Finding exactly what we need is important, but I believe in random opportunities to learn unexpected things – this expands our knowledge. I almost thought about stopping writing posts, but I’ll probably keep going for a while.

Now, I can write posts quickly using AI, and it enabled me to do something I couldn’t do this quickly before. I really appreciate it.

Writing half about the post and half about mumbling – sorry about that.

Hope you have a nice day!

Happy Coding!

Mac Dev Environment Automation: From Reset to Ready in 5 Minutes

SeongKuk Han — Sat, 22 Mar 2025 20:51:15 +0000

For the past few months, I've been struggling with limited disk space on my laptop. Deleting cache files helped temporarily, but the relief didn't last long. Eventually, I couldn't install any new software.

Resetting my laptop became the only practical option. I hesitated because I was worried about reinstalling all the development tools I needed. After I began using Neovim, I've installed so many packages and tools that I couldn't even remember them all.

My tech lead, Pablo, built his own installer to set up his development environment. Inspired by his idea, I decided to create my own dev setup tool that would allow me to configure my development environment anywhere in minutes.

Thanks to Homebrew, I had manually installed most of my software, and I realized I could automate the installation of all these tools through Homebrew. I just needed to document what I required.

Additionally, I maintain dotfiles and zsh configurations. This part was easily solved by cloning my dotfile repository and creating symbolic links.

In this post, I'll introduce how my setup tool works, sharing some of the code (though not all of it).
For reference, this tool is built specifically for my MacBook M1 2020 running zsh.

Preview

How it works

Instead of using a TUI (Terminal User Interface) framework, I built a simple UI from scratch. For this, I relied on just two helpful libraries:

"github.com/fatih/color": Color text
"github.com/mattn/go-tty": Input keys from console

func RenderItem(name string, disabled bool) {
    installedPen := color.New(color.FgHiGreen).PrintFunc()
    notInstalledPen := color.New(color.FgRed).PrintFunc()
    softwareNamePen := color.New(color.FgWhite).PrintFunc()

    softwareNamePen(name)
    if disabled {
        installedPen(" - Installed")
    } else {
        notInstalledPen(" - Not Installed")
    }
}

Color helps distinguish between different types of text at a glance - especially for status indicators like installed/not installed. The lightweight color library provided exactly what I needed without unnecessary complexity.

For moving around the terminal, I went with ANSI escape sequences. They let me position the cursor precisely and update specific parts of the text as needed.

type SelectItem struct {
    Name        string
    Render      func(name string, disabled bool)
    Run         func()
    GetDisabled func() bool
    Disabled    bool
}

func (si *SelectItem) UpdateDisabled() {
    if si.GetDisabled != nil {
        si.Disabled = si.GetDisabled()
    }
}

func ShowCursor() {
    fmt.Print("\033[?25h")
}

func HideCursor() {
    fmt.Print("\033[?25l")
}

func ClearConsole() {
    cmd := exec.Command("clear")
    cmd.Stdout = os.Stdout
    cmd.Run()
}

func MoveCursor(x, relativeY int) {
    if relativeY < 0 {
        fmt.Printf("\033[%dA\033[%dG", -relativeY, x)
    } else {
        fmt.Printf("\033[%dB\033[%dG", relativeY, x)
    }
}

/*
Display items and returns the name of the item
If user presses esc, it returns empty string with an error
*/
func Select(items []SelectItem) (string, error) {
    print := color.New(color.FgWhite).PrintfFunc()
    cursor := color.New(color.FgGreen).Add(color.Bold).PrintFunc()
    itemLength := len(items)
    currentIndex := 0

    for _, item := range items {
        print("   ")

        if item.Render != nil {
            item.Render(item.Name, item.Disabled)
        } else {
            print(item.Name)
        }

        print("\n")
    }

    eraseCurrentCursor := func() {
        MoveCursor(1, -itemLength+currentIndex)
        cursor(" ")
        MoveCursor(1, -(-itemLength + currentIndex))
    }

    drawCurrentCursor := func() {
        MoveCursor(1, -itemLength+currentIndex)
        cursor(">")
        MoveCursor(1, -(-itemLength + currentIndex))
    }

    drawCurrentCursor()

    t, err := tty.Open()
    if err != nil {
        panic(err)
    }
    defer t.Close()

    for {
        r, _ := t.ReadRune()

        switch r {
        case '\x1b':
            return "", errors.New("Escape")
        case 'j', 'J', 'h', 'H':
            if currentIndex >= itemLength-1 {
                break
            }
            eraseCurrentCursor()
            currentIndex++
            drawCurrentCursor()
        case 'k', 'K', 'l', 'L':
            if currentIndex <= 0 {
                break
            }
            eraseCurrentCursor()
            currentIndex--
            drawCurrentCursor()
        }

        if (r == '\r' || r == '\n') && !items[currentIndex].Disabled {
            break
        }
    }

    return items[currentIndex].Name, nil
}

The Select function prints items and reads the key input and moves cursors.

If the escape key is entered, it returns the Escape error and,
if the enter key is entered, it returns the name of the selected item.

This simple UI is enough to achieve my goal - anyway making it pretty is not my goal so.

I was thinking of reimplementing the UI using bubble tea library, which my tech lead recommended to me and it has rich features, easy to use, and just awesome.

If you're planning to build a terminal based app, I highly recommend bubble tea.

Tools

You can install tools by placing the cursor next to the item you want and pressing the enter key.

If the item is already installed, nothing happens when you select it.

I implemented three types of functions to check if a tool exists or not:

func ExistBrewPackage(packageName string) bool {
    _, err := exec.Command("brew", "list", packageName).Output()

    if err != nil {
        return false
    }

    return true
}

func ExistApplication(appName string) bool {
    ls := exec.Command("ls", "/Applications")
    grep := exec.Command("grep", appName)

    pipe, err := ls.StdoutPipe()
    defer pipe.Close()

    if err != nil {
        panic(err)
    }

    grep.Stdin = pipe

    err = ls.Start()

    if err != nil {
        panic(err)
    }

    output, err := grep.Output()

    if err != nil {
        return false
    }

    return len(string(output)) >= len(appName)
}

func ExecCommand(command string, args ...string) {
    cmd := exec.Command(command, args...)
    cmd.Stdout = os.Stdout
    cmd.Stderr = os.Stdout

    if err := cmd.Start(); err != nil {
        panic(err)
    }

    if err := cmd.Wait(); err != nil {
        panic(err)
    }
}

ExistBrewPackage: Checks for tools that don't have a command and only exist as a brew package
ExistApplication: Verifies applications that aren't available as commands or brew packages, but exist inside the Applications directory
ExecCommand: Simply runs a command and reports whether there was an error or not

// ...
    case "Git":
        return ExistBrewPackage("git"), nil
    case "WezTerm":
        return ExistApplication("WezTerm.app"), nil
    case "Neovim":
        return ExistCommand("nvim"), nil
// ...

These functions are used to check for existing software and install new tools.

For installing tools, I rely completely on Homebrew, which simplifies the process tremendously.

As for Homebrew itself, I could have made the installation command interactive, but instead I chose to provide instructions for manual installation. Since Homebrew is easy to install with a single terminal command, I left it as a manual step while ensuring all other tools can be automatically installed using Homebrew once it's in place.

// ...
    case "fzf":
        ExecCommand("brew", "install", "fzf")
    case "zsh-vi-mode":
        ExecCommand("brew", "install", "zsh-vi-mode")
        AddZshSource("source $(brew --prefix)/opt/zsh-vi-mode/share/zsh-vi-mode/zsh-vi-mode.plugin.zsh")
        WarningMessage("Run source ~/.zshrc to use zsh-vi-mode without reopening the terminal.")
    case "docker":
        ExecCommand("brew", "install", "docker")
    case "ruby":
        ExecCommand("brew", "install", "ruby")
// ...

I implemented the AddZshSource function to add necessary source lines to complete the installation.
These source lines are added to the ~/dev-setup-manager/devsh file, which is then imported from ~/.zshrc.

Dotfiles

Dotfiles are configuration files that customize your system and applications. They're called "dotfiles" because they typically start with a dot (.) in Unix-like systems, making them hidden files.

My dotfiles are stored in a GitHub repository, and I use symbolic links to connect them to their expected locations in the system. This approach allows me to:

Version control my configurations
Easily sync settings across multiple machines
Quickly set up a new environment with my preferred settings

Here's how I set up my dotfiles using the dev setup manager:

// ...
    ExecCommand("mkdir", "-p", devSetupManagerHomePath)

    if exist, _ := existFile(devSetupManagerDotfilesPath); exist {
        ExecCommand("rm", "-rf", devSetupManagerDotfilesPath)
    }

    ExecCommand("git", "clone", "git@github.com:hsk-kr/dotfiles.git", devSetupManagerDotfilesPath)

    ExecCommand("mkdir", "-p", configDirPath)

    copyItems := []string{
        "aerospace",
        "devdeck",
        "karabiner",
        "nvim",
        "tmux",
        "zsh",
    }

    for _, copyItem := range copyItems {
        ExecCommand("ln", "-sfn", fmt.Sprintf("%s/%s", devSetupManagerDotfilesPath, copyItem), fmt.Sprintf("%s/%s", configDirPath, copyItem))
    }

    ExecCommand("ln", "-sfn", fmt.Sprintf("%s/%s", devSetupManagerDotfilesPath, "scripts"), fmt.Sprintf("%s/%s", homePath, "scripts"))

    AddZshSource(fmt.Sprintf("source %s/%s", configDirPath, "zsh/zshrc"))
// ...

The process works as follows:

Delete existing dotfiles (if present)
Clone the dotfiles from my GitHub repository
Create symbolic links to connect them to the expected system locations
Add a source line to .zshrc to import my custom zsh configuration

Guide

There were some things I needed to do to set up my development environment that had to be handled manually, such as Apple configurations and ensuring the correct installation order. This section is a set of notes related to these manual setup steps.

Deployment

After completing the development, I thought the tool was ready to use even though I hadn't tested everything. However, when I reset my computer, I realized I had forgotten to compile the code.

To solve this problem, I quickly set up a GitHub Actions workflow to automatically build the code and release the compiled program whenever needed.

name: Build and Release

on:
  workflow_dispatch:
    inputs:
      version:
        description: "Version number"
        required: true
        default: "v0.1.0"

jobs:
  build-and-release:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          ref: main

      - name: Setup Go
        uses: actions/setup-go@v5
        with:
          go-version: '1.24'

      - name: Build for macOS (M1)
        run: GOOS=darwin GOARCH=arm64 go build -o dev-setup-manager main.go

      - name: Upload binaries as artifacts
        uses: actions/upload-artifact@v4
        with:
          name: binaries
          path: |
            dev-setup-manager

      - name: Create a Release
        uses: ncipollo/release-action@v1
        with:
          artifacts: "dev-setup-manager"
          tag: ${{ inputs.version }}

The code compiles to target the darwin arm64 architecture, specifically for my M1 MacBook 2020.

Wrap Up

Here is my GitHub repository.

I had to make some minor adjustments, but it worked perfectly. As a result, I managed to set up my development environment within 5 minutes. Since my dotfiles and zsh configurations are shared, I can configure my development environment on any Mac-based computer in no time. I can reset my laptop anytime to clear disk space - though laptop setup, software installation, and Apple configuration still need to be handled manually. This is a minor inconvenience, but it doesn't take much time thanks to the Apple ecosystem.

I'm very satisfied with the results, and I hope you find this helpful or get some inspiration from it.

Thanks,

Happy Coding!

Go Simple Example: Generate Audio Stories with Google Gemini, TTS, and Cloudflare R2

SeongKuk Han — Thu, 27 Feb 2025 01:28:30 +0000

I'm currently working on a side project about language learning. The main features include generating content with AI and converting text into audio files. To store the audio files, I also need cloud storage.

Cost was my main priority because I figured switching between cloud platforms wouldn't be too difficult.

In the end, I chose Google Gemini, Google TTS, and Cloudflare R2. They provide API documentation and examples, but I found some parts lacking, so I decided to write a post about it. I used Go, and this covers only basic usage.

For Google Gemini and TTS, I use the RESTful API. Although they provide a library, I found using the RESTful API more convenient than setting up the library.

Google Gemini – Send a prompt and receive a response.
Google TTS – Send text and receive an audio file.
Cloudflare R2 – Store an audio file in binary format in Cloudflare.
Final Code

1.Google Gemini

package api

import (
    "bytes"
    "encoding/json"
    "fmt"
    "io"
    "net/http"

    "github.com/spf13/viper"
)

type Part struct {
    Text string `json:"text"`
}

type Content struct {
    Parts []Part `json:"parts"`
}

type Candidates struct {
    Content Content `json:"content"`
}

type PromptResult struct {
    Candidates []Candidates `json:"candidates"`
}

func Prompt(prompt string) (*PromptResult, error) {
    // I use viper to manage environment variables, you can replace this with your api key.
    url := fmt.Sprintf("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=%s", viper.Get("GOOGLE_CLOUD_API_KEY"))

    // In this example, it sends only one prompt but you can send more information
    data, err := json.Marshal(map[string]interface{}{
        "contents": []map[string]interface{}{{
            "parts": []map[string]interface{}{{
                "text": prompt,
            }},
        }},
    })

    if err != nil {
        return nil, err
    }

    req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))

    if err != nil {
        return nil, err
    }

    req.Header.Add("Content-Type", "application/json")

    // Request the API
    res, err := http.DefaultClient.Do(req)

    if err != nil {
        return nil, err
    }

    defer res.Body.Close()

    resBody, err := io.ReadAll(res.Body)

    if err != nil {
        return nil, err
    }

    var promptResult PromptResult

    // Parse the result
    err = json.Unmarshal(resBody, &promptResult)

    if err != nil {
        return nil, err
    }

    return &promptResult, nil
}

package main

import (
    "fmt"

    "github.com/hsk-kr/tutorial/lib/api"
    "github.com/spf13/viper"
)

func main() {
    viper.SetConfigFile(".env")
    viper.ReadInConfig()

    promptResult, _ := api.Prompt("Generate a short story for kids")

    fmt.Println(promptResult.Candidates[0].Content.Parts[0].Text)
}

% go run main.go
Barnaby Bumble, a fuzzy, striped bee with a wobbly stinger, was known throughout Honeycomb Hollow for one thing: he was terribly afraid of heights.

“Buzz off, Barnaby!” the other young bees would tease, zooming past him as they practiced their loop-de-loops around the tallest sunflower stalks. Barnaby would cling tightly to the petals of a daisy, his tiny heart thumping like a hummingbird's wings.

He longed to fly high. He dreamed of seeing the whole meadow spread out below him, a carpet of shimmering colors. But every time he tried to climb a little higher, a dizzy feeling would overwhelm him, and he’d tumble back down, buzzing with fear.

One sunny morning, Mrs. Higgins, the wise old queen bee, announced a very important task. “The Queen Clover is blooming!” she declared. “Her nectar is extra sweet and good for making the best honey. But she’s blooming on the very highest hill, atop the tallest thistle! Someone brave and strong must bring her nectar back to the hive.”

All the young bees buzzed excitedly, eager to volunteer. Barnaby, however, shrunk back, his stripes seeming to fade to gray. He knew he couldn't possibly fly that high.

But then, he saw little Penelope Petal, a tiny bee with a torn wing. She looked longingly at the queen, but her wing flapped weakly. Penelope was too small and hurt to make the journey.

Barnaby felt a surge of courage. He knew he couldn’t let Penelope down, and he knew how important the Queen Clover nectar was. Taking a deep breath, he buzzed forward.

"Mrs. Higgins," he stammered, "I... I want to try."

Mrs. Higgins smiled kindly. "Are you sure, Barnaby? It's a long way up."

"I'll do my best," he promised, his voice trembling only a little.

He took off, his wings beating harder than ever. The air rushed past him, and his head began to spin. He looked down and saw the hive shrinking below. Fear prickled his antennae.

But then, he thought of Penelope and the delicious honey they could make. He focused on the top of the thistle, a tiny purple dot in the distance.

He flew on, one wing beat at a time. He rested on fluffy clouds of milkweed seeds, took tiny sips of dew, and told himself, "Just a little further, Barnaby. Just a little further."

Finally, after what seemed like forever, he reached the top of the thistle. There, bathed in sunshine, was the Queen Clover, her petals glistening with sweet nectar. Barnaby carefully collected the precious liquid into his pollen baskets.

The journey back was easier. He was filled with a sense of accomplishment, and the fear had almost completely vanished. He even managed to do a little wiggle in the air, just for fun!

When Barnaby landed at the hive, he was greeted with cheers. Penelope Petal buzzed around him, her eyes shining with gratitude. Mrs. Higgins beamed.

"Barnaby Bumble," she declared, "you are braver and stronger than you know! You not only brought us the nectar of the Queen Clover, but you also showed us that even the smallest bee can overcome their biggest fears."

From that day on, Barnaby Bumble was no longer known for being afraid of heights. He was known for his courage, his kindness, and the most delicious Queen Clover honey in all of Honeycomb Hollow. And every now and then, you might even see him doing a little loop-de-loop around the tallest sunflower.

You can find more details about the API here: https://ai.google.dev/gemini-api/docs.

In this example, a single prompt is sent, and a response is received. The response contains more than just text, but for simplicity, I defined the struct to handle only the text and printed it to the console.

I use Viper to manage environment variables, but you can test the code by replacing the API key with your own.

2. Google TTS

package api

import (
    "bytes"
    "encoding/base64"
    "encoding/json"
    "errors"
    "fmt"
    "io"
    "net/http"
    "strings"

    "github.com/spf13/viper"
)

type Voice struct {
    LanguageCodes          []string `json:"languageCodes"`
    Name                   string   `json:"name"`
    SsmlGender             Gender   `json:"ssmlGender"` // "MALE" or "FEMALE"
    NaturalSampleRateHertz int      `json:"naturalSampleRateHertz"`
}

type VoiceSelectionParam struct {
    LanguageCode string `json:"languageCode"`
    Name         string `json:"name"`
    SsmlGender   Gender `json:"ssmlGender"`
}

type VoicesResponse struct {
    Voices []Voice `json:"voices"`
}

type AudioEncoding string

type Gender string

const (
    MALE   Gender = "MALE"
    FEMALE Gender = "FEMALE"
)

const (
    LINEAR16 AudioEncoding = "LINEAR16"
    MP3      AudioEncoding = "MP3"
    OGG_OPUS AudioEncoding = "OGG_OPUS"
    MULAW    AudioEncoding = "MULAW"
    ALAW     AudioEncoding = "ALAW "
)

func convertVoiceToVoiceSelectionParam(voice Voice) (*VoiceSelectionParam, error) {
    voiceSelectionParam := new(VoiceSelectionParam)

    if voice.LanguageCodes == nil || len(voice.LanguageCodes) <= 0 {
        return nil, errors.New("Empty LanguageCodes")
    }

    voiceSelectionParam.LanguageCode = voice.LanguageCodes[0]
    voiceSelectionParam.Name = voice.Name
    voiceSelectionParam.SsmlGender = voice.SsmlGender

    return voiceSelectionParam, nil
}

func GetVoiceList(languageCode string) ([]Voice, error) {
    url := fmt.Sprintf("https://texttospeech.googleapis.com/v1/voices?languageCode=%s&key=%s", languageCode, viper.GetString("GOOGLE_CLOUD_API_KEY"))

    req, err := http.NewRequest("GET", url, nil)

    if err != nil {
        return nil, err
    }

    req.Header.Add("Content-Type", "application/json")

    res, err := http.DefaultClient.Do(req)

    if err != nil {
        return nil, err
    }

    defer res.Body.Close()

    resBody, err := io.ReadAll(res.Body)

    if err != nil {
        return nil, err
    }

    var voicesRes VoicesResponse
    err = json.Unmarshal(resBody, &voicesRes)

    if err != nil {
        return nil, err
    }

    return voicesRes.Voices, nil
}

func ConvertTextToAudio(input string, voice Voice) ([]byte, error) {
    url := fmt.Sprintf("https://texttospeech.googleapis.com/v1/text:synthesize?key=%s", viper.GetString("GOOGLE_CLOUD_API_KEY"))

    voiceSelectionParam, err := convertVoiceToVoiceSelectionParam(voice)
    if err != nil {
        return nil, err
    }

    data, err := json.Marshal(map[string]interface{}{
        "input":       map[string]string{"text": input},
        "voice":       voiceSelectionParam,
        "audioConfig": map[string]string{"audioEncoding": string(OGG_OPUS)},
    })

    if err != nil {
        return nil, err
    }

    req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))

    if err != nil {
        return nil, err
    }

    req.Header.Add("Content-Type", "application/json")

    res, err := http.DefaultClient.Do(req)

    if err != nil {
        return nil, err
    }

    defer res.Body.Close()

    body, err := io.ReadAll(res.Body)
    if err != nil {
        return nil, err
    }

    var result map[string]interface{}
    if err := json.Unmarshal(body, &result); err != nil {
        return nil, err
    }

    audioContent, ok := result["audioContent"].(string)
    if !ok {
        return nil, fmt.Errorf("No audio content found in response")
    }

    audioData, err := base64.StdEncoding.DecodeString(audioContent)
    if err != nil {
        return nil, err
    }

    return audioData, nil
}

func getFirstXVoice(voices []Voice, strToFind string, gender Gender) *Voice {
    for i, v := range voices {
        if strings.Contains(strings.ToLower(v.Name), strToFind) && v.SsmlGender == gender {
            return &voices[i]
        }
    }

    return nil
}

func GetFirstStandardVoice(voices []Voice, gender Gender) *Voice {
    return getFirstXVoice(voices, "standard", gender)
}

func GetFirstWavenetVoice(voices []Voice, gender Gender) *Voice {
    return getFirstXVoice(voices, "wavenet", gender)
}

func GetFirstNeuralVoice(voices []Voice, gender Gender) *Voice {
    return getFirstXVoice(voices, "neural", gender)
}

package main

import (
    "fmt"
    "os"

    "github.com/hsk-kr/tutorial/lib/api"
    "github.com/spf13/viper"
)

func main() {
    viper.SetConfigFile(".env")
    viper.ReadInConfig()

    voices, _ := api.GetVoiceList("en-US")
    voice := api.GetFirstWavenetVoice(voices, "MALE")
    bAudio, _ := api.ConvertTextToAudio("By the way, I am using neovim.", *voice)

    os.WriteFile("./audio.opus", bAudio, 0644)
}

After running the program, you will find the audio file in the same directory, named audio.opus.

There are three functions:

GetVoiceList – Retrieves the list of voices supported by the API.
GetFirstWavenetVoice – As of February 27, 2025, there are three types of voices: wavenet, standard, and neural. Each type includes multiple voices, but since that’s not a priority for me, I created a function to simply get the first voice of a given type.
ConvertTextToAudio – Takes text and a voice as parameters and returns the result as []byte. The function requests the audio file in OGG_OPUS format since I plan to use it in a web environment. However, you can use any supported format.

If you follow the documentation, you might notice that it lacks some important details. For example, I came across the audio_encoding parameter and wanted to check which formats were supported, but there was no direct link to that information. I think the documentation could be improved—when I searched for links to the audio encoding documentation, I found none, just plain black text. Eventually, I managed to find the document by searching manually at the top of the documentation.

3. Cloudflare R2

package api

import (
    "bytes"
    "context"
    "errors"
    "fmt"
    "time"

    "github.com/aws/aws-sdk-go-v2/aws"
    "github.com/aws/aws-sdk-go-v2/config"
    "github.com/aws/aws-sdk-go-v2/credentials"
    "github.com/aws/aws-sdk-go-v2/feature/s3/manager"
    "github.com/aws/aws-sdk-go-v2/service/s3"
    "github.com/google/uuid"
    "github.com/spf13/viper"
)

type Storage struct {
    client     *s3.Client
    uploader   *manager.Uploader
    bucketName string
}

func (s *Storage) Init() error {
    cfg, err := config.LoadDefaultConfig(context.TODO(),
        config.WithCredentialsProvider(credentials.NewStaticCredentialsProvider(viper.GetString("CLOUDFLARE_R2_ACCESS_KEY_ID"), viper.GetString("CLOUDFLARE_R2_SECRET_ACCESS_KEY"), "")),
        config.WithRegion("auto"),
    )
    if err != nil {
        return err
    }

    s.bucketName = viper.GetString("CLOUDFLARE_R2_BUCKET_NAME")
    s.client = s3.NewFromConfig(cfg, func(o *s3.Options) {
        o.BaseEndpoint = aws.String(fmt.Sprintf("https://%s.r2.cloudflarestorage.com", viper.GetString("CLOUDFLARE_R2_ACCOUNT_ID")))
    })

    s.uploader = manager.NewUploader(s.client)
    return nil
}

func (s *Storage) Put(data []byte) (string, error) {
    if s.client == nil {
        return "", errors.New("client is nil")
    }

    objectKey, err := uuid.NewUUID()
    if err != nil {
        return "", err
    }

    bucket := aws.String(s.bucketName)
    key := aws.String(objectKey.String())
    ctx := context.Background()

    input := &s3.PutObjectInput{
        Bucket: bucket,
        Key:    key,
        Body:   bytes.NewReader(data),
    }
    output, err := s.uploader.Upload(ctx, input)
    if err != nil {
        return "", err
    }

    err = s3.NewObjectExistsWaiter(s.client).Wait(ctx, &s3.HeadObjectInput{
        Bucket: bucket,
        Key:    key,
    }, time.Minute)

    if err != nil {
        return "", err
    }

    return *output.Key, nil
}

package main

import (
    "github.com/tutorial/justsayit/lib/api"
    "github.com/spf13/viper"
)

func main() {
    viper.SetConfigFile(".env")
    viper.ReadInConfig()

    voices, _ := api.GetVoiceList("en-US")
    voice := api.GetFirstWavenetVoice(voices, "MALE")
    bAudio, _ := api.ConvertTextToAudio("By the way, I am using neovim.", *voice)

    storage := new(api.Storage)

    storage.Init()
    storage.Put(bAudio)
}

Cloudflare R2 is comparable to Amazon S3, so you can use its API with the AWS S3 library.

You can find more examples in the AWS documentation, https://docs.aws.amazon.com/code-library/latest/ug/go_2_s3_code_examples.html.

Since creating some instances is required before uploading an object to the cloud, I defined the necessary methods in a struct.

After running the program, you should see the object successfully uploaded to Cloudflare.

To test whether the audio file loads correctly in a web environment, I placed the object URL in an tag—but it didn’t work. It turns out that even though I had set the file to be publicly accessible, I still needed to use a proxy to access it. This makes sense from a security perspective, as access must be explicitly allowed in the settings.

If you want to access the files temporarily for testing purposes, you can enable dev mode and use the dev link.

4. Final Code

package main

import (
    "github.com/tutorial/justsayit/lib/api"
    "github.com/spf13/viper"
)

func main() {
    viper.SetConfigFile(".env")
    viper.ReadInConfig()

    promptResult, _ := api.Prompt("Say something short in German")
    generatedText := promptResult.Candidates[0].Content.Parts[0].Text

    voices, _ := api.GetVoiceList("de-DE")
    voice := api.GetFirstWavenetVoice(voices, "MALE")
    bAudio, _ := api.ConvertTextToAudio(generatedText, *voice)

    storage := new(api.Storage)
    storage.Init()
    storage.Put(bAudio)
}

Here is the final code: generating text using Google Gemini, converting the text into an audio file, and storing the audio file in a cloud platform.

I hope you find this helpful.

Happy Coding!

2024 Reflection: Moving Abroad & 2025 Goals

SeongKuk Han — Thu, 30 Jan 2025 02:55:10 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

2024 Summary

Before sharing my plans for the new year, I want to reflect on what happened in 2024. It was one of the biggest years of my life.

In 2023, I moved to Germany without knowing anyone, without speaking the language, and without any preparation. Luckily, I had an interview, got an offer, and moved to Vienna.

2024 January - February

I completed the visa process and was ready to start my first day at the company. Unfortunately, they canceled my contract due to budget issues. I never got to start working and had to return to my home country.

2024 March - April

I couldn't believe what had happened to me. As soon as I got on the plane, I started thinking about what I could do in my situation. From day one, I watched motivational videos for hours every day to stay motivated, played English videos every night before bed, solved three leetcode problems daily, worked on side projects, and researched ways to move abroad.

I have to do what I want to do. I didn't want to believe the fact that I went back without any achievements. One month later, I found out that I could get a UK working holiday visa within a month due to policy changes that year. I applied the next day, received the visa in three weeks, and moved to London.

2024 May - July

It was my first time in an English-speaking country, but I didn't have time to explore or adjust to life here. I jumped straight into work from day one. I applied for jobs, prepared for interviews, looked for people who could help me, made connections on LinkedIn, attended coding-related meetups, worked on side projects, solved leetcode problems, kept updating my resume, joined a coding boot camp, and did everything I thought would help me get a job.

I only had enough money to survive for a maximum of three months, so I had to make it within that time. A whole new culture, loneliness, pressure—so many emotions mixed together every day. But I had to keep going.

2024 July - September

After sending around 200 applications, I had a few interviews, but I finally got my first job in Cambridge. I only had a few hundred pounds left, so if I hadn't gotten a chance, I would have had to give up.

Everyone at the company was friendly and welcoming. I also got to work on a project using React, which I was already familiar with. I was impressed by how stable the company's work culture was.

2024 September -

Everything went well. Even though I didn't understand them well due to my English proficiency, They patiently helped me adjust to my role.

However, life in Cambridge was quite different from what I had expected. A couple of months later, I decided to move back to London. Another month later, I found my current role.

My colleagues here are humorous, friendly, talented, and passionate. There is so much to learn from them, both as a person and as a developer. I am very happy with where I am now.

New Year Plans

Improve Language Skills
Exercise Regularly
Be More Confident And Positive
Explore New Skills
Contribute to the Developer Community
See Programming as a Joy, Not Just Work

1. Improve Language Skills

I struggle with English at the moment, but I know I will improve over time. Besides English, I have recently started learning Portuguese and German.

There was a moment when I felt my English proficiency had improved significantly overnight. It happened when I was learning German intensively. I was thinking in English and speaking without much hesitation, although my vocabulary was still limited. However, as soon as I stopped learning German, my English proficiency seemed to disappear in just a day.

I haven't learned how brain works, but based on my experience, learning other languages seem to help improve my English as well. Even if it doesn't directly boost my English, learning a new language teaches us a lot in the beginning because we start from nothing. I believe it is beneficial in many ways, and I love that.

My language goals for this year are:

English: B2-C1
German: A2-B1
Portuguese: A2

2. Exercise Regularly

To stay consistent with any activity, stamina is really important. In general, health is one of the most important aspects of our lives. It's not just about physical fitness—it also plays a big role in mental well-being.

I have been bouldering since last year, usually once a week. Now, I am trying to go at least twice a week, similar to how people go to the gym. It is a fun activity and also gives me more energy.

I am currently climbing at the V4 level, and my goal this year is to reach V5.

3. Be More Confident And Positive

I tend to overthink. I ruminate on small things I’ve done, replaying them over and over again. This affects my confidence and also my ability to communicate, creating a cycle of negative effects.

That said, I do talk a lot and usually don’t hesitate to speak with people—unless I’m in certain situations, like a business setting, an interview, or something similar.

I will try to think more positively so that I can build my confidence. I believe that improving my language skills and getting used to the culture here will help a lot.

I will keep reminding myself to stay positive.

'Nobody cares as much as we do, so we shouldn't waste our time on things that will never impact our lives.'

4. Explore New Skills

I used to stick to what I already knew. I wasn’t like this at the beginning of my career. Over time, I gradually found myself focusing only on frontend. I felt like I had to.

However, since joining my company, I’ve had opportunities to work and collaborate in different areas, not just frontend frameworks. My team lead, Pablo—who has been using Emacs and Vim for over ten years—introduced me to several tools.

Neovim isn’t a tool that does everything for you. You have to configure it yourself, but once you do, it creates the best environment for you. Since I started using Vim, I’ve gotten used to constantly tinkering with things.

Now, I no longer feel the need to limit myself to just one technology. I have a strong desire to explore other areas—debugging, backend development, DevOps, creating Neovim plugins and CLI tools, and more. There are so many things I want to try.

This year, I plan to create a personal Neovim plugin for myself, a CLI tool with Go to automate installing the tools I need for development, and a web service.

5. Contribute to the Developer Community

This is one of the reasons I wanted to move abroad—I want to make an impact on the developer community, even if it's small. By ‘developer community,’ I mean places like Dev.to, GitHub, LinkedIn, YouTube, and anywhere I can contribute and connect with other developers.

I plan to keep writing at least one post a month, and I’m also considering creating a YouTube channel to share my thoughts. At first, I hesitated. I’m not fluent in English, I don’t have an impressive career, and I don’t see myself as someone special. However, since I started this blog, I’ve received comments and messages from people who appreciated what I shared, and that motivated me to keep going.

I realized that it doesn’t matter how much we have—we can help each other right now. We just need to take the first step. I get inspired by many developers online, and I want to be one of those people who inspire others.

6. See Programming as a Joy, Not Just Work

One of the things I like about programming is that we can enjoy our work. But if we see it only as work, it can become very stressful. We work during the day, and after work, we need to keep learning to stay relevant—otherwise, we risk losing our value in this rapidly changing industry.

I want to see programming as a joy, not just a job. I enjoyed coding, and that’s why I decided to become a software developer. A good salary, being a “10x developer,” or being better than others—none of those were my main goals. Programming is my hobby, something I genuinely enjoy.

It’s like watching YouTube videos and getting paid for it—something you love, but it also happens to be your job. Along the way, I won’t take shortcuts or necessarily follow the best path, but I’ll go at my own pace and enjoy the journey.

Wrap Up

Thanks to Dev.to for giving me the opportunity to reflect on what I’ve done and visualize what I want to achieve this year. I hope to stick with them well, and, by the end of the year, I will look back and see this as a turning point in my life.

Let’s turn our plans into reality this year.

Fighting! (A Korean way to cheer and encourage others!)

Using Vim Navigation (h, j, k, l) as Arrow Keys on Mac with Karabiner-Elements

SeongKuk Han — Fri, 27 Dec 2024 18:27:35 +0000

It’s been six months since I switched to neovim from vscode, and a year since I started using Vim motions. I don’t mind using function keys or the escape key because they’re easy to reach if I flatten my hands. However, pressing the arrow keys requires lowering my right hand, which I found bothersome.

Recently, I was talking to a colleague who uses a split keyboard, and his setup was fascinating. One feature that caught my attention was the ability to remap keys dynamically while holding down a specific key.

He mentioned that I could achieve this using Karabiner Elements on a regular keyboard. While I’ve been using Karabiner Elements, my experience was limited to simple key remapping, like replacing one key with another or creating key combinations. Implementing the feature was surprisingly straightforward, and there’s even a predefined rule in Karabiner for using h, j, k, and l as arrow keys. I realized I’d been limiting myself by sticking to familiar setups.

Using the predefined rule worked for basic navigation with h, j, k, and l as arrow keys. However, it didn’t support modifier keys like Option, Command, or Shift, which I frequently use. After some customization, everything worked perfectly. I figured others might be looking for a similar solution, so I’m sharing my configuration here.

If you have a better way or your own setup, please share it in the comments or link to your blog post. Let’s exchange ideas!

There are just two steps to follow—copy and paste the configuration, and you’re good to go. Without further ado, let’s dive in.

Set a modifier key

To enable keys to behave differently while held down, you need to dedicate a specific key for this purpose. In my case, I chose to sacrifice the Caps Lock key. I regularly use the Shift key, and I rely on another key configured with Karabiner Elements to switch keyboard languages, so not using Caps Lock doesn’t affect me. Of course, you can choose any key that works best for you.

{
    "manipulators": [
        {
            "description": "Change caps_lock to My Hyper Key.",
            "from": { "key_code": "caps_lock" },
            "to": [{ "key_code": "right_option" }],
            "type": "basic"
        }
    ]
}

In my setup, the Caps Lock key acts as the Right Option key. While I mentioned using one key, we actually need two keys to make this work. You can assign any unused key on your keyboard for this purpose. Some might consider using a "Hyper key," which combines Ctrl, Option, Cmd, and Shift. However, this can cause conflicts with combinations like Shift+Arrow or Option+Arrow because those modifiers are already in use. For this reason, I opted for the Right Option key, but you can choose any key that suits your workflow.

Vim Arrow Keys Setup

{
    "description": "Hyper + Arrow Keys",
    "manipulators": [
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "left_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "down_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "up_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [{ "key_code": "right_arrow" }],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": "command"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": "option"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "shift"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": "shift"
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "b",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": ["shift", "option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "w",
                "modifiers": {
                    "mandatory": ["right_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": ["shift", "option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_option"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": ["shift", "left_option"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "h",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "left_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "j",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "down_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "k",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "up_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        },
        {
            "from": {
                "key_code": "l",
                "modifiers": {
                    "mandatory": ["right_option", "shift", "left_command"],
                    "optional": ["any"]
                }
            },
            "to": [
                {
                    "key_code": "right_arrow",
                    "modifiers": ["shift", "left_command"]
                }
            ],
            "type": "basic"
        }
    ]
}

There are two additional key combinations:

Caps Lock + W: Dragging + Tab Forward
Caps Lock + B: Dragging + Tab Backward

I use these combinations frequently, but if you don’t need them, feel free to remove them from the setup.

Wrap up

I hope you found this guide helpful. I’ve become quite accustomed to using these key remappings, although there’s one minor downside: the proximity of the Shift and Caps Lock keys can make things a bit uncomfortable at times. However, the two extra combinations help mitigate this issue.

That’s it! I wrote my first draft and used ChatGPT to make it sound better. I hope I can be better at writing as time goes, today. I just gave my all words to it and replaced them all.

Anyway,

Wishing you a wonderful end of the year and the best of luck for the new year!

Neovim how to ignore directories like node_modules in Telescope

SeongKuk Han — Sat, 30 Nov 2024 19:54:58 +0000

Using the file_ignore_patterns option in Telescope can significantly slow down performance.

Instead, consider installing ripgrep.

By default, ripgrep automatically excludes files inside the node_modules directory, ensuring efficient file searching without impacting performance.

You don't even need to set up anything after installing.

It is a short info. Hope some of you found it helpful.

Happy Viming!

Why Spaces Are Encoded: %20 with encodeURI and +(plus) with URL / Differences Between encodeURI and URL

SeongKuk Han — Wed, 27 Nov 2024 00:31:32 +0000

You can encode a query string either using either encodeURI or URL. Recently, I noticed that URL encodes spaces differently. I will dicuss why they handle encoding in distinct ways. Before diving into the topic, I will show you how to encode using each method.

Usage

1. encodeURI

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

You can encode a URI using the encodeURI function. However,. it doesn't encode a part of characters that are valid parts of a URI, so that you might need to use the encodeURIComponent function to properly encode query strings or the other components in the URI.

For example, let's say you have a query string q with the value
https://www.google.com/search?q=what is the meaning of &?.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

The &(ampersand) is not converted to %26 as it should be. Because &(ampersand) can be a valid part of the URI. For this reason, it's always safer to use encodeURIComponent for query strings.

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

Since encodeURIX and related functions treat URI as string, you must handle special characters like ? and & yourself. Alternatively, you can simplify the process using the URL.

2. URL

When using URL to encode, you need to separately handle the base URL and the query string.

const url = 'https://www.google.com/search?q=programming language';
// 'https://www.google.com/search?q=programming language'
url.toString();

If you encode everything at once using the URL constructor, as shown in the example above, the query sring might not be encoded properly.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'programming language');
// 'https://www.google.com/search?q=programming+language'
url.toString();

By setting the query string via searchParams property of the URL object, you can set the query string.

In this case, the space is converted to +. Before explaining why this happens, let's test it with another query string to see how it handles other special characters.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'what is the meaning of &?');
// 'https://www.google.com/search?q=what+is+the+meaning+of+%26%3F'
url.toString();

Other special characters are encoded as expected.

Now, let's dive into why these differences happen.

Encoding

1. encodeURI

The encodeURIX functions encode according to RFC2396. A URI is not just a location on the internet; it can refer to any type of resource. This is why it is called URI(Uniform Resource Identifier) rather than URL(Uniform Resource Locator).

2. URL

The URL API encodes according to RFC3986, which is a more recent URI specification.

If you need to achieve this behavior with encodeURI, refer to this. - encodeURIComponent encoding for RF3986).

The URLSearchParams encodes following the rule of the percent encoding. According to the documentation, it replaces spaces with '+'.

While I couldn't find the specification in RFC for this behavior, MDN's encodeURIComponent documentation states:

For application/x-www-form-urlencoded, spaces are to be replaced by +, so one may wish to follow a encodeURIComponent() replacement with an additional replacement of %20 with +.

This explains why spaces are replaced with '+' in URLSearchParams, as it follows the application/x-www-form-urlencoded standard.

You may have noticed that URL and URLSearchParams follow a different RFCs.

Let's see some examples.

url = new URL('http://[2001:db8::1]:8080/resource?v=key:value');
// 'http://[2001:db8::1]:8080/resource?v=key:value'
url.toString();

As shown, the URL does not encode brackets and colon, as they are part of the IPv6 address. However, the colon is not encoded as %3A even though it is a part of query string. It is different from the percent-encoding table.

It means you need to encode the URL and query string separately.

url = new URL('http://[2001:db8::1]:8080/resource');
url.searchParams.set('v', 'key:value');
// 'http://[2001:db8::1]:8080/resource?v=key%3Avalue'
url.toString();

Now, the URL and query string are encoded properly.

Conclusion

encodeURI, encodeURIComponent, URL, and URLSearchParams functions each serve a different purpose, and you should use them based on your specific needs.

encodeURI: Encodes a URI according to RFC2396. It does not encode characters that are valid parts of a URI. If you need to encode a URI according to RFC3986, refer to this MDN documentation.

encodeURIComponent: Encodes a component of a URI according to RFC2396, such as a path, fragment, or query string. It includes characters that are not encoded by encodeURI.

URL: Encodes a Web URL according to RFC3986.

URLSearchParams: Encode parameters according to the application/x-www-form-urlencoded standard.

If you need to replace the +(plus) sign with %20, you can do so manually, as shown below:

url.search = url.search.replace(/\+/g, '%20');

When working with web development, Restful APIs, or web URLs, the URL is a reliable choice. Additionally, it follows RFC3986, which is newer thanRFC2396.

I hope you found this helpful.

Happy Coding!

Forem: SeongKuk Han

Build a Voice Chat App Using AWS Chime SDK (React + Node.js)

What is the Amazon Chime SDK?

Features

Voice Room List

Voice Room

Create a Meeting

Set up Amazon

Create Amazon Resources

Meeting

Attendee

Media Pipeline

Concatenation Pipeline

Setting up the Chime SDK on the Frontend

Wrap Up

React: Building an Independent Modal with createRoot

React: How to Test useState (with Examples)

2. Test Stage Changes With Name

Why window is used to store the history

React Drag and Drop Example: Moving a Square to Different Areas (Desktop Only)

Implementation

types.ts

- DragNDropKeyValuePair: A single type from DragNDropKeyValueSet

context.tsx

Drag.tsx

Drop.tsx

useDnd.tsx

Usage

types.ts

Shape.tsx

StartPoint.tsx

DropArea.tsx

Bin.tsx

App.tsx

Conclusion

Sharing Types and Values Across Frontend and Backend Using a PNPM Monorepo (React + NestJS)

1. Setup Shared

1-1. Set up Project

1-2. Set up Monorepo

1-3. Create Shared Package

1.4. Define Types and Values

2. Setup Backend

2-1. Set Up Backend/Nestjs Package

2-2. Reinstall Dependencies

2-3. Add Shared Package

2-4. Add getLanguages Endpoint

2-5. Enable CORS

3. Setup Frontend

3-1. Set Up React Package

3-2. Install dependences and Add Shared Package

. 3-3. Write App

4. Test

Backend

5. Compile Shared

5-1. Set up Typescript

5-2. Create index.ts

5-3. Set Up Bundler tsup

5-3. Update package.json

5-4. Update import paths

6. Result

Conclusion

Show Maintenance Page with Nginx - (Web + Nginx + Docker)

Web Service

Nginx

maintenance.html

nginx.conf

But if there is a file /nginx-data/maintenance.flag, it will return 503, which shows our maintenance page.

Docker

Result

Conclusion

Mac Dev Environment Automation: From Reset to Ready in 5 Minutes

Preview

How it works

Deployment

Wrap Up

Go Simple Example: Generate Audio Stories with Google Gemini, TTS, and Cloudflare R2

1.Google Gemini

2. Google TTS

3. Cloudflare R2

4. Final Code

Why `window` is used to store the history

- `DragNDropKeyValuePair`: A single type from `DragNDropKeyValueSet`

2-4. Add `getLanguages` Endpoint

But if there is a file `/nginx-data/maintenance.flag`, it will return 503, which shows our maintenance page.