小手先に見えるテクニックでも、実はReact的に考えられる

小手先に見えるテクニックでも、実はReact的に考えられる

この記事では、ReactにおけるuseEffectの適切な使用法と、keyを使ったテクニックについて解説しています。特に、親コンポーネントから渡されるpropsが変更された際に、コンポーネントのステートをリセットする方法としてkeyを利用することが提案されています。従来の考え方では、useEffectを使ってステートを更新することが一般的でしたが、これはReactの宣言的UIの原則に反する可能性があります。keyを使うことで、コンポーネントが新しいインスタンスとして再生成され、ステートが初期化されることが明確に示されます。これにより、Reactの基本的な考え方に沿った形で、より効率的にコンポーネントを管理できるようになります。 • useEffectの不適切な使用法を避けるためのkeyを使ったテクニックの提案 • propsが変更された際にコンポーネントのステートをリセットする方法 • keyを使うことでコンポーネントが新しいインスタンスとして再生成される • Reactの宣言的UIの原則に基づいた理解の重要性 • keyの使用がReactの基本的な考え方に合致することの説明

Zenn uhyo
framework tool
MCP のツールアノテーションでユーザーにヒントを提供する

MCP のツールアノテーションでユーザーにヒントを提供する

MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。

azukiazusa のテックブログ2
tool
No Image

Litestream v0.5.0 is Here

I've been running Litestream to backup SQLite databases in production for a couple of years now without incident. The new version has been a long time coming - Ben Johnson …

simonwillison-blog
database tool
We got Wasm 3.0 before GTA 6: Meet the web’s new engine

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

LogRocket Dev
framework tool
How to use AI to build accurate ShadCN components

How to use AI to build accurate ShadCN components

Stop AI from guessing ShadCN props. Learn how the shadcn/ui MCP server gives agents live component access for accurate, working code.

LogRocket Dev
library tool
Build buttery smooth carousels with pure CSS like Nike

Build buttery smooth carousels with pure CSS like Nike

Build a Nike-like carousel with CSS snapping and tiny JS: scroll-snap-type, scroll-padding, and arrows powered by scrollIntoView.

Builder.io Blog
tool ui
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks

PodRocket Podcast: Inside the Recent npm Supply Chain Attacks

Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protec...

Socket
api security tool
How we turned a broken order form into a 95% ticket reduction

How we turned a broken order form into a 95% ticket reduction

I rebuilt our order form from scratch. The result? A 95% drop in support tickets and a smoother experience for everyone.

LogRocket Dev
tool ui
The best way to structure Rust web services

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

LogRocket Dev
library tool
How I cut product waste fast with this ECRS workshop

How I cut product waste fast with this ECRS workshop

Discover how ECRS helps product managers eliminate waste, simplify workflows, and drive efficiency across fast-growing teams.

LogRocket Dev
tool
Recreating Apple-style 3D scroll animations in Three.js and WebGL

Recreating Apple-style 3D scroll animations in Three.js and WebGL

Let's build an Apple-style 3D scroll animation with Three.js ans some LLM help. We'll storyboard the motion, let AI scaffold the scene, then refine.

Builder.io Blog
library tool
Where It's at://

Where It's at://

From handles to hosting.

Overreacted
api cloud tool
Faster UX Design with AI

Faster UX Design with AI

How AI tools like Fusion help UX designers work faster by generating components, testing with real data, and shipping designs without developer handoffs.

Builder.io Blog
tool ui
Same Idea, Different Paint Brush

Same Idea, Different Paint Brush

Naturally, everything looks like code when I'm staring at a blank canvas. That's whether the canvas is paper, a screen, some Figma artboard, or what have you.

CSS-Tricks
tool
A spec-first workflow for building with agentic AI

A spec-first workflow for building with agentic AI

Andrew Evans gives his take on agentic AI and walks through a step-by-step method to build a spec-first workflow using Claude Code.

LogRocket Dev
api cloud tool
How to use TanStack DB to build reactive, offline-ready React apps

How to use TanStack DB to build reactive, offline-ready React apps

Build local-first, reactive apps with TanStack DB. Learn live queries, optimistic mutations, and offline sync while creating a task manager in React + TypeScript.

LogRocket Dev
library tool
15 Recent Node.js Features that Replace Popular npm Packages

15 Recent Node.js Features that Replace Popular npm Packages

Many Node.js features that once required third-party packages are now built into the runtime itself.

NodeSource Blog
runtime tool
WCAG2.2のISO/IEC 40500:2025 規格化など: Cybozu Frontend Weekly (2025-09-30号)

WCAG2.2のISO/IEC 40500:2025 規格化など: Cybozu Frontend Weekly (2025-09-30号)

この記事では、2025年9月30日に開催されたサイボウズのFrontend Weeklyで取り上げられたフロントエンド関連のニュースや話題を紹介しています。主な内容として、WCAG2.2がISO/IEC 40500:2025として国際規格化されたこと、Temporal APIの現状、AIエージェント用のChrome DevToolsの公開、Zenn CLIでのWYSIWYGエディタの導入、GitHubによるnpmサプライチェーンのセキュリティ強化計画、ChromiumでのInterest InvokersのIntent to Ship、pnpmとyarnのサプライチェーン攻撃緩和オプションの導入、Web ComponentsベースのUIコンポーネントライブラリQuiet UIの紹介、CodexとClaude Codeの比較、DenoによるJavaScript商標の取消申請、StorybookのESM専用化について触れています。 • WCAG2.2がISO/IEC 40500:2025として国際規格化された。 • Temporal APIがChromiumでのIntent to Shipが発表され、Chrome v144での実装が予定されている。 • AIエージェント用のChrome DevToolsが公開され、エラーの確認やユーザー行動のシミュレーションが可能になる。 • Zenn CLIでWYSIWYGエディタが導入され、直感的な記事執筆が可能になる。 • GitHubがnpmサプライチェーンのセキュリティ強化のロードマップを発表した。 • ChromiumでInterest InvokersがIntent to Shipになった。 • pnpmとyarnにサプライチェーン攻撃緩和のためのオプションが導入された。 • Web ComponentsベースのUIコンポーネントライブラリQuiet UIが紹介された。

Zenn Cybozu Frontend
api library tool
Create a 3d scrolling animation with GSAP and Veo 3

Create a 3d scrolling animation with GSAP and Veo 3

Create an Apple-like zoom on scroll yourself: preload frames, tie a number to scroll with GSAP, draw to a canvas, and refine sizing and timing.

Builder.io Blog
library tool
Package Maintainers Call for Improvements to GitHub’s New npm Security Plan

Package Maintainers Call for Improvements to GitHub’s New npm Security Plan

Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.

Socket
api security tool
Five things to try with the Supabase MCP server

Five things to try with the Supabase MCP server

Discover five powerful ways to use the Supabase MCP server with Fusion to create dynamic, AI-powered web apps. No coding required. Fast setup, easy workflow.

Builder.io Blog
api tool
How I cut down stakeholder rework with better UX storytelling

How I cut down stakeholder rework with better UX storytelling

I used to leave reviews with 20+ changes. Then I learned to lead with story, not screens and cut rework overnight.

LogRocket Dev
tool ui
Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain

Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain

Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain atta...

Socket
security tool
2025-09-30のJS: Node.js v24.9.0、Auth.jsはBetter Authに、npmのセキュリティ変更の予定

2025-09-30のJS: Node.js v24.9.0、Auth.jsはBetter Authに、npmのセキュリティ変更の予定

JSer.info #750 - Node.js v24.9.0がリリースされました。

JSer.info
library tool
A step-by-step guide to building a full-stack app with TanStack Start

A step-by-step guide to building a full-stack app with TanStack Start

Follow this step-by-step guide to building a full-stack recipe application with TanStack Start, the new full-stack React framework.

LogRocket Dev
api framework tool
Leading the transition from product to platform

Leading the transition from product to platform

Turn your SaaS product into a platform by spotting key signals, avoiding common traps, and building for scale, reuse, and integration.

