Building Polyfills

Table of contents

1. Building Polyfills
2. Preface
   1. Who This Book Is For
   2. How This Book Is Organized
   3. Conventions Used in This Book
   4. Using Code Examples
   5. Safari® Books Online
   6. How to Contact Us
   7. Acknowledgments
3. Foreword
4. I. Building Polyfills
   1. 1. The Current State of Web Polyfills
      1. Polyfilling: Past, Present, and Future
      2. What Is a Polyfill (and What Is It Not)?
      3. Types of Polyfills
         1. The Shim
         2. The Opt-In Polyfill
         3. The Drop-In Polyfill
         4. The Forward Polyfill
      4. Why Polyfills Still Matter
   2. 2. Principles and Practices of Polyfill Development
      1. Building Responsible Polyfills
         1. The Polyfill Vision Statement
      2. Principles of Responsible Polyfill Development
         1. Read the Spec
         2. Respect the API, If Possible
         3. Mind (Only) the Gaps
         4. Think Like A Browser Developer
         5. Build With Performance in Mind
         6. Plan for Obsolescence
   3. 3. Building Your First Polyfill, Part 1: Getting Started
      1. The HTML5 Forms Polyfill
         1. Why Use a Library?
      2. Setting Up Your Polyfill Project
         1. Choosing a Source Control Solution
         2. Setting Up the Initial Project Structure
      3. Specifying the API
         1. Initializing an Opt-In Polyfill
      4. Deciding What to Build
      5. Adding Basic Features
         1. Creating a Sample Form
         2. Color Support
         3. To Feature Detect or Not to Feature Detect
         4. Adding Opt-In Overrides to Your Polyfill
      6. Beefing Up Your Polyfill with Additional Features
         1. Adding Support for the Number Type
         2. Refactoring Type Support
         3. Adding Input Types 3-n
      7. Building Utility Polyfills
      8. Polyfilling Visual Features With CSS
      9. Testing Your Work Across Browsers
         1. Installing the Evergreen Browsers
         2. Testing in OldIE
         3. Cross-Browser Testing and Verification with Online Services
   4. 4. Building Your First Polyfill, Part 2: Build Workflows and Cross-Browser Testing
      1. Setting Up Your Project Workflow
         1. Package and Dependency Management
         2. Build and Workflow Management
         3. Automated and Cross-Browser Testing
         4. Continuous Integration
      2. Jump-Starting Your Workflow
         1. Configuring npm
         2. Configuring Grunt
      3. Adding Unit Tests to Your Polyfill
         1. Configuring Unit Tests with Jasmine
         2. Red to Green: Making the First Tests Pass
         3. Running Jasmine Tests via Grunt
         4. Configuring Jasmine for the Browser and the Console
      4. Automating Cross-Browser Polyfill Testing
      5. Configuring Cross-Browser Tests with Karma
         1. Making Karma, Jasmine, and the Browser Play Nice
         2. Automating Polyfill Development with Grunt Tasks
         3. Performing Remote Testing with Travis CI
      6. The Bottom Line: Use What Works for You!
   5. 5. Building Your First Polyfill, Part 3: Performance and Edge-Case Testing
      1. Building for Performance
         1. 1. Set Up Performance Benchmarks
         2. 2. Don’t Execute Code Too Early or Too Often
            1. The first perf tweak: caching feature tests
            2. Using JSPerf
         3. 3. Iterate Until You’re Happy, Then Iterate Some More
            1. The second perf tweak: caching DOM elements
            2. The third perf tweak: ordering of arguments
            3. The fourth perf tweak: minimizing loops
         4. Running Performance Benchmarks
         5. Tune It But Don’t Overdo It
      2. Dealing with Browser-Specific Edge Cases
      3. Mobile-Specific Considerations
         1. File Size Matters
         2. Always Test on Devices
5. II. Prollyfilling and the Future of the Web Platform
   1. 6. The Future of Polyfilling
      1. Polyfilling: Not Just For Older Browsers
      2. Prollyfilling: Extending the Web Forward
      3. Prollyfills In Action: Prollyfilling CSS
         1. Using HitchJS to Experiment with CSS
         2. Building Your Own Hitches
      4. Prollyfills in Action: ServiceWorker
      5. Prollyfills in Action: Web Components
         1. Templates
         2. Shadow DOM
         3. Custom Elements
         4. HTML Imports
         5. Creating Custom Elements with AngularJS
         6. Creating Custom Elements with Polymer
      6. Strategies for Polyfilling Experimental APIs
         1. Expect the API to Change
         2. Don’t Be Afraid to Try Something New
   2. 7. Building Your First Prollyfill
      1. Prollyfills vs. Polyfills: What’s the Difference?
      2. The Resource Priorities Prollyfill
      3. Specifying the API and Deciding What to Build
      4. Setting Up Your Prollyfill Project
      5. Adding Prollyfill Features
         1. The First Test: Feature Detection
         2. The Second Test: Initial lazyload Functionality
         3. The First Refactor: Cleaning Up the Tests
         4. The Third Test: Modifying the Public API
         5. The Fourth Test: Supporting Additional Element Types
         6. The Second Refactor: Completing Element Type Support
         7. The Fifth Test: Completing Initial Support
         8. The Final Test: Supporting the lazyloaded Event
      6. What’s Next?
         1. Suggesting an API Modification
         2. Building for Performance
6. About the Author
7. Colophon
8. Copyright