Best of Google Chrome — June 2024

1. 1
   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
2. 2
   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
3. 3
   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
4. 4
   Article

   CSS Tip·2y

   Custom range slider with tooltip

   Learn how to create a custom range slider with tooltip using pure CSS and minimal HTML. The slider is powered by modern CSS features and works in all browsers, with limited support for tooltips in Chrome.

   26

   1
5. 5
   Article

   Hacker News·2y

   Flow Charts with CSS Anchor Positioning

   The introduction of the CSS Anchor Positioning API in Chrome 125 simplifies complex positioning tasks like creating popovers and tooltips by allowing elements to be positioned relative to others. This technique can also be applied to create basic flow charts using just CSS. The post explains how to define unique anchor names and positions, demonstrates anchoring elements to multiple other elements, and explores creating flow chart nodes and lines with CSS pseudo-elements. Advanced techniques for creating multiple node flow charts and draggable flow charts using a bit of JavaScript are also covered.

   19

   1