Forem: Brandon Wie

Understanding Garbage Collection in JavaScript and Beyond

Brandon Wie — Mon, 27 Jan 2025 13:27:33 +0000

Recently, I had a tech interview where I was asked about how different programming languages handle garbage collection. It was a surprising yet refreshing question that really piqued my interest—I’d never encountered such a deep dive into memory management during an interview before. I loved the question and wanted to explore the topic further in a blog post.

Efficient memory management is crucial for high-performing applications. Garbage collection (GC) ensures that unused memory is reclaimed automatically, preventing memory leaks and crashes. In this post, we will focus on how garbage collection works in JavaScript, explore other approaches used in programming languages, and provide examples to clarify the concepts.

What is Garbage Collection?

Garbage collection is the process of reclaiming memory occupied by objects no longer in use. Languages with automatic garbage collection abstract this process, freeing developers from manually managing memory. JavaScript, for example, uses a tracing garbage collector, while other languages use different techniques.

Garbage Collection in JavaScript

JavaScript relies on a tracing garbage collection approach, specifically the Mark-and-Sweep algorithm. Let’s break it down:

1. Mark-and-Sweep Algorithm

This algorithm determines which objects in memory are "reachable" and deallocates those that are not:

Mark Phase:
- Starts from "root" objects (e.g., window in browsers or global in Node.js).
- Traverses all objects accessible from these roots, marking them as "alive."
Sweep Phase:
- Scans the heap and deallocates objects that are not marked as reachable.

Example:

function example() {
  let obj = { key: "value" }; // obj is reachable
  let anotherObj = obj; // another reference to obj

  anotherObj = null; // reference count decreases
  obj = null; // reference count decreases to 0
  // obj is now unreachable and will be garbage collected
}

2. Generational Garbage Collection

Modern JavaScript engines (e.g., V8 in Chrome/Node.js) optimize garbage collection using generational GC. Memory is divided into:

Young Generation: Short-lived objects, like function-scoped variables, are stored here and collected frequently.
Old Generation: Long-lived objects, like global variables, are stored here and collected less frequently.

Why Generational GC is Efficient:

Most objects in JavaScript are short-lived and can be quickly collected.
Long-lived objects are moved to the old generation, reducing the need for frequent scanning.

Other Garbage Collection Strategies

Let’s explore how other languages handle garbage collection:

1. Reference Counting

Reference counting keeps track of how many references point to an object. When the reference count drops to 0, the object is deallocated.

Pros:

Simple and immediate reclamation of memory.
Predictable behavior.

Cons:

Circular References: If two objects reference each other, their counts will never reach 0.

Example: (Python reference counting)

a = []
b = []
a.append(b)
b.append(a)
# These objects reference each other but are unreachable; modern Python’s cycle collector handles this.

2. Manual Memory Management

Languages like C and C++ require developers to explicitly allocate and free memory.

Example: (C memory management)

#include <stdlib.h>

int *ptr = (int *)malloc(sizeof(int)); // Allocate memory
*ptr = 42; // Use memory
free(ptr); // Free memory

Pros:

Full control over memory usage.

Cons:

Prone to memory leaks (forgetting to free memory) and dangling pointers (freeing memory too early).

3. Tracing with Cycle Collectors

Some languages (e.g., Python) combine reference counting with cycle detection to handle circular references.

A cycle collector periodically scans objects to detect cycles (groups of mutually referencing objects not reachable from the root). Once a cycle is found, the collector breaks it and reclaims the memory.
Cycle collectors solve the biggest drawback of pure reference counting (circular references). They add extra overhead but ensure no memory is leaked due to cycles.

4. Rust’s Borrow Checker (No GC)

Rust takes a different approach, avoiding garbage collection entirely. Instead, Rust enforces strict ownership rules via the borrow checker:

Ownership: Each value has a single owner at a time.
Borrowing: You can borrow references (immutable or mutable), but only one mutable reference is allowed at a time to prevent *data races.
Lifetimes: The compiler infers when values go out of scope, automatically freeing memory.

This system ensures memory safety without the need for a traditional GC, giving Rust the performance benefits of manual memory management while helping avoid common errors like dangling pointers.

TMI. #DataRaces occur in concurrent or parallel programming when two or more threads (or processes) access the same memory location at the same time without proper synchronization, and at least one of them writes to that location. Because there’s no mechanism (like a lock or atomic operation) to coordinate these concurrent accesses, the final state of the shared data can be unpredictable and inconsistent—leading to hard-to-find bugs.

Comparison of Garbage Collection Strategies

Method	Languages	Pros	Cons
Reference Counting	Early Python, Objective-C	Immediate reclamation, simple to implement	Fails with circular references
Tracing (Mark-and-Sweep)	JavaScript, Java	Handles circular references, efficient for large heaps	Stop-the-world pauses
Generational GC	JavaScript, Java	Optimized for short-lived objects	More complex to implement
Manual Management	C, C++	Full control	Error-prone, requires careful handling
Hybrid (Ref + Cycles)	Modern Python	Best of both worlds	Still needs periodic cycle detection
Borrow Checker	Rust	Eliminates need for GC, prevents data races	Steeper learning curve, ownership rules

How JavaScript Handles Common Scenarios

Circular References

JavaScript’s tracing garbage collector handles circular references gracefully:

function circularExample() {
  let obj1 = {};
  let obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1;

  obj1 = null;
  obj2 = null; // Both objects become unreachable and are collected
}

Event Listeners and Closures

Event listeners can unintentionally create memory leaks if not properly cleaned up:

const button = document.getElementById("myButton");

