【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸ターミナルを中心とした作業環境 第2回 herdrで作るエージェントベースのターミナル環境 🔸Webサイトホスティングで使うCloudflare Workers 第2回 AstroのサイトをWorkersにデプロイする 🔸script要素にtype="module"を付ける利点 第1回 importとexportでファイルを分割する codegrid.net/issues/692/?... #codegrid
CodeGrid【公式】
@codegrid.net
Jamstackの会社ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストします。 https://www.codegrid.net/
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます 🔸ターミナルを中心とした作業環境 第2回 herdrで作るエージェント環境 🔸Webサイトホスティングで使うCloudflare Workers 第2回 AstroサイトをWorkersにデプロイ 🔸script要素にtype="module"を付ける利点 第1回 importとexportでファイル分割 codegrid.net/issues/692/?... #codegrid
【本日公開・明日朝まで無料】type="module"を付ければ、HTMLに書くのは入口の1ファイルだけ。「import」が必要なファイルをたどって集め、「export」した機能だけが外から使えます：script要素にtype="module"を付ける利点 - importとexportでファイルを分割する www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料】pushしたら自動でデプロイされ、プルリクエストには「プレビューURL」が出る。Astroのサイトをその状態まで整える手順を、SSGとSSRの設定を追いながら解説します：Webサイトホスティングで使うCloudflare Workers - AstroのサイトをWorkersにデプロイする www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料】マルチプレクサがエージェントの状態を知っていれば、承認待ちを探す手間がなくなります。状態をサイドバーに集約する「herdr」を紹介します：ターミナルを中心とした作業環境 - herdrで作るエージェントベースのターミナル環境 www.codegrid.net/articles/202... #codegrid
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸AIエージェントのススメ 第14回 スキルを使いこなす4：ナレッジスキル その2 🔸JSでバイナリを扱う 第2回 バイナリを扱うオブジェクト 🔸AI向けにコマンド出力を最適化するCLIプロキシ 後編 rtkの誤判定を減らす除外設定 codegrid.net/issues/691/?... #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます 🔸AIエージェントのススメ 第14回 スキルを使いこなす4：ナレッジスキル その2 🔸JSでバイナリを扱う 第2回 バイナリを扱うオブジェクト 🔸AI向けにコマンド出力を最適化するCLIプロキシ 後編 rtkの誤判定を減らす除外設定 codegrid.net/issues/691/?... #codegrid
【本日公開・明日朝まで無料 】同じバイト列でも、被せる「窓」が違えば違う数値に読まれます。ArrayBuffer・TypedArray・DataViewの関係を、「バイト列を保持する箱」と「それを解釈する窓」という視点で整理します：JSでバイナリを扱う - バイナリを扱うオブジェクト www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料】AIの成果物を全部自分の目でチェックしないと安心できない――そう感じたことはありませんか？ 必要なのは「進むべき方向」を示すスキルです。技術スタック選定・CSS設計・テストの規約、3つの実例で考え方を解説します：AIエージェントのススメ - スキルを使いこなす4：ナレッジスキル その2 www.codegrid.net/articles/202... #codegrid
【本日公開】CLI出力をAI向けに変換するrtkの発想は合理的ですが、調べていくと「入れるだけでよいツール」ではないことがわかってきます。筆者が試行錯誤して得た、効果的な使い方を紹介します：AI向けにコマンド出力を最適化するCLIプロキシ - rtkの誤判定を減らす除外設定 www.codegrid.net/articles/202... #codegrid
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸Webサイトホスティングで使うCloudflare Workers 第1回 Workersでサイトを配信する仕組み 🔸CSSの届く範囲を広げる:has() 最終回 :has()を実践で使いこなす応用ユースケース 🔸AI向けにコマンド出力を最適化するCLIプロキシ 前編 rtkの仕組みとトークン削減の実測 codegrid.net/issues/690/?... #codegrid
【最新公開一覧】CodeGrid今週公開の3本はこちら🎉 🔸Webサイトホスティングで使うCloudflare Workers 第1回 Workersでサイトを配信する仕組み 🔸CSSの届く範囲を広げる:has() 最終回 :has()を実践で使いこなす応用ユースケース 🔸AI向けにコマンド出力を最適化するCLIプロキシ 前編 rtkの仕組みとトークン削減の実測 codegrid.net/issues/690/?... #codegrid
【本日公開・明日朝まで無料 】 Cloudflareが新規サイトのホスティングに推奨するのはPagesではなくWorkersです。両者は何が違い、Workersではどう配信されるのか。第1回はその全体像を整理します：Webサイトホスティングで使うCloudflare Workers - Workersでサイトを配信する仕組み www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料 】CLI出力をAI向けに圧縮する「rtk」。公式は60〜90%のトークン削減を掲げていますが、実際の環境ではどうだったのか、筆者の1か月分のログから検証しました。効果的に使うための考え方も紹介します：AI向けにコマンド出力を最適化するCLIプロキシ - rtkの仕組みとトークン削減の実測 www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料 】画像の有無でカードのレイアウトを切り替えたり、連続する見出しの余白を詰めたり。これまでJavaScriptやHTMLの作り込みで対応していた処理は、CSSの「:has()」だけで書けます。3つの実践的なユースケースで確認します：CSSの届く範囲を広げる :has() - :has()を実践で使いこなす応用ユースケース www.codegrid.net/articles/202... #codegrid
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸CSSの届く範囲を広げる :has() 第2回 :has()でモーダルダイアログとホバーの状態を扱う 🔸JSでバイナリを扱う 第1回 バイナリとは何か 🔸AIエージェントのススメ 第13回 スキルを使いこなす3：ナレッジスキル その1 codegrid.net/issues/689/?... #codegrid
【無料公開】 変数や関数への名付け、なんとなくで済ませていませんか？ 名付けは開発者間のコミュニケーション手段であるという視点から、「危険」を伝える命名の例なども交えつつ、その本質を考察します✨ www.codegrid.net/articles/202... #codegrid #programming 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【無料公開】 「現在日時と発注可能日時を比較する」ような何気ないコード、実はPCのタイムゾーン設定次第で挙動が変わることがあります😳 よくある実装の落とし穴と、その原因になる時差・タイムゾーンの仕組みを解説します Dateオブジェクトを使うすべての方におすすめです www.codegrid.net/articles/202... #codegrid #javascript 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【本日公開・明日朝まで無料】 ホバー中のカード以外を暗くする演出、CSSだけでは無理だと思っていませんか？ :has()なら1行で書けます👇 .card-list:has(.card:hover) .card:not(:hover) { opacity: .5; } 続きはこちら👇 www.codegrid.net/articles/202... #CSS #codegrid
【本日公開・明日朝まで無料】 AIはコードを書くのは得意でも、固有の情報までは持っていません。 たとえば、「会社のWebサイト」を一から作ろうとしても、メンバー構成や会社の住所までは当然知りません🤔 その知識のギャップを埋めるのが「ナレッジスキル」という考え方です。 続きはこちら👇 www.codegrid.net/articles/202... #AI #codegrid
【本日公開・明日朝まで無料】 文字とバイト列、実は1対1では固定されていません🤔 ✅ UTF-8ならASCII範囲の文字（英数字）は1文字が1バイト ✅ 日本語などの文字は1文字が複数バイト（「あ」はUTF-8で3バイト） ✅ 対応関係は文字コードごとに決まる ❌ 同じ文字なら、どの文字コードでも同じバイト列になる 詳しくはこちら👇 www.codegrid.net/articles/202... #JavaScript #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます 🔸CSSの届く範囲を広げる :has() 第2回 :has()でモーダルダイアログとホバーの状態を扱う 🔸JSでバイナリを扱う 第1回 バイナリとは何か 🔸AIエージェントのススメ 第13回 スキルを使いこなす3：ナレッジスキル その1 codegrid.net/issues/689/?... #codegrid
【本日公開・明日朝まで無料】AIエージェントに頼んだけれど、「思ったようにやってくれない」と感じたことはありませんか？ 一般的なテンプレートどおりの知識と、自社固有の情報とのギャップを埋める「純粋なナレッジ」スキルの作り方を解説します：AIエージェントのススメ - スキルを使いこなす3：ナレッジスキル その1 www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料】テキストも画像も、実体は0〜255の数値が並ぶバイト列。違うのは、その読み方です。「JavaScriptでバイナリを扱う」連載第1回では、「バイナリ」の正体を捉え直します：JSでバイナリを扱う - バイナリとは何か www.codegrid.net/articles/202... #codegrid
【本日公開・明日朝まで無料】モーダル表示中の背景スクロールを止める処理と、カード一覧でホバー中以外を暗くする演出。この2つはこれまでCSSだけでは実現しにくかった表現です。`:has()`を使うとどちらも書けるようになります：CSSの届く範囲を広げる :has() - :has()でモーダルダイアログとホバーの状態を扱う www.codegrid.net/articles/202... #codegrid
Cloudflareが「エージェントのためのクラウドとは何か」を問う5日間の企画、Agents Weekがはじまりました。 人間向けに作られた今のWebとエージェント向けの未来をどうつなぐか、とのことです。 ピクセルグリッド社内のスタッフも、その発表内容に注目しています👀 blog.cloudflare.com/agents-week-...
Welcome to Agents Week
Agents Week explores how cloud infrastructure must evolve to serve autonomous agents rather than human browsers. Join us as we unpack the storage, execution, and security primitives needed for an…
blog.cloudflare.com
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸CSSの届く範囲を広げる :has() 第1回 :has()で親セレクターを使いこなす 🔸Knipで行うコードメンテナンス 不要なコードの把握と片付け方 🔸Cloudflare Accessではじめるアクセス制御 認証ゲートでサイトを守る codegrid.net/issues/688/?... #codegrid
【無料公開】 ツールチップやドロップダウンを「基準の要素にあわせて配置」するために、JavaScriptを書いていませんか？ CSS Anchor Positioningを使えば、その位置調整がCSSだけで実現できます✨ 今回はanchor()関数の基本的な使い方を解説 すべての主要ブラウザで利用可能になっています www.codegrid.net/articles/202... #codegrid #css 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【無料公開】 モーダルダイアログの実装、「閉じ方の制御」や「閉じるアニメーション」で詰まったことはありませんか？ dialog要素のよくある4つの課題と、新しい仕様＋フォールバックによる解決策をまとめて紹介します🙌 現場でそのまま使える実装例つきです www.codegrid.net/articles/202... #codegrid #css #javascript 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます