 Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/)
[Video](https://www.youtube.com/watch?v=y5sb-icqOyg)
- Support for [`ResizeObservers`](https://developer.chrome.com/blog/new-in-chrome-64.md.txt#resizeobserver), will notify you when an element's content rectangle has changed its size.
- Modules can now access to host specific metadata with [import.meta](https://developer.chrome.com/blog/new-in-chrome-64.md.txt#import-meta).
- The [pop-up blocker](https://developer.chrome.com/blog/new-in-chrome-64.md.txt#popup-blocker) gets strong.
- [`window.alert()`](https://developer.chrome.com/blog/new-in-chrome-64.md.txt#window-alert) no longer changes focus.
And there's [plenty more](https://developer.chrome.com/blog/new-in-chrome-64.md.txt#more)!
I'm [Pete LePage](https://petelepage.com/). Let's dive in and see what's new for developers in Chrome 64!
Want the full list of changes? Check out the
[Chromium source repository change list](https://chromium.googlesource.com/chromium/src/+log/63.0.3239.84..64.0.3282.140).
## `ResizeObserver`
Tracking when an element's size changes can be a bit of a pain. Most likely,
you'll attach a listener to the document's `resize` event, then call
`getBoundingClientRect` or `getComputedStyle`. But, both of those can cause
layout thrashing.
And what if the browser window didn't change size, but a new element was added
to the document? Or you added `display: none` to an element? Both of those
can change the size of other elements within the page.
`ResizeObserver` notifies you whenever an element's size changes, and
provides the new height and width of the element, reducing the risk of
layout thrashing.
Like other Observers, using it is pretty simple, create a `ResizeObserver`
object and pass a callback to the constructor. The callback will be given
an array of `ResizeOberverEntries`--one entry per observed element--which
contain the new dimensions for the element.
```javascript
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
```
Check out [`ResizeObserver`: It's like `document.onresize` for Elements](https://developers.google.com/web/updates/2016/10/resizeobserver)
for more details and real world examples.
## Improved Pop-up Blocker
I hate tab-unders. You know them, it's when a page opens a pop-up to some
destination AND navigates the page. Usually one of them is an ad or
something that you didn't want.
Starting in Chrome 64, these type of navigations will be blocked, and Chrome
will show some native UI to the user - allowing them to follow the redirect
if they want.
## `import.meta`
When writing JavaScript modules, you often want access to host-specific
metadata about the current module. Chrome 64 now supports the `import.meta`
property within modules and exposes the URL for the module as
`import.meta.url`.
This is really helpful when you want to resolve resources relative to the
module file as opposed to the current HTML document.
## And more!
These are just a few of the changes in Chrome 64 for developers, of course,
there's plenty more.
- Chrome now supports [named captures](https://developers.google.com/web/updates/2017/07/upcoming-regexp-features#named_captures) and [Unicode property escapes](https://developers.google.com/web/updates/2017/07/upcoming-regexp-features#unicode_property_escapes) in regular expressions.
- The default `preload` value for `