function handleClick() {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

// If the button is removed from the DOM but the event listener is not removed:
// The closure keeps `handleClick` alive, causing a memory leak.
button.removeEventListener("click", handleClick); // Proper cleanup

Takeaway Points

JavaScript uses a tracing garbage collector with a Mark-and-Sweep algorithm to manage memory automatically.
Generational GC optimizes performance by focusing on short-lived objects.
Other languages use different strategies:
- Reference Counting: Simple but prone to circular references.
- Manual Management: Full control but error-prone.
- Hybrid Approaches: Combine strategies for better performance.
- Rust’s Borrow Checker: No GC, but strict ownership rules.
Be mindful of potential memory leaks in JavaScript, especially with closures and event listeners.

It was such a great opportunity to look into the strategies that languages use for garbage collection. I think understanding how garbage collection works not only helps you write efficient code, but also allows you to debug memory-related issues effectively.

References

CORS in Spring Boot with Kotlin

Brandon Wie — Thu, 19 Dec 2024 05:35:59 +0000

Cross-Origin Resource Sharing (CORS) is a crucial aspect of web security that allows or restricts resources on a web server depending on where the request is coming from. We’ll explore how CORS works, its implications, and how to configure it in Spring Boot with Kotlin.

Understanding Headers Related to CORS

CORS relies on specific HTTP headers to control resource sharing between different origins. Here are the most important ones:

Request Headers:
- Origin: Indicates the origin (protocol + domain + port) from where the request originates. Example:
```
 Origin: http://localhost:3000
```
Response Headers:
- Access-Control-Allow-Origin: Specifies the allowed origin(s) for the requested resource. If set to *, it allows all origins.
```
 Access-Control-Allow-Origin: http://localhost:3000
```

Access-Control-Allow-Methods:
Lists the allowed HTTP methods for cross-origin requests (e.g., GET, POST, PUT).
```
 Access-Control-Allow-Methods: GET, POST, PUT, DELETE
```
Access-Control-Allow-Headers:
Specifies the allowed headers for requests, such as Authorization or Content-Type.
```
 Access-Control-Allow-Headers: Authorization, Content-Type
```
Access-Control-Allow-Credentials:
Allows cookies and other credentials to be included in cross-origin requests. Must be set to true explicitly.
```
 Access-Control-Allow-Credentials: true
```

Preflight Requests:
- Browsers send an additional OPTIONS request to verify whether the actual request is permitted. The server responds with the necessary CORS headers.

Why Does CORS Affect Browsers but Not Mobile Apps?

CORS is a browser-enforced security mechanism. Here’s why:

Web Security Model:
- Browsers implement the same-origin policy, which restricts scripts on one origin from accessing resources on another origin.
- CORS headers allow servers to relax these restrictions for specific origins.
Mobile and Other Clients:
- Non-browser clients like mobile apps, Postman, or cURL do not enforce the same-origin policy. They directly send HTTP requests without validating CORS headers.
- This is why CORS is primarily a browser-related concern.
Implications:
- While CORS protects users from malicious cross-origin scripts, backend APIs still need proper authentication and authorization mechanisms to secure data.

How to Set Up CORS in Spring Boot with Kotlin

In Spring Boot, you can configure CORS globally or at the controller level. Here’s an example of setting it up in Kotlin:

Global Configuration with `@Bean`

The following Kotlin code configures CORS for all endpoints:

import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.web.cors.CorsConfiguration
import org.springframework.web.cors.UrlBasedCorsConfigurationSource
import org.springframework.web.filter.CorsFilter

@Configuration
class CorsConfig {

    @Bean
    fun corsConfigurationSource(): UrlBasedCorsConfigurationSource {
        val configuration = CorsConfiguration()

        // Allow requests from specific origins
        configuration.allowedOrigins = listOf("http://localhost:3000") // Replace with specific origin for production

        // Allow credentials (cookies, authorization headers, etc.)
        configuration.allowCredentials = true

        // Allow specific HTTP methods
        configuration.allowedMethods = listOf("GET", "POST", "PUT", "DELETE", "OPTIONS")

        // Allow specific headers
        configuration.allowedHeaders = listOf("Authorization", "Content-Type")

        // Apply CORS settings to all paths
        val source = UrlBasedCorsConfigurationSource()
        source.registerCorsConfiguration("/**", configuration)

        return source
    }
}

CORS with Controller-Level Annotations

You can also configure CORS for specific controllers or endpoints:

import org.springframework.web.bind.annotation.CrossOrigin
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class ExampleController {

    @CrossOrigin(origins = ["http://localhost:3000"], allowCredentials = "true")
    @GetMapping("/example")
    fun exampleEndpoint(): String {
        return "CORS Configured!"
    }
}

What Is Affected by `allowCredentials`?

Impacts of `allowCredentials`

The allowCredentials setting controls whether browser-managed credentials, such as cookies, are included in cross-origin requests:

Cookies:
- When allowCredentials = true, cookies (e.g., session tokens) are sent automatically with the request if the client sets withCredentials: true.
- If allowCredentials = false, cookies are not included in the request, even if the client specifies withCredentials: true.
TLS Client Certificates:
- allowCredentials enables the inclusion of TLS client certificates in cross-origin requests.
Basic Authentication Headers:
- Automatically included in requests when allowCredentials = true and the request requires Basic Authentication.

What Is NOT Affected by `allowCredentials`?

The allowCredentials setting does not affect manually added headers like the Authorization header used for Bearer tokens:

Authorization Header:
- Bearer tokens included in the Authorization header are manually set by the client and are unaffected by allowCredentials.
- Example:
```
 axios.get("https://api.example.com/data", {
     headers: {
         Authorization: `Bearer ${token}`
     }
 });
```
Custom Headers:
- Any headers explicitly added to the request (e.g., X-Custom-Header) are unaffected by allowCredentials.

Why Authorization Is Unaffected

The browser’s role in enforcing CORS focuses on automatically managing credentials, such as cookies and certificates. Headers explicitly added by the client are outside the scope of browser-enforced CORS rules, so they are unaffected by allowCredentials.

Best Practices for CORS Configuration

Specific Origins:
- Avoid using * for allowedOrigins if allowCredentials = true. The CORS specification disallows this combination.
- Example:
```
 configuration.allowedOrigins = listOf("http://localhost:3000")
 configuration.allowCredentials = true
```
Credentials:
- If your application relies on cookies or other credentials, ensure allowCredentials = true and configure Access-Control-Allow-Credentials on the server.
- Cookies will only work if the client sets withCredentials: true (e.g., in Axios).
Preflight Requests:
- Handle OPTIONS requests by including appropriate headers in your CORS configuration.
Avoid Wildcards in Production:
- Using * for allowedMethods and allowedHeaders is acceptable for development but should be replaced with specific values in production.
Security First:
- CORS headers are not a substitute for authentication and authorization. Ensure proper security mechanisms are in place on the backend.

Takeaway

CORS is a browser-enforced security feature that allows or restricts cross-origin resource sharing.
CORS does not affect mobile apps and non-browser clients, but backend APIs should still use authentication.
In Spring Boot with Kotlin, you can configure CORS globally or at the controller level.
Follow best practices, like setting specific origins and ensuring compatibility between allowCredentials and allowedOrigins, to avoid security issues.

By understanding and properly configuring CORS, you can build secure and flexible web applications that seamlessly handle cross-origin requests.

References

Understanding the NestJS Logger: Format Specifiers and Logging Best Practices

Brandon Wie — Wed, 07 Aug 2024 11:34:02 +0000

NestJS is a powerful framework for building scalable server-side applications, and its built-in logging module is an essential tool for monitoring and debugging. While working with the @nestjs/common logger, you might wonder about its capabilities, particularly whether it supports format specifiers like %s and %d in the same way console.log does.

In this blog post, we'll explore the @nestjs/common logger, its support for format specifiers, and some best practices for effective logging in your NestJS applications.

The Basics of NestJS Logger

NestJS provides a built-in logging module that comes with various methods like log, error, warn, debug, and verbose. These methods allow developers to log messages at different levels of severity. Here’s a simple example of using the NestJS logger:

import { Logger } from '@nestjs/common';

class AppService {
  private readonly logger = new Logger(AppService.name);

  getHello(): string {
    this.logger.log('Hello World!');
    return 'Hello World!';
  }
}

Support for Format Specifiers

Through practical testing, it has been confirmed that the @nestjs/common logger supports format specifiers such as %s, %d, and more. This feature can be extremely useful for creating formatted log messages. Here are some examples:

this.logger.warn('%s is deprecated', 'activity'); // Logs: activity is deprecated
this.logger.error('%d errors occurred', 5); // Logs: 5 errors occurred

Limitations and Best Practices

While the NestJS logger supports format specifiers, it does not support logging a string followed by an object as parameters directly. Here are some examples to illustrate what is supported and what isn't:

Supported:

this.logger.error('%s', 'test'); // Logs: test
this.logger.error({ test: 'test' }); // Logs: { test: 'test' }
this.logger.error(`test: ${{ test: 'test' }}`); // Logs: test: [object Object]

Not Supported:

this.logger.error('test', { test: 'tester' }); // This will not log the object properly

Recommendations for Effective Logging

Use Template Literals for Complex Logs: When you need to include variables or objects in your logs, use template literals for clarity and readability.
```
const user = { id: 1, name: 'John' };
this.logger.log(`User logged in: ${JSON.stringify(user)}`);
```
Log Levels: Use appropriate log levels (log, warn, error, debug, verbose) to categorize your logs based on their importance.
Structured Logging: For more complex logging needs, consider using structured logging with JSON. This can be especially useful for logging services like Elasticsearch, Logstash, and Kibana (ELK stack).

External Libraries: For advanced logging features, consider integrating with libraries like nestjs-pino which supports JSON logging and has better performance characteristics.

import { LoggerModule } from 'nestjs-pino';

@Module({
  imports: [
    LoggerModule.forRoot(),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Conclusion

The @nestjs/common logger is a robust tool that supports format specifiers, making it easier to format your log messages. However, it has some limitations when it comes to logging objects directly with string messages. By understanding these capabilities and adopting best practices, you can enhance your logging strategy and make your NestJS applications more maintainable and easier to debug.

References

How Reactivity in Vue and Svelte are different?

Brandon Wie — Thu, 25 Jul 2024 11:26:13 +0000

Vue and Svelte indeed have different approaches to reactivity. Here's a refined explanation of their key differences:

Vue's Reactivity:

Uses a proxy-based reactivity system (in Vue 3) or getter/setter-based system (in Vue 2). Requires special APIs like ref() or reactive() to make data reactive. Operates at runtime, wrapping reactive objects with JavaScript Proxies (in Vue 3).

Svelte's Reactivity:

Takes a compile-time approach to reactivity.
Uses two main mechanisms for reactivity:

Assignment-based reactivity for component state.
Reactive declarations for derived values.

Key Differences:

Reactive State:

Vue: Requires ref() or reactive() to create reactive state.
Svelte: Uses regular JavaScript variables for component state.

Derived Values:

Vue: Uses computed properties or watchers.
Svelte: Uses reactive declarations with the $: label.

Update Mechanism:

Vue: Updates at runtime based on Proxy interceptions.
Svelte: Generates efficient update code at compile-time.

Let's look at examples that showcase these differences:

Vue 3:

<script setup>
import { ref, computed } from 'vue'

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
  <p>Double count: {{ doubleCount }}</p>
</template>

Svelte:

<script>
let count = 0;
$: doubleCount = count * 2;

function increment() {
  count += 1;
}
</script>

<button on:click={increment}>Count is: {count}</button>
<p>Double count: {doubleCount}</p>

In the Svelte example, note how we use:

A regular variable count for the state.
A reactive declaration $: doubleCount = count * 2 for derived values.

This $: syntax is crucial in Svelte. It tells the compiler to re-run the statement whenever its dependencies change. This is how Svelte handles computations that depend on reactive state, similar to Vue's computed properties but with a different syntax and implementation.
Svelte's approach allows for more than just simple computations. You can have complex logic in reactive declarations:

<script>
export let data;
$: wordCount = data.content.split(' ').length;
$: estimatedReadingTime = wordCount / 250;
</script>

This demonstrates how Svelte can handle derived values and side effects in a way that feels more like writing regular JavaScript, while still maintaining reactivity.

In summary, while both Vue and Svelte achieve reactivity, they do so through fundamentally different mechanisms. Vue's system is more explicit and operates at runtime, while Svelte's is more implicit and leverages compilation to achieve its reactivity.

References

*Photo by Ferenc Almasi on Unsplash

Connect VSCode and EC2 using SSH

Brandon Wie — Wed, 01 Nov 2023 00:04:41 +0000

I assume that you have VSCode installed.

1. Install an OpenSSH compatible SSH client

OS	Instructions
Windows 10 1803+ / Server 2016/2019 1803+	Install the https://learn.microsoft.com/windows-server/administration/openssh/openssh_install_firstuse.
Earlier Windows	Install https://git-scm.com/download/win.
macOS	Comes pre-installed.
Debian/Ubuntu	Run sudo apt-get install openssh-client
RHEL / Fedora / CentOS	Run sudo yum install openssh-clients

💡 If you do not have a SSH host set up, follow the directions for Linux, Windows 10 / Server (1803+), or macOS or create a VM on Azure.

2. Install `Remote - SSH` extension on VSCode

VSCode Market Place Link

3. Configure

Open command palette: cmd + shift + p
Select **Remote-SSH: Open SSH Configuration File**
Select one of your config location, I’ll just pick the first one

Update the values

Host alias-you-will-use
    HostName Public-IPv4-DNS-of-Your-EC2-instance
    User ec2-user # default user name
    IdentityFile path/to/your/pem/file

Note

💡 When you create a new EC2 instance, you create a new Key pair and the pem file will be automatically downloaded via the browser.

4. Connect

Open command palette: cmd + shift + p
Select Remote-SSH: Connect to Host
You will find the alias you set on the list
Select the alias
(I didn’t have this case but,) when it connects, there’s a chance you see a prompt to enter a passphrase for the key
1. Check out this video if it happens

5. Open File or Folder

You can click the Open Folder button on the explorer or press cmd + o to open file or folders you want to work with.

You can install other VSCode extensions in SSH.

Strategy to generate the Tokens Studio(Figma) JSON file converter for Tailwind CSS and Emotion

Brandon Wie — Thu, 05 Oct 2023 07:20:53 +0000

Prologue

My team decided to use the Tokens Studio where each style is stored as a set of token(s). You can connect to a GitHub repository, which makes it easy to push as JSON files while enjoying the benefits of version control as well.

By creating a converter for Tailwind CSS and Emotion, we had a great experience using style variables with auto-completions.

I’ve tried to find commonalities in the token structure and create a general parser for the JSON files. However, I found it to be quite challenging because it’s heavily influenced by how the token system is structured and configured. Also, the designer's preference must be considered.

Therefore, I am going to explain a general approach to the task of generating a Tokens Studio JSON file converter for Tailwind CSS and Emotion.

Basic concept with types

Here are several base types from the JSON structure I worked with:

type Typography = {
  fontFamily: string;
  fontSize: string;
  fontWeight: string;
  lineHeight: string;
};
/** box-shadow value must be an array */
type BoxShadow = {
  x: string; // number
  y: string; // number
  blur: string; // number
  spread: string; // number
  color: string; // reference to a color
  type: string;
}[];

type Value = string | Typography | BoxShadow;

// tree
export type Node = {
  [key: string]: Node | Token;
};

// last nodes of the tree
export type Token = {
  value: Value;
  type: string;
  description?: string;
};

Step 1. Flatten the object

In this case, we had two JSON files generated by Tokens Studio: global and component. The global contains values that are used as references for other fields in the global itself and for the component-specific values.

// JSON example generated by Tokens Studio
{
  "colors": {
    "deepGreen": {
      "25": {
        "value": "#F6F9F8",
        "type": "color"
      }
      // other deepGreen colors...
    }
    // other colors...
  },
  "typography": {
    "heading": {
      "h1": {
        "value": {
          "lineHeight": "130%",
          "fontWeight": "{global.fontWeight.800}",
          "fontFamily": "{global.fontFamily.KR}",
          "fontSize": "{global.fontSize.40}"
        },
        "type": "typography"
      }
      // other headings...
    }
    // other typographies
  },
  "boxShadow": {
    "xs": {
      "value": {
        "x": "0",
        "y": "1",
        "blur": "2",
        "spread": "0",
        "color": "{global.colors.black-opacity.5}",
        "type": "dropShadow"
      },
      "type": "boxShadow"
    },
    "sm": {
      "value": [
        {
          "x": "0",
          "y": "1",
          "blur": "3",
          "spread": "0",
          "color": "{global.colors.black-opacity.10}",
          "type": "dropShadow"
        },
        {
          "x": "0",
          "y": "1",
          "blur": "2",
          "spread": "0",
          "color": "{global.colors.black-opacity.6}",
          "type": "dropShadow"
        }
      ],
      "type": "boxShadow"
    }
    // ...other boxShadows
  }
}

A token contains value and type keys (has description as optional).

Firstly, for instance, we need to assign the value #F6F9F8 directly to the key 25.

There were two exceptions in my case while dealing with typography and boxShadow. Just remember to parse it accordingly depending on the libraries that you use respectively. (in the case of boxShadow, if you put more than one set of values, it will return an array, which will make your converter a bit more verbose)

export function flattenValueProperty(obj) {
  for (let k in obj) {
    if (isToken(obj[k])) {
      if (typeof obj[k].value === 'string') {
        // convert only
        obj[k].value = convertUnit(obj[k].value);
      }
      // deal with typography exception
      if (isObject(obj[k].value) && obj[k].value.hasOwnProperty('lineHeight')) {
        obj[k].value.lineHeight = convertUnit(obj[k].value.lineHeight);
      }
      // assign value
      obj[k] = obj[k].value;
    } else {
      flattenValueProperty(obj[k]);
    }
  }
  return obj;
}

function convertUnit(value) {
  if (value.includes('px')) {
    return `${parseInt(value) / 16}rem`;
  }
  if (value.includes('%')) {
    return `${parseInt(value) / 100}`;
  }
  return value;
}

export function isToken(arg) {
  return isObject(arg) && arg.hasOwnProperty('value');
}

Step 2. Use preorder traversal for the referenced values, get and set the values

Let me introduce some of the functions that I used.

The referenced values are assigned as "color": "{colors.emerald.500}", and the path is colors.emerald[500]. Therefore, you just need to get the path from the string and retrieve the value from the path.

export function preorderTraversal(node, callback, path = []) {
  if (node === null) return;

  //  callback with the node and the path to the node
  callback(node, path);

  // for boxShadow, if the node is array, run callback and end the recursive
  if (isArray(node)) return;

  // for each child of the current node
  for (let key in node) {
    if (typeof node[key] === 'object' && node[key] !== null) {
      // Add the child to the path and recursively call the traversal
      preorderTraversal(node[key], callback, [...path, key]);
    }
  }
}

export function getValueFromPath(obj, path) {
  if (path.length === 0) return obj;
  let val = obj;
  for (let key of path) {
    val = (val as any)[key];
  }
  return val;
}

export function setValueFromPath(obj, value, path) {
  let currObj: any = obj;
  for (let i = 0; i < path.length; i++) {
    if (i === path.length - 1) {
      currObj[path[i]] = value;
    } else {
      if (!currObj[path[i]]) {
        currObj[path[i]] = {};
      }
      currObj = currObj[path[i]];
    }
  }
  return obj;
}

The theme for Emotion provider is almost ready

now you only need to convert the boxShadow values to use it inside css(@emotinoa/react) by concatenating the values following the CSS format
write JSON file with the object created, and you can use it directly as a theme type

import theme from './generated-emotion-theme.json';
export type Theme = typeof theme & { otherTheme: OtherTheme };
export const defaultTheme: Theme = { ...theme, otherTheme: otherTheme };
// You can use pass it to the theme prop of Emotion Provider
// <EmotionThemeProvider theme={defaultTheme}>

the variables that are converted can be used in Emotion styled component directly as

const StyledDiv = styled.div(
  ({ theme }) => css`
    ${theme.typography.body.body1.regular};
    box-shadow: ${theme.boxShadow.sm};
    color: ${theme.colors.deepGreen[25]};
  `
);

There are a few more steps left for Tailwind CSS

Step 3. Typography and Box Shadow for Tailwind CSS

Typography

There are two ways to configure a typography in Tailwind CSS config

1. Use fontSize configuration

   // https://tailwindcss.com/docs/font-size
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     theme: {
       fontSize: {
         '2xl': [
           '1.5rem',
           {
             lineHeight: '2rem',
             letterSpacing: '-0.01em',
             fontWeight: '500',
           },
         ],
         '3xl': [
           '1.875rem',
           {
             lineHeight: '2.25rem',
             letterSpacing: '-0.02em',
             fontWeight: '700',
           },
         ],
       },
     },
   };

recommend when using a single font throughout the application, or if there are limited cases for using other fonts, no plugin is required
however, as you may notice, the parsing can be quite verbose due to the format

2. Use typography plugin

   module.exports = {
    theme: {
        extend: {
            typography: {
                h1: {
             css: {
               lineHeight: '1.3',
               fontWeight: '800',
               fontFamily: 'Pretendard',
               fontSize: '2.5rem',
             },
           },
                // ...
            },
        },
    }
    plugins: [
       require('@tailwindcss/typography')({
         className: 'typography',
       }),
     ],
   }

generally recommended
you can use it as <p className="typography-h1">Hello World!</p>

Box Shadow

You can use the same concatenated string values that are generated when creating a theme JSON file for Emotion.

Hope you find it helpful.

Please comment below if you have any questions.

Happy Coding Y’all!

How to easily migrate Homebrew formulas to another MacBook?

Brandon Wie — Sun, 19 Feb 2023 09:42:12 +0000

I mainly use the Homebrew to manage almost every app or program, even apps on the App Store using mas. It becomes a bit of a pain when I set up a new MacBook because it takes time for me to look for the list of the apps and programs on my main MacBook and install one them by one on my new MacBook.

I recently figured out a handy way to set up brew formulas in a new device using homebrew-bundle and symbolic link bash command.

This post is written based on an assumption that you already have brew installed and actively using it on your Mac.

Step 1. Save your current settings in `.dotfiles/mac/Brewfile`

I use .dotfiles folder to save settings (dotfiles, config files, etc.) and it's saved on my private GitHub repository.

The explanation will be based on my setting.

1. Create the source folders and `Brewfile`

mkdir --parents ~/.dotfiles/mac && touch ~/.dotfile/mac/Brewfile

2. Create a symlink to the `~/Brewfile`

# the target file will be generated automatically
ln -s ~/.dotfiles/mac/Brewfile ~/Brewfile

Why'd you be bothered to create extra ./Brewfile? Because brew bundle command that we're going to use a lot uses ~/Brewfile by default.

You can specify the path to the Brewfile inside the .dotfiles/mac folder, or the path of whatever source folder you use for your setting at the end of the command with --file flag:

# in my case
brew bundle install --file=~/.dotfiles/mac/Brewfile

However, I just prefer to keep things simple regarding the commands and not touch my source file if I can.

3. Whenever you remove/install new formulas on your main Mac, dump your new bundle settings to the `~/Brewfile`; it will update `~/.dotfiles/mac/Brewfile` automatically.

# need to force because the file already exists
brew bundle dump --force

FYI: any changes you make on any of the two linked files will be applied to one another, but deleting the target file(linked file) won't remove the source file.

Step 2. (on your new MacBook) copy the `.dotfiles` folder and create a symlink to `~/Brewfile`

As I mentioned earlier, you can specify the path to the source Brewfile and not create a symlink.

1. paste `.dotfiles` folder to a new mac (~/.dotfiles)

2. install brew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. create a symlink to `~/Brewfile` from the `Brewfile` inside `.dotfiles` folder

ln -s ~/.dotfiles/mac/Brewfile ~/Brewfile

4. install bundles from `~/Brewfile`

brew bundle install

All good and ready!

References

Docker + ReactJS tutorial - Part 1

Brandon Wie — Wed, 25 Jan 2023 14:49:18 +0000

Development to Production workflow + multi-stage builds + docker compose

The source of this note is Sanjeev Thiyagarajan's Docker + ReactJS tutorial
Check out my repo if you need more information about settings
I assume you already have Docker installed on your Machine. If not, please go to Docker homepage and download it.

generate a React app using CRA

npx create-react-app my-app # npm
# or
yarn create react-app my-app #yarn

go to the directory you just created

cd my-app

Create Dockerfile

touch Dockerfile

contain all of the steps we need to customize an image

# Dockerfile
# node doesn't have to be this version
FROM node:19-alpine3.16 
WORKDIR /app
COPY package.json .
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start"]

FROM node:19-alpine3.16

we specify a node image so anytime you're customizing an image we have to give it an image that we want to customize

WORKDIR /app

the working directory of the container
anytime we copy any files it's going to run those commands and copy those files into this directory so we know that anything related to our app is going to be stored in that directory
so technically we don't need this command for anything

COPY package.json .

take the package.json file and copy it into the image
right and then that way once we copy the package.json file,
we can do an npm/yarn install to install all of our dependencies
work directory is specified, so either /app or .

RUN yarn install

the next thing that we want to do is run an npm install

COPY . .

the next thing that you want to do is now copy the rest of all of our code or the rest of all of our files into our container

why copy `package.json` with `COPY . .` again above?

an optimization for Docker to build the image faster for future builds
installing dependencies is a very expensive operation
each line represents a layer, so the above codes represent 5 different layers
Docker builds these images based on these layers
on build, Docker caches the result of each layer
package.json doesn't change that often unless we add a new dependency, we can cache the result of two layers (COPY package.json and RUN yarn install)
and then when we build the image again, Docker will use the cached result
Docker would have no idea whether we changed our source code or we changed the dependencies in our packages.json so every time we ran a copy we would have to then do a full npm install regardless of whether or not the dependencies change so we would be unable to take the cached result
therefore, by splitting up the COPY into two, we can ensure that only when we change our package.json, we have to run an npm install

EXPOSE 3000
CMD ["yarn", "start"]

The app listens on port 3000 so we want to expose port 3000 and then finally we need to do an yarn start to actually start the development server so we'll type in cmd

Build image

docker build -t react-image .

-t, --tag: name and optionally a tag in the 'name:tag' format
outside of containers can't talk to containers by default
so EXPOSE 3000 doesn't really do anything else than just expose the port inside the container

docker run -d -p 3001:3000 --name react-app react-image

-d: run in detached mode (run in the background)
-p: port forwarding (forwarding port from the host machine to the container)
--name: name of the container
3001: port on the host machine (poked hole for outside world)
3000: port on the container (what port we're going to send traffic to our container')

Docker networking - forwarding ports

dockerignore files

prevent unnecessary files from being copied into the image

Let's check the files inside the container first,

docker exec -it react-app sh # or bash if sh doesn't work

ls -a

docker exec: run a command in a running container
-it: interactive terminal
react-app: container name
sh or bash: shell (not every image is using the bash shell)

You will see a bunch of files that are unnecessary to keep inside.

Let's create .dockerignore in the root folder of your local environment.

# .dockerignore
node_modules
Dockerfile
.git
.gitignore
.dockerignore
.env

Remove the previous container, rebuild the image, and run the container

docker stop react-app
docker rm react-app # `-f` to force remove if don't skip stop

docker build -t react-image .
docker run -d -p 3001:3000 --name react-app react-image

Go to shell in the container and check if the target files are ignored properly

docker exec -it react-app sh

ls -a

Now Docker runs the container named react-appwith the image that we created. However, the local changes won't apply to the app inside the container. We're gonna look into that.

Manage data in a Docker container

By default, all files created inside a container are stored on a writable container layer. This means that:

The data doesn’t persist when that container no longer exists, and it can be difficult to get the data out of the container if another process needs it.
A container’s writable layer is tightly coupled to the host machine where the container is running. You can’t easily move the data somewhere else.
Writing into a container’s writable layer requires a storage driver to manage the filesystem. The storage driver provides a union filesystem, using the Linux kernel. This extra abstraction reduces performance as compared to using data volumes, which write directly to the host filesystem.

Docker has two options for containers to store files on the host machine, so that the files are persisted even after the container stops: volumes, and bind mounts.

Docker also supports containers storing files in-memory on the host machine. Such files are not persisted. If you’re running Docker on Linux, tmpfs mount is used to store files in the host’s system memory. If you’re running Docker on Windows, named pipe is used to store files in the host’s system memory.

from Docker documentation

Comparisons of the three

Volumes

Volumes are the preferred mechanism for persisting data generated by and used by Docker containers. While bind mounts are dependent on the directory structure and OS of the host machine, volumes are completely managed by Docker.

Bind mounts

Bind mounts have been around since the early days of Docker. Bind mounts have limited functionality compared to volumes. When you use a bind mount, a file or directory on the host machine is mounted into a container. The file or directory is referenced by its absolute path on the host machine.

By contrast, when you use a volume, a new directory is created within Docker’s storage directory on the host machine, and Docker manages that directory’s contents.

tmpfs mounts

If you’re running Docker on Linux, you have a third option: tmpfs mounts. When you create a container with a tmpfs mount, the container can create files outside the container’s writable layer.

As opposed to volumes and bind mounts, a tmpfs mount is temporary, and only persisted in the host memory. When the container stops, the tmpfs mount is removed, and files written there won’t be persisted.

Enough with explanations, let's continue.

Bind mounts

To make your local development environment communicate with the container you created, you need to use bind mounts method.

Stop container

docker rm react-app -f

And run the container with bind mounts

docker run -v $(pwd):/app -d -p 3001:3000 --name react-app react-image

-v: bind mount (also can be volumes depending on the first field)
- -v dirlocaldirectory:containerdirectory
- -v $(pwd):/app: bind mount the current working directory to the /app directory in the container
- you can only sync src folder
Official document recommend new users use --mount instead of --volume | -v when bind mounts because it give a way clear readability.

docker run --mount type=bind,source="$(pwd)",target=/app -d -p 3001:3000 --name react-app react-image

the documentation shows Volumes and Bind mounts both use -v flag, only the difference is the first field:
- for Volumes: In the case of named volumes, the first field is the name of the volume, and is unique on a given host machine. For anonymous volumes, the first field is omitted.
- for Bind mounts: In the case of bind mounts, the first field is the path to the file or directory on the host machine.

Hot Reload

*(update 01.26.2022) I found that HMR works without setting up CHOKIDAR_USEPOLLING value on MacOS. I followed the implementation right below and HMR works perfectly. Please leave a comment if it doesn't work.

To enable hot reload,

add CHOKIDAR_USEPOLLING=true as ENV to your Dockerfile

What is chokidar anyway?: Minimal and efficient cross-platform file-watching library

...
...
ENV CHOKIDAR_USEPOLLING=true
COPY . .
...

or you can add it to your docker run command with -e flag

 docker run -e CHOKIDAR_USEPOLLING=true -v $(pwd):/app -d -p 3001:3000 --name react-app react-image

*(update 01.26.2022) I found that HMR works without setting up CHOKIDAR_USEPOLLINGvalue. I followed the implementation right below and HMR works perfectly. Please leave a comment if it doesn't work.

(important) Hot Reload issue with CRA v5.0 (I used V5.0.1)

CRA 5.0 fails to hot-reload in a docker container

Create setup.js file in the root directory

   // setup.js
   const fs = require('fs');
   const path = require('path');

   if (process.env.NODE_ENV === 'development') {
     const webPackConfigFile = path.resolve(
       './node_modules/react-scripts/config/webpack.config.js'
     );
     let webPackConfigFileText = fs.readFileSync(webPackConfigFile, 'utf8');

     if (!webPackConfigFileText.includes('watchOptions')) {
       if (webPackConfigFileText.includes('performance: false,')) {
         webPackConfigFileText = webPackConfigFileText.replace(
           'performance: false,',
           "performance: false,\n\t\twatchOptions: { aggregateTimeout: 200, poll: 1000, ignored: '**/node_modules', },"
         );
         fs.writeFileSync(webPackConfigFile, webPackConfigFileText, 'utf8');
       } else {
         throw new Error(`Failed to inject watchOptions`);
       }
     }
   }

the setup.js will find the webpack.config.js file and add watchOptions to it.

Change start script in package.json

   "scripts": {
    "start": "node ./setup && react-scripts start",
    ...
   },

Set WDS_SOCKET_PORT to the current port as ENV on Dockerfile

...
ENV WDS_SOCKET_PORT=3001
COPY . .
...

or you can add it to the docker run command with -e flag

docker run -e WDS_SOCKET_PORT=3001 -v $(pwd):/app -d -p 3001:3000 --name react-app react-image

otherwise, you'll see WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed: error on your console

Remove the running container and re-run it.

docker rm react-app -f

docker run -v $(pwd):/app -d -p 3001:3000 --name react-app react-image

NOW YOU HAVE UP AND RUNNING DOCKER CONTAINER WITH HOT RELOAD

See you in the next part.

References

The Complete Guide for Setting Up React App from Scratch (feat. TypeScript)

Brandon Wie — Wed, 14 Dec 2022 08:53:51 +0000

with webpack, Babel, TypeScript, Sass, CSS Module, Tailwind, React Refresh(HMR)

In this tutorial, we're going to set up a React application without using create-react-app.
We're going to learn how to set up from scratch with TypeScript, Sass, Tailwind CSS, CSS module, absolute paths, and more.

TL;DR My GitHub Repository

Basic concepts you need to know beforehand

1. TSC does type checking, Babel does transpiling

TSC(TypeScript Compiler) that is included in the TypeScript package will only be used as a type checker of your source codes, and you can achieve it by setting:

{
    "compilerOptions": {
        ...
        "noEmit": true, /* Disable emitting files from a compilation. */
        ...
    }
}

@babel/preset-typescript will be used to compile(transpile) TypeScript to JavaScript
- why I use @babel/preset-typescript over ts-loader and awesome-typescript-loader to compile TypeScript?
  - it's blazingly faster than the others and has more perks(read #4)
  - ts-loader doesn't natively support HMR(Hot Module Replacement)
  - awesome-typescript-loader's latest release is on Jun 22, 2018
  - TypeScript With Babel: A Beautiful Marriage - Matt Turnbull's Post

2. We're gonna try the Fast Refresh Feature

The Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components However, my idol, Dan Abramov talked about applying it across the board in 2019 - as a replacement for purely userland solutions (like react-hot-loader).

If you navigate to the React Hot Loader page on npm, you'll see

as mentioned above, we're using the webpack; therefore, we're going to use @pmmmwh/react-refresh-webpack-plugin to apply the Fast Refresh feature to our app. I mean, it's for development, so what's the harm of trying it right?

3. What's up with all the CSS libraries such as CSS Module, Sass, and Tailwind CSS

I'm not saying you should use all of these libraries, but it's just to show you how to set up these for your future projects. In my case, I use Sass and CSS Module combination when I work on page components, and the Tailwind CSS when I need to create prototypes fast and when I make reusable small components.

Okay, enough with the prerequisites.
Let's begin.

Step 1. Create a folder for your project

$ mkdir my-app && cd my-app # create and go to my-app folder

Step 2. Generate package.json file

$ yarn init

then fill in the questions shown below following the prompt

if you prefer to generate one based on your own defaults, use:

$ yarn init --yes # or '-y' in short

if you don't have yarn installed please follow this link.

yarn init docs

You can definitely change the settings later on, so don't worry.

Step 3. Add React and React-related packages

$ yarn add react react-dom react-router-dom
$ yarn add --dev @types/react @types/react-dom @types/react-router-dom # for TypeScript

react(v18.2.0) : The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
react-dom(v18.2.0): This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.
react-router-dom(v6.4.4): contains bindings for using React Router in web applications.
@types/react, @types/react-dom, @types/react-router-dom from TypeScript

Step 4. Add webpack and webpack cli packages

with the Webpack, you can combine all of your React codes into one or more bundles, that are static assets including not only JavaScript or TypeScript files, but also Sass or Image files(png, jpg)

$ yarn add --dev webpack webpack-cli webpack-dev-server
$ yarn add --dev @types/webpack @types/webpack-dev-server # for TypeScript

webpack(v5.75.0)
webpack-cli(v5.0.1): enables you to use the command-line interface of the Webpack
webpack-dev-server(v4.11.1)
@types/webpack, @types/webpack-dev-server: for TypeScript

Step 5. Add Babel core and preset for React packages

Babel is a compiler(or transpiler) and a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments. The preset-react package will convert JSX syntax to JavaScript codes that browsers can understand.

$ yarn add --dev @babel/core @babel/preset-env @babel/preset-react 
$ yarn add --dev @babel/preset-typescript # for TypeScript
$ yarn add --dev @babel/register # to use webpack.config.ts (TypeScript)

@babel/core(v7.20.5): core files of Babel compiler

Presets for Babel

@babel/preset-env(v7.20.2): allow you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s)
@babel/preset-react(v7.18.6): process and transform jsx syntax and display name
@babel/preset-typescript(v7.18.6)
- since ts-loader for the webpack doesn't natively support HMR, I prefer Babel's preset to handle TypeScript, also because basically webpack works as a module bundler and Babel works as a compiler(transpiler).
@babel/register(v.7.18.9): The require hook will bind itself to node's require and automatically compile files on the fly. You need it when you want to use the webpack config file as TypeScript. If you use webpack.config.ts, and the webpack cli will complain
Unable load /{path}/webpack.config.ts

and

Unable to use specified module loader for ".ts"

if you don't have @babel/register. No need extra configurations.

webpack and Babel packages are added using --dev | -D flag not to include those in the final code bundle

Step 6. Create babel.config.json file

{
  // there's room for discussions, but I won't exclude node_modules here
  // https://stackoverflow.com/questions/54156617/why-would-we-exclude-node-modules-when-using-babel-loader
  // "exclude": "node_modules/**",
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic" // the default option, "classic" does not automatic import anything.
        // https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined
      }
    ],
    "@babel/preset-typescript" // transpile typescript
  ]
}

