鹿野壮 Takeshi Kano's banner

鹿野壮 Takeshi Kano

@tonkotsuboy_com • 19,570 subscribers

Staff Product Engineer @ubie_ai / 「JavaScriptコードレシピ集」著者 / CSSNite ベストセッション / Claude Codeにタスク丸投げおじさん / 登壇・執筆・技術相談はDMへ

Shorts

毎年クリスマスには、いいお肉を買ってきてローストビーフをデプロイしている。今年は日本橋今半でモモブロックを買い、塩・胡椒・すりおろしにんにくを刷り込み一晩寝かし、65度で1:45低温調理した。柔らかく、美味しすぎて口から日本橋が出そうだった。ソースはGitHubです。 #カノメシ

毎年クリスマスには、いいお肉を買ってきてローストビーフをデプロイしている。今年は日本橋今半でモモブロックを買い、塩・胡椒・すりおろしにんにくを刷り込み一晩寝かし、65度で1:45低温調理した。柔らかく、美味しすぎて口から日本橋が出そうだった。ソースはGitHubです。 #カノメシ

912,405 görüntüleme

GitHubのリポジトリを丸ごとLLMに食わせたいとき、uithubを使えばソースコードをテキスト化できる。更に、GitHubアクセストークンを渡せば、プライベートリポジトリまで読めるので超便利💐 動画は私のプライベートリポジトリを読ませている例。

GitHubのリポジトリを丸ごとLLMに食わせたいとき、uithubを使えばソースコードをテキスト化できる。更に、GitHubアクセストークンを渡せば、プライベートリポジトリまで読めるので超便利💐 動画は私のプライベートリポジトリを読ませている例。

49,419 görüntüleme

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。参考: #CSS #cssnite #朝までマークアップ

:has()、CSS Grid、CSS変数を組み合わせたチェックボックス表現を作った✅ label { display: grid; --selected: 0; grid-template-columns: auto calc(var(--selected) * 24px); } label:has(:checked) { --selected: 1; } 2列の行列を作っておき、2列目の幅をCSS変数--selected×24pxにしておく。--selectedの初期値は0なので、2列目幅は0。子孫要素がチェック状態になるのを:has()でキャッチし--selectedを1にすると、行列2列目が24pxになりチェックボックスが表示される。参考: #CSS #cssnite #朝までマークアップ

33,703 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

CursorのVisual Editor（ビジュアルエディター）を早速使ってみたら、エグかった😱 1. Figma UIでデザインを編集。paddingの調整・グラデーションの変更など 2. Applyを押す 3. コードがそのまま実現💐 「Figmaで描いた絵を再現する」時代から「Figmaである程度デザインを作って、Cursor上で最終成果物を直接いじってAIにコードを書かせる」時代になった。なお、ビジュアルエディターのUIはどうみてもFigmaです。ありがとうございます #Figma #Cursor

鹿野壮 Takeshi Kano

197,870 görüntüleme • 5 ay önce

今日リリースされたCursor 2.0のマルチエージェント、私が本当に求めていたものだ。超わかりやすいUI。これだよこれ感がすごい。

今日リリースされたCursor 2.0のマルチエージェント、私が本当に求めていたものだ。超わかりやすいUI。これだよこれ感がすごい。

鹿野壮 Takeshi Kano

41,734 görüntüleme • 7 ay önce

CSSの「cqw」単位がアツい💐 コンテナクエリのコンテナ幅を基準とした横幅です。「font-size: 20cqw」と指定すれば、コンテナに対して必ず全角5文字になるフォントサイズを指定できます🥰 中心のテキストが親に対して必ず5文字サイズになるメインビジュアルデモを作った。イマドキCSS2024は12/6（金）開催！ #イマドキCSS

CSSの「cqw」単位がアツい💐 コンテナクエリのコンテナ幅を基準とした横幅です。「font-size: 20cqw」と指定すれば、コンテナに対して必ず全角5文字になるフォントサイズを指定できます🥰 中心のテキストが親に対して必ず5文字サイズになるメインビジュアルデモを作った。イマドキCSS2024は12/6（金）開催！ #イマドキCSS

鹿野壮 Takeshi Kano

69,198 görüntüleme • 1 yıl önce

先日のCSS Niteで好評だったキラキラ✨カードアニメーションの作り方とコードを公開します。 1. conic-gradientでグラデーション 2. propertyでグラデーションの開始角度をアニメーション 3. background-clipとbackground-originでborder部分だけグラデーション 4. 完成デザインは Eri Matsushita 松下絵梨が作ってくださいました。 #イマドキCSS

先日のCSS Niteで好評だったキラキラ✨カードアニメーションの作り方とコードを公開します。 1. conic-gradientでグラデーション 2. propertyでグラデーションの開始角度をアニメーション 3. background-clipとbackground-originでborder部分だけグラデーション 4. 完成デザインは Eri Matsushita 松下絵梨が作ってくださいました。 #イマドキCSS

鹿野壮 Takeshi Kano

38,224 görüntüleme • 1 yıl önce

Daha fazla içerik yok.