Posts on Kaisekukun

Practical use of modern CSS new features (subgrid/container queries)

Wed, 14 Oct 2026 00:00:00 +0900

Paradigm shift from Viewport standards to free-standing components

Traditional responsive web design relies on the overall width of the screen (viewport). However, in today’s world of component-oriented design, the available width of UI parts differs depending on the parent element (sidebar or main column) in which they are placed.

With the advent of CSS Grid’s “Subgrid” and “Container Queries”, layout flexibility and maintainability have dramatically improved.

Recipe 1: `subgrid` to synchronize button positions while aligning card heights

Even if the number of characters in the title is uneven in a multi-column card UI, the heights of “images, titles, text, and buttons” in each card can be perfectly aligned in a horizontal line.

Efficient front-end testing with Vitest and Testing Library

Tue, 06 Oct 2026 00:00:00 +0900

Increased development speed brought about by Vite native testing environment

Jest has been the mainstream for front-end testing for many years, but its setup complexity and overhead were issues. By combining “Vitest” and “React Testing Library”, which share Vite settings, you can get an extremely fast testing environment.

We have summarized practical principles for building test suites that are highly maintainable and hard to break.

Principle: Test “user behavior” not “implementation details”

Directly testing a component’s internal state results in brittle tests that break with every refactoring. The basic idea is to verify the behavior of the screen as it appears to the user.

UI component design with web accessibility (a11y) in mind

Tue, 29 Sep 2026 00:00:00 +0900

Accessibility foundation that balances design and usability

Web accessibility (a11y) is a quality standard that improves the experience for everyone, not just for people with specific disabilities, but also for keyboard users and users with temporary injuries or one-handed operation.

We organize the main points of component design so that anyone can operate it intuitively.

Modals are the part where accessibility violations occur most often. You must ensure that the following three requirements are met.

Introduction to full-stack WebAPI created with Next.js and Hono

Tue, 22 Sep 2026 00:00:00 +0900

Development revolution brought about by Next.js App Router × Hono

Next.js’ Route Handlers are powerful, but the complexity of boilerplate and type sharing that comes with increasing endpoints tends to be an issue.

By incorporating the web standards-compliant ultra-lightweight framework “Hono” into the API layer, you can easily create a sophisticated end-to-end, type-safe RPC (Remote Procedure Call) environment.

Step 1: Hono initialization with Catch-all Route

