Merge branch 'master' into manipulation

.travis.yml

@@ -11,15 +11,16 @@ env:
 cache:
   directories:
   - node_modules
+  - "$HOME/google-cloud-sdk/"
 install:
+  - travis_wait ./tools/travis/install-gc-sdk.sh
   - npm install
   - npm run clean
 script:
   - npm run build
   - npm run test
   - node ./tools/travis/addCommitComment.js
 after_success:
-  - ./tools/travis/install-gc-sdk.sh
   - ./tools/travis/deploy-master.sh
   - ./tools/travis/deploy-pr.sh
   - node ./tools/travis/removeStagedPRs.js

CONTRIBUTING.md

@@ -32,7 +32,7 @@ the CLA.
 ## Writing Code ##
 
 If your contribution contains code, please make sure that it follows 
-[the style guide](https://google.github.io/styleguide/javascriptguide.xml).
+[the style guide](https://google.github.io/styleguide/jsguide.html).
 Otherwise, we will have to ask you to make changes, and that's no fun for anyone.
 
 ## Formatting HTML ##

app.yaml

@@ -55,12 +55,19 @@ handlers:
   secure: always
 
 skip_files:
+- ^CONTRIBUTING\.md$
+- ^README\.md$
+- ^TRANSLATION\.md$
+- ^gcloud-client-secret\.json.*
+- ^gulpfile\.js$
+- ^package\.json$
 - ^gulp-tasks/.*
 - ^node_modules/.*
 - ^scratch/.*
-- ^tools/.*
 - ^src/data/.*
 - ^src/templates/.*
+- ^src/tests/.*
+- ^tools/.*
 - ^(.*/)?#.*#$
 - ^(.*/)?.*~$
 - ^(.*/)?.*\.DS_Store$

gulp-tasks/build.js

@@ -94,7 +94,7 @@ gulp.task('build:http203Podcast', function() {
     subtitle: 'Where Paul and Jake occasionally talk web.',
     author: {name: 'Paul Lewis & Jake Archibald', email: 'jaffathecake@gmail.com'},
     summary: 'Paul and Jake talk about whatever\'s going on in the world of web development.',
-    image: 'https://developers.google.com/web/shows/http203/podcast/http203-podcast-art.jpg',
+    image: 'https://developers.google.com/web/shows/http203/podcast/http203-podcast.jpg',
     section: 'shows',
     outputPath: baseOutputPath,
     baseUrl: 'https://developers.google.com/web/shows/http203/podcast/'

gulp-tasks/wfHelper.js

@@ -16,7 +16,7 @@ const exec = require('child_process').exec;
 
 const STD_EXCLUDES = ['!**/_generated.md', '!**/_template.md'];
 const DATE_FORMAT_PRETTY = 'dddd, MMMM Do YYYY';
-const DATE_FORMAT_STANDARDIZED = 'YYYY-MM-DDTHH:mm:ss';
+const DATE_FORMAT_STANDARDIZED = 'YYYY-MM-DDTHH:mm:ss[Z]';
 
 if (!String.prototype.endsWith) {
   Object.defineProperty(String.prototype, 'endsWith', {

src/content/ar/fundamentals/media/video.md

@@ -40,9 +40,9 @@ description: تعرف على أسهل طرق إضافة الفيديو إلى م
 أضف عنصر الفيديو لتحميل الفيديو على موقعك وفك ترميزه وتشغيله:
 
 <video controls>
-     <source src="video/chrome.webm" type="video/webm">
-     <source src="video/chrome.mp4" type="video/mp4">
-     <p>هذا المتصفح ليس متوافقًا مع عنصر الفيديو.</p>
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
+  <p>هذا المتصفح ليس متوافقًا مع عنصر الفيديو.</p>
 </video>
 
 
@@ -82,9 +82,9 @@ description: تعرف على أسهل طرق إضافة الفيديو إلى م
 اهتم بتوفير معدل نقل البيانات وجعل الموقع يبدو أكثر سرعة في الاستجابة من خلال استخدام واجهة برمجة تطبيقات Media Fragments لإضافة وقت بدء ووقت انتهاء إلى عنصر الفيديو.
 
 <video controls>
-  <source src="video/chrome.webm#t=5,10" type="video/webm">
-  <source src="video/chrome.mp4#t=5,10" type="video/mp4">
-     <p>هذا المتصفح ليس متوافقًا مع عنصر الفيديو.</p>
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm#t=5,10" type="video/webm">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4#t=5,10" type="video/mp4">
+  <p>هذا المتصفح ليس متوافقًا مع عنصر الفيديو.</p>
 </video>
 
 لإضافة قطاع وسائط، يمكنك إضافة `#t=[start_time][,end_time]` إلى عنوان URL للوسائط. على سبيل المثال، لتشغيل الفيديو من الثانية 5 إلى الثانية 10، يمكنك تحديد:
@@ -345,8 +345,8 @@ src="images/iPad-Retina-landscape-video-playing.png">
 على الأجهزة التي تتوافق مع واجهة برمجة تطبيقات Fullscreen، فكر في استخدام الصور المصغَّرة بمثابة عناصر نائبة للفيديو:
 
 <video autoplay loop class="center">
-  <source src="video/fullscreen.webm" type="video/webm">
-  <source src="video/fullscreen.mp4" type="video/mp4">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/fullscreen.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/fullscreen.mp4" type="video/mp4">
      <p>هذا المتصفح ليس متوافقًا مع عنصر الفيديو.</p>
 </video>
 

src/content/de/fundamentals/media/video.md

@@ -42,9 +42,9 @@ Hier erfahren Sie, wie Sie Videoinhalte ganz einfach zu Ihrer Website hinzufüge
 - Verwenden Sie das Videoelement zum Laden, Decodieren und Abspielen von Videos auf Ihrer Website:
 
 <video controls>
-     <source src="video/chrome.webm" type="video/webm">
-     <source src="video/chrome.mp4" type="video/mp4">
-     <p>Dieser Browser unterstützt das Videoelement nicht.</p>
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
+  <p>Dieser Browser unterstützt das Videoelement nicht.</p>
 </video>
 
 
@@ -84,9 +84,9 @@ Darüber hinaus sollten Sie die Antwortheader in den Entwicklertools für Ihren
 Sparen Sie Bandbreite und machen Sie Ihre Website reaktionsschneller, indem Sie dem Videoelement mithilfe der Media Fragments-API eine Start- und Endzeit hinzufügen.
 
 <video controls>
-  <source src="video/chrome.webm#t=5,10" type="video/webm">
-  <source src="video/chrome.mp4#t=5,10" type="video/mp4">
-     <p>Dieser Browser unterstützt das Videoelement nicht.</p>
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm#t=5,10" type="video/webm">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4#t=5,10" type="video/mp4">
+  <p>Dieser Browser unterstützt das Videoelement nicht.</p>
 </video>
 
 Zum Hinzufügen eines Medienfragments fügen Sie der Medien-URL einfach `#t=[start_time][,end_time]` hinzu. Wenn das Video zum Beispiel von Sekunde 5 - 10 abgespielt werden soll, geben Sie Folgendes an:
@@ -352,8 +352,8 @@ Die Art und Weise, wie Elemente im Vollbildmodus angezeigt werden, können Sie a
 Auf Geräten, die die Fullscreen-API unterstützen, sollten Sie die Verwendung von Miniaturansicht-Bildern als Platzhalter für Videos in Betracht ziehen:
 
 <video autoplay loop class="center">
-  <source src="video/fullscreen.webm" type="video/webm">
-  <source src="video/fullscreen.mp4" type="video/mp4">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/fullscreen.webm" type="video/webm">
+  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/fullscreen.mp4" type="video/mp4">
      <p>Dieser Browser unterstützt das Videoelement nicht.</p>
 </video>
 

src/content/en/fundamentals/_redirects.yaml

@@ -186,6 +186,9 @@ redirects:
 - from: /web/fundamentals/getting-started/primers/
   to: /web/fundamentals/getting-started/
 
+- from: /web/fundamentals/getting-started/primers/media-source-extensions
+  to: /web/fundamentals/media/mse/basics
+
 - from: /web/fundamentals/getting-started/primers/payment-request/
   to: /web/fundamentals/discovery-and-monetization/payment-request/
 

src/content/en/fundamentals/design-and-ui/responsive/_code/fragment.html

@@ -31,8 +31,8 @@
   <h1>Video: Specifying a start and end time with media fragments</h1>
   <!-- // [START fragment] -->
   <video controls>
-    <source src="chrome.webm#t=5,10" type="video/webm; codecs='vp8, vorbis'">
-    <source src="chrome.mp4#t=5,10" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm#t=5,10" type="video/webm; codecs='vp8, vorbis'">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4#t=5,10" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
     <p>This browser does not support the video element.</p>
   </video>
   <!-- // [END fragment] -->

src/content/en/fundamentals/design-and-ui/responsive/_code/fullscreen.html

@@ -30,8 +30,8 @@
 <div id="container" role="main">
   <h1>Video: Using the full screen API</h1>
   <video controls>
-    <source src="chrome.webm" type="video/webm; codecs='vp8, vorbis'">
-    <source src="chrome.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm; codecs='vp8, vorbis'">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
     <p>This browser does not support the video element.</p>
   </video>
 

src/content/en/fundamentals/design-and-ui/responsive/_code/notype.html

@@ -30,8 +30,8 @@
 <div id="container" role="main">
   <h1>Video: Specifying multiple non-typed video source files</h1>
   <video controls>
-    <source src="chrome.webm">
-    <source src="chrome.mp4">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4">
     <p>This browser does not support the video element.</p>
   </video>
 

src/content/en/fundamentals/design-and-ui/responsive/_code/scripted.html

@@ -30,8 +30,8 @@
 <div id="container" role="main">
   <h1>Video: Scripting and adjusting playspeed of videos</h1>
   <video>
-    <source src="chrome.webm" type="video/webm; codecs='vp8, vorbis'">
-    <source src="chrome.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm; codecs='vp8, vorbis'">
+    <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
     <p>This browser does not support the video element.</p>
   </video>
 

src/content/en/fundamentals/discovery-and-monetization/payment-request/android-pay.md

@@ -49,24 +49,24 @@ figure {
 
 <div class="figures">
   <figure>
-    <img src="images/how_it_works_1.png">
+    <img src="images/how_it_works_1.jpg">
     <figcaption>1. Press "Checkout".</figcaption>
   </figure>
   <figure>
-    <img src="images/how_it_works_2.png">
+    <img src="images/how_it_works_2.jpg">
     <figcaption>2. Payment Request UI pops up.</figcaption>
   </figure>
   <figure>
-    <img src="images/how_it_works_3.png">
+    <img src="images/how_it_works_3.jpg">
     <figcaption>3. Choose payment method, etc., and press "Pay".</figcaption>
   </figure>
   <figure>
-    <img src="images/how_it_works_4.png">
+    <img src="images/how_it_works_4.jpg">
     <figcaption>4. When the Android Pay app pops up, click to continue (the 
     user may be prompted to unlock phone / authenticate with fingerprint)</figcaption>
   </figure>
   <figure>
-    <img src="images/how_it_works_5.png">
+    <img src="images/how_it_works_5.jpg">
     <figcaption>5. Checkout is complete.</figcaption>
   </figure>
 </div>

src/content/en/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request.md

@@ -1661,10 +1661,13 @@ canMakePaymentPromise.then((result) => {
 
 #### Edge Cases
 
-Querying `canMakePayment()` too often will result in a quota error:
+Querying `canMakePayment()` with different payment methods will 
+result in a quota error:
 
 `DOMException: Query quota exceeded`
 
+The reason this error is thrown is to block attempts to fingerprint the user.
+
 At the time of writing, Chrome will reset the quota after 30 minutes or when
 it's restarted.
 

src/content/en/fundamentals/discovery-and-monetization/payment-request/index.md

@@ -3,7 +3,7 @@ book_path: /web/fundamentals/_book.yaml
 description: Payment Request API is for fast, easy payments on the web.
 
 {# wf_published_on: 2016-07-25 #}
-{# wf_updated_on: 2017-04-21 #}
+{# wf_updated_on: 2017-06-16 #}
 
 # Introducing the Payment Request API {: .page-title }
 
@@ -40,24 +40,29 @@ like to talk about a more comprehensive solution.
 
 ## Introducing the Payment Request API {: #introducing }
 
-The Payment Request API is a system that is meant to *eliminate checkout forms*.
+The Payment Request API is a [W3C standard](https://www.w3.org/TR/payment-request/)
+candidate that is meant to *eliminate checkout forms*.
 It vastly improves user workflow during the purchase process, providing a more
 consistent user experience and enabling web merchants to easily leverage
-disparate payment methods. The Payment Request API is not a new payment method,
-nor does it integrate directly with payment processors; rather, it is a process
-layer whose goals are:
+different payment methods.
 
-* To let the browser act as intermediary among merchants, users, and payment
+The Payment Request API is designed to be vendor-agnostic, meaning it does not
+require use of a particular payment system. It's not a new payment method,
+nor does it integrate directly with payment processors; rather, it is a conduit
+from the user's payment and shipping information to merchants, with the following
+goals:
+
+* Let the browser act as intermediary among merchants, users, and payment
   methods
-* To standardize the payment communication flow as much as possible
-* To seamlessly support different secure payment methods
-* To work on any browser, device, or platform—mobile or otherwise
+* Standardize the payment communication flow as much as possible
+* Seamlessly support different secure payment methods
+* Work on any browser, device, or platform—mobile or otherwise
 
 The Payment Request API is an open and cross-browser standard that replaces
 traditional checkout flows by allowing merchants to request and accept any
-payment in a single API call. The Payment Request API allows the web page to
-exchange information with the user agent while the user is providing input,
-before approving or denying a payment request.
+payment in a single API call. The API allows the web page to exchange information
+with the user agent while the user is providing input, before approving or denying
+a payment request.
 
 Best of all, with the browser acting as an intermediary, all the information
 necessary for a fast checkout can be stored in the browser, so users can just

src/content/en/fundamentals/getting-started/index.md

@@ -147,7 +147,7 @@ to know to get started quickly and easily.
 <div style="clear:both"></div>
 
 <div class="attempt-left">
-  <a href="primers/media-source-extensions">
+  <a href="/web/fundamentals/media/mse/basics">
     Media Source Extensions
   </a>
   <p>

src/content/en/fundamentals/getting-started/primers/customelements.md

@@ -867,7 +867,7 @@ If you happen to be interested in the old v0 spec, check out the [html5rocks art
 
 ### Browser support
 
-Chrome 54 ([status](https://www.chromestatus.com/features/4696261944934400)) has Custom Elements v1. Safari has [begun prototyping](https://bugs.webkit.org/show_bug.cgi?id=150225) and you can test the API in WebKit nightly. Edge has [begun prototyping](https://twitter.com/AaronGustafson/status/717028669948977153). Mozilla has an [open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=889230) to implement.
+Chrome 54 ([status](https://www.chromestatus.com/features/4696261944934400)) and Safari 10.1 ([status](https://webkit.org/status/#feature-custom-elements)) have Custom Elements v1. Edge has [begun prototyping](https://twitter.com/AaronGustafson/status/717028669948977153). Mozilla has an [open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=889230) to implement.
 
 To feature detect custom elements, check for the existence of `window.customElements`:
 

src/content/en/fundamentals/getting-started/primers/promises.md

@@ -929,7 +929,8 @@ This next bit involves a whole bunch of new ES6 features, but it's not something
 you need to understand to use promises in your code today. Treat it like a movie
 trailer for some upcoming blockbuster features.
 
-ES6 also gives us [generators](http://wiki.ecmascript.org/doku.php?id=harmony:generators),
+ES6 also gives us
+[generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators),
 which allow functions to exit at a particular point, like "return", but
 later resume from the same point and state, for example:
 

src/content/en/fundamentals/getting-started/your-first-multi-screen-site/_code/addcontent.html

@@ -56,8 +56,8 @@ <h2>What will I learn?</h2>
           <li>apply your knowledge to your own projects in the future</li>
         </ul>
         <video controls poster="udacity.png">
-          <source src="udacity.mp4" type="video/mp4"></source>
-          <source src="udacity.webm" type="video/webm"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
           <p>Sorry your browser doesn't support video. 
              <a href="udacity.mov">Download the video</a>.
           </p>

src/content/en/fundamentals/getting-started/your-first-multi-screen-site/_code/addimages.html

@@ -43,8 +43,8 @@ <h2>What will I learn?</h2>
         <li>apply your knowledge to your own projects in the future</li>
       </ul>
       <video controls poster="udacity.png">
-        <source src="udacity.mp4" type="video/mp4"></source>
-        <source src="udacity.webm" type="video/webm"></source>
+        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
+        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
         <p>Sorry your browser doesn't support video. 
            <a href="udacity.mov">Download the video</a>.
         </p>

src/content/en/fundamentals/getting-started/your-first-multi-screen-site/_code/addtable.html

@@ -56,8 +56,8 @@ <h2>What will I learn?</h2>
           <li>apply your knowledge to your own projects in the future</li>
         </ul>
         <video controls poster="udacity.png">
-          <source src="udacity.mp4" type="video/mp4"></source>
-          <source src="udacity.webm" type="video/webm"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
           <p>Sorry your browser doesn't support video. 
              <a href="udacity.mov">Download the video</a>.
           </p>

src/content/en/fundamentals/getting-started/your-first-multi-screen-site/_code/addvideo.html

@@ -48,7 +48,7 @@ <h2>What will I learn?</h2>
       </ul>
 <!-- // [START video] -->
       <video controls poster="udacity.png">
-        <source src="udacity.webm" type="video/webm"></source>
+        <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
         <source src="udacity.mov" type="video/mov"></source>
         <p>Sorry your browser doesn't support video. 
            <a href="udacity.mov">Download the video</a>.

src/content/en/fundamentals/getting-started/your-first-multi-screen-site/_code/alterpadding.html

@@ -234,8 +234,8 @@ <h2>What will I learn?</h2>
           <li>apply your knowledge to your own projects in the future</li>
         </ul>
         <video controls poster="udacity.png">
-          <source src="udacity.mp4" type="video/mp4"></source>
-          <source src="udacity.webm" type="video/webm"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
           <p>Sorry your browser doesn't support video. 
              <a href="udacity.mov">Download the video</a>.
           </p>

src/content/en/fundamentals/getting-started/your-first-multi-screen-site/_code/constrainwidth.html

@@ -229,8 +229,8 @@ <h2>What will I learn?</h2>
           <li>apply your knowledge to your own projects in the future</li>
         </ul>
         <video controls poster="udacity.png">
-          <source src="udacity.mp4" type="video/mp4"></source>
-          <source src="udacity.webm" type="video/webm"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
+          <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
           <p>Sorry your browser doesn't support video. 
              <a href="udacity.mov">Download the video</a>.
           </p>