Step 7. Add loaders for webpack

Disclaimer: these loaders are third-party packages maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack.
- webpack documentation

There are instructions below about implementations of the loaders listed below; however, you can go to the links and follow the instructions if you encounter any issues along the way.

$ yarn add --dev babel-loader # to connect Babel and webpack
$ yarn add --dev html-webpack-plugin html-loader # for HTML
$ yarn add --dev style-loader css-loader sass-loader postcss postcss-loader postcss-preset-env mini-css-extract-plugin # for CSS
$ yarn add --dev react-refresh @pmmmwh/react-refresh-webpack-plugin # for HMR

# connect babel and webpack

babel-loader(v9.1.0): allows transpiling JavaScript files using Babel and webpack.

# HTML-related

html-webpack-plugin(v5.5.0): generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. You can use your own template as well.
html-loader(v4.2.0): exports HTML as string. HTML is minimized when the compiler demands.

# style-related

style-loader(v3.3.1): inject CSS into the DOM. It will be only used when it's on development. MiniCssExtractPlugin will be used for production.
- Simply, the style-loader directly injects CSS inside style tags in the DOM, MiniCssExtractPlugin bundles your CSS and creates separate CSS files.
- One of the reasons I decided to use as above is that when using the style-loader, it's imperative receiving unnecessary inline styles whereas you can load css files on demand when using MiniCssExtractPlugin. It doesn't make a huge difference if your application is relatively small thou.
css-loader(v6.7.2): interpret @import and url() like import/require() and will resolve them.

