Passkey への道 #2

「パスワード」が認証の最重要要素で、いかにそれを死守するかを「サービス側」「ユーザ側」双方で考え続けてきたのが、平成の認証だった。ところが、それは早々に破綻し、「パスワードだけでの認証」に限界が来た。そこで、導入されたのが二要素認証(2FA: 2-Factor Auth)だ。

uv cache prune

If you're running low on disk space and are a uv user, don't forget about uv cache prune: uv cache prune removes all unused cache entries. For example, the cache …

Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability

Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.

Designers write good copy — but not the kind users actually need

This isn’t about grammar or style. It’s about making sure the words do something — guide, calm, clarify, convert.

A PM’s guide to calculated risk-taking

Act fast or play it safe? Product managers face this daily. Here’s a smarter way to balance risk, speed, and responsibility.

Devcontainers, Little Snitch, macOS TCC - protecting developer laptops

How we implement different layers to secure our developer laptops & environments: Devcontainers, outbound firewall, macOS Transparency Consent and Control framework, and SSH agent for Git keys.

AstroでPDFファイルからルートを生成したい

Leader Spotlight: Improving predictability using agile, with Emmett Ryan

Emmett Ryan shares how introducing agile processes at C.H. Robinson improved accuracy of project estimations and overall qualitative feedback.

Passkey への道 #1

まず、今使われているパスワード認証について、これがなぜ問題で、なぜ Password-Less が求められているのかを振り返っていこう。

Checkbox UI design: Best practices and examples

The checkbox is one of the most common elements in UX design. Learn all about the feature, its states, and the types of selection it offers.

New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025

CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.

The Best AI Coding Tools in 2025

Discover the best AI tools for coding in 2025 and transform how you build with these powerful coding assistants.

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Better CSS Shapes Using shape() — Part 4: Close and Move

The shape() function's close and move commands may not be ones you reach for often, but are incredibly useful for certain shapes.

Leader Spotlight: Balance vs. compromise in product management, with Suvrat Joshi

Suvrat Joshi shares the importance of viewing trade-off decisions in product management more like a balance than a compromise.

Passkey への道 #0

フィッシング詐欺や Infostealer を用いた金融サイトの乗っ取り詐欺などは、その被害総額が 5000 億円 を突破してもなお拡大し続けている。米国で発生した 2024 年のオンライン詐欺被害は 166 億ドル に達した。証券や銀行サービスからは「FIDO 認証登録の...

I Shipped a macOS App Built Entirely by Claude Code

Indragie Karunaratne has "been building software for the Mac since 2008", but recently decided to try Claude Code to build a side project: Context, a native Mac app for debugging …

速習 Claude Code

BlackHole 2ch を Mac から削除する

値の補間計算を簡潔に記述できる CSS の `progress` 関数

CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。

Serving 200 million requests per day with a cgi-bin

Jake Gold tests how well 90s-era CGI works today, using a Go + SQLIte CGI program running on a 16-thread AMD 3700X. Using CGI on modest hardware, it’s possible to …

CSS Modules の拡張構文について

CSS Modules は、CSS をローカルスコープ化する仕組み。*.module.css に CSS を記述すると、bundler がクラスセレクターなどをユニークなものへと変換してくれる。クラスセレクターなどが *.module.css ファイルごとに異なる名前に変換され、擬似的にローカルスコープ化が実現される。 developer.hatenastaff.com CSS Modules では、基本的には CSS の標準の構文をそのまま利用する。しかし、一部 CSS Modules 独自の構文がある。実際どのようなものがあるのかというのを、紹介する。 CSS Modules の公式ドキュ…

AI Agentのコマンド実行にTouch IDを使った「人間の確認」を挟むCLIツール confirm-pam を作った

macOS で Touch ID を使った「人間の確認」ができるシンプルな CLI ツール confirm-pam を作りました。

How to build a web-based AI agent with Stagehand and Gemini

Learn how to build a browser-based AI agent with Stagehand and Gemini to automate tasks like navigation, extraction, and interaction using natural language.

Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB

Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.

2025-07-04のJS: ECMAScript 2025、Rspack 1.4、Deno 2.4、Bundle Sizeの改善

JSer.info #740 - ECMAScript 2025 が正式にリリースされました。

