Storybookのvupを行いたい 5.3.19 → 6.5.12 以前に試みたことがあったがエラーが発生して、時間切れで断念していた しかし、v6.4からできるようになったplay関数とtesting-libraryの連携をやる必要性が出てきたので再びvupに挑戦することにした とりあえず、…

WinterCGというコミュニティーグループを知ったので調べた wintercg.org このコミュニティグループは、Bloomberg、Cloudflare、Igalia、Vercel、Shopify、Node.js、Denoそれぞれの主要コントリビューターと共同でつくられた、W3Cの新しいコミュニティーグル…

FastlyのVCLでKVSテーブルを作りたい 作り方は以下に書かれていた developer.fastly.com テーブル キーは常に STRINGである必要があり、値は同じテーブル内ではすべて同じタイプである必要がある INIT table user_table { "key1": "value1", "key2": "value2…

FastlyのVCLで、リクエストのqueryの値を変数にセットしたい VCLでクエリを取得する方法はquerystring.getを使う STRING querystring.get(STRING url, STRING name) developer.fastly.com ユーザー定義の変数を使う場合は以下のように定義する declare local…

FastlyのVCLでAccept-Languageを取得したい Accept-Languageの取得は accept.language_lookup を使うとよさそう developer.fastly.com 構文 STRING accept.language_lookup(STRING requested_languages, STRING default, STRING accept_header) 引数は以下を…

Expressで Accept-Languageヘッダーを取得したい 調べたところ、単純にreq.headers["accept-language"]とすれば取得できるが、調べる過程でreq.acceptedLanguagesというメソッドを知った expressjs.com req.acceptsLanguages(lang [, ...]) Returns the firs…

Chrome 105で:has()がサポートされるようになったので使い方を調べた developer.mozilla.org :has()は引数として渡されたセレクターに該当する要素をもつ要素にスタイルをあてることができる 例えば、直子要素がimgであるa要素を選択する場合は次のようにな…

Elasticsearchでスクロール検索をしようと思ったが、以下のエラーがでてできなかった Trying to create too many scroll contexts. Must be less than or equal to: [500]. This limit can be set by changing the [search.max_open_scroll_context] setting…

あるサイトでよくみかける、Googleのワンタップログインについて調べた 右上にでるこんなやつ Google アカウントにログインしている場合は、ワンタップでログインできるので便利 セットアップは以下 developers.google.com セットアップしたら以下のスクリプ…

こちらの記事を読んで新HTTP標準について知ったのでメモ postd.cc 今の問題として、CDNなどのキャッシングサービスによる静的コンテンツのキャッシュは重要だが複雑でわかりにくい なので、これを整備しようという話 記事ではいくつか問題点が挙げられている…

JavaのVavrという関数型ライブラリを使っていたときに、反復処理でインデックスを使いたい場合はzipWithIndexというのを使っていた uga-box.hatenablog.com ただ、いまはVavrを使うのをやめており、使わないでインデックスが必要なときにどうするか調べた こ…

And Designの通知コンポーネントのような、クリックするたびに生み出される通知コンポーネントをつくりたい ant.design 大まかな方針としては、クリックするたびにbody要素に通知要素がappendされていき、時間が経つとその要素が消えるというような実装をし…

jQueryでやっていたようなbodyの最後に要素を追加するようなことをReactでやりたい 以下の記事を読むにPortalを使うのがよさそう chaika.hatenablog.com Portal Portalはまさにやりたかった、親コンポーネントの DOM 階層外にある DOM ノードに対して子コン…

forwardRefを使ったら以下のeslintの警告がでた Component definition is missing display name stackoverflow.com これを読むに、displayNameプロパティに値をセットしないとならないみたいだが、ちょっと毎回これを書かなければならないのは微妙 import Re…

Chrome106の Dev Toolsを使ったモダンなデバッグの話 developer.chrome.com ローカル開発していてブラウザ確認するときに、ブラウザーが読み取ったminifiedされたbundleは読みづらいので、バンドル前の状態でデバッグができるようになるオプションが追加され…

Elasticsearchである地点から距離が近い順にソートしたい 調べると Geo Distance Sorting というのでできるみたい www.elastic.co 以下のようなクエリになる GET /_search { "sort" : [ { "_geo_distance" : { "pin.location" : [-70, 40], "order" : "asc",…

JavaScriptとReactでつくるWebアプリのデザインパターンがまとめられたサイトを知ったのでみてみた javascriptpatterns.vercel.app まずは、よくきく以下のようなデザパタをJSでやる方法がめちゃめちゃわかりやすく載っている モジュールパターン シングルト…

DevTools の新機能 (Chrome 105)についての記事を読んだ 気になったところだけメモ developer.chrome.com 前からあったが使ったことがなかったRecord機能 でステップ・バイ・ステップ再生ができるようになったらしい ステップ・バイ・ステップ再生とはブレー…

Adobeのフォーム設計のベストプラクティスなる記事を知ったので読んでみた xd.adobe.com 今後気をつけていきたいもの、知らなかったことだけメモしておく ● 1 つの列と複数の列だったら１つの列がよい ● フィールド数はフォームのデザインに関して言えば、経…

ヤフーのWebパフォーマンス改善の記事を読んだ techblog.yahoo.co.jp どんなことを行ったか サービスのCore Web Vitalsスコアの可視化 ナレッジの横展開 各サービスへの改善依頼 共通プラットフォームへの改善依頼 特に気になったのは最初の可視化の部分 ラ…

Chrome 104、Microsoft Edge 104のリリースから、transformをバラバラに書けるようになった web.dev 具合的には .box { transform: translate(50%, 50%) rotate(45deg) scale(1.5); } これを以下のように書くことができるようになった .box { translate: 50%…

以前、「年月」の表示のローカライズを調べたことがあったが、「月日」にもローカライズするする必要があった uga-box.hatenablog.com 具体的には以下のようにチェックイン・チェックアウトの表示を当たり前のように「MM/DD」にしていたが、海外で共通ではな…

GCSにあるフォルダを移動したいが、gcloudコマンドではファイル単位でしか移動できない なので、ファイル一覧を書き出して、それを一件一件移動するスクリプトを組む必要がありそう 以下が参考になった zenn.dev まず一覧に書き出し $ gcloud alpha storage …

ローカルのDocker for Mac で3ノードのクラスタ構成のES環境をつくり、そこにsnapshotをrestoreしていたときにエラーが発生した {"type": "server", "timestamp": "2022-08-30T02:26:46,548Z", "level": "WARN", "component" : "o.e.c.r.a.DiskThresholdMoni…

onChangeハンドラーのないチェックボックスにcheckedpropsを設定すると、以下の警告が発生した Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field s…

Macで久々にtmuxを使おうってなって、昔の.tmux.confを引っ張り出してみたがマウススクロールができなかった 調べてみたところEl Capitan からデフォルトではできないみたいで、以下の設定を.tmux.confに記述してあげる必要があった set -g mouse on bind-ke…

8/23に開催された以下のイベントに参加した raksul.connpass.com アジェンダは以下 RAKSUL「Build Story - 印刷ECデザインシステム のこれまでとこれから -」 freee「デザインシステムと画面パターン（仮）」 ICS「デザインシステムにおけるアニメーション定…

以下のような複数選択肢の中で一度に１つを選択するという機能をもったGUIを作ったときの調査メモ 機能はラジオボタンと同じだが<input type="radio">は使わずに作った この場合の注意点などをメモしておく role="radio" まず<input type="radio">を使わなかった場合、UIとしてradio機能である意味づ…

Vue2を実装していて、ある区間だけボタンを下部に固定したいという要件を実装した時のメモ 区間の開始要素（id="start"）が見切れたらボタンが固定表示され、終了要素（id="end"）が見え始めたら非表示になるようにする 要素のブラウザ左上からの相対位置はg…

aria-labelledby について調べた developer.mozilla.org aria-labelledby属性は、それが適用される要素にラベルを付ける要素 (または複数の要素) を識別する 例えば、HTMLの<input type="checkbox">に対して<label>を使うと、その要素にラベル要素を関連づけることができる <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> I agree to th</label></label>…