【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸「ホーム画面に追加」でできること 第1回 アプリ扱いになる条件
🔸Intl.Segmenterで文字と単語を正しく分割する 前編 Intl.Segmenterの基本とその注意点
🔸AIエージェントのススメ 第16回 AIエージェントを使った開発のまとめ その1
www.codegrid.net/issues/698/?...
#codegrid

【本日公開・明日朝まで無料】ホーム画面から起動したサイトには、アドレスバーも戻るボタンもありません。「ホーム画面に追加」でアプリとして扱われると、見え方・OSからの扱い・使える機能がどう変わるのかを押さえます：「ホーム画面に追加」でできること - アプリ扱いになる条件 www.codegrid.net/articles/202... #codegrid

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸「ホーム画面に追加」でできること 第1回 アプリ扱いになる条件
🔸Intl.Segmenterで文字と単語を正しく分割する 前編 Intl.Segmenterの基本とその注意点
🔸AIエージェントのススメ 第16回 AIエージェントを使った開発のまとめ その1
www.codegrid.net/issues/698/?...
#codegrid

【本日公開・明日朝まで無料】絵文字「👨‍👩‍👧‍👦」は1文字に見えますが、「.length」は「11」。このように見た目の単位とコード上の扱いがずれる文字列を、正しく切り分ける標準国際化API、Intl.Segmenterを解説します：Intl.Segmenterで文字と単語を正しく分割する - Intl.Segmenterの基本とその注意点 www.codegrid.net/articles/202... #codegrid

【本日公開・明日朝まで無料】「学んでから作る」から「作ってから学ぶ」へ。AIエージェントで開発の順番が逆転した今、ワークフローの見直し、専門外の領域への広げ方、すぐ古くなるAI情報との距離の取り方を、筆者の経験から考えます：AIエージェントのススメ - AIエージェントを使った開発のまとめ その1 www.codegrid.net/articles/202... #codegrid

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸Playwright MCPによるE2Eテストコードの生成 第1回 保守性の高いテストコード
🔸隙間に線を引くcolumn-rule/row-rule 最終回 線の見え方を作り込む
🔸Webサイトホスティングで使うCloudflare Workers 最終回 バインディングとログ
www.codegrid.net/issues/697/?...
#codegrid

【Tips】
dialog要素はEscキーで勝手に閉じてしまいます。確定ボタンを押すまでは閉じさせたくない…そんなときはclosedby="none"が便利です

Safariはまだ未対応（Chrome・Firefoxは対応済み）なので、keydown + event.preventDefault()のフォールバックも忘れずに。

#codegrid #html

【本日公開・明日朝まで無料】
CSS Gridで隙間に線を引くとき、空セルにまで線が伸びていたら不格好ですよね😅

rule-visibility-itemsのall / around / betweenを使い分ければ、空いている領域への線の出し方を細かく制御できます💡

www.codegrid.net/articles/202... #codegrid

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸Playwright MCPによるE2Eテストコードの生成 第1回 保守性の高いテストコード
🔸隙間に線を引くcolumn-rule/row-rule 最終回 線の見え方を作り込む
🔸Webサイトホスティングで使うCloudflare Workers 最終回 バインディングとログ
www.codegrid.net/issues/697/?...
#codegrid

【本日公開・明日朝まで無料】auto-fillのカード一覧で最終行に空きができると、そこにも縦線が伸びてしまいます。rule-visibility-itemsで線を出す条件を制御する方法や、線の端をそろえるrule-insetを解説します：隙間に線を引くcolumn-rule/row-rule - 線の見え方を作り込むrule-visibility-itemsとrule-inset www.codegrid.net/articles/202... #codegrid

【本日公開・明日朝まで無料】WorkersからD1やKV、R2といったデータベース・ストレージに、APIキーなしでつなぐ「バインディング」の仕組みと、動作を見守るためのログの機能を解説します：Webサイトホスティングで使うCloudflare Workers - Workersのバインディングとログ機能 www.codegrid.net/articles/202... #codegrid

【本日公開・明日朝まで無料】Playwright MCPを使って、最小限の指示で壊れにくいE2Eテストコードを生成する方法を紹介します。生成時にブラウザ上で操作を試して確かめるため、精度の高いコードに仕上がります：Playwright MCPによるE2Eテストコードの生成 - 最小限の指示で生成する、保守性の高いE2Eテストコード www.codegrid.net/articles/202... #codegrid

【Tips】
正解は「B. 2回失敗したら/clearする」でした。

失敗した試みがコンテキストに蓄積すると、Claudeは「うまくいかないアプローチ」に引きずられます。失敗パターンを1文で伝えて、新しいコンテキストで再開しましょう💪

#codegrid #claudecode

【Tips】
CSS Custom Highlight APIでは、Highlightオブジェクトに複数のRangeをまとめて渡せます💡

ページ内キーワード検索など、複数箇所を一度にハイライトするシーンで役立ちます。`CSS.highlights.set()`で名前をつけてCSS側と紐づける仕組みです。

#codegrid #css

【Tips】
サブエージェントは「並列処理のため」と思われがちですが、実はもっと重要な役割があります。

それは独立したコンテキストで調査し、要約だけをメインに返す「コンテキスト分離」です💡
メインの会話を大量のファイル内容や試行錯誤で汚さずに済みます。

#codegrid #claudecode

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸script要素にtype="module"を付ける利点 最終回 ビルドなしでnpmのパッケージを使う
🔸AIエージェントのススメ 第15回 スキルを使いこなす5：ナレッジスキル その3
🔸JSでバイナリを扱う 最終回 画像のバイト列を操作する
codegrid.net/issues/696/?...
#codegrid

【Tips】
dialog要素を始めとするポップオーバーUIを閉じる時、display: noneになった瞬間にアニメーションが消えてしまう…と思っていませんか？

transition-behavior: allow-discreteと@starting-style`組み合わせれば、閉じるときもなめらかにアニメーションさせられます✨

#codegrid #css

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます
🔸script要素にtype="module"を付ける利点 最終回 ビルドなしでnpmのパッケージを使う
🔸AIエージェントのススメ 第15回 スキルを使いこなす5：ナレッジスキル その3
🔸JSでバイナリを扱う 最終回 画像のバイト列を操作する
codegrid.net/issues/696/?...
#codegrid

【本日公開】シリーズ最終回では、URL.createObjectURL()での画像表示と、Canvasを使ったピクセルデータの書き換えを追加して、画像をグレースケールにするデモを完成させます。：JSでバイナリを扱う - 画像のバイト列を操作する www.codegrid.net/articles/202... #codegrid

【本日公開・明日朝まで無料】よいアプリやWebサイトのために何を選べばよいかを知っているのは、結局は開発者自身です。だからこそ、その経験をスキルとして蓄積し、整理していけば、AIは過去の失敗を知っているかのように動くようになります：AIエージェントのススメ - スキルを使いこなす5：ナレッジスキル その3 www.codegrid.net/articles/202... #codegrid