Forem: Kenji Tomita

Understanding Laravel's .env Caching and How to Avoid Common Pitfalls

Kenji Tomita — Mon, 11 Aug 2025 09:38:22 +0000

When developing locally with Laravel, you might encounter these frustrating problems:

You change the .env file, but the changes don't take effect
Your app unexpectedly connects to the wrong environment (database, API, etc.)
Configuration values seem stale and outdated

Most often, these issues are caused by configuration caching.

How `.env` and Configuration Caching Work

Laravel uses environment variables defined in .env inside its config files under config/*.php. To improve performance, especially in production, Laravel allows you to cache all your configuration and environment variables into a single file.

Running php artisan optimize creates this cache.
Specifically, config::cache compiles .env values into bootstrap/cache/config.php, so changes to .env won't be picked up until the cache is cleared.

Location and Contents of Cache Files

Configuration caches are stored in the bootstrap/cache/ directory.
After running php artisan optimize, you'll typically see files like:

bootstrap/cache/config.php     ← configuration cache
bootstrap/cache/routes-v7.php  ← route cache
bootstrap/cache/packages.php   ← package cache

Opening config.php reveals an array with all .env values expanded and saved.
As long as this cache exists, Laravel won't reload your .env file directly.

How to Avoid Cache Issues

If you want .env changes to apply immediately, clear the cache:

php artisan config:clear
php artisan cache:clear

A Tool I Built to Check `.env` vs Cache Differences

I personally got stuck many times wondering "Why am I connecting to the wrong environment?" To help, I created a CLI tool that easily compares your .env file and the cached config.php to highlight differences.

👉 tommykw/laravel-env-diff

Note on Artisan Commands and Current Limitations

I wasn't aware that custom Artisan commands could be created, so I implemented this tool as a standalone Rust CLI.

Also, there are some cases that the current implementation does not yet cover, including:

Environment variable expansion (e.g., MAIL_FROM_NAME="${APP_NAME}")
Values present in $_ENV but not in the .env file
.env.[environment] files for environment-specific configuration
Non-local file systems

How to Install

git clone git@github.com:tommykw/laravel-env-diff.git
cd laravel-env-diff
cargo build --release
cargo install --path .

How to Run

After installation, run the tool from the root directory of your Laravel project:

laravel-env-diff

Sample Output

=== Differences between .env and bootstrap/cache/config.php ===
[DIFF] DB_HOST
[DIFF] REDIS_PASSWORD

This output shows which environment variable keys differ between your .env and the cached config.
It helps you quickly identify what hasn't been reflected in the cache.

Summary

.env values get cached into bootstrap/cache/config.php by config:cache
If .env changes don't take effect, clear the cache with artisan commands

Understanding .env caching saves you a lot of debugging time.

Learning About SWAR

Kenji Tomita — Tue, 29 Jul 2025 10:05:23 +0000

Introduction

Digit-wise addition and carry detection are typically performed one digit at a time, with individual checks for carry.
However, with SWAR(SIMD Within A Register) techniques, it's possible to process multiple digits at once.

※ All code examples below are written in Rust.

What is SWAR?

SWAR(SIMD Within A Register) is a technique that allows the same operation to be performed simultaneously on multiple data within a single register.

Example:

A 32-bit value is treated as four 8-bit(byte) values
Each byte is added simultaneously

Comparison of SWAR and Conventional Addition

Conventional Addition

fn main() {
    let a = [8, 6, 7, 4];
    let b = [4, 3, 2, 3];
    let mut carry = [false; 4];

    for i in 0..4 {
        let sum = a[i] + b[i];
        if sum >= 10 {
            carry[i] = true;
        }
    }

    println!("{:?}", carry); // [true, false, false, false]
}

In this case, the sums of each element are [12, 9, 9, 7], so carry becomes [true, false, false, false].
The carry array stores whether a carry(sum of 10 or more) occurred in each digit addition.

Addition Using SWAR

fn main() {
    let a: i64 = 0x04070608;
    let b: i64 = 0x03020304;
    let sum = a + b;
    let adjusted = sum + 0xF6F6F6F6;
    let carry = (!adjusted) & 0x80808080;

    println!("0x{:08X}", carry); // 0x00808080
}

No loop
No branching
Bitwise operations only

carry = 0x00808080 means that a carry occurred in the 1st, 2nd, and 3rd bytes (from LSB). The MSB (most significant bit) of each byte is set if a carry occurred in that byte during addition.

Note: Why use numbers like 0x04070608?

This is a packed 32-bit integer representation of the following byte array:

let a = [8, 6, 7, 4];

0x04070608 is a 32-bit integer encoding the byte array [8, 6, 7, 4] in little-endian order. This allows SWAR to handle it as a single integer, enabling faster processing.

Why Add 0xF6?

For digit-wise addition, a carry occurs if the result is 10 or more.
Adding 246 (0xF6) ensures:

x + 246 > 255 only when x is 10 or more
If the sum exceeds 255, the MSB(Most Significant Bit) becomes 0, allowing carry detection with & 0x80 == 0

Why is it Fast?

Comparison

Operation	Instruction Count	Branching
`x == 10`	Multiple	Yes
`x & 0x80`	Single	No

No branching or loops = Better for CPU pipelines
Multiple digits processed at once = Fewer loop iterations

Actual Code

Here's an example of checking carry per byte using bitwise operations:

fn main() {
    let a = 5;
    let b = 7;
    let (result, carry) = add_digits_with_carry(a, b);
    println!("Result: {}, Carry: {}", result, carry); // Result: 2, Carry: true
}

fn is_carry(x: u16) -> bool {
    (x + 246) & 0x80 == 0
}

fn add_digits_with_carry(a: u16, b: u16) -> (u16, bool) {
    let sum = a + b;
    let carry = is_carry(sum);
    (sum % 10, carry)
}

This code defines a function for adding single digits with carry detection. The is_carry function determines carry presence without branching by using bitwise operations.

What is bcmath?

bcmath is a high-precision math library included with PHP. It handles arbitrary-precision integers and decimals instead of floating-point numbers.
This enables accurate calculations in cases where precision is critical, such as financial computations and cryptocurrency transactions.

Use of SWAR-like Techniques in bcmath

The source code for PHP's bcmach (doaddsub.c) includes the following snippet:

n1bytes += SWAR_REPEAT(0xF6) + n2bytes + carry;
carry = !(n1bytes & ((BC_VECTOR) 1 << (8 * sizeof(BC_VECTOR) - 1)));
BC_VECTOR sum_mask = ((n1bytes & SWAR_REPEAT(0x80)) >> 7) * 0xF6;
n1bytes -= sum_mask;

By adding 0xF6 to each byte to detect carry and then correcting the result, this is an example of a SWAR-like technique.
bcmath performs arbitrary-precision arithmetic by operating on multi-byte arrays internally. Form this, we can see that SWAR-like bit manipulation is used in parts of its implementation.

Conclusion

SWAR stands out in its ability to avoid loops and branches by handing multiple digit calculations simultaneously using bitwise operations.

Testing Storage Limits of localStorage and sessionStorage in Chrome

Kenji Tomita — Sun, 20 Apr 2025 21:37:35 +0000

Introduction

The Web Storage API provides localStorage and sessionStorage as mechanisms for storing data in the browser.
However, both come with storage limitations. In this post, we'll test how much data can be stored before hitting those limits and what kind of errors are thrown, using Google Chrome version 135.

Differences Between localStorage and sessionStorage

Storage Type	Lifetime	Limit	Notes
localStorage	Persistent(until cleared)	~5MB	Shared across tabs and windows
sessionStorage	Until tab is closed	~5MB	Valid only within the same tab

These limits are not strictly defined in the specification, and actual limits may vary depending on the browser and device.

Environment

Browser: Google Chrome(version 135)
Method: Save 1MB strings repeatedly until an error is triggered
Language: HTML + JavaScript

Code Example - Add 1MB per Click & Monitor Usage

This example adds 1MB at a time to localStorage, updates usage in real time, and catches errors when the limit is exceeded.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>localStorage Capacity Test</title>
  <style>
    button {
      margin-left: 1rem;
    }
    #error {
      color: red;
      margin-top: 1rem;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <h1>localStorage Capacity Test</h1>
  <p>Total Usage: <span id="status">0 KB (0 MB)</span></p>
  <button id="addButton">Add 1MB</button>
  <button id="clearButton">Clear</button>

  <pre id="error"></pre>

  <script>
    let index = 0;
    const oneMB = 'a'.repeat(1024 * 1024); // 1MB string

    function updateStatus() {
      let totalChars = 0;
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const value = localStorage.getItem(key);
        totalChars += (key.length + value.length);
      }
      const totalKB = Math.round(totalChars / 1024);
      const totalMB = (totalChars / (1024 * 1024)).toFixed(2);
      document.getElementById('status').textContent = `${totalKB} KB (${totalMB} MB)`;
    }

    document.getElementById('addButton').addEventListener('click', () => {
      const errorElem = document.getElementById('error');
      errorElem.textContent = ''; // Reset

      try {
        localStorage.setItem(`key${index}`, oneMB);
        index++;
        updateStatus();
      } catch (e) {
        console.error(e);
        errorElem.textContent = `Storage limit exceeded!\n\nError Name: ${e.name}\nMessage: ${e.message}`;
      }
    });

    document.getElementById('clearButton').addEventListener('click', () => {
      localStorage.clear();
      index = 0;
      updateStatus();
      document.getElementById('error').textContent = '';
    });

    // Initial display
    updateStatus();
  </script>
</body>
</html>

Result - What Happens When Limit is Reached

When the limit is exceeded in Chrome, this error is thrown:

Storage limit exceeded!

Error Name: QuotaExceededError
Message: Failed to execute 'setItem' on 'Storage': Setting the value of 'key4' exceeded the quota.

The storage is not updated once the quota is reached. The browser throws a QuotaExceededError, indicating that the data cannot be saved.

What About sessionStorage?

I tested the same code using sessionStorage instead of localStorage, and observed a similar result.
When the storage limit was exceeded, a QuotaExceededError was also thrown.

Summary

In Chrome(v135), both localStorage and sessionStorage have approximately a 5MB limit.
When this limit is reached, a QuotaExceededError is thrown.
You can simulate and test this behavior easily using simple JavaScript code.
Always make sure to handle potential storage errors gracefully, especially when dealing with large or dynamic data.

Detecting Page Visibility Changes with the Page Visibility API

Kenji Tomita — Sun, 20 Apr 2025 04:35:08 +0000

In web applications, there are scenarios where you might want to execute specific actions where a user returns to your page (i.e., when the page becomes active again).
For instance, you may wish to display the latest notifications or refresh the content when a user switches back to your tab after browsing other tabs. The Page Visibility API provides an effective way to detect when a page becomes visible to the user and trigger corresponding actions.

What is the Page Visibility API?

The Page Visibility API allows developers to determine the visibility state of a webpage.
It primarily utilizes the following properties and events:

document.visibilityState: Returns a string indicating the visibility state of the document. Possible values include visible and hidden
visibilitychange event: Fired when the visibility state of the document changes.

By leveraging this API, you can control the behavior of your application based on whether the page is currently visible to the user.

Implementation Example

The following code demonstrates how to display and alert when the page becomes visible:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Visibility Test</title>
  <script>
    function updateVisibility() {
      if (document.visibilityState === 'visible') {
        alert('Page is visible');
      }
    }

    document.addEventListener("visibilitychange", updateVisibility);

    // Check initial visibility state
    updateVisibility();
  </script>
</head>
<body>
  <h1>Test Page</h1>
  <p>This is a test page to check visibility change events.</p>  
</body>
</html>

In this example, the updateVisibility function checks if the page is visible and displays an alert accordingly. The function is called both on page load and whenever the visibility state changes.

When Does `document.visibilityState === 'visible'`?

The document.visibilityState becomes visible in the following situations:

Switching back to the tab from another tab
- When a user navigates from a different browser tab back to your page
Restoring a minimized browser window
- When a user minimizes the browser window and then restores it.
Returning to the browser from another application
- When a user switches from another application back to the browser where your page is open.
Unlocking the device sreen
- When a user unlocks their devices, bringing the browser (and your page) back into view.

In there scenarios, the page transitions from a hidden to a visible state, triggering the visibilitychange event.

Summary

The Page Visibility API is a valuable tool for detecting when a user returns to your page, allowing you to execute specific actions such as updating content or resuming media playback. By monitoring the visibility state, you can enhance the user experience and optimize resource usage in your web applications.

For more detailed information and examples, refer to the MDN Web Docs on the Page Visibility API

Using LAST_INSERT_ID() in MySQL to Insert Related Data

Kenji Tomita — Tue, 25 Feb 2025 21:59:44 +0000

Introduction

When using AUTO_INCREMENT in MySQL, you often need to retrieve the ID of a newly inserted record. By using LAST_INSERT_ID(), you can easily obtain the ID generated from the most recent INSERT statement, making easier to insert related data.

Specifically:

Retrieve the ID of the parent table(orders) and link it to the child table(order_items).
Automatically obtain the generated ID without manually setting it, ensuring data consistency.

In such cases, LAST_INSERT_ID() is highly useful. This article explains how to write SQL queries utilizing this function and discusses its behavior when ROLLBACK is executed.

Inserting Related Data Using LAST_INSERT_ID()

Let's take the following two tables as an example:

CREATE TABLE orders (
    id INT AUTO_INCREMENT PRIMARY KEY,
    customer_name VARCHAR(255) NOT NULL
);

CREATE TABLE order_items (
    id INT AUTO_INCREMENT PRIMARY KEY,
    order_id INT NOT NULL,
    product_name VARCHAR(255) NOT NULL,
    FOREIGN KEY (order_id) REFERENCES orders(id)
);

SQL Example

BEGIN;

-- First order
INSERT INTO orders (customer_name) VALUES ('Alice');
SET @order_id_1 = LAST_INSERT_ID();

INSERT INTO order_items (order_id, product_name) VALUES (@order_id_1, 'Product A1'),
                                                         (@order_id_1, 'Product A2');

-- Second order
INSERT INTO orders (customer_name) VALUES ('Bob');
SET @order_id_2 = LAST_INSERT_ID();

INSERT INTO order_items (order_id, product_name) VALUES (@order_id_2, 'Product B1'),
                                                         (@order_id_2, 'Product B2'),
                                                         (@order_id_2, 'Product B3');

COMMIT;

Key Points

Use LAST_INSERT_ID() immediately after INSERT to retrieve the newly generated id.
Use the obtained id to insert related records into order_items.
Start a transaction with BEGIN and finalize it with COMMIT.

This method allows safe insertion of related data without manually checking IDs.

What Happens When ROLLBACK is Used?

If ROLLBACK is executed:

BEGIN;
INSERT INTO orders (customer_name) VALUES ('Charlie');
ROLLBACK;

The AUTO_INCREMENT value is not reset, even though the insert operation is undone.

Practical Example

For instance, in an e-commerce system managing orders(orders) and order items (order_items):

Even it an order is canceled, the id remains skipped
Due to MySQL's AUTO_INCREMENT behavior, rolling back does not reset the id.

Since this is the default MySQL behavior, it is essential to design your system to accommodate missing id values.

Conclusion

LAST_INSERT_ID() allows easy retrieval of the most recently inserted ID.
It is the best way to correctly associate the ID of the parent table(orders) with the child table(order_items).
Even after ROLLBACK, AUTO_INCREMENT values are not reset, so gaps in IDs should be considered in system design.

Be leveraging this method, you can efficiently manage your database operations.

Learning TypeScript's Record Type

Kenji Tomita — Sat, 22 Feb 2025 10:41:00 +0000

TypeScript provides several useful utility types, among which Record is particularly valuable for defining an object type where specific keys K are mapped to values of type T. Introduced in TypeScript 2.1, Record is a flexible way to define object types.

1. What is Record?

Record is a utility type that allows specifying the keys of an object using K while ensuring all values conform to the type T.

Basic Syntax

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

This is a Mapped Type, where each key P in K is mapped to value of type T.

2. Basic Usage of Record

Basic Example

const httpStatusMessages: Record<number, string> = {
  200: "OK",
  404: "Not Found",
  500: "Internal Server Error",
};

In this example, keys are of type number (representing HTTP status codes), and their corresponding values are of type string.

3. Benefits of Record

(1) Restricting Key Types

type StatusCode = 200 | 404 | 500;

const statusMessages: Record<StatusCode, string> = {
  0: 'Unknown', // Object literal may only specify known properties, and '0' does not exist in type 'Record<StatusCode, string>'.
  200: "OK",
  404: "Not Found",
  500: "Internal Server Error",
};

Using an unspecified key results in an error, improving type safety.

(2) Ensuring Type Consistency

type StatusCode = 200 | 404 | 500;

const statusMessages: Record<StatusCode, string> = { // Property '200' is missing in type '{ 404: string; 500: string; }' but required in type 'Record<StatusCode, string>'.
  404: "Not Found",
  500: "Internal Server Error",
};

All keys must be defined, preventing missing values.

One of the key benefits of Record is that it ensures all specified keys are present in the object. This is because it is implemented as a mapped type, meaning that TypeScript expects every key from K to be explicitly defined.

type StatusCode = 200 | 404 | 500;

const statusMessages: {[key in StatusCode]: string} = {
  200: "OK",
  404: "Not Found",
  // 500 is missing, so TypeScript throws an error
};

This expands into:

type StatusMessagesType = {
  200: string;
  404: string;
  500: string;
};

Since 500 is missing in the object, TypeScript will throw an error stating that the property 500 is required but not provided. This ensures that all possible keys are accounted for, reducing potential runtime errors.

(3) Handling Dynamic Keys

const dynamicData: Record<number, string> = {};

dynamicData[1] = "Hello";
dynamicData[2] = "World";

Keys can be added dynamically, which is a key strength of Record.

4. When to use Alternatives to Record

(1) When Using Constant Objects

Using as const ensures that values remain literal types, improving type safety.

type StatusCode = 200 | 404 | 500;

const statusMessages = {
  200: "OK",
  404: "Not Found",
  500: "Internal Server Error",
} as const;

statusMessages[200] = "NG"; // Cannot assign to '200' because it is a read-only property.

5. Conclusion

Record is a powerful utility type in TypeScript that ensures uniform key-value relationships. It is especially useful when restricting key types while maintaining type consistency.

Learning Parent and Child Shells in Bash Scripts

Kenji Tomita — Fri, 22 Nov 2024 23:08:42 +0000

When writing Bash scripts, you may encounter unexpected behaviors caused by the concept of parent shells and child shells. For instance, variables might not update as expected, or process IDs might not align. To understand and solve these issues, $BASHPID is a handy tool for visualizing process relationships.

This article explores how to use $BASHPID to understand the relationship between parent and child shells, while diving into the inner workings of Bash scripts.

1. What is $BASHPID?

$BASHPID is a special variable that represents the process ID of the current Bash process. It lets you identify which process is running your script.

Key Features of $BASHPID

Different values for parent and child shells
- In a parent shell, $BASHPID reflects the overall script process ID, while in a child shell, it represents the new process ID.
Useful for tracing behavior in subshells
- $BASHPID makes it easy to detect process forks or subprocess creations.

2. Basic Example Using $BASHPID

The following script demonstrates the difference between parent and subshells using $BASHPID.

Sample Script

#!/bin/bash

echo "Parent BASHPID: $BASHPID"

echo "Launching a subshell..."
(
  echo "Inside subshell BASHPID: $BASHPID"
)

echo "Parent again BASHPID: $BASHPID"

Output

Parent BASHPID: 36518
Launching a subshell...
Inside subshell BASHPID: 36519
Parent again BASHPID: 36518

Explanation

The parent shell (the whole script) consistently shows $BASHPID as 36518
The subshell creates a new process with a different PID (36519)
After the subshell finishes, the script returns to the parent shell with the original $BASHPID

3. Issues Caused by Parent and Child Shells

Consider the following script, where a variable fails to update conrrectly due to subshell behavior.

Problematic Script

#!/bin/bash

total_sales=0

echo "Parent process BASHPID: $BASHPID"

cat product_data.csv | while IFS=, read -r product_id price || [ -n "$product_id" ]; do
  total_sales=$((total_sales + price))
  echo "Inside while BASHPID: $BASHPID"
done

echo "Final total_sales: $total_sales"

Input File: product_data.csv

This CSV file contains data rows only and does not include a header (e.g., product_id,price).

101,200
102,150
103,300

Output

Parent process BASHPID: 87805
Inside while BASHPID: 87807
Inside while BASHPID: 87807
Inside while BASHPID: 87807
Final total_sales: 0

Explanation

When cat ... | while is used, the while loop runs in a subshell
As result, changes to total_sales only apply to the subshell and do not reflect in the parent shell.
The output of $BASHPID inside the loop confirms that the loop is running in the subshell(87807)

4. Solving Subshell Issues

Using Redirection to Avoid Subshells

Instead of using a pipe, redirect the file input to the while loop. This ensures the loop runs in the parent shell.

Fiexed Script

#!/bin/bash

total_sales=0

echo "Parent process BASHPID: $BASHPID"

while IFS=, read -r product_id price || [ -n "$product_id" ]; do
  total_sales=$((total_sales + price))
  echo "Inside while BASHPID: $BASHPID"
done < product_data.csv

echo "Final total_sales: $total_sales"

Output

Parent process BASHPID: 88815
Inside while BASHPID: 88815
Inside while BASHPID: 88815
Inside while BASHPID: 88815
Final total_sales: 650

Explanation

Redirecting input with < ensures the while loop runs in the parent shell.
The parent shell's $BASHPID remains consistent(88815), and total_sales is updated correctly.

5. Summary

$BASHPID provides a simple way to visualize the relationship between parent and child shells(or subshells)
To address issues caused by subshells, use redirection to run loops in the parent shell.
Understanding subshell creation(via pipes or parentheses) is essential for writing robust Bash scritps

Comparison of Scrollable Layouts with Flexbox and Grid

Kenji Tomita — Fri, 02 Aug 2024 05:04:53 +0000

This blog introduces implementations using Flexbox and Grid to create a scrollable view with items arranged horizontally. We'll explore how to achieve a design where items can be scrolled horizontally, showing three and a half items at a time.

Scrollable Layout with Flexbox

Below is an example using Flexbox for horizontal scrolling, designed to display three and a half items.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      padding: 10px;
      flex-wrap: nowrap;
    }
    .item {
      flex: 0 0 calc(33.33% - 10px);
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

The flex property is used to set the size of each item in Flexbox. Specifically, the flex-basis part of flex: 0 0 calc(33.33% - 10px) determines the base size of each item.

Scrollable Layout with Grid

Next is an example using Grid, also designed to display three and a half items.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc(33.33% - 10px);
      gap: 10px;
      padding: 10px;
      overflow-x: auto;
    }
    .item {
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

In Grid, grid-auto-columns is used to set the size of each item, and grid-auto-flow: column arranges the items horizontally.

Summary

Both Flexbox and Grid make it easy to implement scrollable layouts with items arranged horizontally. Use the approach that best fits your project's design and layout needs.

Differences and Usage of as const and Readonly in TypeScript

Kenji Tomita — Sun, 28 Jul 2024 05:25:46 +0000

In TypeScript, you can use as const and Readonly to specify types more strictly for objects and arrays. This article explains the differences and usage of these features.

Basic Task List Example

Here is an array of objects with description and completed properties.

const tasks = [
  {
    description: 'Buy groceries',
    completed: false,
  },
  {
    description: 'Clean the house',
    completed: true,
  },
  {
    description: 'Finish project',
    completed: false,
  },
]

In this case, the properties of each object are mutable.

Example with `as const`

Using as const makes each object treated as a literal type, making them immutable.

const tasks = [
  {
    description: 'Buy groceries',
    completed: false,
  },
  {
    description: 'Clean the house',
    completed: true,
  },
  {
    description: 'Finish project',
    completed: false,
  },
] as const;

tasks.push({description: 'Buy milk', completed: false}) // Error
tasks[0].description = 'Buy milk' // Error

The above code translates to the following type:

const tasks: readonly [{
  readonly description: "Buy groceries";
  readonly completed: false;
}, {
  readonly description: "Clean the house";
  readonly completed: true;
}, {
  readonly description: "Finish project";
  readonly completed: false;
}]

Each object is treated as part of a readonly array, making operations like adding or removing elements impossible. Additionally, the properties of each object are readonly, preventing any changes to their values.

For example, if there is an unintended property like below, it results in an error during type checking.

const tasks = [
  {
    description: 'Buy groceries',
    completed: false,
  },
  {
    description: 'Clean the house',
    completed: true,
  },
  {
    descriptionnnnnnnn: 'Finish project',
    completed: false,
  },
] as const;

tasks.forEach((task) => {
  console.log(task.description); // Error
})

Example with `as const satisfies`

While as const makes the elements readonly and literal types, as const satisfies combines literal types with type constraints.

const tasks = [
  {
    description: 'Buy groceries',
    completed: false,
  },
  {
    description: 'Clean the house',
    completed: true,
  },
  {
    description: 'Finish project',
    completed: false,
  },
] as const satisfies { description: string, completed: boolean }[]

The above code translates to the following type:

const tasks: [{
  readonly description: "Buy groceries";
  readonly completed: false;
}, {
  readonly description: "Clean the house";
  readonly completed: true;
}, {
  readonly description: "Finish project";
  readonly completed: false;
}]

The elements of the array themselves are readonly, but the array itself is not. This means you can change the elements of the array but not the properties within the elements.

Using satisfies, you ensure that each object conforms to a specific type ({ description: string, completed: boolean } in this case).

const tasks = [
  {
    description: 'Buy groceries',
    completed: false,
  },
  {
    description: 'Clean the house',
    completed: true,
  },
  {
    descriptionnnnnnnn: 'Finish project', // Error
    completed: false,
  },
] as const satisfies { description: string, completed: boolean }[]

Example with `Readonly`

Using Readonly makes the properties of the object immutable.

const tasks: Readonly<{ description: string, completed: boolean }>[] = [
  {
    description: 'Buy groceries',
    completed: false,
  },
  {
    description: 'Clean the house',
    completed: true,
  },
  {
    description: 'Finish project',
    completed: false,
  },
];

tasks.push({description: 'Buy milk', completed: false}) // OK
tasks[0].completed = true // Error

The above code translates to the following type:

const tasks: Readonly<{
  description: string;
  completed: boolean;
}>[]

All properties of the array elements are readonly, making them immutable. However, you can still add or remove elements from the array.

Summary

In this article, we introduced the usage and differences between as const, as const satisfies, and Readonly. By using these features, you can manage types more strictly in TypeScript and prevent unintended changes.

Implementing Exit Popups with beforeunload and history.pushState

Kenji Tomita — Fri, 29 Mar 2024 04:27:39 +0000

In web development, enhancing user experience is a pivotal aspect. One way to improve this experience is by preventing users from inadvertently leaving a page, especially when they are in the middle of entering important information. This article introduces how to use the beforeunload event and history.pushState method to display exit popups, along with a discussion on cross-browser behavior, including Safari's specific responses.

Utilizing the `beforeunload` Event

The beforeunload event triggers when a user attempts to leave a page (e.g., by clicking a link or changing the URL manually). Utilizing this event, we can prompt the user with a warning dialog, asking them to confirm their intention to leave the page. Below is a sample code snippet that demonstrates how to implement a standard warning dialog when the user tries to navigate away from a page containing a text input.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>
<body>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      window.addEventListener('beforeunload', function(e) {
        // Display the default exit warning dialog
        e.preventDefault();
      });
    });
  </script>
  <div>
    <input type="text">
  </div>
</body>
</html>

Leveraging `history.pushState` for Back Navigation

By combining the history.pushState method with the popstate event, you can customize the browser's back button behavior. The following sample showcases how to display a custom confirmation dialog when a user, having made changes to input fields, attempts to leave the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>
<body>
  <script>
    const setupLeaveConfirmation = () => {
      history.pushState(null, '', location.href);

      window.addEventListener('popstate', function() {
        if (!hasInputChanged()) {
          // If no changes were made, allow leaving the page
          history.go(-1);
          return;
        }
        // If changes were made, show a confirmation dialog
        confirm('Leave this page?');
      });  
    }

    const hasInputChanged = () => {
      const inputs = document.querySelectorAll('input:not([type="hidden"])');
      return Array.from(inputs).some(input => input.value.trim() !== '');
    }

    document.addEventListener('DOMContentLoaded', setupLeaveConfirmation);
  </script>
  <div>
    <input type="text" />
  </div>
</body>
</html>

Cross Browser Behavior and Safari Considerations

When utilizing these techniques, it's important to be mindful of different browser behaviors. Specifically, in Safari, the beforeunload event may not support custom message displays, and the behavior of history.pushState and popstate events can differ from other browsers. Developers are encouraged to conduct thorough cross-browser testing to ensure a consistent experience for all users.

Conclusion

Using the beforeunload event and history. pushState method to implement exit popups is an effective way to prevent users from accidentally losing information by leaving a page prematurely However, understanding the differences in browser behavior, particularly for Safari, and conducting appropriate testing, is crucial in providing a consistent user experience across all browsers.

Dart's Unnamed Extensions: A Basic Usage Guide

Kenji Tomita — Sun, 11 Feb 2024 14:25:05 +0000

Dart is designed to make coding more efficient by providing a variety of useful features. Among these, unnamed extensions are particularly handy when you want to provide extension functionality within a specific scope only. This article will explain the basic usage of unnamed extensions in Dart.

What are Unnamed Extensions?

Unnamed extensions are a syntax in Dart that allows you to define an extension without explicitly naming it. These extensions are only visible within the library (file) they are defined in and cannot be accessed from outside their scope. This allows for the safe addition of custom functionality that only makes sense within a specific file or module while avoiding API conflicts.

Example of Unnamed Extension

Here is a simple example of an unnamed extension that provides a default value for int? types.

// extension.dart
extension on int? {
  int get orDefault {
    return this ?? 10;
  }
}

This extension adds an orDefault getter to the int? type, providing a default value of 10 if the variable is null.

Example of Calling the Extension

Attempting to use the above extension from a different file would look like this:

// main.dart
import 'extension.dart';

void main() {
  int? myValue;
  // Compile error: The getter 'orDefault' isn't defined for the type 'int'.
  print(myValue.orDefault);
}

This code results in a compile error because the unnamed extension defined in extension.dart is not visible from main.dart. This demonstrates that unnamed extensions are only available within the library they are defined in.

Reference Link

The Dart official documentation provides more detailed information about unnamed extensions. For further details, please refer to the following link:

Dart Language - Extension Methods

Conclusion

Unnamed extensions are a powerful feature in Dart for making code writing more efficient and safe. By appropriately using this feature to add custom functionality needed only within a specific scope, you can build a cleaner and more maintainable codebase.

Safe Handling of Enums in Flutter Apps with OpenAPI Generator

Kenji Tomita — Sat, 04 Nov 2023 01:18:25 +0000

Overview

In the development of iOS and Android apps using Flutter, the use of type-safe data structures is key to enhancing the robustness of applications. Enums are very suitable for representing a set of fixed values, but careful handling is required when integrating with API responses. In this article, I will explain how to use enums in Flutter and their caveats, and introduce how these issues can be resolved by using the enumUnknownDefaultCase=true option.

Background

OpenAPI Version: 3.0.0
Generator Used: dart-dio

The Convenience and Pitfalls of Enums

Enums are extremely convenient in Flutter for managing states or handling selection options concisely. However, when enum values are closely tied to backend APIs, unexpected API responses can cause problems with enum usage.

Inconsistency Between Enums and APIs

When API responses contain enum values, those values must match the Flutter app's enum definitions exactly. However, if the API unexpectedly returns new values, the frontend code will by default either throw an error or risk ignoring the new values.

Problems with Dynamic Data Sets

When enum values are added on the server side, existing client apps cannot recognize new values until they are updated. This issue is especially serious in environments where the API evolves without frequent application updates.

What is `enumUnknownDefaultCase=true`?

The OpenAPI generator has an option called enumUnknownDefaultCase. When set to true, it allows handling unknown enum values as a default case.

Issues Resolved by This Option

Backward Compatibility: Even if new enum values are added, existing applications continue to operate without crashing.
Improved Maintainability: Changes in the API do not require frequent updates to the client.

Sample Code

When using the OpenAPI Generator, the yaml file definition looks like this:

components:
  schemas:
    Response:
      type: object
      required:
        - status
      properties:
        status:
          type: string
          enum:
            - ACTIVE
            - INACTIVE

This definition, when used to generate Dart code, behaves in such a way that it throws an exception if it receives any enum values other than the specified ACTIVE or INACTIVE.

const ResponseStatusEnum _$responseStatusEnum_ACTIVE =
    const ResponseStatusEnum._('ACTIVE');
const ResponseStatusEnum _$responseStatusEnum_INACTIVE =
    const ResponseStatusEnum._('INACTIVE');

ResponseStatusEnum _$responseStatusEnumValueOf(String name) {
  switch (name) {
    case 'ACTIVE':
      return _$responseStatusEnum_ACTIVE;
    case 'INACTIVE':
      return _$responseStatusEnum_INACTIVE;
    default:
      throw new ArgumentError(name);
  }
}

However, setting the enumUnknownDefaultCase=true option includes a new item called unknownDefaultOpenApi in the generated code, which allows for the safe handling of unknown values in case of enum mismatches.

const ResponseStatusEnum _$responseStatusEnum_ACTIVE =
    const ResponseStatusEnum._('ACTIVE');
const ResponseStatusEnum _$responseStatusEnum_INACTIVE =
    const ResponseStatusEnum._('INACTIVE');
const ResponseStatusEnum _$responseStatusEnum_unknownDefaultOpenApi =
    const ResponseStatusEnum._('unknownDefaultOpenApi');

ResponseStatusEnum _$responseStatusEnumValueOf(String name) {
  switch (name) {
    case 'ACTIVE':
      return _$responseStatusEnum_ACTIVE;
    case 'INACTIVE':
      return _$responseStatusEnum_INACTIVE;
    case 'unknownDefaultOpenApi':
      return _$responseStatusEnum_unknownDefaultOpenApi;
    default:
      return _$responseStatusEnum_unknownDefaultOpenApi;
  }
}

With this behavior change, even if the API adds new enum values, the client application can handle those values as unknownDefaultOpenApi without needing an update. This enhances the flexibility of the app and reduces the maintenance effort.

Conclusion

The use of enums is a very powerful tool in Flutter app development, but it is important to consider the integration with the backend. By utilizing the enumUnknownDefaultCase=true option, we can flexibly respond to unexpected changes in the API.

Forem: Kenji Tomita

Understanding Laravel's .env Caching and How to Avoid Common Pitfalls

How .env and Configuration Caching Work

Location and Contents of Cache Files

How to Avoid Cache Issues

A Tool I Built to Check .env vs Cache Differences

Note on Artisan Commands and Current Limitations

How to Install

How to Run

Sample Output

Summary

Learning About SWAR

Introduction

What is SWAR?

Comparison of SWAR and Conventional Addition

Conventional Addition

Addition Using SWAR

Note: Why use numbers like 0x04070608?

Why Add 0xF6?

Why is it Fast?

Comparison

Actual Code

What is bcmath?

Use of SWAR-like Techniques in bcmath

Conclusion

Testing Storage Limits of localStorage and sessionStorage in Chrome

Introduction

Differences Between localStorage and sessionStorage

Environment

Code Example - Add 1MB per Click & Monitor Usage

Result - What Happens When Limit is Reached

What About sessionStorage?

Summary

Detecting Page Visibility Changes with the Page Visibility API

What is the Page Visibility API?

Implementation Example

When Does document.visibilityState === 'visible'?

Summary

Using LAST_INSERT_ID() in MySQL to Insert Related Data

Introduction

Inserting Related Data Using LAST_INSERT_ID()

SQL Example

Key Points

What Happens When ROLLBACK is Used?

Practical Example

Conclusion

Learning TypeScript's Record Type

1. What is Record?

Basic Syntax

2. Basic Usage of Record

Basic Example

3. Benefits of Record

(1) Restricting Key Types

(2) Ensuring Type Consistency

(3) Handling Dynamic Keys

4. When to use Alternatives to Record

(1) When Using Constant Objects

5. Conclusion

Learning Parent and Child Shells in Bash Scripts

1. What is $BASHPID?

Key Features of $BASHPID

2. Basic Example Using $BASHPID

Sample Script

Output

Explanation

3. Issues Caused by Parent and Child Shells

Problematic Script

Input File: product_data.csv

Output

Explanation

4. Solving Subshell Issues

Using Redirection to Avoid Subshells

Fiexed Script

Output

Explanation

5. Summary

Comparison of Scrollable Layouts with Flexbox and Grid

Scrollable Layout with Flexbox

Scrollable Layout with Grid

Summary

How `.env` and Configuration Caching Work

A Tool I Built to Check `.env` vs Cache Differences

When Does `document.visibilityState === 'visible'`?

Example with `as const`

Example with `as const satisfies`

Example with `Readonly`

Utilizing the `beforeunload` Event

Leveraging `history.pushState` for Back Navigation

What is `enumUnknownDefaultCase=true`?