LogRocket Dev
api platform tool
Web 標準動向 2025年9月版

Web 標準動向 2025年9月版

この記事では、サイボウズが2025年4月にW3Cのメンバーに加入したことを受けて、Web標準に関する最新の動向を紹介しています。特に、headingoffsetとheadingreset属性の追加、Scoped FocusgroupのPrototype、Interest Invokersの標準化、カスタム組み込み要素の新しい形、CSS Snapshot 2025の安定性について詳述されています。これらの新しい属性や機能は、フロントエンド開発におけるマークアップの効率化やユーザーインターフェースの改善を目指しています。 • サイボウズがW3Cのメンバーに加入し、Web標準のキャッチアップを開始した。 • headingoffsetとheadingreset属性が追加され、見出しレベルの調整が容易になる。 • Scoped Focusgroupが再出発し、APIデザインの変更が加わった。 • Interest Invokersの標準化が進行中で、特にタッチデバイスでの挙動に関する課題が残る。 • カスタム組み込み要素の新しい形が議論され、デフォルトのroleやtabindexの設定について合意が得られた。 • CSS Snapshot 2025が公開され、CSS仕様の安定性が示された。

Zenn Cybozu Frontend
css framework ui
Query strings are underrated: Using the URL as your app’s state container

Query strings are underrated: Using the URL as your app’s state container

Learn how to manage React state with URL query strings. Explore tools, benefits, pitfalls, and when this approach makes sense.

LogRocket Dev
framework library tool
What Is a Visual IDE?

What Is a Visual IDE?

A Visual IDE puts PMs, designers, and engineers in real code, not slides. Remove handoffs, keep CI and reviews, and ship faster than with AI app builders

Builder.io Blog
tool ui
Touring New CSS Features in Safari 26

Touring New CSS Features in Safari 26

Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.

CSS-Tricks
framework tool ui
Yes, you should upgrade to TypeScript 5.9 — here’s why

Yes, you should upgrade to TypeScript 5.9 — here’s why

Explore the key features of TypeScript 5.9, including the redesigned tsc --init command, import defer syntax, expandable hovers, and more.

LogRocket Dev
library tool
No Image

Taking SVG “screenshots” of HTML elements

I was looking for a way to create images (think screenshots) of CSS layouts that I can use in HTML, EPUB and PDF files. This blog post describes my solution – which produces SVG images.

2ality
tool ui
Codex vs Claude Code: which is the better AI coding agent?

Codex vs Claude Code: which is the better AI coding agent?

A practical look at Codex vs Claude Code: agents, model choices, costs, and the workflows they enable in real projects.

Builder.io Blog
tool
No Image

Quoting Dan Abramov

Conceptually, Mastodon is a bunch of copies of the same webapp emailing each other. There is no realtime global aggregation across the network so it can only offer a fragmented …

simonwillison-blog
api platform
GitHub Copilot CLIがリリース

GitHub Copilot CLIがリリース

2025年9月25日、GitHubが「GitHub Copilot CLI」をパブリックプレビューとして公開しました。 GitHub Copilot CLI is now in public preview - GitHub ChangelogGitHub Copilot CLI is now in public preview We’re bringing the power of GitHub Copilot coding agent directly to your terminal. With GitHub Copilot CLI, you can work locally and…The GitHub BlogAllison

lai-so-blog
api tool
Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする

Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする

自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。

azukiazusa のテックブログ2
api tool
Figma AI Generator

Figma AI Generator

Figma AI generator outputs look nothing like your brand? Builder.io uses YOUR design system to generate on-brand designs and production code. Try it for free.

Builder.io Blog
tool ui
Recreating Gmail’s Google Gemini Animation

Recreating Gmail’s Google Gemini Animation

John Rhea challenged himself to recreate the fancy button using the new CSS shape() function sprinkled with animation to get things pretty close.

CSS-Tricks
tool ui
Is Better Auth the key to solving authentication headaches?

Is Better Auth the key to solving authentication headaches?

Better Auth promises flexible, type-safe authentication. See setup, features, and how it compares to Clerk, NextAuth, and Auth0.

LogRocket Dev
library tool
Storybook公式MCPの解説とその先 - Design Systems with Agentsの提案について -

Storybook公式MCPの解説とその先 - Design Systems with Agentsの提案について -

この記事では、Storybookの公式MCP Addonについて解説しています。このアドオンは、AIエージェントがStorybookのコンポーネント情報にアクセスし、活用できるようにするものです。MCP Addonを使用することで、Storybookのベストプラクティスに基づいたStoryファイルを簡単に作成でき、バージョン更新やテスト機能をフル活用できます。具体的なセットアップ手順も示されており、pnpmを使用して必要なパッケージをインストールし、設定ファイルに追加する方法が説明されています。MCPを使用することで、Storyのパターン数が増え、テストコードも自動生成されることが強調されています。 • Storybook MCP AddonはAIエージェントがコンポーネント情報にアクセスできるようにするアドオンである。 • MCP Addonを使用すると、Storybookのベストプラクティスに基づいたStoryファイルを簡単に作成できる。 • セットアップにはpnpmを使用し、必要なパッケージをインストールする手順が示されている。 • MCPを使用することで、Storyのパターン数が増え、テストコードが自動生成される。 • 現在はClaude Codeでのみ動作検証が行われている。

Zenn Cybozu Frontend
library tool
No Image

CSS wish: inner breakpoints

In this blog post, I’d like to talk about CSS: I wish it supported inner breakpoints – breakpoints not for viewports or containers but for HTML elements inside viewports or containers.

2ality
css tool
Open Social

Open Social

The protocol is the API.

Overreacted
api platform tool
Introducing Arcjet filters to quickly implement access rules

Introducing Arcjet filters to quickly implement access rules

Arcjet filters let you block requests using expressions over HTTP headers, IP addresses, and other request fields.

Arcjet Blog
api security tool
Why Is AI Design Bad?

Why Is AI Design Bad?

Why most AI design tools disappoint, and how designers can get better, brand-consistent results by working visually, in code, and with smart component reuse.

Builder.io Blog
tool ui
Why I never skip prototyping anymore before design handoffs

Why I never skip prototyping anymore before design handoffs

Prototyping turns static designs into living blueprints. See how it saves UX teams from rework, missteps, and costly misunderstandings.

LogRocket Dev
tool ui
What using a screen reader taught me about real web accessibility

What using a screen reader taught me about real web accessibility

Read one developer's detailed account of using a screen reader to learn more about a11y and build more accessible websites.

LogRocket Dev
framework tool ui
How the full-stack product lead is changing the industry

How the full-stack product lead is changing the industry

Learn why the shift from three-in-a-box to full-stack product leads is redefining product roles, collaboration, and career growth.

LogRocket Dev
framework tool
No Image

Quoting Stanford CS221 Autumn 2025

[2 points] Learn basic NumPy operations with an AI tutor! Use an AI chatbot (e.g., ChatGPT, Claude, Gemini, or Stanford AI Playground) to teach yourself how to do basic vector …

simonwillison-blog
tool
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.

Socket
security tool
CSS Typed Arithmetic

CSS Typed Arithmetic

Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.

CSS-Tricks
tool ui
JS/TSで`import`をソートできる選択肢のまとめ

JS/TSで`import`をソートできる選択肢のまとめ

この記事では、JavaScriptおよびTypeScriptにおける`import`のソートに関する選択肢をまとめています。まず、ESLintのstylisticなプラグインであるeslint-stylisticが紹介され、スタイルを強制するための95のルールがあることが述べられています。次に、Prettierが一般的に受け入れられている一方で、細かいスタイル指定が可能なeslint-stylisticの人気の理由が説明されています。`import`の並べ替えに関しては、ESLint本体のsort-importsや、eslint-plugin-import、eslint-plugin-simple-import-sortなどのプラグインが紹介され、それぞれの特徴やオプションが詳述されています。特に、importの並びをfrom側で指定することが主流であることが強調されています。 • ESLintのstylisticプラグインであるeslint-stylisticが紹介され、95のスタイルルールが存在する。 • Prettierは一般的に受け入れられているが、細かいスタイル指定ができるeslint-stylisticが人気。 • importの並べ替えに関する機能は、ESLint本体のsort-importsや複数のプラグインで提供されている。 • eslint-plugin-importはimport/orderルールを持ち、11のオプションで並びを指定できる。 • eslint-plugin-simple-import-sortはシンプルなimportの並べ替えに特化したプラグインで、グルーピングの正規表現を使用。

