Best of Google Chrome — 2024

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
Article
gitconnected·2y
Chrome DevTools, Extensions, and Pro Tips for Web Developers
Discover essential Chrome extensions, developer tools, and pro tips for web developers to boost productivity and streamline the development process.
456
22
3
Article
Community Picks·2y
5 Cool Chrome DevTools Features Most Developers Don’t Know About
Discover 5 lesser-known features of Chrome DevTools that can greatly boost development efficiency, including observing variable values in real time, logging to the console without changing code, setting conditional breakpoints, using DOM breakpoints, and preserving console logs across page reloads.
347
21
4
Article
Community Picks·2y
Optimizing our post page performance
daily.dev optimized post page performance by addressing issues with excessive DOM size and JavaScript execution on pages with heavy user interactions and comments. They utilized Chrome's content-visibility property and lazy rendering comments with the IntersectionObserver API to improve page responsiveness and reduce main thread work, resulting in enhanced user experience and SEO.
334
6
5
Article
Medium·2y
5 Cool Chrome DevTools Features Most Developers Don’t Know About
Discover 5 lesser-known but powerful features of Chrome DevTools that can boost your development efficiency, including real-time variable observation, logpoints, conditional breakpoints, DOM breakpoints, and log preservation.
286
3
6
Article
Backend Developer·2y
Google to Sell Chrome: A Major Shift in Tech
Google plans to sell its Chrome browser following a proposal from the US Department of Justice aimed at breaking up Google's monopoly on online searches. This change could significantly alter the tech landscape and foster new competition in the browser market.
217
40
7
Article
DEV·2y
What's new in Web Dev this month?
The web development landscape has recently introduced several updates, including new Set methods in JavaScript, advanced gradient color interpolation in CSS, and experimental AI capabilities in Chrome Canary. Additionally, ECMAScript 2024 has been approved, featuring new ways to handle promises. These updates enhance code efficiency, creative control, and interactive web application possibilities.
147
7
8
Article
Bram.us·1y
More options for styling <details>
Chrome 131 introduces new styling options for <details> and <summary> elements, allowing properties other than 'block' and the use of the ::details-content pseudo-element. While currently only supported in Chrome, these features are expected in Safari soon.
136
3
9
Article
CSS Tip·2y
Animate to height/width auto (without hacks)
Learn how to smoothly transition to `height: auto` using just three lines of code. The key is the `interpolate-size: allow-keywords` property. Compatible with the latest version of Chrome.
111
3
10
Video
Theo - t3․gg·1y
Tailwind just broke a TON of websites...
Tailwind CSS recently faced an issue where custom text selection colors broke in the latest version of Chrome (131). This problem arose due to changes in Chrome's handling of CSS variables and selection properties. Although quickly addressed, the incident highlights the complexities of web development and browser compatibility, emphasizing the need for cautious use of advanced CSS features. Fixes include using specific Tailwind settings or waiting for Chrome updates.
109
32
11
Article
LogRocket·2y
Simplifying CSS animations with the display and size properties
Recent updates in Chrome have introduced new features that simplify animating CSS properties like display and size. Traditionally, developers faced challenges animating properties like display and height: auto, often relying on opacity or JavaScript workarounds. The new additions, such as keyframe animations for display, the calc-size() function, and the transition-behavior property, facilitate smoother animations without complex code. These improvements make CSS animations more accessible and efficient.
109
2
12
Article
web.dev·2y
CSS font-size-adjust is now in Baseline
The CSS property 'font-size-adjust' has been integrated into Chrome, enhancing web font interoperability as part of the Interop 2024 initiative. This improvement helps prevent layout shifts and improves the legibility of fallback fonts, particularly at smaller sizes. The property adjusts the sizing of fallback fonts to better match the initially specified font, using metrics like 'ex-height' and 'ch-width' to enhance consistency and readability across different fonts.
100
13
Article
Bram.us·2y
Animate to height: auto; (and other intrinsic sizing keywords) in CSS
Chrome 129 introduces the `interpolate-size` property and `calc-size()` function, allowing smooth transitions and animations from lengths to intrinsic sizing keywords like `height: auto`, `min-content`, and `max-content`. Adding `interpolate-size: allow-keywords;` to your stylesheet enables these animations.
74
6
14
Article
Community Picks·2y
Comprehensive guide to JavaScript performance analysis using Chrome DevTools
Learn how to use Chrome DevTools' Performance tab to analyze and optimize JavaScript performance, specifically focusing on improving rendering FPS of a canvas library. The guide provides step-by-step instructions and insights into the Performance results, Timeline, Summary, and Flame chart.
71
15
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
16
Article
CSS-Tricks·2y
Transitioning to Auto Height
Chrome Canary has introduced support for transitioning CSS properties to 'auto' values, significantly improving the ability to animate elements whose dimensions are unknown. This feature helps avoid the need for fixed-height transitions, allowing for more dynamic and responsive designs. The implementation leverages CSS 'calc()' to compute dimensions dynamically, and can handle properties like height, block-size, width, and inline-size. Additionally, transitioning from 'display: none' remains complex but doable with 'transition-behavior: allow-discrete' and '@starting-style' declarations.
51
3
17
Article
Hacker News·2y
The best browser bookmarking system is already built-in
The best bookmarking system is built into browsers like Firefox and Chrome using simple file shortcuts. You can drag-and-drop URLs to create .url files, then manage them like regular files—copying, moving, renaming, and organizing them in folders. This system also facilitates easy syncing, searching, tagging, and cross-browser use without the need for extensions.
50
6
18
Article
Community Picks·2y
Turn any website into an app with Chrome 124
Google's shift to Progressive Web Apps (PWAs) has seen a surge in installations among Chrome users. Chrome Canary now allows users to easily install websites as apps on desktops for a more seamless experience. To enable the new 'Install page as app' feature in Chrome Canary, users can simply install Canary and enable specific flags.
49
8
19
Article
freeCodeCamp·2y
How to Use Chrome DevTools – Simple Strategies for Smarter Web Development
Learn how to effectively use Chrome DevTools to boost your web development process. Explore features like the Elements Panel, Console Panel, Network Panel, and more. Improve your debugging and performance optimization skills.
48
2
20
Video
Web Dev Simplified·2y
Only The Best Developers Understand How This Works
To become a top-tier JavaScript developer, mastering how JavaScript handles memory management is essential. This includes understanding garbage collection and using advanced debugging tools to identify memory leaks within your application. Using Chrome's memory tab and debugging features can significantly aid in examining stored memory and optimizing code performance.
46
2
21
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
22
Video
Web Dev Simplified·2y
How To Debug In VSCode In 1 Minute
Learn how to debug your code line by line directly in VSCode. The guide explains the process of setting up debugging for a web application running on localhost, including how to create a configuration file and use the debugger to step through code and hit breakpoints efficiently.
41
23
Article
CSS Tip·2y
Progress element with a tooltip
Learn how to add a tooltip to the native progress element in HTML, with everything controlled by the 'max' and 'value' attributes. This technique leverages scroll-driven animations, anchor positioning, and the @property attribute, and is currently a Chrome-only experiment.
35
1
24
Article
Foojay.io·1y
Front End Debugging Part 2: Console.log() to the Max
Explore advanced usage of `console.log()` for front-end debugging, including leveraging log levels, customizing output with CSS, stack tracing, assertions, and printing tables for clearer data visualization. Discover methods for copying objects to the clipboard, inspecting with console.dir(), counting function calls, organizing logs with groups, and utilizing Chrome-specific debugging features such as monitoring functions and events.
34
1
25
Article
Community Picks·2y
Accessibility DevTools Tips
Learn 12 valuable tips for improving accessibility in web development using DevTools. These tips include understanding the accessibility tree, fixing color contrast issues, simulating color vision deficiencies, visualizing screen reader and tabbing orders, and much more. Enhance your site's performance, security, and compatibility by integrating these practices.
33
1

See all Google Chrome archives