Merge pull request #2122 from h5bp/jquery-cdn

jQuery CDN docs - remove unnecessary info

CHANGELOG.md

@@ -1,4 +1,13 @@
+### 7.1.0 (March 18, 2019)
+
+* Update Modernizr to 3.7.1 ([#2121](https://github.com/h5bp/html5-boilerplate/pull/2121))
+* Update Analytics docs and snippet ([#2118](https://github.com/h5bp/html5-boilerplate/pull/2118))
+* Minor docs updates ([#2115](https://github.com/h5bp/html5-boilerplate/pull/2115))
+* Minor devdeps updates ([#2114](https://github.com/h5bp/html5-boilerplate/pull/2114))
+* More succinct way of writing the IE conditional statement ([#2113](https://github.com/h5bp/html5-boilerplate/pull/2113))
+
 ### 7.0.1 (February 11, 2019)
+
 * Bumps main.css to current version ([#2112](https://github.com/h5bp/html5-boilerplate/pull/2112))
 
 ### 7.0.0 (February 8, 2019)

dist/css/main.css

@@ -1,4 +1,4 @@
-/*! HTML5 Boilerplate v7.0.1 | MIT License | https://html5boilerplate.com/ */
+/*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */
 
 /* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
 /*
@@ -28,6 +28,11 @@
  * Customize the background color to match your design.
  */
 
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
 ::selection {
     background: #b3d4fc;
     text-shadow: none;

dist/doc/html.md

@@ -61,7 +61,7 @@ MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_m
 HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
 
 ```html
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 ```
 
 If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
@@ -129,7 +129,7 @@ just put it before the other scripts in the bottom of the page:
 
 ```html
     <script src="js/vendor/modernizr-3.6.0.min.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
     <script src="js/plugins.js"></script>
@@ -165,7 +165,7 @@ the Google Hosted version over the jQuery CDN because it was available
 over HTTPS (the jQuery CDN was not,) and it offered a better chance of
 hitting the cache lottery owing to the popularity of the Google CDN.
 The first issue is no longer valid and the second is far outweighed by
-being able to serve jQuery to Chinese users.
+being able to serve jQuery to users in China.
 
 While the jQuery CDN is a strong default solution your site or application may
 require a different configuration. Testing your site with services like
@@ -177,22 +177,29 @@ site or application.
 ### Google Universal Analytics Tracking Code
 
 Finally, an optimized version of the Google Universal Analytics tracking code is
-included. Google recommends that this script be placed at the top of the page.
+included.
+
+We use `analytics.js` rather than the newer `gtag.js` as 
+[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
+
+The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
+
+Google recommends that this script be placed at the top of the page.
 Factors to consider: if you place this script at the top of the page, you’ll
 be able to count users who don’t fully load the page, and you’ll incur the max
 number of simultaneous connections of the browser.
 
 Further information:
 
-* [Optimizing the Google Universal Analytics
-  Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
-* [Introduction to
+- [Introduction to
   Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
-* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
+- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
 
-**N.B.** The Google Universal Analytics snippet is included by default mainly
+**N.B.** The Google Analytics snippet is included by default mainly
 because Google Analytics is [currently one of the most popular tracking
 solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
 However, its usage isn't set in stone, and you SHOULD consider exploring the
 [alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
-and use whatever suits your needs best!
+and use whatever suits your needs best.
+
+

dist/index.html

@@ -18,13 +18,13 @@
 </head>
 
 <body>
-  <!--[if lte IE 9]>
+  <!--[if IE]>
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->
 
   <!-- Add your site or application content here -->
   <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
+  <script src="js/vendor/modernizr-3.7.1.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
   <script src="js/plugins.js"></script>
@@ -33,7 +33,7 @@
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
   <script>
     window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
   </script>
   <script src="https://www.google-analytics.com/analytics.js" async defer></script>
 </body>

package.json

@@ -5,10 +5,10 @@
     "babel-core": "^6.26.3",
     "babel-preset-env": "^1.7.0",
     "babel-register": "^6.26.0",
-    "del": "^3.0.0",
-    "eslint": "^5.13.0",
+    "del": "^4.0.0",
+    "eslint": "^5.15.2",
     "eslint-config-recommended": "^4.0.0",
-    "eslint-plugin-mocha": "^5.2.1",
+    "eslint-plugin-mocha": "^5.3.0",
     "glob": "^7.1.3",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^6.0.0",
@@ -21,7 +21,7 @@
     "jquery": "3.3.1",
     "main.css": "1.0.0",
     "mocha": "^5.2.0",
-    "modernizr": "3.6.0",
+    "modernizr": "3.7.1",
     "normalize.css": "8.0.1",
     "run-sequence": "^2.2.1",
     "ssri": "^6.0.1",
@@ -51,7 +51,7 @@
     "build": "gulp build",
     "test": "gulp archive && mocha --require babel-core/register --reporter spec --timeout 5000"
   },
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "A professional front-end template for building fast, robust, and adaptable web apps or sites.",
   "files": [
     "CHANGELOG.md",

src/doc/html.md

@@ -61,7 +61,7 @@ MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_m
 HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
 
 ```html
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 ```
 
 If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
@@ -129,7 +129,7 @@ just put it before the other scripts in the bottom of the page:
 
 ```html
     <script src="js/vendor/modernizr-3.6.0.min.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
     <script src="js/plugins.js"></script>
@@ -165,7 +165,7 @@ the Google Hosted version over the jQuery CDN because it was available
 over HTTPS (the jQuery CDN was not,) and it offered a better chance of
 hitting the cache lottery owing to the popularity of the Google CDN.
 The first issue is no longer valid and the second is far outweighed by
-being able to serve jQuery to Chinese users.
+being able to serve jQuery to users in China.
 
 While the jQuery CDN is a strong default solution your site or application may
 require a different configuration. Testing your site with services like
@@ -177,22 +177,29 @@ site or application.
 ### Google Universal Analytics Tracking Code
 
 Finally, an optimized version of the Google Universal Analytics tracking code is
-included. Google recommends that this script be placed at the top of the page.
+included.
+
+We use `analytics.js` rather than the newer `gtag.js` as 
+[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
+
+The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
+
+Google recommends that this script be placed at the top of the page.
 Factors to consider: if you place this script at the top of the page, you’ll
 be able to count users who don’t fully load the page, and you’ll incur the max
 number of simultaneous connections of the browser.
 
 Further information:
 
-* [Optimizing the Google Universal Analytics
-  Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
-* [Introduction to
+- [Introduction to
   Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
-* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
+- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
 
-**N.B.** The Google Universal Analytics snippet is included by default mainly
+**N.B.** The Google Analytics snippet is included by default mainly
 because Google Analytics is [currently one of the most popular tracking
 solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
 However, its usage isn't set in stone, and you SHOULD consider exploring the
 [alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
-and use whatever suits your needs best!
+and use whatever suits your needs best.
+
+

src/index.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <!--[if lte IE 9]>
+  <!--[if IE]>
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->
 
@@ -33,7 +33,7 @@
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
   <script>
     window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
   </script>
   <script src="https://www.google-analytics.com/analytics.js" async defer></script>
 </body>