Frame Juggling: Building a Live Preview
summary
Built a WordPress live preview that actually works with every existing theme by combining jQuery utilities and Deferreds, using postMessage and CORS where possible and falling back to iframe-stuffing with AJAX to avoid history bloat. Implements throttling + a debounce-on-finish rule, seamless double-iframe swaps to prevent white flashes, and a lightweight mixin/observable layer for data binding across frames. The proof is a working prototype with instant updates for JS-handled properties and full-page refreshes for PHP-rendered templates.
AI-written summary · about
chapters (33)
- 0:00Introduction
- 1:14jQuery uses WordPress
- 1:50WordPress 34 Live Preview
- 4:15How does it work
- 4:50The problem
- 5:19Browser Security Fence
- 5:51PostMessage and Cores
- 6:41Refreshing
- 9:09Managing Requests
- 9:38Throttling
- 10:16Seamless Refreshing
- 12:09Inspect
- 13:00Backward Compatibility
- 15:20MBWTF
- 16:13Understand the Concepts
- 17:18Deferred
- 18:13Mixins
- 18:59Stacking
- 21:07Creating the first mixin
- 21:25Using callbacks
- 22:41Global events loops
- 23:41Observable values
- 24:22Set method
- 24:38Mix events
- 24:53Get method
- 27:10Proxy
- 27:43Pull
- 29:11Observable
- 29:35One Line Binding
- 30:20View
- 31:05ModelView
- 31:22Questions
- 33:59iframes
related talks
22mNuances of Iframe: Lessons from Contentstack Live Preview
29miframes: A look in to the black heart of the browsers
26mProgressive HTML Rendering 101
30mFast but not furious: debugging user interaction performance issues
21mWhy Real Time Matters
01mStay tuned…
46mJavascript's comeback story on Mobile
51mSymphony of the Web