How Rolldown Works: Symbol Linking, CJS/ESM Resolution, and Export Analysis Explained

Introducing Fusion: Vibe Code at Any Scale

Fusion is the first AI-powered visual canvas for entire teams to build, edit, and ship code at any scale using existing codebase, design systems and workflows

続・TypeScriptの`Diagnostics`について

Leader Spotlight, Evolving and adapting alongside ecommerce, with John Arquette

John Arquette shares his experience working in the early days of ecommerce and how it’s drastically transitioned over time.

TypeScript: supporting the new class <code>Iterator</code> at the type level

In ECMAScript 2025, JavaScript gets a class Iterator with iterator helper methods. This class conflicts with TypeScript’s existing types for iterators. In this blog post, we explore why that is and how TypeScript solves that conflict.

libxml2 Maintainer Ends Embargoed Vulnerability Reports, Citing Unsustainable Burden

Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.

When to use OpenAI vs. open source LLMs in production

OpenAI vs open source LLMs for frontend developers: integration guide, costs, performance comparison, implementation tips.

UX designers vs. developers: Who really owns accessibility (A11y) in UX design?

We’re done treating accessibility as an afterthought. This guide helps designers embed it into their workflow — start to finish.

How to Keep Up With New CSS Features

How do you stay informed of new CSS features when the language evolves quickly and information is spread all around the web? Sacha Greif has some tips from his work running an annual survey focused on new CSS features.

TypeScript 環境構築ガイドラインを書いてLLMに再現させる

Skipping product discovery: When it’s better to go ahead and ship

Discovery isn’t always worth it. Learn when to skip the research, trust your gut, and ship fast without slowing down your product team.

Leader Spotlight: Cascading down a product-led culture, with Mike Fantigrassi

Mike Fantigrassi shares his experience helping transition NASM to a product-led growth model and the challenges that came with it.

Animating zooming using CSS: transform order is important… sometimes

How to get the right transform animation.

Leader Spotlight: Elevating healthcare through evolving technology, with Rob Helton

Rob Helton talks about the potential for technology to impact the bottom line across the healthcare industry.

TypeScriptCompilerのベースラインとテストの仕組み

2025-06-15のJS: Safari 26 Beta、pnpm 10.12、Jest 30

JSer.info #738 - Safari 26 betaがリリースされました。

A2A プロトコルの JavaScript SDK を試してみる

A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。

Secretlint v10.0.0リリース: デフォルトでシークレットをマスク表示するように変更、Node.js 20+のサポート

機密情報を検出するSecretlintのv10.0.0をリリースしました！

CSS の ident() による動的な custom-ident の生成

CSS で Custom Ident 値を動的に生成する ident() が提案されている。策定中の仕様をベースに解説する。

We're Still Underestimating What AI Really Means

Most people are focused on short-term gains. Another tech wave, another startup to spin up. It

Presentations: The State of React and the Community in 2025

Slides and video for my talk on how React has been developed and current concerns in the community

The State of React and the Community in 2025

Detailed thoughts on how React has been developed over time, and explanations for common community confusion and concerns

The Growing Risk of Malicious Browser Extensions

Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.

7 common CSS navigation menu mistakes and how to fix them

Navigation menu errors are common, even for seasoned developers. Learn seven common navigation menu errors and how to solve them using CSS.

Comparing the top React toast libraries [2025 update]

See how the top React toast libraries stack up in 2025, including React Hot Toast, Sonner, NotiStack, and React-Toastify.

Claude Code による技術的特異点を見届けろ

TypeScriptの`Diagnostics`について

If your research isn’t inclusive, neither is your design

Inclusive design starts long before the Figma file. Learn how inclusive UX research can help you build better, more accessible products from the ground up.

Breaking Boundaries: Building a Tangram Puzzle With (S)CSS

We put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math, we managed to bring our Tangram puzzle to life, no JavaScript required.

2025 Blockchain and Cryptocurrency Threat Report: Malware in the Open Source Supply Chain

An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to comprom...

TanStack Start vs. Next.js: Choosing the right full-stack React framework

Explore a detailed comparison between TanStack Start and Next.js — two powerful full-stack React frameworks. Learn about architecture, routing, data fetching, performance, and use cases to choose the right tool for your next project.

Angular v20 might seem boring — Here are 6 reasons it’s not

Learn about the major upgrades in Angular v20, including the linkedSignal API, incremental hydration, and new Gen AI tools and documentation.

