跳转到主要内容

章节web.dev 学习文章

Blog

709 页更新于 1 天前

开始阅读

本章内容709

  1. 01 0h h1 {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/eCdqV3lXBTovQQ3GiRUN.png", alt="0h h1 screenshot", width="80... 1 天前
  2. 02 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. 03 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. 04 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. 05 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. 06 3D and CSS For a long time 3D has been the preserve of desktop applications. Recently with the introduction of advance... 1 天前
  7. 07 5miles {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0ivyLzLs74ECIJGubzvk.gif", alt="5 miles detail", width="582"... 1 天前
  8. 08 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. 09 Spooktacular HTML5 Pumpkin A fun Halloween treat. Thanks to Rachel Blum for the picture, Dan Beam, and James Hawkins for the carving. 1 天前
  10. 10 Accessibility for teams Making your site more accessible can be a daunting task. If you are approaching accessibility for the first... 1 天前
  11. 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. 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. 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. 14 Accessibility This document set is a text-based version of part of the content covered in the Udacity course on Accessibi... 1 天前
  15. 15 Accessibility Week This week we highlighted accessibility resources to help you make your sites and applications usable by eve... 1 天前
  16. 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. 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. 18 Add touch to your site {% YouTube id="Rwc4fHUnGuU" %} Touchscreens are available on more and more devices, ranging from phones to ... 1 天前
  19. 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. 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. 21 Adsy.me {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/OBheS2foH6xlJh06O5fG.png", alt="Adsy.me detail", width="800"... 1 天前
  22. 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. 23 Madeon Adventure Machine {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/s676oANZk4tBdMozz4s3.png", alt="Madeon adventure machine det... 1 天前
  24. 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. 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. 26 AirHorner.com {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jl0fjnn688WfsNXJElRf.png", alt="Airhorner detail", width="80... 1 天前
  27. 27 Smart Lock for AliExpress {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/63QdzF1WyEdvnOqlb3xN.png", alt="Smart Lock detail", width="8... 1 天前
  28. 28 Alibaba Alibaba.com increases conversions on the mobile web by 76% with Progressive Web App. Results 76% higher con... 1 天前
  29. 29 AliExpress Summary {: .hide-from-toc } AliExpress increases conversion rate for new users by 104% with new Progressive... 1 天前
  30. 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. 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. 32 Animating Modal Views {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/IysQk9ksWLJvaV3KhS83.gif", alt="Animating a modal view.", wi... 1 天前
  33. 33 Animations and performance Maintain 60fps whenever you are animating, because any less results in stutters or stalls that will be noti... 1 天前
  34. 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. 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. 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. 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. 38 Preparing for AppCache removal Following up on previous announcements, support for AppCache will be removed from Chrome and other Chromium... 1 天前
  39. 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. 40 ARIA labels and relationships ARIA provides several mechanisms for adding labels and descriptions to elements. In fact, ARIA is the only ... 1 天前
  41. 41 | ARIA lets web authors create an alternative reality, seen only by screen readers 🤥 Sometimes it's necessary... 1 天前
  42. 42 Virtual Art Sessions {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/RKMo1BHS0YOcGjlcNqv8.png", alt="Art Session detail", width="... 1 天前
  43. 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. 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. 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. 46 Asymmetric animation timing Asymmetric animation timing improves the user experience by allowing you to express personality while at th... 1 天前
  47. 47 Unblocking clipboard access The traditional way of getting access to the system clipboard was via document.execCommand() for clipboard ... 1 天前
  48. 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. 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. 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. 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. 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. 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. 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. 55 Automating audits with AutoWebPerf AutoWebPerf (AWP) is a modular tool that enables automatic gathering of performance data from multiple sour... 1 天前
  56. 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. 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. 58 BaBe {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jalFicttU5q4B9S88RJg.gif", alt="BaBe detail", width="582", h... 1 天前
  59. 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. 60 Baseline features you can use today {% YouTube "x9rh0Du4Czg" %} The web is always evolving and browsers update constantly to give developers ne... 1 天前
  61. 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. 62 Bear 71 and WebVR {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/FBL4BUBX7fnvrpwfJWSX.png", alt="Bear 71 screenshot", width="... 1 天前
  63. 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. 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. 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. 66 | For nearly a century, Betty Crocker has been America's source for modern cooking instruction and trusted re... 1 天前
  67. 67 Beyond the Rack {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/3odtSs9WBTjfum9Kw3vC.jpg", alt="Beyond the rack detail", wid... 1 天前
  68. 68 Back/forward cache Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation.... 1 天前
  69. 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. 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. 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. 72 Bridging the gap {% Aside %} Watch the talk Bridging the Gap from Google I/O '22: {% YouTube "fGlhRnp5M-g" %} {% endAside %}... 1 天前
  73. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 84 | This is the first of a series of blog posts about the lessons that the Google Bulletin team learned while b... 1 天前
  85. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 95 Building Chrometober! Following on from Designcember, we wanted to build Chrometober for you this year as a way to highlight and ... 1 天前
  96. 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. 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. 98 Build with Chrome Build with Chrome, a fun experiment for desktop Chrome users originally launched in Australia, was re-relea... 1 天前
  99. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 109 Carnival Cruise Line {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/P3Ur4zVpuoycct8dKsRy.png", alt="Carnival detail", width="800... 1 天前
  110. 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. 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. 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. 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. 114 Chrome Dev Summit 2014 {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/bY2BFji9mpdAGR9WysUK.png", alt="Chrome Dev Summit 2014 websi... 1 天前
  115. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 134 Community highlight: Melanie Sumner This post highlights a community expert, as a part of Learn Accessibility! {% Aside %} Read some recent art... 1 天前
  135. 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. 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. 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. 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. 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. 140 HowTo Components – Overview "HowTo: Components" are a collection of web components that implement common UI patterns. The purpose of th... 1 天前
  141. 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. 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. 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. 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. 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. 146 Constraint validation Validating forms has notoriously been a painful development experience. Implementing client side validatio... 1 天前
  147. 147 Constructable Stylesheets Constructable Stylesheets are a way to create and distribute reusable styles when using Shadow DOM. {% Brow... 1 天前
  148. 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. 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. 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. 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. 152 Container queries land in stable browsers {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
  153. 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. 154 Critical Rendering Path Optimizing the critical rendering path refers to prioritizing the display of content that relates to the cu... 1 天前
  155. 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. 156 Analyzing Critical Rendering Path Performance Identifying and resolving critical rendering path performance bottlenecks requires good knowledge of the co... 1 天前
  157. 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. 158 Measuring the Critical Rendering Path The foundation of every solid performance strategy is good measurement and instrumentation. You can't optim... 1 天前
  159. 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. 160 PageSpeed Rules and Recommendations This guide examines PageSpeed Insights rules in context: what to pay attention to when optimizing the criti... 1 天前
  161. 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. 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. 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. 164 CSS Animated Grid Layouts {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} {%... 1 天前
  165. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 178 Trigonometric functions in CSS {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} Tr... 1 天前
  179. 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. 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. 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. 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. 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. 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. 185 Working with Custom Elements {% Aside 'warning' %} This article describes an old version of Custom Elements (v0). If you're interested i... 1 天前
  186. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 197 Device Orientation & Motion Device motion and orientation events provide access to the built-in accelerometer, gyroscope, and compass i... 1 天前
  198. 198 Pixel-perfect rendering with devicePixelContentBox Since Chrome 84, ResizeObserver supports a new box measurement called devicePixelContentBox, that measures... 1 天前
  199. 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. 200 Digging into the Privacy Sandbox {% YouTube 'WnCKlNE52tc' %} Summary This post outlines APIs and concepts from the Privacy Sandbox proposals... 1 天前
  201. 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. 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. 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. 204 DOM Order Matters Working with native elements is a great way to learn about focus behavior because they are automatically in... 1 天前
  205. 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. 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. 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. 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. 209 Drawing to canvas in Emscripten Different operating systems have different APIs for drawing graphics. The differences become even more conf... 1 天前
  210. 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. 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. 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. 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. 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. 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. 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. 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. 218 EME WTF? Encrypted Media Extensions provides an API that enables web applications to interact with content protectio... 1 天前
  219. 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. 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. 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. 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. 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. 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. 225 JavaScript eventing deep dive JavaScript event handling is often straightforward. This is especially true when dealing with a simple (rel... 1 天前
  226. 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. 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. 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. 229 eXtra Electronics {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZHSG0xBO6pjC1TJeuWeY.gif", alt="eXtra detail.", width="582",... 1 天前
  230. 230 Farewell to HTML5Rocks After 10 years and 100 million pageviews this commit completes our transition of content of HTML5Rocks to h... 1 天前
  231. 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. 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. 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. 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. 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. 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. 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. 238 Fixing layout instability In an earlier post I wrote about measuring Cumulative Layout Shift (CLS) in WebPageTest. CLS is an aggregat... 1 天前
  239. 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. 240 Flipkart triples time-on-site with Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/dfJkZa3kECiS8vVo5u4i.png", alt="Flipkart site", width="800",... 1 天前
  241. 241 What is FLoC? {% Aside %} This post outlined the API design implemented in Chrome for the first origin trial of FLoC. The... 1 天前
  242. 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. 243 Forbes Forbes is re-defining modern web development with Progressive Web App technology. {% YouTube id="JmC0xkCMFC... 1 天前
  244. 244 Making Fullscreen Experiences {% YouTube "ZRqr5x73-ng" %} We have the ability to easily make immersive fullscreen websites and applicatio... 1 天前
  245. 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. 246 GDE community highlight: Alba Silvente Fuentes {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/TorTqrnIdn5WAXwPKLgS.jpeg", alt="Alba with a speaker lanyard... 1 天前
  247. 247 A win-win situation {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/PD45CkrdOsFz3xyB5gJ8.jpeg", alt="Enrique on stage wearing a ... 1 天前
  248. 248 GDE community highlight: Lars Knudsen {% Img src="image/cGQxYFGJrUUaUZyWhyt9yo5gHhs1/roVI1kelp323efzmIs7X.jpeg", alt="Lars presenting on stage wi... 1 天前
  249. 249 GDE community highlight: Nishu Goel {% Img src="image/kheDArv5csY6rvQUJDbWRscckLr1/YcD8pQOpwfcHv2iCw5lW.jpeg", alt="Nishu on stage.", width="80... 1 天前
  250. 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. 251 Is your app installed? getInstalledRelatedApps() will tell you! {% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/vjamv2uyz6NxBPxPIm11.jpg", alt="", width="550", height="486"... 1 天前
  252. 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. 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. 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. 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. 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. 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. 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. 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. 260 Google+ Google+ goes completely responsive. {% Aside %} We hit our goal of never downloading more than 60k of HTML,... 1 天前
  261. 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. 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. 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. 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. 265 Smart Lock for the Guardian {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Ptu1Kad5UFx2gZNf09pT.png", alt="Guardian smart lock screensh... 1 天前
  266. 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. 267 Hiding and updating content Another important technique in fine-tuning the experience for assistive technology users involves ensuring ... 1 天前
  268. 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. 269 Hacker News Reader {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/hS4ACHeICoiD8BKEw9vM.png", alt="Hacker news reader screensho... 1 天前
  270. 270 The Hobbit Experience Historically, bringing interactive, web-based, multimedia-heavy experiences to mobiles and tablets has been... 1 天前
  271. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 283 How browsers work This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research don... 1 天前
  284. 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. 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. 286 Hummingbird Library {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/0kLA0cAAnqvRRct6qNHc.png", alt="Layout screenshot", width="8... 1 天前
  287. 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. 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. 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. 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. 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. 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. 293 HTML Imports {% Aside 'warning' %} HTML Imports are deprecated and was removed from Chrome in February 2020. {% endAside... 1 天前
  294. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 306 Important Security Terminology Used public/private keys to sign and decrypt messages between the browser and the server. A certificate aut... 1 天前
  307. 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. 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. 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. 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. 311 Introducing libSquoosh We are happy to introduce libSquoosh, an experimental Node library on top of which the Squoosh CLI is built... 1 天前
  312. 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. 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. 314 Introduction to fetch() So long XMLHttpRequest fetch() allows you to make network requests similar to XMLHttpRequest (XHR). The mai... 1 天前
  315. 315 Building the Google I/O 2016 Progressive Web App {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/PH9aWtLr0RVrB4hwowlq.jpg", alt="Iowa home", width="500", hei... 1 天前
  316. 316 Is it :modal? {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
  317. 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. 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. 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. 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. 321 > JD.ID is an e-commerce platform in Indonesia providing delivery services for a wide range of products inclu... 1 天前
  322. 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. 323 Jumia {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/2Pw5XRVGmX1WVwWaheDC.gif", alt="Jumia detail", width="582", ... 1 天前
  324. 324 Kapwing: Powerful video editing for the web {% Aside %} Joshua is the Chief Technology Officer at Kapwing. {% endAside %} Online video consumption has ... 1 天前
  325. 325 Konga {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/seSymQNOS9N7GIcPjpia.gif", alt="Konga detail.", width="582",... 1 天前
  326. 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. 327 Land Lines Summary Land Lines is an experiment that lets you explore Google Earth satellite images through gesture. Us... 1 天前
  328. 328 Last baseline alignment {% Aside 'celebration' %} This web feature is now available in all three major browser engines! {% endAside... 1 天前
  329. 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. 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. 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. 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. 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. 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. 335 Lighthouse user flows Lighthouse is a fantastic tool for testing performance and best practices during initial page load. However... 1 天前
  336. 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. 337 Creating a Lightsaber with Polymer {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/YRCKrwla0CFh3rleFYH7.png", alt="Lightsaber screenshot", widt... 1 天前
  338. 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. 339 Little Alchemy {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/UMRTodImzQkE65TkMkeV.png", alt="Little Alchemy detail", widt... 1 天前
  340. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 353 Case Study - HTML5 MathBoard {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TmDqcNJ9pDwoXKNl55jV.png", alt="MathBoard application", widt... 1 天前
  354. 354 Matterport VR for WebVR {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/vraKlL0DMH7CGOOzEcRb.jpg", alt="VR Four Season in Game", wid... 1 天前
  355. 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. 356 What is EME? Encrypted Media Extensions provides an API that enables web applications to interact with content protectio... 1 天前
  357. 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. 358 Media Source Extensions Media Source Extensions (MSE) is a JavaScript API that lets you build streams for playback from segments of... 1 天前
  359. 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. 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. 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. 362 Merry Pixmas {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lPPoed8IvWxrkP7y7K6J.png", alt="Merry Pixmas screenshot", wi... 1 天前
  363. 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. 364 Milliseconds make millions A new study Milliseconds Make Millions reveals the significant impact of mobile site speed on consumers' wi... 1 天前
  365. 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. 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. 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. 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. 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. 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. 371 Multi-touch web development Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture ... 1 天前
  372. 372 Touch and mouse For close to thirty years, desktop computing experiences have centered around a keyboard and a mouse or tra... 1 天前
  373. 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. 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. 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. 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. 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. 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. 379 Movi Kanti Revo - Part 1 - Building the 3D World {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/btqFngSls9zPrOREEqAU.png", alt="Movi Kanti Revo logo.", widt... 1 天前
  380. 380 Media Source Extensions for Audio Media Source Extensions (MSE) provide extended buffering and playback control for the HTML5 <audio> and <v... 1 天前
  381. 381 Multi-device content The US government writing guide summarizes what people want from writing on the web: {% Aside %} When writi... 1 天前
  382. 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. 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. 384 Case Study - Bouncy Mouse {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lYHR5kzCPI8DWurLpItD.svg", alt="Bouncy Mouse", width="320", ... 1 天前
  385. 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. 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. 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. 388 Semantics and navigating content You've learned about affordances, semantics, and how assistive technologies use the accessibility tree to c... 1 天前
  389. 389 Speed up service worker with navigation preloads {% Aside 'celebration' %} Service Worker Navigation Preload is now supported by all major browser engines. ... 1 天前
  390. 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. 391 Net-A-Porter {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HoshsCcUEWn1hcatIaQO.gif", alt="Net-a-porter detail", width=... 1 天前
  392. 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. 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. 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. 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. 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. 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. 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. 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. 400 Using the Notifications API {% Aside 'warning' %} This article is outdated and references a deprecated API. For modern coverage of the ... 1 天前
  401. 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. 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. 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. 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. 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. 406 Introducing Open Web Docs High-quality documentation for web platform technologies is a critically important component of our shared,... 1 天前
  407. 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. 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. 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. 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. 411 Optimize JavaScript execution JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and someti... 1 天前
  412. 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. 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. 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. 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. 416 Eliminate unnecessary downloads The fastest and best-optimized resource is a resource not sent. You should eliminate unnecessary resources ... 1 天前
  417. 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. 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. 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. 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. 421 > {% Aside %} The authors of this case study are Orange employees and worked on the PWA project. {% endAside ... 1 天前
  422. 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. 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. 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. 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. 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. 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. 428 Payment and address form best practices {% YouTube 'xfGKmvvyhdM' %} Well-designed forms help users and increase conversion rates. One small fix can... 1 天前
  429. 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. 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. 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. 432 Prework Before gathering performance metrics for a site audit, there are several checks you can do to identify easy... 1 天前
  433. 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. 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. 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. 436 Introduction to HTTP/2 {% Aside %} The following content is an excerpt from High Performance Browser Networking (O'Reilly, Ilya Gr... 1 天前
  437. 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. 438 Optimizing Content Efficiency Our web applications continue to grow in their scope, ambition, and functionality -- that's a good thing. H... 1 天前
  439. 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. 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. 441 Persistent storage When faced with storage pressure like low disk space, browsers will typically evict data, including from th... 1 天前
  442. 442 Google Photography Prize Gallery {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/TRSbhnmDJJHfHCLyBw1w.jpg", alt="Google Photography Prize web... 1 天前
  443. 443 Core Interactions in the WebVR Lab {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/M0OPzERJ22c9xdzOxAZa.png", alt="VR Lab", width="800", height... 1 天前
  444. 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. 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. 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. 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. 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. 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. 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. 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. 452 Preloading responsive images {% BrowserCompat 'api.HTMLLinkElement.imageSrcset' %} This article gives me an opportunity to discuss two o... 1 天前
  453. 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. 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. 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. 456 JavaScript Promises: an introduction Developers, prepare yourself for a pivotal moment in the history of web development. [Drumroll begins] Prom... 1 天前
  457. 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. 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. 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. 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. 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. 462 Displaying a Notification The notification options is split into two sections, one that deals with the visual aspects (this section) ... 1 天前
  463. 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. 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. 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. 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. 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. 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. 469 Permission UX The natural step after getting a PushSubscription and saving it our server is to trigger a push message, b... 1 天前
  470. 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. 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. 472 Basics of UX {% YouTube id="_dXBibRO0SM" %} Push notifications are an incredibly effective way to build deeper user enga... 1 天前
  473. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 484 Ready Player Web Good game developers know that to capitalise on the opportunity of a particular platform it's important to ... 1 天前
  485. 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. 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. 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. 488 Referer and Referrer-Policy best practices Unexpected cross-origin information leakage hinders web users' privacy. A protective referrer policy can he... 1 天前
  489. 489 Registering a custom protocol handler Chrome 13 finally includes navigator.registerProtocolHandler. This API allows web apps to register themsel... 1 天前
  490. 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. 491 Rendering on the Web As developers, we are often faced with decisions that will affect the entire architecture of our applicatio... 1 天前
  492. 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. 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. 494 | There's a new Web API on the block, defined in the HTMLVideoElement.requestVideoFrameCallback() specificati... 1 天前
  495. 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. 496 Responsive images Responsive web design means that not only can our layouts change based on device characteristics, but conte... 1 天前
  497. 497 Responsive web design basics {% Aside %} Take a look at our complete course on Responsive Web Design—Learn Design. {% endAside %} The us... 1 天前
  498. 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. 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. 500 SameSite cookie recipes {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: Under... 1 天前
  501. 501 SameSite cookies explained {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: Under... 1 天前
  502. 502 Play safely in sandboxed IFrames Constructing a rich experience on today's web almost unavoidably involves embedding components and content ... 1 天前
  503. 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. 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. 505 Schemeful Same-Site {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: Under... 1 天前
  506. 506 The Credential Management API The Credential Management API is a standards-based browser API that provides a programmatic interface betwe... 1 天前
  507. 507 Sign in Users To sign in users, retrieve the credentials from the browser's password manager and use those to automatical... 1 天前
  508. 508 Save Credentials from Forms {% Video src="video/C47gYyWYVMMhDmtYSLOWazuyePF2/hglb1gObe5c9zqoF2VuX.mov" %} Save Credentials from sign-in... 1 天前
  509. 509 Introduction to ARIA So far, we've encouraged using native HTML elements because they give you focus, keyboard support, and buil... 1 天前
  510. 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. 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. 512 Service worker mindset Service workers are powerful and absolutely worth learning. They let you deliver an entirely new level of e... 1 天前
  513. 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. 514 Service Workers in Production {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/HhySNupQxJmqcouugbqS.png", alt="Portrait screenshot", width=... 1 天前
  515. 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. 516 Shadow DOM 101 {% Aside 'warning' %} This article describes an old version of Shadow DOM (v0). If you're interested in usi... 1 天前
  517. 517 Shadow DOM 201 {% Aside 'warning' %} This article describes an old version of Shadow DOM (v0). If you're interested in usi... 1 天前
  518. 518 Shadow DOM 301 {% Aside 'warning' %} This article describes an old version of Shadow DOM (v0). If you're interested in usi... 1 天前
  519. 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. 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. 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. 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. 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. 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. 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. 526 Scroll snapping after layout changes CSS Scroll Snap allows web developers to create well-controlled scroll experiences by declaring scroll snap... 1 天前
  527. 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. 528 What are source maps? {% YouTube 'FIYkjjFYvoI' %} Today, we are talking about source maps, a crucial tool in modern web developme... 1 天前
  529. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 551 Streams—The definitive guide The Streams API allows you to programmatically access streams of data received over the network or created ... 1 天前
  552. 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. 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. 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. 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. 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. 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. 558 Suumo {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/VFyNSzxuxA1BmBagsWhN.gif", alt="Suumo site", width="582", he... 1 天前
  559. 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. 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. 561 SVGOMG {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/JBaM0M3E1sG5xURP28m7.png", alt="Svgomg screenshot", width="8... 1 天前
  562. 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. 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. 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. 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. 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. 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. 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. 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. 570 Tabbed application mode for PWAs {% Aside %} Tabbed application mode is part of the capabilities project and is currently in development. Th... 1 天前
  571. 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. 572 Case Study - Building Technitone.com {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/n7RpXa3NM0GtkXIyec38.jpeg", alt="Technitone — a web audio ex... 1 天前
  573. 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. 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. 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. 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. 577 Testing Web Design Color Contrast Say you have some text on a light background, like this: {% Img src="image/vS06HQ1YTsbMKSFTIPl2iogUQP73/VVH... 1 天前
  578. 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. 579 | Chrome 80 was a big release. It contained a number of highly anticipated features like ECMAScript Modules i... 1 天前
  580. 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. 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. 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. 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. 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. 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. 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. 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. 588 TransformStream is now supported cross-browser {% Aside 'celebration' %} This web feature is now available in all three browser engines! {% endAside %} Th... 1 天前
  589. 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. 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. 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. 592 Getting started with Trust Tokens {% Aside %} This API has been renamed Private State Tokens. The developer.chrome.com article Private State ... 1 天前
  593. 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. 594 Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/7FJZDBnszKhWl7pRtwJu.jpg", alt="Twitter detail", width="800"... 1 天前
  595. 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. 596 Understanding cookies {% Aside %} This article is part of a series on the SameSite cookie attribute changes that includes: SameS... 1 天前
  597. 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. 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. 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. 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. 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. 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. 603 User timing API High performance web applications are crucial to a great user experience. As web applications become more a... 1 天前
  604. 604 Using tabindex The default tab order provided by the DOM position of native elements is convenient, but there are times wh... 1 天前
  605. 605 Basics of UX This article introduces a workflow that can help teams, products, startups and companies create a robust an... 1 天前
  606. 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. 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. 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. 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. 610 The business impact of Core Web Vitals {% Img src="image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/m80oUd2zASInyKJJ7QNc.png", alt="LCP, FID, CLS", width="800",... 1 天前
  611. 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. 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. 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. 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. 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. 616 Tools to measure Core Web Vitals The recently announced Web Vitals initiative provides unified guidance about quality signals that are essen... 1 天前
  617. 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. 618 Progressive Web App at Voot {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/jqr5aH5HOZmNBzN3YEg0.png", alt="Voot Lite logo", width="800"... 1 天前
  619. 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. 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. 621 The Washington Post {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/rTadjNpxkUGJHDs5t0MU.gif", alt="Washington Post detail", wid... 1 天前
  622. 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. 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. 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. 625 The Weather Channel {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/lkfmhjIvUfvE9XFQfHmD.png", alt="Weather channel detail", wid... 1 天前
  626. 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. 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. 628 Building components Components are the building blocks of modern web applications. What best practices should you follow when b... 1 天前
  629. 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. 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. 631 Web Filter {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/ksqXaLIGDbKhes09L8a4.png", alt="Web filter screenshot", widt... 1 天前
  632. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 663 Case Study - A Tale of an HTML5 Game with Web Audio {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/9cFnKkN7rru58JS1RevH.png", alt="Fieldrunners screenshot", wi... 1 天前
  664. 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. 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. 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. 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. 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. 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. 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. 671 Quick guide to webfonts via @font-face {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/Mh7GSbU9speflpdFO00u.png", alt="Font Previewer", width="350"... 1 天前
  672. 672 WebGL Fundamentals WebGL makes it possible to display amazing realtime 3D graphics in your browser but what many people don't ... 1 天前
  673. 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. 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. 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. 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. 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. 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. 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. 680 Webpack Modern web applications often use a bundling tool to create a production "bundle" of files (scripts, styles... 1 天前
  681. 681 Webpack conclusion Summing up: Cut unnecessary bytes. Compress everything, strip unused code, be wise when adding dependencies... 1 天前
  682. 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. 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. 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. 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. 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. 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. 688 Wego There's a new way to deliver amazing user experiences on the web. Travel company Wego has built a successfu... 1 天前
  689. 689 Welcome to the immersive web The immersive web means virtual world experiences hosted through the browser. This covers entire virtual re... 1 天前
  690. 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. 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. 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. 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. 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. 695 Rendering Text in WebVR {% Img src="image/T4FyVKpzu4WKF1kBNvXepbi08t52/xE2bMbYkwAw5oXpuIN5k.jpg", alt="Within Detail", width="800",... 1 天前
  696. 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. 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. 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. 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. 700 The Basics of Web Workers There are a number of bottlenecks preventing interesting applications from being ported (say, from server-h... 1 天前
  701. 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. 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. 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. 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. 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. 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. 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. 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. 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 天前