You need the two loaders above even if you don't wanna use Sass or Tailwind
postcss-loader(v7.0.2): allow using postcss and to use Tailwind CSS.
- w/ postcss(v8.4.19): a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
- w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.

Since we're going to use Sass and Tailwind CSS in addition to the native CSS, as recommended on the Tailwind's official documentation, we're going to use PostCSS. *You don't have to install autoprefixer because it is already included in the postcss-preset-env

sass-loader(v13.2.0): load a Sass/SCSS file and compiles it to CSS.
- w/ sass(v1.56.2): Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.
MiniCssExtractPlugin(v2.7.2): extract CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. We're going to use it in production.

# HMR (Hot Module Replacement) related (development only)

What is 'Hot Module Replacement'

instead of using classic HotModuleReplacementPlugin, we're going to implement "Fast Refresh" with react-refresh and @pmmmwh/react-refresh-webpack-plugin.
TMI: Next.js natively supports the Fast Refresh

react-refresh implements the wiring necessary to integrate Fast Refresh into bundlers. Fast Refresh is a feature that lets you edit React components in a running application without losing their state. It is similar to an old feature known as "hot reloading", but Fast Refresh is more reliable and officially supported by React.

Disclaimer: @pmmmwh/react-refresh-webpack-plugin is not 100% stable

