Vue Fes Japanの歴代スピーカー一覧を見られるページを作った
今年の10月19日に開催されるVue Fes Japan 2024のタイムテーブルが公開されました。このタイムテーブルを眺めているときに、RubyKaigiの登壇者まとめサイトを作っている方を見かけて歴代のVue Fes Japanのスピーカー一覧を見られるページを作ってみようと思って作りました。 サイト内容自体はシンプルで、全スピーカーを一覧で見られるもの、開催年とスピーカーそれぞれの発表一覧を見られるものを用意しています。 https://vuefes-japan-speakers.nuxt.dev/ https://vuefes-japan-speakers.nuxt.dev/2024 https://vuefes-japan-speakers.nuxt.dev/speakers/Evan You 現時点で以下Vue Fes Japanサイトの情報が含まれています。2019年は開催さ
登壇中にうっかり見せちゃいけないもの見せないようにするための技術
登壇中にうっかりSlackの通知が出ちゃうみたいなことを避けたいですよね。うっかりを防ぐ対策が集まるスクラップです。
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828
自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 追記 20240829: DATABASE_URL で Connection Pool を有効にするのに ?pgbouncer=true を追加 https://supabase.com/partners/integrations/prisma このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、20
DummyJSON - Fake REST API of JSON data for development
Work Faster!! Develop, Build, Test. Need dummy JSON data for your frontend? Look no further! DummyJSON Server serves up JSON data in a snap, eliminating backend setup headaches for rapid prototyping and testing. Say Goodbye to Boring Placeholder Text! Say goodbye to Lorem Ipsum! With DummyJSON, spice up your frontend development with real JSON data. Focus on your frontend magic while our open-sour
「FlatConfig対応できた!」と自信を持ちたいあなたへ
自信を持って「FlatConfig 対応完了した！」って言いたい 以前、自分が書いた記事では FlatConfig 自体についてや FlatConfig 移行という言葉の多層性、実際に移行するときに役立つ Tips などを紹介しました。 ただ、この記事では FlatConfig 移行における大事な最後のピースである「移行ができたことをチェックする」という点について言及しませんでした。Config を FlatConfig の形に変更できたからといって、動かないのはもっての他、動いているように見えて以前と同じチェックができていないようでは「移行できた」とは言えないでしょう。 この記事では、既存の旧 Config から FlatConfig に移行している人に向けて、何を持って移行できたと判断するか、そのためのツールを作った話をします。 何を満たしたら安全に移行できたとするか 前提 ここでは旧
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
Node.jsで型安全な環境変数を扱うスニペット
Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil
UnoCSS を知る、まずは経緯から
👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2024年度版） | Recruit Tech Blog
はじめに こんにちは！ 2024年度新卒エンジニアの山本です！ 株式会社リクルートの新卒エンジニアは部署配属される前にBootCampと呼ばれる研修を受けることになります。 今年は約３ヶ月間の研修があり、実際に受講した立場から講座の共有や紹介を行っていきたいと思います。 研修概要 研修では、配属後で活かせるエンジニアリング技術を体系的に学ぶことができるだけでなく、ヒューマンスキル育成や事業理解といったプログラムも準備されているため、エンジニアとして様々な観点から成長できる機会になっています。 エンジニアリング技術に関しては、フロントエンド、バックエンド、モバイルアプリ、インフラ、セキュリティなど幅広い講座が用意されています。講座によっては、チーム開発や競技形式での手を動かして学ぶ講座も用意されており、より理解を深められるような講座になっています。 ヒューマンスキル育成に関しては、ロジカルシ
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
テストを書く方針と原則の備忘録 - Qiita
こんにちは。サーバエンジニアのnsym-mです。普段はGoでバックエンドの開発などをしています。 最近テストに関する書籍や記事などを色々読み漁ったので、現時点での自分のテストについての考え方を備忘録として残しておきます。 今回の話はWebフロントエンドやiOS/Androidなどでも適用できる汎用的な考え方として記載していますが、ベースの文脈はバックエンド開発になりますのでそのつもりで読んでいただけますと幸いです なお、本記事では主にGoogle、『単体テストの考え方/使い方』、@t_wadaさんの発表されている考え方（いわゆる古典学派）に倣っています。 用語整理 よく使われるテストスコープ 単体テスト（ユニットテスト） 人によって定義に差がある 統合テスト（インテグレーションテスト） 結合テスト（E2Eテスト） 単体テストの定義がブレることから、スコープではなく実行時間で判断するテストサ
王道か邪道か？ タイムスタンプによるステート管理
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap
リーダブルなE2Eテストコードのための3つのC
Playwright本出版記念！Node学園 43時限目 2024-08-08 https://nodejs.connpass.com/event/325813/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Effective TypeScript › A keyof puzzle
Next.jsの考え方
Milkdown
Dir Maker
文脈と名前で設計をマスターする本