8 More Malicious Firefox Extensions: Exploiting Popular Game Recognition, Hijacking User Sessions, and Stealing OAuth Credentials

Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.

TIL: Rate limiting by IP using Cloudflare's rate limiting rules

My blog started timing out on some requests a few days ago, and it turned out there were misbehaving crawlers that were spidering my /search/ page even though it's restricted …

I built something that changed my friend group's social fabric

I absolutely love this as an illustration of the thing where the tiniest design decisions in software can have an outsized effect on the world. Dan Petrolito noticed that his …

The MCP client for design handoffs

MCP clients let AI agents connect to your tools, but most are either chat-only or IDE-only. Fusion bridges design and dev workflows.

I’ve designed with data — here’s what we’re getting wrong

Over-optimizing for data can kill creativity in UX. Learn how to bring intuition and empathy back into your design process.

Getting started with Claude 4 API: A developer’s walkthrough

This guide explores how to use Anthropic's Claude 4 models, including Opus 4 and Sonnet 4, to build AI-powered applications.

Official Go SDK for MCP in Development, Stable Release Expected in August

The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.

Designing drag and drop UIs: Best practices and patterns

Let's explore why and when to use drag and drop, discussing real-world examples, platform-specific considerations, and accessibility tips.

What scarcity taught me about designing for attention

Scarcity drives attention — if used right. Learn how to apply ethical, psychology-backed scarcity in your UX workflows and interfaces.

t-wada vs テスト大好郎

先日一部のClaude Codeユーザーの間で「プロンプトに”t-wadaさんの推奨する進め方に従ってください”と書くとテスト駆動開発のプラクティスを実践してくれる」というTIPSが話題になっていました。 なるほど、TDDやテスト駆動開発という言葉は広まりすぎて「意味の希薄化」が発生し、曖昧な理解のまま自動テストやテストファーストと混同され、それがLLMの学習データにも影響したが、人名を与えるとLLMに「具体的な参照点」を与え、より具体的なプログラミングスタイルに限定させる効果があったのか pic.twitter.com/p6SCPj8YdA — Takuto Wada (@t_wada) June 25, 2025 これは確かに面白い現象で、現にClaudeに直接質問するとt-wadaさんの知識を持っていることがわかります。そこから連想してClaude CodeがTDDをするトリガーとして使えるのなら面白いなと思い色々試してみました。 （ところでこの翌日、最近バイブコーディングにはまってSmalltalkのライブラリをLLMで書いているKent Beckも自著のタイトルを

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Pivot or perish: Why product agility determines market survival

Great product managers spot change early. Discover how to pivot your product strategy before it's too late.

11 prompting tips for building UIs that don’t suck

Most people are using AI coding tools wrong. Here are 11 practical tricks that actually work for frontend development

AI Agentが回答に困った時にSlackで人間に助言を求められるMCPを検証した

AI ShiftのTECH BLOGです。AI技術の情報や活用方法などをご案内いたします。

Mandelbrot in x86 assembly by Claude

Inspired by a tweet asking if Claude knew x86 assembly, I decided to run a bit of an experiment. I prompted Claude Sonnet 4: Write me an ascii art mandelbrot …

Leader Spotlight: Human empathy in the age of AI, with Thach Nguyen

Thach Nguyen, Senior Director of Product Management — STEPS at Stewart Title, emphasizes candid moments and human error in the age of AI.

TIL: Using Playwright MCP with Claude Code

Inspired by Armin ("I personally use only one MCP - I only use Playwright") I decided to figure out how to use the official Playwright MCP server with Claude Code. …

Claude CodeのHooksでタスク完了メッセージをデスクトップ通知する

Claude CodeではNotification設計でベル音を鳴らすことができますが、私は音量をゼロにしてMacを使っているため、デスクトップのバナー通知で視覚的に知らせてほしいと思っていました。一部のユーザーは、osascriptやterminal-notifierのコマンド呼び出し指示を各自CLAUD.mdに記載してこれを実現させているようですが、毎回推論コンテキストに載せるに抵抗があり、そこまでは手を出せていませんでした。 しか昨日リリースされたHooks機能は、まさにこの用途に最適でした。ドキュメントにもカスタム通知を設定する例が載っています。 Hooks - AnthropicCustomize and extend Claude Code’s behavior by registering shell commandsAnthropic すでにHooksのさまざまなユースケースが公開されていて、例えばファイルのフォーマッタやSlack・LINEへの通知などを行っているユーザーがいます。 Claude Code の Hooks で作業が終わった後にフォーマッターを