@pmmmwh/react-refresh-webpack-plugin(v0.5.10)
react-refresh(v0.14.0)(rough guide from #gaearon)

Step 8. Add extra

$ yarn add --dev typescript-plugin-css-modules # to use CSS module in TypeScript

typescript-plugin-css-modules(v4.1.1): A TypeScript language service plugin for CSS Modules.
*if you don't use CSS Modules, obviously you don't have to install it.

After everything is installed, your package.json should look something like this:

{
  "name": "my-app",
  "version": "0.0.1",
  "description": "Brandon's complete guide for manual react app setup with TypeScript ",
  "main": "./index.js",
  "author": "brandonwie",
  "license": "MIT",
  "private": false,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/register": "^7.18.9",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@types/react-router-dom": "^5.3.3",
    "@types/webpack": "^5.28.0",
    "@types/webpack-dev-server": "^4.7.2",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.2",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "postcss": "^8.4.19",
    "postcss-loader": "^7.0.2",
    "postcss-preset-env": "^7.8.3",
    "react-refresh": "^0.14.0",
    "sass": "^1.56.2",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.3",
    "typescript-plugin-css-modules": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

Step 9. Create tsconfig.json

$ touch tsconfig.json
# or you can let tsc to handle it
$ tsc --init

it should look something like this:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */
    /* Language and Environment */
    //NOTE @brandonwie target latest version of ECMAScript
    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
    /* Modules */
    "module": "ESNext" /* Specify what module code is generated. */,
    //NOTE @brandonwie Search under node_modules for no-relative imports
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
    "paths": {
      "@*": ["*"]
    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
    "types": [
      "node"
    ] /* Specify type package names to be included without being referenced in a source file. */,
    "resolveJsonModule": true /* Enable importing .json files. */,

    /* JavaScript Support */
    //NOTE @brandonwie Process & infer types from .js files
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
    "checkJs": true /* Enable error reporting in type-checked JavaScript files. */,
    /* Emit */
    //NOTE @brandonwie Don't emit; allow Babel to tranform files
    "noEmit": true /* Disable emitting files from a compilation. */,
    //NOTE @brandonwie Disallow features that require cross-file information for emit
    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
    //NOTE @brandonwie Import non-ES modules as default imports
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    //NOTE @brandonwie Enable strictest settings like strictNullChecks & noImplicitAny
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["src", "declaration.d.ts"] /* Include modules in the program. */,
  "exclude": ["node_modules", "build"] /* Exclude modules from the program. */,
  "plugins": [{ "name": "typescript-plugin-css-modules" }] // to use css modules
}

Some of the settings above are personal; however, settings that aren't boolean are necessary.

Step 10. Create webpack.config.ts

$ touch webpack.config.ts

it should look something like this:

import path from 'path';
import webpack from 'webpack';
import HTMLWebpackPlugin from 'html-webpack-plugin';
//create css file per js file: https://webpack.kr/plugins/mini-css-extract-plugin/
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';

const isDevelopment = process.env.NODE_ENV !== 'production';
// define plugins
const plugins: webpack.WebpackPluginInstance[] = [
  new HTMLWebpackPlugin({
    template: './public/index.html', // you have to have the template file
  }),
];
isDevelopment
  ? plugins.push(new ReactRefreshWebpackPlugin())
  : plugins.push(new MiniCssExtractPlugin());

const config: webpack.Configuration = {
  mode: isDevelopment ? 'development' : 'production',
  devServer: {
    hot: true,
    port: 3000,
  },
  entry: './src/index.tsx', // codes will be inside src folder
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    // more configurations: https://webpack.js.org/configuration/
  },
  plugins,
  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    // automatically resolve certain extensions (Ex. import './file' will automatically look for file.js)
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
    alias: {
      // absolute path importing files
      '@pages': path.resolve(__dirname, './src/pages'),
    },
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                isDevelopment && require.resolve('react-refresh/babel'),
              ].filter(Boolean),
            },
          },
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/i, // .sass or .scss
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // for Tailwind CSS
          'postcss-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

