DEV Community: Kazutora Hattori

How to fix the problem of the right side being completely black when creating a function to convert a web page to PDF

Kazutora Hattori — Thu, 25 Dec 2025 09:19:46 +0000

Introduction

I'm personally developing a web app using the Qiita API to download Qiita articles. While implementing an article that allows downloading Qiita articles as PDFs, I encountered an issue where the right side of the generated PDF was completely black.
I couldn't figure out the cause and it was quite stumping.

Cause

The problem was that I was using CSS designed for web screen display to generate the PDF (A4 size) as well.

Web page CSS is designed to stretch and shrink the layout to fit the browser screen size (a wide horizontal display area).

PDF, on the other hand, is a "paper" with fixed width and height, like A4 size.

As a result, when converting HTML displayed wide using CSS for screens to PDF,
the horizontal portions that did not fit within the A4 size were not handled correctly,
resulting in a problem where the right side of the PDF was black.

Solution

The solution was simple:
Create separate CSS for PDF generation.

Specifically, we created a separate CSS for PDFs,
assuming A4 size, in addition to the CSS for screen display.

The PDF CSS takes into consideration the following points:

Specify the width in mm units
Fix the background color to white
Avoid using flex or 100vw for screens

css .qiita-preview { width: 190mm; /* Fit to A4 size */ background: #fff; color: #000; }`

As a result, the layout, which had been overflowing horizontally,
fitted properly to A4 size,
and the issue of the black right side of the PDF was resolved.

Summary

The problem was solved by separating the CSS for screens and PDFs,
and preparing a layout assuming A4 size.
When generating PDFs, it's important to consider "screen display" and "paper display" separately.

Cause and solution for "Module 'markdown-it' not found" in TypeScript (@types/markdown-it)

Kazutora Hattori — Sun, 21 Dec 2025 09:34:42 +0000

Introduction

While developing an app with TypeScript, I received the error:

Cannot find module 'markdown-it' or its corresponding type declarations

This article briefly summarizes how to resolve this issue.

Solution

Cause

Because markdown-it is a JavaScript library, it did not include the type definition file (.d.ts) required by TypeScript.
In other words, the error occurred because markdown-it is a JavaScript library and does not contain type definitions.

Solution (This is all you need)

Install the type definition package.
tsx npm install -D @types/markdown-it`

This will allow TypeScript to recognize type information, and the error will be resolved immediately.

Summary

The cause of the error was not the implementation, but simply a lack of type definitions for TypeScript. When using JavaScript libraries with TypeScript, type definitions may not be included.

[Personal Development] Developed a tech blog that can integrate Qiita articles with internal blogs

Kazutora Hattori — Sun, 07 Dec 2025 09:02:58 +0000

Introduction

In this personal development project, I integrated the Qiita API and MicroCMS to build a tech blog that automatically collects and displays Qiita and internal technical articles.

App Overview

On the home page, Qiita and MicroCMS articles are displayed in a card UI.
Clicking the "See More" button takes you to the list pages for personal articles and blog articles, respectively.
Clicking on an article card takes you to the Qiita article page or blog details page, where you can read the article directly.

The app we created uses Next.js (Turbopack + TypeScript), TailwindCSS, DaisyUI, MicroCMS, and the Qiita API to automatically retrieve Qiita articles, retrieve MicroCMS articles, display them as a list using a card UI, create a blog detail page, use CI/CD (GitHub Actions), and even automatically deploy to Firebase/Vercel.

Technologies Used

Category	Contents
Frontend	Next.js (Turbopack) + TypeScript
UI	tailwindCSS + DaisyUI
Data Acquisition	Qiita API / MicroCMS API
Server Processing	React Handler / API Routes
Deployment	Firebase Hosting
CI/CD	Jest + React Testing Library
Automation	Makefile (dev / test / deploy)

Development Difficulties and Solutions

Unifying the Data Structures of Qiita and MicroCMS Was Difficult

Qiita and MicroCMS differ significantly in the data formats and field names they can acquire, making it impossible to use common UI components as is.

Example: Qiita data
{
"title": "Introduction to React",
"created_at": "2024-01-02",
"url": "https://qiita.com/xxx/items/abc123"
}

Example: MicroCMS data
{
"id": "blog01",
"title": "Building a blog with Next.js",
"publishedAt": "2024-02-10",
"thumbnail": { "url": "https://..." }
}

Date formats, URLs, thumbnails, etc. were all inconsistent, making it extremely difficult to unify and handle them on the front end.
So, as shown below, we reformatted the articles into a uniform format on the API Route side before returning them to the front end.

return {
title: item.title,
thumbnail: item.thumbnail?.url || DEFAULT_IMAGE,
date: item.publishedAt || item.created_at,
url: item.url || `/blogs/${item.id}`,
};

It was difficult to unify the card UI between DaisyUI and TailwindCSS.

Qiita and MicroCMS differ in the presence or absence of thumbnails and image size,
which easily disrupted the card height and layout.

In addition, responsive support and grid adjustments were required, making it surprisingly difficult to create a card design that looked consistent across all posts.

Points I learned and grew from

I gained a deeper understanding of API design and data formatting.

I was able to understand the process of data acquisition → formatting → return using API Route.

I gained a practical understanding of Next.js server-side processing.

I gained experience using Next.js's server functions, including route handlers, environment variables, and asynchronous processing.

In particular, I believe I gained practical knowledge essential for production development, such as calling external APIs and designing JSON responses.

Conclusion

This development project involved a wide range of technologies, including Qiita, MicroCMS, Next.js, and CI/CD.
However, by breaking down the MVP into smaller parts, I was able to implement it without any hesitation.

Differences between DaisyUI's "btn", "btn-primary" and "button-primary"

Kazutora Hattori — Thu, 04 Dec 2025 08:41:21 +0000

Introduction

When I was creating buttons using Next.js + TailwindCSS + DaisyUI,
I ran into an issue where one button was blue and the other was purple, resulting in mixed colors.

Here, I'd like to summarize DaisyUI's notation method.

Conclusion: These three are completely different

→ Create only the button shape
→ Almost no color (gray)

btn-primary

→ The blue main button provided by DaisyUI

button-primary

→ The color is determined by the theme (light/corporate, etc.)
→ The button is purple in the Light theme.

Example

<button class="btn">Shape Only</button>
<button class="btn btn-primary">Blue</button>
<button class="btn button-primary">Theme Color (light = purple)</button>

Why purple?

Because the primary color in DaisyUI's default theme (light) is purple (#570DF8).

Summary

The only difference in color is the class used (btn-primary/button-primary).

Summary of the error "Cannot find module 'function qt(e={})...'" that occurs when using Tailwind CSS v4 + Vite

Kazutora Hattori — Wed, 03 Dec 2025 07:13:34 +0000

Introduction

When installing Tailwind CSS v4 in a React + Vite environment,
the following error occurred immediately after starting the development server:

Cannot find module 'function qt(e={}){...}'
Require stack:
- postcss.config.js

This article summarizes how to fix this error.

Cause

The Tailwind v3 configuration is being used for Tailwind v4.

Doesn't work with Tailwind v4.
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

Solution

1. Place index.css in the correct location.

Create (or modify) src/index.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Rewrite PostCSS configuration for Tailwind v4.

Change postcss.config.js to the v4-specific syntax:

import tailwindcss from "@tailwindcss/postcss";

export default {
plugins: [
tailwindcss(),
],
};

Summary of results after restoration

Tailwind styles are back, and the layout is back to normal.

[React] How I fixed the bug that prevented multiple Qiita articles from being downloaded as .md

Kazutora Hattori — Fri, 28 Nov 2025 08:45:08 +0000

Introduction

I was developing an app using React to download Qiita posts retrieved from the Qiita API as .md files.
However, I ran into a problem: "Even though I checked multiple posts and attempted to download them all at once, only one was downloaded."

In this article, I'll explain the actual symptoms and share the root cause of why only one post was downloaded.

Cause

In conclusion, the problem was caused by calling URL.revokeObjectURL(url) too quickly.

The bulk download process can be summarized as follows:

Create a Blob from the article text (a Blob is a container for storing data, a mechanism for manipulating file contents with JavaScript).
Create a "temporary URL" using URL.createObjectURL(blob). (URL.createObjectURL(blob) is a function that automatically generates a temporary URL for accessing a Blob.)
Start the download using a.href = url → click().

When you're done using it, destroy it using URL.revokeObjectURL(url).
(URL.revokeObjectURL(url) is a function that deletes the temporary URL.)

The problem lies in the following code.

const url = URL.createObjectURL(blob);
a.href = url;
a.click();
URL.revokeObjectURL(url); // ← This was called immediately.

Because the browser discarded the URL before the download had finished,
the first URL worked, but the second and subsequent URLs became invalid, resulting in only one URL crashing.

Solution

I fixed the issue by calling URL.revokeObjectURL(url) with a slight delay.

The final code that worked reliably

const handleDownload = (title: string, body: string) => {
const blob = new Blob([body], { type: "text/markdown" });
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = `${title}.md`;
a.click();

/ Immediately abandoning the download will break → Wait a bit
setTimeout(() => URL.revokeObjectURL(url), 100);
};

Even when checking multiple articles and downloading them all at once, they are all saved correctly.

Summary

Multiple downloads work reliably with appropriate delays.

October 2025: Review of learning records

Kazutora Hattori — Sun, 16 Nov 2025 06:46:57 +0000

Introduction

Hello everyone. My name is K.H. and I'm currently studying at a university in Vancouver, Canada.
In this article, I'll look back on what I learned and what I've become able to do in October.

October Progress

Personally developed a map app to solve the problem of not being able to find a place to concentrate on studying.

What I Accomplished in October

I became self-sufficient from planning to design, implementation, and deployment.
Front-end development using React / TypeScript
Back-end and database integration using Supabase / MongoDB / Node.js / Express
Utilizing the Google Maps API and external APIs
Deployment using Firebase Hosting / Vercel / EC2
Building CI/CD using GitHub Actions
Test creation using Jest + React Testing Library
Establishing the habit of publishing technical articles (Qiita)

What I Learned at My Current University

Deploying a web app using AWS (EC2 / Auto Scaling / Load Balancer)
Linux Operations (File Operations, Process Management, Service Management)
Web Server (Apache / Nginx) Basics and Publishing a Static Site
Networking Basics (OSI Model, IPv4, Subnetting, DHCP)
Packet Network Building Exercises with Tracer

Conclusion

Continue to thoroughly study the output and solidify your knowledge

[Solo Development] Finding a place to study in Vancouver! Creating a map app with React and Supabase

Kazutora Hattori — Tue, 28 Oct 2025 08:22:10 +0000

Introduction

Hello!
For this assignment, we developed a self-study spot search app called "Study Spot Vancouver."
Using React, TypeScript, Supabase, Google Maps API, and Chakra UI,
we implemented a system that displays pins on a map, filters by criteria, and transitions to a details page.

This assignment allowed me to experience the entire process of API integration, state management, and UI design,
and it was a great opportunity to gain a deeper understanding of how a map app works.

Reason for Creating the App

Solving a Personal Challenge When searching for a place to study in Vancouver, Google Maps only offers broad categories like "cafes" and "libraries."

However, when it comes to actually studying, important information is available only on-site, such as quietness, availability of power outlets, and Wi-Fi.

In particular, there was very little information available about "places where you can study aloud," such as for reading aloud or practicing presentations, so I had to check locally each time.

To address this inconvenience, I decided to create a map app that allows users to search for study spots based on their criteria.

App Overview

GitHub Repository:
https://github.com/kazukashima/kadai5.git

This app displays study spots within Vancouver on a map, allowing users to easily filter their search by Wi-Fi, power, and voice access.

I also personally defined and implemented the following MVPs:

MVP1: Built a development environment using React, TypeScript, and Vite. Deployed to Firebase Hosting. Automated with make deploy.
MVP2: Built CI/CD with GitHub Actions. Executed automatic testing and deployment upon push.
MVP3: Incorporated the Google Maps API and displayed data retrieved from Supabase as pins on the map.
MVP4: Implemented a filter function that allows users to filter by Wi-Fi, power, and voice access.
MVP5: Clicking on a pin takes users to a detailed page displaying photos, addresses, and business hours. Add a link that opens in Google Maps.

Home Screen

By toggling the WiFi, Power, and Talking buttons in the upper left,
you can narrow your search by whether each spot offers WiFi, has a power outlet, and allows private conversation (out loud).

Clicking on a pin on the map
will display a pop-up with the facility name and basic information such as "WiFi, power, and voice-over availability."

Clicking the "View Details" button will take you to the spot's details page, where you can view information such as the address and photos.

Click the "Open" link on the details page to open the actual Google Maps page, search for routes, and view the surrounding area.

Technologies Used

Category	Technologies Used / Contents
Frontend	React + TypeScript + Vite
UI Library	Chakra UI (toggle buttons, responsive design)
Database	Supabase (cloud management of self-study spot information)
Map Drawing	Displaying pins using the Google Maps API (@vis.gl/react-google-maps)
Deployment	Firebase Hosting (automatic update to production environment)
CI/CD	GitHub Actions (testing and automatic deployment on push)
Automation	Makefile (simple execution with `make deploy` / `make test`)

Development Difficulties and Solutions

1. Google Maps API and React Re-rendering Issues

Even when React re-rendered, the Google Maps display did not update,
and pins did not change even when switching filters.

The cause was that React's Virtual DOM and Google Maps rendering were running on separate systems.
To solve this, we adopted a method of changing the key and re-rendering, such as <Map key={JSON.stringify(filters)}>.

<Map key={JSON.stringify(filters)} ... >

2. Filter State Management (Handling Boolean Types)

When switching between three conditions (WiFi, power, and voice output),
we managed them all together using useState, allowing for dynamic updates.

const [filters, setFilters] = useState({
wifi: false,
power: false,
talking: false,
});

By using toggleFilters to toggle specific keys each time a button is pressed,
multiple conditions can be easily switched.

3. Transition to Details Page and Google Maps Link Generation

Clicking a pin on the map transitions to a details page, where a "Open in Google Maps" link is dynamically generated.

<a
href={`https://www.google.com/maps?q=${spot.latitude},${spot.longitude}`}
target="_blank"
rel="noopener noreferrer"
>
Open in Google Maps
</a>

We learned that by using template literals (...),
we can dynamically construct a URL from latitude and longitude.

Points of Growth/Lessons

1. I gained the ability to integrate with external APIs.

I was able to experience the process of integrating external services, such as the Google Maps API and Supabase, into my own app.
The biggest benefit was understanding API key management, asynchronous processing, and handling environment variables.

2. I learned to design with an awareness of data structure.

By considering the Supabase table design (id, name, latitude, longitude, wifi, power, talking) in conjunction with UI behavior, I gained the ability to be aware of the relationship between data and UI.

3. I understood the relationship between state and rendering.

Through the issue of pins not updating when switching filters, I learned that React re-rendering and external library (Google Maps) rendering operate separately.

Impressions/Conclusion

There are still challenges remaining, such as improving the UI/UX and adding data to Supabase.
However, through the experience of designing my own MVP and completing the app in stages, I feel I have acquired the ability to proceed with development with a purpose.

Going forward, I would like to further increase data, improve the UI/UX, and develop the app into one that can actually provide value.

[JavaScript] How to Dynamically Create a URL to Open a Latitude and Longitude Location on Google Maps

Kazutora Hattori — Mon, 27 Oct 2025 07:25:40 +0000

Introduction

While building a map app using React and Superbase, I encountered a situation where I wanted to create a link to open a specific spot on Google Maps.

The Google Maps coordinate link format is useful for this.

Basic URL Structure

In Google Maps, you can open a location by specifying a latitude and longitude using the following syntax:

https://www.google.com/maps?q=<lat>,<lng>

For example, if you want to display

Latitude: 49.2827

Longitude: -123.1207

https://www.google.com/maps?q=49.2827,-123.1207

Opening this link in a browser will display that location with a pin.

Dynamic Creation with JavaScript

When using variables in React, etc.,
construct the URL using a template literal.

const lat = 49.2827;
const lng = -123.1207;

const googleMapUrl = `https://www.google.com/maps?q=${lat},${lng}`;

console.log(googleMapUrl);
// → https://www.google.com/maps?q=49.2827,-123.1207

Using a template literal (...),
you can embed the variable ${} within a string.

Example using React

For example, retrieving spot information from Supabase:

<a
href={`https://www.google.com/maps?q=${spot.latitude},${spot.longitude}`}
target="_blank"
rel="noopener noreferrer"
>
Open in Google Maps
</a>

Writing it like this, clicking will open the location of the spot in Google Maps.

Understanding the difference between and in React Router

Kazutora Hattori — Sun, 26 Oct 2025 08:33:21 +0000

Introduction

When building apps with React, I often wonder whether to use <a> or <Link> for page transitions.

In this article, I'll briefly summarize the differences between them.

What happens when you use `<a>`?

The standard HTML <a> tag commands the browser to "open a new page."

<a href="/map">Go to Map</a>

In this case:

The entire page is reloaded.

The React app's state is reset.

It's like the app is restarting.

In other words, the "speed" and "fluidity" of a SPA (Single Page Application) are lost.

What happens when you use `<Link>`?

The component provided by React Router
"handles page transitions on the JavaScript side."

import { Link } from "react-router-dom";

<Link to="/map">Go to Map</Link>

In this case:

The component switches without reloading the page.

React state is preserved.

Transitions are fast and smooth.

References

I've summarized the differences between terminal and shell

Kazutora Hattori — Sat, 25 Oct 2025 07:48:22 +0000

Introduction

I didn't fully understand the difference between a terminal and a shell, so I'd like to summarize it again.

What is a terminal?

A terminal refers to the hardware, such as a keyboard (input) and a display (output), through which users input and output characters.

A software version of a terminal is called a "terminal emulator."

Examples: GNOME Terminal, Windows Terminal, iTerm2, etc.

What is a shell?

A shell is software that interprets and executes commands entered by the user.

Examples: bash, zsh, fish.

Summary

A terminal is a place to type.
A shell is a program that understands and executes commands.

Explaining JSON.stringify() - The basics of converting objects to strings

Kazutora Hattori — Fri, 24 Oct 2025 07:07:12 +0000

Introduction

While developing React, I had the opportunity to use key={JSON.stringify(filters)} in a component, so I'd like to summarize it here.

What is JSON.stringify()?

JSON.stringify() is a JavaScript function that converts objects and arrays to strings.

Basic Usage

const user = { name: "calros", age: 20 };
const json = JSON.stringify(user);

console.log(json);
// → '{"name":"calros","age":20}'

The object is converted to a JSON-formatted string.

Summary

JSON.stringify() is a function for safely handling objects as strings.
In JavaScript, it's often not possible to store or send data as is. Converting data to a string using JSON.stringify() can be useful in a variety of situations.

DEV Community: Kazutora Hattori

How to fix the problem of the right side being completely black when creating a function to convert a web page to PDF

Introduction

Cause

Solution

Summary

Cause and solution for "Module 'markdown-it' not found" in TypeScript (@types/markdown-it)

Introduction

Solution

Cause

Solution (This is all you need)

Summary

[Personal Development] Developed a tech blog that can integrate Qiita articles with internal blogs

Introduction

App Overview

Technologies Used

Development Difficulties and Solutions

Unifying the Data Structures of Qiita and MicroCMS Was Difficult

It was difficult to unify the card UI between DaisyUI and TailwindCSS.

Points I learned and grew from

I gained a deeper understanding of API design and data formatting.

I gained a practical understanding of Next.js server-side processing.

Conclusion

Differences between DaisyUI's "btn", "btn-primary" and "button-primary"

Introduction

Conclusion: These three are completely different

Example

Why purple?

Summary

Summary of the error "Cannot find module 'function qt(e={})...'" that occurs when using Tailwind CSS v4 + Vite

Introduction

Cause

Solution

1. Place index.css in the correct location.

2. Rewrite PostCSS configuration for Tailwind v4.

Summary of results after restoration

[React] How I fixed the bug that prevented multiple Qiita articles from being downloaded as .md

Introduction

Cause

Solution

The final code that worked reliably

Summary

October 2025: Review of learning records

Introduction

October Progress

What I Accomplished in October

What I Learned at My Current University

Conclusion

[Solo Development] Finding a place to study in Vancouver! Creating a map app with React and Supabase

Introduction

Reason for Creating the App

App Overview

Technologies Used

Development Difficulties and Solutions

1. Google Maps API and React Re-rendering Issues

2. Filter State Management (Handling Boolean Types)

3. Transition to Details Page and Google Maps Link Generation

Points of Growth/Lessons

1. I gained the ability to integrate with external APIs.

2. I learned to design with an awareness of data structure.

3. I understood the relationship between state and rendering.

Impressions/Conclusion

[JavaScript] How to Dynamically Create a URL to Open a Latitude and Longitude Location on Google Maps

Introduction

Basic URL Structure

Dynamic Creation with JavaScript

Example using React

Understanding the difference between and in React Router

Introduction

What happens when you use <a>?

What happens when you use <Link>?

References

I've summarized the differences between terminal and shell

Introduction

What is a terminal?

What is a shell?

Summary

Explaining JSON.stringify() - The basics of converting objects to strings

Introduction

What is JSON.stringify()?

What happens when you use `<a>`?

What happens when you use `<Link>`?