Update 2016-09-20T17:53:18.798Z

articles/tutorial.md

@@ -1,13 +1,14 @@
 
 
-In this tutorial we will introduce the basics of Yjs, and we will showcase how to create a collaborative text area. We will use the websockets protocol to share changes, and we will use an in-memory database to persist the data. But note: there are various other options to communicate, and persist changes. Check out the [modules section](/modules) in order to find out about all the options you have!
+In this tutorial we introduce the basics of Yjs. You will learn how to create a new Yjs instance, and how to use the [y-map](https://github.com/y-js/y-map) and [y-array](https://github.com/y-js/y-array) types.
+We will use the websockets protocol to share changes, and use an in-memory database to persist the data. But note: there are various other options to communicate, and persist changes. Check out the [modules section](/modules) in order to find out about all the options you have!
 
 Furthermore, you are encouraged to try out everything you find here in your browser console.
 In every distribution of Yjs you'll find an `./Examples` directory that includes some simple projects.
-If you have any questions drop us a line via [gitter](https://gitter.im/y-js/yjs).
+If you have any questions, drop us a line via [gitter](https://gitter.im/y-js/yjs).
 
 ### Prerequisites
-Yjs expects that you have a Promise/A+ implementation on the window/global object. Though this has been [specified in ECMASrcipt 2015](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) not all browser implement it yet. You can include any Promise/A+ compatible implementation. If you don't know which one to include, check out the [es6-promise polyfill](https://github.com/jakearchibald/es6-promise).
+Yjs expects that you have a Promise/A+ implementation on the window/global object. Though this has been [specified in ECMAScript 2015](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) not all browser implement it yet. You can include any Promise/A+ compatible implementation. If you don't know which one to include, check out the [es6-promise polyfill](https://github.com/jakearchibald/es6-promise).
 
 Yjs is tested on nodejs >= `0.10`. But in order to use it you have to enable harmony support for nodejs < `4.0.0` like this:
 ```
@@ -19,27 +20,40 @@ node --harmony $(which gulp)
 All thats left to do is:
 * Download Yjs, and the modules you want to use via bower, npm, or zip
   * In this tutorial we will use the `y-memory`, `y-websockets-client`, `y-array`, `y-map`, and `y-text` modules
-  * For testing you can use the default connection point for `y-websockets-client`. For productive systems I recommend to set up your own installation(see [here](https://github.com/y-js/y-websockets-server)).
+  * For testing you can use the default connection point for `y-websockets-client`. For productive systems we recommend to set up your own installation (see [y-websockets-server](https://github.com/y-js/y-websockets-server)).
 * Include Yjs in your app via (E.g. via `<script>` tag)
 
-##### Include with bower
+##### Using bower
 ```
 npm install -g bower
-bower install yjs y-memory y-websockets-client y-array y-map y-text
+bower install --save yjs y-memory y-websockets-client y-array y-map y-text
 ```
 
-##### Include with npm
+You only need to include the `y.js` file. Yjs is able to automatically require missing modules.  
 ```
-npm install yjs y-memory y-websockets-client y-array y-map y-text
+<script src="./bower_components/yjs/y.js"></script>
 ```
 
-### Create a shared Yjs instance
-You initialize the shared object by calling `Y(options)`. This will return a promise, which is resolved when the following conditions are met:
-* All modules are loaded:
-  * The specified database adapter is loaded
-  * The specified connector is loaded
-  * All types are included
-* The connector is initialized, and a unique user id is set
+##### Using npm
+```
+npm install --save yjs y-memory y-websockets-client y-array y-map y-text
+```
+
+If you don't include via script tag, you have to explicitly include all modules! (Same goes for other module systems)
+```
+var Y = require('yjs')
+require('y-array')(Y) // add the y-array type to Yjs
+require('y-websockets-client')(Y)
+require('y-memory')(Y)
+require('y-array')(Y)
+require('y-map')(Y)
+require('y-text')(Y)
+// ..
+// do the same for all modules you want to use
+```
+
+### Create a Yjs instance
+You create a Yjs instance by calling `Y(options)`. This will return a promise, which is resolved when the connector initialized a connection.
 
 ```
 Y({
@@ -49,7 +63,7 @@ Y({
   connector: {
     name: 'websockets-client', // use the websockets connector
     room: 'my room'
-    // url: 'localhost:2345'
+    // url: 'localhost:1234' // specify your own server destination
   },
   share: { // specify the shared content
     text: 'Text',  // y.share.text is of type Y.Text
@@ -65,76 +79,97 @@ Y({
 })
 ```
 
-Yjs dynamically includes all required modules from the `sourceDir`.
 If you don't specify a `options.connector.url`, it connects to one of the servers we provide.
 The server instance maintains rooms, in which clients can share data (see [y-websockets-server](https://github.com/y-js/y-websockets-server)).
-Finally, `y.share` holds the shared data. We specified three shared types (Y.Text, Y.Map, and Y.Array) that we use during this tutorial.
+Finally, `y.share` holds the shared data. We specified three shared types (Y.Text, Y.Map, and Y.Array) that we use in this tutorial.
 
 # Yjs types
 In the Yjs project, we strongly distinguish between *data type* and *data structure*.
-Yjs knows how to handle concurrency on several data structures like Hash-Maps, Trees, Lists and Graphs.
-You can create arbitrary data types with the given structures. In the [modules section](/modules)
-we list a bunch of useful types that you can use in your projects, but it is also possible to create your own types.
+Yjs knows how to handle concurrency on several data structures like Hash-Maps, Trees, Lists, and Graphs.
+You can create data types with the given structures. In the [modules section](/modules)
+we list a bunch of existing types that you can use in your projects.
 
 ### Y.Map type
-Lets manipulate some of the properties of the `y.share.map` type.
-Call `y.share.map.set("propertyName", 42)` in order to set a primitive value on your shared y-map type.
-The change will be available to all clients in the same room. You can retrieve the value by calling `y.share.map.get("propertyName")`.
+Y.Map maps from strings to arbitrary values. Just make sure, that it is possible to convert the value to a string (using 'JSON.stringify').
+Lets manipulate `y.share.map`: Call `y.share.map.set('propertyName', 42)` in order to set a primitive value on your shared map type.
+The change will be available to all clients in the same room. You can retrieve the value by calling `y.share.map.get('propertyName')`.
 
 ```
-y.share.map.set("name", "value")
-y.share.map.get("name") // => "value"
-y.share.map.delete("name")
-y.share.map.get("name") // => undefined
+y.share.map.set('name', 'value')
+y.share.map.get('name') // => 'value'
+y.share.map.delete('name')
+y.share.map.get('name') // => undefined
 ```
 
-You can set arbitrary values on a y-map. Just make sure, that it is possible to convert it to a string (e.g. with 'JSON.stringify'). You can create a new y-map like this:
+You can also create new types using the shared map type:
 
 ```
-// create a new Y.Map type and wait until it is created
-y.share.map.set("mymap", Y.Map).then(function (map) {
-  // at this point the new map property is created
-  map.set("deep value", "string")
-})
-```
-
-Note that `y.share.map.get('map')` returns a promise, if a type is stored under the "map" property name. So you have to wait for it to be initialized:
-```
-y.share.map.get("mymap").then(function (map) {
-  // manipulate map
+// create a new Y.Map
+var newMap = y.share.map.set('mymap', Y.Map)
+newMap.set('deep value', 'string')
 })
 ```
 
 #### Observe Changes
 Every type has its own bunch of events that you can listen to. A y-map can throw *add*, *update*, and *delete* events.
 
 ```
-y.share.map.observe(function(events){
-  for(i in events){
-    console.log("The following event-type was thrown: "+events[i].type)
-    console.log("The event was executed on: "+events[i].name)
-    console.log("The event object has more information:")
-    console.log(events[i])
-  }
+var map = y.share.map
+
+// Set an observer
+map.observe(function(event){
+  console.dir(event)
 })
+
+// create a new property (add)
+map.set('number', 7) // => { type: 'add', name: 'number', value: 7, oldValue: undefined }
+// update an existing property (update)
+map.set('number', 8) // => { type: 'update', name: 'number', value: 8, oldValue: 7 }
+// delete a property
+map.delete('number') // => { type: 'delete', name: 'number', oldValue: 8 }
 ```
 
+
 ## Y.Array
 
-You can manage arrays with this type.
+Y.Array is great for sharing linear data.
 
 ### Insert / Delete Elements
 
 Create a new Y.Array, and apply changes to it:
 ```
-y.share.map.set("array", Y.Array).then(function (array) {
-  // insert four elements at position 0
-  array.insert(0, [1,2,3,4])
-  // retrieve an element
-  console.log(array.get(1)) // => 2
-  // retrieve the Y.Array values as an array
-  console.log(array.toArray()) // => [1,2,3,4]
+var array = y.share.map.set('array', Y.Array)
+
+// insert four elements at position 0
+array.insert(0, [1,2,3,4])
+// retrieve an element
+console.log(array.get(1)) // => 2
+// retrieve the Y.Array values as an array
+console.log(array.toArray()) // => [1, 2, 3, 4]
+
+```
+
+#### Observe Changes
+Y.Array throws *insert*, and *delete* events.
+
+```
+var map = y.share.map
+
+// Set an observer
+map.observe(function(event){
+  console.dir(event)
 })
 
+// insert 3 values at position 2
+map.insert(2, [1,2,3]) // => { type: 'insert', index: 2, values: [1, 2, 3] }
+// delete the first two values starting from index 2
+map.delete(2, 2) // => { type: 'delete', index: 2, oldValues: [1, 2] }
+
+// insert a type at position 0
+map.insert(0, Y.Text) // => { type: 'insert', index: 0, values: [ text ] } (text is a Y.Text)
+
 ```
-Y.Array throws *insert* and *delete* events. Set an observer on the `array` and repeat the previous example.
+
+## Explore the modules.
+
+Visit the github repositories of the modules - they contain more examples, and documentation.

bower_components/accessibility-developer-tools/Changelog.md

@@ -1,3 +1,16 @@
+## 2.11.0 - 2016-09-14
+
+### Enhancements
+
+* Performance enhancements (#263)
+
+## 2.10.1-rc.0 - 2016-01-13
+
+### Bug fixes:
+
+* Escape special characters to be used in a query selector string (PR #267)
+* Fix exception thrown by RoleTooltipRequiresDescribedBy.js (#269)
+
 ## 2.10.0 - 2015-11-13
 
 ## 2.10.0-rc.1 - 2015-10-19

bower_components/accessibility-developer-tools/README.md

@@ -1,3 +1,7 @@
+[![Build Status](https://travis-ci.org/GoogleChrome/accessibility-developer-tools.svg?branch=master)](https://travis-ci.org/GoogleChrome/accessibility-developer-tools)
+[![npm version](https://img.shields.io/npm/v/accessibility-developer-tools.svg)](https://www.npmjs.com/package/accessibility-developer-tools)
+[![npm downloads](https://img.shields.io/npm/dm/accessibility-developer-tools.svg)](https://www.npmjs.com/package/accessibility-developer-tools)
+
 # Accessibility Developer Tools
 
 This is a library of accessibility-related testing and utility code.
@@ -41,15 +45,22 @@ You will need `node` and `grunt-cli` to build.
 
         % npm install
 
-4. Build using `grunt` (run from project root)
+4. (Rebuild if you make changes) Build using `grunt` (run from project root)
 
         % grunt
 
+
+## Troubleshooting
+
+This project uses [Closure Compiler](https://github.com/google/closure-compiler) to build our releases. You may need to install a recent version of [JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html) in order for builds to successfully complete.
+
 # Using the Audit API
 
 ## Including the library
 
-The simplest option is to include the generated `axs_testing.js` library on your page.
+The simplest option is to include the generated `axs_testing.js` library on your page. After you build, you will have two versions of `axs_testings.js`:
+* Distribution Build: project-root/dist/js/axs_testing.js
+* Local Build (use if you make changes): project-root/tmp/build/axs_testing.js
 
 Work is underway to include the library in WebDriver and other automated testing frameworks.
 
@@ -81,7 +92,7 @@ The runner will load the specified file or URL in a headless browser, inject axs
      val jse = driver.asInstanceOf[JavascriptExecutor]
      jse.executeScript(scala.io.Source.fromURL("https://raw.githubusercontent.com/GoogleChrome/" +
        "accessibility-developer-tools/stable/dist/js/axs_testing.js").mkString)
-     val report = js.executeScript("var results = axs.Audit.run();return axs.Audit.createReport(results);")
+     val report = jse.executeScript("var results = axs.Audit.run();return axs.Audit.createReport(results);")
      println(report)
 
 ### Run audit from Selenium WebDriver (Scala)(with caching):

bower_components/accessibility-developer-tools/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "accessibility-developer-tools",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "homepage": "https://github.com/GoogleChrome/accessibility-developer-tools",
   "authors": [
     "Google"