この間のWeb24で話に出ていたペパボのデザインシステムについての記事 tech.pepabo.com 気になったワード Flavor：デザイントークンを差し替えるだけでそのサービスのブランドを崩さずにデザインする仕組み 色や形など、ブランドによって上書き可能なデザイ…

新しいプロトコルQUICがRFC9000の発表で正式スタートしたもよう 約5年前にGoogleが独自に開発・運用していたものが度重なる議論の末ついに正式版になった 新しいプロトコルを作るってすごいことだ www.fastly.com QUIC QUICはUDPソケット上に用意したプロト…

Airbnbがこのコロナ禍でWeb・ネイティアプリのデザインアップグレードを行った リモートワークによって人々は外出先での束縛が少なくなり、いつでも移動できるようになったことで旅と生活と仕事が曖昧になっているという 曖昧になったということで旅行者には…

Elasticsearchのindexをrestoreする場合に正規表現を使えるのは知っているが、数字を扱う場合\dが使えるのか[0-9]の方がよいのかわからなかったので調べた 例えば、Elasticsearchのindexをバージョニングしている場合で、例えば以下のようなindexが存在して…

AOMというワードを聞いたので調べた AOM (Accessibility Object Model) AOMとはアクセシビリティオブジェクトモデルの略で、アクセシビリティオブジェクトモデルとはユーザーと開発者のウェブページと支援技術間の相互作用に関する体験の一部を向上する取り…

Webフォントは重たいので、パフォーマンスの観点であまり導入しないほうがよいと思っていたが 軽量化を試みればパフォーマンス影響をほとんどなくすことができると知って調べた サブセット化 対策としてよく知られているのが、「サブセット化」という手法で…

以前、色をアルファチャンネルで指定したくない理由を探したことがあり、その過程でa:visited のセキュリティ対策について触れた uga-box.hatenablog.com この対策について、過去の話だが具体的にどういう攻撃の可能性があったのか知る機会があったので自分…

「UXデザインの法則」という本を読んだのでまとめ サイトの改善を行うときに、いちからあーだこーだと主観まじりの議論より、先人たちの研究結果をつかって仮説を立てたいとおもっていたので、こういう本を待ってました！というのが手に取ったときの感想 UX…

IE11 が 2022年6月15日にサポート終了とのこと blogs.windows.com IEを対応しなくて良くなると、気にせず使えるようになる機能は池田さんがまとめていらっしゃった IE11が終了すれば、ウェブでできることが増えます。※他にもたくさんあるでしょうから、コメ…

GTMのクリックトリガーをつかって要素のクリック回数を計測したい support.google.com 計測したい要素にclassを付与しておき、そのclass名が付与された要素がクリックされた場合のみカウントするということができる そして、それをGAのタグと関連づけること…

FLoC（Federated Learning of Cohorts）について調べた developers-jp.googleblog.com 上の記事の概要より FLoC は、プライバシーを保護しつつ、興味ベースで広告を選択するメカニズム ユーザーがウェブを動き回ると、ブラウザは FLoC アルゴリズムを使って…

Webページ内の背景色などに、特定のカラーコードを用意するのではなく、カラーコードで指定した色を少し透過（アルファチャンネル）をつけて表現しているデザインをみることがあった 例えば、黒rgb(255, 255, 255)にアルファチャンネルを指定してグレーrgba(…

Core Web Vitals (以降、CWV)の指標の一つのLCP（主要なコンテンツの読み込み時間）のスコアが悪い レスポンシブデザインの中のヒーローイメージが原因なのだが、このような画像のベストプラクティスについて調査してみた 以下の記事のなかで画像とCWVに関す…

WebAPIを設計するときに以下のようなエンドポイントを用意したい idを指定して、単一のリソースを返す queryを指定して、単一のリソースを返す idを複数指定して、複数のリソースを返す 例としては、地図上で表す東京タワーなどのランドマークのリソース（名…

あるWeb APIの設計をレビューしているときに、日付のプロパティに対して date: YYYY年MM月DD日 time: hh時mm分 とフォーマットされた文字列で返すと記載されているのに気付いた フロントエンド目線だとこのようにフォーマットされた状態だと厳しい 例えば、…

どういう文脈だったか忘れてしまったが、ITエンジニアの会話で「is a toy」という言い回しを聞いた よく知らなかったので調べた medium.learningbyshipping.com 上の記事によると、 発明やイノベーションが最初に登場したとき、実用できない「おもちゃ」また…

App Shell モデルというワードを知らなかったので調査した developers.google.com 上のドキュメントより アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web…

Safari 14.1からFlexboxでgapが使えるようになったらしい developer.mozilla.org .flexbox { display: flex; gap: 16px; } いままでmarginやpaddingを駆使していたので、すごくシンプルになった

CLSの対策としてimgタグにwidthとheightを指定したがレスポンシブデザインでブラウザ幅にあわせて画像サイズもかえると縦横比がおかしくなってしまう 調べると以下のスタイルで解決できた object-fit: contain; developer.mozilla.org object-fitは画像をボ…

Javaで処理の実行時間を調べたい ZonedDateTime.now()でstartとendを算出し、ChronoUnitでその間の時間をだすようにするのがよさそう https://docs.oracle.com/javase/jp/8/docs/api/java/time/ZonedDateTime.html https://docs.oracle.com/javase/jp/8/docs…

以前調べたSIte Isorationに関連して、Chrome 91でSharedArrayBufferなどのAPIの利用が制限強化されることを知った uga-box.hatenablog.com blog.chromium.org 利用するにはHTTPヘッダーに“COEP（Cross-Origin-Embedder-Policy）/COOP（Cross-Origin-Opener-…