UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

2022-09-01から1ヶ月間の記事一覧

Winter CGとは

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

【Fastly】テーブルを作りたい

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

【Fastly】queryの値を取得して変数にセットする

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

【Fastly】Accept-Languageヘッダの値を取得したい

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-Languagesを取得する

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

【CSS】:has()疑似クラス

CSS

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

【Elasticsearch】Trying to create too many scroll contexts.のエラーがでてスクロール検索できない

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のワンタップログインについて調べた 右上にでるこんなやつ Google アカウントにログインしている場合は、ワンタップでログインできるので便利 セットアップは以下 developers.google.com セットアップしたら以下のスクリプ…

【HTTP】新HTTP標準

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

【Java】ライブラリを使わず反復処理でインデックスを取得したい

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

【React】クリックするたびに生み出される通知コンポーネントをつくる

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

【React】親コンポーネント外に要素を追加する

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

【React】ForwardRefを使ったら "Component definition is missing display name" というeslintの警告がでた

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

【Chrome】Chrome106の Dev Toolsを使ったモダンなデバッグ

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

【Elasticsearch】近い順にソートしたい

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

【Web】JavaScriptとReactでつくるWebアプリのデザインパターン

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

【Chrome】Chrome 105 のDevTools の新機能について

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

【Web】Adobe流フォーム設計のベストプラクティス

Web

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

【Web Perfomance】ヤフーのWebパフォーマンス改善の話

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

【CSS】transformをプロパティを個々に書けるようになった

CSS

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

【I18N】「月日」のローカライズ

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

【GCS】フォルダを移動させたい

GCS

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