Building a dialog component | Articles | web.dev
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
Safe DOM manipulation with the Sanitizer API | Articles | web.dev
Safe DOM manipulation with the Sanitizer API Stay organized with collections Save and categorize content based on your preferences. The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page. Applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML document can be tricky. Without sufficient care,
Web Vitals patterns | Patterns | web.dev
Stay organized with collections Save and categorize content based on your preferences. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. Use the code in these examples to help ensure your projects stay on the right track. � ��JV We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for
Improved Next.js and Gatsby page load performance with granular chunking | Articles | web.dev
Improved Next.js and Gatsby page load performance with granular chunking Stay organized with collections Save and categorize content based on your preferences. A newer webpack chunking strategy in Next.js and Gatsby minimizes duplicate code to improve page load performance. Chrome is collaborating with tooling and frameworks in the JavaScript open-source ecosystem. A number of newer optimizations
Use HTTPS for local development | Articles | web.dev
Use HTTPS for local development Stay organized with collections Save and categorize content based on your preferences. Most of the time, http://localhost behaves like HTTPS for development purposes. However, there are some special cases, such as custom hostnames or using secure cookies across browsers, where you need to explicitly set up your development site to behave like HTTPS to accurately rep
Centering in CSS | Articles | web.dev
Centering in CSS Stay organized with collections Save and categorize content based on your preferences. Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change. Centering in CSS is a notorious challenge, fraught with jokes and mockery. 2020 CSS is all grown up and now we can laugh at those jokes honestly, not through clenched teeth. If yo
Detached window memory leaks | Articles | web.dev
Detached window memory leaks Stay organized with collections Save and categorize content based on your preferences. What's a memory leak in JavaScript? A memory leak is an unintentional increase in the amount of memory used by an application over time. In JavaScript, memory leaks happen when objects are no longer needed, but are still referenced by functions or other objects. These references prev
Optimize resource loading with the Fetch Priority API | Articles | web.dev
When a browser parses a web page and begins to discover and download resources such as images, scripts, or CSS, it assigns them a fetch priority so it can download them in an optimal order. A resource's priority usually depends on what it is and where it is in the document. For example, in-viewport images might have a High priority, and the priority for early loaded, render-blocking CSS using <lin
Why you need "cross-origin isolated" for powerful features | Articles | web.dev
Why you need "cross-origin isolated" for powerful features Stay organized with collections Save and categorize content based on your preferences. Learn why cross-origin isolation is needed to use powerful features such as SharedArrayBuffer, performance.measureUserAgentSpecificMemory() and high resolution timer with better precision. Introduction In Making your website "cross-origin isolated" using
Making your website "cross-origin isolated" using COOP and COEP | Articles | web.dev
Making your website "cross-origin isolated" using COOP and COEP Stay organized with collections Save and categorize content based on your preferences. Use COOP and COEP to set up a cross-origin isolated environment and enable powerful features like SharedArrayBuffer, performance.measureUserAgentSpecificMemory() and high resolution timer with better precision. Updates June 21, 2022: Worker scripts
Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types | Articles | web.dev
Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types Stay organized with collections Save and categorize content based on your preferences. DOM-based cross-site scripting (DOM XSS) happens when data from a user-controlled source (like a username, or a redirect URL taken from the URL fragment) reaches a sink, which is a function like eval() or a property setter like .innerHTML
Techniques to make a web app load fast, even on a feature phone
Techniques to make a web app load fast, even on a feature phone How we used code splitting, code inlining, and server-side rendering in PROXX. At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability to run as well on a feature phone as on a high
Best Practices for Using IndexedDB | Articles | web.dev
Best Practices for Using IndexedDB Stay organized with collections Save and categorize content based on your preferences. Learn best practices for syncing application state between IndexedDB an popular state management libraries. When a user first loads a website or application, there's often a fair amount of work involved in constructing the initial application state that's used to render the UI.
ウェブ上でのレンダリング | Articles | web.dev
ウェブ上でのレンダリング コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ デベロッパーが決定すべき重要な決定の一つは、アプリのロジックとレンダリングを実装する場所です。ウェブサイトの構築方法はたくさんあるため 簡単ではありません この領域に関する Google の理解は、過去数年間に大規模なサイトを対象に Chrome で行った実績に基づいています。大まかに言うと、完全なリハイドレーション アプローチよりも、サーバーサイド レンダリングまたは静的レンダリングを検討することをおすすめします。 この決定を行う際に使用するアーキテクチャをより深く理解するには、各アプローチをしっかりと理解し、それらについて説明する際に使用する一貫した用語を使用する必要があります。レンダリング アプローチの違いは、ページ パフォーマンスの観点からウェブでのレンダリングのトレ
Bringing service workers to Google Search | web.dev
Bringing service workers to Google Search Stay organized with collections Save and categorize content based on your preferences. The story of what shipped, how the impact was measured, and the tradeoffs that were made. Background Search for just about any topic on Google, and you're presented with an instantly recognizable page of meaningful, relevant results. What you probably didn't realize is t
レンダリング パフォーマンス | Articles | web.dev
レンダリング パフォーマンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 今日のウェブのユーザーは、アクセスするページがインタラクティブでスムーズであることを期待しているため、この点に時間と労力を集中させる必要があります。ページの読み込みは速いだけでなく、ライフサイクル全体を通じてユーザー入力にすばやく応答できることも求められます。ユーザー エクスペリエンスのこの側面は、Interaction to Next Paint（INP）指標が正確に測定したものです。適切な INP は、ページがユーザーのニーズに対して一貫して確実に応答していることを意味します。 ページを軽快に感じられるようにするための重要な要素は、ユーザーの操作に応じて実行する JavaScript の量に関係しますが、ユーザーが期待するのは、ユーザー インターフェースの視覚的な変化です。ユ
WebAssembly Threads ready to try in Chrome 70 | Articles | web.dev
WebAssembly Threads ready to try in Chrome 70 Stay organized with collections Save and categorize content based on your preferences. WebAssembly (Wasm) enables compilation of code written in C++ and other languages to run on the web. One very useful feature of native applications is the ability to use threads - a primitive for parallel computation. Most C and C++ developers would be familiar with
Persistent storage | Articles | web.dev
Persistent storage Stay organized with collections Save and categorize content based on your preferences. Persistent storage can help protect critical data from eviction, and reduce the chance of data loss. When faced with storage pressure like low disk space, browsers will typically evict data, including from the Cache API and IndexedDB, from the least recently used origin. This may cause data lo
Avoid large, complex layouts and layout thrashing | Articles | web.dev
Avoid large, complex layouts and layout thrashing Stay organized with collections Save and categorize content based on your preferences. Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Progressive Web Apps | web.dev