Fast Frontend Testing, Storage, Observers, Fetch, & More

A whole grab bag of topics today! We talk about some of the well-known storage APIs like localStorage and sessionStorage, as well as the newer IndexedDB API which pairs well with Service Workers. We also talk about the three Observer APIs to help with reacting to DOM mutations, scrolling, and size changes. Apparently fetch DID happen (!), and testing against three headless browsers at once in a fast and reliable manner is easier than ever. All that and more in today’s episode of Just a Spec.

Hosted by Jared White & Ayush

Links:

• The Spicy Web & That HTML Blog (Jared)
• Radioactive Toy (Ayush)
• Web Storage API
• IndexedDB
• Service Workers
• Observer APIs:
  • MutationObserver
  • IntersectionObserver
  • ResizeObserver
• XMLHTTPRequest superseded by fetch
• Testing web components in headless browsers with web-test-runner
  • Gist to aid in setting everything up
• Using theme-color meta tag
• Large, small, and dynamic viewport units

Chapters

• 0:00 Introduction
• 2:57 Queue up the topics
• 3:24 Web Storage APIs
• 8:18 Service Workers
• 12:53 Discussion about storage and service workers
• 18:44 Service workers in hybrid mobile apps
• 20:26 Synchronizing data with the backend
• 22:16 SessionStorage gotchas
• 24:50 Observer APIs (MutationObserver, etc.)
• 32:35 Observing the DOM over time, rather than new page loads
• 35:31 Remember XMLHTTPRequest? (quite the mouthful!)
• 39:00 fetch is so much easier!
• 40:02 APIs so old they're named after XML ;-P
• 41:38 …and now we're talking about IE!
• 42:29 Using fetch on the server (Node etc.)
• 43:03 fetch happened
• 43:14 Testing web components using 3 headless browsers
• 50:38 Lightning round: Theme colors changing browser chrome
• 52:11 New viewport units
• 55:22 Outro