Update

_drafts/deprecated/jquery-mobile-events.md

@@ -0,0 +1,28 @@
+---
+title: jQuery mobile events
+category: JavaScript libraries
+---
+
+### Mobile events
+
+For support for `tap`, `swipe`, `swipeLeft`, et al, use 
+[jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first.
+
+To get `$.support.touch` (and family), use this from 
+[jquery.mobile.support.js][s]:
+
+    $.extend($.support, {
+      orientation: "orientation" in window && "onorientationchange" in window,
+      touch: "ontouchend" in document,
+      cssTransitions: "WebKitTransitionEvent" in window,
+      pushState: "pushState" in history && "replaceState" in history,
+      mediaquery: $.mobile.media( "only all" ),
+      cssPseudoElement: !!propExists( "content" ),
+      touchOverflow: !!propExists( "overflowScrolling" ),
+      boxShadow: !!propExists( "boxShadow" ) && !bb,
+      scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
+      dynamicBaseTag: baseTagTest()
+    });
+
+[m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js
+[s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js

_includes/2017/related-posts.html

@@ -2,6 +2,7 @@
   | where: "category", include.page.category
   | where_exp: "page", "page.url != include.page.url"
   | where_exp: "page", "page.deprecated != true"
+  | where_exp: "page", "page.redirect_to == null"
   | sort: "weight", "last"
 %}
 {% assign top_pages = site.pages

jquery.md

@@ -1,63 +1,55 @@
 ---
 title: jQuery
 category: JavaScript libraries
+layout: 2017/sheet
+tags: [WIP]
+weight: -1
 ---
 
 ### Traversing
 
+```js
+$('.box')
   .children()
   .closest('div')
   .filter(':selected')
   .find('div')
   .has('div')
-
   .first()
+  .next('div')
+  .nextUntil('div')
+```
+
+## Advanced features
 
 ### Extending selectors
 
-    // $(":inline")
+```js
-    $.expr[':'].inline = function(a) {
+$.expr[':'].inline = function (el) {
-      return $(a).css('display') === 'inline';
+  return $(el).css('display') === 'inline'
-    };
+}
+```
+
+Enables `$(':inline')`
 
 ### Extend CSS properties
 
-    $.cssHooks.someCSSProp = {
+```js
-      get: function(elem, computed, extra) {
+$.cssHooks.someCSSProp = {
+  get: function (elem, computed, extra) {
   },
-      set: function(elem, value) {
+  set: function (elem, value) {
   }
-    };
+}
 
-    // Disable "px"
+// Disable "px"
-    $.cssNumber["someCSSProp"] = true;
+$.cssNumber["someCSSProp"] = true
+```
 
 ### fn.animate() hooks
 
-    $.fn.step.someWhatever = function(fx) {
+```js
+$.fn.step.someWhatever = function(fx) {
   // ...
-    }
+}
-
+```
-### Mobile events
-
-For support for `tap`, `swipe`, `swipeLeft`, et al, use 
-[jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first.
-
-To get `$.support.touch` (and family), use this from 
-[jquery.mobile.support.js][s]:
-
-    $.extend($.support, {
-      orientation: "orientation" in window && "onorientationchange" in window,
-      touch: "ontouchend" in document,
-      cssTransitions: "WebKitTransitionEvent" in window,
-      pushState: "pushState" in history && "replaceState" in history,
-      mediaquery: $.mobile.media( "only all" ),
-      cssPseudoElement: !!propExists( "content" ),
-      touchOverflow: !!propExists( "overflowScrolling" ),
-      boxShadow: !!propExists( "boxShadow" ) && !bb,
-      scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini,
-      dynamicBaseTag: baseTagTest()
-    });
-
-[m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js
-[s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js

js-appcache.md

@@ -1,27 +1,33 @@
 ---
 title: applicationCache
 category: JavaScript
+layout: 2017/sheet
 ---
 
+## Reference
+{: .-one-column}
+
 ### applicationCache checking
 
-    if (window.applicationCache){
+```js
+if (window.applicationCache) {
   // "Naturally" reload when an update is available
-      var reload = false;
+  var reload = false
-      window.applicationCache.addEventListener('updateready', function(){
+
-        if (window.applicationCache.status == window.applicationCache.UPDATEREADY){
+  window.applicationCache.addEventListener('updateready', () => {
-          window.applicationCache.swapCache();
+    if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
-          reload = true;
+      window.applicationCache.swapCache()
+      reload = true
     }
-      }, false);
+  }, false)
 
-      setInterval(function(){
+  setInterval(() => {
-        try { // There's nothing to update for first-time load, browser freaks out :/
+    try {
-          window.applicationCache.update();
+      // There's nothing to update for first-time load, browser freaks out :/
-        } catch (e){}
+      window.applicationCache.update()
-      }, 1000*60*60); // Every hour
+    } catch (e) { }
-    }
+  }, 1000 * 60 * 60) // Every hour
+}
+```
 
-### Reference
+This is a deprecated HTML feature. See: [Using the application cache](https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache) _(developer.mozilla.org)_
-
- * https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache

js-fetch.md

@@ -1,13 +1,22 @@
 ---
 title: fetch()
 category: JavaScript
+layout: 2017/sheet
+weight: -3
 ---
 
+### Fetch
+{: .-prime}
+
 ```js
 fetch('/data.json')
   .then(response => response.json())
+  .then(data => {
+    console.log(data)
+  })
   .catch(err => ...)
 ```
+{: data-line="4"}
 
 ### Response
 
@@ -21,7 +30,9 @@ fetch('/data.json')
   res.redirected   //=> false
   res.ok           //=> true
   res.url          //=> 'http://site.com/data.json'
-  res.type         //=> 'basic' ('cors' 'default' 'error' 'opaque' 'opaqueredirect')
+  res.type         //=> 'basic'
+                   //   ('cors' 'default' 'error'
+                   //    'opaque' 'opaqueredirect')
 
   res.headers.get('Content-Type')
 })
@@ -47,8 +58,6 @@ fetch('/data.json', {
 
 ### Catching errors
 
-Non-2xx responses are still successful requests. Use another function to turn them to errors.
-
 ```js
 fetch('/data.json')
   .then(checkStatus)
@@ -66,13 +75,18 @@ function checkStatus (res) {
 }
 ```
 
-## Using with node.js
+Non-2xx responses are still successful requests. Use another function to turn them to errors.
+
+### Using with node.js
 
 ```js
-var fetch = require('isomorphic-fetch')
+const fetch = require('isomorphic-fetch')
 ```
 
+See: [isomorphic-fetch](https://npmjs.com/package/isomorphic-fetch) _(npmjs.com)_
+
 ## References
+{: .-one-column}
 
 - <https://fetch.spec.whatwg.org/>
 - <https://www.npmjs.com/package/whatwg-fetch>

js-speech.md

@@ -1,8 +1,13 @@
 ---
 title: JavaScript speech synthesis
-category: Ruby
+category: JavaScript
+layout: 2017/sheet
+weight: -1
 ---
 
+## SpeechSynthesisUtterance
+{: .-one-column}
+
 ```js
 function speak (message) {
   var msg = new SpeechSynthesisUtterance(message)
@@ -12,6 +17,8 @@ function speak (message) {
 }
 ```
 
-## Reference
+```js
+speak('Hello, world')
+```
 
-* <https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance>
+See: [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) _(developer.mozilla.org)_