leaysgur's Blog
library tool
How I vibe-coded 2 Chrome extensions that save me hours every week

How I vibe-coded 2 Chrome extensions that save me hours every week

Designers can build their own tools now. Here’s how I vibe-coded 2 micro-apps that save me hours every week.

LogRocket Dev
tool ui
2025-09-23のJS: Safari 26.0、npm registryのサプライチェーン攻撃対策のロードマップ、Node.js v24.8.0(npm v11.6.0)

2025-09-23のJS: Safari 26.0、npm registryのサプライチェーン攻撃対策のロードマップ、Node.js v24.8.0(npm v11.6.0)

JSer.info #749 - Safari 26.0がリリースされました。

JSer.info
library tool
Choosing the right React Router v7 mode for your project

Choosing the right React Router v7 mode for your project

Learn the differences between declarative, data, and framework modes in React Router v7, with pros, cons, and guidance on when to use each.

LogRocket Dev
library tool
Product-led FinOps: Cut waste, reinvest, and build better

Product-led FinOps: Cut waste, reinvest, and build better

Learn how product-led cost management improves margins, maintains velocity, and creates user value through a repeatable playbook.

LogRocket Dev
tool
No Image

Learning web development: Creating web pages via HTML

In this chapter, we learn how to create web pages via HTML.

2ality
tool ui
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

A malicious package uses a QR code as steganography in an innovative technique.

Socket
library security tool
CSS @function: Dynamic logic without Sass or JavaScript

CSS @function: Dynamic logic without Sass or JavaScript

CSS @function introduces dynamic logic to native CSS, letting developers replace Sass and JavaScript utilities for rem conversion, color palettes, and fluid typography.

LogRocket Dev
css tool
No Image

Learning web development: Getting started

In this chapter, we perform a few steps to prepare us for web development.

2ality
framework tool
Moonbit がもう少しで実用できそうな気配

Moonbit がもう少しで実用できそうな気配

この記事では、Moonbitの現在のステータスとOpenAI APIを利用するためのコードの実装方法について説明しています。Moonbitは現在ベータ版で、2026年に1.0のリリースが予定されています。最近の変更により、Moonbitはjs/native/wasmのクロスプラットフォーム言語としての方向性が強まっています。OpenAI APIを利用するためのコードをCLIで実行し、HTTPリクエストを送信してJSONをパースする手順が示されています。具体的には、環境変数の取得、HTTPリクエストの送信、JSONのパースといった機能を持つライブラリを使用して、実用的なコードを構築する方法が解説されています。 • Moonbitは現在ベータ版で、2026年に1.0を予定している。 • Moonbitはjs/native/wasmのクロスプラットフォーム言語としての方向性が強まっている。 • OpenAI APIを利用するためのコードをCLIで実行する手順が示されている。 • 環境変数の取得、HTTPリクエストの送信、JSONのパースを行うライブラリを使用している。 • 具体的なコード例が提供されており、実用的なアプリケーションの構築が可能。

Zenn mizchi
api tool
GPT‑5 Codexがリリース

GPT‑5 Codexがリリース

OpenAIが2025年9月15日にGPT‑5 Codexを発表しました。GPT‑5 CodexはGPT‑5を土台にして、エージェントのコーディング能力に適した学習と強化が加えられたモデルです。長時間の自律的な作業に特に強みがあります。 We’re releasing new Codex features to make it a more effective coding collaborator: - A new IDE extension - Easily move tasks between the cloud and your local environment - Code reviews in GitHub - Revamped Codex CLI Powered by

lai-so-blog
api tool
Optimizing FP4 Mixed-Precision Inference on AMD GPUs

Optimizing FP4 Mixed-Precision Inference on AMD GPUs

<p>Haohui Mai (CausalFlow.ai), Lei Zhang (AMD)</p> <h2><a id="introduction" class="anchor" href="#introduction" aria-hidden="true"><svg aria-hidden="true" cl...

lmsys-blog
library tool
No Image

Quoting Leaked Amazon memo

Amazonians, We've reviewed the Presidential Proclamation on H-1B visas that was released today and are actively working to gain greater clarity. Here's what you need to know right now: The …

simonwillison-blog
security
GitHub Actions で YAML アンカーを使う

GitHub Actions で YAML アンカーを使う

GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます

azukiazusa のテックブログ2
tool
AI エージェントのための Agent Payments Protocol (AP2) を試してみた

AI エージェントのための Agent Payments Protocol (AP2) を試してみた

現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。

azukiazusa のテックブログ2
api security tool
サプライチェーン攻撃への防御策

サプライチェーン攻撃への防御策

前回は、Nx の事例をベースに「パッケージを公開する側」の対策について解説した。今回は、「パッケージを使う側」、もっと言えば「OSS を使う上で開発者が考えるべきこと」について考察する。

Jxck
infra security tool
No Image

httpjail

Here's a promising new (experimental) project in the sandboxing space from Ammar Bandukwala at Coder. httpjail provides a Rust CLI tool for running an individual process against a custom configured …

simonwillison-blog
security tool
Environment-aware model routing: Build smarter AI apps with AI SDK

Environment-aware model routing: Build smarter AI apps with AI SDK

Discover a handy pattern for routing LLM calls in an “environment-aware” manner, using AI SDK’s middleware.

LogRocket Dev
api tool
On inclusive personas and inclusive user research

On inclusive personas and inclusive user research

A set of notes taken from Eric Bailey's article about the use of inclusive personas and user research.

CSS-Tricks
tool ui
React Server Components broke my app and I still don’t know why

React Server Components broke my app and I still don’t know why

React Server Components promise performance gains, but hidden pitfalls like caching bugs and loading issues can break your app.

LogRocket Dev
api framework tool
MentraOSでスマートグラスアプリの開発を試してみた

MentraOSでスマートグラスアプリの開発を試してみた

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

ai-shift-blog
framework tool
Task switching slowed my users down. Here’s how I fixed it

Task switching slowed my users down. Here’s how I fixed it

See how unifying screens in a trading platform redesign halved task time and how you can use the same UX principles in your product.

LogRocket Dev
framework tool ui
How to build smarter frontend chatbots with RAG and LangChain.js

How to build smarter frontend chatbots with RAG and LangChain.js

Build smarter frontend chatbots with RAG and LangChain.js. Learn how to add context, improve accuracy, and cut costs with a practical tutorial.

LogRocket Dev
framework tool
How to stop being an unintentional bottleneck for your team

How to stop being an unintentional bottleneck for your team

Learn strategies to avoid becoming a bottleneck as a PM by fostering autonomy, reducing approvals, and empowering your team to decide.

LogRocket Dev
platform tool ui
No Image

Learning web development: Version control via Git and GitHub

In this chapter, we learn how to use the version control system Git and a useful companion website, GitHub. Both are important tools when programming in teams but even help programmers who work on their own.

2ality
tool
Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases

Identifying and Preventing Fraudulent Engineering Candidates: An Investigation into 80 Confirmed Cases

Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a ...

Socket
platform security tool
Empty states in UX done right: 4 inspiring examples

Empty states in UX done right: 4 inspiring examples

Empty states don’t have to be dead ends. See how Slack, Pinterest, Dropbox, and Duolingo turned blank screens into engaging UX moments—and learn how you can too.

LogRocket Dev
ui
Is it Time to Un-Sass?

Is it Time to Un-Sass?

Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgforth is thinking about it.