How to use AI tools for your customer discovery

Learn how to use AI for faster, smarter customer discovery—without losing the human insight that makes product work effective.

バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう

バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。

Claude Code 版 Orchestaror で複雑なタスクをステップ実行する

Worker Threads in Node.js: A Complete Guide for Multithreading in JavaScript

In this guide, you’ll learn everything you need to know about worker threads—how they work, when to use them, how to implement them

Leader Spotlight: Building a scalable, flexible LMS, with Matthew Pizzi

Matthew Pizzi shares how he helped strategize and build Contentstack’s Academy, a learning management and training and certification program.

A complete guide to UX design techniques

Streamline your UX process with proven techniques for research, ideation, prototyping, and testing — explained step by step.

Vibe-based UI building with Google Stitch — Is this the future of frontend?

Build a responsive, multi-page e-commerce site with Stitch, Google&#039;s new AI-powered UI design and development tool.

Get Vercel-level deployment without Vercel-level prices

Explore how to build and deploy a Next.js app to Cloudflare Workers to enjoy Vercel-like performance with more flexibility and lower costs.

Safariの `contrast-color()` など: Cybozu Frontend Weekly (2025-06-10号)

pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs

pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.

Suppressions of Suppressions

I heard you like linting.

I'm Doing a Little Consulting

Personal update post.

Mock up a website in five prompts

Learn how to create a website mockup in minutes using AI-assisted tools. This guide walks through building a bakery site from concept to working prototype.

I asked ChatGPT to help me design — here’s what worked

I’m not a prompt engineer. Just a designer who figured out a simple structure that gets way better AI output. Here it is.

Top 5 Next.js alternatives for React developers

Looking for a Next.js alternative and want to keep using React? Discover the best frameworks to consider and where they shine.

Node.js Moves Toward Stable TypeScript Support with Amaro 1.0

Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.

textlint v14.8.0をリリースしました - MCP(Model Context Protocol)をサポート

textlint v14.8.0をリリースしました！

typescript-mcp で AI に LSP のリファクタリング機能を与える

Creating an Auto-Closing Notification With an HTML Popover

The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Popovers can be dismissed a number of ways, but there is no option to auto-close them. Preethi has a technique you can use.

sveltejs/esrap のコードを読む

claude code でローカルなMCPサーバーを叩けるようにする

OpenAI Agents の TypeScript SDK

OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。

JavaScript PrimerのNotebookLMが利用可能になりました！

JavaScript PrimerのNotebookLMが利用可能になりました。NotebookLMは、Googleが提供するAIを活用したノートブック環境で、登録したソースに対して質問をしたり、情報を検索したりすることができます。

フロントエンドアプリケーションがエージェントに接続する方法を標準化する AG-UI

AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。

PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials

A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.

Better CSS Shapes Using shape() — Part 3: Curves

This is the third article in a series about the CSS shape() function. We&#039;ve covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.

2025-06-06のJS: Rolldown-Vite、Vitest 3.2、React RouterのGovernance Model

JSer.info #737 - RustベースのRolldownを利用したRolldown-Viteがリリースされました。

Socket Now Supports pylock.toml Files

Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.

Destructive npm Packages Disguised as Utilities Enable Remote System Wipe

Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.

Exploring the CSS contrast-color() Function… a Second Time

The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.

The State of CSS 2025 Survey is out!

The State of CSS 2025 Survey dropped a few days ago, and besides anticipating the results, it&#039;s exciting to see a lot of the new things shipped to CSS reflected in the questions.

JSX/TSXのASTを、できる限り元のコード文字列に戻したい

How Imports Work in RSC

A layered module system.

Build React and Material UI Apps using AI

Builder.io is an enterprise AI for React and MUI that works with your existing code, offers visual editing, integrates with Figma, & empowers your entire team.

Claude Code のタスクの完了を通知する方法

AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。

Getting Creative With HTML Dialog

So, how can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS using ::backdrop, backdrop-filter, and animations.

`import type { A }`と、`import { type A }`の違いで、Viteのチャンク配分が変わることもある

Malicious Ruby Gems Exfiltrate Telegram Tokens and Messages Following Vietnam Ban

Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.

Malicious npm Packages Target BSC and Ethereum to Drain Crypto Wallets

Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.

Design to Code with the Figma MCP Server

Figma MCP servers let AI access design data directly, improving design-to-code workflows. Learn how to set up & use this tool, and see its current limitations.