PlanetScale's classy retirement

Sometimes a service with a free plan will decide to stop supporting it. I understand why this happens, but I'm often disappointed at the treatment of existing user's data. It's …

A custom template system from the mid-2000s era

Using LLMs for code archaeology is pretty fun. I stumbled across this blog entry from 2003 today, in which I had gotten briefly excited about ColdFusion and implemented an experimental …

Announcing PlanetScale for Postgres

PlanetScale formed in 2018 to build a commercial offering on top of the Vitess MySQL sharding open source project, which was originally released by YouTube in 2012. The PlanetScale founders …

Convert Figma to Next.js using AI

Convert Figma design files into clean, responsive Next.js code with Fusion AI. Streamlines the design-to-code process for production-ready results.

How API client automation can save you hours in development

Learn how OpenAPI can automate API client generation to save time, reduce bugs, and streamline how your frontend app talks to backend APIs.

The Gap Strikes Back: Now Stylable

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.

Where your focus is actually going (and how to get it back)

Guard your focus, not just your time. Learn tactics to protect attention, cut noise, and do deep work that actually moves the roadmap.

Leader Spotlight: Data-driven vs. human-centered decision making for product design, with Rumana Hafesjee

Rumana Hafesjee talks about the evolving role of the PM in today’s "great hesitation," explores reinventing yourself as a leader, and the benefits of fractional leadership.

Using Claude Code to build a GitHub Actions workflow

I wanted to add a small feature to one of my GitHub repos - an automatically updated README index listing other files in the repo - so I decided to …

Claude Code の Hooks で作業が終わった後にフォーマッターを実行する

Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。

Give footnotes the boot

I hate footnotes, and hopefully by the end of this, you will too.

microsoft/vscode-copilot-chat

As promised at Build 2025 in May, Microsoft have released the GitHub Copilot Chat client for VS Code under an open source (MIT) license. So far this is just the …

What is a website’s hero section? Best practices, tips, examples

Discover how to craft UX-friendly hero sections with examples, design tips, and strategies that drive engagement and conversion.

10 best hero section examples and what makes them effective

Discover how to craft UX-friendly hero sections with examples, design tips, and strategies that drive engagement and conversion.

llvm: InstCombine: improve optimizations for ceiling division with no overflow - a PR by Alex Gaynor and Claude Code

Alex Gaynor maintains rust-asn1, and recently spotted a missing LLVM compiler optimization while hacking on it, with the assistance of Claude (Alex works for Anthropic). He describes how he confirmed …

3 Very Specific Tips from Engineering Leaders for Evaluating AI Coding Tools

Engineering leaders share surprising tips for AI coding tools: focus on juniors, use Slackbots for feedback, and favor organic videos over formal training.

Adopting Apple’s Liquid Glass: Examples and best practices

It’s a good time to start thinking about best practices for adopting elements of Liquid Glass thoughtfully in your own designs.

I tried Figma Make — here’s what it gets right (and what’s still broken)

Figma Make promises AI-generated code from your designs. I gave it a spin — here’s what worked, what didn’t, and what UX designers should watch for.

Django Joins curl in Pushing Back on AI Slop Security Reports

Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.

SOLID series: Understanding the Interface Segregation Principle (ISP)

Learn how the Interface Segregation Principle (ISP) helps avoid bloated code, improve maintainability, and support scalable software design.

Using CSS Cascade Layers With Tailwind Utilities

Being the bad boy I am, I don't take Tailwind's default approach to cascade layers as the "best" one. Over a year experimenting with Tailwind and vanilla CSS, I've come across what I believe is a better solution.

2025年前半の振り返り

Leader Spotlight: Making informed partnership and acquisition decisions, with Trey Courtney

Trey Courtney talks about his process for evaluating partnerships or acquisitions and how he successfully implements these initiatives.

Leader Spotlight: Adopting and championing responsible AI, with Asma Syeda

Asma Syeda shares the importance of responsible AI and best practices for companies to ensure their AI technology remains ethical.

Agentic Coding: The Future of Software Development with Agents

Armin Ronacher delivers a 37 minute YouTube talk describing his adventures so far with Claude Code and agentic coding methods. A friend called Claude Code catnip for programmers and it …

Tip: Use keyword-only arguments in Python dataclasses

Useful tip from Christian Hammond: if you create a Python dataclass using @dataclass(kw_only=True) its constructor will require keyword arguments, making it easier to add additional properties in the future, including …

ワンクリックで MCP サーバーをインストールする .dxt ファイル

Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。

Roo CodeをIPCで外部から操作する

Roo CodeのIPCシステムについて Roo CodeのIPCシステムは、VS Code拡張機能と外部プログラム間でリアルタイム通信を実現するクライアント・サーバーアーキテクチャです。外部プログラムからRoo Codeを自動制御し、エージェントレベルの評価システムやテスト自動化などに活用できます。Roo Code開発チームはこのIPCシステムを活用して、エージェントレベルのEvals（評価）システムを構築しています。 Roo Code EvalsQuantitative evals of LLM coding skills.Roo Code このIPCシステムは、ホストマシン上のRoo Code拡張がUnixドメインソケットを使用してIPCサーバーを起動し、クライアント側の外部プログラムがNode.jsのnode-ipcライブラリを使用してサーバーに接続する構成となっています。通信方式はEventEmitterベースの双方向非同期メッセージングを採用しており、すべてのデータはzodで構造化されたJSON形式でコマンドとイベントのやり取りが行われます。 メッセージングプロトコ

MCP の Structured tool output を試してみる

MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。

CSS Blob Recipes

Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

How to get faster data access in Node.js with Valkey

Learn how to implement an advanced caching layer in a Node.js app using Valkey, a high-performance, Redis-compatible in-memory datastore.

【今週の話題】Gemini CLIがリリース

かねてから噂されていたGoogleのGemini公式のCLI型コーディングエージェント「Gemini CLI」がリリースされました。Gemini CLIはClaude Codeのようにターミナル（CLI）から使えるツールです。モデルは標準でGemini 2.5 Proが無料で使え、WindowsでもWSLなしに動作します。 GitHub - google-gemini/gemini-cli: An open-source AI agent that brings the power of Gemini directly into your terminal.An open-source AI agent that brings the power of Gemini directly into your terminal. - google-gemini/gemini-cliGitHubgoogle-gemini Gemini

lsmcp - 汎用的な LSP の MCP サーバーを作った

Vitest3.2のリリースなど: Cybozu Frontend Weekly (2025-06-24号)

ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More

ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.

KelpUI

KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I've enjoyed following Chris as he's published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.

I’ve designed AI search — here’s what works

I share lessons from designing AI search interfaces that users actually rely on — no hype, just what works in practice.

How to properly handle rejected promises in TypeScript

Learn how to handle rejected promises in TypeScript using Angular, with tips for retry logic, typed results, and avoiding unhandled exceptions.

The most valuable hard skills for product managers in 2025

What hard skills do PMs need in 2025? Learn how AI tools can help you level up in SQL, Figma, A/B testing, and more.

React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)

CSSの`::highlight()`が、Firefox 140に実装されてた

Leader Spotlight: Quantifying the unquantifiable, with Paul Weston

Paul Weston talks about “quantifying the unquantifiable,” i.e., bringing in objective data for things that otherwise seem hard to measure.

RustのType Stateパターンについて

New sandboxes from Cloudflare and Vercel

Two interesting new products for running code in a sandbox today. Cloudflare launched their Containers product in open beta, and added a new Sandbox library for Cloudflare Workers that can …

2025-06-26のJS: Biome v2、Vite 7.0、Chrome 138、Firefox 140

JSer.info #739 - Biome v2がリリースされました。

Ecma International approves ECMAScript 2025: What’s new?

On 25 June 2025, the 129th Ecma General Assembly approved the ECMAScript 2025 language specification (press release), which means that it’s officially a standard now. This blog post explains what’s new.

Node.js Homepage Adds Paid Support Link, Prompting Contributor Pushback

