404

We analyze how useEffectEvent solves Stale Closures by examining React's internal implementation, and explore how React Compiler's fire() aims to automate this further.

Looking back on my 4.5 years at Remember, thoughts on my experience as a Tech Lead and personal growth, changing jobs, presenting at FEConf, and working with film.

Implementing conditional styling with the newly added CSS if() function, and a walkthrough of building logic gates purely in CSS.

Recently, I've had to make a lot of decisions. I'm the type who can't make quick judgments because I overthink things. So I'm somewhat weak at making split-second decisions, and to train myself, I'm organizing my decision-making process.

Let's explore the origins, proposal process, and implementation of Promise.try(). When I first heard that Promise.try() had been standardized, I examined it but couldn't immediately grasp its purpose. It must have been created for some specific reason... Even if it wasn't a groundbreaking feature, there had to be a story behind such a small addition. Even if it's not a remarkable tale. Today, let's become archaeologists and explore its origins, proposal process, and implementation together.

The first day in Oslo

An exploration of the mathematical beauty of ellipses and the geometric properties of cylindrical cross-sections through Dandelin spheres. This post captures a journey that began with high school curiosity about calculating ellipse perimeters and develops into an intuitive understanding through 3D visualization.

Sharing the experience of encountering an issue where React DevTools highlights and inspectors don't display correctly when using TopLayer (dialog, popover API), and contributing directly to the React open source project to fix it.

Preparing for a trip to Svalbard...

Norsk er et veldig vanskelig språk.

The last day of 2024

On a sweltering day in Shape Land, 'Semo' the developer is a coding prodigy who shouted 'hello world' before 'mom and dad' at age four. Semo grew up to become a core developer in Shape Land, renowned for writing code as effortlessly as mental arithmetic.

Proxy and Reflect are features added in ES6. Proxy provides functionality to intercept the basic operations of an object, while Reflect provides methods that replicate these basic operations. Let's explore through examples.

Let's explore the SSA transformation in React Compiler. SSA stands for Static Single Assignment, which is one of the intermediate representations used for optimization. SSA has the characteristic of restricting variables to be assigned only once. The core of the SSA transformation algorithm is deciding where to place phi functions. What algorithm does React Compiler use?

Let's explore the Lowering process of React Compiler. We'll examine how it converts AST to HIR, how it handles hoisting during this process, and why it's done this way.

Let's take a deep dive into useMemoCache, one of the key components of React Compiler. We'll explore the operating principles of useMemoCache, examine its implementation, and learn about the experimental feature enableNoCloningMemoCache.

We aim to deeply explore the React Compiler. Let's start by examining the compiler's entry point through the Babel plugin.

I was going to write about my time in San Francisco and San Jose first, but before I knew it, I'd already made it to Vegas. Las Vegas -- the original destination, where React Conf 2024 was being held. Since it was the first one in three years, there were a lot of attendees. The resort was quite far from the airport, so I decided to find people to share a ride with on the conference Discord.

It's already day three. Sunday has ended back in Korea, but here it's only around 10 AM on Sunday morning. I wanted to jot down notes every night before bed, but between battling jet lag, sorting through footage, and finally unwinding with a shower, I kept falling asleep.

I didn't expect to have Wi-Fi somewhere over the Pacific at 33,000 feet. All those YouTube videos I'd saved offline turned out to be pointless. I'm writing this to leave at least one commit while in flight.

Today is departure day. I'm heading to the US for React Conf. I successfully merged a PR and deployed yesterday, so my head feels light -- but my heart feels heavy, wondering if something might go wrong. I rarely take time off unless there's a big event, so this is my first PTO of the year. I tend to have serious FOMO, so I'm worried about missing something. But I suppose being able to step away from work and recharge is also part of being an effective developer...

React has hooks related to forms such as form action, useFormState, and useFormStatus. I want to explore how these hooks work. useActionState is a hook for handling asynchronous actions. I was looking at useFormState, but it has been renamed to useActionState.

