Since first introducing the Web Vitals initiative in May of 2020, we on the Chrome team have received a lot of great questions and feedback about the program. Perhaps the topic we've received the most questions about, which is also probably the hardest question to answer, is how to measure Core Web Vitals in a single-page application (SPA), as well as how SPA architectures affect Core Web Vitals s
それはベンツなんよ 総括 今年はコードをよく読むようにした。 技術的にはひき続きPaaSやクロスプラットフォームの動向に注目した。 デファクトの移り変わりを感じるので来年以降はGoやGraphQLに手を出していきたい。 去年のエントリ: 2021年に作ったモノや技術をふりかえる 今年やったこと コード読み 去年はコードを書くことに注力していたので今年は一転コードを読んでいた。 プログラム雑談ポッドキャストを聞いていて「コード読み」っていう言葉がよく出てくるので聞きながらそういえば自分もこの分野が好きだなと思い出したので意識してやることにした。 丁度、最新技術のトレンドだけ俯瞰しているのに学びを感じなくなってきたのでより潜りたい気持ちがあったのでそれを満せたと思う。 IntelliJ IDEAで全言語のプログラミング環境が楽に揃っているのが心強い（Samuraismさんありがとう）。 読んだ
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
Bundle Preloading があれば Module Declarations って要らなくないか？と思ったがそんなこともないらしい 5 日目と同じように、ちょっとだけ Web の未来のことを考えます。 Module Declarations とは Stage 1 のプロポーザルです。前は Module Fragments と呼ばれていました。提案されたタイミングに解説記事を書いたのでよければそちらも参照してください。当時とは構文や細かい挙動がやや異なりますが、根本的に解決したい課題は変わっていません。 https://sosukesuzuki.dev/posts/stage-0-module-fragments/ Module Declarations はモジュール内モジュールの宣言を可能にします。具体的には、次のような構文でモジュール内に新しいモジュールを宣言できます。 modu
作成日 2022-11-24 更新日 2022-11-24 author @bokken_ tag Web, browser, Prerender2 はじめに Prerender2 という機能の実装が Chrome/Chromium で進んでいる。この機能はページのレンダリングを予め行うことでページを高速に閲覧できるようにするための機能だ。この記事ではなぜ Prerender2 なのか、どうすれば適用できるのか、使う際の注意点はなにかを 2022/11/23 時点での情報についてまとめる。最新の情報については、それぞれの文書を参照されたい。¶ もくじ (click で開く) Prerender とは Legacy Prerender とはなにか Prerender2 Prerender2 を使う方法 feature detection Prerender2 の検討事項など Privacy
Webアプリに実装可能な開発ツールキット「ScanSnap Web SDK」を提供開始 ～ブラウザベースのWebアプリからもシームレスにScanSnapと連携～ 株式会社PFU（代表取締役 執行役員社長：村上 清治、以下PFU）は、WebアプリケーションにScanSnapとの連携機能を組み込める開発ツールキット「ScanSnap Web SDK」を、2022年11月29日（火曜日）にリリースします。 ハイブリッドワークやBYODが広まる昨今、ブラウザから利用できるWebアプリケーションが業務ツールをはじめ広く普及しております。また、経理・会計処理やドキュメント管理など、業務ツールでは紙書類の情報を扱うシーンも多く、スキャナーとの連携を望む声も増えており、お客様の声にお応えすべく、この度、「ScanSnap Web SDK」をリリースします。 「ScanSnap Web SDK」を用いて、W
The Workers runtime has, from the beginning, had the mission to align its developer experience with JavaScript and Web Platform standards as much as possible. Over the past year we have worked hard to continue advancing that mission forward both by improving the standards-compliance of existing APIs such as Event, EventTarget, URL, and streams; and the introduction of new Web Platform APIs such as
Open UISection titled Open%20UIThe purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers. To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility require
キャッシュのキーとしてURLが使われます。このときURLのクエリパラメータも含めて考慮されます。 特定のクエリパラメータは、分析や別様とでアクセスログに残すために使われたりしますが、提供するリソースが変わらない場合があります。そのケースであれば、クエリパラメータが付いてたとしても、キャッシュがあればキャッシュを使ってもらいたいものです (ここでキャッシュは、HTTPキャッシュ及び、prefetchやprerenderを指します)。 そのため、クエリパラメータが付いている場合の扱いを改善する No-Vary-Search レスポンスヘッダ が、Chromeの方中心に議論されています。 github.com 例 No-Vary-Search レスポンスヘッダの例として次のものが上げられている クエリパラメータのキーの順序を考慮しない No-Vary-Search: key-order特定のクエ
イベントのバブリングは DOM ツリーではなく React ツリーに従う 2022.10.08 イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。 イベントのバブリングとは ブラウザ上でイベントが発生したとき、キャプチャリングとバブリングの 2 つの段階に分けて動作します。キャプチャリングではまず最上位の親要素（通常 <html>）にイベントハンドラが登録されているか調べて、あればそれを実行します。次に内側の要素に写って同様のことを繰り返し、実際にイベントが発生した要素が到達するまで繰り返します。バブリングの段階ではキャプチャリングの逆のことが起こります。実際にイベントが発生した要素にイベントハンドラがあるか
Except Singapore, we’ve got a world of sub-100 millisecond TTFBs. This is because instead of heading off to Virginia to get the site, each of these locations can use an edge server nearest to them. The edge is about getting 50ms response times vs 150ms response times. You can test this for yourself with a VPN. If you: curl -I https://deno.landYou’ll get the server nearest your location: server: de
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に
PDF 版: https://s.aho.mu/220922-techfeed_expert_night_4.pdf TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る https://techfeed.io/events/techfeed-experts-night-4 でフロントエンド設計をテーマとして使用したスライドです。本編5分。 ===== ▼ 元データで参考リンクとして張っていた URL たち SPA/MPA 議論の俯瞰と現代における設計のポイント（あほむ） — TechFeed Conference 2022講演より - TechFeed The "Developer Experience" Bait-and-Switch - Infrequently Noted The Cost of Javascript Frameworks - W
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
自分が開発しているLaunchableのWebアプリがローンチされて1年半ほどになる。このWebアプリにはReduxのような状態管理ライブラリを入れないまま開発してきたのだが、今のところ困らずに開発できている。そういえば昔自分は状態管理について何か考えていたような…とブログを掘り起こしてみた。 ninjinkun.hatenablog.com このエントリは2016年にネイティブアプリを対象にして書かれているが、この後自分は2018年ごろにWebフロントエンドに軸足を移し、ネイティブアプリ開発から離れた。なのでこのエントリはWebフロントエンドエンジニアが2022年に再考した話になる。 結論としては、当時自分が管理したかった状態のほとんどは現在ApolloClientのキャッシュによって解決されている。 繰り返しになるが、自分が開発しているLaunchableのWebフロントエンドには状態
Webサイトを離れたときにサーバにデータを送れるようにする「Page Unload Beacon」という仕組みが、W3CのWICGで議論されています。 既存のページのライフサイクル(unloadイベントやbeforeunload)で、サーバにデータを送ろうとしても処理されないことがあります。そのため、ページのunload時にビーコンを送るように登録できるようにするのが「Page Unload Beacon」です。 最新のChrome Canaryでとりあえず動くっぽいので、触ってみる (まだ動作するだけで、一部仕様と異なります) Page Unload Beacon デベロッパーツールから次の通り実行して、Beaconを登録しておきます。今回はGETリクエストとPOSTリクエストのビーコンをそれぞれ登録。 getbeacon = new PendingGetBeacon("http://e
Introduction Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. Quick Guide These are the recommended built-in locators. page.getByRole() to locate by explicit and implicit accessibility attributes. page.getByText() to locate by text content. page.getByLabel() to locate a form contro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く