CSS-Tricks
library tool
WebKit Features in Safari 26.0など: Cybozu Frontend Weekly (2025-09-15号)

WebKit Features in Safari 26.0など: Cybozu Frontend Weekly (2025-09-15号)

この記事では、2025年9月15日に開催されたサイボウズのFrontend Weeklyで取り上げられたフロントエンド関連のニュースや話題を紹介しています。主な内容として、CloudflareのダッシュボードとAPIの障害に関するバグレポート、Chromeの17周年を記念した歴史的な記事、Safari 26.0の新機能に関する情報、Learn CSSコースの刷新、pnpm 10.16の新機能、Prisma 6.16.0のリリース、HTMLの整合性に関する調査結果、クリックしやすいターゲットエリアの実装方法が挙げられています。特にCSSに関する話題が多く、新機能や技術的なポイントが詳しく解説されています。 • Cloudflareのダッシュボードでのバグに関する詳細と対応方法 • Chromeの歴史とAIの状況についての解説 • Safari 26.0の新機能、特にCSS関連の機能 • Learn CSSコースの新しいモジュールの追加 • pnpm 10.16のminimumReleaseAgeオプションの導入 • Prisma 6.16.0のDBアダプタの移行とパフォーマンス向上 • 世界の人気サイトのHTML整合性に関する調査結果 • クリックしやすいターゲットエリアの実装テクニック

Zenn Cybozu Frontend
api css tool
How to generate (actually good) designs with AI

How to generate (actually good) designs with AI

Static design is fine, but it is 2025. Design in code, adapt real effects to your stack, ship PRs, and skip AI slop by working in your own system.

Builder.io Blog
framework tool ui
No Image

Learning web development: Markdown

In this chapter, we explore Markdown, a lightweight markup language that’s easy to learn and used a lot when writing about programming: documentation, comments, etc. We’ll need it in the next chapter. Learning it may seem like a detour but it’s easy to pick up and you’ll come across it often if you are interested in web development.

2ality
library tool
7 Levels of Context Engineering for Designers

7 Levels of Context Engineering for Designers

Stop getting generic AI outputs. Discover seven context engineering techniques that help designers ship production UI matching their design systems.

Builder.io Blog
tool ui
Paid research participant recruitment is dead. What should you do instead?

Paid research participant recruitment is dead. What should you do instead?

Recruiting UX research participants doesn’t have to drain your budget. Explore smarter alternatives to paid recruitment tools and learn how to get quality insights.

LogRocket Dev
tool ui
openai/codex でのプロジェクト固有MCPを設定する

openai/codex でのプロジェクト固有MCPを設定する

この記事では、OpenAIのCodexを使用してプロジェクト固有のMCP(Model Context Protocol)を設定する方法について説明しています。CodexはグローバルにMCPを設定することしかできないため、プロジェクトごとに独立した設定が必要です。2つの手段が提案されており、1つ目は環境変数を使用して読み込みディレクトリを変更し、プロジェクト固有の設定をロードする方法です。しかし、この方法では認証情報が含まれるため、普段使いには適していません。2つ目の手段は、Codexのコマンドラインオプションを使用して直接TOML設定をロードする方法で、こちらの方が安全です。具体的なコマンドや設定例も示されており、実装に関する注意点も記載されています。 • CodexはグローバルにMCPを設定するが、プロジェクトごとに独立した設定が必要な場合がある。 • 手段1では環境変数を使用してプロジェクト固有のMCP設定をロードできるが、認証情報が含まれるため普段使いには不向き。 • 手段2では--configオプションを使用して直接TOMLをロードする方法があり、こちらが安全とされる。 • 具体的なコマンドや設定例が示されており、実装方法が詳細に説明されている。 • JSONからTOMLへの変換に関する注意点も記載されている。

Zenn mizchi
api tool
Why PMs should stop chasing the “right” planning window

Why PMs should stop chasing the “right” planning window

Great PMs design strategy as a living process. Explore how to plan for 2026 while balancing alignment with adaptability.

LogRocket Dev
platform tool
Ongoing Supply Chain Attack Targets CrowdStrike npm Packages

Ongoing Supply Chain Attack Targets CrowdStrike npm Packages

Socket.dev found compromised various CrowdStrike npm packages, continuing the "Shai-Halud" supply-chain attack that previously hit `tinycolor`.

Socket
api security tool
改行コードの違いでWindowsのCIだけが失敗していた

改行コードの違いでWindowsのCIだけが失敗していた

この記事では、Windows環境でのCI(継続的インテグレーション)が改行コードの違いにより失敗する問題について説明しています。具体的には、OXCで実装されたフォーマッターを使用したスナップショットテストにおいて、CLIを実行した結果、Windowsだけで差分が生じてCIが失敗する事象が発生しました。原因は、GitHubのCIがWindows環境でファイルを取得する際に自動的に改行コードをCRLFに変換してしまうことでした。このため、フォーマッターがCRLFをLFに戻し、差分が生じてしまったのです。解決策として、.gitattributesファイルに'text=auto eol=lf'を設定することで、すべてのファイルがLFに統一され、余計な心配がなくなります。特定のディレクトリに対しても設定可能で、PrettierやBiomeでも同様の設定が行われています。 • Windows環境でCIが改行コードの違いにより失敗する問題が発生した。 • GitHubのCIがWindowsでファイルを取得する際に改行コードをCRLFに変換することが原因。 • フォーマッターがCRLFをLFに戻すため、差分が生じてCIが失敗する。 • 解決策として、.gitattributesに'text=auto eol=lf'を設定することが提案されている。 • 特定のディレクトリに対しても設定可能で、PrettierやBiomeでも同様の設定が行われている。

leaysgur's Blog
tool
No Image

Learning web development: Native package managers

In this chapter, we install a package manager for our operating system. That enables us to install shell commands that we can’t get via npm.

2ality
tool
Popular Tinycolor npm Package Compromised in Supply Chain Attack Affecting 40+ Packages

Popular Tinycolor npm Package Compromised in Supply Chain Attack Affecting 40+ Packages

Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers

Socket
library security tool
No Image

Quoting Poul-Henning Kamp

I thought I had an verbal agreement with them, that “Varnish Cache” was the FOSS project and “Varnish Software” was the commercial entitity, but the current position of Varnish Software’s …

simonwillison-blog
tool
6 alternatives to navigation menus (with real product examples)

6 alternatives to navigation menus (with real product examples)

UX is moving past traditional menus. Here are six practical navigation patterns designers can use to reduce cognitive load and improve usability.

LogRocket Dev
tool ui
pnpm 10.16 Adds New Setting for Delayed Dependency Updates

pnpm 10.16 Adds New Setting for Delayed Dependency Updates

pnpm's new minimumReleaseAge setting delays package updates to prevent supply chain attacks, with other tools like Taze and NCU following suit.

Socket
tool
The “Most Hated” CSS Feature: cos() and sin()

The “Most Hated” CSS Feature: cos() and sin()

I want to look at practical uses for CSS trigonometric functions. And we'll start with what may be the most popular functions of the "worst" feature: sin() and cos().

CSS-Tricks
tool ui
Frontend developers are burned out, not lazy

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

LogRocket Dev
framework tool ui
2025-09-15のJS: pnpm 10.16(サプライチェーン攻撃対策)、Deno 2.5、bun installの裏側

2025-09-15のJS: pnpm 10.16(サプライチェーン攻撃対策)、Deno 2.5、bun installの裏側

JSer.info #748 - pnpm 10.16がリリースされました。

JSer.info
library tool
Fetch streams are great, but not for measuring upload/downloading progress

Fetch streams are great, but not for measuring upload/downloading progress

They're inaccurate, and there are better ways.

Jake Archibald
api tool
No Image

Learning web development: Authenticating users with plain Node.js

In this chapter, we learn how to write a server that lets users log in via passwords. That process is called authentication.

2ality
api tool
メインブラウザをEdgeに切り替えた理由とAIブラウザの可能性

