【Tips】
-webkit-text-stroke で文字が潰れる問題は paint-order で解決できます
-webkit-text-stroke: 4px black;
paint-order: stroke fill;
これで「線→塗り」の順で描画され、塗りが縁取りの内側への食い込みを覆い隠してくれます。2024年からChromiumも対応し、主要ブラウザで使えるようになりました。
#codegrid #css
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸Google Fontsで学ぶWebフォントの基本 最終回 next/font/googleの詳細設定
🔸思想からみるメタフレームワークの選び方 第2回 Astroの思想を読む
🔸Convex入門 第2回 Convexの開発環境の構築とデータの取得
codegrid.net/issues/672/
#codegrid
【無料公開】
「AIがコードを書くなら、プログラミングを覚える必要はない」という声があります。でも、本当にそうでしょうか？
AIはプロフェッショナルの「責任」と「信頼」を引き受けられない——そんな視点から、AI時代に求められるスキルと考え方を論じます。学び続けることの意味を改めて考えさせられる記事です✨
www.codegrid.net/articles/202...
#codegrid
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
昨日公開されたCodeGridの記事「Astroの思想を読む | 思想からみるメタフレームワークの選び方」では、「バージョンが刻んだ思想」としてAstroの各バージョンを読み解き、v6についても触れていますよ！
www.codegrid.net/articles/202...
3月10日にリリースされたAstro 6.0の、マイナーアップデート6.1がリリースされています。
画像最適化の制御性の向上、マークダウン設定オプションの拡充、および国際化（i18n）に対応するためのフックの更新 、などが含まれているようです。
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉
🔸Google Fontsで学ぶWebフォントの基本 最終回 next/font/googleの詳細設定
🔸思想からみるメタフレームワークの選び方 第2回 Astroの思想を読む
🔸Convex入門 第2回 Convexの開発環境の構築とデータの取得
codegrid.net/issues/672/
#codegrid
【本日公開】開発環境のサーバーも立ち上げ不要。Convexのクラウド開発スタイルのシンプルさを、実際のコードを通じて紹介します：Convex入門 - Convexの開発環境の構築とデータの取得 www.codegrid.net/articles/202... #codegrid
【本日公開】コンテンツサイトになぜJavaScriptランタイムを大量に届けるのか。Astroの問題意識を辿ると、アイランドアーキテクチャとサーバーファーストの原則が一貫した設計思想として理解できます：思想からみるメタフレームワークの選び方 - Astroの思想を読む www.codegrid.net/articles/202... #codegrid
【Tips】
ES2025からJSONファイルを直接読み込めるようになりましたが、その最大のメリットは「JavaScriptを実行する前に読み込める」こと💁♀️
Fetch APIだとJS実行時に初めてリクエストが走るため、ファイルの存在は実行してみないとわかりません。import文なら依存解決の段階でエラーが出るので、「JSONが確実にある」前提でアプリを設計できます👍
#codegrid #javascript
【Tips】
SVGアイコンをstrokeで表現するとき、fillの明示に要注意です⚠️
fillの初期値はblack（#000） なので、fillを指定しないと図形の内側が黒で塗りつぶされてしまいます。
strokeだけで表現したいアイコンには必ずfill="none"を指定しましょう😀
#codegrid #svg
【細心公開一覧】CodeGrid先週公開の3本はこちら！
🔸現場で読み解く、ソフトウェアの原理原則 第1回 まとめてよいコードと、まとめてはいけないコード
🔸SVGフィルタで拡張するCSSの表現 第1回 SVGフィルタの基本と表現例
🔸AIエージェントのススメ 第7回 技術知識の重要性
www.codegrid.net/issues/671/
#codegrid
【無料公開】
フレームワークがWebフォントを自動最適化してくれているけど、実際に何をしているのかわかりますか？🤔
`preconnect`や`crossorigin`がなぜ必要なのか、日本語フォントでwoff2がたくさん読み込まれる理由など、「なんとなく使っている」から「仕組みから説明できる」状態へ。Google Fontsを例に、ブラウザの処理フローを丁寧に解説します
www.codegrid.net/articles/202...
#codegrid #css #webfont
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【Tips】
JSONファイルをimport文で読み込む際は`with { type: "json" }`の指定が必要です😀
import config from "./config.json" with { type: "json" };
この`with { }`は「インポート属性」と呼ばれるES2025の新構文で、モジュールの解釈方法や扱い方に関する追加情報をブラウザに伝えるための仕組みです。
#codegrid #javascript #es2025
【本日公開】「CSSのfilterで物足りない」と感じたことはありませんか。url()でSVGフィルタを呼び出すと、歪み・色収差・炎など、標準関数では届かない表現が実現できます：SVGフィルタで拡張するCSSの表現 - SVGフィルタでCSSの表現を拡張する www.codegrid.net/articles/202... #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸現場で読み解く、ソフトウェアの原理原則 第1回 まとめてよいコードと、まとめてはいけないコード
🔸SVGフィルタで拡張するCSSの表現 第1回 SVGフィルタの基本と表現例
🔸AIエージェントのススメ 第7回 技術知識の重要性
www.codegrid.net/issues/671/
#codegrid
【本日公開】AIがいれば技術知識は不要──そんなわけはありません。問題をどう解くかを考えるプロセスは必要なのです。問題を考えずにAIに丸投げしたことで、Markdownフォーマッター開発で1週間を溶かした失敗談です：AIエージェントのススメ - 技術知識の重要性 www.codegrid.net/articles/202... #codegrid
【本日公開】「似ているコードをまとめよう」は本当に正しいのでしょうか。DRY原則には、「見た目が似ている＝まとめる」と解釈すると踏んでしまう落とし穴があります：現場で読み解く、ソフトウェアの原理原則 - まとめてよいコードと、まとめてはいけないコード www.codegrid.net/articles/202... #codegrid
【Tips】
PCは内部でUTCをUNIXタイム（1970年1月1日からのミリ秒）で管理し、
タイムゾーン設定に応じて表示だけを変えています。
JavaScriptのDateオブジェクトも同じ仕組みで、
内部はUNIXタイムを保持しています。
この基礎を押さえると、時差まわりのバグが減ります👍
#codegrid #javascript
【Tips】CSSの新attr()は、時間の単位`s`も使えます⏳️
div {
transition-duration: attr(data-duration s, 3s);
}
要素ごとにHTMLからアニメーション時間を変えられます。
style属性で直書きとは違い、CSS側で値を制御できるのがポイントです😀
#codegrid #css
【最新記事一覧】CodeGrid先週公開の3本はこちら！
🔸思想からみるメタフレームワークの選び方 第1回 なぜフレームワークの「思想」を知るべきなのか
🔸Convex入門 第1回 Convexを使ってみる
🔸Google Fontsで学ぶWebフォントの基本 第4回 next/font/googleの基本動作
www.codegrid.net/issues/670/
#codegrid
ピクセルグリッド内のエンジニアのターミナルツール、
何を使っているのか、のぞいてみました👀
🔸 Ghostty：35%
🔸 iTerm2：24%
🔸 IDE付属：24%
🔸 macOS標準：11%
🔸 kitty：6%
1位はGhosttyという結果に。みなさんは何を使っていますか❓️
【無料公開】
「テーブルは古くてレガシー、カードはモダン」──そんな印象でUIを選んでいませんか？
テーブルUIとカードUIには、見かけ以上に本質的な構造の違いがあります。情報の用途を正しく理解すれば、迷わず選べるようになります✨
www.codegrid.net/articles/202...
#codegrid #ui
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【Tips】
ES2025からJSONファイルを`import`文で直接読み込めるようになりました🎉
import config from "./config.json" with { type: "json" };
Fetch APIと違い、JavaScriptの実行前にファイルの存在と形式が検証されるため、「設定ファイルが読み込まれている」状態を保証できます👍
#codegrid #javascript #es2025
【本日公開】BaaS「Convex」はリアルタイム更新がデフォルトなので、「データが変われば画面も変わる」というシンプルな前提で実装できます。実はこれ、開発体験に大きく関わりますよ：Convex入門 - Convexを使ってみる www.codegrid.net/articles/202... #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸思想からみるメタフレームワークの選び方 第1回 なぜフレームワークの「思想」を知るべきなのか
🔸Convex入門 第1回 Convexを使ってみる
🔸Google Fontsで学ぶWebフォントの基本 第4回 next/font/googleの基本動作
www.codegrid.net/issues/670/
#codegrid
【本日公開】Next.js組み込みのフォント最適化モジュールnext/font/googleの働きによって、何が起きているかを探ります。外部リクエストの排除・プライバシー確保などを実現する仕組みを解説：Google Fontsで学ぶWebフォントの基本 - next/font/googleの基本動作 www.codegrid.net/articles/202... #codegrid
【本日公開】AIがコードを書いてくれる時代でもフレームワーク選定の失敗は起こる。人気ではなく「どんな問題への回答として作られたのか」という設計思想から選ぶ視点を解説します：思想からみるメタフレームワークの選び方 - メタフレームワークは「思想」で選ぶ www.codegrid.net/articles/202... #codegrid
ターミナルツールのGhosttyが1.3にアップデート。
社内エンジニアによると、
- キーバインドのモードを作って切り替えることができる「Key Tables」
- 1つのキーで複数のコマンドを実行できる「Chained Keybinds」
が便利そう！とのことですよ！
ghostty.org/docs/install...
【Tips】
JavaScriptでAPIから受け取った日本時間の日時を正しく扱うには、
ISO 8601形式で時差を明示しましょう⏰️
new Date('2025-11-01T18:00:00+09:00')
末尾に +09:00 を付けることで、タイムゾーン設定に関わらず
常にJST基準のUNIXタイムが生成されます💥
#codegrid #javascript