A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.

Gemini CLI

First there was Claude Code in February, then OpenAI Codex (CLI) in April, and now Gemini CLI in June. All three of the largest AI labs now have their own …

I’ve overdesigned before — here’s what I’ve learned about doing less

Overdesign isn’t about bad design — it’s about overthinking. Learn how to simplify without compromising clarity or creativity.

Gemini CLI の簡単チュートリアル

Poking at the CSS if() Function a Little More: Conditional Color Theming

The CSS if() function enables us to use values conditionally, which we can already do with queries and other functions, so I’m sure you’re wondering: What exactly does if() do? Let's look at a possible real-world use case.

gemini-cli の google_web_search が最高

Your AI has agency — here’s how to architect its frontend

Explore how to create UI frameworks that visualize and manage intelligent AI agents with agency and real-time feedback.

How to future-proof your PM career with emotional intelligence

As AI reshapes product roles, learn how emotional intelligence, curiosity, and balance will define the next-gen tech product leader."

Real-Time Observability for Node.js - Without Code Changes

Imagine getting deep, real-time insights into your Node.js applications without touching a single line of your business logic.

Leader Spotlight: Honing a relationship-first mindset, with Lars Rieger

Lars Rieger, Head of Product at Digistore24 DACH, talks about the importance of relationships in product management.

Leader Spotlight: Embracing lifelong learning, with Jie Cheng

Jie Cheng talks about how she brought an ecommerce and digital mindset to various organizations, including Mondelēz and Conair.

Another Wave: North Korean Contagious Interview Campaign Drops 35 New Malicious npm Packages

North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware ...

textlint v15.0.0をリリースしました。非推奨APIの削除とNode.js 20+サポート/MCPサーバの改善

textlint v15.0.0をリリースしました！

Malicious Python Package Typosquats Popular passlib Library, Shuts Down Windows Systems

The Socket Research Team investigates a malicious Python typosquat of a popular password library that forces Windows shutdowns when input is incorrect...

Figma to Code with Fusion AI

Convert Figma design files into clean, responsive code with Fusion AI. Streamlines the design-to-code process for production-ready results.

UX burnout is real — here’s how to spot and prevent it

UX burnout isn’t a personal failure — it’s often systemic. This blog explores real causes and team-level solutions designers and leaders can act on.

Lightly Poking at the CSS if() Function in Chrome 137

The CSS if() function was recently implemented in Chrome 137, making it the first instance where we have it supported by a mainstream browser. Let's poke at it a bit at a very high level.

How to design apps with Apple Intelligence in mind

Explore the core features of Apple Intelligence, and consider do's and don'ts for designing with Apple Intelligence in mind.

How to optimize your Next.js app with after()

Next.js' after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.

A complete guide to AdTech for product managers

Monetizing with ads isn’t plug-and-play. Learn how AdTech really works so your product can generate sustainable, scalable revenue.

Leader Spotlight: Balancing creativity with scalable execution, with Adrienne Wang

Adrienne Wang talks about how she’s learned to think creatively about products while also prioritizing scalable solutions.

Tips for making regular expressions easier to use in JavaScript

In this blog post, we explore ways in which we can make regular expressions easier to use.

A Fresh Look for the Socket Dashboard

We’ve redesigned the Socket dashboard with simpler navigation, less visual clutter, and a cleaner UI that highlights what really matters.

Phoenix.new is Fly's entry into the prompt-driven app development space

Here’s a fascinating new entrant into the AI-assisted-programming / coding-agents space by Fly.io, introduced on their blog in Phoenix.new – The Remote AI Runtime for Phoenix: describe an app in …

How to design nondestructive cancel buttons

Design cancel buttons that feel safe, not frustrating. Learn how to build clear, accessible flows that protect users and their data.

Design is being devalued — and we’re letting it happen

UX is being stripped of its strategic power thanks to templates, AI, and a race to the bottom. learn how designers can push back and lead with intent.

From Infra Engineer to CISO: A Conversation with Amplitude’s Terry O’Daniel

Terry O’Daniel, Head of Security at Amplitude, shares insights on building high-impact security teams, aligning with engineering, and why AI gives def...

How we run Arcjet like an open source project

