Last updated: 2025/09/28 09:01
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 …
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
Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする
自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。
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.
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.
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.
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でのみ動作検証が行われている。
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.
Open Social
The protocol is the API.
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.
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.
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.
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.
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.
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 …
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.
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.
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の並べ替えに特化したプラグインで、グルーピングの正規表現を使用。
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.
2025-09-23のJS: Safari 26.0、npm registryのサプライチェーン攻撃対策のロードマップ、Node.js v24.8.0(npm v11.6.0)
JSer.info #749 - Safari 26.0がリリースされました。
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.
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.
Learning web development: Creating web pages via HTML
In this chapter, we learn how to create web pages via HTML.
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.
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.
Learning web development: Getting started
In this chapter, we perform a few steps to prepare us for web development.
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のパースを行うライブラリを使用している。 • 具体的なコード例が提供されており、実用的なアプリケーションの構築が可能。
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
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...
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 …
GitHub Actions で YAML アンカーを使う
GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます
AI エージェントのための Agent Payments Protocol (AP2) を試してみた
現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。
サプライチェーン攻撃への防御策
前回は、Nx の事例をベースに「パッケージを公開する側」の対策について解説した。今回は、「パッケージを使う側」、もっと言えば「OSS を使う上で開発者が考えるべきこと」について考察する。
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 …
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.
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.
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.
MentraOSでスマートグラスアプリの開発を試してみた
AI ShiftのTECH BLOGです。AI技術の情報や活用方法などをご案内いたします。
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.
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.
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.
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.
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 ...
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.
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.
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整合性に関する調査結果 • クリックしやすいターゲットエリアの実装テクニック
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.
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.
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.
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.
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への変換に関する注意点も記載されている。
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.
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`.
改行コードの違いで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でも同様の設定が行われている。
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.
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
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 …
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.
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.
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().
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.
2025-09-15のJS: pnpm 10.16(サプライチェーン攻撃対策)、Deno 2.5、bun installの裏側
JSer.info #748 - pnpm 10.16がリリースされました。
Fetch streams are great, but not for measuring upload/downloading progress
They're inaccurate, and there are better ways.
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.
メインブラウザを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の統合は急速に進んでいます
🤖 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
pnpm の minimumReleaseAge オプションでサプライチェーン攻撃を防ぐ
最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。
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の新機能がリリースされた。
自然言語で CI/CD パイプラインを定義する Agentic Workflows
Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。
Crates.io Users Targeted by Phishing Emails
The Rust Security Response WG is warning of phishing emails from rustfoundation.dev targeting crates.io users.
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
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...
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.
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 …
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.
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...
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.
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.
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.
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.
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 …
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.
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...
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.
AIによる大量コードのマイグレーションスクリプト作成の試行錯誤と知見
この記事では、AIを用いた大量コードのマイグレーションスクリプト作成の試行錯誤とその知見について述べています。特に、1000ファイル以上の書き換えをAIに任せる際の課題として、実行の遅さや期待通りの結果が得られないこと、再現性の無さが挙げられています。これらの問題に対処するために、AIに直接書き換えを命じるのではなく、マイグレーション用のスクリプトを作成させるアプローチが効果的であると提案されています。具体的な事例として、HugoからAstroへのマイグレーションの過程が紹介され、変換の仕様や実際のプロンプトの例も示されています。 • AIによる大量ファイルの書き換えには実行の遅さや結果の不安定さがある。 • 期待通りの結果が得られない場合、再実行が必要で時間がかかる。 • マイグレーションの実行結果が毎回異なるため、全ファイルの精査が必要。 • AIに直接書き換えを命じるのではなく、マイグレーション用のスクリプトを作成させることが効果的。 • HugoからAstroへのマイグレーションの具体例が紹介され、変換の仕様が説明されている。
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.
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 …
![AI dev tool power rankings & comparison [Sept 2025]](https://blog.logrocket.com/wp-content/uploads/2025/07/ai_dev_tool_power_rankings_july_2025_web.png)
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.
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.
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.
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.
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.
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.
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.
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.
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 …
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 …
2025-09-09のJS: Zod 4.1.0、`debug`や`chalk`パッケージの侵害、monorepoなアプリを`node --experimental-strip-types`へ移行
JSer.info #747 - Zod 4.1.0がリリースされ、新しいCodecs APIが追加されました。
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.
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 …
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.
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.
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 …
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.
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.
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.
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.
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.
npm Trusted PublishingでOIDCを使ってトークンレスでCIからnpmパッケージを公開する
npm Trusted Publishingが2025年7月31日に一般公開されました。これにより、OpenID Connect (OIDC)を使ってnpmトークンなしでCI/CDからnpmパッケージを公開できるようになりました。
仕様駆動開発を支える Spec Kit を試してみた
仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。
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.)
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? …
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.
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 …
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.
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.
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. テストファイルの復元
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. …
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.
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.
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.
フロントエンドのモジュールを共有する手法を考える
この記事では、サイボウズのkintoneプロダクトにおけるフロントエンドのモジュール共有手法について述べています。2021年から進められているフロントエンド刷新の一環として、モノリス構成からの脱却を目指し、各チームが独立したMonorepo構成を採用しています。しかし、チーム間でのモジュール共有が課題となっており、この記事では3つの共有パターンを提案しています。1つ目はnpmパッケージとして公開する方法で、バージョニングによる独立した開発が可能ですが、オーナーシップの明確化が必要です。2つ目は1つのMonorepoにまとめる方法で、共通モジュールの即時反映が可能ですが、依存管理の集約によるコンフリクトが懸念されます。3つ目は共通モジュールを直接扱う方法で、Monorepo構成でなくても利用可能ですが、運用の柔軟性が求められます。 • フロントエンドのモジュール共有の課題を解決するための手法を提案 • npmパッケージとして公開する方法は独立した開発が可能だが、オーナーシップの明確化が必要 • 1つのMonorepoにまとめる方法は共通モジュールの即時反映が可能だが、依存管理の集約によるコンフリクトが懸念される • 共通モジュールを直接扱う方法はMonorepo構成でなくても利用可能だが、運用の柔軟性が求められる • 各手法のメリット・デメリットを考慮した意思決定が必要
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.
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.
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.
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 …
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.
Nx の攻撃から学べること #s1ngularity
Nx リポジトリが攻撃を受け、広範囲にわたるインシデントが発生した。今回の事例は、GitHub Actions を中心に複数のステップが組み合わさった攻撃であり、過去に何度も発生してきた攻撃と本質的には変わらない。しかし、途中で AI が何度か登場するため「AI が書いたコ...
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 …
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
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.
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.
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.
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.
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.
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 …
Making XML human-readable without XSLT
JavaScript is right there.
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.
Lean for JavaScript Developers
Programming with proofs.
転職しました
この記事では、著者が株式会社ピクセルグリッドを退職し、VoidZero Inc.に転職した経緯について述べられています。著者はピクセルグリッドでフロントエンドエンジニアとして8年間働き、ReactやNext.js、Svelteなどの技術を使用してきました。会社の自由な社風やフルリモート勤務についても触れています。新しい職場での挑戦や、優秀な同僚とのコミュニケーションの難しさについても言及されており、特にPrettierのRustリライトに取り組む意向が示されています。最後に、OSS活動が仕事に繋がったことを振り返り、Vue Fes Japan 2025での発表予定についても触れています。 • 著者は株式会社ピクセルグリッドを退職し、VoidZero Inc.に転職した。 • ピクセルグリッドでの勤務は8年間で、主にフロントエンド技術を使用していた。 • 新しい職場では優秀な同僚とのコミュニケーションが求められる。 • PrettierのRustリライトに取り組む意向がある。 • フルリモート勤務を続ける予定である。
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.
2025-08-31のJS: Bun v1.2.21、Apollo Client v4、nxパッケージ侵害とサプライチェーン攻撃
JSer.info #746 - Bun v1.2.21 がリリースされました。
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.
AI コーディングエージェントの管理を行う Vibe Kanban を試してみた
Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。
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!
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. …
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.
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.
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.
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.
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?
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.
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...
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.