Improve the guides

- Add a note about a bug in `cordova-ios` - Fix links to localhost:8080 - NPM -> npm
donejs · Jun 27, 2017 · 749f98e · 749f98e
1 parent 9562d3a
commit 749f98e
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 26 deletions.
diff --git a/docs/apis.md b/docs/apis.md
@@ -174,9 +174,9 @@ After installing DoneJS globally with `npm install donejs -g` you will have the
 donejs help
 ```
 
-### NPM scripts
+### npm scripts
 
-[NPM scripts](https://docs.npmjs.com/misc/scripts) are defined in the `scripts` section of your applications `package.json`. There are some standard scripts that every Node application uses (like `npm start` or `npm test` - both of which are already set up for you) and you can add your own which is what DoneJS does with commands like `npm run develop` or `npm run build`.
+[npm scripts](https://docs.npmjs.com/misc/scripts) are defined in the `scripts` section of your applications `package.json`. There are some standard scripts that every Node application uses (like `npm start` or `npm test` - both of which are already set up for you) and you can add your own which is what DoneJS does with commands like `npm run develop` or `npm run build`.
 The `donejs` command makes running those commands easier by allowing you to run them like `donejs start`, `donejs develop` or `donejs build`
 
 ### Generators

diff --git a/docs/donejs.mustache b/docs/donejs.mustache
@@ -74,7 +74,7 @@
                       <a href="./Features.html#comprehensive-testing">Comprehensive Testing</a>;
                       <a href="./Features.html#documentation">Documentation</a>;
                       <a href="./Features.html#continuous-integration--deployment">Continuous Integration &amp; Deployment</a>;
-                      <a href="./Features.html#npm-packages">NPM Packages</a>;
+                      <a href="./Features.html#npm-packages">npm Packages</a>;
                       <a href="./Features.html#es6-modules">ES6 Modules</a>;
                       <a href="./Features.html#modlets">Modlets</a>;
                       <a href="./Features.html#custom-html-elements">Custom HTML Elements</a>;
@@ -275,9 +275,9 @@
                         <source src="./static/img/donejs-npm-packaging-custom-elements.webm" type="video/webm">
                     </video>
                     <div class="caption">
-                        <h2 class="heavy">NPM Packages and Custom HTML Elements</h2>
-                        <p>Split your app into reusable custom HTML elements, and easily share and consume them as NPM modules.</p>
-                        <a href="./Features.html#npm-packages" class="btn">NPM Packages</a>
+                        <h2 class="heavy">npm Packages and Custom HTML Elements</h2>
+                        <p>Split your app into reusable custom HTML elements, and easily share and consume them as npm modules.</p>
+                        <a href="./Features.html#npm-packages" class="btn">npm Packages</a>
                         <a href="./Features.html#custom-html-elements" class="btn">Custom Elements</a>
                     </div>
                 </div>
@@ -328,7 +328,7 @@
                 <a href="./Features.html#comprehensive-testing">Comprehensive Testing</a><span class="pipe-spacer"> | </span>
                 <a href="./Features.html#hot-module-swapping">Hot Module Swapping</a><span class="pipe-spacer"> | </span>
                 <a href="./Features.html#documentation">Documentation</a><span class="pipe-spacer"> | </span>
-                <a href="./Features.html#npm-packages">NPM Packages</a><span class="pipe-spacer"> | </span>
+                <a href="./Features.html#npm-packages">npm Packages</a><span class="pipe-spacer"> | </span>
                 <a href="./Features.html#continuous-integration--deployment">Continuous Integration and Deployment</a><span class="pipe-spacer"> | </span>
                 <a href="./Features.html#es6-modules">ES6 Modules</a><span class="pipe-spacer"> | </span>
                 <a href="./Features.html#modlets">Modlets</a><span class="pipe-spacer"> | </span>

diff --git a/docs/features.md b/docs/features.md
@@ -63,13 +63,13 @@ Another advantage of the integration between DoneJS' parts is the ability to sol
 
 Solving a story means a packaged solution to a development problem, where several features across layers converge to solve the problem from start to finish. Here are several examples of stories that DoneJS solves:
 
-1. [Modular workflow](#modular-workflow) - DoneJS makes it possible for teams to design and share components easily. Starting with [generators](#generators), users can create [modlets](#modlets) that encapsulate everything a [custom element](#custom-html-elements) needs, easily add [documentation](#documentation) and [testing](#comprehensive-testing), then use [NPM import and export](#npm-packages) to easily share the modules with other developers, no matter what module format they're using.
+1. [Modular workflow](#modular-workflow) - DoneJS makes it possible for teams to design and share components easily. Starting with [generators](#generators), users can create [modlets](#modlets) that encapsulate everything a [custom element](#custom-html-elements) needs, easily add [documentation](#documentation) and [testing](#comprehensive-testing), then use [npm import and export](#npm-packages) to easily share the modules with other developers, no matter what module format they're using.
 
 2. [Performance](#performance-features) - DoneJS was designed from the start to solve the performance story, packaging [server-side rendering](#server-side-rendered), [progressive loading](#progressive-loading), [worker thread rendering](#worker-thread-rendering), [data layer caching](#caching-and-minimal-data-requests), and more, all under one roof.
 
 3. [Maintainability](#maintainability-features) - [testing](#comprehensive-testing), [docs](#documentation), [MVVM](#mvvm-architecture)
 
-4.  Developer efficiency - [zero-config NPM imports](#npm-packages), [hot module swapping](#hot-module-swapping), [ES6 support](#es6-modules)
+4.  Developer efficiency - [zero-config npm imports](#npm-packages), [hot module swapping](#hot-module-swapping), [ES6 support](#es6-modules)
 
 ### Feature comparison
 
@@ -324,7 +324,7 @@ Solving a story means a packaged solution to a development problem, where severa
           </tr>
           <tr>
             <td class="features">
-              <div class="feature-description"><a href="#npm-packages">NPM Packages - Imports & Exports</a></div>
+              <div class="feature-description"><a href="#npm-packages">npm Packages - Imports & Exports</a></div>
             </td>
             <td>
               <img class="matrix-rating-icon" src="static/img/icon-excellent.svg">
@@ -1257,9 +1257,9 @@ DoneJS generators create modlets to get you started quickly. To learn more about
 
 _Modlets are a feature of DoneJS [generators](#generators)._
 
-### NPM Packages
+### npm Packages
 
-DoneJS makes it easy to share and consume modules via package managers like NPM and Bower.
+DoneJS makes it easy to share and consume modules via package managers like npm and Bower.
 
 You can import modules from any package manager in any format - CommonJS, AMD, or ES6 - without any configuration. And you can convert modules to any other format.
 
@@ -1279,7 +1279,7 @@ The goal of these features is to transform project workflows, making it easier t
 
 #### How it works
 
-DoneJS apps use [StealJS](http://stealjs.com/) to load modules and install packages. This video introduces NPM import and export in StealJS:
+DoneJS apps use [StealJS](http://stealjs.com/) to load modules and install packages. This video introduces npm import and export in StealJS:
 
 <div class="youtube-container"><div class="youtube-player" data-videoid="eIfUsPdKF4A"></div></div>
 
@@ -1332,7 +1332,7 @@ node myexport.js
 
 ##### Modular workflow
 
-In combination with other DoneJS features, NPM module import and export make it possible for teams to design and share components easily.
+In combination with other DoneJS features, npm module import and export make it possible for teams to design and share components easily.
 
 [Generators](#generators) make it easy to bootstrap new modules of functionality quickly, and the [modlet pattern](#modlets) makes it easy to organize small, self-contained modules. It's even easy to create tests and documentation for each module.
 
@@ -1351,7 +1351,7 @@ Imagine an organization where every app is broken into many reusable pieces, eac
 <a class="btn" href="http://stealjs.com/docs/steal.html"><span>View the Documentation</span></a>
 <a class="btn" href="./place-my-order.html#importing-other-projects"><span>View the Guide</span></a>
 
-_NPM package support is a feature of [StealJS](http://stealjs.com/)_
+_npm package support is a feature of [StealJS](http://stealjs.com/)_
 
 ### ES6 Modules
 
@@ -1522,7 +1522,7 @@ Data custom elements are part of DoneJS via can-connect's [can-tag feature](http
 
 ##### Custom element libraries
 
-Custom elements are designed to be easily shareable across your organization. DoneJS provides support for simple [NPM import and export](#section_NPMPackages) and creating [documentation](#documentation) for elements. Together with custom element support, these features make it easier than ever to create reusable bits of functionality and share them.
+Custom elements are designed to be easily shareable across your organization. DoneJS provides support for simple [npm import and export](#section_npmPackages) and creating [documentation](#documentation) for elements. Together with custom element support, these features make it easier than ever to create reusable bits of functionality and share them.
 
 Some open source examples of DoneJS custom elements:
 

diff --git a/docs/guides/guide.md b/docs/guides/guide.md
@@ -6,7 +6,7 @@
 
 <img src="static/img/donejs-chat.gif" alt="chat.donejs.com" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
 
-In the first part of this guide, we will install DoneJS, [generate a new application](./Features.html#generators) and start a server that provides [hot module swapping](./Features.html#hot-module-swapping) and [server-side rendering](./Features.html#server-side-rendered). We will then [import Bootstrap from NPM](./Features.html#npm-packages), create our [own custom HTML elements](./Features.html#custom-html-elements) and [set up routing](./Features.html#pretty-urls-with-pushstate) between the homepage and the chat messages page. After that, we will complete both pages by adding a tabs widget to the homepage and the ability to send messages and [receive real-time updates](./Features.html#real-time-connected).
+In the first part of this guide, we will install DoneJS, [generate a new application](./Features.html#generators) and start a server that provides [hot module swapping](./Features.html#hot-module-swapping) and [server-side rendering](./Features.html#server-side-rendered). We will then [import Bootstrap from npm](./Features.html#npm-packages), create our [own custom HTML elements](./Features.html#custom-html-elements) and [set up routing](./Features.html#pretty-urls-with-pushstate) between the homepage and the chat messages page. After that, we will complete both pages by adding a tabs widget to the homepage and the ability to send messages and [receive real-time updates](./Features.html#real-time-connected).
 
 In the final parts of the guide we will make an [optimized, progressively loaded production build](./Features.html#progressive-loading) and [deploy it to a CDN](./Features.html#deploy-to-a-cdn). We will conclude with creating a [mobile and desktop](./Features.html#ios-android-and-desktop-builds) version of the application.
 
@@ -76,17 +76,17 @@ donejs develop
 
 The default port is `8080`.
 
-Go to [http://localhost:8080/](localhost:8080) to see our application showing a default homepage.
+Go to [http://localhost:8080/] to see our application showing a default homepage.
 
 <img src="static/img/donejs-helloworld.png" alt="hello world" height="272" width="400" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
 
 ## Adding Bootstrap
 
-DoneJS makes it easy to import other projects that are published on [NPM](https://npmjs.org). In this section, we will install and add [Bootstrap](https://getbootstrap.com/) to the page, and see DoneJS’s [hot module swapping](./Features.html#hot-module-swapping) in action.
+DoneJS makes it easy to import other projects that are published on [npm](https://npmjs.org). In this section, we will install and add [Bootstrap](https://getbootstrap.com/) to the page, and see DoneJS’s [hot module swapping](./Features.html#hot-module-swapping) in action.
 
-### Install the NPM package
+### Install the npm package
 
-Open a new terminal window so we can keep the DoneJS development server running. Then, install the [Bootstrap NPM package](https://www.npmjs.com/package/bootstrap) and save it as a dependency of our application like this:
+Open a new terminal window so we can keep the DoneJS development server running. Then, install the [Bootstrap npm package](https://www.npmjs.com/package/bootstrap) and save it as a dependency of our application like this:
 
 ```
 npm install bootstrap --save