What is a form, really? If someone asked you that question, how would you answer? According to Hypertext Markup Language - 2.0, a form is defined as follows: A form is a template for a form data set and an associated method and action URI.

The video at the top shows Elon Musk discussing SpaceX's Starship plans — building six boosters and Starships this year, and constructing four 'Mechazilla' launch towers capable of catching rockets mid-air by next year.

The first quarter flew by incredibly fast. #Exercise I took a break from F45, which I'd been attending since January last year. I was never the type to enjoy working out, so I always needed some form of structured accountability.

We face problems and work to solve them. When you constantly deal with 'problems,' it's easy to become surrounded by negativity. Negative emotions contaminate those around you far too easily. Let's be someone who radiates positivity.

You may not have heard of `text-wrap: balance` yet, but as you can see from the Google documentation above, it is a CSS property belonging to [CSS Text Level 4](https://www.w3.org/TR/css-text-4/#text-wrap), supported since Chrome 114.

A supplementary summary from a presentation covering React.HTMLAttributes<HTMLButtonElement>, React.HTMLProps<HTMLButtonElement>, JSX.IntrinsicElements['button'], React.ButtonHTMLAttributes<HTMLButtonElement>, and more.

It all started with a curiosity about regular expressions. I had been using them without much thought, until I wondered -- what exactly are they, and why are they universally supported across so many programming languages?

I loved the Midjourney landing page so much that I looked into what library they used. That led me to a cloning video. Since the code wasn't that complex, I decided to clone it myself. I extracted the transform logic into a pipeline-style architecture, then wrapped it all up as a Lit element.

While visiting home during the Lunar New Year holiday, I found a book I had bought around my sophomore year of high school. The Korean edition is titled 'How to Solve It - Methods of Mathematical Thinking.' As I recall, I stumbled upon it on the Kyowoo-sa publisher's website while trying to buy a Calculus violin book.

In the previous post, we explored how a cancelToken gets subscribed when passed into a request's config. This time, let's look at the CancelToken implementation and how cancellation actually happens.

How to cancel an Axios request. You can cancel a request by passing a cancelToken when making an axios call. But where does that cancelToken actually flow to?

There's an overnight service maintenance scheduled for tomorrow (Saturday), so I'll be spending the early hours at the office. I'm debating whether to sleep now to adjust my rhythm. But I should sleep. Otherwise I won't be able to work tomorrow. I created this blog partly to share what I study, but also because...

There's a Mom's Touch near my place, and at some point I heard that their Spicy Gim-Tteok-Man (seaweed rice cake combo) was really good. What does it taste like? Does it have chili sauce? Or is it just generically spicy? Every time I walked past it on my commute, I'd think 'I should try it today,' but I kept missing my chance.

Despite the title, this isn't actually about using the real styled-components library. I came across someone working on a project called dream-css-tool — an attempt to make styled-like syntax work in server components. Let's start by looking at how it's used.

There's a fish-shaped bread cart near my place that sells them for 1,000 won each. Let me organize the component I made the other day. It started as a Lit component wrapping YouTube embeds, taking two properties: src for the YouTube link and caption for the caption text.

Far away between Norway and the North Pole, there lies the Svalbard archipelago. I've made a commitment to visit there someday. I really love snowy days. They feel like a white canvas, and look so clean from a distance. I've often imagined days where the snow is knee-deep, making it difficult to walk, but I haven't experienced such days yet. That's probably because I haven't been to such a place.

I heard that [Astro 4.0](https://astro.build/blog/astro-4/) had been released. I figured it was a good excuse to update my blog while I was at it. Island architecture, among other things... I hadn't deeply evaluated Astro's strengths before choosing it.

Mybridge filled my entire first half and much of my second half of the year. Mybridge is the Japanese version of Remember, a business card management service operating in Japan. As I entered my second year at Remember, a new organization called the New Business Crew was formed at the start of 2023, and work began on monetizing Mybridge -- which had been running as a free service in Japan -- with a target launch in early June.

Elements rendered above all other elements. Supported elements: `<dialog>`, popover attribute `<div popover=auto>`. The goal is to make these elements animatable.