TC39 Advances Array.fromAsync, Error.isError, and Explicit Resource Management to Stage 4

TC39 advances 9 JavaScript proposals, including Array.fromAsync, Error.isError, and Explicit Resource Management, which are now headed into the ECMASc...

.d.tsファイルをちゃんと使うために必要な知識

Streaming UIプラクティス

コーディングエージェントの現状の整理とエンジニアの仕事の変化について

AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。

RSC for LISP Developers

Quoting for modules.

TS で Effect System を作ってみた

Progressive JSON

Why streaming isn't enough.

TypeScript でエフェクトシステムを再現したい

Better CSS Shapes Using shape() — Part 2: More on Arcs

This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.

TSKaigi 2025 に参加しました

色々セッションを聴いてきたので、その感想です。沢山ありすぎたので、聴いてて気になったものだけ感想書いてます。 The New Powerful ESLint Config with Type Safety https://talks.antfu.me/2025/tskaigi/1 ESLint の Flat Config についてのセッション。新 config への移行を補助するツール (@eslint/migrate-config, Config Inspector) が色々紹介されていた。存在そのものは知っていたけど、実際どういうことができるのかとか、動いている様子とかは見たことがなかった…

Why Does RSC Integrate with a Bundler?

One does not simply serialize a module.

2025-05-29のJS: TypeScript Native Previews、Firefox 139、Angular 20、Chrome 137

JSer.info #736 - TypeSciptのGo言語でのネイティブ実装である@typescript/native-previewが公開されました。

One Roundtrip Per Navigation

What do HTML, GraphQL, and RSC have in common?

Introducing N|Sentinel: Your AI-Powered Agent for Node.js Performance Optimization

At NodeSource, we're excited to unveil a new feature in the N|Solid platform that takes Node.js application performance to a new level: N|Sentinel

TSKaigi 2025 で CSS Modules Kit について発表しました

「TypeScript Language Service Plugin で CSS Modules の開発体験を改善する」というタイトルで発表しました。 speakerdeck.com CSS Modules には、Find All References などの言語機能が動かないといった問題があります。本発表では、その問題を解決するためのツールキット「CSS Modules Kit」を紹介しました。 github.com CSS Modules Kit は、Find All References といった主要なな言語機能をサポートしています。更に、VS Code 以外の様々なエディタで動くとい…

RooCode に自動でリファクタさせるオーケストレーター用プロンプト

What We Know (So Far) About CSS Reading Order

The reading-flow and reading-order proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You’d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility Guidelines (WCAG 2.2).

Deno で eslint を動かす

GitHub Pagesでも`SharedArrayBuffer`を使いたい

tsgo をビルドしてLSPから会話する

Metaに学ぶ、大規模開発のデータフェッチ設計と最適化

Claude Code Action で Claude Code を GitHub に統合しよう

Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。

The Beauty of TanStack Router

Yes, it's type-safe, but there's so much more to love about TanStack Router.

TS特化Clineプログラミング(テキスト版)

TSKaigi 2025で「技術書をソフトウェア開発する」という発表をしました

TSKaigi 2025で「技術書をソフトウェア開発する」というタイトルで発表をしました。スライドは次のページで公開しています。

JSer.info 14周年

JSer.info は、2011年1月16日から開始して、2025年1月16日で14周年を迎えました🎉

Better CSS Shapes Using shape() — Part 1: Lines and Arcs

This is the first part of a series that dives deep into the shape function, starting with shapes that use lines and arcs.

You can style alt text like any other text

Clever, clever that Andy Bell. He shares a technique for displaying image alt text when the image fails to load. Well, more precisely, it&#039;s a technique to apply styles to the alt when the image doesn&#039;t load, offering a nice UI fallback for what would otherwise be a busted-looking error.

Fit-to-Width , CSS Carousel など: Cybozu Frontend Weekly (2025-05-20号)

SVG to CSS Shape Converter

Shape master Temani Afif has what might be the largest collection of CSS shapes on the planet with all the tools to generate them on the fly. There&#039;s a mix of

2025-05-20のJS: Zod 4、"use client"、Fresh 2 Roadmap

JSer.info #735 - Zod 4がリリースされました。

A Reader’s Question on Nested Lists

Answering a reader&#039;s question about how to create a complex numbering system with CSS list counters.

`@typescript-eslint/typescript-estree`をブラウザで動かし、型チェックもやる