export default config;

The code above is based on many other references, so I recommend you to play along with the settings when you finish the setup. Also, you can use .js file instead of .ts file and don't use @babel/register since I just wanted to try it with TypeScript.

Step 11. Create postcss.config.js

$ touch postcss.config.js

it should look something like this:

module.exports = {
  // didn't add autoprefixer because it is already included in postcss-preset-env
  plugins: [require('tailwindcss'), require('postcss-preset-env')],
};

Step 12. Create tailwind.config.js

$ touch tailwind.config.js

it should look something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 13. Create public folder and index.html file to use it as a template

From the setting above, we told the webpack to find ./public/index.html and use it as a template file

const plugins: webpack.WebpackPluginInstance[] = [
  new HTMLWebpackPlugin({
    template: './public/index.html', // you have to have the template file
  }),
];

$ mkdir public && touch public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brandon's App'</title>
  </head>
  <body>
    <div id="root"></div> <!-- for react -->
  </body>
</html>

If you use VSCode, simply you can type ! and enter to create the HTML codes.

Step 14. Create src folder, index.tsx, and App.tsx

$ mkdir src && touch src/index.tsx src/App.tsx

Your entry is set to index.tsx in the src folder in webpack.config.ts file

const config: webpack.Configuration = {
  mode: isDevelopment ? 'development' : 'production',
  devServer: {
    hot: true,
    port: 3000,
  },
  entry: './src/index.tsx', // codes will be inside src folder
  ...
}

Your index.tsx file should look something like this:

import { createRoot } from 'react-dom/client';

import App from './App';

const container = document.getElementById('root');
const root = createRoot(container!);

root.render(<App />);

If you've been using React version 17 or below, you may find the rendering method is somewhat different. Please follow the link, How to Upgrade to React 18.

Your App.tsx file may look something like this:

import styles from './App.module';
import SamplePage from '@pages/Sample';
import './main.css';

const App: React.FC = () => {
  return (
    <div>
      <div className={styles.title}>CSS module works!</div>
      <div className={styles.subtitle}>CSS module + Tailwind works!</div>
      <div
        className={
          'border-[10px] border-solid border-red-800 rounded-full w-[200px] h-[200px] flex items-center justify-center text-center'
        }
      >
        Tailwind works!
      </div>
      <SamplePage />
    </div>
  );
};

