Modernizr Bundle Laravel Package

Getting Started

Minimal Steps

1. Installation:

   • Add the bundle to composer.json under "require":

     "bmatzner/modernizr-bundle": "~2.7"
     

   • Run composer update bmatzner/modernizr-bundle.
   • Register the bundle in AppKernel.php:

     new Bmatzner\ModernizrBundle\BmatznerModernizrBundle(),
     

   • Install assets via:

     php app/console assets:install web --symlink
     

2. First Use Case:

   • Include Modernizr in your base template (e.g., base.html.twig):

     <script src="{{ asset('bundles/bmatznermodernizr/js/modernizr.min.js') }}"></script>
     

   • Use Modernizr’s feature detection in JavaScript:

     if (Modernizr.touch) {
         // Enable touch-specific logic
     }
     

3. Where to Look First:

   • Check the bundles/bmatznermodernizr/js/modernizr.min.js path for the pre-built Modernizr file.
   • Review the Modernizr docs for feature detection capabilities.
   • Verify the bundle’s Resources/public/js directory for custom builds (Foundation-compatible).

Implementation Patterns

Usage Patterns

1. Feature Detection in Templates:

   • Use Twig to conditionally load CSS/JS based on Modernizr flags:

     {% if 'touch' in app.request.headers.get('Modernizr', '[]') %}
         {{ include('touch-specific-styles.css') }}
     {% endif %}
     

   • Note: Modernizr flags are typically accessed via JavaScript, but you can proxy them via a Symfony controller if needed.

2. Custom Builds:

   • The bundle includes a Foundation-compatible build. To use a custom build:
     • Replace bundles/bmatznermodernizr/js/modernizr.min.js with your own build.
     • Ensure the filename matches the bundle’s expected path (modernizr.min.js).

3. Integration with Asset Management:

   • Use Symfony’s Asset component to version Modernizr:

     <script src="{{ asset('bundles/bmatznermodernizr/js/modernizr.min.js', {'version': '1.0'}) }}"></script>
     

   • Leverage Webpack Encore or Symfony UX for bundling if using modern workflows.

4. Dynamic Feature Loading:

   • Use Modernizr’s load method to dynamically inject scripts:

     Modernizr.load([
         { test: Modernizr.geolocation, yep: 'geo-script' }
     ]);
     

   • Proxy this logic via a Symfony controller if needed for SSR or hydration.

Workflows

1. Development Workflow:

   • Override the bundle’s assets by creating a custom template in app/Resources/BmatznerModernizrBundle/views/ (if supported).
   • Use --watch with assets:install for live updates:

     php app/console assets:install web --symlink --watch
     

2. Testing:

   • Mock Modernizr in PHPUnit tests using JavaScript DOM emulation:

     // In a test environment, inject a mock Modernizr object
     window.Modernizr = { touch: true, cssgrid: false };
     

   • Use tools like Puppeteer or Cypress to test feature detection in E2E tests.

3. CI/CD:

   • Ensure assets:install runs in your CI pipeline (e.g., GitHub Actions) to validate asset paths.
   • Cache Modernizr’s JS file in CDN or edge networks to reduce load times.

Gotchas and Tips

Pitfalls

1. Bundle Deprecation:

   • The bundle is archived and tied to Symfony 2.7 and Modernizr 2.7.1 (released in 2013). Avoid using it for new projects; consider:
     • Modernizr’s standalone build for Symfony 5+/6+.
     • Bundles like symfony/webpack-encore for modern asset management.

2. Asset Path Assumptions:

   • The bundle assumes assets are installed in web/bundles/bmatznermodernizr/. If using a custom public directory (e.g., public/), update the assets:install path:

     php app/console assets:install public --symlink
     

   • Hardcoded paths in templates (e.g., bundles/bmatznermodernizr/) may break if the bundle is moved.

3. Modernizr 2.x Limitations:

   • Modernizr 2.x lacks features from later versions (e.g., no classList polyfills, limited CSS feature detection).
   • The Foundation-compatible build may include unnecessary features for your project.

4. Symfony 2.x Compatibility:

   • The bundle may not work with Symfony 2.8+ without adjustments (e.g., AppKernel changes, asset management updates).
   • Test thoroughly if upgrading Symfony versions.

Debugging

1. Missing Modernizr:

   • Verify the asset was installed:

     ls web/bundles/bmatznermodernizr/js/modernizr.min.js
     

   • Check for typos in the Twig template path (e.g., bmatznermodernizr vs. bmatzner_modernizr).

2. Feature Detection Failures:

   • Modernizr 2.x relies on legacy DOM properties. If a feature isn’t detected:
     • Manually test the feature in the browser’s console (e.g., console.log('sessionStorage' in window)).
     • Update to a newer Modernizr version if possible.

3. Console Errors:

   • Modernizr 2.x may throw errors in strict mode. Suppress them with:

     (function() {
         // Modernizr code here
     }).call(this);
     

Tips

1. Extend the Bundle:

   • Override the bundle’s Resources/public/js/modernizr.min.js by creating a custom build and placing it in:

     web/bundles/bmatznermodernizr/js/custom-modernizr.min.js
     

   • Update the Twig template to reference the custom file.

2. Performance Optimization:

   • Modernizr 2.x is ~10KB gzipped. For better performance:
     • Load it asynchronously:

       <script src="{{ asset('bundles/bmatznermodernizr/js/modernizr.min.js') }}" async></script>
       

     • Defer non-critical features until after Modernizr loads.

3. Fallback for Older Browsers:

   • Use Modernizr’s no-load to provide fallbacks:

     Modernizr.load({
         test: Modernizr.geolocation,
         nope: 'legacy-geo-script.js'
     });
     

4. Alternative for Modern Projects:

   • Replace Modernizr with:
     • Feature polyfills: Use core-js or webcomponents.js.
     • CSS feature queries: Native @supports rules for CSS features.
     • JavaScript checks: Directly test window.matchMedia, Element.classList, etc.

5. Legacy Browser Support:

   • If supporting IE8+, include a polyfill for addEventListener or classList alongside Modernizr. Example:

     <!--[if lt IE 9]>
         <script src="path/to/html5shiv.min.js"></script>
     <![endif]-->