メインブラウザをEdgeに切り替えた理由とAIブラウザの可能性

ChromeからEdgeに乗り換え 最近、筆者はAI統合型のブラウザを常用するべくメインブラウザをGoogle ChromeからMicrosoft Edgeに切り替えました。EdgeのCopilot Modeは8月にGPT-5が搭載され、かなり使い勝手が良くなりました。2年前にこの前哨戦となる「Bing AIチャットをデフォルトのウェブ検索にして使ってみた」を投稿したのですが、当時と比べると雲泥の差です。 この記事では、筆者がEdgeへの移行を検討するに至った背景や、実際の使用感について整理しました。また、AIブラウザの台頭に伴い、セキュリティ面での新たなリスクについても考えることになったのでそれを喚起します。 移行の動機 筆者がメインブラウザをChromeからEdgeに移行した最大の理由は、AI統合型のウェブブラウジングを日常にしたかったからでした。実は2年前にもプログラミングにAI機能を使いたいという理由で、エディタをJetBrainsから強制的にVSCode/Cursorに移行した経験があり、それを思い出します。 現在、ブラウザやOSとLLMの統合は急速に進んでいます

lai-so-blog
tool ui
🤖 AI Agents Weekly: Agent 3, ChatGPT Developer Mode, MCP Registry, Writing Effective Tools for Agents, Qodo Aware

🤖 AI Agents Weekly: Agent 3, ChatGPT Developer Mode, MCP Registry, Writing Effective Tools for Agents, Qodo Aware

Agent 3, ChatGPT Developer Mode, MCP Registry, Writing Effective Tools for Agents, Qodo Aware

elvis-nlp-blog
library tool
pnpm の minimumReleaseAge オプションでサプライチェーン攻撃を防ぐ

pnpm の minimumReleaseAge オプションでサプライチェーン攻撃を防ぐ

最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。

azukiazusa のテックブログ2
security tool
Interop 2026提案募集開始など: Cybozu Frontend Weekly (2025-09-09号)

Interop 2026提案募集開始など: Cybozu Frontend Weekly (2025-09-09号)

この記事では、Interop 2026の提案募集が開始されたこと、React Native v1.0のリリースが近づいていること、TypeScriptプロジェクトにおけるuseMemoのパフォーマンス問題、JavaScriptのProxyを用いたWindow間RPCの実装、Denoのサンドボックス環境の開発、Scoped Focusgroupの再設計、WCAG 2.2におけるアクセシブルな認証要件、Temporal APIの運用事例、Remix 3の発表予定、Chrome 140の新機能、CSS Snapshot 2025の公開について紹介されています。これらの情報は、フロントエンド開発における最新の動向や技術的な課題に関する重要な知見を提供しています。 • Interop 2026の提案募集が開始され、ブラウザ間の相互運用性向上を目指す。 • React Native v1.0のリリースが近づいている。 • TypeScriptプロジェクトでのuseMemoがコンパイル時間を大幅に延ばす原因となっていた事例。 • JavaScriptのProxyを使用したWindow間のRPC実装手法が紹介されている。 • Denoが信頼できないコードを実行するためのサンドボックス環境を開発中。 • WCAG 2.2でのアクセシブルな認証要件についての解説。 • Temporal APIのPolyfillを社内システムで運用している事例が紹介されている。 • Chrome 140の新機能がリリースされた。

Zenn Cybozu Frontend
api library tool
自然言語で CI/CD パイプラインを定義する Agentic Workflows

自然言語で CI/CD パイプラインを定義する Agentic Workflows

Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI(Continuous AI)を実現するためのツールです。

azukiazusa のテックブログ2
api tool
Crates.io Users Targeted by Phishing Emails

Crates.io Users Targeted by Phishing Emails

The Rust Security Response WG is warning of phishing emails from rustfoundation.dev targeting crates.io users.

Socket
api security tool
What Can We Actually Do With corner-shape?

What Can We Actually Do With corner-shape?

When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when

CSS-Tricks
css tool ui
Introducing Custom Pull Request Alert Comment Headers

Introducing Custom Pull Request Alert Comment Headers

Socket now lets you customize pull request alert headers, helping security teams share clear guidance right in PRs to speed reviews and reduce back-an...

Socket
api tool
Can native web APIs replace custom components in 2025?

Can native web APIs replace custom components in 2025?

See how native web APIs like dialog, details, and the Popover API simplify accessibility, reduce dependencies, and replace custom components.

LogRocket Dev
api tool ui
No Image

London Transport Museum Depot Open Days