Place a wildcard route in App Router and delegate all /api/* to Hono.

Type-safe coding techniques to practice in TypeScript 5 series

Tue, 15 Sep 2026 00:00:00 +0900

Type design philosophy required in the TypeScript 5.x era

TypeScript 5 series introduced a number of new features that maximize the accuracy of type inference without compromising the developer experience. Code that relies on excessive type assertions (as) is a breeding ground for run-time errors. With the kata system on your side, we will explain practical techniques that will naturally narrow down your kata.

1. `const` type parameter: smarter literal type inference

Previously, if you wanted to preserve literal types in function arguments, you had to add as const on the caller side. TypeScript 5.0’s const type parameter allows you to force literal inference on the function definition side.

Super fast web application built with Next.js 15

Tue, 08 Sep 2026 00:00:00 +0900

“Next.js 15” has finally been released in beta with the recent update, and is causing a lot of excitement in the front-end world. I also immediately upgraded my personal project from Next.js 14 to 15 and tried out some new features. In this article, I will provide a review of the ``amazing evolution’’ that I felt after actually touching it.

The evolution of Next.js 15 that surprised me when I touched it

If I had to describe it in one word, it would be “the ultimate improvement in developer experience (DX) and performance.” Next.js has been in the middle of a major paradigm shift since App Router was introduced, and version 15 feels like it’s nearing completion.

Introduction to performance tuning in backend development

Thu, 03 Sep 2026 00:00:00 +0900

As the number of users of web services increases, they will inevitably encounter performance problems such as slow response times and server crashes. Front-end optimization is important, but the back-end, which is responsible for fundamental data processing, is often the bottleneck.

This article provides a list of practical checkpoints for engineers working on improving backend performance for the first time.

🚨 5 checkpoints to review

Performance tuning will not be effective if performed blindly. First, check whether the following items are the cause.

Learning from Autumn Night: Latest front-end technology trends

Sun, 30 Aug 2026 00:00:00 +0900

It’s the season when you can hear the faint sounds of insects outside your window. I love the summer months when I write code in an air-conditioned room with a cold drink in hand, but as an engineer, there’s nothing quite like the long autumn nights when you can leisurely look at new technology documents while feeling the cool night breeze.

This time, I would like to relax a little and look back on the technological trends that have been making waves in the front-end world this year in an essay style.

Implementing secure authentication functionality: Introduction to NextAuth.js

Fri, 28 Aug 2026 00:00:00 +0900

When developing a web application, one thing that cannot be avoided is the implementation of an “authentication function.” However, implementing password hashing, session management, CSRF countermeasures, OAuth integration, etc. on your own from scratch poses high security risks and requires significant development costs.

Therefore, this time we will introduce some best practices for implementing secure authentication using “NextAuth.js” (currently Auth.js), which is the de facto standard for authentication in Next.js environments.

How React Server Components works and usage examples

Sat, 22 Aug 2026 00:00:00 +0900

React Server Components (RSC) is revolutionizing front-end architecture. You may have heard the name, but do you know exactly how it differs from SSR (server side rendering) and what kind of processing is going on behind the scenes? In this article, we will take a deep dive into its technical mechanism and consider examples of its practical use.

Definitive difference from SSR

Conventional SSR was a technology that generated HTML on the server side during the initial load and returned it to the browser. But then the browser had to load JavaScript and re-run (hydrate) the component to make it interactive. In other words, the component code itself was ultimately being downloaded to the browser.

Automated deployment and leveraging preview environments with Vercel

Sun, 16 Aug 2026 00:00:00 +0900

“Mr. 〇〇, now that the implementation has been completed, could you pull the branch in your local environment and check if it works?” Are you wasting your time in team development due to such interactions? The hassle of setting up an environment and waiting time for local builds significantly reduces the productivity of the entire team.

Vercel’s automated deployment and preview environment elegantly resolved this issue and caused a paradigm shift in front-end development workflows.

Differences between GraphQL basics and REST API

Tue, 11 Aug 2026 00:00:00 +0900

“REST API” has long been the industry standard as an API design method. However, in recent years, as front-ends have become more sophisticated, an increasing number of companies are adopting GraphQL. Before we get into the technical details, let’s first think about the difference between the two using the analogy of ordering at a restaurant.

Limitations of REST API in Restaurants

REST API is like a “food court” with different counters for each menu. For example, let’s say you want to order a hamburger set. You must first go to the burger counter (/api/burgers/1), then to the potato counter (/api/sides/potato), and finally to the drinks counter (/api/drinks/coke).

Best practices for web performance optimization

Wed, 05 Aug 2026 00:00:00 +0900

Website display speed is a very important factor that is directly connected to user abandonment rate and SEO. However, when it comes to performance optimization, the common wisdom of the past that ``just do it this way’’ may actually have the opposite effect in modern browser environments.

Here, we’ll debunk common performance improvement myths and explore true best practices.

Myth 1: “All images should be lazy loaded”

It’s easy to misunderstand that if your images are heavy, adding loading="lazy" will make them all faster. While it is certainly effective for off-screen images, it is a big mistake to apply Lazy Load to images that are in first view (the first area you see when you open a page). The browser postpones this, resulting in significantly worse LCP (Largest Contentful Paint). The correct answer is to load first-view images with priority (consider fetchpriority=“high”`).

Introduction to backend construction using Supabase

Fri, 31 Jul 2026 00:00:00 +0900

A savior for front-end engineers?

“Building the backend is time-consuming, making it difficult to prototype the app.” “Supabase” is rapidly gaining support among developers who have such concerns in recent years. It is often talked about as an alternative to Firebase, but what exactly is the difference?

We have summarized frequently asked questions in Q&A format.

Q1: What is Supabase in one word?

A: It is an open source “BaaS (Backend as a Service)”. Based on PostgreSQL, it is surprisingly easy to incorporate the complete set of functions required for a backend, such as a database, authentication function, storage, and real-time listener, into your project.

How to compare and choose headless CMS

Sat, 25 Jul 2026 00:00:00 +0900

The “headless CMS” architecture, which separates the front end and back end (administration screen), has become firmly established in modern web production. However, when it comes to introducing it, there are many options such as “Contentful”, “microCMS”, and “Strapi”, and many people are confused about which one to choose.

In this article, we will suggest how to choose the most suitable headless CMS according to the characteristics and situation of your project.

Efficient UI development using Tailwind CSS

Mon, 20 Jul 2026 00:00:00 +0900

Until a few years ago, when it came to front-end styling, it was common practice to come up with unique class names according to naming conventions such as BEM, and to create designs by going back and forth to CSS files. But now, that landscape has completely changed with “Tailwind CSS”. Why has the utility-first concept attracted so many developers?

This time, for those who are considering implementing Tailwind CSS, we will thoroughly analyze its advantages and disadvantages.

Build robust web applications with TypeScript

Tue, 14 Jul 2026 00:00:00 +0900

JavaScript is a very flexible and easy-to-write language, but its flexibility can sometimes lead to unexpected bugs during large-scale development. I passed a number to a function that expected a string'' or I accessed a non-existent property from an API response’’ - everyone has experienced these errors at least once.

In this article, we will use a problem-and-solution approach to understand why TypeScript is essential for modern web application development.

Next.js App Router basics and benefits of introduction

Thu, 09 Jul 2026 00:00:00 +0900

“App Router” was introduced in Next.js 13 and has now become standard. The concept has changed significantly from the previous Pages Router, so some people may still be hesitant to migrate. This article provides a step-by-step guide to the basics of understanding App Router.

Step 1: Understand the differences in directory structure

In the previous Pages Router, the file name in the pages directory was used as URL routing (for example, pages/about.tsx → /about).