Best of Google Chrome — August 2024

1. 1
   Article

   It's Foss·2y

   13 Best Open-Source Google Chrome Extensions

   Google Chrome, holding over 60% of the market share, offers a variety of open-source extensions that enhance user experience. This list includes 13 top open-source extensions such as Dark Reader for eye protection, GitOwl to optimize GitHub usage, DuckDuckGo Privacy Essentials for privacy, Simple Translate for multilingual browsing, Page Assist for AI integration, and many more. These extensions serve a wide range of purposes from privacy protection to development tools, all with the added benefit of being open-source.

   1.1K

   37
2. 2
   Article

   Lobsters·2y

   The Dying Web

   The post discusses the dominance of Chrome in the web browser market and its impact on web standards and privacy. The author advocates for using Firefox, highlighting its superior customizability and commitment to open standards and privacy. The author reminisces about past browser wars and draws parallels with the current scenario, urging readers to reconsider their browser choice for a healthier web ecosystem.

   67

   14
3. 3
   Article

   Chrome Developers·2y

   4 ways to capture screenshots with DevTools

   Chrome DevTools provides several innovative techniques for capturing screenshots of web projects. Learn how to screenshot a node from the Elements panel, capture a node larger than the screen size, take mobile version screenshots with a device frame, capture full-page screenshots, and customize your screenshots.

   44

   1
4. 4
   Article

   Chrome Developers·2y

   What's missing from HTML and CSS?

   The Chrome team shared the top ten features requested by attendees at the CSS Day conference. Key requests include better support for styling inputs, visually hidden content, `position: sticky` inside `overflow: hidden`, animating to `height: auto`, additional input types, real random numbers in CSS, mixin style classes, global styles in shadow DOM, dividing mixed units, and the `nth-letter` pseudo-element. The team invites further feedback through a survey.

   29

   1
5. 5
   Article

   Community Picks·2y

   Memory Matters: Understanding Heap Snapshots in JavaScript with Chrome devtools

   Understanding how JavaScript handles heap memory is crucial for optimizing applications and avoiding memory leaks. Chrome DevTools provides tools like heap snapshots to capture and analyze the state of the JS heap. By examining different snapshot modes—Summary, Containment, and Statistics—you can gain insights into memory usage patterns, object references, and memory distribution. Key metrics such as Distance, Shallow Size, and Retained Size help in identifying potential memory leaks and optimizing memory allocation. Regular analysis of heap snapshots ensures efficient, scalable applications.

   28

   1
6. 6
   Article

   Chrome Developers·2y

   Scroll Snap Events

   From Chrome 129, new JavaScript events `scrollSnapChange` and `scrollSnapChanging` enable more precise control over snap targets within scrolling contexts. `scrollSnapChange` fires after the scroll gesture ends and a new snap target is established, while `scrollSnapChanging` fires during the scrolling process when a potential new snap target is determined. These events unlock new possibilities for scroll snap interactions, including animations, linked scrollers, and various UI enhancements.

   26
7. 7
   Article

   web.dev·2y

   Common misconceptions about how to optimize LCP

   Improving the Largest Contentful Paint (LCP) of a page can be complex and involves multiple factors beyond just optimizing images. Real-world data shows that the majority of the time spent on LCP is due to other components such as Time to First Byte (TTFB), resource load delay, and element render delay. Developers must focus on these sub-parts holistically to achieve significant improvements in LCP. Optimizing images helps but addressing TTFB and load delays are crucial. Utilizing preloading techniques and CDNs can also contribute to better LCP.

   22
8. 8
   Article

   Chrome Developers·2y

   What's New in WebGPU (Chrome 128)

   Chrome 128 introduces several key updates for WebGPU, including experimental support for subgroups to enable SIMD-level parallelism, deprecation of depth bias settings for lines and points, a new WGSL interpolate sampling parameter, and updates to Dawn's asynchronous operations handling. Developers can test subgroups using the 'Unsafe WebGPU Support' flag or via an origin trial. Additionally, warnings for uncaptured errors are hidden if preventDefault is called in event listeners, and there are notable updates and deprecations in Dawn.

   17
9. 9
   Article

   Chrome Developers·2y

   New in Chrome 128

   Chrome 128 brings enhancements for developers including better handling of <ruby> elements with line breaks, a new Promise.try method for easier error handling in asynchronous code, and the PointerEvent interface now supports unique identification of multiple pens. Additional updates in CSS, audio context error reporting, and DevTools animations are also introduced.

   16
10. 10
    Article

    Chrome Developers·2y

    The File System Observer API origin trial

    The File System Observer API, introduced in Chrome 129, allows developers to be automatically alerted of file system changes without constant polling. It enhances web app functionality by allowing real-time updates for changes in files and directories. This can be particularly useful for web-based IDEs, apps that sync filesystem changes with servers, and other similar applications. The API involves initializing a FileSystemObserver, observing files or directories, handling changes via callbacks, and stopping the observation when needed. Developers can test it locally via Chrome's flags and participate in its origin trial starting September 2024.

    10