Responsive JS in Drupal presentation.

1. lastcallmedia.com
allaboard@lastcallmedia.com
@lastcallmedia
RESPONSIVE JAVASCRIPT
Rob Bayliss
CTO

2. A BRIEF HISTORY OF JAVASCRIPT
Created in 10 Days
Massively Divergent Standards
Libraries allow for cross-platform development
"Web 2.0"
Standards got better
It is now ubiquitous

3. WHAT IS RESPONSIVENESS?
Serve the same content to everyone, but
optimize the appearance based on
characteristics of the device that is viewing
it.
HTML is the meal
CSS/JS are the condiments

4. WHAT IS RESPONSIVENESS?
Some things we can respond to:
!•
Media (print, screen)
• Screen (size and orientation)
• Capabilities (touch, feature compatibility)

5. THE SIZE PROBLEM

6. RESPONSIVE JAVASCRIPT - TECHNIQUES

7. WINDOW.RESIZE()
Trigger a handler ever time the window is resized
Performance can be an issue
Useful when you have to respond to every single resize
Example

8. WINDOW.MATCHMEDIA
Fire a handler when a specific breakpoint is matched or unmatched.
Example

9. WINDOW.MATCHMEDIA

10. PERFORMANCE COMPARISON
http://jsperf.com/matchmedia-vs-resize/2

11. "
Move sidebar content inline
Call or destroy a jQuery plugin
Slideshows (or use Cycle2!)

12. FEATURE DETECTION
Determine what features a browser supports
Feature Detection > Browser Detection
Modernizr is king
Beware the undetectables
Progressive Enhancement

13. A WORD ON POLYFILLS
Polyfills are like back ported functionality for older/less functional browsers.
The best ones work with no extra calls or interactions needed.
Load them conditionally whenever possible
Polyfills are not as performant as real browser support
Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

14. RESPONSIVE JS IN DRUPAL
Watch out for attachment issues.
This is one situation where you probably
shouldn’t use Drupal.behaviors.
Example

15. QUESTIONS?
http://lastcallmedia.com
rob@lastcallmedia.com
@rbayliss