@@ -104,7 +104,7 @@ Update `src/index.stache` to look like this:
 > New APIs Used:
 > - [<can-import>](https://canjs.com/doc/can-view-import.html) — specifies template dependencies.
 
-If you kept your browser window open at [http://localhost:8080/](localhost:8080) you should see the updated styles and content as soon as you save the file.
+If you kept your browser window open at [http://localhost:8080/] you should see the updated styles and content as soon as you save the file.
 
 <img src="static/img/donejs-bootstrap.png" alt="donejs add app" height="272" width="400" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
 
@@ -471,6 +471,8 @@ If everything went well, we should see the emulator running our application.
 
 Windows users will get instructions to download the latest version of the platform and to create a Virtual Device. Follow the instructions and then re-do the build. This will only happen the first time you build for Cordova.
 
+__Note:__ if you receive the error `Error: Cannot read property 'replace' of undefined`, you can work around it by running `cd build/cordova/platforms/ios/cordova/ && npm install ios-sim@6` until [this patch](https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;a=commit;h=4490abf273ec6d12810c8ff5ea16d197c58ecd4b) is released.
+
 ### Electron
 
 To set up the desktop build, we have to add it to our application like this:

diff --git a/docs/guides/guides.md b/docs/guides/guides.md
@@ -47,7 +47,7 @@ In the [plugin guide](plugin.html), we will create a reusable number input widge
 - Implement the component functionality and tests
 - Make a pull request to the repository
 - Make a build
-- Publish to NPM
+- Publish to npm
 - Use the plugin in other projects
 
 ## [Example App: Bitballs](./bitballs.html)

diff --git a/docs/guides/place-my-order.md b/docs/guides/place-my-order.md
@@ -98,7 +98,7 @@ DoneJS comes with its own server, which hosts your development files and takes c
 donejs develop
 ```
 
-The default port is 8080, so if we now go to [http://localhost:8080/](localhost:8080) we can see our application with a default homepage. If we change `src/index.stache` or `src/app.js` all changes will show up right away in the browser. Try it by changing the `message` property in `src/app.js`.
+The default port is 8080, so if we now go to [http://localhost:8080/] we can see our application with a default homepage. If we change `src/index.stache` or `src/app.js` all changes will show up right away in the browser. Try it by changing the `message` property in `src/app.js`.
 
 ### Setup a service API
 
@@ -726,7 +726,7 @@ Here we are adding some more conditions if `page` is set to `restaurants`:
 
 ## Importing other projects
 
-The NPM integration of StealJS makes it very easy to share and import other components. One thing we want to do when showing the `pmo-order-new` component is have a tab to choose between the lunch and dinner menu. The good news is that there is already a [bit-tabs](https://github.com/bitovi-components/bit-tabs) component which does exactly that. Let's add it as a project dependency with:
+The npm integration of StealJS makes it very easy to share and import other components. One thing we want to do when showing the `pmo-order-new` component is have a tab to choose between the lunch and dinner menu. The good news is that there is already a [bit-tabs](https://github.com/bitovi-components/bit-tabs) component which does exactly that. Let's add it as a project dependency with:
 
 ```
 npm install bit-tabs@1 --save
@@ -1260,7 +1260,7 @@ In this final short chapter, let's quickly look at what we did in this guide and
 
 In this in-depth guide we created and deployed a fully tested restaurant menu ordering application called [place-my-order](http://www.place-my-order.com/) with DoneJS. We learned how to set up a DoneJS project, create custom elements and retrieve data from the server. Then we implemented a unit-tested view-model, ran those tests automatically from the command line and on a continuous integration server.
 
-We went into more detail on how to create nested routes and importing other projects from NPM. Then we created new orders and made it real-time, added and built documentation and made a production build. Finally we turned that same application into a desktop and mobile application and deployed it to a CDN and the web.
+We went into more detail on how to create nested routes and importing other projects from npm. Then we created new orders and made it real-time, added and built documentation and made a production build. Finally we turned that same application into a desktop and mobile application and deployed it to a CDN and the web.
 
 ### Following up