ChatGPT先生に聞いてみた。 https://chatgpt.com/share/67447ecf-d6e8-8008-b2bb-00c76ed888b5 npm-check-updatesを完全に忘れてた。 https://www.npmjs.com/package/...
"dependabot alternative"でググったら、どうやらいろいろあるらしい。 https://devdojo.com/yoda/top-dependabot-alternatives 特にRenovateが気になる。 GitLab + dependabot 微...
弊社で使ってないけど、こういうの管理するのがdependabotだっけ？ https://docs.github.com/ja/code-security/dependabot/working-with-dependabot 特にこれか？ https://docs.gith...
頻繁にアップデートされるパッケージの更新を見逃してる時がある。 ものによってはたまに使うと更新してねメッセージが吐かれて鬱陶しい。 更新しなくて全然いいけど逆に更新しても全然いいようなものはとっとと更新しちゃった方が良さそう。
参考にした事例 参考というかほぼこの通り。 https://note.com/cyberz_cto/n/n79e344f59651 画像差分比較ツールにreg-suitではなくその中で使われているreg-cliを使った構成。 https://github.com/reg...
よく出てくる話 Chromatic https://www.chromatic.com/ 予算が出るならこれ使えば良さそうな印象。 一応フリープランでも月5000枚まではスナップショットを撮れる。 Storycap + reg-suit https://gith...
動機 プロジェクトで使用しているコンポーネントの中身が古い記述なので改修したい。 改修にあたり、同じPropsを渡した時の挙動や見た目の変化がないようにしなければいけない＝リグレッションテストが必要。 ただ本プロジェクトでは基本的に手動テストで運用されているため、どこか...
まぁ結局そんな微妙な環境で開発してるの自分だけだったのでパス通して終わりでええかってなってるところ。 調べ物自体は面白かったので後で記事にまとめるかも。たぶん。
元々何したかったか 実はE2Eテストをしたかったわけではなく、単にプロジェクトの環境でchromium使いたかっただけ。 https://github.com/reg-viz/storycap storycapでキャプチャを撮るのにブラウザが必要だったけど、自環境がWS...
Hermetic Install is 何 "Hermetic" is 何 https://eow.alc.co.jp/search?q=hermetic hermetic 密封した 外部から影響されない "Hermetic install" =「外部から影...
クロスブラウザテストどうやってんの ブラウザのインストール・アンインストール https://playwright.dev/docs/browsers 普通は初回セットアップ時にブラウザもインストールするか聞いてくれるので、そこでYesと答えておけば普通やることない...
Playwright is 何 https://playwright.dev/ もっぱらE2Eテストに使われるテストツール。 クロスブラウザに対応してたりなんなりで、競合と比べても今選ぶなら基本これなんじゃないかなと思ってる。 例としてpuppeteerとの比較。2年単...
ウェブコンポーネント - Web API | MDN ウェブコンポーネントは、一連のさまざまな技術です。これにより、再利用可能なカスタム要素を作成し、その機能を他のコードから分離してウェブアプリケーションで利用できるようにします。 「Web Components」...
この辺を見ていく↓ ウェブコンポーネント - Web API | MDN WebComponentsとは何だったのか？基礎から再入門する - Qiita 【2023年版】Web Components詳細入門ガイド - Kinsta Web Componentsとは？ - ...
daisyUIは以下のような名称でコンポーネントが区分されている。一緒に各区分の説明を考えてみる。 Actions ... クリックによって何か操作する要素 ↑結構無理やり感ある、納得行くのButtonくらい。特にSwapが違和感すごい。 Data display ...
コンポーネントライブラリのグルーピングも参考になるかなと思ったり。 daisyUI mui ChakraUI それで言うとheadlessUIみたいな挙動だけ定義してあるライブラリは機能面の話考える糸口になるかも？
一旦参考になりそうなところを列挙だけ。時間ある時に少しずつ摘んでいく。 企業(団体)が公開している資料・記事 Wantedly デザインシステム入門 - Wantedly Engineering Handbook React でデザインシステムを正しく実装する - ...
今のところ気になる点 リポジトリは別で分けたりした方が再利用性高そう？ ディレクトリ構成は@/componentsにひたすら突っ込んでいく感じ？機能面も含むならこれだけだとうまくいかなさそう デザイントークンとか基盤になる部分はどう定義しておく？ コンポーネントを区分けす...
社内プロジェクトの改修の一環として、デザインシステムを作成することになった。 まだいろいろ検討段階だが、いざ実装に入る時慌てふためくのもあれなので、スクラップ機能の試用も兼ねて雑に調べて書いていく。