export default App;

I hope you get the ideas here. What we've been setting are now available in our codes.

🙏 Please visit my GitHub repository for more settings and codes.

Step 15. (optional) add scripts to package.json

  "scripts": {
    "start": "webpack serve --hot --mode development",
    "build": "webpack --mode production"
  }

Now you can run the app with yarn start

This is what you'll see if you run the app.

That's it for this post guys. Thank you so much for reading.

Next post will be about prettier and eslint settings using eslint-config-airbnb. See you next time! 👋🏼

References

Creating your React project from scratch without create-react-app: The Complete Guide(dev.to)
Speeding up your development with Webpack 5 HMR and React Fast Refresh(dev.to)
Setup a React app with Webpack and Babel(dev.to)
Setup a React App using Webpack, Babel and TypeScript(dev.to)
Webpack style-loader vs css-loader(stackoverflow)
Webpack style-loader vs css-loader(stackoverflow)
Webpack 러닝 가이드(learning guide) - KR(gitbook.io)

How do I connect two different GitHub accounts on macOS

Brandon Wie — Mon, 14 Nov 2022 13:54:07 +0000

1. Check if you have any SSH key

 $ ls -al ~/.ssh

-a: show all file
-l: show file details

2. Generate SSH key

 $ cd ~/.ssh # if you already have the folder
 $ mkdir ~/.ssh # if you don't have it

 $ ssh-keygen -t ed25519 -C "your-email@example.com"

ssh-keygen

-t: key type
-f: file name to store the key
-b: key bit number case ED25519: Fixed
-N: new passphrase
-C: comment
using passphrase is recommended and if you set one, you'll be asked when adding the keys to the SSH agent

3. Add the key to SSH agent

$ ssh-add --apple-user-keychain ~/.ssh/your-key-file-name
# easy way
$ ssh-add your-key-file-name
# use the file without .pub

# check if the keys are added successfully
$ ssh-add -l

4. Copy and paste on GitHub

Copy

$ pbcopy < ~/.ssh/your-key-file-name.pub
# use the file with .pub

terminal

-pbcopy < ~/path/to/file: copy to the clipboard
-pbpaste > ~/path/to/file: create a file and paste it

# pbpaste example
$ pbcopy < ~/.ssh/my-key.pub
$ pbpaste > ~/.ssh/something.txt
# something.txt will be created and has the copied content

on the GitHub profile page, click icon(top-right) > Settings > SSH and GPG keys > New SSH key

put any distinguishable title and paste the key

5. Do 1 to 4 again for another GitHub account

6. Create `config` file (no extension) in `~/.ssh` folder and add

# My
Host github.com-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/my-ssh-file # not .pub file
# Work
Host github.com-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/work-ssh-file # not .pub file
# careful with the IdentityFile spelling. It's NOT identify!

The Host is important.
When you clone the repository using SSH, the Host github.com-personal or github.com-work must replace the github.com.
For instant, git clone git@github.com:{org_name}/{repo_name}.git becomes git clone git@github.com-work:{org_name}/{repo_name}.git when you clone it.

7. Create or change `~/.gitconfig`

Suppose you have ./code folder and want to use ~/code/personal folder for you and ~/code/work folder for your work.
I prefer to have all the .gitconfig* files at $HOME level, but it's up to you.
Create .gitconfig-personal and .gitconfig-work as well.

# .gitconfig
[includeIf "gitdir:~/code/personal/"]
    path = ~/.gitconfig-personal
[includeIf "gitdir:~/code/work/"]
    path = ~/.gitconfig.work

# .gitconfig-personal
[user]
    name = Your Name
    email = your-email@email.com 
    username = your-username

# .gitconfig-work
[user]
    name = Your Name # same as displayed
    email = work-email@email.com 
    username = work-username

8. Try cloning company repo to `~/code/work` folder

# suppose you created folder structure as above,
$ cd ~/code/work
# if you just copied the SSH clone command, you will have
# git@github.com:{org_name}/{repo_name}.git 

# AS MENTIONED ABOVE, YOU MUST CHANGE `github.com` to `github.com-work` 
# as written on the Host section in the ssh config file

$ git clone git@github.com-work:{org_name}/{repo_name}.git

You will probably asked to confirm if you really want to connect using the key because the connection was never established before
After clone is completed, check the ~/.ssh folder,
you will now have known_hosts file.

Try with your personal repository and create the connection as well.

9. Another way

If you don't want to do anything with the ssh config file, add the lines below to at the bottom of your .gitconfig-work, .gitconfig-personal files separately

[core]
  sshCommand = ssh -i ~/.ssh/work -F ~/code/work/
# sshCommand = ssh -i path/to/your/ssh/file -F path/to/your/folder/connected/to/the/ssh/key
# `git push` and `git fetch` will use this command instead of `ssh` when they need to connect to a remote system.

If sshCommand option is set, changing host names as #8 when cloning won't work because now the commands using ssh such as push or fetch will use the specified command of the sshCommand on .gitconfig-work or .gitconfig-personal for instance.

Hope you find it helpful.

Happy Coding!

Publish Packages via GitHub Packages (feat. yarn)

Brandon Wie — Tue, 01 Nov 2022 13:19:05 +0000

This post is about how to publish a package using GitHub packages and GitHub workflow from an existing repository to a new one.

0. Delete `.git` and `.github` folders if you have one, not to have configurations overlapped and cause troubles

1. Create a new empty repo on GitHub

leave it as it is for now, you are going to need the commands that are shown in the screenshot
*if you don't see the same layout, see if you checked "Add README.md"

2. Create a `yml` file for GitHub Actions

# .github/workflows/release-package.yml
name: on release

on:
    release:
        types: [created]

jobs:
    publish-github-registry:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 16
                  registry-url: https://npm.pkg.github.com/
            - run: yarn install
            - run: yarn build
            - run: yarn publish
              env:
                  NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

The yml file will run when you "release" the repository. I am going to use GitHub Cli for it.

4. Change some fields in `package.json`

"name": "@{username}/{repo_name}",
"publishConfig": {
    "registry": "https://npm.pkg.github.com"
},
"main": "dist/index.js",
"repository": {
    "type": "git",
    "url": "git+https://github.com/{username}/{repo_name}.git"
},
"bugs": {
    "url": "https://github.com/{username}/{repo_name}/issues"
},
"homepage": "https://github.com/{username}/{repo_name}#readme"

The information will affect the package page. You can change values and see what affects what. However, name, publishConfig and repository are necessary.

5. Init git and push the local repo to the remote that you created

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -m master main # if you want to change the name
$ git remote add {url_of_the_repo}
$ git push

6. Create `~/.npmrc` if you don't have one and add the settings below

registry=https://registry.yarnpkg.com/ # for yarn

@<username>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<your auth token>
always-auth=true

7. It's time to release with GitHub Cli

*your GH cli must be connected with your GitHub account for the command to work, or you can do it manually on the repo's release page

gh release create v0.0.2

the version cannot go over the version written on `package.json`; otherwise, you will see this error on the Actions console

8. Go to the GitHub repository and check the Action tab. You can see the link on the right side of the repo main page when the release is done.

Additional Info

if you wanna use npm ci as the document, the node version must be over 12

Helpful Links

Please comment down below if there's anything misguiding.

Implement ToastUI Editor with Next.JS (w/ TypeScript)

Brandon Wie — Tue, 05 Apr 2022 10:25:03 +0000

To make it as brief as possible, this post will only deal with some of the issues that you might encounter while implementing ToastUI Editor inside Next.JS projects.

#1.ReferenceError: self is undefined

This is not only a matter of ToastUI Editor, but also with libraries that need the window object on runtime. It is because Next.js will render it on the server-side, but there is no window object exists.

