CodeGridワークショップの様子。会議室のような場所で、1つの机に向かい合って講師1名と参加者が7名並んで座っている。壁にはモニタがあり、コードやWebサイトが表示あれている。
【ワークショップ情報】
CodeGridワークショップは、少人数で質問しやすい雰囲気です。
参加申し込みは7月22日まで！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道
codegrid.net/workshops/20...
#codegrid #codegrid_ws
年内のタスクを倒し切らないといけないこのタイミングでキーボードが壊れてしまった俺は
【先週公開一覧】
CodeGrid最新の3本はこちら！
🔸デザイナーとエンジニアの共通の語彙を持つために（第1回）：デザイントークンとは
🔸脱初心者のためのテストの書き方：テストを書く手順
🔸Cursorで見るAIを用いたコーディング（後編）：コーディングの実際
https://www.codegrid.net/issues/609/
#codegrid
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸Node.jsのバージョンアップによる新機能 第13回Node.js v22/v23 中編
🔸できる！中央寄せ 2024年版 前編絶対配置による中央寄せ
🔸Cursorで見るAIを用いたコーディング 前編Cursorの概要
https://www.codegrid.net/issues/607/
#codegrid
【本日公開一覧】CodeGrid今週の3本はこちら！
🔸Node.jsのバージョンアップによる新機能 第13回Node.js v22/v23 中編
🔸できる！中央寄せ 2024年版 前編絶対配置による中央寄せ
🔸Cursorで見るAIを用いたコーディング 前編Cursorの概要
https://www.codegrid.net/issues/607/
#codegrid
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸Astro技術解説座談会 - Astroの特徴を知る
🔸JSXで実装するUIライブラリに依存しないコンポーネント - CSSの型チェックとビルドの連携
🔸グリオ君と考えるJavaScriptドリル - オブジェクトのディープコピーの作成
https://buff.ly/3O1atcP
#codegrid
【本日公開】筋トレ記録アプリに、トレーニングデータを記録する機能を実装し、仕上げていきます。フロントエンドエンジニアも馴染みやすいBaaSの「Supabase」を紹介するシリーズの最終回です！：Supabaseで作る記録アプリ - データベースへのデータの追加 www.codegrid.net/articles/202... #codegrid
【本日公開】ピクセルグリッドの会社サイトにあるお問い合わせフォームはシンプルなデザインですが、お客様との大切な窓口です。そこに込められた工夫を解説します：ピクセルグリッドのお問い合わせフォーム - お問い合わせフォームの実装ポイント www.codegrid.net/articles/202... #codegrid
【本日公開】モーダルコンポーネントと、実務でもしばしば使われるTailwind CSSとコンポーネントを組み合わせます。tailwindcss-animateを使うことで、開閉時のアニメーションも設定できます：React AriaでつくるUIコンポーネント - Tailwind CSSと組み合わせる www.codegrid.net/articles/202... #codegrid
【本日公開一覧】CodeGrid今週の3本はこちら！
🔸ピクセルグリッドのお問い合わせフォーム - お問い合わせフォームの実装ポイント
🔸Supabaseで作る記録アプリ - データベースへのデータの追加
🔸React AriaでつくるUIコンポーネント - Tailwind CSSと組み合わせる
www.codegrid.net/issues/604/
#codegrid
ここがユクモ村か
ハリオの水出しティーボトルを割ってしまって悲しい
図：ボタン要素の状態と色のバリエーションを示す図。「プライマリー」、「セカンダリー」、「テキスト」とラベル付けされた3列が上部に配置されており、それぞれにボタンが表示されている。各ボタンは「通常」と「ホバー」の2つの状態で示され、全体が紫色の点線の枠で囲まれている。 プライマリーボタン 通常状態：左上に配置されており、青色の背景に白色のテキスト「{{text}}」が表示されている。 ホバー状態：左下に配置されており、濃い青色の背景に白色のテキスト「{{text}}」が表示されている。 セカンダリーボタン 通常状態：中央上に配置されており、白色の背景に青色の枠、青色のテキスト「{{text}}」が表示されている。 ホバー状態：中央下に配置されており、薄い青色の背景に青色の枠、青色のテキスト「{{text}}」が表示されている。 テキストボタン 通常状態：右上に配置されており、白色の背景に青色のテキスト「{{text}}」が表示されている。 ホバー状態：右下に配置されており、白色の背景に青色のテキスト「{{text}}」が表示され、テキストが下線付きで強調されている。 ボタンの配置は行と列によって整然と分けられており、各状態の違いが視覚的に比較できるようになっている。
【本日公開】この指定はボタンでしょうか？ リンクでしょうか？ それはどうやって区別されるのでしょう？ということを考える記事です：ボタンとリンクの使い分けと、そのデザイン - それボタンですか？ それともリンク？ www.codegrid.net/articles/202... #codegrid
【本日公開】変化が激しいフロントエンドの技術に合わせて、サイトをメンテナンスしてアップデートしていくことは必要不可欠です。メンテナンスの重要性を考えてみます：フロントエンドのメンテナンス - プロジェクトを持続的に進化させるためのポイント www.codegrid.net/articles/202... #codegrid
【本日公開】文字列をキャメルケースに変換する関数を作成します。正規表現を使っていきますが、グリオ君、よくわかっていないようで……：グリオ君と考えるJavaScriptドリル - 文字列をキャメルケースに変換 www.codegrid.net/articles/202... #codegrid
ここがツイッターか
SolidStar氏むずかしいな？
こんにちは世界
【イベント情報】（…ここだけの話ですが...CodeGridを読んでいる、CodeGridが気になっている皆さん、5月10日の夜の予定を空けておいてください ） t.co/tGd6Lb66kc
#CodeGrid12th
