跳转到主要内容

书籍

web.dev 学习文章

web.dev 学习文章。内容保持上游原样。

36 章1323 页更新于 1 天前

开始阅读

目录1323

  1. 第 1 章 About 0 页
  2. 第 2 章 Accessible 13 页
    1. 2.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: accessible 1 天前
    2. 2.2 Accessible responsive design We know that it's a good idea to design responsively to provide the best multi-device experience, but respo... 1 天前
    3. 2.3 Accessible tap targets When your design is displayed on a mobile device, you should ensure that interactive elements like buttons ... 1 天前
    4. 2.4 Color and contrast accessibility If you have good vision, it's easy to assume that everyone perceives colors, or text legibility, the same w... 1 天前
    5. 2.5 Content reordering The order of content in your document is important for the accessibility of your site. A screen reader will... 1 天前
    6. 2.6 Control focus with tabindex Standard HTML elements such as <button> or <input> have keyboard accessibility built in for free. If you'... 1 天前
    7. 2.7 Headings and landmarks {% include 'content/why-headings.njk' %} Use headings to outline the page Use h1- h6 elements to create a ... 1 天前
    8. 2.8 Keyboard access fundamentals Many different users rely on the keyboard to navigate applications—from users with temporary and permanent ... 1 天前
    9. 2.9 Labels and text alternatives In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper label... 1 天前
    10. 2.10 Semantics and screen readers Have you ever stopped to wonder how assistive technology, such as a screen reader, knows what to announce t... 1 天前
    11. 2.11 Style focus The focus indicator (often signified by a "focus ring") identifies the currently focused element on your pa... 1 天前
    12. 2.12 Use semantic HTML for easy keyboard wins By using the correct semantic HTML elements you may be able to meet most or all of your keyboard access nee... 1 天前
    13. 2.13 What is accessibility? An accessible site is one whose content can be accessed regardless of any user's impairments and whose func... 1 天前
  3. 第 3 章 Angular 10 页
    1. 3.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: angular 1 天前
    2. 3.2 Audit your Angular app's accessibility with codelyzer Making your app accessible means that all users, including those with special needs, can use it and underst... 1 天前
    3. 3.3 Create a Progressive Web App with the Angular CLI In this post, you'll learn how to use the Angular command line interface (CLI) to make a Progressive Web Ap... 1 天前
    4. 3.4 Optimize Angular's change detection Angular runs its change detection mechanism periodically so that changes to the data model are reflected in... 1 天前
    5. 3.5 Get started: optimize an Angular application Angular is a framework for building user interfaces. It provides building blocks to help you quickly set up... 1 天前
    6. 3.6 Performance budgets with the Angular CLI Optimizing an Angular application is important, but how do you make sure its performance doesn't regress ov... 1 天前
    7. 3.7 Precaching with the Angular service worker When users have limited network access—or none at all—web app functionality can significantly degrade and o... 1 天前
    8. 3.8 Route-level code splitting in Angular This post explains how to set up route-level code splitting in an Angular application, which can reduce Jav... 1 天前
    9. 3.9 Route preloading strategies in Angular Route-level code splitting can help you reduce the initial load time of an application by delaying the Java... 1 天前
    10. 3.10 Virtualize large lists with the Angular CDK The scrolling list is one of the most common UI patterns today, whether it's browsing an infinitely scrolli... 1 天前
  4. 第 4 章 Animations 4 页
    1. 4.1 index layout: collection override:tags: [] date: 2020-10-06 pathName: animations 1 天前
    2. 4.2 Examples of high-performance CSS animations In this post find out how some popular animations found on CodePen have been created. These animations all ... 1 天前
    3. 4.3 How to create high-performance CSS animations This guide teaches you how to create high-performance CSS animations. See Why are some animations slow? to ... 1 天前
    4. 4.4 Why are some animations slow? Modern browsers can animate two CSS properties cheaply: transform and opacity. If you animate anything el... 1 天前
  5. 28 Offline {% include 'partials/offline.njk' %} 1 天前
  6. 第 5 章 Authors 0 页
  7. 第 6 章 Baseline 1 页
    1. 6.1 Baseline Web Platform Baseline gives you clear information about which web platform features are safe to use in your... 1 天前
  8. 第 7 章 Blog 709 页
    1. 7.1 0h h1 {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eCdqV3lXBTovQQ3GiRUN.png", alt="0h h1 screenshot", width="80... 1 天前
    2. 7.2 Making 100,000 Stars Hello! My name is Michael Chang and I work with the Data Arts Team at Google. Recently, we completed 100,00... 1 天前
    3. 7.3 Take the 2021 scroll survey to help improve scrolling on the web We've been analyzing the results of the 2019 Mozilla Developer Network Web DNA Report for action items and ... 1 天前
    4. 7.4 2021 Scroll Survey Report In April, the Chrome team released a scroll and touch-action survey based on top reported issues from the 2... 1 天前
    5. 7.5 Case Study - Page Flip Effect from 20thingsilearned.com In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Th... 1 天前
    6. 7.6 3D and CSS For a long time 3D has been the preserve of desktop applications. Recently with the introduction of advance... 1 天前
    7. 7.7 5miles {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0ivyLzLs74ECIJGubzvk.gif", alt="5 miles detail", width="582"... 1 天前
    8. 7.8 6 CSS snippets every front-end developer should know in 2023 I believe every front-end developer should know how to use container queries, create a scroll snap experien... 1 天前
    9. 7.9 Spooktacular HTML5 Pumpkin A fun Halloween treat. Thanks to Rachel Blum for the picture, Dan Beam, and James Hawkins for the carving. 1 天前
    10. 7.10 Accessibility for teams Making your site more accessible can be a daunting task. If you are approaching accessibility for the first... 1 天前
    11. 7.11 Accessibility tips for web developers It's awesome to build sites that are inclusive and accessible to everyone. There are at least six key areas... 1 天前
    12. 7.12 Profiling your WebGL Game with the about:tracing flag {% Blockquote 'Lord Kelvin' %}If you can not measure it, you can not improve it. {% endBlockquote %} To get... 1 天前
    13. 7.13 CSS `accent-color` Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custo... 1 天前
    14. 7.14 Accessibility This document set is a text-based version of part of the content covered in the Udacity course on Accessibi... 1 天前
    15. 7.15 Accessibility Week This week we highlighted accessibility resources to help you make your sites and applications usable by eve... 1 天前
    16. 7.16 Adapting typography to user preferences with CSS Bringing the user into the design process has been an exciting time for users, designers and developers. Us... 1 天前
    17. 7.17 Adaptive loading: improving web performance on slow devices Device capabilities and network connections vary a lot. Sites that delight users on high-end devices can be... 1 天前
    18. 7.18 Add touch to your site {% YouTube id="Rwc4fHUnGuU" %} Touchscreens are available on more and more devices, ranging from phones to ... 1 天前
    19. 7.19 Magazine-like layout for the web with CSS regions and exclusions The web is an extremely powerful platform for text, an area where Adobe has a great deal of experience and ... 1 天前
    20. 7.20 How Google improved ads performance with stale-while-revalidate This case study highlights how improving the performance of third-party resources can boost business metric... 1 天前
    21. 7.21 Adsy.me {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OBheS2foH6xlJh06O5fG.png", alt="Adsy.me detail", width="800"... 1 天前
    22. 7.22 Advancing the web framework ecosystem Chrome is an active contributor to the web framework ecosystem and our talk at Chrome Dev Summit 2019 cover... 1 天前
    23. 7.23 Madeon Adventure Machine {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s676oANZk4tBdMozz4s3.png", alt="Madeon adventure machine det... 1 天前
    24. 7.24 A modern web experience on Adobe Experience Manager with WorkBox If you are a technical lead or digital marketing analyst interested in providing a modern Web experience to... 1 天前
    25. 7.25 Agrofy: A 70% improvement in LCP correlated to a 76% reduction in load abandonment Agrofy is an online marketplace for Latin America's agribusiness market. They match up buyers and sellers o... 1 天前
    26. 7.26 AirHorner.com {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jl0fjnn688WfsNXJElRf.png", alt="Airhorner detail", width="80... 1 天前
    27. 7.27 Smart Lock for AliExpress {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/63QdzF1WyEdvnOqlb3xN.png", alt="Smart Lock detail", width="8... 1 天前
    28. 7.28 Alibaba Alibaba.com increases conversions on the mobile web by 76% with Progressive Web App. Results 76% higher con... 1 天前
    29. 7.29 AliExpress Summary {: .hide-from-toc } AliExpress increases conversion rate for new users by 104% with new Progressive... 1 天前
    30. 7.30 Writing an AngularJS App with Socket.IO AngularJS is an awesome JavaScript framework that gives you two-way data binding that's both easy to use an... 1 天前
    31. 7.31 Animating Between Views Often, you want to move users between views in your application, whether that's from a list to a details vi... 1 天前
    32. 7.32 Animating Modal Views {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IysQk9ksWLJvaV3KhS83.gif", alt="Animating a modal view.", wi... 1 天前
    33. 7.33 Animations and performance Maintain 60fps whenever you are animating, because any less results in stutters or stalls that will be noti... 1 天前
    34. 7.34 Antialiasing 101 Antialiasing is something of an unsung hero in web graphics; it’s the reason we have clear text and smooth ... 1 天前
    35. 7.35 An API for fast, beautiful web fonts Over the years, a lot has changed with web fonts technology. What used to be a niche practice that required... 1 天前
    36. 7.36 Get things done quickly with app shortcuts To improve users' productivity and facilitate reengagement with key tasks, the web platform now supports ap... 1 天前
    37. 7.37 A beginner's guide to using the application cache It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers... 1 天前
    38. 7.38 Preparing for AppCache removal Following up on previous announcements, support for AppCache will be removed from Chrome and other Chromium... 1 天前
    39. 7.39 Positioning virtual objects in real-world views The WebXR Device API shipped last fall in Chrome 79. As stated then, Chrome's implementation of the API is ... 1 天前
    40. 7.40 ARIA labels and relationships ARIA provides several mechanisms for adding labels and descriptions to elements. In fact, ARIA is the only ... 1 天前
    41. 7.41 | ARIA lets web authors create an alternative reality, seen only by screen readers 🤥 Sometimes it's necessary... 1 天前
    42. 7.42 Virtual Art Sessions {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RKMo1BHS0YOcGjlcNqv8.png", alt="Art Session detail", width="... 1 天前
    43. 7.43 George.com enhances the mobile customer experience with new Progressive Web App George.com is a leading UK clothing brand, part of ASDA Walmart. After upgrading their site to a Progressiv... 1 天前
    44. 7.44 New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly {% Aside %} Summary: Maintaining a consistent width-to-height ratio, called an aspect ratio, is critical in... 1 天前
    45. 7.45 Simple asset management for HTML5 games HTML5 has provided many useful APIs for building modern, responsive, and powerful web applications in the b... 1 天前
    46. 7.46 Asymmetric animation timing Asymmetric animation timing improves the user experience by allowing you to express personality while at th... 1 天前
    47. 7.47 Unblocking clipboard access The traditional way of getting access to the system clipboard was via document.execCommand() for clipboard ... 1 天前
    48. 7.48 Asynch JS - The power of $.Deferred One of the most important aspects about building smooth and responsive HTML5 applications is the synchroniz... 1 天前
    49. 7.49 Async functions: making promises friendly Async functions are enabled by default in Chrome, Edge, Firefox, and Safari, and they're quite frankly marv... 1 天前
    50. 7.50 Using asynchronous web APIs from WebAssembly The I/O APIs on the web are asynchronous, but they're synchronous in most system languages. When compiling ... 1 天前
    51. 7.51 @property: giving superpowers to CSS variables CSS Houdini is an umbrella term that covers a set of low-level APIs that expose parts of the CSS rendering ... 1 天前
    52. 7.52 Synchronize audio and video playback on the web The outputLatency property of an AudioContext instance provides an estimate of audio hardware's output la... 1 天前
    53. 7.53 Quick guide to implementing the HTML5 audio tag Those browsers that don't recognize the audio tag will load the Flash content instead. <audio> </span><span... 1 天前
    54. 7.54 A tale of two clocks One of the biggest challenges in building great audio and music software using the web platform is managing... 1 天前
    55. 7.55 Automating audits with AutoWebPerf AutoWebPerf (AWP) is a modular tool that enables automatic gathering of performance data from multiple sour... 1 天前
    56. 7.56 Deploying AVIF for more responsive websites AVIF is a new image format that is quickly gaining popularity on the web because of its high compression ra... 1 天前
    57. 7.57 Avoid large, complex layouts and layout thrashing Layout is where the browser figures out the geometric information for elements: their size and location in ... 1 天前
    58. 7.58 BaBe {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jalFicttU5q4B9S88RJg.gif", alt="BaBe detail", width="582", h... 1 天前
    59. 7.59 Create OS-style backgrounds with backdrop-filter Translucence, blurring, and other effects are useful ways of creating depth while keeping the context of th... 1 天前
    60. 7.60 Baseline features you can use today {% YouTube "x9rh0Du4Czg" %} The web is always evolving and browsers update constantly to give developers ne... 1 天前
    61. 7.61 How the BBC is rolling out HSTS for better security and performance. HTTPS adoption has been steadily increasing in recent years. Per the HTTP Archive's 2021 Web Almanac, aroun... 1 天前
    62. 7.62 Bear 71 and WebVR {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FBL4BUBX7fnvrpwfJWSX.png", alt="Bear 71 screenshot", width="... 1 天前
    63. 7.63 Feedback wanted: The road to a better layout shift metric for long-lived pages Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a web page. The metric is c... 1 天前
    64. 7.64 Towards a better responsiveness metric {% Aside 'important' %} This article was written during a period of time in which a new responsiveness metr... 1 天前
    65. 7.65 Building a Better Web - Part 1: A faster YouTube on web The Chrome team often talks about "building a better web", but what does that mean? Web experiences should ... 1 天前
    66. 7.66 | For nearly a century, Betty Crocker has been America's source for modern cooking instruction and trusted re... 1 天前
    67. 7.67 Beyond the Rack {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3odtSs9WBTjfum9Kw3vC.jpg", alt="Beyond the rack detail", wid... 1 天前
    68. 7.68 Back/forward cache Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation.... 1 天前
    69. 7.69 Blibli's PWA generates 10x more revenue per user than their previous mobile website Blibli is a well known e-commerce marketplace in Indonesia. The company had over 29 million average monthly... 1 天前
    70. 7.70 BookMyShow’s new Progressive Web App drives an 80% increase in conversions {% Video src="video/T4FyVKpzu4WKF1kBNvXepbi08t52/Lqz8rWt3D2px2obyxvTa.mp4", autoplay="true", loop="true", m... 1 天前
    71. 7.71 Case Study - Drag and Drop Download in Chrome Drag and Drop (DnD) is one of the many great features of HTML 5, and it is supported in Firefox 3.5, Safari... 1 天前
    72. 7.72 Bridging the gap {% Aside %} Watch the talk Bridging the Gap from Google I/O '22: {% YouTube "fGlhRnp5M-g" %} {% endAside %}... 1 天前
    73. 7.73 Browser-level lazy loading for CMSs My goal with this post is to persuade CMS platform developers and contributors (i.e. the people who develop... 1 天前
    74. 7.74 Building a 3D game menu component In this post I want to share thinking on a way to build a 3D game menu component. Try the demo. {% Video ... 1 天前
    75. 7.75 Building a breadcrumbs component In this post I want to share thinking on a way to build breadcrumb components. Try the demo. {% Video ... 1 天前
    76. 7.76 Building a button component In this post I want to share my thoughts on how to build a color-adaptive, responsive, and accessible <but... 1 天前
    77. 7.77 Building a color scheme In this post I want to share thinking on ways to manage multiple color schemes in CSS. Try the demo. {% V... 1 天前
    78. 7.78 Building a crooked grid illusion In this post we're going to have a little bit of fun! There must be 100 ways to achieve this optical illusi... 1 天前
    79. 7.79 Building a dialog component In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini an... 1 天前
    80. 7.80 Building a floating action button (FAB) component In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible FAB com... 1 天前
    81. 7.81 Building a loading bar component In this post I want to share thinking on how to build a color adaptive and accessible loading bar with the ... 1 天前
    82. 7.82 Building a media scroller component In this post I want to share thinking on ways to create horizontal scrolling experiences for the web that a... 1 天前
    83. 7.83 Building a multi-select component In this post I want to share thinking on a way to build a multi-select component. Try the demo. {% Video ... 1 天前
    84. 7.84 | This is the first of a series of blog posts about the lessons that the Google Bulletin team learned while b... 1 天前
    85. 7.85 Building a Settings component In this post I want to share thinking on building a Settings component for the web that is responsive, supp... 1 天前
    86. 7.86 Building a sidenav component In this post I want to share with you how I prototyped a Sidenav component for the web that is responsive, ... 1 天前
    87. 7.87 Building a split-button component In this post I want to share thinking on a way to build a split button . Try the demo. {% Video src="... 1 天前
    88. 7.88 Building a Stories component In this post I want to share thinking on building a Stories component for the web that is responsive, suppo... 1 天前
    89. 7.89 Building a switch component In this post I want to share thinking on a way to build switch components. Try the demo. {% Video src... 1 天前
    90. 7.90 Building a Tabs component In this post I want to share thinking on building a Tabs component for the web that is responsive, supports... 1 天前
    91. 7.91 Building a theme switch component In this post I want to share thinking on a way to build a dark and light theme switch component. Try the de... 1 天前
    92. 7.92 Building a toast component In this post I want to share thinking on how to build a toast component. Try the demo. {% Video src="... 1 天前
    93. 7.93 Building a tooltip component In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom... 1 天前
    94. 7.94 Building an adaptive favicon In this post I want to share thinking on how to build an adaptive favicon with SVG. Try the demo. {% Vide... 1 天前
    95. 7.95 Building Chrometober! Following on from Designcember, we wanted to build Chrometober for you this year as a way to highlight and ... 1 天前
    96. 7.96 Building multiple Progressive Web Apps on the same domain In the Progressive Web Apps in multi-origin sites blog post, Demian discussed the challenges that sites bui... 1 天前
    97. 7.97 Building split text animations In this post I want to share thinking on ways to solve split text animations and interactions for the web t... 1 天前
    98. 7.98 Build with Chrome Build with Chrome, a fun experiment for desktop Chrome users originally launched in Australia, was re-relea... 1 天前
    99. 7.99 Bundling non-JavaScript resources Suppose you're working on a web app. In that case, it's likely that you have to deal not only with JavaScri... 1 天前
    100. 7.100 The Cache API: A quick guide The Cache API is a system for storing and retrieving network requests and their corresponding responses. Th... 1 天前
    101. 7.101 Control camera pan, tilt, and zoom Room-scale video conferencing solutions deploy cameras with pan, tilt, and zoom (PTZ) capabilities so that ... 1 天前
    102. 7.102 High DPI Canvas HiDPI screens are lovely, they make everything look smoother and cleaner. But they also present a new set o... 1 天前
    103. 7.103 Image filters with canvas The HTML5 canvas element can be used to write image filters. What you need to do is draw an image onto a ca... 1 天前
    104. 7.104 Canvas inspection using Chrome DevTools It doesn’t matter if you’re using a 2D or WebGL context, anyone who has ever worked with the <canvas> elem... 1 天前
    105. 7.105 Integrating Canvas into your Web App In this article, I am going to discuss how to use the HTML5 canvas element to create, edit, open and expor... 1 天前
    106. 7.106 No tears guide to HTML5 games So you want to make a game using Canvas and HTML5? Follow along with this tutorial and you'll be on your wa... 1 天前
    107. 7.107 Improving HTML5 Canvas performance HTML5 canvas, which started as an experiment from Apple, is the most widely supported standard for 2D immed... 1 天前
    108. 7.108 Typographic effects in canvas <canvas> entered my awareness in 2006 when Firefox v2.0 was released. An article on Ajaxian, describing the... 1 天前
    109. 7.109 Carnival Cruise Line {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/P3Ur4zVpuoycct8dKsRy.png", alt="Carnival detail", width="800... 1 天前
    110. 7.110 Best practices for carousels A carousel is a UX component that displays content in slideshow-like manner. Carousels can "autoplay" or be... 1 天前
    111. 7.111 Everything announced at Chrome Dev Summit 2021 {% YouTube "n57U2_-3NLQ" %} This post rounds up all the key announcements from the 2021 Chrome Dev Summit, ... 1 天前
    112. 7.112 Centering in CSS Centering in CSS is a notorious challenge, fraught with jokes and mockery. 2020 CSS is all grown up and now... 1 天前
    113. 7.113 Choosing the right easing Having discussed the various options available for easing in animations, what kind should you use in your p... 1 天前
    114. 7.114 Chrome Dev Summit 2014 {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bY2BFji9mpdAGR9WysUK.png", alt="Chrome Dev Summit 2014 websi... 1 天前
    115. 7.115 Chrome and Firefox soon to reach major version 100 Chrome and Firefox will reach version 100 in a couple of months. This has the potential to cause breakage o... 1 天前
    116. 7.116 Click to Call On devices with phone capabilities, make it easy for users to directly connect with you by simply tapping a... 1 天前
    117. 7.117 Clipchamp's video editor PWA installs see a 97% monthly growth 97% Monthly growth in PWA installations 2.3x Performance improvement 9% ... 1 天前
    118. 7.118 Evolving Cumulative Layout Shift in web tooling Today we would like to share how we are evolving measurement of the Cumulative Layout Shift (CLS) metric ac... 1 天前
    119. 7.119 Address form best practices codelab How can you design a form that works well for a variety of names and address formats? Minor form glitches i... 1 天前
    120. 7.120 Codelab: Building a Sidenav component This codelab teaches you how to build a responsive slide out side navigation layout component on the web. W... 1 天前
    121. 7.121 Codelab: Building a Stories component This codelab teaches you how to build an experience like Instagram Stories on the web. We'll build the comp... 1 天前
    122. 7.122 Codelab: Centering in CSS This codelab sets you up to share and showcase your favorite way of centering in CSS. Check out my blog pos... 1 天前
    123. 7.123 Payment form best practices codelab This codelab shows you how to build a payment form that is secure, accessible and easy to use. {% Aside 'ca... 1 天前
    124. 7.124 Use cross-platform browser features to build a sign-in form This codelab teaches you how to build a sign-in form that's secure, accessible, and easy to use. 1. Use mea... 1 天前
    125. 7.125 Sign-up form best practices codelab This codelab shows you how to build a sign-up form that's secure, accessible, and easy to use. Step 1: Use ... 1 天前
    126. 7.126 Improved dark mode default styling with the `color-scheme` CSS property and the corresponding meta tag The prefers-color-scheme user preference media feature The prefers-color-scheme user preference media feat... 1 天前
    127. 7.127 New CSS color spaces and functions in all major engines {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
    128. 7.128 How CommonJS is making your bundles larger In this post, we'll look into what CommonJS is and why it's making your JavaScript bundles larger than nece... 1 天前
    129. 7.129 Community highlight: Albert Kim This post highlights a community expert, as a part of Learn Accessibility! Alexandra White: How would you i... 1 天前
    130. 7.130 Community highlight: Bramus Van Damme This post is part of Designcember. A celebration of web design, brought to you by web.dev. {% Img src="imag... 1 天前
    131. 7.131 Community highlight: Chen Hui Jing This post is part of Designcember. A celebration of web design, brought to you by web.dev. {% Img src="imag... 1 天前
    132. 7.132 Community highlight: Elisa Bandy This post highlights a community expert, as a part of Learn Accessibility! Learn more about Google's access... 1 天前
    133. 7.133 Community highlight: Lynn Fisher This post is part of Designcember. A celebration of web design, brought to you by web.dev. {% Img src="imag... 1 天前
    134. 7.134 Community highlight: Melanie Sumner This post highlights a community expert, as a part of Learn Accessibility! {% Aside %} Read some recent art... 1 天前
    135. 7.135 Community highlight: Miriam Suzanne This post is part of Designcember. A celebration of web design, brought to you by web.dev. Miriam Suzanne i... 1 天前
    136. 7.136 Community highlight: Olutimilehin Olushuyi This post highlights a community expert, as a part of Learn Accessibility! Alexandra White: How'd you get s... 1 天前
    137. 7.137 Compat 2021: Eliminating five top compatibility pain points on the web Google is working with other browser vendors and industry partners to fix the top five browser compatibilit... 1 天前
    138. 7.138 Compat 2021 Holiday Update: presents for developers before the end of the year The end of the year is near, and it's time for a final update on Compat 2021—an effort to eliminate browser... 1 天前
    139. 7.139 Compat 2021 mid-year update: Flex gap everywhere It's time for the mid-year update on Compat 2021—an effort to eliminate browser compatibility problems in f... 1 天前
    140. 7.140 HowTo Components – Overview "HowTo: Components" are a collection of web components that implement common UI patterns. The purpose of th... 1 天前
    141. 7.141 HowTo Components – howto-checkbox A <howto-checkbox> represents a boolean option in a form. The most common type of checkbox is a dual-type ... 1 天前
    142. 7.142 HowTo Components – howto-tabs <howto-tabs> limit visible content by separating it into multiple panels. Only one panel is visible at a ti... 1 天前
    143. 7.143 HowTo Components – howto-tooltip A <howto-tooltip> is a popup that displays information related to an element when the element receives key... 1 天前
    144. 7.144 Using AVIF to compress images on your site We frequently write about the bloat on websites from images, and tools like Lighthouse highlight when image... 1 天前
    145. 7.145 Use conic gradients to create a cool border This CodePen created by Adam Argyle, originally shared via this tweet on Twitter, shows how to use a conic ... 1 天前
    146. 7.146 Constraint validation Validating forms has notoriously been a painful development experience. Implementing client side validatio... 1 天前
    147. 7.147 Constructable Stylesheets Constructable Stylesheets are a way to create and distribute reusable styles when using Shadow DOM. {% Brow... 1 天前
    148. 7.148 `content-visibility`: the new CSS property that boosts your rendering performance The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS prope... 1 天前
    149. 7.149 Keeping third-party scripts under control Third-party scripts, or "tags" can be a source of performance problems on your site, and therefore a target... 1 天前
    150. 7.150 Making your website "cross-origin isolated" using COOP and COEP {% Aside 'caution' %} SharedArrayBuffer on Chrome desktop requires cross-origin isolation starting from Chr... 1 天前
    151. 7.151 Ensure your website is available and usable for everyone during COVID-19 This page provides guidance to help ensure your website is available, accessible, secure, and usable for ev... 1 天前
    152. 7.152 Container queries land in stable browsers {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
    153. 7.153 Creative list styling What comes to mind when you think of a list? The most obvious example is a shopping list—the most simple of... 1 天前
    154. 7.154 Critical Rendering Path Optimizing the critical rendering path refers to prioritizing the display of content that relates to the cu... 1 天前
    155. 7.155 Adding Interactivity with JavaScript JavaScript allows us to modify just about every aspect of the page: content, styling, and its response to u... 1 天前
    156. 7.156 Analyzing Critical Rendering Path Performance Identifying and resolving critical rendering path performance bottlenecks requires good knowledge of the co... 1 天前
    157. 7.157 Constructing the Object Model Before the browser can render the page, it needs to construct the DOM and CSSOM trees. As a result, we need... 1 天前
    158. 7.158 Measuring the Critical Rendering Path The foundation of every solid performance strategy is good measurement and instrumentation. You can't optim... 1 天前
    159. 7.159 Optimizing the Critical Rendering Path To deliver the fastest possible time to first render, we need to minimize three variables: The number of cr... 1 天前
    160. 7.160 PageSpeed Rules and Recommendations This guide examines PageSpeed Insights rules in context: what to pay attention to when optimizing the criti... 1 天前
    161. 7.161 Render Blocking CSS By default, CSS is treated as a render blocking resource, which means that the browser won't render any pro... 1 天前
    162. 7.162 Render-tree Construction, Layout, and Paint The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each v... 1 天前
    163. 7.163 Content security policy The web's security model is rooted in the same-origin policy. Code from https://mybank.com should only hav... 1 天前
    164. 7.164 CSS Animated Grid Layouts {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} {%... 1 天前
    165. 7.165 CSS border animations There are a few methods available to set a border on an element: border, outline, and box-shadow. As det... 1 天前
    166. 7.166 Create interesting image shapes with CSS's clip-path property Elements on web pages are all defined inside a rectangular box. However that doesn't mean that we have to m... 1 天前
    167. 7.167 Quickly create nice CSS gradients with the CSS Gradient Creator This CSS Gradient Generator by Josh W Comeau is a very good, simple Web App that helps you to create "Beaut... 1 天前
    168. 7.168 Finer grained control over CSS transforms with individual transform properties {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% BrowserCompat ... 1 天前
    169. 7.169 New CSS functional pseudo-class selectors `:is()` and `:where()` When writing CSS, you can sometimes end up with long selector lists to target multiple elements with the sa... 1 天前
    170. 7.170 Custom bullets with CSS ::marker Thanks to Igalia, sponsored by Bloomberg, we can finally put our hacks away for styling lists. See! {% Im... 1 天前
    171. 7.171 Apply effects to images with CSS's mask-image property When you clip an element using the clip-path property the clipped area becomes invisible. If instead you w... 1 天前
    172. 7.172 Using CSS Module Scripts to import stylesheets With the new CSS module scripts feature, you can load CSS style sheets with import statements, just like J... 1 天前
    173. 7.173 CSS paint times and page render weight {% Aside 'warning' %} This article contains numeric evaluation from a specific build of a browser. Over tim... 1 天前
    174. 7.174 Smarter custom properties with Houdini’s new API CSS custom properties, also known as CSS variables, let you define your own properties in CSS and use their... 1 天前
    175. 7.175 Well-controlled scrolling with CSS Scroll Snap The CSS Scroll Snap feature allows web developers to create well-controlled scroll experiences by declaring... 1 天前
    176. 7.176 CSS `size-adjust` for `@font-face` Consider the following demo where the font-size is a consistent 64px, and the only difference between eac... 1 天前
    177. 7.177 CSS Subgrid CSS grid is a very powerful layout engine, but the row and column tracks created on a parent grid can only ... 1 天前
    178. 7.178 Trigonometric functions in CSS {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} Tr... 1 天前
    179. 7.179 CSS versus JavaScript animations There are two primary ways to create animations on the web: with CSS and with JavaScript. Which one you cho... 1 天前
    180. 7.180 CSS for Web Vitals The way you write your styles and build layouts can have a major impact on Core Web Vitals. This is particu... 1 天前
    181. 7.181 Custom easing Sometimes you won't want to use the easing keywords that are included with CSS, or you will be using Web An... 1 天前
    182. 7.182 Custom Element Best Practices Custom elements allow you to extend HTML and define your own tags. They're an incredibly powerful feature, ... 1 天前
    183. 7.183 Custom Elements v1 - Reusable Web Components With Custom Elements, web developers can create new HTML tags, beef-up existing HTML tags, or extend the co... 1 天前
    184. 7.184 How Nordhealth uses Custom Properties in Web Components I'm Dave and I'm a Senior Front-end Developer at Nordhealth. I work on the design and development of our de... 1 天前
    185. 7.185 Working with Custom Elements {% Aside 'warning' %} This article describes an old version of Custom Elements (v0). If you're interested i... 1 天前
    186. 7.186 Dance Tonite in WebVR I was excited when the Google Data Arts team approached Moniker and myself about working together to explor... 1 天前
    187. 7.187 Breaking down barriers using the DataTransfer API You might have heard about the DataTransfer API, which is part of the HTML5 Drag and Drop API and Clipboard... 1 天前
    188. 7.188 Debounce your input handlers Input handlers are a potential cause of performance problems in your apps, as they can block frames from co... 1 天前
    189. 7.189 Using the Web Vitals extension to debug Core Web Vitals issues The Web Vitals extension provides easy access to Core Web Vitals diagnostic information to help developers ... 1 天前
    190. 7.190 Debug performance in the field Google currently provides two categories of tools to measure and debug performance: Lab tools: Tools such a... 1 天前
    191. 7.191 Decrease front-end size One of the first things to do when you’re optimizing an application is to make it as small as possible. Her... 1 天前
    192. 7.192 Deep dive into top web developer pain points A few months ago, Paul Kinlan posted about the top developer pain points in 2021, so it feels appropriate t... 1 天前
    193. 7.193 Defining the Core Web Vitals metrics thresholds Core Web Vitals are a set of field metrics that measure important aspects of real-world user experience on ... 1 天前
    194. 7.194 Deprecating Excalidraw Electron in favor of the web version {% Aside %} Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel... 1 天前
    195. 7.195 Designcember Calculator I'm a kid of the 1980s. A thing that was all the rage back when I was in high school were solar calculators... 1 天前
    196. 7.196 Detached window memory leaks A memory leak is an unintentional increase in the amount of memory used by an application over time. In Jav... 1 天前
    197. 7.197 Device Orientation & Motion Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass i... 1 天前
    198. 7.198 Pixel-perfect rendering with devicePixelContentBox Since Chrome 84, ResizeObserver supports a new box measurement called devicePixelContentBox, that measures... 1 天前
    199. 7.199 Accessing hardware devices on the web The goal of this guide is to help you pick the best API to communicate with a hardware device (e.g. webcam,... 1 天前
    200. 7.200 Digging into the Privacy Sandbox {% YouTube 'WnCKlNE52tc' %} Summary This post outlines APIs and concepts from the Privacy Sandbox proposals... 1 天前
    201. 7.201 Disable mouse acceleration to provide a better FPS gaming experience Accelerated movement is an ergonomic feature when using a mouse or trackpad to move the pointer on screen. ... 1 天前
    202. 7.202 Improving page dismissal in synchronous XMLHttpRequest() It's common for a page or app to have unsubmitted analytics or other data at the time a user closes it. To ... 1 天前
    203. 7.203 Discover performance opportunities with Lighthouse Lighthouse is a tool that helps you measure and find ways to improve a page's performance. Here's the gener... 1 天前
    204. 7.204 DOM Order Matters Working with native elements is a great way to learn about focus behavior because they are automatically in... 1 天前
    205. 7.205 Jumping the hurdles with the Gamepad API Let the novices keep their keyboards for adventure games, their precious multi-touchy-feely fingertips for ... 1 天前
    206. 7.206 Case Study - Building the Stanisław Lem Google doodle The Google homepage is a fascinating environment to code within. It comes with many challenging restriction... 1 天前
    207. 7.207 Downloading resources in HTML5 - a[download] Chrome now supports the HTML spec's new download attribute to a elements. When used, this attribute signi... 1 天前
    208. 7.208 Using the HTML5 Drag and Drop API The HTML5 Drag and Drop API means that we can make almost any element on our page draggable. In this post w... 1 天前
    209. 7.209 Drawing to canvas in Emscripten Different operating systems have different APIs for drawing graphics. The differences become even more conf... 1 天前
    210. 7.210 How we're bringing Google Earth to the web In an ideal world, every application that developers build, regardless of technology, would be available in... 1 天前
    211. 7.211 Easy high DPI images Displays with high pixel density are quickly becoming the norm. Content creators need to adapt to this fact... 1 天前
    212. 7.212 How The Economic Times passed Core Web Vitals thresholds and achieved an overall 43% better bounce rate With internet speeds improving day-by-day, users expect websites to respond and behave faster than ever. Th... 1 天前
    213. 7.213 Economic Times quest for fixing INP Interaction to Next Paint (INP) is a metric that assesses a website's responsiveness to user input. Good re... 1 天前
    214. 7.214 Effectively managing memory at Gmail scale While JavaScript employs garbage collection for automatic memory management, it is not a substitute for eff... 1 天前
    215. 7.215 Ele.me improves performance load times with a multi-page Progressive Web App Ele.me is the biggest food ordering and delivery company in mainland China. It serves 260 million registere... 1 天前
    216. 7.216 Best practices for using third-party embeds Many sites use third-party embeds to create an engaging user experience by delegating some sections of a we... 1 天前
    217. 7.217 Emscripten’s embind In my last wasm article, I talked about how to compile a C library to wasm so that you can use it on the we... 1 天前
    218. 7.218 EME WTF? Encrypted Media Extensions provides an API that enables web applications to interact with content protectio... 1 天前
    219. 7.219 Embedding JavaScript snippets in C++ with Emscripten When working on WebAssembly integration with the web, you need a way to call out to external APIs such as w... 1 天前
    220. 7.220 Emscripten and npm WebAssembly (wasm) is often framed as either a performance primitive or a way to run your existing C++ code... 1 天前
    221. 7.221 Emscripting a C library to Wasm Sometimes you want to use a library that is only available as C or C++ code. Traditionally, this is where y... 1 天前
    222. 7.222 Case Study - Getting Entangled with HTML5 Canvas This past spring (2010) I took interest in the rapidly increasing support for HTML5 and related technologie... 1 天前
    223. 7.223 ES modules in service workers ES modules have been a developer favorite for a while now. In addition to a number of other benefits, they ... 1 天前
    224. 7.224 Data-binding revolutions with Object.observe() {% Aside 'warning' %} In November 2015, it was announced on esdiscuss that the Object.observe() proposal i... 1 天前
    225. 7.225 JavaScript eventing deep dive JavaScript event handling is often straightforward. This is especially true when dealing with a simple (rel... 1 天前
    226. 7.226 Stream Updates with Server-Sent Events I wouldn't be surprised if you've stumbled on this article wondering, "What the heck are Server-Sent Events... 1 天前
    227. 7.227 Evolving the CLS metric {% Aside %} Jun 2, 2021: The update to CLS described in this post is now available across Chrome's web tool... 1 天前
    228. 7.228 | {% Aside %} This is a write-up of my Google I/O talk. If you prefer watching it, see the video below. {% en... 1 天前
    229. 7.229 eXtra Electronics {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZHSG0xBO6pjC1TJeuWeY.gif", alt="eXtra detail.", width="582",... 1 天前
    230. 7.230 Farewell to HTML5Rocks After 10 years and 100 million pageviews this commit completes our transition of content of HTML5Rocks to h... 1 天前
    231. 7.231 Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals Inside many companies, website speed performance and Core Web Vitals are still mostly seen as the responsib... 1 天前
    232. 7.232 Fast ads matter If you're like most publishers on the web, your business offers a simple value exchange: you provide conten... 1 天前
    233. 7.233 Fast playback with audio and video preload Faster playback start means more people watching your video or listening to your audio. That's a known fact... 1 天前
    234. 7.234 Protect your resources from web attacks with Fetch Metadata Many web applications are vulnerable to cross-origin attacks like cross-site request forgery (CSRF), cross-... 1 天前
    235. 7.235 Find your way with field data in the Web Vitals extension update Core Web Vitals are the most important metrics to measure to understand your users' experiences, because wh... 1 天前
    236. 7.236 The synchronous FileSystem API for workers The HTML5 FileSystem API and Web Workers are massively powerful in their own regard. The FileSystem API fin... 1 天前
    237. 7.237 Five ways AirSHIFT improved their React app's runtime performance Website performance is not just about load time. It is critical to provide a fast and responsive experience... 1 天前
    238. 7.238 Fixing layout instability In an earlier post I wrote about measuring Cumulative Layout Shift (CLS) in WebPageTest. CLS is an aggregat... 1 天前
    239. 7.239 Chromium lands Flexbox `gap` {% Aside 'key-term' %} gap is the spacing between children. You may have heard of this type of spacing bein... 1 天前
    240. 7.240 Flipkart triples time-on-site with Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dfJkZa3kECiS8vVo5u4i.png", alt="Flipkart site", width="800",... 1 天前
    241. 7.241 What is FLoC? {% Aside %} This post outlined the API design implemented in Chrome for the first origin trial of FLoC. The... 1 天前
    242. 7.242 Introduction to Focus In this lesson we'll talk about focus and how you can manage it in your application. Focus refers to which ... 1 天前
    243. 7.243 Forbes Forbes is re-defining modern web development with Progressive Web App technology. {% YouTube id="JmC0xkCMFC... 1 天前
    244. 7.244 Making Fullscreen Experiences {% YouTube "ZRqr5x73-ng" %} We have the ability to easily make immersive fullscreen websites and applicatio... 1 天前
    245. 7.245 Play the Chrome dino game with your gamepad Chrome's offline page easter egg is one of the worst-kept secrets in history ( [citation needed], but claim... 1 天前
    246. 7.246 GDE community highlight: Alba Silvente Fuentes {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/TorTqrnIdn5WAXwPKLgS.jpeg", alt="Alba with a speaker lanyard... 1 天前
    247. 7.247 A win-win situation {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/PD45CkrdOsFz3xyB5gJ8.jpeg", alt="Enrique on stage wearing a ... 1 天前
    248. 7.248 GDE community highlight: Lars Knudsen {% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/roVI1kelp323efzmIs7X.jpeg", alt="Lars presenting on stage wi... 1 天前
    249. 7.249 GDE community highlight: Nishu Goel {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/YcD8pQOpwfcHv2iCw5lW.jpeg", alt="Nishu on stage.", width="80... 1 天前
    250. 7.250 Finding courage and inspiration in the developer community How do we empower women in tech and equip them with the skills to help them become true leaders? One way is... 1 天前
    251. 7.251 Is your app installed? getInstalledRelatedApps() will tell you! {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vjamv2uyz6NxBPxPIm11.jpg", alt="", width="550", height="486"... 1 天前
    252. 7.252 Capture audio and video in HTML5 Audio/Video capture has been the "Holy Grail" of web development for a long time. For many years we've had ... 1 天前
    253. 7.253 How GoDaddy's Websites + Marketing service improved customer Core Web Vitals by 75% GoDaddy is the world's largest services platform for entrepreneurs around the globe. We're on a mission to ... 1 天前
    254. 7.254 How Goibibo's PWA improved conversions by 60% Goibibo is India's leading online travel booking portal. By building a full-featured and reliable Progressi... 1 天前
    255. 7.255 Rendering HTML5 in older browsers with Google Chrome Frame {% Aside %} Update June 2013: Google is winding down Chrome Frame, and plans to cease support and updates t... 1 天前
    256. 7.256 Case Study - Google I/O 2013 Experiment To build developer interest on the Google I/O 2013 website before conference registration opened, we develo... 1 天前
    257. 7.257 Bringing service workers to Google Search Search for just about any topic on Google, and you're presented with an instantly recognizable page of mean... 1 天前
    258. 7.258 Web developer tools for debugging JavaScript issues in Google Search Google provides a lot of tools to help you debug JavaScript SEO issues in Google Search. This guide gives y... 1 天前
    259. 7.259 Google I/O 2022: That's a wrap! At Google IO 2022 we shared updates on our progress to help create a web that is instant, and connects peop... 1 天前
    260. 7.260 Google+ Google+ goes completely responsive. {% Aside %} We hit our goal of never downloading more than 60k of HTML,... 1 天前
    261. 7.261 Case Study - Auto-Resizing HTML5 Games In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mob... 1 天前
    262. 7.262 GOV.UK drops jQuery from their front end. jQuery is a roughly 30 KiB dependency that nearly 84% of mobile pages used in 2021—and for good reason. jQu... 1 天前
    263. 7.263 Improved Next.js and Gatsby page load performance with granular chunking Chrome is collaborating with tooling and frameworks in the JavaScript open-source ecosystem. A number of ne... 1 天前
    264. 7.264 PWA users are 2.5x more likely to purchase Gravit Designer PRO +24% PWA users have 24% more active sessions than all other platforms +31% PWA account... 1 天前
    265. 7.265 Smart Lock for the Guardian {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ptu1Kad5UFx2gZNf09pT.png", alt="Guardian smart lock screensh... 1 天前
    266. 7.266 Hands-on with Portals: seamless navigation on the web Making sure your pages load fast is key to delivering a good user experience. But one area we often overloo... 1 天前
    267. 7.267 Hiding and updating content Another important technique in fine-tuning the experience for assistive technology users involves ensuring ... 1 天前
    268. 7.268 High DPI images for variable pixel densities One of the features of today's complex device landscape is that there's a very wide range of screen pixel d... 1 天前
    269. 7.269 Hacker News Reader {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hS4ACHeICoiD8BKEw9vM.png", alt="Hacker news reader screensho... 1 天前
    270. 7.270 The Hobbit Experience Historically, bringing interactive, web-based, multimedia-heavy experiences to mobiles and tablets has been... 1 天前
    271. 7.271 The Front-end of Middle-earth In our first article about the development of the Chrome Experiment A Journey Through Middle-earth we focus... 1 天前
    272. 7.272 The Hobbit Experience 2014 In time for the new Hobbit movie “The Hobbit: The Battle of the Five Armies” we have worked on extending la... 1 天前
    273. 7.273 Cross-browser paint worklets and Houdini.how {% YouTube '5eBar5TI71M' %} CSS Houdini is an umbrella term that describes a series of low-level browser AP... 1 天前
    274. 7.274 Housing.com increases conversions and lowers bounce rate by 40% with new PWA {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Lfb2Xrg1c6fBFrVPigDQ.png", alt="Search result listing pace",... 1 天前
    275. 7.275 How Mercado Libre optimized for Web Vitals (TBT/FID) Mercado Libre is the largest e-commerce and payments ecosystem in Latin America. It is present in 18 countr... 1 天前
    276. 7.276 How to distribute Signed HTTP Exchanges (SXG) using nginx As a Signed HTTP Exchanges (SXG) distributor, you can deliver SXG files on behalf of the original content c... 1 天前
    277. 7.277 How to file a good browser bug Filing a good bug isn't hard, but takes a little work. The goal is to make it easy to find what's broken, r... 1 天前
    278. 7.278 How To Do an Accessibility Review {% YouTube id="cOmehxAU_4s" %} Determining if your web site or application is accessible can seem like an o... 1 天前
    279. 7.279 How to set up Signed HTTP Exchanges (SXG) using nginx Signed HTTP Exchanges (SXG) is a new web technology that makes it easier for users to tell content creators... 1 天前
    280. 7.280 How to use HTTPS for local development {% Aside 'caution' %} Most of the time, http://localhost does what you need: in browsers, it mostly behave... 1 天前
    281. 7.281 web.dev engineering blog #1: How we build the site and use Web Components This is the first post in web.dev's engineering blog. Over the coming months, we hope to share actionable i... 1 天前
    282. 7.282 Building Designcember In the spirit of December and the many calendars that folks use to countdown and celebrate, we wanted to hi... 1 天前
    283. 7.283 How browsers work This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research don... 1 天前
    284. 7.284 Case Study - HTML5 in deviantART muro On August 7, 2010, deviantART celebrated its 10th birthday. We celebrated our birthday by launching an HTML... 1 天前
    285. 7.285 Improve security and privacy by updating HTTP Cache By default, resources are always allowed to be cached by any type of cache. Not using or misusing the Cach... 1 天前
    286. 7.286 Hummingbird Library {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0kLA0cAAnqvRRct6qNHc.png", alt="Layout screenshot", width="8... 1 天前
    287. 7.287 Icons and browser colors Modern browsers make it easy to customize certain components, like icons, the address bar color, and even a... 1 天前
    288. 7.288 It's time to lazy-load offscreen iframes! Standardized lazy-loading for images landed in Chrome 76 via the loading attribute and later came to Firef... 1 天前
    289. 7.289 Feedback from the summer 2019 image optimization survey {# Editorial note from @kaycebasques: It's debatable whether this post is appropriate for web.dev. On one h... 1 天前
    290. 7.290 Image policies for fast load times and more Images often take up a significant amount of visual space and make up the majority of the downloaded bytes ... 1 天前
    291. 7.291 Make your site picture perfect with images.tooling.report It is one thing to put an image on the web—but it is hard to do it well. Picking the right format, compress... 1 天前
    292. 7.292 JavaScript import maps are now supported cross-browser {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} ES... 1 天前
    293. 7.293 HTML Imports {% Aside 'warning' %} HTML Imports are deprecated and was removed from Chrome in February 2020. {% endAside... 1 天前
    294. 7.294 Working with IndexedDB This text guides you through the basics of the IndexedDB API. We are using Jake Archibald's IndexedDB Promi... 1 天前
    295. 7.295 Best Practices for Using IndexedDB When a user first loads a website or application, there's often a fair amount of work involved in construct... 1 天前
    296. 7.296 Databinding UI elements with IndexedDB {% Aside %} At the time of publication, Chrome was not yet fully to spec in terms of IndexedDB support. The... 1 天前
    297. 7.297 Infobae more than doubles time spent on mobile site with a Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UM0USY0eNoakaUIVQ5Hj.jpg", alt="Infobae detail", width="800"... 1 天前
    298. 7.298 Advancing Interaction to Next Paint Chrome's mission with the Web Vitals program is to help developers focus on the metrics that are essential ... 1 天前
    299. 7.299 How to install the Thumbor image CDN Image CDNs make it easy to dynamically optimize the aesthetics and performance of your images. Unlike most ... 1 天前
    300. 7.300 Interop 2022: browsers working together to improve the web for developers For the first time ever, all major browser vendors, and other stakeholders, have come together to solve the... 1 天前
    301. 7.301 Interop 2022: end of year update We've reached the end of another year, and it's time to look at the improvements made by browsers as we wor... 1 天前
    302. 7.302 Interop 2023: continuing to improve the web for developers In 2023, all major browser vendors and other stakeholders are again working together to solve the top brows... 1 天前
    303. 7.303 Submit your proposals for Interop 2024 Over the past two years the Chrome team has successfully worked with our partners to improve the interopera... 1 天前
    304. 7.304 IntersectionObserver's coming into view {% Aside %} IntersectionObserver V2 has landed in Chromium-based browsers. Read up on the updates for how t... 1 天前
    305. 7.305 Trust is good, observation is better: Intersection Observer v2 Intersection Observer v1 is one of those APIs that's probably universally loved, and, now that Safari suppo... 1 天前
    306. 7.306 Important Security Terminology Used public/private keys to sign and decrypt messages between the browser and the server. A certificate aut... 1 天前
    307. 7.307 Introducing Baseline Baseline helps you to see, at a glance, whether a feature or API is safe to use in your site or web applica... 1 天前
    308. 7.308 Introducing Learn Accessibility Today we are excited to announce a new addition to our series of courses on web.dev. Learn Accessibility is... 1 天前
    309. 7.309 Introducing Learn HTML Today we are excited to announce the latest in our series of courses on web.dev. Learn HTML is a brand new ... 1 天前
    310. 7.310 Introducing Learn Privacy Today we are excited to announce the latest in our series of courses on web.dev. Learn Privacy is a brand n... 1 天前
    311. 7.311 Introducing libSquoosh We are happy to introduce libSquoosh, an experimental Node library on top of which the Squoosh CLI is built... 1 天前
    312. 7.312 Introducing <model-viewer> 1.1 3D models are more relevant than ever. Retailers bring in-store shopping experiences to customers' homes. M... 1 天前
    313. 7.313 Choose the best build tool for your project with tooling.report {% YouTube 'vsMJiNtQWvw' %} Today web.dev is launching a new initiative called tooling.report. It's a websi... 1 天前
    314. 7.314 Introduction to fetch() So long XMLHttpRequest fetch() allows you to make network requests similar to XMLHttpRequest (XHR). The mai... 1 天前
    315. 7.315 Building the Google I/O 2016 Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PH9aWtLr0RVrB4hwowlq.jpg", alt="Iowa home", width="500", hei... 1 天前
    316. 7.316 Is it :modal? {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
    317. 7.317 Case-study - JAM with Chrome JAM with Chrome is a web based musical project created by Google. JAM with Chrome lets people from all over... 1 天前
    318. 7.318 Case-study - JAM with Chrome JAM with Chrome is a web based musical project created by Google. JAM with Chrome lets people from all over... 1 天前
    319. 7.319 Making JavaScript and Google Search work together Great things are happening with Google Search, and we were excited to share them at Google I/O 2019! {% You... 1 天前
    320. 7.320 JavaScript: What is the meaning of this? JavaScript's this is the butt of many jokes, and that's because, well, it's pretty complicated. However, I... 1 天前
    321. 7.321 > JD.ID is an e-commerce platform in Indonesia providing delivery services for a wide range of products inclu... 1 天前
    322. 7.322 Jumia sees 33% increase in conversion rate, 12X more users on PWA {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/85YtrA4AOFc6OdxoET1y.jpg", alt="Jumia detail", width="800", ... 1 天前
    323. 7.323 Jumia {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2Pw5XRVGmX1WVwWaheDC.gif", alt="Jumia detail", width="582", ... 1 天前
    324. 7.324 Kapwing: Powerful video editing for the web {% Aside %} Joshua is the Chief Technology Officer at Kapwing. {% endAside %} Online video consumption has ... 1 天前
    325. 7.325 Konga {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/seSymQNOS9N7GIcPjpia.gif", alt="Konga detail.", width="582",... 1 天前
    326. 7.326 Lancôme rebuilds their mobile website as a PWA, increases conversions 17% {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/1vNAz1DVJDIbNuZseehE.jpg", alt="Lancome detail", width="800"... 1 天前
    327. 7.327 Land Lines Summary Land Lines is an experiment that lets you explore Google Earth satellite images through gesture. Us... 1 天前
    328. 7.328 Last baseline alignment {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
    329. 7.329 The performance effects of too much lazy loading Lazy loading is a technique to defer downloading a resource until it's needed, which conserves data and red... 1 天前
    330. 7.330 All of Learn Accessibility! is available All modules in the Learn Accessibility course are now available. Written by Carie Fisher, these courses tak... 1 天前
    331. 7.331 All of Learn HTML! is available All modules in the Learn HTML course are now available. This course was written by Estelle Weyl and takes y... 1 天前
    332. 7.332 Learn Images! Today we are excited to share with you our latest course on web.dev. Learn Images is a new course written b... 1 天前
    333. 7.333 Performance monitoring with Lighthouse CI Lighthouse CI is a suite of tools for using Lighthouse during continuous integration. Lighthouse CI can be ... 1 天前
    334. 7.334 Lighthouse evolution: continuous integration, new performance score formula, and more In the Speed Tooling Evolutions talk at Chrome Developer Summit (CDS), Paul Irish and I presented the newes... 1 天前
    335. 7.335 Lighthouse user flows Lighthouse is a fantastic tool for testing performance and best practices during initial page load. However... 1 天前
    336. 7.336 What's New in Lighthouse 6.0 Today we're releasing Lighthouse 6.0! Lighthouse is an automated website auditing tool that helps developer... 1 天前
    337. 7.337 Creating a Lightsaber with Polymer {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YRCKrwla0CFh3rleFYH7.png", alt="Lightsaber screenshot", widt... 1 天前
    338. 7.338 Prefetch resources to speed up future navigations Research shows that faster load times result in higher conversion rates and better user experiences. If you... 1 天前
    339. 7.339 Little Alchemy {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UMRTodImzQkE65TkMkeV.png", alt="Little Alchemy detail", widt... 1 天前
    340. 7.340 web.dev LIVE wrap-up We just wrapped up our three-day event, web.dev LIVE, where some of the web community came together online ... 1 天前
    341. 7.341 Techniques to make a web app load fast, even on a feature phone At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something tha... 1 天前
    342. 7.342 Effectively loading ads without impacting page speed Websites heavily rely on online advertising as a primary source of revenue. However, the presence of ads on... 1 天前
    343. 7.343 Loading WebAssembly modules efficiently When working with WebAssembly, you often want to download a module, compile it, instantiate it, and then us... 1 天前
    344. 7.344 Logical layout enhancements with flow-relative shorthands Since Chromium 69 (September 3rd 2018), logical properties and values have helped developers maintain contr... 1 天前
    345. 7.345 Are long JavaScript tasks delaying your Time to Interactive? Long Tasks can keep the main thread busy, delaying user interaction. Chrome DevTools can now visualize Long... 1 天前
    346. 7.346 Love your cache ❤️ This post is a companion to the Love your cache video, part of the Extended Content at Chrome Dev Summit 20... 1 天前
    347. 7.347 Lowe's website is among fastest performing e-commerce websites {% Aside %} This post was authored by Ashish Choudhury, Dinakar Chandolu, Abhimanyu Raibahadur, and Dhilipv... 1 天前
    348. 7.348 Improving Core Web Vitals on the Mail.ru home page resulted in an average 10% increase in conversion rates Mail.ru is one of the leading e-mail services on the Russian-speaking Internet and is in the top 5 sites in... 1 天前
    349. 7.349 Mainline Menswear implements PWA and sees a 55% conversion rate uplift Mainline is an online clothing retailer that offers the biggest designer brand names in fashion. The UK-bas... 1 天前
    350. 7.350 MakeMyTrip.com’s new PWA delivers 3X improvement in conversion rates {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/5IcEsNM1HiiLZFstLIYp.jpg", alt="Make-my-trip detail", width=... 1 天前
    351. 7.351 Real-Time Effects For Images and Video Many of today's most popular apps let you apply filters and effects to images or video. This article shows ... 1 天前
    352. 7.352 Adaptive icon support in PWAs with maskable icons If you've installed a Progressive Web App on a recent Android phone, you might notice the icon shows up wit... 1 天前
    353. 7.353 Case Study - HTML5 MathBoard {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TmDqcNJ9pDwoXKNl55jV.png", alt="MathBoard application", widt... 1 天前
    354. 7.354 Matterport VR for WebVR {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vraKlL0DMH7CGOOzEcRb.jpg", alt="VR Four Season in Game", wid... 1 天前
    355. 7.355 Capturing an image from the user Many browsers now have the ability to access video and audio input from the user. However, depending on the... 1 天前
    356. 7.356 What is EME? Encrypted Media Extensions provides an API that enables web applications to interact with content protectio... 1 天前
    357. 7.357 Mobile Web Video Playback How do you create the best mobile media experience on the Web? Easy! It all depends on user engagement and ... 1 天前
    358. 7.358 Media Source Extensions Media Source Extensions (MSE) is a JavaScript API that lets you build streams for playback from segments of... 1 天前
    359. 7.359 Recording Audio from the User Many browsers now have the ability to access video and audio input from the user. However, depending on the... 1 天前
    360. 7.360 Recording Video from the User Many browsers now have the ability to access video and audio input from the user. However, depending on the... 1 天前
    361. 7.361 Customize media notifications and playback controls with the Media Session API {% YouTube 'Ft6diPReUAU' %} To let users know what's currently playing in their browser and control it with... 1 天前
    362. 7.362 Merry Pixmas {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lPPoed8IvWxrkP7y7K6J.png", alt="Merry Pixmas screenshot", wi... 1 天前
    363. 7.363 Migrate to User-Agent Client Hints The User-Agent string is a significant passive fingerprinting surface in browsers, as well as being difficu... 1 天前
    364. 7.364 Milliseconds make millions A new study Milliseconds Make Millions reveals the significant impact of mobile site speed on consumers' wi... 1 天前
    365. 7.365 min(), max(), and clamp(): three logical CSS functions to use today With responsive design evolving and becoming increasingly nuanced, CSS itself is constantly evolving and pr... 1 天前
    366. 7.366 MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing MishiPay empowers shoppers to scan and pay for their shopping with their smartphones, rather than wasting t... 1 天前
    367. 7.367 Mobifying your HTML5 site Developing for the mobile web is a hot topic these days. This year, for the first time ever, smart phones o... 1 天前
    368. 7.368 A non-responsive approach to building cross-device webapps Media queries are awesome, a godsend for website developers that want to make small tweaks to their stylesh... 1 天前
    369. 7.369 HTML5 techniques for optimizing mobile performance Spinning refreshes, choppy page transitions, and periodic delays in tap events are just a few of the headac... 1 天前
    370. 7.370 Profiling mobile HTML5 apps with Chrome DevTools Today, the most important thing you can do for your site is make sure it performs well when visited from a ... 1 天前
    371. 7.371 Multi-touch web development Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture ... 1 天前
    372. 7.372 Touch and mouse For close to thirty years, desktop computing experiences have centered around a keyboard and a mouse or tra... 1 天前
    373. 7.373 The <model-viewer> web component Adding 3D models to a website is tricky. 3D models ideally will be shown in a viewer that can work responsi... 1 天前
    374. 7.374 Threading the web with module workers JavaScript is single-threaded, which means it can only perform one operation at a time. This is intuitive a... 1 天前
    375. 7.375 Monitor and analyze the app Even when you configure webpack to make the app as small as possible, it’s still important to keep track of... 1 天前
    376. 7.376 Monitor your web page's total memory usage with `measureUserAgentSpecificMemory()` Browsers manage the memory of web pages automatically. Whenever a web page creates an object, the browser a... 1 天前
    377. 7.377 More capable form controls Many developers build custom form controls, either to provide controls that aren't built in to the browser,... 1 天前
    378. 7.378 More variable font options for the macOS `system-ui` font in Chromium 83 The 'system-ui' section of the CSS Fonts Module Level 4 spec defines a system-ui font keyword that allows ... 1 天前
    379. 7.379 Movi Kanti Revo - Part 1 - Building the 3D World {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/btqFngSls9zPrOREEqAU.png", alt="Movi Kanti Revo logo.", widt... 1 天前
    380. 7.380 Media Source Extensions for Audio Media Source Extensions (MSE) provide extended buffering and playback control for the HTML5 <audio> and <v... 1 天前
    381. 7.381 Multi-device content The US government writing guide summarizes what people want from writing on the web: {% Aside %} When writi... 1 天前
    382. 7.382 Progressive Web Apps in multi-origin sites In the past, there were some advantages to using multi-origin architectures, but for Progressive Web Apps, ... 1 天前
    383. 7.383 Multiplayer audio fun Using the Web Audio API, WebSockets and a very nice designed UI here comes a demo where you can generate no... 1 天前
    384. 7.384 Case Study - Bouncy Mouse {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lYHR5kzCPI8DWurLpItD.svg", alt="Bouncy Mouse", width="320", ... 1 天前
    385. 7.385 Mynet speeds up their mobile web experience by 4X, increasing revenue by 25% with AMP-based PWA {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9ZQhcn69EXtRZ9UHzcaT.jpg", alt="MyNet detail", width="800", ... 1 天前
    386. 7.386 Next Generation Web Layout - National Geographic Forest Giant Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using we... 1 天前
    387. 7.387 HTML5 vs Native Mobile apps and HTML5 are two of the hottest technologies right now, and there's plenty of overlap. Web app... 1 天前
    388. 7.388 Semantics and navigating content You've learned about affordances, semantics, and how assistive technologies use the accessibility tree to c... 1 天前
    389. 7.389 Speed up service worker with navigation preloads {% Aside 'celebration' %} Service Worker Navigation Preload is now supported by all major browser engines. ... 1 天前
    390. 7.390 NDTV achieved a 55% improvement in LCP by optimizing for Core Web Vitals NDTV is one of India's leading news stations and websites. By following the Web Vitals program, they improv... 1 天前
    391. 7.391 Net-A-Porter {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HoshsCcUEWn1hcatIaQO.gif", alt="Net-a-porter detail", width=... 1 天前
    392. 7.392 How committing to Core Web Vitals increased Netzwelt's advertising revenues by 18% When Google announced the Core Web Vitals initiative, German publisher Netzwelt quickly realized the potent... 1 天前
    393. 7.393 New patterns for amazing apps No matter what you build—be it a next generation video editing app, an addictive word game, or a future onl... 1 天前
    394. 7.394 New patterns for media apps Let's welcome our new collection of media patterns to help you create modern media experiences on the web f... 1 天前
    395. 7.395 New patterns I'm excited to share many new web.dev patterns! These additions are from the show GUI Challenges where I sh... 1 天前
    396. 7.396 New Progressive Web App training now available {% Aside %} The training described below is designed as material to teach to others in a workshop format. F... 1 天前
    397. 7.397 The new responsive: Web design in a component-driven world {% YouTube 'jUQ2-C5ZNRc' %} Responsive Design Today Today, when using the term: "responsive design", you ar... 1 天前
    398. 7.398 Next-generation web styling There are a ton of exciting things happening in CSS right now—and many of them are already supported in tod... 1 天前
    399. 7.399 Nikkei achieves a new level of quality and performance with their multi-page PWA With a publishing history of more than 140 years, Nikkei is one of the most authoritative media businesses ... 1 天前
    400. 7.400 Using the Notifications API {% Aside 'warning' %} This article is outdated and references a deprecated API. For modern coverage of the ... 1 天前
    401. 7.401 Use web workers to run JavaScript off the browser's main thread In the past 20 years, the web has evolved dramatically from static documents with a few styles and images t... 1 天前
    402. 7.402 Ola drives mobility for a billion Indians with Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/qjCVAu4foDvaKnBHcX05.jpg", alt="Ola detail", width="800", he... 1 天前
    403. 7.403 OLX boosts re-engagement on the mobile web by 250% with a Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s13PUoEsXkodTR5hz1YP.jpg", alt="OLX detail", width="800", he... 1 天前
    404. 7.404 Ten modern layouts in one line of CSS {% YouTube 'qm0IfG1GyZU' %} Modern CSS layouts enable developers to write really meaningful and robust styl... 1 天前
    405. 7.405 Case Study - Onslaught! Arena In June of 2010, it came to our attention that local publishing "zine" Boing Boing was having a game develo... 1 天前
    406. 7.406 Introducing Open Web Docs High-quality documentation for web platform technologies is a critically important component of our shared,... 1 天前
    407. 7.407 How OpenSooq increased engagement by investing in the web Based in Amman, Jordan, OpenSooq is a mobile-first classifieds marketplace offering a wide range of product... 1 天前
    408. 7.408 Optimize Cumulative Layout Shift "I was about to click that! Why did it move? 😭" Cumulative Layout Shift (CLS) is one of the three Core Web ... 1 天前
    409. 7.409 Optimize First Input Delay {% Aside 'important' %} FID will be replaced by Interaction to Next Paint (INP) as a Core Web Vital in Marc... 1 天前
    410. 7.410 Optimize Interaction to Next Paint {% Aside %} Interaction to Next Paint (INP) is a pending Core Web Vital metric that will replace First Inpu... 1 天前
    411. 7.411 Optimize JavaScript execution JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and someti... 1 天前
    412. 7.412 Optimize Largest Contentful Paint Largest Contentful Paint (LCP) is one of the three Core Web Vitals metrics, and it represents how quickly t... 1 天前
    413. 7.413 Optimize long tasks If you read lots of stuff about web performance, the advice for keeping your JavaScript apps fast tends to ... 1 天前
    414. 7.414 Optimize Time to First Byte Time to First Byte (TTFB) is a foundational web performance metric that precedes every other meaningful use... 1 天前
    415. 7.415 Optimizing Web Vitals using Lighthouse Today, we'll cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify how your sit... 1 天前
    416. 7.416 Eliminate unnecessary downloads The fastest and best-optimized resource is a resource not sent. You should eliminate unnecessary resources ... 1 天前
    417. 7.417 JavaScript Start-up Optimization As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that w... 1 天前
    418. 7.418 Loading Third-Party JavaScript You've optimized all of your code, but your site still loads too slowly. Who's the culprit? Often, performa... 1 天前
    419. 7.419 Optimizing Encoding and Transfer Size of Text-Based Assets Next to eliminating unnecessary resource downloads, the best thing you can do to improve page-load speed is... 1 天前
    420. 7.420 Delivering Fast and Light Applications with Save-Data The Save-Data client hint request header available in Chrome, Opera, and Yandex browsers lets developers d... 1 天前
    421. 7.421 > {% Aside %} The authors of this case study are Orange employees and worked on the PWA project. {% endAside ... 1 天前
    422. 7.422 Requesting performance isolation with the Origin-Agent-Cluster header Origin-Agent-Cluster is a new HTTP response header that instructs the browser to prevent synchronous script... 1 天前
    423. 7.423 The origin private file system {% Aside 'celebration' %} The origin private file system allows web apps to store and manipulate files in t... 1 天前
    424. 7.424 Fix an overloaded server This guide shows you how to fix an overloaded server in 4 steps: Assess: Determine the server's bottleneck.... 1 天前
    425. 7.425 OYO Lite: a TWA with the best of web and Android apps Founded in 2013, OYO Rooms has become one of India's largest hospitality companies, with hotels across hund... 1 天前
    426. 7.426 Case Study - Find Your Way to Oz “Find Your Way to Oz” is a new Google Chrome Experiment brought to the web by Disney. It allows you to take... 1 天前
    427. 7.427 Using the Page Visibility API As Web developers, we tend to get excited by new technologies that enable us to create ever more engaging, ... 1 天前
    428. 7.428 Payment and address form best practices {% YouTube 'xfGKmvvyhdM' %} Well-designed forms help users and increase conversion rates. One small fix can... 1 天前
    429. 7.429 Visual searching with the Web Perception Toolkit Wouldn't it be great if users could search your site using their camera? Imagine this. Your site is Razor M... 1 天前
    430. 7.430 Auditing Performance You've probably heard about all the good things that Progressive Web App techniques can do for your site. Y... 1 天前
    431. 7.431 Next steps Having completed a site audit, you will have accurate review data in a form that makes it easy for develope... 1 天前
    432. 7.432 Prework Before gathering performance metrics for a site audit, there are several checks you can do to identify easy... 1 天前
    433. 7.433 Check site security You won't be able to build a PWA without HTTPS. Serving your site over HTTPS is fundamental for security, a... 1 天前
    434. 7.434 Share the results Once you've audited a site, make sure to package the results in a digestible form. Consider producing diffe... 1 天前
    435. 7.435 Use tools to measure performance There are several core objectives for building a performant, resilient site with low data cost. For each ob... 1 天前
    436. 7.436 Introduction to HTTP/2 {% Aside %} The following content is an excerpt from High Performance Browser Networking (O'Reilly, Ilya Gr... 1 天前
    437. 7.437 Use forensics and detective work to solve JavaScript performance mysteries In recent years, web applications have been sped up considerably. Many applications now run fast enough tha... 1 天前
    438. 7.438 Optimizing Content Efficiency Our web applications continue to grow in their scope, ambition, and functionality -- that's a good thing. H... 1 天前
    439. 7.439 Adapting to Users with Client Hints Developing sites that are fast everywhere can be a tricky prospect. The plethora of device capabilities—and... 1 天前
    440. 7.440 Understanding Low Bandwidth and High Latency It's important to understand what using your app or site feels like when connectivity is poor or unreliable... 1 天前
    441. 7.441 Persistent storage When faced with storage pressure like low disk space, browsers will typically evict data, including from th... 1 天前
    442. 7.442 Google Photography Prize Gallery {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TRSbhnmDJJHfHCLyBw1w.jpg", alt="Google Photography Prize web... 1 天前
    443. 7.443 Core Interactions in the WebVR Lab {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/M0OPzERJ22c9xdzOxAZa.png", alt="VR Lab", width="800", height... 1 天前
    444. 7.444 Pointer lock and first person shooter controls The Pointer Lock API helps properly implement first-person shooter controls in a browser game. Without rela... 1 天前
    445. 7.445 Porting USB applications to the web. Part 2: gPhoto2 In the previous post I showed how the libusb library was ported to run on the web with WebAssembly / Emscri... 1 天前
    446. 7.446 Porting USB applications to the web. Part 1: libusb In a previous post, I showed how to port apps using filesystem APIs to the web with File System Access API,... 1 天前
    447. 7.447 Establish network connections early to improve perceived page speed Before the browser can request a resource from a server, it must establish a connection. Establishing a sec... 1 天前
    448. 7.448 Faster web navigation with predictive prefetching In my Faster Web Navigation with Predictive Prefetching session at Google I/O 2019, I began by talking abou... 1 天前
    449. 7.449 prefers-color-scheme: Hello darkness, my old friend {% Aside 'note' %} I have done a lot of background research on the history and theory of dark mode, if you ... 1 天前
    450. 7.450 prefers-reduced-motion: Sometimes less movement is more Not everyone likes decorative animations or transitions, and some users outright experience motion sickness... 1 天前
    451. 7.451 Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts {% Aside %} In Chrome 83, new font loading improvements have been made to completely eliminate layout shift... 1 天前
    452. 7.452 Preloading responsive images {% BrowserCompat 'api.HTMLLinkElement.imageSrcset' %} This article gives me an opportunity to discuss two o... 1 天前
    453. 7.453 Don't fight the browser preload scanner One overlooked aspect of optimizing page speed involves knowing a bit about browser internals. Browsers mak... 1 天前
    454. 7.454 Profiling Web Audio apps in Chrome You reached this article probably because you're developing an app that uses the Web Audio API and experien... 1 天前
    455. 7.455 Progressively enhance your Progressive Web App {% YouTube 'NXCT3htg9nk' %} Back in March 2003, Nick Finck and Steve Champeon stunned the web design world ... 1 天前
    456. 7.456 JavaScript Promises: an introduction Developers, prepare yourself for a pivotal moment in the history of web development. [Drumroll begins] Prom... 1 天前
    457. 7.457 Introducing PROXX The team that brought you squoosh.app is back! This time, we built a web-based game called PROXX (proxx.app... 1 天前
    458. 7.458 Photoshop's journey to the web Over the last three years, Chrome has been working to empower web applications that want to push the bounda... 1 天前
    459. 7.459 Codelab: Build a push notification client This codelab shows you, step-by-step, how to build a push notification client. By the end of the codelab yo... 1 天前
    460. 7.460 Common Issues and Reporting Bugs When you hit an issue with web push, it can be difficult to debug the issue or find help. This doc outlines... 1 天前
    461. 7.461 Common notification patterns We're going to look at some common implementation patterns for web push. This will involve using a few diff... 1 天前
    462. 7.462 Displaying a Notification The notification options is split into two sections, one that deals with the visual aspects (this section) ... 1 天前
    463. 7.463 Push notifications FAQ This question crops up quite a bit, largely because there are a few scenarios that make it difficult to rea... 1 天前
    464. 7.464 Push events By this point, we covered subscribing a user and sending a push message. The next step is to receive this p... 1 天前
    465. 7.465 How push works Before getting into the API, let's look at push from a high level, start to finish. Then as we step through... 1 天前
    466. 7.466 Push notifications are now supported cross-browser {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} Pu... 1 天前
    467. 7.467 Notification behavior So far, we've looked at the options that alter the visual appearance of a notification. There are also opti... 1 天前
    468. 7.468 Push notifications overview Push messages enable you to bring information to the attention of your users even when they're not using yo... 1 天前
    469. 7.469 Permission UX The natural step after getting a PushSubscription and saving it our server is to trigger a push message, b... 1 天前
    470. 7.470 Codelab: Build a push notification server This codelab shows you, step-by-step, how to build a push notification server. By the end of the codelab yo... 1 天前
    471. 7.471 Subscribing a User The first step is to get permission from the user to send them push messages and then we can get our hands ... 1 天前
    472. 7.472 Basics of UX {% YouTube id="_dXBibRO0SM" %} Push notifications are an incredibly effective way to build deeper user enga... 1 天前
    473. 7.473 The Web Push Protocol We've seen how a library can be used to trigger push messages, but what exactly are these libraries doing? ... 1 天前
    474. 7.474 Address Bar Install for Progressive Web Apps on the Desktop On desktop, there's typically no indication to a user that a Progressive Web App is installable, and if it ... 1 天前
    475. 7.475 How do I notify users that my PWA is installable? If your PWA has use cases where it’s helpful for a user to install your app, for example if you have users ... 1 天前
    476. 7.476 PWAs on Oculus Quest 2 The Oculus Quest 2 is a virtual reality (VR) headset created by Oculus, a division of Meta. It is the succe... 1 天前
    477. 7.477 How QuintoAndar increased conversion rates and pages per session by improving page performance QuintoAndar is a Brazilian proptech company whose products offer digital end-to-end solutions for real esta... 1 天前
    478. 7.478 Case Study - Building Racer Racer is a web-based mobile Chrome Experiment developed by Active Theory. Up to 5 friends can connect their... 1 天前
    479. 7.479 Case Study - The Sounds of Racer Racer is a multi-player, multi-device Chrome Experiment. A retro-style slot car game played across screens.... 1 天前
    480. 7.480 How Rakuten 24's investment in Core Web Vitals increased revenue per visitor by 53.37% and conversion rate by 33.13% Rakuten 24 is an online store that collaborates with both major multinational and domestic consumer goods m... 1 天前
    481. 7.481 Rakuten 24’s investment in PWA increases user retention by 450% Rakuten 24 is an online store provided by Rakuten, one of the largest e-commerce companies in Japan. It pro... 1 天前
    482. 7.482 Introduction to Raphaël.js SVG, short for Scalable Vector Graphics, is a XML-based language for describing objects and scenes. SVG ele... 1 天前
    483. 7.483 Read files in JavaScript Selecting and interacting with files on the user's local device is one of the most commonly used features o... 1 天前
    484. 7.484 Ready Player Web Good game developers know that to capitalise on the opportunity of a particular platform it's important to ... 1 天前
    485. 7.485 How RebelMouse grew loyalty and engagement by optimizing Core Web Vitals RebelMouse is a cloud-based CMS with the data-driven tools and creative strategy publishers need to provide... 1 天前
    486. 7.486 How redBus improved their website's Interaction to Next Paint (INP) and increased sales by 7% The web and its capabilities are evolving at a fast pace. You can now build rich and full-featured experien... 1 天前
    487. 7.487 Reduce the scope and complexity of style calculations Changing the DOM, through adding and removing elements, changing attributes, classes, or through animation,... 1 天前
    488. 7.488 Referer and Referrer-Policy best practices Unexpected cross-origin information leakage hinders web users' privacy. A protective referrer policy can he... 1 天前
    489. 7.489 Registering a custom protocol handler Chrome 13 finally includes navigator.registerProtocolHandler. This API allows web apps to register themsel... 1 天前
    490. 7.490 How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint Groupe Renault is a French multinational automobile manufacturer with a presence in over 130 countries. For... 1 天前
    491. 7.491 Rendering on the Web As developers, we are often faced with decisions that will affect the entire architecture of our applicatio... 1 天前
    492. 7.492 Rendering Performance Users of today’s web expect that the pages they visit will be interactive and smooth and that’s where you n... 1 天前
    493. 7.493 requestAutocomplete I like the web. All in all, I think it’s a pretty good idea. As such, I get into a lot of web vs native deb... 1 天前
    494. 7.494 | There's a new Web API on the block, defined in the HTMLVideoElement.requestVideoFrameCallback() specificati... 1 天前
    495. 7.495 ResizeObserver: it’s like document.onresize for elements Before ResizeObserver, you had to attach a listener to the document's resize event to get notified of any... 1 天前
    496. 7.496 Responsive images Responsive web design means that not only can our layouts change based on device characteristics, but conte... 1 天前
    497. 7.497 Responsive web design basics {% Aside %} Take a look at our complete course on Responsive Web Design—Learn Design. {% endAside %} The us... 1 天前
    498. 7.498 Feedback wanted: An experimental responsiveness metric {% Aside 'important' %} This article was written during a period of time in which a new responsiveness metr... 1 天前
    499. 7.499 Creating Roll It Roll It is a Chrome Experiment that reimagines a classic boardwalk game using only the browser on your phon... 1 天前
    500. 7.500 SameSite cookie recipes {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: Under... 1 天前
    501. 7.501 SameSite cookies explained {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: Under... 1 天前
    502. 7.502 Play safely in sandboxed IFrames Constructing a rich experience on today's web almost unavoidably involves embedding components and content ... 1 天前
    503. 7.503 Safe DOM manipulation with the Sanitizer API Applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML... 1 天前
    504. 7.504 Santa Tracker as a PWA View the site Summary Santa Tracker was rapidly upgraded to an offline Progressive Web App for the 2016 hol... 1 天前
    505. 7.505 Schemeful Same-Site {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: Under... 1 天前
    506. 7.506 The Credential Management API The Credential Management API is a standards-based browser API that provides a programmatic interface betwe... 1 天前
    507. 7.507 Sign in Users To sign in users, retrieve the credentials from the browser's password manager and use those to automatical... 1 天前
    508. 7.508 Save Credentials from Forms {% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/hglb1gObe5c9zqoF2VuX.mov" %} Save Credentials from sign-in... 1 天前
    509. 7.509 Introduction to ARIA So far, we've encouraged using native HTML elements because they give you focus, keyboard support, and buil... 1 天前
    510. 7.510 Introduction to semantics You've seen how to make a site accessible to users who can't use a mouse or pointing device — whether due t... 1 天前
    511. 7.511 Sending messages with web push libraries One of the pain points when working with web push is that triggering a push message is extremely "fiddly". ... 1 天前
    512. 7.512 Service worker mindset Service workers are powerful and absolutely worth learning. They let you deliver an entirely new level of e... 1 天前
    513. 7.513 Measuring the Real-world Performance Impact of Service Workers One of the most significant benefits of service workers (from a performance perspective, at least) is their... 1 天前
    514. 7.514 Service Workers in Production {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HhySNupQxJmqcouugbqS.png", alt="Portrait screenshot", width=... 1 天前
    515. 7.515 Service worker registration Service workers can meaningfully speed up repeat visits to your web app, but you should take steps to ensur... 1 天前
    516. 7.516 Shadow DOM 101 {% Aside 'warning' %} This article describes an old version of Shadow DOM (v0). If you're interested in usi... 1 天前
    517. 7.517 Shadow DOM 201 {% Aside 'warning' %} This article describes an old version of Shadow DOM (v0). If you're interested in usi... 1 天前
    518. 7.518 Shadow DOM 301 {% Aside 'warning' %} This article describes an old version of Shadow DOM (v0). If you're interested in usi... 1 天前
    519. 7.519 Shadow DOM v1 - Self-Contained Web Components Shadow DOM removes the brittleness of building web apps. The brittleness comes from the global nature of HT... 1 天前
    520. 7.520 Getting Started with CSS Shapes For a long time, web designers have been forced to create within the constraints of the rectangle. Most con... 1 天前
    521. 7.521 Shopping for speed on eBay.com Speed was a company-wide initiative for eBay in 2019, with many teams determined to make the site and apps ... 1 天前
    522. 7.522 Simplify paint complexity and reduce paint areas Paint is the process of filling in pixels that eventually get composited to the users' screens. It is often... 1 天前
    523. 7.523 Relating site speed and business metrics Over the last few years it has been well established that site speed performance is a significant part of t... 1 天前
    524. 7.524 How Slow Roads intrigues gamers and developers alike, spotlighting the surprising capabilities of 3D in the browser Slow Roads is a casual driving game with an emphasis on endlessly procedurally generated scenery, all hoste... 1 天前
    525. 7.525 Towards an animation smoothness metric You've probably experienced pages that "stutter" or "freeze" during scrolling or animations. We like to say... 1 天前
    526. 7.526 Scroll snapping after layout changes CSS Scroll Snap allows web developers to create well-controlled scroll experiences by declaring scroll snap... 1 天前
    527. 7.527 Social discovery You can influence the way your site appears when shared via social media by adding a few lines of code to e... 1 天前
    528. 7.528 What are source maps? {% YouTube 'FIYkjjFYvoI' %} Today, we are talking about source maps, a crucial tool in modern web developme... 1 天前
    529. 7.529 Avoiding Unnecessary Paints - Animated GIF Edition Avoiding paints is critical to achieving a silky smooth frame rate, especially on mobile. Sometimes, howeve... 1 天前
    530. 7.530 Speed at scale: what's new in web performance? During the "Speed at Scale" talk at Google I/O 2019, we announced three things that we hope will improve we... 1 天前
    531. 7.531 Improving the performance of your HTML5 App HTML5 gives us great tools to enhance the visual appearance of web applications. This is especially true in... 1 天前
    532. 7.532 Accelerated Rendering in Chrome For most web developers the fundamental model of a web page is the DOM. Rendering is the often obscure proc... 1 天前
    533. 7.533 Parallaxin Parallax sites have been all the rage recently, just take a look at these: Old Pulteney Row to the Pole Adi... 1 天前
    534. 7.534 Best practices for a faster web app with HTML5 Much of HTML5 aims to deliver native browser support for components and techniques that we have achieved th... 1 天前
    535. 7.535 Jank busting for better rendering performance You want your web app to feel responsive and smooth when doing animations, transitions, and other small UI ... 1 天前
    536. 7.536 Deep dive into the murky waters of script loading In this article I’m going to teach you how to load some JavaScript in the browser and execute it. No, wait,... 1 天前
    537. 7.537 Static memory javascript with Object Pools So you get an email saying how your web-game / web-app is performing badly after a certain amount of time, ... 1 天前
    538. 7.538 Speed tooling evolutions: highlights from Chrome Developer Summit 2019 At Chrome Developer Summit, Paul Irish and I announced updates to Lighthouse—Lighthouse CI, new performance... 1 天前
    539. 7.539 How To Think About Speed Tools Google has put out a lot of guidance around performance data and performance tooling. The goal of this info... 1 天前
    540. 7.540 Avoiding unnecessary paints Painting the elements for a site or application can get really expensive, and it can have a negative knock-... 1 天前
    541. 7.541 Performance tips for JavaScript in V8 Daniel Clifford gave an excellent talk at Google I/O on tips and tricks to improve JavaScript performance i... 1 天前
    542. 7.542 Speedy CSS Tip! Animated Gradient Text Hop over to CodePen and create a new pen. Create the markup for your text. Let's use a header with the word... 1 天前
    543. 7.543 Speedy CSS Tip! Animated Loader Hop over to CodePen and create a new pen. Create the markup for our loader. Note the use of inline custom p... 1 天前
    544. 7.544 Announcing Squoosh v2 Squoosh is an image compression app our team built and debuted at Chrome Dev Summit 2018. We built it to ma... 1 天前
    545. 7.545 Keeping things fresh with stale-while-revalidate stale-while-revalidate helps developers balance between immediacy—loading cached content right away—and fre... 1 天前
    546. 7.546 State of CSS 2021 The State of CSS 2021 survey ran for the third year in a row, and reached over 8,000 developers worldwide. ... 1 天前
    547. 7.547 State of CSS 2022 The year 2022 is set to be one of CSS's greatest years, in both features and cooperative browser feature re... 1 天前
    548. 7.548 Stick to Compositor-Only Properties and Manage Layer Count Compositing is where the painted parts of the page are put together for displaying on screen. There are two... 1 天前
    549. 7.549 Storage for the web Internet connections can be flakey or non-existent on the go, which is why offline support and reliable per... 1 天前
    550. 7.550 Screensharing a browser tab in HTML5? In the past couple of years, I've helped a few different companies achieve screensharing-like functionality... 1 天前
    551. 7.551 Streams—The definitive guide The Streams API allows you to programmatically access streams of data received over the network or created ... 1 天前
    552. 7.552 Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP) Cross-site scripting (XSS)—the ability to inject malicious scripts into a web application—has been one of t... 1 天前
    553. 7.553 Deep-copying in JavaScript using structuredClone For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript ... 1 天前
    554. 7.554 Submit your proposals for Interop 2023 The Chrome team has worked with other browser vendors and partners in the ecosystem to help improve browser... 1 天前
    555. 7.555 Case Study - SONAR, HTML5 Game Development Last summer I worked as the technical lead on a commercial WebGL game called SONAR. The project took around... 1 天前
    556. 7.556 Case Study - Real-time Updates in Stream Congress Through WebSockets and EventSource, HTML5 enables developers to build web apps that communicate in real tim... 1 天前
    557. 7.557 Supercharging your gruntfile If the Grunt world is new to you, an ideal place to start is Chris Coyier’s excellent article “Grunt for Pe... 1 天前
    558. 7.558 Suumo {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VFyNSzxuxA1BmBagsWhN.gif", alt="Suumo site", width="582", he... 1 天前
    559. 7.559 Splash vector graphics on your responsive site Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual i... 1 天前
    560. 7.560 SVGcode: a PWA to convert raster images to SVG vector graphics {% Aside %} In a hurry? Go straight to the SVGcode app and read the article later. {% endAside %} {% YouT... 1 天前
    561. 7.561 SVGOMG {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JBaM0M3E1sG5xURP28m7.png", alt="Svgomg screenshot", width="8... 1 天前
    562. 7.562 Handling range requests in a service worker Some HTTP requests contain a Range: header, indicating that only a portion of the full resource should be ... 1 天前
    563. 7.563 How Swappie increased mobile revenue by 42% by focusing on Core Web Vitals Swappie is a successful start-up that sells refurbished phones. For a few years they prioritized adding new... 1 天前
    564. 7.564 Synchronized cross-device mobile testing If you're a web developer targeting the multi-device web, you likely have to test your sites and web apps a... 1 天前
    565. 7.565 Four common types of code coverage Have you heard the phrase "code coverage"? In this post, we will explore what code coverage in tests is and... 1 天前
    566. 7.566 Pyramid or Crab? Find a testing strategy that fits Welcome back! The last article laid down lots of groundwork about how to approach the different testing typ... 1 天前
    567. 7.567 Defining test cases and priorities In the previous post, you learned about testing strategies, the number of tests needed to test an applicati... 1 天前
    568. 7.568 Three common types of test automation We've all been there: what is a recurring coding meme that happens all too often in real life? {% Img src="... 1 天前
    569. 7.569 To test or not to test, a technical perspective The previous article covered the basics of test cases and what they should contain. This article delves dee... 1 天前
    570. 7.570 Tabbed application mode for PWAs {% Aside %} Tabbed application mode is part of the capabilities project and is currently in development. Th... 1 天前
    571. 7.571 Best practices for tags and tag managers Tags are snippets of third-party code that are inserted into a site, typically via a tag manager. Tags are ... 1 天前
    572. 7.572 Case Study - Building Technitone.com {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/n7RpXa3NM0GtkXIyec38.jpeg", alt="Technitone — a web audio ex... 1 天前
    573. 7.573 Improving Cumulative Layout Shift at Telegraph Media Group {% Aside %} Chris is a principal software engineer at The Telegraph. {% endAside %} The visual stability ch... 1 天前
    574. 7.574 The Front-End Developer's Guide to the Terminal If you are used to working in a GUI, then the terminal can seem a complicated and unforgiving place. By lea... 1 天前
    575. 7.575 How Terra improved user engagement thanks to Dark Mode Terra, one of Brazil's largest media companies with 75 million monthly users, reduced the bounce rate by 60... 1 天前
    576. 7.576 How prefetching helped Terra increase ads click-through rate by 30% and speed up Largest Contentful Paint. Prefetching is a technique used to speed up page loading by downloading resources—or even entire pages—whic... 1 天前
    577. 7.577 Testing Web Design Color Contrast Say you have some text on a light background, like this: {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/VVH... 1 天前
    578. 7.578 Text Alternatives for Images Images are an important component of most web pages, and are of course a particular sticking point for low-... 1 天前
    579. 7.579 | Chrome 80 was a big release. It contained a number of highly anticipated features like ECMAScript Modules i... 1 天前
    580. 7.580 The Accessibility Tree Imagine that you're building a user interface for screen reader users only. Here, you don't need to create ... 1 天前
    581. 7.581 The amazing powers of CSS Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance,... 1 天前
    582. 7.582 The Basics of easing Nothing in nature moves linearly from one point to another. In reality, things tend to accelerate or decele... 1 天前
    583. 7.583 The end of Internet Explorer I'm Steve Workman and I'm the Lead Engineer for Maersk.com. Maersk is the global leader in integrated suppl... 1 天前
    584. 7.584 What are third-party origin trials? Origin trials are a way to test a new or experimental web platform feature. Origin trials are usually only ... 1 天前
    585. 7.585 Getting started with Three.js I have used Three.js for some of my experiments, and it does a really great job of abstracting away the hea... 1 天前
    586. 7.586 How focusing on web performance improved Tokopedia's click-through rate by 35% Tokopedia is one of the largest e-commerce companies in Indonesia. With 2.7M+ nationwide merchant networks,... 1 天前
    587. 7.587 Our top Core Web Vitals recommendations for 2023 Over the years, we at Google have made a lot of recommendations to web developers on how to improve perform... 1 天前
    588. 7.588 TransformStream is now supported cross-browser {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} Th... 1 天前
    589. 7.589 Confound malicious middlemen with HTTPS and HTTP Strict transport security Given the amount of personal data that flows through the great series of tubes that is the internet, encryp... 1 天前
    590. 7.590 A Simple Trip Meter using the Geolocation API The Geolocation API lets you find out where the user is and keep tabs on them as they move around, always w... 1 天前
    591. 7.591 How Truebil made the web its channel of growth Founded in 2015, Truebil is an Indian online marketplace that sells 100% certified used cars. With over 1.4... 1 天前
    592. 7.592 Getting started with Trust Tokens {% Aside %} This API has been renamed Private State Tokens. The developer.chrome.com article Private State ... 1 天前
    593. 7.593 Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types DOM-based cross-site scripting (DOM XSS) is one of the most common web security vulnerabilities, and it's v... 1 天前
    594. 7.594 Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7FJZDBnszKhWl7pRtwJu.jpg", alt="Twitter detail", width="800"... 1 天前
    595. 7.595 The UI fund Chrome has launched a fund to support the UI ecosystem. We designed this fund to provide grants to people w... 1 天前
    596. 7.596 Understanding cookies {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: SameS... 1 天前
    597. 7.597 Understanding CSS filter effects Filters are a powerful tool that web authors can use to achieve interesting visual effects. In this article... 1 天前
    598. 7.598 Make use of long-term caching The next thing (after optimizing the app size that improves the app loading time is caching. Use it to keep... 1 天前
    599. 7.599 Top tips for web performance {% YouTube 'SyVKRnusyqM' %} According to HTTP Archive, a typical mobile web page weighs over 2.6 MB, and mo... 1 天前
    600. 7.600 Optimize images with Thumbor Thumbor is a free, open source image CDN that makes it easy to compress, resize, and transform images. This... 1 天前
    601. 7.601 User Location The Geolocation API lets you discover, with the user's consent, the user's location. You can use this funct... 1 天前
    602. 7.602 User preference media features client hints headers CSS media queries, and specifically user preference media features like prefers-color-scheme or prefers-red... 1 天前
    603. 7.603 User timing API High performance web applications are crucial to a great user experience. As web applications become more a... 1 天前
    604. 7.604 Using tabindex The default tab order provided by the DOM position of native elements is convenient, but there are times wh... 1 天前
    605. 7.605 Basics of UX This article introduces a workflow that can help teams, products, startups and companies create a robust an... 1 天前
    606. 7.606 Introduction to variable fonts on the web In this article, we will look at what variable fonts are, the benefits they offer, and how we can use them ... 1 天前
    607. 7.607 Variable fonts in real life If you have not yet taken the plunge into using variable fonts, the article Variable fonts in real life fro... 1 天前
    608. 7.608 Going beyond images with basic video for the web Are you thinking about adding video to your website? As devices and network connections have become faster ... 1 天前
    609. 7.609 The large, small, and dynamic viewport units {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} Th... 1 天前
    610. 7.610 The business impact of Core Web Vitals {% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/m80oUd2zASInyKJJ7QNc.png", alt="LCP, FID, CLS", width="800",... 1 天前
    611. 7.611 Best practices for measuring Web Vitals in the field Having the ability to measure and report on the real-world performance of your pages is critical for diagno... 1 天前
    612. 7.612 Measure and debug performance with Google Analytics 4 and BigQuery Google provides a number of tools—Search Console, PageSpeed Insights (PSI), and the Chrome User Experience ... 1 天前
    613. 7.613 Getting started with measuring Web Vitals Collecting data on your site's Web Vitals is the first step towards improving them. A well-rounded analysis... 1 天前
    614. 7.614 How SPA architectures affect Core Web Vitals Since first introducing the Web Vitals initiative in May of 2020, we on the Chrome team have received a lot... 1 天前
    615. 7.615 Core Web Vitals workflows with Google tools Core Web Vitals are a set of metrics that assess the user experience on criteria such as load performance, ... 1 天前
    616. 7.616 Tools to measure Core Web Vitals The recently announced Web Vitals initiative provides unified guidance about quality signals that are essen... 1 天前
    617. 7.617 Vodafone: A 31% improvement in LCP increased sales by 8% Vodafone is a leading telecommunications company in Europe and Africa operating fixed and mobile networks i... 1 天前
    618. 7.618 Progressive Web App at Voot {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jqr5aH5HOZmNBzN3YEg0.png", alt="Voot Lite logo", width="800"... 1 天前
    619. 7.619 Virtual reality comes to the web Immersive experiences came to the web in Chrome 79. The WebXR Device API brings virtual reality brought vir... 1 天前
    620. 7.620 Virtual reality comes to the web, part II Recently, I published Virtual reality comes to the web, an article that introduced basic concepts behind th... 1 天前
    621. 7.621 The Washington Post {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rTadjNpxkUGJHDs5t0MU.gif", alt="Washington Post detail", wid... 1 天前
    622. 7.622 Extending the browser with WebAssembly One of the best things about WebAssembly is the ability experiment with new capabilities and implement new ... 1 天前
    623. 7.623 New functionality for developers—brought to you by WebAssembly WebAssembly enables developers to bring new performant functionality to the web from other languages. Over ... 1 天前
    624. 7.624 WebAssembly Threads ready to try in Chrome 70 {% Aside %} WebAssembly threads are enabled by default in Chrome 74 for desktop. The origin trial mentioned... 1 天前
    625. 7.625 The Weather Channel {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lkfmhjIvUfvE9XFQfHmD.png", alt="Weather channel detail", wid... 1 天前
    626. 7.626 Web Animations API improvements in Chromium 84 When used correctly, animations improve user perception and memory of your brand, guide user actions, and h... 1 天前
    627. 7.627 Augmented reality: You may already know it The WebXR Device API shipped last fall in Chrome 79. As stated then, Chrome's implementation of the API is ... 1 天前
    628. 7.628 Building components Components are the building blocks of modern web applications. What best practices should you follow when b... 1 天前
    629. 7.629 Web components: the secret ingredient helping power the web At Google I/O 2019, Kevin Schaaf of the Polymer Project and Caridy Patiño of Salesforce talked about the st... 1 天前
    630. 7.630 web.dev at I/O 2019 With I/O right around the corner, we wanted to sneak out a quick update to let you know what we've been wor... 1 天前
    631. 7.631 Web Filter {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ksqXaLIGDbKhes09L8a4.png", alt="Web filter screenshot", widt... 1 天前
    632. 7.632 Web on Android The Android platform has been around for more than ten years, and since its early days it has had great sup... 1 天前
    633. 7.633 Fill OTP forms within cross-origin iframes with WebOTP API SMS OTPs (one-time passwords) are commonly used to verify phone numbers, for example as a second step in au... 1 天前
    634. 7.634 Updates to the Web Payments APIs Web Payments have been publicly available in browsers since 2016. The core feature—the Payment Request API—... 1 天前
    635. 7.635 Web Performance Made Easy - Google I/O 2018 edition We've been pretty busy over the past year trying to figure out how to make the Web faster and more performa... 1 天前
    636. 7.636 New to the web platform in January In January, Chrome 97 and Firefox 96 became stable. Firefox 96 shipped the color function hwb(). This func... 1 天前
    637. 7.637 New to the web platform in January In January 2023, Firefox 109, Chrome 109, and Safari 16.3 became stable. Let's take a look at what this mea... 1 天前
    638. 7.638 New to the web platform in February In February, Chrome 98 and Firefox 97 became stable. Chrome 98 shipped the self.structuredClone method. It... 1 天前
    639. 7.639 New to the web platform in February In February 2023, Firefox 110 and Chrome 110 became stable. Let's take a look at what this means for the we... 1 天前
    640. 7.640 New to the web platform in March In March, Chrome 99, Chrome 100, Firefox 98, and Safari 15.4 became stable. This brought a whole batch of n... 1 天前
    641. 7.641 New to the web platform in March In March 2023, Firefox 111, Chrome 111, and Safari 16.4 became stable. Let's take a look at what this means... 1 天前
    642. 7.642 New to the web platform in April In April, Chrome 101 and Firefox 99 became stable. After the bumper crop of features landing last month, it... 1 天前
    643. 7.643 New to the web platform in April In April 2023, Firefox 112, and Chrome 112 became stable. Let's take a look at what this means for the web ... 1 天前
    644. 7.644 New to the web platform in May In May, Chrome 102, Safari 15.5, Firefox 100, and Firefox 101 became stable. Chrome 102 and Safari 15.5 inc... 1 天前
    645. 7.645 New to the web platform in May In May 2023, Firefox 113, Chrome 113, Chrome 114, and Safari 16.5 became stable. Let's take a look at what ... 1 天前
    646. 7.646 New to the web platform in June In June, Chrome 103 and Firefox 102 became stable. Transform streams and readable byte streams Firefox 102 ... 1 天前
    647. 7.647 New to the web platform in June In June 2023 Firefox 114 became stable, so it's a single browser issue this month. Check out the beta brows... 1 天前
    648. 7.648 New to the web platform in July In July, Firefox 103 and Safari 15.6 became stable, and with this we get interoperability on a couple of ni... 1 天前
    649. 7.649 New to the web platform in July In July 2023 Firefox 115 and Chrome 115 became stable. This post takes a look at what that means for the we... 1 天前
    650. 7.650 New to the web platform in August In August, Firefox 104, Chrome 104, and Chrome 105 became stable. Individual transforms Chrome 104 includes... 1 天前
    651. 7.651 New to the web platform in August In August 2023 Firefox 116, Firefox 117, Safari 16.6, and Chrome 116 became stable. This post takes a look ... 1 天前
    652. 7.652 New to the web platform in September In September, Firefox 105, Chrome 106, and Safari 16 became stable. This means that the September post is f... 1 天前
    653. 7.653 New to the web platform in September In September 2023 Firefox 118, Safari 17, and Chrome 117 became stable. This post takes a look at what that... 1 天前
    654. 7.654 New to the web platform in October In October, Firefox 106, Chrome 107, and Safari 16.1 became stable. Let's take a look at what this means fo... 1 天前
    655. 7.655 New to the web platform in November In November, Firefox 107, and Chrome 108 became stable. Let's take a look at what this means for the web pl... 1 天前
    656. 7.656 New to the web platform in December In December, Firefox 108, and Safari 16.2 became stable. Let's take a look at what this means for the web p... 1 天前
    657. 7.657 Integrate with the OS sharing UI with the Web Share API With the Web Share API, web apps are able to use the same system-provided share capabilities as platform-sp... 1 天前
    658. 7.658 Web storage overview It’s important to choose the right storage mechanisms, both for local device storage and for cloud based se... 1 天前
    659. 7.659 WebAPKs on Android Installing a PWA on Android does more than just add the Progressive Web App to the user's Home Screen. Chro... 1 天前
    660. 7.660 WebAssembly feature detection WebAssembly 1.0 was released four years ago, but development didn't stop there. New features are added thro... 1 天前
    661. 7.661 Debugging memory leaks in WebAssembly using Emscripten Squoosh.app is a PWA that illustrates just how much different image codecs and settings can improve image f... 1 天前
    662. 7.662 Using WebAssembly threads from C, C++ and Rust WebAssembly threads support is one of the most important performance additions to WebAssembly. It allows yo... 1 天前
    663. 7.663 Case Study - A Tale of an HTML5 Game with Web Audio {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9cFnKkN7rru58JS1RevH.png", alt="Fieldrunners screenshot", wi... 1 天前
    664. 7.664 Developing game audio with the Web Audio API Audio is a huge part of what makes multimedia experiences so compelling. If you've ever tried watching a mo... 1 天前
    665. 7.665 Getting started with Web Audio API Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. Wh... 1 天前
    666. 7.666 Mixing positional audio and WebGL In this article I’m going to talk about how to use the positional audio feature in the Web Audio API to add... 1 天前
    667. 7.667 Credential Management API Feature Detection Check-up WebAuthn helps increase security by bringing public-key credential based authentication to the Web, and is ... 1 天前
    668. 7.668 Web Components v1 - the next generation Ever wanted to build your own self-contained JavaScript component, that you can easily use across multiple ... 1 天前
    669. 7.669 HTML's New Template Tag The concept of templating is not new to web development. In fact, server-side templating languages/engines ... 1 天前
    670. 7.670 A simple TODO list using HTML5 WebDatabases {% Aside 'warning' %} On November 18, 2010, the W3C announced that Web SQL database is a deprecated specifi... 1 天前
    671. 7.671 Quick guide to webfonts via @font-face {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Mh7GSbU9speflpdFO00u.png", alt="Font Previewer", width="350"... 1 天前
    672. 7.672 WebGL Fundamentals WebGL makes it possible to display amazing realtime 3D graphics in your browser but what many people don't ... 1 天前
    673. 7.673 Making of the World Wonders 3D Globe If you've viewed the recently launched Google World Wonders site on a WebGL-capable browser, you might have... 1 天前
    674. 7.674 Writing augmented reality applications using JSARToolKit This article is about using the JSARToolKit library with the WebRTC getUserMedia API to do augmented realit... 1 天前
    675. 7.675 Animating a million letters using Three.js My goal in this article is to draw a million animated letters on the screen at a smooth frame rate. This ta... 1 天前
    676. 7.676 WebGL orthographic 3D This post is a continuation of a series of posts about WebGL. The first started with fundamentals and the p... 1 天前
    677. 7.677 An introduction to shaders I've previously given you an introduction to Three.js. If you've not read that you might want to as it's th... 1 天前
    678. 7.678 WebGL transforms Before we move on to 3D let's stick with 2D for a little while longer. Bear with me please. This article mi... 1 天前
    679. 7.679 Typed arrays - Binary data in the browser Typed Arrays are a relatively recent addition to browsers, born out of the need to have an efficient way to... 1 天前
    680. 7.680 Webpack Modern web applications often use a bundling tool to create a production "bundle" of files (scripts, styles... 1 天前
    681. 7.681 Webpack conclusion Summing up: Cut unnecessary bytes. Compress everything, strip unused code, be wise when adding dependencies... 1 天前
    682. 7.682 Get started with WebRTC {% Blockquote 'Brendan Eich, inventor of JavaScript' %} WebRTC is a new front in the long war for an open a... 1 天前
    683. 7.683 Send data between browsers with WebRTC data channels Sending data between two browsers for communication, gaming, or file transfer can be a rather involved proc... 1 天前
    684. 7.684 Build the backend services needed for a WebRTC app {% Aside %} WebRTC enables peer-to-peer communication, but it still needs servers so that clients can excha... 1 天前
    685. 7.685 WebRTC is now a W3C and IETF standard The process of defining a web standard is a lengthy process that ensures usefulness, consistency and compat... 1 天前
    686. 7.686 Building the main navigation for a website There are many different ways of building the main navigation of a website, in terms of styling, functional... 1 天前
    687. 7.687 Introducing WebSockets - Bringing Sockets to the Web The web has been largely built around the so-called request/response paradigm of HTTP. A client loads up a ... 1 天前
    688. 7.688 Wego There's a new way to deliver amazing user experiences on the web. Travel company Wego has built a successfu... 1 天前
    689. 7.689 Welcome to the immersive web The immersive web means virtual world experiences hosted through the browser. This covers entire virtual re... 1 天前
    690. 7.690 What's the CSS :scope pseudo-class for? :scope is defined in CSS Selectors 4 as: A pseudo-class which represents any element that is in the context... 1 天前
    691. 7.691 What's new in PageSpeed Insights Over the years, PageSpeed Insights (PSI) has evolved into a one-stop source for both field and lab data. It... 1 天前
    692. 7.692 When to use HTTPS for local development Also see: How to use HTTPS for local development. In this post, statements about localhost are valid for ... 1 天前
    693. 7.693 Why you need "cross-origin isolated" for powerful features In Making your website "cross-origin isolated" using COOP and COEP we explained how to adopt to "cross-orig... 1 天前
    694. 7.694 Customize the window controls overlay of your PWA's title bar If you remember my article Make your PWA feel more like an app, you may recall how I mentioned customizing ... 1 天前
    695. 7.695 Rendering Text in WebVR {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xE2bMbYkwAw5oXpuIN5k.jpg", alt="Within Detail", width="800",... 1 天前
    696. 7.696 How Wix improved website performance by evolving their infrastructure {% Aside %} Alon leads the core backend team at Wix. {% endAside %} Thanks to leveraging industry standards... 1 天前
    697. 7.697 Case Study - Converting Wordico from Flash to HTML5 When we converted our Wordico crossword game from Flash to HTML5, our first task was to unlearn everything ... 1 天前
    698. 7.698 Build in-browser WordPress experiences with WordPress Playground and WebAssembly When you first see WordPress Playground, it seems like an ordinary site–maybe except for the colorful backg... 1 天前
    699. 7.699 Integrate PWAs into built-in sharing UIs with Workbox The Web Share Target API lets you display your Progressive Web App in a user's system-level share sheet aft... 1 天前
    700. 7.700 The Basics of Web Workers There are a number of bottlenecks preventing interesting applications from being ported (say, from server-h... 1 天前
    701. 7.701 Case Study - Inside World Wide Maze World Wide Maze is a game in which you use your smartphone to navigate a rolling ball through 3D mazes crea... 1 天前
    702. 7.702 New tricks in XMLHttpRequest2 One of the unsung heros in the HTML5 universe is XMLHttpRequest. Strictly speaking XHR2 isn't HTML5. Howev... 1 天前
    703. 7.703 Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x Yahoo! JAPAN is one of the largest media companies in Japan, providing services such as search, news, e-com... 1 天前
    704. 7.704 How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15% Yahoo! JAPAN is one of the largest media companies in Japan, providing over 79 billion page views per month... 1 天前
    705. 7.705 How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile {% Blockquote 'web.dev article on bfcache ' %} Back/forward cache (or bfcache) is a browser optimization th... 1 天前
    706. 7.706 Building web apps with Yeoman and Polymer Allo’ Allo’. Anyone writing a web app knows how important it is to keep oneself productive. It's a challeng... 1 天前
    707. 7.707 How YouTube improved video performance with the Media Capabilities API In an experiment with the Media Capabilities API, YouTube saw a 7.1% increase in MTBR with only a 0.4% decr... 1 天前
    708. 7.708 How Zalando reduced performance feedback time from 1 day to 15 minutes with Lighthouse CI {% Aside %} This case study was authored by Jeremy Colin and Jan Brockmeyer from the Zalando web infrastruc... 1 天前
    709. 7.709 How ZDF created a video PWA with offline and dark mode When broadcaster ZDF was considering redesigning their frontend technology stack, they decided to take a cl... 1 天前
  9. 第 8 章 Community Guidelines 1 页
    1. 8.1 Google Community Guidelines and Anti-Harassment Policy for In-Person and Virtual Events Google is dedicated to providing a harassment-free and inclusive event experience for everyone regardless o... 1 天前
  10. 第 9 章 Design System 2 页
    1. 9.1 CSS Utilities Does what it says on the tin. It center-aligns text with text-align and uses margin-inline: auto to center... 1 天前
    2. 9.2 Welcome to the web.dev design system For developers For authors About the CSS {% Aside %} This design system will help you to maintain consisten... 1 天前
  11. 第 10 章 Developer Satisfaction 1 页
    1. 10.1 Web Developer Satisfaction Web Developer Satisfaction, shortened DevSAT, is a Google project to gather information about the needs of ... 1 天前
  12. 第 11 章 Devices 1 页
    1. 11.1 index layout: collection override:tags: [] date: 2020-10-15 pathName: devices 1 天前
  13. 第 12 章 Discoverable 4 页
    1. 12.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: discoverable 1 天前
    2. 12.2 Fix sneaky 404s Single Page Apps can show different content without loading a new page. To do so, they use click handlers o... 1 天前
    3. 12.3 How search works Search engines are the digital version of a librarian. They use a comprehensive index to help find the righ... 1 天前
    4. 12.4 How to measure search engine optimization with Lighthouse The Lighthouse search engine optimization (SEO) audit scans your page, tests for things that matter to sear... 1 天前
  14. 第 13 章 Explore 0 页
  15. 第 14 章 Fast 82 页
    1. 14.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: fast 1 天前
    2. 14.2 Adaptive serving based on network quality Loading a website can be a very different experience depending on the network conditions. Everything is usu... 1 天前
    3. 14.3 Apply instant loading with the PRPL pattern PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster: Pre... 1 天前
    4. 14.4 Avoid invisible text during font loading Fonts are often large files that take awhile to load. To deal with this, some browsers hide text until the ... 1 天前
    5. 14.5 Browser-level image lazy loading for the web Browser-level support for lazy loading images is now supported on the web! This video shows a demo of the f... 1 天前
    6. 14.6 Choose the right image format The very first question you should ask yourself is whether an image is, in fact, required to achieve the ef... 1 天前
    7. 14.7 Using the Chrome UX Report to look at performance in the field The Chrome UX Report (informally known as CrUX) is a public dataset of real user experience data on million... 1 天前
    8. 14.8 Adapt video to image serving based on network quality {% include 'content/devtools-headsup.njk' %} In this codelab, you'll learn how to adapt your content based ... 1 天前
    9. 14.9 Art direction {% Instruction 'preview' %} Reload the app using different browser sizes. Notice how different the images a... 1 天前
    10. 14.10 Avoid flash of invisible text This code lab shows you how to display text immediately using Font Face Observer. Add Font Face Observer Fo... 1 天前
    11. 14.11 Reduce JavaScript payloads with code splitting {% include 'content/devtools-headsup.njk' %} Most web pages and applications are made up of many different ... 1 天前
    12. 14.12 Use density descriptors {% Instruction 'preview' %} Reload the page using different devices to see the browser load different image... 1 天前
    13. 14.13 Extract and inline critical CSS with Critical {% include 'content/devtools-headsup.njk' %} Whether you use a UI library or handcraft your styles, shippin... 1 天前
    14. 14.14 Using Imagemin with Grunt This Glitch already contains grunt, grunt-cli, and the grunt-contrib-imagemin plugin. To add the configu... 1 天前
    15. 14.15 Using Imagemin with Gulp This Glitch already contains gulp, gulp-cli, and the gulp-imagemin plugin. To add the configuration for ... 1 天前
    16. 14.16 Using Imagemin with webpack This Glitch already contains webpack, webpack-cli, and imagemin-webpack-plugin. To add the configuration ... 1 天前
    17. 14.17 Optimize third-party JavaScript {% include 'content/devtools-headsup.njk' %} Third-party scripts impact performance, which is why it's impo... 1 天前
    18. 14.18 Codelab: Preload critical assets to improve loading speed {% include 'content/devtools-headsup.njk' %} In this codelab, the performance of the following web page is ... 1 天前
    19. 14.19 Preload web fonts to improve loading speed {% include 'content/devtools-headsup.njk' %} This codelab shows you how to preload web fonts using rel="pr... 1 天前
    20. 14.20 Remove unused code {% include 'content/devtools-headsup.njk' %} In this codelab, improve the performance of the following appl... 1 天前
    21. 14.21 Replace GIFs with video {% include 'content/devtools-headsup.njk' %} In this codelab, improve performance by replacing an animated ... 1 天前
    22. 14.22 Serve images with correct dimensions This Glitch is small enough that its images could be inspected by hand. However for most websites, using a ... 1 天前
    23. 14.23 Creating WebP Images with the Command Line The webp command line tool has already been installed for you, so you're all set to get started. This tool ... 1 天前
    24. 14.24 Serve modern code to modern browsers for faster page loads {% include 'content/devtools-headsup.njk' %} In this codelab, improve the performance of this simple applic... 1 天前
    25. 14.25 Setting performance budgets with webpack Webpack combines all your imported files and packages them into one or more output files known as bundles. ... 1 天前
    26. 14.26 Specifying multiple slot widths {% Instruction 'preview' %} Reload the app in differently sized browser windows to see the browser load dif... 1 天前
    27. 14.27 Minify and compress network payloads with gzip {% include 'content/devtools-headsup.njk' %} This codelab explores how both minifying and compressing the J... 1 天前
    28. 14.28 Minify and compress network payloads with brotli {% include 'content/devtools-headsup.njk' %} This codelab is an extension of the Minify and compress networ... 1 天前
    29. 14.29 Two ways to prefetch: `<link>` tags and HTTP headers {% include 'content/devtools-headsup.njk' %} In this codelab, you'll implement prefetching in two ways: wit... 1 天前
    30. 14.30 Lazy load offscreen images with lazysizes Lazy loading is the approach of waiting to load resources until they are needed, rather than loading them i... 1 天前
    31. 14.31 Choose the correct level of compression Images often account for most of the downloaded bytes on a web page and also often occupy a significant amo... 1 天前
    32. 14.32 Content delivery networks (CDNs) Content delivery networks (CDNs) improve site performance by using a distributed network of servers to deli... 1 天前
    33. 14.33 Best practices for cookie notices This article discusses how cookie notices can affect performance, performance measurement, and user experie... 1 天前
    34. 14.34 Debug layout shifts The first part of this article discusses tooling for debugging layout shifts, while the second part discuss... 1 天前
    35. 14.35 Defer non-critical CSS CSS files are render-blocking resources: they must be loaded and processed before the browser renders the p... 1 天前
    36. 14.36 Efficiently load third-party JavaScript If a third-party script is slowing down your page load, you have two options to improve performance: Remove... 1 天前
    37. 14.37 Extract critical CSS The browser must download and parse CSS files before it can show the page, which makes CSS a render-blockin... 1 天前
    38. 14.38 Optimizing resource loading with the Fetch Priority API {% BrowserCompat 'api.HTMLImageElement.fetchPriority' %} {% Aside %} This feature was originally called Pri... 1 天前
    39. 14.39 Fixing website speed cross-functionally One common myth connected to site speed is that it's only the development team's responsibility. The realit... 1 天前
    40. 14.40 Best practices for fonts This article discusses performance best practices for fonts. There are a variety of ways in which web fonts... 1 天前
    41. 14.41 How can performance improve conversion? In our other e-commerce guides you have learned about what you should measure to improve performance, and h... 1 天前
    42. 14.42 How to measure speed? Real-world performance is highly variable due to differences in users' devices, network connections, and ot... 1 天前
    43. 14.43 How to report metrics and build a performance culture Website performance is a key goal towards e-commerce conversions, so it must be a core priority for busines... 1 天前
    44. 14.44 How to stay fast? Brands that optimize speed will often find they regress quickly. This is because website performance is a l... 1 天前
    45. 14.45 Identify slow third-party JavaScript As a developer, you often don't have control over which third-party scripts your site loads. Before you can... 1 天前
    46. 14.46 Use image CDNs to optimize images Image content delivery networks (CDNs) are excellent at optimizing images. Switching to an image CDN can yi... 1 天前
    47. 14.47 Incorporate performance budgets into your build process Once you've defined a performance budget, it's time to set up the build process to keep track of it. There ... 1 天前
    48. 14.48 Use lazy loading to improve loading speed The portion of images and video in the typical payload of a website can be significant. Unfortunately, proj... 1 天前
    49. 14.49 Lazy loading best practices While lazy loading images and video have positive and measurable performance benefits, it's not a task to b... 1 天前
    50. 14.50 Lazy loading images Images can appear on a webpage due to being inline in the HTML as <img> elements or as CSS background imag... 1 天前
    51. 14.51 Lazy loading video As with image elements, you can also lazy-load video. Videos are commonly loaded with the <video> element ... 1 天前
    52. 14.52 Minify CSS CSS files can contain unnecessary characters, such as comments, whitespaces, and indentation. In production... 1 天前
    53. 14.53 Assessing loading performance in the field with Navigation Timing and Resource Timing If you've used connection throttling in the network panel in a browser's developer tools (or Lighthouse in ... 1 天前
    54. 14.54 Optimize CSS background images with media queries Many sites request heavy resources, like images, that are not optimized for certain screens, and send large... 1 天前
    55. 14.55 Optimize WebFont loading and rendering A "full" WebFont that includes all stylistic variants, which you may not need, plus all the glyphs, which m... 1 天前
    56. 14.56 Performance budgets 101 Performance is an important part of the user experience and it affects business metrics. It's tempting to t... 1 天前
    57. 14.57 Preload critical assets to improve loading speed When you open a web page, the browser requests the HTML document from a server, parses its contents, and su... 1 天前
    58. 14.58 Prioritize resources Not every byte that is sent down the wire to the browser has the same degree of importance, and the browser... 1 天前
    59. 14.59 Publish, ship, and install modern JavaScript for faster applications Over 90% of browsers are capable of running modern JavaScript, but the prevalence of legacy JavaScript rema... 1 天前
    60. 14.60 Measure performance with the RAIL model RAIL is a user-centric performance model that provides a structure for thinking about performance. The mode... 1 天前
    61. 14.61 Reduce JavaScript payloads with code splitting Nobody likes waiting. Over 50% of users abandon a website if it takes longer than 3 seconds to load. Sendin... 1 天前
    62. 14.62 Reduce JavaScript payloads with tree shaking Today's web applications can get pretty big, especially the JavaScript part of them. As of mid-2018, HTTP A... 1 天前
    63. 14.63 Minify and compress network payloads There are two useful techniques that can be used to improve the performance of your web page: Minification ... 1 天前
    64. 14.64 Reduce web font size Typography is fundamental to good design, branding, readability, and accessibility. Web fonts enable all of... 1 天前
    65. 14.65 Remove unused code Registries like npm have transformed the JavaScript world for the better by allowing anyone to easily downl... 1 天前
    66. 14.66 Replace animated GIFs with video for faster page loads Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only ... 1 天前
    67. 14.67 Use WebP images WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction... 1 天前
    68. 14.68 Serve images with correct dimensions We've all been there: you forgot to scale down an image before adding it to the page. The image looks fine,... 1 天前
    69. 14.69 Serve modern code to modern browsers for faster page loads Building websites that work well on all major browsers is a core tenet of an open web ecosystem. However, t... 1 天前
    70. 14.70 Serve responsive images Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-f... 1 天前
    71. 14.71 Signed Exchanges (SXGs) Signed exchanges (SXG) are a delivery mechanism that makes it possible to authenticate the origin of a reso... 1 天前
    72. 14.72 How to set up Signed Exchanges using Web Packager A signed exchange (SXG) is a delivery mechanism that makes it possible to authenticate the origin of a reso... 1 天前
    73. 14.73 Third-party JavaScript performance Third-party JavaScript generally refers to scripts embedded in your website that are: Not authored by you S... 1 天前
    74. 14.74 Use Imagemin to compress images Uncompressed images bloat your pages with unnecessary bytes. Because images can be candidates for Largest C... 1 天前
    75. 14.75 Use Lighthouse for performance budgets Lighthouse now supports performance budgets. This feature, known as LightWallet, can be set up in under fiv... 1 天前
    76. 14.76 Using bundlesize with Travis CI Using bundlesize with Travis CI lets you define performance budgets with minimal setup and enforce them as ... 1 天前
    77. 14.77 Using Lighthouse Bot to set a performance budget You've done hard work to get fast, now make sure you stay fast by automating performance testing with Light... 1 天前
    78. 14.78 The value of speed After a lot of hard work, you've done it. You've made your company's site noticeably faster. Now it's time ... 1 天前
    79. 14.79 What is speed? So, speed matters, but what exactly do we mean by it? What does it mean to have a fast site? It's common to... 1 天前
    80. 14.80 What should you measure to improve performance? The different steps of a purchase funnel are prone to performance issues in different ways, and therefore n... 1 天前
    81. 14.81 Why does speed matter? Consumers increasingly rely on mobile to access digital content and services, and if you look at your site ... 1 天前
    82. 14.82 Your first performance budget When you set a personal, business or family budget, you are setting a limit to your spending and making sur... 1 天前
  16. 第 15 章 Handbook 39 页
    1. 15.1 Adding a course Create a new directory in src/site/content/en/learn/. The name of this directory will be your projectKey ... 1 天前
    2. 15.2 Audience When you're writing for web.dev, it's important to consider the persona or personas you're writing for. Kee... 1 天前
    3. 15.3 Authors profile Add a new object to authors.yml with the following structure. Make sure to choose a unique author slug. au... 1 天前
    4. 15.4 Banners This guide explains how to add a banner to the site. Add a site-wide banner In src/site/_date/site.js, loo... 1 天前
    5. 15.5 Case study guidelines The goal of this guide is to help you write effective case studies. web.dev's goal for case studies {: #goa... 1 天前
    6. 15.6 web.dev content review checklists This page contains the official checklists that all web.dev editors are expected to use when reviewing new ... 1 天前
    7. 15.7 Content types Format: Multi-step instructions paired with an embedded sample app Typical use case: Showing how to do smal... 1 天前
    8. 15.8 Example codelab The codelab layout supports the full range of markdown elements/blocks as demonstrated in the example post.... 1 天前
    9. 15.9 Example course The courses layout supports the full range of markdown elements/blocks as demonstrated in the example post.... 1 天前
    10. 15.10 Example Section The courses layout supports the full range of markdown elements/blocks as demonstrated in the example post. 1 天前
    11. 15.11 Example Section - 2 The courses layout supports the full range of markdown elements/blocks as demonstrated in the example post. 1 天前
    12. 15.12 Sample pattern The pattern layout supports the full range of markdown elements/blocks as demonstrated in the example post.... 1 天前
    13. 15.13 Sample pattern-set template Content added to the pattern-set template will render beneath the TOC and above the list of patterns. Lorem... 1 天前
    14. 15.14 An example blog post used for screenshot testing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspend... 1 天前
    15. 15.15 Write effective instruction Most web.dev content includes at least some instruction. These guidelines help make your instruction easy t... 1 天前
    16. 15.16 Grammar, mechanics, and usage Grammar and mechanics are important for making writing clear, but don't let them get in the way of putting ... 1 天前
    17. 15.17 Inclusion and accessibility web.dev has a diverse, international audience. We want all members of that audience to be able to access an... 1 天前
    18. 15.18 Homepage and collection cards The homepage themes section, and at the bottom of an collection page (linked from /explore) can take a grid... 1 天前
    19. 15.19 Code This post is about how to get sample code to look right in your piece and follow site conventions. For guid... 1 天前
    20. 15.20 Images and video Dimensions Hero images should be 3200px wide by 960px tall. Thumbnail images should be 376px wide by 240px ... 1 天前
    21. 15.21 Posts and codelabs This post is about how to set up a new post or codelab so it works correctly on web.dev. For guidelines abo... 1 天前
    22. 15.22 Sample apps This post is about how to get sample apps to work right in your post and follow site conventions. For guida... 1 天前
    23. 15.23 Policies An author should only be added to a page when that person significantly updates the existing content or con... 1 天前
    24. 15.24 Pull request guidelines This guide is intended for the web.dev teammates who review and merge content pull requests (PRs). These gu... 1 天前
    25. 15.25 Content quality guidelines Read this page to learn the guiding principles of content quality on web.dev. The top-level sections of thi... 1 天前
    26. 15.26 Quick start guide Content creation for web.dev and developer.chrome.com has four phases: planning, writing, reviewing, and pu... 1 天前
    27. 15.27 Redirects This guide explains how to redirect content. Redirect a single page Open redirects.yaml. Add an entry simi... 1 天前
    28. 15.28 Resolving Glitch issues web.dev uses Glitch to embed web-based sample apps and development environments in its posts and codelabs. ... 1 天前
    29. 15.29 Content review guidelines This guide is intended for web.dev content authors and reviewers. The purpose of this guide is to help auth... 1 天前
    30. 15.30 Self-assessments Self-assessments provide opportunities for users to check their understanding of concepts covered in your p... 1 天前
    31. 15.31 Third-party contributors First, thanks for contributing to web.dev! We really appreciate your help in making this community better. ... 1 天前
    32. 15.32 Tooling and libraries Choosing tooling and libraries can be one of the most overwhelming and time consuming aspects of web develo... 1 天前
    33. 15.33 Use images and video effectively This post is about how to use images and video to support your writing goals. If you're looking for technic... 1 天前
    34. 15.34 Voice The voice of web.dev is: Knowledgeable. We have deep expertise in the topics we discuss. We offer clear rat... 1 天前
    35. 15.35 web.dev components The web.dev platform includes various components to make it easy for content contributors to include common... 1 天前
    36. 15.36 Word list This word list tells you how to spell, punctuate, and capitalize common words in web.dev content. This word... 1 天前
    37. 15.37 Write useful code samples This post is about how to use code blocks and sample apps to support your writing goals. If you're looking ... 1 天前
    38. 15.38 How to write blog posts for web.dev and developer.chrome.com This guide is written for people who are not primarily tech writers, but want to write a post for web.dev o... 1 天前
    39. 15.39 YAML front matter --- … alt: An old-fashioned storage container. … The alt text for the hero image. Required if the hero YAM... 1 天前
  17. 第 16 章 How To Optimize Inp 7 页
    1. 16.1 index layout: collection override:tags: [] date: 2023-05-09 pathName: how-to-optimize-inp 1 天前
    2. 16.2 Client-side rendering of HTML and interactivity Parsing and rendering of HTML is something that browsers do very well by default for websites that use the ... 1 天前
    3. 16.3 Diagnose slow interactions in the lab One challenging aspect of optimizing Interaction to Next Paint (INP) is figuring out what's causing poor IN... 1 天前
    4. 16.4 How large DOM sizes affect interactivity, and what you can do about it There's no way around it: when you build a web page, that page is going to have a Document Object Model (DO... 1 天前
    5. 16.5 Find slow interactions in the field Field data is the authoritative source when it comes to how actual users are experiencing your website. It ... 1 天前
    6. 16.6 Optimize input delay Interactions on the web are complicated things, with all sorts of activity occurring in the browser to driv... 1 天前
    7. 16.7 Script evaluation and long tasks When it comes to optimizing Interaction to Next Paint (INP), most of the advice you'll encounter is to opti... 1 天前
  18. 第 17 章 Identity 8 页
    1. 17.1 index layout: collection override:tags: [] date: 2021-09-30 pathName: identity 1 天前
    2. 17.2 Help users change passwords easily by adding a well-known URL for changing passwords Set a redirect from /.well-known/change-password to the change password page of your website. This will en... 1 天前
    3. 17.3 Sign in with a passkey through form autofill Passkeys replace passwords and make user accounts on the web safer, simpler, easier to use. However, the tr... 1 天前
    4. 17.4 Designing the user experience of passkeys on Google accounts Passkeys are a simple and secure cross-device authentication technology that enables creating online accoun... 1 天前
    5. 17.5 Create a passkey for passwordless logins Using passkeys instead of passwords is a great way for websites to make their user accounts safer, simpler,... 1 天前
    6. 17.6 Sign-in form best practices {% YouTube 'alGcULGtiv8' %} If users ever need to log in to your site, then good sign-in form design is cri... 1 天前
    7. 17.7 Sign-up form best practices {% YouTube 'Ev2mCzJZLtY' %} If users ever need to log in to your site, then good sign-up form design is cri... 1 天前
    8. 17.8 SMS OTP form best practices {% YouTube 'sU4MpWYrGSI' %} Asking a user to provide the OTP (one time password) delivered via SMS is a com... 1 天前
  19. 第 18 章 Learn 162 页
    1. 18.1 Learn Accessibility Digital accessibility, commonly abbreviated a11y, is about designing and building websites and web apps tha... 1 天前
    2. 18.2 ARIA and HTML Most developers are familiar with the standard markup language of our modern web, HyperText Markup Language... 1 天前
    3. 18.3 Color and contrast Have you ever tried to read text on a screen and found it difficult to read due to the color scheme or stru... 1 天前
    4. 18.4 Conclusion and next steps Congratulations, you've made it through Learn Accessibility! At this point, you've learned a lot of best pr... 1 天前
    5. 18.5 Design and user experience Think about your favorite website or app—what makes it your favorite? Now, think about a website or app you... 1 天前
    6. 18.6 Keyboard focus Many people use a keyboard—or other software/hardware that mimics the functionality of a keyboard, such as ... 1 天前
    7. 18.7 Forms A form is an element that allows a user to provide data into a field or a group of fields. Forms can be as ... 1 天前
    8. 18.8 Glossary In this document, you'll find common terms and concepts related to accessibility. A11y A11y is numeronym fo... 1 天前
    9. 18.9 Images Accessible images may seem like a simple topic at first glance—you add some "alt text" to an image, and you... 1 天前
    10. 18.10 JavaScript JavaScript plays a major role in almost everything we create—from smaller dynamic components to full produc... 1 天前
    11. 18.11 How is digital accessibility measured? Digital accessibility means designing and building your digital offerings so that, regardless of a person's... 1 天前
    12. 18.12 The Document Along with structure, there are many supporting HTML elements to consider when building and designing for d... 1 天前
    13. 18.13 Animation and motion Have you ever been riding in a car, boat, or plane and suddenly felt the world spin? Or had a migraine so b... 1 天前
    14. 18.14 Patterns, components, and design systems Many people use component-driven development using pattern style guides, component libraries, or full desig... 1 天前
    15. 18.15 Content structure One of the most important aspects of digital accessibility is the underlying structure of the page. When yo... 1 天前
    16. 18.16 Assistive Technology testing {% Aside %} This module is a continuation of the previous two testing modules, automated accessibility test... 1 天前
    17. 18.17 Automated accessibility testing So far in this course, you have learned about the individual, business, and legal aspects of digital access... 1 天前
    18. 18.18 Manual accessibility testing {% Aside %} This module on manual accessibility testing is a continuation of the previous module, automated... 1 天前
    19. 18.19 Typography Creating and designing accessible content is more than just choosing an easy-to-read font. Even with access... 1 天前
    20. 18.20 Video and audio Have you ever wanted to watch a live event but couldn't find your headphones, so you turned on the captions... 1 天前
    21. 18.21 What is digital accessibility, and why does it matter? Imagine a world where you couldn't buy a present for a friend because the online shopping cart was incompat... 1 天前
    22. 18.22 Learn CSS This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next f... 1 天前
    23. 18.23 Animations Sometimes you see little helpers on interfaces that when clicked, provide some helpful information about th... 1 天前
    24. 18.24 Backgrounds Behind every CSS box is a specialized layer called the background layer. CSS provides a variety of ways to ... 1 天前
    25. 18.25 Blend Modes Duotone is a popular color treatment for photography which makes an image look like it is only made up of t... 1 天前
    26. 18.26 Borders In the box model module, we considered a frame analogy to describe each section of the box model. {% Img sr... 1 天前
    27. 18.27 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 t... 1 天前
    28. 18.28 Color Color is an important part of any website and in CSS there are many options for color types, functions and ... 1 天前
    29. 18.29 Conclusion and next steps Congratulations! You've made it to the end! By now, you have learned a lot about CSS, and hopefully you fee... 1 天前
    30. 18.30 Filters Say you need to build an element that's got a slightly opaque, frosted glass effect that sits over the top ... 1 天前
    31. 18.31 Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. W... 1 天前
    32. 18.32 Focus On your webpage, you click a link that skips the user to the main content of the website. These are often r... 1 天前
    33. 18.33 Functions So far in this course, you've been exposed to several CSS functions. In the grid module, you were introduce... 1 天前
    34. 18.34 Gradients Imagine you've got a site to build and at the top, there's an intro with a heading, summary and a button. T... 1 天前
    35. 18.35 Grid A really common layout in web design is a header, sidebar, body and footer layout. {% Img src="image/VbAJIR... 1 天前
    36. 18.36 Inheritance Say you just wrote some CSS to make elements look like a button. <a href="http://example.com" class="my-but... 1 天前
    37. 18.37 Layout Imagine you're working as a developer, and a designer colleague hands you a design for a brand new website.... 1 天前
    38. 18.38 Lists Imagine you have a bunch of items you plan to buy during your next grocery trip. One common way to represen... 1 天前
    39. 18.39 Logical Properties A really common user interface pattern is a text label with a supporting inline icon. {% Codepen { user: ... 1 天前
    40. 18.40 Overflow When content extends beyond its parent, there are many options for how you can handle it. You can scroll to... 1 天前
    41. 18.41 Pseudo-classes Say you've got an email sign up form, and you want the email form field to have a red border if it contains... 1 天前
    42. 18.42 Pseudo-elements If you've got an article of content and you want the first letter to be a much bigger drop cap— how do you ... 1 天前
    43. 18.43 Selectors If you've got some text that you only want to be larger and red if it's the first paragraph of an article, ... 1 天前
    44. 18.44 Shadows Say you've been sent a design to build and in that design there's a picture of a t-shirt, cut out, with a d... 1 天前
    45. 18.45 Sizing Units The web is a responsive medium, but sometimes you want to control its dimensions to improve the overall int... 1 天前
    46. 18.46 Spacing Say you've got a collection of three boxes, stacked on top of each other and you want space between them. H... 1 天前
    47. 18.47 Specificity Suppose that you're working with the following HTML and CSS: <button class="branding">Hello, Specificity!</... 1 天前
    48. 18.48 The cascade CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS... 1 天前
    49. 18.49 Transitions When interacting with a website, you might notice that many elements have state. For example, dropdowns can... 1 天前
    50. 18.50 Text and typography Text is one of the core building blocks of the web. When making a website, you don’t necessarily need to st... 1 天前
    51. 18.51 Z-index and stacking contexts Say you've got a couple of elements that are absolutely positioned, and are supposed to be positioned on to... 1 天前
    52. 18.52 Learn Responsive Design This course takes you on a journey through the many facets of modern responsive web design. The first few m... 1 天前
    53. 18.53 Accessibility Allowing your pages to respond to different screen sizes is just one way of making sure your website is acc... 1 天前
    54. 18.54 Conclusion and next steps Congratulations! You've made it to the end! We hope that you have enjoyed this overview of responsive desig... 1 天前
    55. 18.55 Icons Most images are part of your content, but icons are part of your user interface. They should scale and adap... 1 天前
    56. 18.56 Interaction Small screen devices like mobile phones often have touchscreens. Large screen devices like laptops and desk... 1 天前
    57. 18.57 Internationalization The World Wide Web is available to everyone in the world—it's right there in the name! That means that your... 1 天前
    58. 18.58 Introduction Right from the start, the World Wide Web was designed to be agnostic. It doesn't matter what hardware you'v... 1 天前
    59. 18.59 Macro layouts Macro layouts describe the larger, page-wide organization of your interface. {% Img src="image/HodOHWjMnbNw... 1 天前
    60. 18.60 Media features Responsive design wouldn't be possible without media queries. Before media queries there was no way of know... 1 天前
    61. 18.61 Media queries Designers can adjust their designs to accommodate users. The clearest example of this is the form factor of... 1 天前
    62. 18.62 Micro layouts When we think of layouts, we often think of page-level designs. But smaller components within the page can ... 1 天前
    63. 18.63 The picture element The previous module demonstrated how the srcset attribute allows you to provide different-sized versions o... 1 天前
    64. 18.64 Responsive images Text on the web automatically wraps at the edge of the screen so that it doesn't overflow. It's different w... 1 天前
    65. 18.65 Screen configurations Responsive web design was in many ways a reaction to mobile phones. Before smartphones appeared, very few p... 1 天前
    66. 18.66 Theming Even branding can be responsive. You can adjust the presentation of your website to match the user's prefer... 1 天前
    67. 18.67 Typography If you don't specify any styles for your text, browsers will apply their own default styles. These are call... 1 天前
    68. 18.68 User interface patterns A design viewed on a small screen shouldn't look like a shrunk-down version of a large-screen layout. Likew... 1 天前
    69. 18.69 Learn Forms This course breaks down HTML forms into easy to understand pieces. Over the next few modules, you'll learn ... 1 天前
    70. 18.70 Accessibility The form you build is for people. People use different devices. Some use a mouse, some a touch device, some... 1 天前
    71. 18.71 Address forms Filling in an address can be time-consuming and frustrating. What is an Address line 2? You may not have a ... 1 天前
    72. 18.72 Form attributes in depth HTML element attributes can enhance your <form> and form controls. Help users fill in form controls To mak... 1 天前
    73. 18.73 Help users avoid re-entering data in forms After learning about the form element and how to make a form interactive, let's see how you can help users ... 1 天前
    74. 18.74 Autofill Having to re-enter your address for the tenth time is tiring. Browsers, and you, as a developer, can help u... 1 天前
    75. 18.75 Conclusion and next steps Congratulations! You've made it to the end. So far, you've learned a lot about forms, and hopefully you fee... 1 天前
    76. 18.76 Test forms across devices and platforms You can fill out a form in many ways. People might use your form on their smartphone while standing in a cr... 1 天前
    77. 18.77 Gathering data In this module, you learn how to define goals, analyze your forms, measure changes, and get notified about ... 1 天前
    78. 18.78 Design basics In the first section, you learned how to build a basic form. This section is all about best practices. In t... 1 天前
    79. 18.79 Form fields in depth To provide the best possible user experience, make sure to use the element and element type that's most ap... 1 天前
    80. 18.80 The form element in depth In a previous module, you learned how to use the <form> element. In this module, you learn how a form work... 1 天前
    81. 18.81 Use forms to get data from users Imagine you want to ask people on your website about their favorite animal. As a first step, you need a way... 1 天前
    82. 18.82 Help users enter data in forms To make a form interactive, you need to add form elements. There are controls to enter and select data, ele... 1 天前
    83. 18.83 Identity {% Aside 'warning' %} User account authentication is a complex issue in terms of privacy and security. To g... 1 天前
    84. 18.84 Internationalization and localization If you're reading this, you're using the World Wide Web. Your forms may be used by people speaking differen... 1 天前
    85. 18.85 JavaScript You can use JavaScript to respond to user interactions on your form, reveal additional form fields, submit ... 1 天前
    86. 18.86 Payment forms {% Aside %} This module is about payment forms and doesn't explain how to implement transactions on your si... 1 天前
    87. 18.87 Security and privacy When you create a form, you work with user data. Your number one concern should be to ensure that user data... 1 天前
    88. 18.88 Styling forms To ensure that your form is accessible to as many people as possible, use the elements built for the job: ... 1 天前
    89. 18.89 Styling form controls In this module you learn how to style form controls, and how to match your other site styles. {% Aside 'cau... 1 天前
    90. 18.90 Test your forms In previous modules, you learned how to build a form, help users avoid re-entering data, and how to validat... 1 天前
    91. 18.91 How to test forms for usability Usability testing is a technique to evaluate a device or product, such as a web form. By testing your form ... 1 天前
    92. 18.92 Help users enter the right data in forms Browsers have built-in features for validation to check that users have entered data in the correct format.... 1 天前
    93. 18.93 Learn HTML Welcome to HTML! HyperText Markup Language, or HTML, is the backbone of the web, providing the content, as... 1 天前
    94. 18.94 HTML APIs In the introduction to this series it says "HTML elements are the nodes that make up the Document Object Mo... 1 天前
    95. 18.95 Attributes Attributes were briefly discussed in Overview of HTML; it's time for a deep dive. Attributes are what make ... 1 天前
    96. 18.96 Audio and Video As you learned in the images module, HTML enables embedding media into a web page. In this section, we look... 1 天前
    97. 18.97 Conclusion and next steps If you have been following this course in order, you have made it to the end of Learn HTML! You've learned ... 1 天前
    98. 18.98 Details and summary A disclosure widget is a user interface control that hides and shows content. If you are reading this on we... 1 天前
    99. 18.99 Dialog A modal dialog is a special type of pop-up box on a web page: a pop-up that interrupts the user to focus on... 1 天前
    100. 18.100 Document structure HTML documents include a document type declaration and the <html> root element. Nested in the <html> elem... 1 天前
    101. 18.101 Focus Interactive elements, including form controls, links, and buttons, are by default focusable and tabbable. T... 1 天前
    102. 18.102 Forms Most sites and applications include a web form. Joke sites, like DoWebsites Need To Look Exactly The Same I... 1 天前
    103. 18.103 Headings and sections In the last section you learned how, even if you don't know what the words on a page mean, when semantic el... 1 天前
    104. 18.104 Images Decorative images, such as background gradients on buttons or background images on sections of content or t... 1 天前
    105. 18.105 Other inline text elements We've covered most, but definitely not all, the HTML elements. One area we haven't discussed is inline text... 1 天前
    106. 18.106 Links In the introduction to the attributes section, you saw an example showing how attributes are added to the o... 1 天前
    107. 18.107 Lists Lists are more common than you might think. If you've ever taken a programming class, the first project may... 1 天前
    108. 18.108 Metadata In the document structure section you learned about the components you (almost) always find in the <head> ... 1 天前
    109. 18.109 Navigation As you learned in links, the <a> element with the href attribute creates links that users can follow by c... 1 天前
    110. 18.110 Overview of HTML HyperText Markup Language, or HTML, is the standard markup language for describing the structure of documen... 1 天前
    111. 18.111 Semantic HTML With over 100 HTML elements, and the ability to create custom elements, there are infinite ways to mark up ... 1 天前
    112. 18.112 Tables HTML tables are used for displaying tabular data with rows and columns. The decision to use a <table> shou... 1 天前
    113. 18.113 Template, slot, and shadow The benefit of web components is their re-usability: you can create a UI widget once, and reuse it multiple... 1 天前
    114. 18.114 Text basics Similar to how your text editor provides <h1> to <h6> headings, along with a plethora of ways to format s... 1 天前
    115. 18.115 Learn Images This course is created for beginner and advanced web developers alike, covering everything from the basics ... 1 天前
    116. 18.116 Automating compression and encoding All of the syntaxes in this course—from the encoding of image data to the information-dense markup that pow... 1 天前
    117. 18.117 Image formats: AVIF AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec. AVIF is even newer—th... 1 天前
    118. 18.118 Image content delivery networks You may already be familiar with the core concept of a content delivery network (CDN): a network of distrib... 1 天前
    119. 18.119 Site Generators, frameworks, and CMSs While certainly an improvement over manually saving alternate cuts of each image and hand-optimizing them t... 1 天前
    120. 18.120 Conclusion Congratulations, you've made it to the end! By now you’ve learned a lot about how images work on the web, a... 1 天前
    121. 18.121 Descriptive syntaxes In this module, you'll learn how to give the browser a choice of images so that it can make the best decisi... 1 天前
    122. 18.122 Image formats: GIF While not terribly useful on the modern web, GIF (Graphics Interchange Format) provides a solid introductio... 1 天前
    123. 18.123 A brief history of images on the web No matter how far along you are in learning to design and develop for the web, the <img> element needs ver... 1 天前
    124. 18.124 Image formats: JPEG JPEG is the most common type of image used on the web, and with good reason: for decades, JPEG has almost i... 1 天前
    125. 18.125 Key performance issues As it stands now, images are the web's biggest assets in terms of both total transfer size and number of re... 1 天前
    126. 18.126 Image formats: PNG There are a few things that set PNG (Portable Network Graphics) apart from other formats, though as it was ... 1 天前
    127. 18.127 Prescriptive syntaxes The <picture> element doesn't render anything on its own, but instead acts as a decision engine for an inn... 1 天前
    128. 18.128 Raster images Raster images can be thought of as a set of pixel-by-pixel instructions for rendering a two-dimensional gri... 1 天前
    129. 18.129 Responsive images Responsive image markup can be divided into two scenarios: situations where the goal is the most efficient ... 1 天前
    130. 18.130 Vector images Vector graphics are a method of communicating a series of shapes, coordinates, and paths to their rendering... 1 天前
    131. 18.131 Image formats: WebP Google originally developed WebP as a lossy image format to supersede JPEG, one that was able to produce fi... 1 天前
    132. 18.132 Learn Privacy When you acquire a new user, you are granted their trust. It's your organization's responsibility to honor ... 1 天前
    133. 18.133 Best practices Over this whole course, certain themes have come up again and again. Protecting your users' privacy involve... 1 天前
    134. 18.134 Use just the data you need A good way to mitigate risk for users is to not hold sensitive data about them that you do not need that im... 1 天前
    135. 18.135 Encryption Encryption is often a topic for security, but it's important for privacy too. The goal of encryption is to ... 1 天前
    136. 18.136 Fingerprinting Fingerprinting means trying to identify a user when they return to your website, or identifying the same us... 1 天前
    137. 18.137 Third parties It's rather rare that a website is wholly self-contained. The HTTP Web Almanac shows that most websites—aro... 1 天前
    138. 18.138 Learn PWA Welcome to Learn Progressive Web Apps! This course covers the fundamentals of Progressive Web App developme... 1 天前
    139. 18.139 App design This chapter focuses on some critical aspects of rendering content outside of the browser tab. The window D... 1 天前
    140. 18.140 Architecture Designing your application to make the most out of the technology that makes PWAs reliable, installable, an... 1 天前
    141. 18.141 Assets and data Developing an application typically involves several assets and resources, from the logic and code (compile... 1 天前
    142. 18.142 Caching Cache storage is a powerful tool. It makes your apps less dependent on network conditions. With good use of... 1 天前
    143. 18.143 Capabilities Progressive Web Apps can do more than just rendering content on the screen or connecting to web services. P... 1 天前
    144. 18.144 Complexity management In his talk Simple Made Easy, Rich Hickey discusses the qualities of simple versus complex things. He descr... 1 天前
    145. 18.145 Conclusion Congratulations! You've made it to the end! We hope that you have enjoyed this course of Progressive Web Ap... 1 天前
    146. 18.146 Detection You can detect if the user is using your PWA in the browser or in standalone mode. On Chromium-based browse... 1 天前
    147. 18.147 Enhancements There are many enhancements that can improve the conversion and usage of your PWA. App shortcuts App shortc... 1 天前
    148. 18.148 Experimental features The web is a powerful platform, but there are still gaps in what it can solve. Those who want to develop fo... 1 天前
    149. 18.149 Foundations A solid foundation is the base requirement for building great PWAs. To implement this foundation you need t... 1 天前
    150. 18.150 Getting started Progressive Web Apps are still websites, with enhanced features and capabilities. They are not attached to ... 1 天前
    151. 18.151 Installation Once the user installs your PWA, it will: Have an icon in the launcher, home screen, start menu, or launchp... 1 天前
    152. 18.152 Installation prompt Users may not be familiar with the PWA install process. As the developer, you will understand when it is th... 1 天前
    153. 18.153 Offline data To build a solid offline experience, your PWA needs storage management. In the caching chapter you learned ... 1 天前
    154. 18.154 OS Integration Web apps have a big reach. They run on multiple platforms. They are easy to share via links. But traditiona... 1 天前
    155. 18.155 Progressive Web Apps A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more rel... 1 天前
    156. 18.156 Service workers Users expect apps to start on slow or flaky network connections, or even when offline. They expect the cont... 1 天前
    157. 18.157 Serving A key aspects of Progressive Web Apps is that they're reliable; they can load assets quickly, keeping users... 1 天前
    158. 18.158 Tools and debug All the tools available for web development are also helpful for progressive web app development, including... 1 天前
    159. 18.159 Update You have published your PWA: some users use it from the browser, others install it on their devices. When y... 1 天前
    160. 18.160 Web app manifest The web app manifest is a file you create that tells the browser how you want your web content to display a... 1 天前
    161. 18.161 Window management Running on your own window, managed by your PWA, has all the advantages and responsibilities of any window ... 1 天前
    162. 18.162 Workbox Maintaining your service worker and cache storage logic can be a challenge as your PWA grows. Workbox, is a... 1 天前
  20. 第 19 章 Learn Core Web Vitals 3 页
    1. 19.1 index layout: collection override:tags: [] date: 2020-09-16 pathName: learn-core-web-vitals 1 天前
    2. 19.2 Why is CrUX data different from my RUM data? The Chrome User Experience Report (CrUX) provides user experience metrics for how real-world Chrome users e... 1 天前
    3. 19.3 Why lab and field data can be different (and what to do about it) Google provides a number of tools to help site owners monitor their Core Web Vitals scores. These tools fal... 1 天前
  21. 第 20 章 Lighthouse Pwa 1 页
    1. 20.1 Add an Apple touch icon to your Progressive Web App {% include 'content/devtools-headsup.njk' %} Safari for iOS users can manually add Progressive Web Apps (PW... 1 天前
  22. 第 21 章 Media 17 页
    1. 21.1 index layout: collection override:tags: [] date: 2020-06-19 pathName: media 1 天前
    2. 21.2 Add media to a web page In this section you'll learn how to embed a media file in a web page using the <video> and <source> tags, ... 1 天前
    3. 21.3 Bitrate In the previous Containers and codecs article, you learned how to change the container (extension) and code... 1 天前
    4. 21.4 Containers and codecs To support multiple browsers, you'll need to use FFmpeg to convert your .mov file to two different contain... 1 天前
    5. 21.5 Debug media playback errors on the web Debugging HTML media elements, such as <video> and <audio>, can be hard as decoder implementations vary i... 1 天前
    6. 21.6 Media accessibility In this article you will learn about the WebVTT (Web Video Text Tracks) format, which is used to describe t... 1 天前
    7. 21.7 Media application basics Working with media often requires changing the characteristics of media files, such as bitrate or resolutio... 1 天前
    8. 21.8 Media conversion In this article we are going to learn some common commands for converting and manipulating specific charact... 1 天前
    9. 21.9 Media encryption In this section we are going to cover two different strategies for encrypting your media, and some practica... 1 天前
    10. 21.10 What is a media experience? Users like media, especially videos; they can be fun and informative. On mobile devices, videos can be an e... 1 天前
    11. 21.11 Media file basics In this article you will learn about media file basics such as the concepts of a container, and a few of th... 1 天前
    12. 21.12 Media frameworks There are several ways to add media to a web page. Previously you learned how to use the standard <video> ... 1 天前
    13. 21.13 Media streaming basics In this article, you are going to learn about the more advanced concept of media streaming and by the end s... 1 天前
    14. 21.14 Prepare media files for the web Now that we've introduced you to the applications we use when manipulating media files, over the next few p... 1 天前
    15. 21.15 PWA with offline streaming Progressive Web Apps bring a lot of features previously reserved for native applications to the web. One of... 1 天前
    16. 21.16 Resolution In the previous articles you learned how to change the containers, codecs, and bitrate of the glocken.mov m... 1 天前
    17. 21.17 The <video> and <source> tags You've properly prepared a video file for the web. You've given it correct dimensions and the correct resol... 1 天前
  23. 第 22 章 Metrics 11 页
    1. 22.1 index layout: collection override:tags: [] date: 2019-11-07 pathName: metrics 1 天前
    2. 22.2 Cumulative Layout Shift (CLS) {% BrowserCompat 'api.LayoutShift' %} {% Aside 'key-term' %} Cumulative Layout Shift (CLS) is a stable Core... 1 天前
    3. 22.3 Custom metrics There's a lot of value in having user-centric metrics that you can measure, universally, on any given websi... 1 天前
    4. 22.4 First Contentful Paint (FCP) {% BrowserCompat 'api.PerformancePaintTiming' %} {% Aside %} First Contentful Paint (FCP) is an important, ... 1 天前
    5. 22.5 First Input Delay (FID) {% BrowserCompat 'api.PerformanceEventTiming' %} {% Aside %} First Input Delay (FID) is the stable Core Web... 1 天前
    6. 22.6 Interaction to Next Paint (INP) {% BrowserCompat 'api.PerformanceEventTiming.interactionId' %} {% Aside %} Interaction to Next Paint (INP) ... 1 天前
    7. 22.7 Largest Contentful Paint (LCP) {% BrowserCompat 'api.LargestContentfulPaint' %} {% Aside %} Largest Contentful Paint (LCP) is an important... 1 天前
    8. 22.8 Total Blocking Time (TBT) {% Aside %} Total Blocking Time (TBT) is an important lab metric for measuring load responsiveness because ... 1 天前
    9. 22.9 Time to First Byte (TTFB) {% BrowserCompat 'api.PerformanceResourceTiming.responseStart' %} {% Aside %} Time to First Byte (TTFB) is ... 1 天前
    10. 22.10 Time to Interactive (TTI) {% Aside %} Time to Interactive (TTI) is an important lab metric for measuring load responsiveness. It help... 1 天前
    11. 22.11 User-centric performance metrics We've all heard how important performance is. But when we talk about performance—and about making websites ... 1 天前
  24. 第 23 章 Mini Apps 14 页
    1. 23.1 index layout: collection override:tags: [] date: 2021-03-03 updated: 2021-03-03 pathName: mini-apps 1 天前
    2. 23.2 What are mini apps? {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    3. 23.3 Other mini app runtime environments {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    4. 23.4 Mini app components {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    5. 23.5 Concluding thoughts about mini apps from a web developer {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    6. 23.6 Mini app DevTools {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    7. 23.7 Applying the mini app programming principles to an example project {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    8. 23.8 Mini app markup, styling, and scripting {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    9. 23.9 Mini app open source projects {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    10. 23.10 Programming the mini app way {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    11. 23.11 Project structure, lifecycle, and bundling {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    12. 23.12 Mini app standardization {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
    13. 23.13 Mini apps and super apps When you look at applications on your phone, you probably have specific apps for specific tasks. You might ... 1 天前
    14. 23.14 What are H5 and QuickApp? {% Aside %} This post is part of an article collection where each article builds upon previous articles. If... 1 天前
  25. 第 24 章 Notifications 5 页
    1. 24.1 index layout: collection pathName: notifications 1 天前
    2. 24.2 Get started with the Notifications API {# backup glitches: start end #} In this codelab, you'll use basic features of the Notifications API to: Re... 1 天前
    3. 24.3 Build a push notifications server In this codelab, you'll build a push notifications server. The server will manage a list of push subscripti... 1 天前
    4. 24.4 Use a Service Worker to manage notifications {# start end #} In this codelab, you'll use a service worker to manage notifications. The instructions here... 1 天前
    5. 24.5 Use push notifications to engage and re-engage users Notifications present small chunks of information to a user. Web apps can use notifications to tell users a... 1 天前
  26. 第 25 章 Patterns 114 页
    1. 25.1 Animation patterns Welcome to our growing collection of animation patterns. These patterns try to demonstrate how you can crea... 1 天前
    2. 25.2 Split Text - Animated Letters Create infinitely animated letter effects that respect user's motion preferences. Full article · Video on Y... 1 天前
    3. 25.3 Split Text - Animated Words Create infinitely animated word effects that respect user's motion preferences. Full article · Video on You... 1 天前
    4. 25.4 Split Text - Hover Letters Create interactive letter effects that respect user's motion preferences. Full article · Video on YouTube ·... 1 天前
    5. 25.5 Split Text - Hover Words Create interactive word effects that respect user's motion preferences. Full article · Video on YouTube · S... 1 天前
    6. 25.6 How to copy images Many modern browsers support copying images to the clipboard in the formats PNG and SVG. Other formats are ... 1 天前
    7. 25.7 How to copy text Cutting and pasting text is one of the most commonly used features of apps in general and desktop applicati... 1 天前
    8. 25.8 How to paste files Pasting files into the browser consists of using the paste event of the HTMLElement. Using the HTMLEleme... 1 天前
    9. 25.9 How to paste images Using the Async Clipboard API To read images from the user's clipboard programmatically, that is, after a b... 1 天前
    10. 25.10 How to paste text Using the Async Clipboard API To read text from the user's clipboard programmatically, for example, after a... 1 天前
    11. 25.11 Component patterns Welcome to our growing collection of component patterns. These can provide inspiration, accessibility requi... 1 天前
    12. 25.12 Breadcrumbs This pattern shows how to create a responsive and accessible breadcrumbs component for users to navigate yo... 1 天前
    13. 25.13 Buttons This pattern shows how to style the different buttons types of the web. Full article · Video on YouTube · S... 1 天前
    14. 25.14 Carousel This pattern shows how to create a color-adaptive, responsive, and accessible carousel component. {% Aside ... 1 天前
    15. 25.15 Dialog This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the ... 1 天前
    16. 25.16 Game Menu This pattern shows how to create a mouse and keyboard accessible 3D game menu. Full article · Video on YouT... 1 天前
    17. 25.17 Loading Bar This pattern shows how to build a color adaptive and accessible loading bar with the <progress> element. F... 1 天前
    18. 25.18 Media Scroller This pattern shows how to create horizontal scrolling experiences for the web that are minimal, responsive,... 1 天前
    19. 25.19 Multi-Select This pattern shows how to build a responsive, adaptive, and accessible, multiselect component for sort and ... 1 天前
    20. 25.20 Settings This pattern shows how to build a settings component that is responsive, supports multiple device inputs, a... 1 天前
    21. 25.21 Sidenav This pattern shows how to build a component for the web that is responsive, stateful, supports keyboard nav... 1 天前
    22. 25.22 Split Buttons This pattern shows how to build an adaptive and accessible split button component. Full article · Video on ... 1 天前
    23. 25.23 Stories This pattern shows how to build a Stories component for the web that is responsive, supports keyboard navig... 1 天前
    24. 25.24 SVG Favicon This pattern shows how to build a dark and light theme adaptive favicon with SVG. Full article · Video on Y... 1 天前
    25. 25.25 Switch This pattern shows how to create a responsive, adaptive and accessible switch component. Full article · Vid... 1 天前
    26. 25.26 Tabs This pattern shows how to create a tab component with grid and scroll snap points. Full article · Video on ... 1 天前
    27. 25.27 Toast This pattern shows how to build an adaptive and accessible toast component. Full article · Video on YouTube... 1 天前
    28. 25.28 Example Pattern Set Code pattern is a snippet of code, representing a solution to a typical problem. Patterns are organized as ... 1 天前
    29. 25.29 demo layout: demo patternId: example-set/example-pattern draft: true noindex: true 1 天前
    30. 25.30 Example pattern Code pattern is a snippet of code, representing a solution to a typical problem. 1 天前
    31. 25.31 Full HTML demo pattern The HTML for the demo page can differ from the code samples displayed in the code pattern tabs. To achieve ... 1 天前
    32. 25.32 demo patternId: example-set/graph layout: demo noindex: true pageScripts: https://code.highcharts.com/highcharts... 1 天前
    33. 25.33 Graph demo pattern Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolo... 1 天前
    34. 25.34 demo layout: demo noindex: true patternId: example-set/image-demo {% Img src="image/admin/3lZosaL1YXafLn4ZRINl... 1 天前
    35. 25.35 Image demo pattern It is possible to use an image (static or animated) as a demo in a CodePattern. Use an Img shortcode wrapp... 1 天前
    36. 25.36 How to drag and drop directories The HTML Drag and Drop interfaces enable web applications to accept dragged and dropped files on a web page... 1 天前
    37. 25.37 How to drag and drop files The HTML Drag and Drop interfaces enable web applications to accept dragged and dropped files on a web page... 1 天前
    38. 25.38 How to handle files opened from the file explorer Using the File Handling API First, declare the file_handlers attribute in your web app manifest. The File ... 1 天前
    39. 25.39 How to open a directory Dealing with directories is not something you will cope with on a daily basis, but occasionally the use cas... 1 天前
    40. 25.40 How to open one or multiple files Dealing with files is one of the most common operations for apps on the web. Traditionally, users needed to... 1 天前
    41. 25.41 How to receive shared files Using the Web Share Target API First, declare a share_target in your web app manifest that lists an actio... 1 天前
    42. 25.42 How to save a file Dealing with files is one of the most common operations for apps on the web. Traditionally, users needed to... 1 天前
    43. 25.43 How to share files Using the Web Share API's share() method To share files, call navigator.share(). Note that you should alwa... 1 天前
    44. 25.44 Layout patterns Welcome to our growing collection of CSS layout patterns. Most of these patterns use CSS grid and flexbox t... 1 天前
    45. 25.45 demo patternId: layout/aspect-ratio-image-card layout: demo 1 天前
    46. 25.46 Aspect ratio image card With the aspect-ratio property, as you resize the card, the green visual block maintains this 16 x 9 aspec... 1 天前
    47. 25.47 Autobot A centering technique where an element pushes equally from all edges of a flex container. Best for quick ce... 1 天前
    48. 25.48 demo patternId: layout/clamping-card layout: demo 1 天前
    49. 25.49 Clamping card In this demo, you are setting the width using clamp() like so: width: clamp(<min>, <actual>, <max>). This... 1 天前
    50. 25.50 demo patternId: layout/container-query-card layout: demo 1 天前
    51. 25.51 Container query card ⚠️ {% Aside 'warning' %} This demo uses an experimental web technology that is not currently supported in all ... 1 天前
    52. 25.52 Content Center A centering technique that is only a few lines of CSS, works great for many elements, but has the side effe... 1 天前
    53. 25.53 demo patternId: layout/deconstructed-pancake layout: demo 1 天前
    54. 25.54 Deconstructed pancake This is a common layout for marketing sites, for example, which may have a row of three items, usually with... 1 天前
    55. 25.55 Fluffy Center A centering technique that puts the content in the center via equal padding around all its sides. See the f... 1 天前
    56. 25.56 Gentle Flex A centering technique that only aligns content and doesn't change their size during the process. See the fu... 1 天前
    57. 25.57 demo patternId: layout/holy-grail layout: demo 1 天前
    58. 25.58 Holy grail layout For this classic holy grail layout, there is a header, footer, left sidebar, right sidebar, and main conten... 1 天前
    59. 25.59 demo patternId: layout/line-up layout: demo 1 天前
    60. 25.60 Line up The main point demonstrated here is the use of justify-content: space-between, which places the first and ... 1 天前
    61. 25.61 demo patternId: layout/pancake-stack layout: demo 1 天前
    62. 25.62 Pancake stack Unlike the deconstructed pancake, this example does not wrap its children when the screen size changes. Com... 1 天前
    63. 25.63 Pop n' Plop A centering technique for overlaying other content. See the full article for many more details about this t... 1 天前
    64. 25.64 demo patternId: layout/repeat-auto-minmax layout: demo 1 天前
    65. 25.65 RAM (Repeat, Auto, Minmax) For this seventh example, combine some of the concepts you've already learned about to create a responsive ... 1 天前
    66. 25.66 demo patternId: layout/sidebar-says layout: demo 1 天前
    67. 25.67 Sidebar says This demo takes advantage of the minmax() function for grid layouts. In the demo this function is used to s... 1 天前
    68. 25.68 demo patternId: layout/super-centered layout: demo 1 天前
    69. 25.69 Super centered Use place-items: center to center an element within its parent. First specify grid as the display method, ... 1 天前
    70. 25.70 demo patternId: layout/twelve-span-grid layout: demo 1 天前
    71. 25.71 12-span grid Another classic: the 12-span grid. You can quickly write grids in CSS with the repeat() function. Using: ... 1 天前
    72. 25.72 Media patterns Welcome to our collection of media patterns. These intend to help you create modern media experiences on th... 1 天前
    73. 25.73 How to add effects to audio The Web Audio API uses the AudioContext() interface to manage sources, filters, and destinations. Once you... 1 天前
    74. 25.74 How to customize media notifications The Media Session API allows websites to let users know what's currently playing in their browser and contr... 1 天前
    75. 25.75 How to process audio from the user's microphone Accessing the user's camera and microphone is possible on the web platform with the Media Capture and Strea... 1 天前
    76. 25.76 How to record audio from the user's microphone Accessing the user's camera and microphone is possible on the web platform with the Media Capture and Strea... 1 天前
    77. 25.77 How to add Picture-in-Picture to video controls The Picture-in-Picture (PiP) Web API allows websites to create a floating video window always on top of oth... 1 天前
    78. 25.78 How to record the user's screen Sharing tabs, windows, and screens is possible on the web platform with the Screen Capture API. The getDis... 1 天前
    79. 25.79 Theming patterns Welcome to our growing collection of theming patterns. These intend to help you create adaptive color syste... 1 天前
    80. 25.80 Color Schemes with HSL This pattern shows how to go beyond light and dark themes with CSS custom properties. Full article · Video ... 1 天前
    81. 25.81 Light and Dark HSL Starter Kit This pattern shows how to use HSL to create harmonious light and dark themes with CSS custom properties. 1 天前
    82. 25.82 Dark and Light Theme Switch This pattern shows how to create a switch for your website that allows changing between light and dark them... 1 天前
    83. 25.83 How to create an app badge Badges are used to convey non-urgent information to the user. For example, they are used to indicate the st... 1 天前
    84. 25.84 How to access contacts from the address book Sometimes you want to let users of your app select one of their contacts to message via an email or chat ap... 1 天前
    85. 25.85 How to use multiple screens Using window.getScreenDetails() To make sure your browser supports the getScreenDetails() method, first c... 1 天前
    86. 25.86 How to periodically synchronize data in the background Periodic background sync lets you show fresh content when a progressive web app or service worker-backed pa... 1 天前
    87. 25.87 How to add Richer Install UI App stores provide a space for developers to showcase their apps before installation, with screenshots and ... 1 天前
    88. 25.88 How to let the user share the website they are on Letting the user share the website they are on is a common web apps pattern that you can find on many news ... 1 天前
    89. 25.89 How to create app shortcuts App shortcuts help users quickly start common or recommended tasks within your web app. Easy access to thos... 1 天前
    90. 25.90 Carousels A carousel is a UX component that displays content in a slideshow-like manner. Large, above-the-fold carous... 1 天前
    91. 25.91 Autoplay carousel This carousel uses CSS scroll snap to create smooth, performant slide transitions that do not cause layout ... 1 天前
    92. 25.92 Fonts If a web font has not been loaded, browsers typically delay rendering any text that uses the web font. In m... 1 天前
    93. 25.93 demo patternId: web-vitals-patterns/fonts/fonts-self-hosted Self-hosted Fonts ... 1 天前
    94. 25.94 Self-hosted fonts Self-hosted fonts are font files that are served from your own servers - rather than those of a third-party... 1 天前
    95. 25.95 demo patternId: web-vitals-patterns/fonts/fonts-third-party Third-party ... 1 天前
    96. 25.96 Third-party fonts It is incredibly important to deliver fonts quickly: faster font delivery not only means that text will be ... 1 天前
    97. 25.97 Images Images can cause layout shifts if they load after the surrounding page has already been rendered. This issu... 1 天前
    98. 25.98 demo patternId: web-vitals-patterns/images/img-tag <img> tag ... 1 天前
    99. 25.99 <img> tag Setting the width and height attributes on <img> tags helps prevent layout shifts. This information allo... 1 天前
    100. 25.100 demo patternId: web-vitals-patterns/images/responsive-img-density Responsive Images ... 1 天前
    101. 25.101 Responsive images and art direction Responsive images are often implemented using the srcset attribute. The srcset attribute is a comma-separa... 1 天前
    102. 25.102 Infinite scroll Infinite scroll is a UX pattern where content is continuously added to the page as a user scrolls. Some imp... 1 天前
    103. 25.103 Infinite scroll This infinite scroll implementation is designed to ensure that there are never any layout shifts - regardle... 1 天前
    104. 25.104 Banners and notices Banners and notices are a common source of layout shifts. Inserting a banner into the DOM after the surroun... 1 天前
    105. 25.105 Animated footer This animated footer slides-in from the bottom of the page. The effect is created by using the CSS transfor... 1 天前
    106. 25.106 Modal Modals can be used as an alternative to banner notices. Because modals get displayed on top of existing pag... 1 天前
    107. 25.107 Sticky footer Sticky footers are a popular way of displaying notices. Notices placed in the footer are less likely to obs... 1 天前
    108. 25.108 Placeholders Placeholders reserve space for future page content. Placeholders can be used as a solution to layout shifts... 1 天前
    109. 25.109 Placeholders Creating placeholders for page content can sometimes be as simple as adding a background effect to existing... 1 天前
    110. 25.110 Video Video can impact Web Vitals by being a source of layout shifts. In addition, in some scenarios large video ... 1 天前
    111. 25.111 demo patternId: web-vitals-patterns/video/video Video L... 1 天前
    112. 25.112 Video When optimizing video for Core Web Vitals make sure to set the width and height attributes on the <video>... 1 天前
    113. 25.113 demo patternId: web-vitals-patterns/video/video-gif GIF-style video ... 1 天前
    114. 25.114 GIF-style video Animated GIFs can be 5-20x larger than the equivalent MP4 video. However, MP4 videos can be configured to l... 1 天前
  27. 第 26 章 Payments 13 页
    1. 26.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: payments 1 天前
    2. 26.2 Providing shipping and contact information from an Android payment app Entering shipping address and contact information through a web form can be a cumbersome experience for cus... 1 天前
    3. 26.3 Android payment app developers guide The Payment Request API brings to the web a built-in browser-based interface that allows users to enter req... 1 天前
    4. 26.4 Empowering payment apps with Web Payments One of the key ecosystem drivers for the web are payments. With secure, seamless, and flexible payment syst... 1 天前
    5. 26.5 Handling optional payment information with a service worker {% Aside 'warning' %} Shipping and address support in the Payment Request API was once removed from the spe... 1 天前
    6. 26.6 How the payment ecosystem works Let's see how the payment ecosystem works with Web Payments. The anatomy of Web Payments Web Payments compr... 1 天前
    7. 26.7 How Payment Request API works When a customer tries to purchase something from your website, the site must ask the customer to provide pa... 1 天前
    8. 26.8 Life of a payment transaction Web Payments APIs are dedicated payment features built into the browser for the first time. With Web Paymen... 1 天前
    9. 26.9 Orchestrating payment transactions with a service worker Once the payment app is registered, you are ready to accept payment requests from merchants. This post expl... 1 天前
    10. 26.10 Registering a web-based payment app Web-based payment apps are Progressive Web Apps (PWA) and run on top of service workers. The service worker... 1 天前
    11. 26.11 Setting up a payment method To be used with the Payment Request API, a payment app must be associated with a payment method identifier.... 1 天前
    12. 26.12 Web-based payment apps overview Web Payments brings to the web a browser's built-in interface that allows users to enter required payment i... 1 天前
    13. 26.13 Web Payments overview Web Payments is an emerging web standard being developed by the W3C to simplify online payments and enable ... 1 天前
  28. 第 27 章 Progressive Web Apps 15 页
    1. 27.1 index layout: collection override:tags: [] date: 2020-02-24 pathName: progressive-web-apps 1 天前
    2. 27.2 Add a web app manifest The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should... 1 天前
    3. 27.3 Make your PWA feel more like an app When you play Progressive Web App buzzword bingo, it is a safe bet to set on "PWAs are just websites". Micr... 1 天前
    4. 27.4 Make it installable This glitch contains the web manifest with the required fields to make a Web App installable. It also has a... 1 天前
    5. 27.5 How to provide your own in-app install experience Many browsers make it possible for you to enable and promote the installation of your Progressive Web App (... 1 天前
    6. 27.6 How to define your install strategy In the past, app installation was only possible in the context of platform-specific applications. Today, mo... 1 天前
    7. 27.7 How Progressive Web Apps can drive business success Progressive Web Apps are on a lot of companies' roadmap to modernize their websites and adapt to users' new... 1 天前
    8. 27.8 What does it take to be installable? Progressive Web Apps (PWAs) are modern, high quality applications built using web technology. PWAs offer si... 1 天前
    9. 27.9 How Chrome handles updates to the web app manifest {% Aside %} We are currently gathering data on browsers other than Chrome. If you would like to help us gat... 1 天前
    10. 27.10 Create an offline fallback page What do the Google Assistant app, the Slack app, the Zoom app, and almost any other platform-specific app o... 1 天前
    11. 27.11 Patterns for promoting PWA installation Installing your Progressive Web App (PWA) can make it easier for users to find and use. Even with browser p... 1 天前
    12. 27.12 What makes a good Progressive Web App? Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliab... 1 天前
    13. 27.13 PWAs in app stores PWAs can be accessed through a web browser, but they can also be installed on a user's home screen as outli... 1 天前
    14. 27.14 Using a PWA in your Android app Progressive Web Apps (PWA) are web applications that use app-like features to create high quality experienc... 1 天前
    15. 27.15 What are Progressive Web Apps? The web is an incredible platform. Its mix of ubiquity across devices and operating systems, its user-cente... 1 天前
  29. 第 28 章 React 15 页
    1. 28.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: react 1 天前
    2. 28.2 Accessibility auditing with react-axe and eslint-plugin-jsx-a11y {% Aside %} If you would like to learn about the basic concepts behind accessibility in web pages, refer to... 1 天前
    3. 28.3 Add a web app manifest with Create React App {% Aside %} If you don't know how web app manifest files work, refer to the Add a web app manifest guide fi... 1 天前
    4. 28.4 Code splitting with React.lazy and Suspense {% Aside %} If you don't yet understand the basic idea behind code splitting, refer to Reduce JavaScript pa... 1 天前
    5. 28.5 Code splitting with dynamic imports in Next.js This post explains different types of code splitting and how to use dynamic imports to speed up your Next.j... 1 天前
    6. 28.6 Prefetching in create-react-app with Quicklink {% Aside %} This codelab uses Chrome DevTools. Download Chrome if you don't already have it. {% endAside %}... 1 天前
    7. 28.7 Get started: optimize your React app React is an open-source library that makes building UIs easier. This learning path will cover different API... 1 天前
    8. 28.8 How AMP can guarantee fastness in your Next.js app AMP is a web component framework that guarantees fast page loads. Next.js has built-in support for AMP. Wha... 1 天前
    9. 28.9 How to use AMP in Next.js This codelab lets you try out the two ways that you can use AMP in a Next.js app. Check out How AMP can gua... 1 天前
    10. 28.10 Performance as a default with Next.js Next.js is an opinionated React framework with a number of performance optimizations baked in. The main ide... 1 天前
    11. 28.11 Precaching in Create React App with Workbox {% Aside %} If you don't yet understand the basic idea behind service workers and precaching, read the Prec... 1 天前
    12. 28.12 Pre-render routes with react-snap react-snap is a third-party library that pre-renders pages on your site into static HTML files. This can im... 1 天前
    13. 28.13 Speed up navigations in React with Quicklink Prefetching is a technique to speed up navigations by downloading the resources for the next page, ahead of... 1 天前
    14. 28.14 Route prefetching in Next.js In this post you'll learn how routing in Next.js works, how it's optimized for speed, and how to customize ... 1 天前
    15. 28.15 Virtualize large lists with react-window react-window is a library that allows large lists to be rendered efficiently. Here's an example of a list t... 1 天前
  30. 第 29 章 Reliable 26 页
    1. 29.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: reliable 1 天前
    2. 29.2 Adaptive loading with service workers {% YouTube id='fhqCwDP69PI', startTime='161' %} Users access websites through a wide variety of devices and... 1 天前
    3. 29.3 App shell UX with service workers and streams {% YouTube id='fhqCwDP69PI', startTime='438' %} Single-page app (SPA) is an architectural pattern in which ... 1 天前
    4. 29.4 Broadcast updates to pages with service workers In some scenarios the service worker might need to proactively communicate with any of the active tabs it c... 1 天前
    5. 29.5 Building resilient search experiences with Workbox This codelab shows you how to implement a resilient search experience with Workbox. The demo app it uses co... 1 天前
    6. 29.6 Explore DevTools Network panel {% include 'content/devtools-headsup.njk' %} This codelab walks you through the process of interpreting all... 1 天前
    7. 29.7 Configuring HTTP caching behavior {% include 'content/devtools-headsup.njk' %} This codelab shows you how to change the HTTP caching headers ... 1 天前
    8. 29.8 Working with service workers {% include 'content/devtools-headsup.njk' %} This codelab shows you how to register a service worker from w... 1 天前
    9. 29.9 Handling navigation requests Navigation requests are requests for HTML documents made by your browser whenever you enter a new URL in th... 1 天前
    10. 29.10 Prevent unnecessary network requests with the HTTP Cache Fetching resources over the network is both slow and expensive: Large responses require many roundtrips bet... 1 天前
    11. 29.11 Identify resources loaded from the network The Network panel in your browser's DevTools helps identify what resources are loaded and when they are loa... 1 天前
    12. 29.12 Imperative caching guide Some websites might need to communicate to the service worker without the need of being informed about the ... 1 天前
    13. 29.13 Instant navigation experiences {% YouTube id='fhqCwDP69PI', startTime='285' %} Performing a task on a site commonly involves several steps... 1 天前
    14. 29.14 Measuring offline usage This article shows you how to track offline usage of your site to help you make a case for why your site ne... 1 天前
    15. 29.15 What is network reliability and how do you measure it? The modern web is enjoyed by a wide swath of people, using a range of different devices and types of networ... 1 天前
    16. 29.16 The Offline Cookbook With Service Worker we gave up trying to solve offline, and gave developers the moving parts to go solve it... 1 天前
    17. 29.17 Offline UX design guidelines This article provides design guidelines on how to create a great experience on both slow networks and offli... 1 天前
    18. 29.18 Precaching with Workbox One feature of service workers is the ability to save files to the cache when the service worker is install... 1 天前
    19. 29.19 Resilient search experiences {% YouTube id='fhqCwDP69PI', startTime='35' %} Even in locations with fast networks a user might lose conne... 1 天前
    20. 29.20 Runtime caching with Workbox Runtime caching refers to gradually adding responses to a cache "as you go". While runtime caching doesn't ... 1 天前
    21. 29.21 Service worker caching and HTTP caching While service workers and PWAs are becoming standards of modern web applications, resource caching has beco... 1 天前
    22. 29.22 The service worker lifecycle The lifecycle of the service worker is its most complicated part. If you don't know what it's trying to do ... 1 天前
    23. 29.23 Service workers and the Cache Storage API You're locked in a struggle for network reliability. The browser's HTTP cache is your first line of defense... 1 天前
    24. 29.24 Two-way communication with service workers In some cases, a web app might need to establish a two-way communication channel between the page and the s... 1 天前
    25. 29.25 Workbox: your high-level service worker toolkit Two APIs play a crucial role in building reliable web apps: Service Worker and Cache Storage. But using the... 1 天前
    26. 29.26 Workers overview This overview explains how web workers and service workers can improve the performance of your website, and... 1 天前
  31. 第 30 章 Secure 34 页
    1. 30.1 index layout: collection override:tags: [] date: 2018-11-05 pathName: secure tags: security 1 天前
    2. 30.2 Assess spam damage This step is for sites hacked to host spam, often with the warning "This site may be hacked" displayed in s... 1 天前
    3. 30.3 Browser sandbox To defend against attacks, a developer needs to mitigate vulnerabilities and add security features to an ap... 1 天前
    4. 30.4 Build a support team {% YouTube "xYBX1JMhHI0" %} You'll need The ability to contact your hoster. Tell your hoster that your site... 1 天前
    5. 30.5 Clean and maintain your site Shell/terminal administrator access to your site's servers: web, database, files Knowledge of shell/termina... 1 天前
    6. 30.6 Same Origin Policy & Fetch requests In this codelab, see how the same-origin works when fetching resources. Set up: Fetch page from same origin... 1 天前
    7. 30.7 Same Origin Policy & iframe In this codelab, see how the same-origin policy works when accessing data inside an iframe. Set up: Page wi... 1 天前
    8. 30.8 A guide to enable cross-origin isolation This guide shows you how to enable cross-origin isolation. Cross-origin isolation is required if you want t... 1 天前
    9. 30.9 Cross-Origin Resource Sharing (CORS) The browser's same-origin policy blocks reading a resource from a different origin. This mechanism stops a ... 1 天前
    10. 30.10 Enabling HTTPS on your servers Create a 2048-bit RSA public/private key pair. Generate a certificate signing request (CSR) that embeds you... 1 天前
    11. 30.11 FAQ for hacked sites This article brings together answers to the questions about hacking we at Google hear most often. Why did m... 1 天前
    12. 30.12 First-party cookie recipes Cookies can be first-party or third-party relative to the user's context; depending on which site the user ... 1 天前
    13. 30.13 Fixing mixed content Supporting HTTPS for your website is an important step to protecting your site and your users from attack, ... 1 天前
    14. 30.14 Fixing the cloaked keywords and links hack {% Aside %} Unsure whether or not your site is hacked? Start by reading our how to check if your site is ha... 1 天前
    15. 30.15 Fixing the gibberish hack {% Aside %} Unsure whether or not your site is hacked? Start by reading our how to check if your site is ha... 1 天前
    16. 30.16 Fixing the Japanese keyword hack {% Aside %} Unsure whether or not your site is hacked? Start by reading our how to check if your site is ha... 1 天前
    17. 30.17 Glossary for hacked sites The glossary covers a collection of technical terms that are referenced throughout our security documentati... 1 天前
    18. 30.18 Help, I think I've been hacked Every day, cybercriminals compromise thousands of websites. Hacks are often invisible to users, yet remain ... 1 天前
    19. 30.19 Hacked with malware Malware is any software or mobile application specifically designed to harm a computer, a mobile device, th... 1 天前
    20. 30.20 How do I know if my site was hacked? Follow these steps if: You've been alerted by Google that your site is hacked You see a warning in search t... 1 天前
    21. 30.21 Identify the vulnerability As there may be multiple, independent hacks in place, even if you're able to find and fix one vulnerability... 1 天前
    22. 30.22 Network Error Logging (NEL) Network Error Logging (NEL) is a mechanism for collecting client-side network errors from an origin. It use... 1 天前
    23. 30.23 Quarantine your site Ability to prevent your webserver from serving pages (alternatively, you can discuss options with your host... 1 天前
    24. 30.24 Request a review You must request a review from Google to have your page or site unflagged as dangerous or possibly deceptiv... 1 天前
    25. 30.25 Same-origin policy The same-origin policy is a browser security feature that restricts how documents and scripts on one origin... 1 天前
    26. 30.26 Understanding "same-site" and "same-origin "same-site" and "same-origin" are frequently cited but often misunderstood terms. For example, they are men... 1 天前
    27. 30.27 Securely hosting user data in modern web applications {% Aside %} This article was originally posted on the Google Security Blog. {% endAside %} Many web applica... 1 天前
    28. 30.28 What are security attacks? An insecure application could expose users and systems to various types of damage. When a malicious party u... 1 天前
    29. 30.29 Security headers quick reference This article lists the most important security headers you can use to protect your website. Use it to under... 1 天前
    30. 30.30 Security should not be so scary! What do you imagine when someone says "security"? Hackers? Attacks? Defenses? A programmer in a black hoodi... 1 天前
    31. 30.31 Top ways sites get hacked by spammers Understanding how your site was compromised is an important part of protecting your site from attacks. In t... 1 天前
    32. 30.32 Use Search Console {% YouTube "jC7jja6ebBM" %} If you've already verified ownership of your site, you can skip the first actio... 1 天前
    33. 30.33 What is mixed content? Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such ... 1 天前
    34. 30.34 Why HTTPS matters You should always protect all of your websites with HTTPS, even if they don't handle sensitive communicatio... 1 天前
  32. 第 31 章 Shows 0 页
  33. 第 32 章 Spaces 0 页
  34. 第 33 章 Tags 0 页
  35. 第 34 章 Vitals 1 页
    1. 34.1 Web Vitals {% Aside %} New: Interaction to Next Paint (INP) is no longer experimental! Learn more about our plans to r... 1 天前
  36. 第 35 章 Web Dev Basics One 6 页
    1. 35.1 index layout: collection override:tags: [] date: 2021-12-15 pathName: web-dev-basics-one draft: true 1 天前
    2. 35.2 Additional HTML elements In earlier activities, you learned: The basics of HTML tags and elements. How to structure a web page. Sem... 1 天前
    3. 35.3 Choose a JavaScript library or framework This article shares insights on how you might pick a library or framework to use within your web applicatio... 1 天前
    4. 35.4 Implement error handling when using the Fetch API This article demonstrates some error handling approaches when working with the Fetch API. The Fetch API let... 1 天前
    5. 35.5 Global and local variable scope In this article, you'll learn about scope and how it works in JavaScript. Scope is a fundamental concept in... 1 天前
    6. 35.6 The difference between JavaScript libraries and frameworks This article teaches you about the differences between frameworks and libraries in the context of a client-... 1 天前
  37. 第 36 章 Webassembly 3 页
    1. 36.1 index layout: collection override:tags: [] date: 2023-06-29 pathName: webassembly 1 天前
    2. 36.2 Compiling mkbitmap to WebAssembly In What is WebAssembly and where did it come from?, I explained how we ended up with the WebAssembly of tod... 1 天前
    3. 36.3 What is WebAssembly and where did it come from? Ever since the web became a platform not just for documents but also for apps, some of the most advanced ap... 1 天前