// toast-editor.js
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
    else if(typeof define === 'function' && define.amd)
        define(["prosemirror-commands", "prosemirror-history", "prosemirror-inputrules", "prosemirror-keymap", "prosemirror-model", "prosemirror-state", "prosemirror-transform", "prosemirror-view"], factory);
    else if(typeof exports === 'object')
        exports["toastui"] = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
    else
        root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = factory(root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined]);
})(self, function(__WEBPACK_EXTERNAL_MODULE__695__, __WEBPACK_EXTERNAL_MODULE__412__, __WEBPACK_EXTERNAL_MODULE__479__, __WEBPACK_EXTERNAL_MODULE__481__, __WEBPACK_EXTERNAL_MODULE__43__, __WEBPACK_EXTERNAL_MODULE__814__, __WEBPACK_EXTERNAL_MODULE__785__, __WEBPACK_EXTERNAL_MODULE__311__)

In short, the self at the bottom left of the code above causes the error. ToastUI needs window object to initiate

// line 17364 on lib.dom.ts (a part of ToastUI Editor)
declare var self: Window & typeof globalThis;

So how to fix it?

Next.js supports ES2020 dynamic import() for JavaScript, which allows you to disable SSR.

Your code should look something like this:

import React, { MutableRefObject } from 'react';
import dynamic from 'next/dynamic';
import { EditorProps, Editor as EditorType } from '@toast-ui/react-editor';
import { TuiWithForwardedRefProps } from './EditorWithForwardedRef';

const Editor = dynamic<TuiWithForwardedProps>(
  () => import('@components/ToastEditor/EditorWithForwardedRef'),
  {
    ssr: false,
  }
);

const EditorWithForwardRef = React.forwardRef<
  EditorType | undefined, // object type
  EditorProps // prop type
>((props, ref) => (
  <Editor {...props} forwardedRef={ref as MutableRefObject<EditorType>} />
));
EditorWithForwardRef.displayName = 'EditorWithForwardRef'; // throws error if not set

interface ToastUiEditorProps extends EditorProps {
  forwardedRef: MutableRefObject<EditorType | undefined>;
}
const ToastEditor: React.FC<ToastUiEditorProps> = (props) => {
  return (
    <EditorWithForwardRef
      {...props}
      ref={props.forwardedRef}
      initialEditType={props.initialEditType || 'wysiwyg'}
      height={props.height || '300px'}
      previewStyle={props.previewStyle || 'vertical'}
    />
  );
};

export default ToastEditor;

The code below is what is imported right above the inside Editor variable. You may find further hints etc in the link at the bottom.

import React, { MutableRefObject } from 'react';
// editor
import { Editor, EditorProps } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
// table
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
// code syntax highlight
import Prism from 'prismjs'; // main library for coloring
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-python';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
// 3 below for editor-plugin-color-syntax
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import colorSyntax, {
  PluginOptions,
} from '@toast-ui/editor-plugin-color-syntax';
// Korean lang
import '@toast-ui/editor/dist/i18n/ko-kr';

export interface TuiWithForwardedRefProps extends EditorProps {
  // using type ForwardedRef instead of MutableRefObject causes error when using useRef();
  forwardedRef?: MutableRefObject<Editor>;
  // type for color syntax - array of color strings
  colorSyntaxOptions?: PluginOptions;
}

const TuiWithForwardedRef: React.FC<TuiWithForwardedRefProps> = (props) => (
  <Editor
    {...props}
    ref={props.forwardedRef}
    usageStatistics={false}
    plugins={[
      [codeSyntaxHighlight, { highlighter: Prism }],
      [colorSyntax, props.colorSyntaxOptions],
      tableMergedCell,
    ]}
    // language={'ko-KR'}
  />
);

export default TuiWithForwardedRef;

#2. The issue regarding `alt text` when using `addImageBlockHook` in hooks prop

There is a space for alt-text when uploading images.

And here's a function that what you may think it's related to the "description"

type HookCallback = (url: string, text?: string) => void;

export type HookMap = {
  addImageBlobHook?: (blob: Blob | File, callback: HookCallback) => void;
};

and the optional text prop sets the alt-text of the image you upload. However, the point is that "where can I get the description I typed in the description blank to assign it to the text prop.

So, how to fix it?

The answer is leave the text prop empty and the description that you put when uploading will be automatically assigned to the img element.

#3. Embed inside a component file

So the final ToastUI Editor component that you will embed on your component file may look like this:

const editorRef = React.useRef<EditorType>(); // ref hint

<ToastEditor
        forwardedRef={editorRef}
        initialEditType={'wysiwyg'}
        initialValue={'inital value is here'} // if you use placeholder then it causes an rendering error after pressing "insert code block" right after the editor is rendered
        height={'500px'}
        onChange={handleChange}
        hooks={{
          addImageBlobHook: async (fileOrBlob, callback) => {
            const uploadedImgURL = await uploadImg(fileOrBlob);
            callback(uploadedImgURL); // second argument is text which is optional, simply just ignore it
            console.log(uploadedImgURL);
          },
        }}
      />

Package versions used in this post

"@toast-ui/react-editor": "^3.1.3",
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
"@toast-ui/editor-plugin-color-syntax": "^3.0.2",
"@toast-ui/editor-plugin-table-merged-cell": "^3.0.2",
"prismjs": "^1.27.0",

Hope you find it helpful. Happy Coding!

TUI Editor Core
TUI Editor Github
PrismJS/prism
Joo Hee Kim's Medium post
yceffort blog - Korean

Forem: Brandon Wie

Understanding Garbage Collection in JavaScript and Beyond

What is Garbage Collection?

Garbage Collection in JavaScript

1. Mark-and-Sweep Algorithm

2. Generational Garbage Collection

Other Garbage Collection Strategies

1. Reference Counting

2. Manual Memory Management

3. Tracing with Cycle Collectors

4. Rust’s Borrow Checker (No GC)

Comparison of Garbage Collection Strategies

How JavaScript Handles Common Scenarios

Circular References

Event Listeners and Closures

Takeaway Points

References

CORS in Spring Boot with Kotlin

Understanding Headers Related to CORS

Why Does CORS Affect Browsers but Not Mobile Apps?

How to Set Up CORS in Spring Boot with Kotlin

Global Configuration with @Bean

CORS with Controller-Level Annotations

What Is Affected by allowCredentials?

Impacts of allowCredentials

What Is NOT Affected by allowCredentials?

Why Authorization Is Unaffected

Best Practices for CORS Configuration

Takeaway

References

Understanding the NestJS Logger: Format Specifiers and Logging Best Practices

The Basics of NestJS Logger

Support for Format Specifiers

Limitations and Best Practices

Recommendations for Effective Logging

Conclusion

References

How Reactivity in Vue and Svelte are different?

Vue's Reactivity:

Svelte's Reactivity:

Key Differences:

Reactive State:

Derived Values:

Update Mechanism:

Vue 3:

Svelte:

References

Connect VSCode and EC2 using SSH

1. Install an OpenSSH compatible SSH client

2. Install Remote - SSH extension on VSCode

3. Configure

Note

4. Connect

5. Open File or Folder

Strategy to generate the Tokens Studio(Figma) JSON file converter for Tailwind CSS and Emotion

Prologue

Basic concept with types

Step 1. Flatten the object

Step 2. Use preorder traversal for the referenced values, get and set the values

The theme for Emotion provider is almost ready

There are a few more steps left for Tailwind CSS

Step 3. Typography and Box Shadow for Tailwind CSS

Typography

1. Use fontSize configuration

2. Use typography plugin

Box Shadow

How to easily migrate Homebrew formulas to another MacBook?

Step 1. Save your current settings in .dotfiles/mac/Brewfile

1. Create the source folders and Brewfile

2. Create a symlink to the ~/Brewfile

3. Whenever you remove/install new formulas on your main Mac, dump your new bundle settings to the ~/Brewfile; it will update ~/.dotfiles/mac/Brewfile automatically.

Step 2. (on your new MacBook) copy the .dotfiles folder and create a symlink to ~/Brewfile

1. paste .dotfiles folder to a new mac (~/.dotfiles)

2. install brew

3. create a symlink to ~/Brewfile from the Brewfile inside .dotfiles folder

4. install bundles from ~/Brewfile

References

Docker + ReactJS tutorial - Part 1

generate a React app using CRA

Create Dockerfile

Global Configuration with `@Bean`

What Is Affected by `allowCredentials`?

Impacts of `allowCredentials`

What Is NOT Affected by `allowCredentials`?

2. Install `Remote - SSH` extension on VSCode

Step 1. Save your current settings in `.dotfiles/mac/Brewfile`

1. Create the source folders and `Brewfile`

2. Create a symlink to the `~/Brewfile`

3. Whenever you remove/install new formulas on your main Mac, dump your new bundle settings to the `~/Brewfile`; it will update `~/.dotfiles/mac/Brewfile` automatically.

Step 2. (on your new MacBook) copy the `.dotfiles` folder and create a symlink to `~/Brewfile`

1. paste `.dotfiles` folder to a new mac (~/.dotfiles)

3. create a symlink to `~/Brewfile` from the `Brewfile` inside `.dotfiles` folder

4. install bundles from `~/Brewfile`

why copy `package.json` with `COPY . .` again above?

6. Create `config` file (no extension) in `~/.ssh` folder and add

7. Create or change `~/.gitconfig`

8. Try cloning company repo to `~/code/work` folder

0. Delete `.git` and `.github` folders if you have one, not to have configurations overlapped and cause troubles

2. Create a `yml` file for GitHub Actions

4. Change some fields in `package.json`

6. Create `~/.npmrc` if you don't have one and add the settings below

the version cannot go over the version written on `package.json`; otherwise, you will see this error on the Actions console

#2. The issue regarding `alt text` when using `addImageBlockHook` in hooks prop