UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
『ルールズ・オブ・プログラミング』を読んだ #iknowtherulesjp - Don't Repeat Yourself
Ghost of Tsushimaなどを作った会社の人が書いた本です。ゲーム開発におけるコードを書く際の教訓を整理し、改めて示し直したいい一冊だったと思います。大事なことですが、著者は決して「このルールを絶対使え」と言っているのではなくて、そもそもまず会社の製品の特性上、このようなルールを敷いておくと品質や生産性を高く保てたという前提があり、その前提を元に「ルールを選び取って自分たちのコーディング哲学を構築しよう」と推奨しています。 ルールズ・オブ・プログラミング ―より良いコードを書くための21のルール 作者:Chris Zimmermanオーム社Amazon この手の本では『リーダブルコード』がよく薦められる傾向にあると思います。私にとってもリーダブルコードは確かに駆け出しの頃すごく役に立った記憶はあるのですが（もう10年くらい前に読んだので正直忘れた）、そこから知識がアップデートされ
SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトークンの署名検証をして、IDトークンの改ざんが無いか確認する - Http Only属性：JSによるCookieへのアクセスを防ぐため - Secure属性：流出防止のため - SameSite=strict：CSRF対策のため 結論から言えば、「どちらでもよい」となります。しかし、恐らく話は
エンジニアからマネージャになったときにあるだろうなぁってことを想像して遊ぶ - Mitsuyuki.Shiiba
ソフトウェアエンジニアの話ね。想像して遊んでるだけね。 スキルは高い まず、マネージャになってほしいって言われる時点で「仕事を任せられる」というエンジニアなんだろうな。それは、つまりコードを書くことに加えて、プロダクトをなんとかしてリリースする力と責任感をもっていて、それが会社にとってプラスになっている。 だから、チームを任せて同じようなエンジニアを育てて欲しいと期待されている。自分自身も、自分のスキルをもっと会社の役に立てるぞー！とやる気になっている。 任せたい そういう人がマネージャになって、あるだろうなぁと思うのは「どう任せたらいいんだろう？」という悩み。 自分が手を動かせばプロジェクトがなんとかなるのは分かっている。でも、自分はマネージャの仕事があるし、そこは自分の役割ではないし、実際のところ手を動かす時間なんてない。それはメンバーにやってもらわないといけない。 ただ、だいたいの場
https://www.reddit.com/r/LocalLLaMA/comments/1cvw3s5/my_personal_guide_for_developing_software_with_ai/?rdt=40405 はじめに 私は個人プロジェクトでコードを書く際、特に自動化のためのものを書く際には、AI を活用しています。この点について、人によって意見が分かれるようです。同じように AI を使っている人もいれば、AI が良いコードを書くことは不可能だと考える人もいます。私の分野の専門家の間でも同様の考え方に遭遇し、AI の使い方が人によって異なるのかもしれないと気づきました。 私自身のバックグラウンドですが、私は開発マネージャーであり、業界で長年の経験を積み、大学院でもソフトウェア開発を学んできました。ですので、このガイドは素人ではなく、大規模システムの構築と運用に関するかなり
はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に
はじめに C言語から派生したオブジェクト指向プログラミング言語であるC++は、21世紀に入ってまったく別物とも言えるプログラミング言語に成長していきました。それは、Modern C++と称されています。1990年代にC++を触っていたプログラマが現在の仕様を知れば、隔世感に苛まれるのではないでしょうか。本連載では、かつてはC++をたしなんでいたという方、今からC++言語を始めるという方に向けて、Modern C++らしい言語仕様をピックアップし紹介していくことで、今のC++言語の姿を理解していただきます。 対象読者 かつてはC++をたしなんでいたという方 今からC++言語を始めるという方 モダンなプログラミング言語のパラダイムに興味のある方 必要な環境 本記事のサンプルコードは、以下の環境で動作を確認しています。 macOS Sonoma／Windows 11 Xcode Command
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは 下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後 動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
Omakub
Turn a fresh Ubuntu installation into a fully-configured, beautiful, and modern web development system by running a single command. That’s the one-line pitch for Omakub. No need to write bespoke configs for every essential tool just to get started or to be up on all the latest command-line tools. Omakub is an opinionated take on what Linux can be at its best. Omakub includes a curated set of appli
Googleがかねてからの計画通り、拡張機能仕様「Manifest V2」の段階的な廃止作業を開始したことを発表しました。 Chromium Blog: Manifest V2 phase-out begins https://blog.chromium.org/2024/05/manifest-v2-phase-out-begins.html Google prepares for Chrome extension Manifest V2 phase out • The Register https://www.theregister.com/2024/05/31/google_prepares_for_chrome_extension/ Chrome拡張機能のプロダクトマネージャーを務めるデヴィッド・リー氏は、2023年11月に共有したタイムラインの通り、「Manifest V3」への
こんにちは！ファインディでTeam+開発チームのエンジニアメンバーの西村です。 この記事では、私が聞いたRubyKaigi 2024のセッション「Lightning Talks」より「Enjoy Creative Coding with Ruby」で紹介されたクリエイティブコーディングを試してみたので共有します。 クリエイティブコーディングとは クリエイティブコーディングとは、アプリケーションのような機能的なソフトウェアを作るのではなく、プログラミング言語を使ってビジュアルアートを創作することです。 クリエイティブコーディングをはじめるまでの背景 私は、RubyKaigi 2024の「Lightning Talks」より「Enjoy Creative Coding with Ruby」で、初めてクリエイティブコーディングについて知りました。 Miyuki Koshibaさんのスライド資料を
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
文章で指示するだけでゲームを開発できるAIゲーム開発環境「Braindump」が登場、3Dモデル生成＆コーディングが可能でプログラミング知識不要
AIで簡単にゲームを開発できるツール「Braindump」の初期テスト版がリリースされました。Braindumpでは文章を入力するだけで3Dモデルからコーディングまでのゲーム開発に必要な作業を実行できます。 Building an AI game studio: what we’ve learned so far - Braindump Incorporated https://braindump.me/blog-posts/building-an-ai-game-studio Braindumpは見下ろし型の3DCGゲームを開発できるAIゲーム開発環境です。Braindumpの画面はこんな感じ。 Braindumpで3Dモデルを生成する様子は、以下のデモ映像で確認できます。 3Dモデルを生成したい場所を指定してから「x-wing starfighter(Xウイング・スターファイター)」と
Instrument | Digital marketing, branding and product experiences | Instrument
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
JSer.info #694 - Next.js 15 RCがリリースされました。 Next.js 15 RC | Next.js React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 また、Fetch/GET Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingのincrementalオプションを追加などの変更も行われています。 そのほかには、遅延処理をするnext/afterを追加、create-next-appのアップデート、非推奨だった@next/fontのサポート削除などが行われています。 SolidStart 1.0がリリースされました。 SolidStart 1.0: The Shape of Framewor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開／「Ricty」でもお馴染みの「Inconsolata」と読みやすい「BIZ UDゴシック」をかけ合わせ
SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトーク
AI を活用したソフトウェア開発のための個人的ガイド - Sun wood AI labs.2
Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
今どきのプログラミング言語では当たり前！ Modern C++で使えるモダンな言語仕様
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
Googleが拡張機能仕様「Manifest V2」の段階的廃止を開始
RubyKaigiで紹介されたクリエイティブコーディングを試してみた - Findy Tech Blog
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
codefolio | Webコーディングの参考になるパーツ集・ギャラリーサイト
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)