Web Vitals Patterns:

web.dev/patterns/web-v…

See how to implement common UX patterns in a way that is Core Web Vitals friendly. Includes carousels, banners, infinite scroll, & more.

Best practices for cookie notices:
web.dev/cookie-notice-…

How to identify and fix layout shifts:

web.dev/debugging-layo…

Overview of CDNs:
📖 web.dev/content-delive…
- how they work
- selection
- setup
- performance features you should enable

Here's a new overview of how CDNs improve performance and general guidelines for optimizing your CDN by Katie Hempenius

web.dev/content-delive…

How to use Mac's split view:
(Useful for working in two programs side by side.)

1. Click & hold the green 'full-screen' button.

2. Choose the tiling position.
- In Catalina: a menu bar appears.
- In earlier OS X: a blue overlay appears - drag the window to left or right side.

Wikipedia has an API for searching for articles about things/places near a particular location.

Docs (& where this code is copy-pasted from):
bit.ly/34qBZcp

Free books on reliability (from Google SRE):

- Site Reliability Engineering: How Google Runs Production Systems
bit.ly/34hFLEX

- The Site Reliability Workbook
bit.ly/34hFLEX

- Building Secure & Reliable Systems
bit.ly/3aPmBZs

📖New blog post:

Fix an overloaded server

(aka 'My server is on fire what should I do?')

bit.ly/overloaded-ser…

DOM Change Breakpoints

Use case: Identifying why a DOM node or subtree was modified.

When the breakpoint is hit, execution pauses & the debugger flags the relevant lines of code.

'Break on' menu options = the 3 variations of this breakpoint.

New LightWallet feature: firstPartyHostnames

API:
firstPartyHostnames: undefined | Array<string>

- Use this to override what Lighthouse classifies as 3rd party.

To try out: update Lighthouse from the Github repo (repo is fresher than the npm package), then add to budget.json.

How to recursively expand the DOM tree in DevTools
(& save yourself some clicking)

Note: This may take a couple seconds on large pages.

📊Example of 'Per function' vs. 'Per block' code coverage

(New in Chrome DevTools 80)

'Per block' is more granular but more expensive to collect.

'Animated GIFs are huge' stats will never stop boggling my mind.

Data from Colin Bendell article:
calendar.perfplanet.com/2017/animated-…

📊Regex Lookarounds Cheatsheet

Lookarounds use what comes before/after a string to decide whether it is a match.

Support: Chromium, Node, no sed :'(

Great doc on the sources of variance in Lighthouse scores:

bit.ly/lh-variance

via Patrick Hulce & Connor Clark

Here's Katie Hempenius on the value of performance budgets.

Listen to the full episode at: chasingwaterfalls.io/episodes/episo…