AIコーディングのプラクティス
・Claude Sonnet 3.7を使え ・Project Rules（.cursor/rules）を使え ・ビルド、lint、テストなどで高速にフィードバックさせろ ・1セッションあたりで依頼することはできるだけ少なくしろ ・よく使うコマンドやライブラリはチートシート作れ Yamada 補足 2025/03/06現在 Roo-Code は .cursor/rules を自動で参照しない。.clinerules, .cursorrules, .windsurfrules は自動で見ておりすべてを結合してコンテキストに入れる。Roo-Codeを使う人は .cursorrules を設定しておくのがよい。
Node.js Now Supports TypeScript By Default
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. Node 23 will soon be able to run TypeScript files without any extra configuration. Marco Ippolito, who has been driving TypeScript support in Node for the last year, landed a PR unflagging --experimental-strip-types in Node 23. Practically, this means a few things: You can create an
これがフロントエンドで話題になった記事！ ICS MEDIAの2024年 - ICS MEDIA
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2024年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : フキダシ作例 HTML・CSSで実装するかわいいフキダシのアイデア 24,708 PV HTMLとCSSだけで作るかわいい吹き出しデザインを取り上げた記事です。マスキングテープ風などの凝ったスタイルからシンプルな角丸まで、応用範囲が広いオリジナルサンプルを豊富に掲載しています。 ユ
【最強】Honoフル活用事例2024年
Hono アドベントカレンダー 2024 初日担当の おりばー です。 本記事では、11 月にリリースした漫画プラットフォーム「comilio」の開発事例をもとに、とにかく Hono が最強だということをつらつらと書いていく記事となります。 個人的 2024 年ベストオブ優勝フレームワークは Hono 一択です。Hono が無ければ、おそらくプロダクトを今もリリースできていなかったと言っても過言ではありません。 ぜひこの記事を参考にして、0 -> 1 を立ち上げる際は Hono を積極的に採用してもらえればと思います。 また、Hono という最高のプロダクトを生み出してくれた @yusukebe さんには全身全霊を持って感謝します。 「comilio」のインフラ構成 まず、今回の実例である漫画プラットフォーム「comilio」の構成を紹介します。 「comilio」では TypeScrip
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書について詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語と
TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利
TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
MutationObserver - Web API | MDN
コンストラクター MutationObserver() DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しい MutationObserver を生成して返します。 メソッド disconnect() MutationObserver のインスタンスが今後の通知を受け取ることを、 observe() が再び呼び出されるまで停止します。 observe() 指定したオプションに合う DOM の変更が発生したときに、コールバック関数を介して通知を受信し始めるように MutationObserver を構成します。 takeRecords() MutationObserver の通知キューから保留中の通知をすべて削除し、 MutationRecord の新しい配列 (Array) で返します。 Mutation Observer と resize イベントリスナーのカスタマイ
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
CSS Grid Areas
A fresh look at the CSS grid template areas and how to take advantage of its full potential today. Jul 20, 2024 CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature. It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this intera
5年間は生き続ける考え方が凝縮された良書「AWSで実現するモダンアプリケーション入門」 | DevelopersIO
「最近、モダンモダンすげぇ聞くけどモダンってなに？」 「人の数だけモダンはあるんだよ…」 近年、パブリッククラウドを主軸としたアプリケーション開発文脈の中で「モダンアプリケーション」という言葉をよく聞くようになりました。自分もMAD（Modern Application Development）事業部の部長を去年やっていたりして、モダンという言葉には人一倍敏感だったりします。 そんなおり、そのモダンアプリケーションについて真正面から解説する本を、著者の落水さんから献本いただいたので、僭越ながら書評という形でご紹介させていただきます。 丸わかりやで。 書籍の概要「AWSで実現するモダンアプリケーション入門」 AWSで実現するモダンアプリケーション入門 〜サーバーレス、コンテナ、マイクロサービスで何ができるのか | 落水 恭介, 吉田 慶章 |本 | 通販 | Amazon アプリケーションの
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの
Electronライクな新フレームワーク「Gluon」登場。Chromium内蔵せずWebブラウザを利用、Node.jsだけでなくDenoとBunにも対応
デスクトップアプリケーションの開発を、JavaScriptなどのWebテクノロジーで可能にするフレームワークとして知られるのがElectronフレームワークです。 このElectronのようなフレームワークが新たに登場しました。「Gluon」です。 Electronがアプリケーション基盤としてNode.jsとChromiumをバンドルするのに対して、GluonはOSにインストールされているWebブラウザを用いるのが大きな特長です。 Google ChromeのようなChromiumベースのWebブラウザだけでなく、Firefoxにも対応作業が進められており、最新のバージョン0.11ではFirefoxでの安定度が向上しました。 Node.jsをバンドルする点はElectronと同じですが、Node.jsの代わりにDenoやBunを利用することにも実験的に対応しています。 Gluonは主にCh
ゲーム作りをパターン化して1年で139個のミニゲームを作る - ABAの日誌
このページの上から139個が今年の分だ。こうして並べてみるのは楽しいな。ゲームをたくさん作ることでゲーム制作のスキルアップを！みたいな気概は無いので、ヤマザキ春のパンまつりのシールを集めるのと同じような楽しさだが。でも、作って、Twitterに放流して、いろんな人に遊んでもらって、フィードバックをもらう、というサイクルがたくさん回せたのは良かった。今年遊んでくださった皆さま方、ありがとうございました。 2,3日とかの短期間でミニゲームを作り続けるためには、作るもの・作り方をパターン化してほうが良い。今年は以下のレギュレーションで作った。 Chromeで遊べる恐竜ジャンプゲームのような、手軽にブラウザで遊べるゲームを目指す 操作方法はスマホでの操作が容易な、ワンボタン、左右へのスライド、画面上のタップ、の3種類に限定する 画面サイズは100x100を基本とし、キャラクタは6x6と小さくするこ
SWIG (Simplified Wrapper and Interface Generator)
Welcome to SWIG SWIG is a software development tool that connects programs written in C and C++ with a variety of high-level programming languages. SWIG is used with different types of target languages including common scripting languages such as Javascript, Perl, PHP, Python, Tcl and Ruby. The list of supported languages also includes non-scripting languages such as C#, D, Go language, Java inclu
Relatively positioned elements in scrollable absolutely positioned div "lag behind" on scroll
I have a PhoneGap app that displays a quite long text with headers, tables and images which I am testing on Android. Everything works fine except for the elements with style position:relative These elements "lag" behind when scrolling, meaning if I scroll the page then those elements start and end scrolling about a quarter of a second later. The bug happens when combining an absolute div with rela
初めてAndroidアプリをデザインするときの基本の「き」 | keisuke tsukayoshi
Androidアプリのデザインを初めてするときに知っておきたいようなtipsを中心にまとめてみました。ぼくもあんまりAndroidアプリのデザインには慣れてはいないのですが、最近本格的にとりかかる機会があり、わからないながらもあれこれ調べてメモしていたものをまとめました。 これから初めてAndroidアプリをデザインするデザイナーさんが安心して作業にとりかかれるようになればいいなぁ。 デザインを始める前に知っておきたいこと まずAndroidのアプリデザインをする上でハードウェア（ディスプレイ）について理解する必要があります。単にディスプレイといってもAndroidには画面密度が複数あり、見かけ上同じサイズに見えても密度が違っていることがあります。これはiPhoneでいうところのRetinaと非Retinaみたいな感じ。 ここを理解できるかが鬼門ですが、考え方さえわかってしまえば簡単なので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptツール群「UnJS」を5分で一気に駆け巡る！
JSXのトランスパイル｜自前のJSX実装を作るために必要な全ての知識
Arduino シリアル通信で割り込み処理する方法 | satetsu888.com blog