Tips and tools for running a devtools startup remotely in 2025. Document everything. Async workflows. Periodic in-person.

A Better API for the Intersection and Mutation Observers

Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.

JavaScript loops explained, and best practices

JavaScript loops like for, for...of, and for...in are constructs that help run a piece of code multiple times.

Biome v2の型推論を試して限界を知る

Leader Spotlight: Leading product in a nonprofit organization, with Don Boulia

Don Boulia talks about his transition from working in product management at for-profit organizations to a nonprofit environment.

Improving Prettier performance with the new CLI

The new Prettier CLI - what it is and how it came to be.

My First Open Source AI Generated Library

Armin Ronacher had Claude and Claude Code do almost all of the work in building, testing, packaging and publishing a new Python library based on his design: It wrote ~1100 …

Claude Code でカスタムスラッシュコマンドを作成する

Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。

Edit is now open source

Microsoft released a new text editor! Edit is a terminal editor - similar to Vim or nano - that's designed to ship with Windows 11 but is open source, written …

ブラウザから MCP サーバーに接続する use-mcp React フック

use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。

TypeScript: checking Map keys and Array indices

JavaScript has two common patterns: Maps: We check the existence of a key via .has() before retrieving the associated value via .get(). Arrays: We check the length of an Array before performing an indexed access. These patterns don’t work as well in TypeScript. This blog post explains why and presents alternatives.

python-importtime-graph

I was exploring why a Python tool was taking over a second to start running and I learned about the python -X importtime feature, documented here. Adding that option causes …

8 reasons your Next.js app is slow — and how to fix them

Next.js can be fast, but only if you use it right. I’m sharing what worked (and what didn’t) so you don’t have to figure it out the hard way.

Color Everything in CSS

An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.

AI による自然言語アサーション

Leader Spotlight: Balancing trust and speed in digital banking, with Jyoti Menon

Jyoti Memom shares how trust is not only a value proposition for Bread Financial, but a pillar of what drives the product and decisions.

CSSDay 2025 Report

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

playbackrate

Here's a tip that works on YouTube and almost any other web page that shows you a video. You can increase the playback rate beyond the usually-exposed 2x by running …

How OpenElections Uses LLMs

The OpenElections project collects detailed election data for the USA, all the way down to the precinct level. This is a surprisingly hard problem: while county and state-level results are …

MCP Spec Updated to Add Structured Tool Output and Improved OAuth 2.1 Compliance

MCP spec updated with structured tool output, stronger OAuth 2.1 security, resource indicators, and protocol cleanups for safer, more reliable AI work...

CSS Color Functions

CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.

How to use the Interest Invoker API for better, more accessible UX

Explore how to use Google’s new experimental Interest Invoker API for delays, popovers, and smarter hover UX.

How to build and deploy a web app with Bolt

Bolt.new revolutionizes how you build and deploy web apps with no-code development and seamless AI integration.

How agile became a checkbox exercise, and how to get unstuck

Agile isn’t broken — it’s just being misused. Learn how to reset your rituals, refocus on outcomes, and bring meaning back to your process.

ts-similarity でAIと人間が書き散らした重複コードを見つける

Survey Finds Over Half of CISOs Manage 10+ Security Areas with Limited Legal Protections and Short Tenure

More than half of CISOs now manage 10+ security areas, often with few legal safeguards and short tenures, yet continue to secure budgets and higher pa...

Liquid Glass is here — how should designers respond?

Apple just dropped Liquid Glass. It’s polarizing, ambitious, and full of lessons for UX designers. Here’s how to respond with clarity and intent.

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

Frontend devs: Here’s how to get the most out of Cursor

Explore Cursor AI, one of the hottest tools in AI-assisted coding. Uncover the features you might be missing and practical workflows that actually work.

Lovable AI is blowing up UX workflows — here’s how

Lovable AI is transforming how UX designers work — from prototypes to MVPs — with functional, testable products built by prompt. Here’s what that means for your workflow.

A PM’s guide to handling product crises like a pro

Product crises happen—bugs, breaches, or PR disasters. Here’s how PMs can plan ahead, stay calm, and lead through the chaos.

続・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のベースラインとテストの仕組み

Claude Code を Apple Container の中で動かす

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.