TypeScript で AI エージェントを構築する VoltAgent

VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。

React Router の Server Components 対応

React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。

NodeSource N|Solid Runtime Release - May 2025: Performance, Stability & the Final Update for v18

We're excited to share the latest N|Solid Runtime release for May 2025.

HTML Email Accessibility Report 2025

Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its

気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様)

AI for grown-ups

AI tools often generate quick but messy code. Let's examine how AI can integrate with professional workflows to be productive without sacrificing quality.

Scroll-Driven Animations Inside a CSS Carousel

Hey, isn&#039;t there a fairly new CSS feature that works with scroll regions? Oh yes, that&#039;s Scroll-Driven Animations. Shouldn&#039;t that mean we can trigger an animation while scrolling through the items in a CSS carousel?

GiHhub+Zenn 連携で vscode markdown で画像を Ctrl-V したい

Styling console text in Node.js

In this blog post, we explore how we can style text that we log to the console in Node.js. Some of the examples use a Unix shell but most of the code should also work on Windows.

Figma Sites: The built-in Figma to website tool

Use Figma Sites to publish designs as websites quickly. Learn how it works, its best use cases, and shortcomings.

This Isn’t Supposed to Happen: Troubleshooting the Impossible

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.

Figma Make: Bring designs to life with AI

Figma Make enables AI-powered prototyping from designs. We examine how it works and compare it to tools for generating production-ready code from Figma designs.

大フィッシング攻撃時代における攻撃手法と自衛手段の考察

GW のさなか、有名投資家のテスタ氏を中心に、大規模な乗っ取り攻撃の存在が報告された。当初 900 億円程度と試算された被害額は、数日のうちに 3000 億円を超えると修正され、富裕層のみならず一般市民も無視できない状況となっている。今、一体何が起こっているのか。金融資産を...

Vercel で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。

Cloudflare で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。

Error インスタンスかどうか判定する Error.isError() メソッド

Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。

Docker の MCP Toolkit を試してみる

Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。

JSer.info のMCPサーバを公開しました

AI Agentなどから、JSer.info のデータへアクセスするための Model Context Protocol (MCP)サーバーを公開しました。

Next.js 14.0.0+ で Pages Router / basePath / Middleware 併用時に発生する不具合とその回避策について

社内のあるプロダクトで Next.js を v13 系から v15 系にアップデートしたところ、トップページにブラウザバックで戻ると、エラーが発生するようになってしまった。 エラーの原因を調べてみると、何故かトップページにブラウザバックで戻った時、pageProps が空オブジェクトになっているようだった。 不具合再現の様子。ブラウザバックでトップに戻ると、pageProps が空になる。 実はこれは Next.js の不具合で、以下に issue がある (まあ僕が報告したのだけど...)。 github.com Next.js 側で修正されるのを待ってたのだけど、不具合の報告から1年以上経…

`@typescript-eslint/parser`と`@typescript-eslint/typescript-estree`の関係

Static as a Server

You wouldn't download a site.

Reactコンポーネントが「純粋である」とはどういうことか？　丁寧な解説

2025-05-07のJS: koa v3.0.0、Node.js 24とNode.js 18 EOL、`//# allFunctionsCalledOnLoad`

JSer.info #734 - Koa v3.0.0がリリースされました。

Node.js 24 Is Here: What You Need to Know

Node.js 24 has officially landed! This release brings some exciting improvements to JavaScript developers, making Node.js faster, more capable,

RSC for Astro Developers

Islands, but make it fractal.

What is the Agent2Agent (A2A) Protocol?

The Agent2Agent (A2A) Protocol enables AI agents to collaborate across networks, streamlining discovery, authentication, and data exchange.

N|Solid 6.1.8: Major AI Upgrades, UX Enhancements, and Tracing Improvements

our latest release bringing an exciting wave of new features, critical improvements, and behind-the-scenes optimizations.

ESLint を MCP サーバーとして実行する

ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。

Moonbit の宣言的UIライブラリ Rabbit-TEA を試してみる

遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た

actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す

actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。

Reactの文脈での「副作用」は2種類あるのではという話

Letters from Andrew Ng / Agentic Design Patterns のまとめ

Functional HTML

Tags on both sides.

TypeScriptのテストファイルの読み方

Converting values to strings in JavaScript has pitfalls

Converting values to strings in JavaScript is more complicated than it might seem: Most approaches have values they can’t handle. We don’t always see all of the data.

Fine-tune an LLM: Why, when, and how