I just found out about this (thanks, ChatGPT) and I'm heart-broken to learn that I'm in London a week too early! If you are in London next week (Thursday 18th …

simonwillison-blog
tool
No Image

Learning web development: Implementing web servers

In this chapter, we’ll write our own web server: It will serve files and manage the data for a browser app.

2ality
api tool
Rust Support Now in Beta

Rust Support Now in Beta

Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware suppl...

Socket
library tool
Git Branching for Designers

Git Branching for Designers

A designer-friendly guide to git branching, merging, and pull requests, all explained with relatable Figma examples and visuals. Experiment with confidence.

Builder.io Blog
tool ui
Compiling Multiple CSS Files into One

Compiling Multiple CSS Files into One

Stu Robson outlines two ways to compile multiple CSS files when you aren't relying on Sass for it.

CSS-Tricks
css tool
Too many tools: How to manage frontend tool overload

Too many tools: How to manage frontend tool overload

Read about how the growth of frontend development created so many tools, and how to manage tool overload within your team.

LogRocket Dev
framework library tool
5 ways product managers can steward cross-pollination

5 ways product managers can steward cross-pollination

Learn practical strategies PMs can use to spread ideas, improve collaboration, and shape stronger, more connected product outcomes.

LogRocket Dev
platform tool ui
No Image

Quoting Kumar Aditya

In Python 3.14, I have implemented several changes to fix thread safety of asyncio and enable it to scale effectively on the free-threaded build of CPython. It is now implemented …

simonwillison-blog
tool
Announcing Socket Fix 2.0

Announcing Socket Fix 2.0

Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.

Socket
tool
Feross on Risky Business Weekly Podcast: npm’s Ongoing Supply Chain Attacks

Feross on Risky Business Weekly Podcast: npm’s Ongoing Supply Chain Attacks

Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get...

Socket
api security tool
I tried Google Stitch. Here’s what I loved (and hated) about it

I tried Google Stitch. Here’s what I loved (and hated) about it

Google Stitch turns text and sketches into UI designs. Learn where it excels, where it falls short, and how it compares to other AI tools.

LogRocket Dev
tool ui
AIによる大量コードのマイグレーションスクリプト作成の試行錯誤と知見

AIによる大量コードのマイグレーションスクリプト作成の試行錯誤と知見

この記事では、AIを用いた大量コードのマイグレーションスクリプト作成の試行錯誤とその知見について述べています。特に、1000ファイル以上の書き換えをAIに任せる際の課題として、実行の遅さや期待通りの結果が得られないこと、再現性の無さが挙げられています。これらの問題に対処するために、AIに直接書き換えを命じるのではなく、マイグレーション用のスクリプトを作成させるアプローチが効果的であると提案されています。具体的な事例として、HugoからAstroへのマイグレーションの過程が紹介され、変換の仕様や実際のプロンプトの例も示されています。 • AIによる大量ファイルの書き換えには実行の遅さや結果の不安定さがある。 • 期待通りの結果が得られない場合、再実行が必要で時間がかかる。 • マイグレーションの実行結果が毎回異なるため、全ファイルの精査が必要。 • AIに直接書き換えを命じるのではなく、マイグレーション用のスクリプトを作成させることが効果的。 • HugoからAstroへのマイグレーションの具体例が紹介され、変換の仕様が説明されている。

Zenn Cybozu Frontend
library tool
What’re Your Top 4 CSS Properties?

What’re Your Top 4 CSS Properties?

Everyone has a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer.

CSS-Tricks
css tool ui
No Image

I Replaced Animal Crossing's Dialogue with a Live LLM by Hacking GameCube Memory

Brilliant retro-gaming project by Josh Fonseca, who figured out how to run 2002 Game Cube Animal Crossing in the Dolphin Emulator such that dialog with the characters was instead generated …

simonwillison-blog
api tool
AI dev tool power rankings & comparison [Sept 2025]

AI dev tool power rankings & comparison [Sept 2025]

Compare the top AI development tools and models of September 2025. View updated rankings, feature breakdowns, and find the best fit for you.

LogRocket Dev
api cloud tool
Modernizing on Your Own Terms: A Strategic Guide to Managing Node.js Legacy Systems

Modernizing on Your Own Terms: A Strategic Guide to Managing Node.js Legacy Systems

. Enterprises should inventory runtimes, target the latest LTS, harden supply chains, measure performance, and roll out migrations in a controlled way.

NodeSource Blog
api runtime tool
Introducing Tier 1 Reachability: Precision CVE Triage for Enterprise Teams

Introducing Tier 1 Reachability: Precision CVE Triage for Enterprise Teams

Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.

Socket
security tool
Stop writing PRDs for AI — start using prompt sets instead

Stop writing PRDs for AI — start using prompt sets instead

UX designers need to ditch vague PRDs. See how prompt sets make AI features testable, predictable, and user-friendly from day one.

LogRocket Dev
api tool
File-based routing in React Router v7 – Why keep it optional?

File-based routing in React Router v7 – Why keep it optional?

Explore the new mode that introduced file-based routing in v7, why it remains optional, and when to use it or stick with a different approach.

LogRocket Dev
framework tool
MCP is replacing the browser: Here’s how devs should prepare

MCP is replacing the browser: Here’s how devs should prepare

Learn how MCP will replace the traditional browser, what this shift means for frontend devs, and how to start prepping for an AI-first future.

LogRocket Dev
api framework tool
Steal my startup approved growth workshop agenda

Steal my startup approved growth workshop agenda

Discover how to run a growth workshop that equips your product team to map key drivers, identify levers, and plan experiments that matter.

LogRocket Dev
framework tool
DuckDB npm Account Compromised in Continuing Supply Chain Attack

DuckDB npm Account Compromised in Continuing Supply Chain Attack

Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.

Socket
api security tool
No Image

The 2025 PSF Board Election is Open!

The Python Software Foundation's annual board member election is taking place right now, with votes (from previously affirmed voting members) accepted from September 2nd, 2:00 pm UTC through Tuesday, September …

simonwillison-blog
api cloud platform
No Image

Geoffrey Huntley is cursed

Geoffrey Huntley vibe-coded an entirely new programming language using Claude: The programming language is called "cursed". It's cursed in its lexical structure, it's cursed in how it was built, it's …

simonwillison-blog
api library tool
2025-09-09のJS: Zod 4.1.0、`debug`や`chalk`パッケージの侵害、monorepoなアプリを`node --experimental-strip-types`へ移行

2025-09-09のJS: Zod 4.1.0、`debug`や`chalk`パッケージの侵害、monorepoなアプリを`node --experimental-strip-types`へ移行

JSer.info #747 - Zod 4.1.0がリリースされ、新しいCodecs APIが追加されました。

JSer.info
api library tool
Improve your AI code output with AGENTS.md (+ my best tips)

Improve your AI code output with AGENTS.md (+ my best tips)

Stop re-prompting. Put the rules in AGENTS.md: do and don’ts, file-level tests, and real examples so agents ship code that matches your project.

Builder.io Blog
library tool
Recreating the Apollo AI adoption rate chart with GPT-5, Python and Pyodide

Recreating the Apollo AI adoption rate chart with GPT-5, Python and Pyodide

Apollo Global Management’s “Chief Economist” Dr. Torsten Sløk released this interesting chart which appears to show a slowdown in AI adoption rates among large (>250 empoloyees) companies: Here’s the full …

simonwillison-blog
api library tool
MCP Steering Committee Launches Official MCP Registry in Preview

MCP Steering Committee Launches Official MCP Registry in Preview

The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.

Socket
api tool
No Image

Learning web development: Frontend frameworks

In this chapter, we’ll take a look at frontend frameworks – libraries that help with programming web user interfaces (“frontend” means “browser”, “backend” means “server”). We’ll use the frontend framework Preact to implement the frontend part of a todo list app – whose backend part we’ll implement in a future chapter.

2ality
framework library ui
No Image

Load Llama-3.2 WebGPU in your browser from a local folder

Inspired by a comment on Hacker News I decided to see if it was possible to modify the transformers.js-examples/tree/main/llama-3.2-webgpu Llama 3.2 chat demo (online here, I wrote about it last …

simonwillison-blog
tool
Introducing Pull Request Stories to Help Security Teams Track Supply Chain Risks

Introducing Pull Request Stories to Help Security Teams Track Supply Chain Risks

Socket’s new Pull Request Stories give security teams clear visibility into dependency risks and outcomes across scanned pull requests.

Socket
api tool
How to Evaluate AI Coding Tools for Your Enterprise

How to Evaluate AI Coding Tools for Your Enterprise

Enterprise guide to evaluating AI coding tools: three solution types, evaluation criteria, and a 7-step POC framework for teams.

Builder.io Blog
api tool
npm Author Qix Compromised via Phishing Email in Major Supply Chain Attack

npm Author Qix Compromised via Phishing Email in Major Supply Chain Attack

npm author Qix’s account was compromised, with malicious versions of popular packages like chalk-template, color-convert, and strip-ansi published.

Socket
api security tool
Composition in CSS

Composition in CSS

CSS is a composable language by nature. This composition nature is already built into the cascade. We simply don't talk about composition as a Big Thing because it's the nature of the language.

CSS-Tricks
css tool
How Cursor Project Rules Can Improve Next.js App Development

How Cursor Project Rules Can Improve Next.js App Development

Learn how Cursor project rules streamline Next.js apps with automated conventions, consistent components, and faster developer onboarding.

LogRocket Dev
framework tool
npm Trusted PublishingでOIDCを使ってトークンレスでCIからnpmパッケージを公開する

npm Trusted PublishingでOIDCを使ってトークンレスでCIからnpmパッケージを公開する

npm Trusted Publishingが2025年7月31日に一般公開されました。これにより、OpenID Connect (OIDC)を使ってnpmトークンなしでCI/CDからnpmパッケージを公開できるようになりました。

efcl
api tool
仕様駆動開発を支える Spec Kit を試してみた

仕様駆動開発を支える Spec Kit を試してみた

仕様駆動開発(Specification-Driven Development, SDD)は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。

azukiazusa のテックブログ2
api tool
No Image

Learning web development: Installing npm packages and bundling

In this chapter we develop a small web app in the same way that large professional web apps are developed: We use libraries that we install via npm. We write tests for some of the functionality. We combine all JavaScript code into a single file before we serve the web app. That is called bundling. (Why we do that it explained later.)

2ality
library tool
No Image

Quoting IanCal

RDF has the same problems as the SQL schemas with information scattered. What fields mean requires documentation. There - they have a name on a person. What name? Given? Legal? …

simonwillison-blog
api tool
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials

Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials

Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.

Socket
api security tool
No Image

Quoting Kenton Varda

After struggling for years trying to figure out why people think [Cloudflare] Durable Objects are complicated, I'm increasingly convinced that it's just that they sound complicated. Feels like we can …

simonwillison-blog
tool
rv Is a New Rust-Powered Ruby Version Manager Inspired by Python's uv

rv Is a New Rust-Powered Ruby Version Manager Inspired by Python's uv

Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.

Socket
library tool
What You Need to Know About CSS Color Interpolation

What You Need to Know About CSS Color Interpolation

Color what? Sunkanmi Fafowora explains how an everyday task for CSS can be used to create better colors experiences.

CSS-Tricks
css tool ui
TypeScriptファーストなコーディングAIエージェントのベンチマーク「ts-bench」を公開しました

TypeScriptファーストなコーディングAIエージェントのベンチマーク「ts-bench」を公開しました

AIコーディングエージェントのTypeScriptコード編集能力を評価するための、手軽に再現可能なベンチマークプロジェクト「ts-bench」を公開しました。この記事では、筆者がなぜ ts-bench を作ったのか、今後どうしていきたいかについてお話しします。 GitHub - laiso/ts-benchContribute to laiso/ts-bench development by creating an account on GitHub.GitHublaiso ts-benchの仕組み ts-benchは、プログラミング学習プラットフォーム Exercism のTypeScript問題セットを利用します。各問題には、仕様を説明するドキュメント、エージェントが編集すべきソースコードのひな形、そして正解判定に使うテストコードが含まれています。 ベンチマークタスクは、各問題に対して以下の4つのステップを順番に実行します。 1. AIエージェントの実行: 問題の指示書をプロンプトとしてAIエージェントに渡し、ソースコードを編集させます。 2. テストファイルの復元

lai-so-blog
library tool
No Image

Highlighted tools

Any time I share my collection of tools built using vibe coding and AI-assisted development (now at 124, here's the definitive list) someone will inevitably complain that they're mostly trivial. …

simonwillison-blog
tool
5 support page redesigns that transformed help desk UX

5 support page redesigns that transformed help desk UX

See how brands like Dropbox, Spotify, and Zoom reinvented their help desk UX and what you can steal for your own support pages.

LogRocket Dev
tool ui
Don’t vibe code your backend: The hidden dangers of BaaS

Don’t vibe code your backend: The hidden dangers of BaaS

Explore the hidden dangers of BaaS, and how frontend-focused teams can use BaaS platforms without suffering from their major risks.

LogRocket Dev
api tool
Building real-time state management with React and Fluent-State

Building real-time state management with React and Fluent-State

Build a real-time AI chat in React with Fluent-state: handle streaming, async states, derived UI, and side effects cleanly.

LogRocket Dev
library tool ui
フロントエンドのモジュールを共有する手法を考える

フロントエンドのモジュールを共有する手法を考える

この記事では、サイボウズのkintoneプロダクトにおけるフロントエンドのモジュール共有手法について述べています。2021年から進められているフロントエンド刷新の一環として、モノリス構成からの脱却を目指し、各チームが独立したMonorepo構成を採用しています。しかし、チーム間でのモジュール共有が課題となっており、この記事では3つの共有パターンを提案しています。1つ目はnpmパッケージとして公開する方法で、バージョニングによる独立した開発が可能ですが、オーナーシップの明確化が必要です。2つ目は1つのMonorepoにまとめる方法で、共通モジュールの即時反映が可能ですが、依存管理の集約によるコンフリクトが懸念されます。3つ目は共通モジュールを直接扱う方法で、Monorepo構成でなくても利用可能ですが、運用の柔軟性が求められます。 • フロントエンドのモジュール共有の課題を解決するための手法を提案 • npmパッケージとして公開する方法は独立した開発が可能だが、オーナーシップの明確化が必要 • 1つのMonorepoにまとめる方法は共通モジュールの即時反映が可能だが、依存管理の集約によるコンフリクトが懸念される • 共通モジュールを直接扱う方法はMonorepo構成でなくても利用可能だが、運用の柔軟性が求められる • 各手法のメリット・デメリットを考慮した意思決定が必要

Zenn Cybozu Frontend
library tool
Nx Investigation Reveals GitHub Actions Workflow Exploit Led to npm Token Theft, Prompting Switch to Trusted Publishing

Nx Investigation Reveals GitHub Actions Workflow Exploit Led to npm Token Theft, Prompting Switch to Trusted Publishing

Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.

Socket
api security tool
Designers can ship without engineering handoffs

Designers can ship without engineering handoffs

Designers can ship UI changes without engineering handoffs. With Fusion, visually edit your live site, use real tokens and components, and make PR‑ready diffs.

Builder.io Blog
tool
AI coding tools still suck at context — here’s how to work around it

AI coding tools still suck at context — here’s how to work around it

Discover why you might be having difficulty with AI coding tools, and learn some practical strategies to work with AI more effectively.

LogRocket Dev
api tool
No Image

gov.uscourts.dcd.223205.1436.0_1.pdf

Here's the 230 page PDF ruling on the 2023 United States v. Google LLC federal antitrust case - the case that could have resulted in Google selling off Chrome and …

simonwillison-blog
api cloud tool
AGENTS.md Gains Traction as an Open Format for AI Coding Agents

AGENTS.md Gains Traction as an Open Format for AI Coding Agents

AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.

Socket
api tool
Nx の攻撃から学べること #s1ngularity

Nx の攻撃から学べること #s1ngularity

Nx リポジトリが攻撃を受け、広範囲にわたるインシデントが発生した。今回の事例は、GitHub Actions を中心に複数のステップが組み合わさった攻撃であり、過去に何度も発生してきた攻撃と本質的には変わらない。しかし、途中で AI が何度か登場するため「AI が書いたコ...

Jxck
framework ui
No Image

Making XML human-readable without XSLT

In response to the recent discourse about XSLT support in browsers, Jake Archibald shares a new-to-me alternative trick for making an XML document readable in a browser: adding the following …

simonwillison-blog
tool
Updates from N|Solid Runtime: The Best Open-Source Node.js RT Just Got Better

Updates from N|Solid Runtime: The Best Open-Source Node.js RT Just Got Better

N|Solid Runtime v6.0.0: Continuous profiling gRPC-Only SaaS, and Node.js v22.18.0

NodeSource Blog
runtime tool
Cursor vs Claude Code: The Ultimate Comparison Guide

Cursor vs Claude Code: The Ultimate Comparison Guide

Cursor or Claude Code? Both start at $20/mo but work differently. Compare features, hidden costs, and real workflows to pick the right AI coding tool.

Builder.io Blog
library tool
Our robo advisor: A lesson in skipping UX research

Our robo advisor: A lesson in skipping UX research

Skipping UX research wastes time and leads to flop features. See how user insights drive adoption, engagement, and lasting product impact.

LogRocket Dev
tool ui
Should the CSS light-dark() Function Support More Than Light and Dark Values?

Should the CSS light-dark() Function Support More Than Light and Dark Values?

The light-dark() function is currently designed to support just two color schemes. Should it support others? Sunkanmi Fafowora says yes and no.

CSS-Tricks
tool ui
The silent shift to Vite: What it means for your stack

The silent shift to Vite: What it means for your stack

Learn how Vite surpassed Webpack as the default JavaScript bundler, and what this shift means for your stack and the future of JS build tools.

LogRocket Dev
framework tool
How to consolidate your product management tools

How to consolidate your product management tools

Streamline your product stack with a six step guide to tool consolidation. Cut costs, reduce silos, and boost team efficiency.

LogRocket Dev
tool
Rich Pixels

Rich Pixels

Neat Python library by Darren Burns adding pixel image support to the Rich terminal library, using tricks to render an image using full or half-height colored blocks. Here's the key …

simonwillison-blog
library tool
Making XML human-readable without XSLT

Making XML human-readable without XSLT

JavaScript is right there.

Jake Archibald
tool ui
No Image

Learning web development: Asynchronous JavaScript – Promises and async functions

In this chapter, we learn how to handle tasks that take a long time to complete – think downloading a file. The mechanisms for doing that, Promises and async functions are an important foundation of JavaScript and enable us to do a variety of interesting things.

2ality
tool
Lean for JavaScript Developers

Lean for JavaScript Developers

Programming with proofs.

Overreacted
tool
転職しました

転職しました

この記事では、著者が株式会社ピクセルグリッドを退職し、VoidZero Inc.に転職した経緯について述べられています。著者はピクセルグリッドでフロントエンドエンジニアとして8年間働き、ReactやNext.js、Svelteなどの技術を使用してきました。会社の自由な社風やフルリモート勤務についても触れています。新しい職場での挑戦や、優秀な同僚とのコミュニケーションの難しさについても言及されており、特にPrettierのRustリライトに取り組む意向が示されています。最後に、OSS活動が仕事に繋がったことを振り返り、Vue Fes Japan 2025での発表予定についても触れています。 • 著者は株式会社ピクセルグリッドを退職し、VoidZero Inc.に転職した。 • ピクセルグリッドでの勤務は8年間で、主にフロントエンド技術を使用していた。 • 新しい職場では優秀な同僚とのコミュニケーションが求められる。 • PrettierのRustリライトに取り組む意向がある。 • フルリモート勤務を続ける予定である。

leaysgur's Blog
framework library tool
Deriving Client State from Server State

Deriving Client State from Server State

How to use derived state in React to keep client state and server data aligned without manual sync or effects.

TkDodo
framework library
2025-08-31のJS: Bun v1.2.21、Apollo Client v4、nxパッケージ侵害とサプライチェーン攻撃

2025-08-31のJS: Bun v1.2.21、Apollo Client v4、nxパッケージ侵害とサプライチェーン攻撃

JSer.info #746 - Bun v1.2.21 がリリースされました。

JSer.info
library tool
No Image

Learning web development: JSON and processing files in Node.js

In this chapter, we explore the popular data format JSON. And we implement shell commands via Node.js that read and write files.

2ality
library tool
AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。

azukiazusa のテックブログ2
tool
No Image

Learning web development: JavaScript Maps

In this chapter, we’ll explore the data structure Map (a class) which lets us translate (“map”) from an input value to an output value. We’ll use a Map to display text upside-down in a terminal!

2ality
library tool
No Image

Talk Python: Celebrating Django's 20th Birthday With Its Creators

I recorded this podcast episode recently to celebrate Django's 20th birthday with Adrian Holovaty, Will Vincent, Jeff Triplet, and Thibaud Colas. We didn’t know that it was a web framework. …

simonwillison-blog
framework tool
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions

Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions

Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.

Socket
api security tool
What happens when dev communities die: Stack Overflow’s slow collapse

What happens when dev communities die: Stack Overflow’s slow collapse

Explore how Stack Overflow’s slow collapse affects programming and the possible future for Stack Overflow vs. generative AI competition.

LogRocket Dev
api tool
How to build a multimodal AI app with voice and vision in Next.js

How to build a multimodal AI app with voice and vision in Next.js

Learn how to build multimodal AI interactions to process images, audio, and even real-time video streams, using Next.js and Gemini.

LogRocket Dev
api framework tool
CSS Elevator: A Pure CSS State Machine With Floor Navigation

CSS Elevator: A Pure CSS State Machine With Floor Navigation

In this article, author Chris Sabourin walk through how modern CSS features can build a fully functional, interactive elevator that knows where it is, where it’s headed, and how long it’ll take to get there. No JavaScript required.

CSS-Tricks
tool ui
No Image

JavaScript’s trademark problem

In this blog post, we discuss Oracle’s trademark of the word “JavaScript”: What are the problems caused by that trademark? How can we fix those problems?

2ality
api framework tool
No Image

Learning web development: JavaScript exceptions

In this chapter, we look at exceptions in JavaScript. They are a way of handling errors. We’ll need them for the next chapter.

2ality
tool
Risky Biz Podcast: Making Reachability Analysis Work in Real-World Codebases

Risky Biz Podcast: Making Reachability Analysis Work in Real-World Codebases

This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency tree...

Socket
api security tool
How I learned to treat AI like a partner, not a threat

How I learned to treat AI like a partner, not a threat

Turn AI from a threat into a partner in UX design by refining workflows, avoiding pitfalls, and keeping human skills central.

LogRocket Dev
tool ui
I tried out Kiro: Here’s what I learned

I tried out Kiro: Here’s what I learned

Check out Kiro, AWS's AI-powered IDE, see what makes it different from other AI coding tools, and explore whether it lives up to the hype.

LogRocket Dev
library tool
Why Go design patterns still matter

Why Go design patterns still matter

Here's how three design patterns solved our Go microservices scaling problems without sacrificing simplicity.

LogRocket Dev
framework tool
How to define customer segments that actually matter

How to define customer segments that actually matter

Avoid weak product-market fit and wasted resources. Learn how to narrow broad customer segments into a focused beachhead strategy.

LogRocket Dev
api tool
夏休みの終わりこそ復習しておきたい、ES2016以降のモダンJavaScript再入門

夏休みの終わりこそ復習しておきたい、ES2016以降のモダンJavaScript再入門

この記事では、ES2016以降に追加されたモダンJavaScriptの便利な機能を紹介しています。特に、グローバルオブジェクトへのアクセスを統一するglobalThis、末尾カンマの使用、Optional Catch Binding、オブジェクトに対するRest & Spread構文、Null合体演算子などが取り上げられています。これらの機能は、コードの可読性や保守性を向上させるために役立ちます。特に、古いスタイルのコードが残る中で新しい機能を活用することの重要性が強調されています。夏休みの終わりに、これらの知識をアップデートし、秋からの開発を楽にすることを提案しています。 • ES2016以降のJavaScriptの新機能を紹介 • globalThisにより、環境に依存せずにグローバルオブジェクトにアクセス可能 • 末尾カンマを使用することで、コードの可読性が向上 • Optional Catch Bindingにより、catch節の引数を省略できる • Rest & Spread構文がオブジェクトにも適用可能になった • Null合体演算子はnullまたはundefinedの判定に便利

Zenn Cybozu Frontend
library tool
tsx と Node.js Type Stripping の違い

tsx と Node.js Type Stripping の違い

tsx は TypeScript コードを事前トランスパイルすることなく、直接 Node.js で実行するためのツール。 https://github.com/privatenumber/tsx ところで最近の Node.js には Type Stripping という機能が入った。これを使うと、tsx なしで TypeScript コードを事前トランスパイルせずに実行できる。 https://nodejs.org/api/typescript.html#type-stripping 両者の違い 一見すると両者は機能的に同じものかのように思うけど、実は結構違いがある。 import speci…

mizdra.net
library tool
No Image

Learning web development: Plain objects in JavaScript

In this chapter, we learn how to create plain objects with properties. We use them to create a simple flash card app.

2ality
library tool
Finetune and deploy GPT-OSS in MXFP4: ModelOpt+SGLang

Finetune and deploy GPT-OSS in MXFP4: ModelOpt+SGLang

<p>GPT-OSS, the first open-source model family from OpenAI's lab since GPT-2, demonstrates strong math, coding, and general capabilities even when compared w...

lmsys-blog
library tool
V&A East Storehouse and Operation Mincemeat in London

V&A East Storehouse and Operation Mincemeat in London

We were back in London for a few days and yesterday had a day of culture. First up: the brand new V&A East Storehouse museum in the Queen Elizabeth Olympic …

simonwillison-blog
platform
Nx npm Packages Compromised in Supply Chain Attack Weaponizing AI CLI Tools

Nx npm Packages Compromised in Supply Chain Attack Weaponizing AI CLI Tools

Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malwa...

Socket
api security tool
A Radio Button Shopping Cart Trick

A Radio Button Shopping Cart Trick

Here's an approach for animating products added to a shopping cart that handles an infinite number of items using a variation of the ol' Checkbox Hack.

CSS-Tricks
css tool ui
No Image

Learning web development: Modules and testing in JavaScript

So far, all of our JavaScript code resided in a single file – be it an .html file or a .js file. In this chapter, we learn how to split it up into multiple files. And how to automatically test if the code we write is correct.

2ality
library tool
User agent strings to HTTP signatures - methods for AI agent identification

User agent strings to HTTP signatures - methods for AI agent identification

How to verify AI agent identity using HTTP message signatures with TypeScript.

Arcjet Blog
api security tool
Stop using templates — do this instead

Stop using templates — do this instead

Templates can speed you up or slow you down. Here’s how to avoid the trap and design smarter, not lazier.

LogRocket Dev
tool ui