First-party cookie recipes | Articles | web.dev
First-party cookie recipes Stay organized with collections Save and categorize content based on your preferences. Learn how to set first-party cookies to ensure security, cross-browser compatibility, and minimize chances of breakage once third-party cookies are phased out. Cookies can be first-party or third-party relative to the user's context; depending on which site the user is on at the time.
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
Box Model | web.dev
Box Model Stay organized with collections Save and categorize content based on your preferences. The CSS Podcast - 001: The Box Model Say you have this bit of HTML: <p>I am a paragraph of text that has a few words in it.</p> Then you write this CSS for it: p { width: 100px; height: 50px; padding: 20px; border: 1px solid; } The content ends up 142px wide, instead of the 100px you specified, and it
JavaScript eventing deep dive | Articles | web.dev
JavaScript eventing deep dive Stay organized with collections Save and categorize content based on your preferences. preventDefault and stopPropagation: when to use which and what exactly each method does. Event.stopPropagation() and Event.preventDefault() JavaScript event handling is often straightforward. This is especially true when dealing with a simple (relatively flat) HTML structure. Things
Building a split-button component | Articles | web.dev
Building a split-button component Stay organized with collections Save and categorize content based on your preferences. In this post I want to share thinking on a way to build a split button . Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview Split buttons are buttons that conceal a primary button and a list of additional buttons. They're useful for exposing
How SPA architectures affect Core Web Vitals | Articles | web.dev
How SPA architectures affect Core Web Vitals Stay organized with collections Save and categorize content based on your preferences. Answers to common questions about SPAs, Core Web Vitals, and Google's plan to address current measurement limitations. 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
The new responsive: Web design in a component-driven world | Articles | web.dev
The new responsive: Web design in a component-driven world Stay organized with collections Save and categorize content based on your preferences. Responsive Design Today Today, when using the term: "responsive design", you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size. But soon, this perception o
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
WebRTC is now a W3C and IETF standard | Articles | web.dev
WebRTC is now a W3C and IETF standard Stay organized with collections Save and categorize content based on your preferences. A brief overview of the history, architecture, use cases, and future of WebRTC. The process of defining a web standard is a lengthy process that ensures usefulness, consistency and compatibility across browsers. Today the W3C and IETF mark the completion of perhaps one of th
Building a sidenav component | Articles | web.dev
Building a sidenav component Stay organized with collections Save and categorize content based on your preferences. In this post I want to share with you how I prototyped a Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without JavaScript, and works across browsers. Try the demo. If you prefer video, here's a YouTube version of this post: O
Announcing Squoosh v2 | Blog | web.dev
Announcing Squoosh v2 Stay organized with collections Save and categorize content based on your preferences. Squoosh is an image compression app our team built and debuted at Chrome Dev Summit 2018. We built it to make it easy to experiment with different image codecs, and to showcase the capabilities of the modern web. Today, we are releasing a major update to the app with more codecs support, a
Publish, ship, and install modern JavaScript for faster applications | Articles | web.dev
Publish, ship, and install modern JavaScript for faster applications Stay organized with collections Save and categorize content based on your preferences. Over 90% of browsers are capable of running modern JavaScript, but the prevalence of legacy JavaScript remains a large source of performance problems on the web today. Modern JavaScript Modern JavaScript is not characterized as code written in
How Google improved ads performance with stale-while-revalidate | web.dev
This case study highlights how improving the performance of third-party resources can boost business metrics. While a previous study measured the cost of added ads latency, this study demonstrates the value of a real-world performance improvement: Source: Google Internal Data, June to July 2019. Background The Google Publisher Tag (GPT) is the ad tagging script for Google Ad Manager that requests
Back and forward cache | Articles | web.dev
Back and forward cache Stay organized with collections Save and categorize content based on your preferences. Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience, especially for users with slower networks or devices. This page outlines how to optimize your pages for bfcache across all browsers
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
Help users change passwords easily by adding a well-known URL for changing passwords | Articles | web.dev
Help users change passwords easily by adding a well-known URL for changing passwords Stay organized with collections Save and categorize content based on your preferences. Set a redirect from /.well-known/change-password to the change password page of your website. This will enable password managers to navigate your users directly to that page. Introduction As you may know, passwords are not the b
Performance monitoring with Lighthouse CI | Articles | web.dev
Performance monitoring with Lighthouse CI Stay organized with collections Save and categorize content based on your preferences. How to add Lighthouse to a continuous integration system, such as GitHub Actions. Lighthouse CI is a suite of tools for using Lighthouse during continuous integration. Lighthouse CI can be incorporated into developer workflows in many different ways. This guide covers th
web.dev LIVE wrap-up | Articles
web.dev LIVE wrap-up Stay organized with collections Save and categorize content based on your preferences. A summary of the major news and updates that were announced during our 3-day online community event, and a reminder about upcoming regional events. We just wrapped up our three-day event, web.dev LIVE, where some of the web community came together online to talk about the state of web develo
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
音声と動画をプリロードして高速再生 | Articles | web.dev
動画のプリロード属性 動画ソースがウェブサーバーでホストされている一意のファイルである場合は、動画の preload 属性を使用して、プリロードする情報やコンテンツの量をブラウザに伝えることができます。つまり、Media Source Extensions（MSE）は preload と互換性がありません。 リソースの取得は、最初の HTML ドキュメントが完全に読み込まれて解析されたとき（DOMContentLoaded イベントが発生したときなど）にのみ開始されますが、リソースが実際に取得されたときには大きく異なる load イベントが発生します。 preload 属性を metadata に設定すると、そのユーザーは動画を必要としませんが、そのメタデータ（ディメンション、トラックリスト、再生時間など）の取得が望ましいことを示します。なお、Chrome 64 以降、preload のデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