Fine-tuning LLMs can save tokens, guarantee output formats, & bake in edge-case fixes. Learn when to fine-tune & how to do it effectively for your AI projects.

Categorize Your Dependencies

Concurrent Optimistic Updates in React Query

How to build optimistic UI that is resilient to race conditions, even when multiple mutations update the same entity concurrently.

UI の一部を非表示にする React の Activity コンポーネント

React の新しい実験的なコンポーネントとして `<Activity>` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。

2025-04-27のJS: Node v22.15.0、Reactの実験的な機能、Node.jsとV8 GC

JSer.info #733 - Node.js v22.15.0がリリースされました。

AIと本音トーク：エンジニアの仕事、これからどうなる？

「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。

The Perfect Cursor AI setup for React and Next.js

A comprehensive guide to optimize Cursor AI for React and Next.js development. Learn settings, features, & workflows to boost coding efficiency and quality.

JavaScript PrimerのES2025対応を手伝ってくれるContributorとSponsorを募集しています

JavaScript Primer (https://jsprimer.net/) では、毎年ECMAScriptの新しい仕様への追従を行っています。

3PCA 31 日目: 3rd Party Cookie 廃止の廃止

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 31 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/adven...

What Does "use client" Do?

Two worlds, two doors.

Visual Editor 3.0: Prompt, Design, and Develop on One Canvas

Visual Editor 3.0 merges design & development with AI, allowing teams to create apps from prompts, import Figma designs, & integrate with existing codebases.

Cursor Rules for Better AI Development (article)

Learn TypeScript cursor-rules for AI development. Covers best practices, JSDoc, structure. Differentiates workspace & global rules for better AI coding

Introducing Zod 4 beta など : Cybozu Frontend Weekly (2025-04-22号)

deno lint plugin で例外処理に関するルールを作った

仕事で使うための Cloudflare Workers (WIP)

前半は手元で動かしながら要点を掴み、後半は概念を掴んで何ができるかを知ることを目的とします。

Impossible Components

Composing across the stack.

仕事で使うための Cloudflare Workers 入門 Day 5 - ServiceBinding

仕事で使うための Cloudflare Workers 入門 Day 4 - R2/KV/D1/Vectorize

仕事で使うための Cloudflare Workers 入門 Day 3 - Queue/CronTriggers/Workflow

RubyKaigi 2025 に参加した

同僚の id:onk さんや id:Pasta-K さんにぜひ来てほしいと誘われたので、参加してみました。普段は JavaScript ばかり書いてて 全く Ruby 書いたことないです。RubyKaigi 初参加です。せっかくなので感想を書いておきます。 プログラミング言語の話が多い 「RubyKaigi は Ruby の言語開発者が話すカンファレンスで、プログラミング言語の話ばかりしている」と事前に聞いていて心構えはしていたのですが、その想像の3倍はプログラミング言語の話をしていて驚きました。JIT の話、静的型の話、irb の話、ビルドシステムの話、パーサーの話、Linter の話、La…

Ink を使って CLI アプリを React で書く

Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。

DJControl Mix Ultraを買った

DJControl Mix Ultraという、モバイル向けのDJコントローラーを買って遊んでいた。

MCP サーバーの Streamable HTTP transport を試してみる

MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。

Figma to Android: Convert designs to mobile apps in seconds

Convert Figma designs to Android apps using Builder's Visual Copilot plugin. Save time and maintain pixel-perfect designs across screens.

2025-04-17のJS: Zod 4 beta、Next.js 15.3とRspack、LLMを使ったテストのマイグレーション

JSer.info #732 - Zod 4 betaがリリースされました。

How to Build Your Own MCP Server

Learn to build a Model Context Protocol (MCP) server for AI assistants. This tutorial covers creating tools, resources, and prompts for a CSS tutor example.

The Best Node.js Observability Tools in 2025: N|Solid vs New Relic, Datadog, and More

With a range of observability and APM tools available, choosing the right one for your stack and team can be challenging but it can save you hours

フロントエンドカンファレンス東京の開催決定など : Cybozu Frontend Weekly (2025-04-15号)

閲覧履歴があってもリンクの色が変わらないケースについて

4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。しかし、これは長年問題視されてきた、ユーザのプライバシー保護の...

JSX Over The Wire

Turning your API inside-out.

Figma to iOS: Convert designs to mobile apps in seconds

Convert Figma designs to iOS apps using Builder's Visual Copilot plugin. Save time and maintain pixel-perfect designs across screens.

Deploying TypeScript: recent advances and possible future directions

In this blog post we look at: The current best practice for deploying library packages: .js, .js.map, .d.ts, .d.ts.map, .ts Recent new developments in compiling and deploying TypeScript: type stripping, isolated declarations, JSR, etc. What the future of deploying TypeScript might look like: type stripping in browsers, etc.

Ideas for making TypeScript better at testing types

In this blog post, we examine how we can test types in TypeScript: First, we look at the library asserttt and the CLI tool ts-expect-error. Then, we consider which functionality could be built into TypeScript.

How Rolldown Works: Module Loading, Dependency Graphs, and Optimization Explained

AI エージェントの連携を標準化する A2A プロトコルを試してみる

AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。

Designing Agentic AI Systems: A Web Dev’s Guide

Web developers' skills in system design and API integration are key for building effective AI agent systems. Learn about core concepts and common patterns.

TypeScriptのASTにおける`JSDocXxxType`というノード

Introducing the Visual Copilot CLI: Smart & Granular Figma to Code

A CLI tool that integrates Figma designs into your codebase, generating production-ready code that matches your existing components and styling patterns.

Should You Declare Return Types? (article)

Here's a quick .cursor/rules addition you can make for handling return types in TypeScript. Return Types When declaring functions on the top-level

2025-04-09のJS: express 5.1(正式リリース)、Safari 18.4、ESLint bulk suppressions

JSer.info #731 - Express 5.1.0がリリースされました。

React for Two Computers

Two things, one origin.

Hello Tokyo!

Figma to Jetpack Compose: Convert designs to Kotlin in seconds

Visual Copilot turns Figma designs to Jetpack Compose code, automating UI implementation for Android developers. It generates responsive layouts & Kotlin code.

`Bun.serve()`だけでルーターが書けるようになってた

コーディング AI エージェントを自作してみよう

好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。

Reactの2025年トレンド予測など: Cybozu Frontend Weekly (2025-04-01号)

2025-04-03のJS: Next.js LTS Policy、Rsdoctor 1.0、zx@lite

JSer.info #730 - Next.jsがLTSポリシーを公開しました。現在のメジャーバージョンをActive LTSとし、それ以前のメジャーバージョンは最初のリリースから2年間はMaintenance LTSとしてメンテナンスされます。

Web における Security, Safety, Trust の相対性

我々は、インターネット上において「信頼」できるサービスを、「安全」に使うことに、「安心」を求める。プライバシーは守られ、不正な取引には加担せず、詐欺被害も受けたくない。技術的に言えば、通信は暗号化し、個人は匿名化し、データは秘匿し、それによって Secure で Safet...

What is the Model Context Protocol (MCP)?

MCP aims to standardize AI tool integration, potentially simplifying development and enabling more capable AI assistants. Current adoption is limited.

4 ステップでモダンな tsconfig.json を作る

tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュメントは丁寧にかかれているが... JavaScript や TypeScript の仕様、型の知識、歴史的経緯などを知らないと理解しづらい 推奨されるオプションが変わっていく 言語やエコシステムの進化/変化によって変わる 最近だと Node.js の TypeScript サポートで変わった 「オプションの細かい意味とかは一旦…

How Node.js Handles Async Operations

Node.js is designed to be asynchronous and non-blocking, making it highly efficient for handling multiple operations at once.

What is Libuv: The Engine Powering Node.js and Beyond

Libuv is one of the most crucial components behind Node.js, yet many developers aren't fully aware of its role in enabling asynchronous I/O operations.

株式会社はてなに入社しました

株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記

Community Showcase (Q1 2025)

An update on what the community has been up to in Q1 of 2025

悪いのは全部 Eve だと思ってた

いつも本ブログを読んで頂いている皆様、そしてセキュリティ関係者の皆様へ。この度は、筆者による "Eve" に対する不適切な引用、および、原稿内における不名誉な扱いについて、この場を借りて謝罪させていただきます。

My Open Source Origin Story

A brief story of how I got into Open Source

Vercel AI SDK で MCP クライアントをツールとして利用する

MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。

How to make any design convert better with Builder.io

Learn practical Figma auto layout techniques to create responsive, conversion-focused designs that seamlessly translate to code with Builder.io's plugin.

Form Control Styling Level 1 など: Cybozu Frontend Weekly (2025-03-25号)