UGA Boxxx

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

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

【Elasticsearch】Docker for Mac でrestore中にエラー

ローカルの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…

【React】onChangeなしでcheckedを使ったら警告がでた

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…

【tmux】マウススクロールしたい

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

【イベント参加ログ】Design System Build #01 -デザインシステム構築の様々なアプローチ-参加レポ

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

【Web Accessibility】<input type="radio">を使わないラジオボタンをつくる

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

【Vue】ある区間だけボタンを下部に固定表示する

Vue

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

【Web Accessibility】aria-labelledby

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>…

【Kinesis】Kinesis Advantage のマクロ

Kinesis Advantage というキーボードをもう10年以上使っているが、あるとき設定していたマクロがリセットされてしまった もう昔のことすぎて何をどうしたらよいのか全くわからなかったのだが、以下の記事で救われた neareal.com この記事がなくなると詰む…

【SEO】Helpful Content Updateのはなし

Googleが「Helpful Content Update」(HCU)と呼ばれる検索アルゴリズムの更新を行うという記事 developers.google.com Google検索の上位にくるコンテンツとして以下の2つのを言及している 人を第一に考えたコンテンツに焦点を当てる 最初に検索エンジン向…

【StyledSystem】npm install しても参照できない

StyledSystemというライブラリをつかってインラインスタイルぽく書くのを試していた uga-box.hatenablog.com ただ、いくつかうまくいかないところがあったので、使用するのをやめた うまくいかないところをメモしておく npm install しても参照できない 原因…

【CSS】selectのアイコンをsvgにしたい

<select>でつくるプルダウンの右のアイコンをsvgでつくりたい 画像としてbackground-imageで読み込ませればできるかもしれないがダウンロードさせたくなく、マークアップされたsvg要素をどうにか使えないか調べたところ同じようなことを試みている人がいた stackover</select>…

【Java】いまさらJava9で追加されたflatMap(Optional::stream)を知った

Java9で追加されたflatMap(Optional::stream)という関数を知ったのでメモ docs.oracle.com これはOptionalオブジェクトが保持する値が非nullの場合はその値だけを持つstreamを返し、nullの場合は空のstreamを返す関数 今まではfilter(Optional::isPresent).m…

【CSS】background-imageにオーバーレイしたい

CSS

ある要素にbackground-imageで画像を敷いているが、この画像を少し暗くしたい 元々は以下であるが、文字が白色なので画像を少し暗くしたいのが意図 いわゆる黒背景をオーバーレイをしたいのだが、どうやるか調べたところ、以下の記事が参考になった css-tric…

【CSS】:is() と :where()

:is()と:where()の違いがよくわからなかったので調べた developer.mozilla.org developer.mozilla.org :is()と:where()はどちらもCSSの擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を…

【CSS】place-contentで左右中央寄せ

CSS

鹿野さんのスライドを拝読した speakerdeck.com ブラウザのvupで何が使えるようになるのか追っていないので、こういう情報は本当にありがたい みていて知らなかったのは、左右上下中央揃えが二行でできるようになったこと .container { display: grid; place…

【Tailwind】Tailwindの導入を踏みとどまらせるところ

最近Tailwind が人気だが「ユーティリティファースト」のアプローチはBootstrapよりも前からあった それがだんだんと使われなくなったのはその手法に欠陥があったから そのあたりを主張している記事を読んだ javascript.plainenglish.io 具体的には、「Tailw…

【Linaria】Linariaとは

LinariaというCSS in JSのライブラリを知ったので調査した linaria.dev Linaria はゼロランタイム CSS in JS ライブラリ 前回、同じゼロランタイム CSS in JSライブラリのVanilla Extract を調べたがそれとほぼ同様のメリットがある 【Vanilla Extract】Vani…

【Vanilla Extract】Vanilla Extract とは

Vanilla ExtractというCSS in JSのライブラリを知ったので調査した vanilla-extract.style Vanilla Extract はゼロランタイム CSS-in-JS ゼロランタイムとは JS実行時に動的にCSS スタイルタグを生成し、それを読み取ってWeb ページに適用するのではなく、ビ…

【BigQuery】SQLで求める角度の平均

BigQueryに保存された緯度経度データから、それらの平均の緯度経度を求めたい SQLで求めるが、緯度経度は角度であるため、単純なAVGをつかってはダメ uga-box.hatenablog.com そのため、以下の式で求められる角度をSQLで算出する必要がある BigQueryには数学…

【アルゴリズム】緯度経度の平均

あるエリアにある複数の物件のざっくりとした中間にある緯度経度を知りたい 平均という考え方でよさそうだが、緯度経度は角度であるため、普通の平均の計算ではダメだということを知った inak-eng.jp 簡単な話、15°と345°の平均は0°であってほしいが、普通の…

【PostgreSQL】COALESCEの使い方

SQLの関数でCOALESCEの使い方がわからなかったので調べた COALESCEは「合体」という意味らしい COALESCE関数は、条件式の一つ www.postgresql.jp 使い方の説明 COALESCE関数は、NULLでない自身の最初の引数を返します。 全ての引数がNULLの場合にのみNULLが…

Amazonのリーダシップ・プリンシプル

Amazonの『Have Backbone; Disagree and Commit 』という考えが好きで、調べるとこれは『リーダシップ・プリンシプル』というAmazonで働く人たちの16の指針の一つであることを知った www.aboutamazon.jp 他にどんなものがあるのかを読んで、すぐ見返せるよう…

【Fastify】Fastifyとは

FastifyというWebフレームワークを知ったので調べた www.fastify.io Fastify は、HapiとExpress にインスパイアされて開発されたWeb フレームワーク 最小限のオーバーヘッドと強力なプラグインアーキテクチャで最高の開発者体験を提供することに重点を置いた…