Made sure the '#add-todo-form' is hidden and shown as appropriate.

package-lock.json

@@ -1718,12 +1718,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "babel-plugin-prismjs": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-1.1.1.tgz",
-      "integrity": "sha512-MmwxA//jBpXH0IhJ2FbpBJmd6Bvq5rBe3UD3udUqfkkOdh6lmQeYxoVGpkIvLuuXecrynWjpPqwM0JPxErebpQ==",
-      "dev": true
-    },
     "babel-polyfill": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
@@ -4199,7 +4193,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4220,12 +4215,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4240,17 +4237,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4367,7 +4367,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4379,6 +4380,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4393,6 +4395,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4400,12 +4403,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4424,6 +4429,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4504,7 +4510,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4516,6 +4523,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4601,7 +4609,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4637,6 +4646,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4656,6 +4666,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4699,12 +4710,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/pages/docs.html

@@ -15,22 +15,20 @@
   <a class="anchor" id="getting-started"></a>
   <h2 id=>Getting Started</h2>
 
-  <h3>Create a free Userbase account</h3>
+  <h3>Create a developer account</h3>
-  <p>First you need a Userbase developer account. You will be able to create a free account when Userbase gets launched. No credit card required.</p>
+  <p>First, you need a Userbase developer account. You will be able to create a free account when Userbase gets launched. No credit card required.</p>
 
   <h3>Install the SDK</h3>
-  <p>Then you need to include the Userbase SDK into your web app.</p>
+  <p>Then, you need to include the Userbase SDK into your web app.</p>
   <p>You can either include the SDK with a <code class="language-markup">&lt;script&gt;</code> tag:</p>
 
   <pre>
     <code class="language-markup"><!--
-    <script type="text/javascript"
+    <script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
-      src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
-    </script>
     --></code>
   </pre>
 
-  <p>Or else you can include the SDK into your build pipeline:</p>
+  <p>Or else, you can include the SDK into your build pipeline:</p>
 
   <pre>
     <code class="language-bash">
@@ -39,7 +37,7 @@
   </pre>
 
   <h3>Set the Application ID</h3>
-  <p>From your Userbase account, create a new App and get the Application ID. Then you just need to configure the Userbase SDK to use it:</p>
+  <p>From your developer account, create a new App and get the Application ID. Then, you just need to configure the Userbase SDK to use it:</p>
 
   <pre>
     <code class="language-javascript"><!--
@@ -56,7 +54,13 @@
   <a class="anchor" id="sdk"></a>
   <h2>SDK</h2>
 
-  <p>You can use Userbase through a simple JavaScript SDK in the browser. The following is the complete set of Userbase APIs that let you create user accounts, handle logins, and persist user data.</p>
+  <p>Userbase is accessible directly from the browser through a very simple JavaScript SDK. The following is the complete set of APIs that let you create user accounts, handle logins, and persist user data.</p>
+
+  <h3 id="sdk-configure">Configure</h3>
+  <p>Use this API to configure your Userbase client.</p>
+  <ul>
+    <li><a href="/docs/sdk/configure" class="font-semibold">Configure</a></li>
+  </ul>
 
   <h3 id="sdk-users">Users</h3>
   <p>Use these APIs to create user accounts, handle logins and logouts, and resume sessions when a user returns to your web app.</p>
@@ -85,26 +89,26 @@
   <h2>Tutorial</h2>
 
   <p>
-    In this tutorial we will build a simple to-do web app. Even if what you're building has nothing to do with to-dos, the techniques we'll cover here can be applied to many other kinds of web apps.
+    In this tutorial we will build a very basic to-do web app. Even if what you're building has nothing to do with to-dos, the techniques we'll cover here can be applied to many other kinds of web apps.
   </p>
 
   <p>
-    You can think of this tutorial as a demonstration of the core functionality of Userbase in the simplest way possible. We are going to focus solely on building a fully functional web app. Making things pretty is left as an exercise to the reader.
+    You can think of this tutorial as a demonstration of the core functionality of Userbase in the simplest way possible. We are going to focus solely on building a functional web app, and making things pretty is left as an exercise to the reader.
   </p>
 
-  <p>You can see a live demo of what we'll building <a href="https://ugliest-todo.netlify.com/" target="_blank">here</a>.</p>
+  <p>The entire web app we'll be building will fit in a <a href="https://github.com/encrypted-dev/userbase/blob/7746e98c27c7d4fe6b8846592db88cd576a907a6/docs/examples/ugliest-todo-app/index.html" target="_blank">single static HTML file of 185 lines</a>. You can also see a <a href="https://ugliest-todo.netlify.com/" target="_blank">live demo</a> of the final result.</p>
 
   <h3>Prerequisites</h3>
 
-  <p>You just need to be familiar with HTML and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" target="_blank">JavaScript basics</a>.</p>
+  <p>The only requirement is basic familiarity of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" target="_blank">JavaScript</a>.</p>
 
   <h3>Setting up</h3>
 
-  <p>Let's get going. Open up a new file in your favorite code editor:</p>
+  <p>Let's get going. Open a new file in your favorite code editor:</p>
 
   <pre>
     <code class="language-bash">
-      code ulgy-todo.html
+      code ugly-todo.html
     </code>
   </pre>
 
@@ -131,30 +135,25 @@
   </div>
 
   <p>
-    Now open up this file in a web browser of your choosing. At this point all you'll see is a blank page. As we add functionality throughout the tutorial, you can refresh this page to see the changes.
+    Now, open this file in a web browser of your choosing. At this point all you'll see is a blank page. As we add functionality throughout the tutorial, you can refresh this page to see the changes.
   </p>
 
+  <a class="anchor" id="creating-a-developer-account"></a>
   <h3>Creating a developer account</h3>
 
-  <p>To complete this tutorial, you'll need to create a Userbase developer account, and then create an app from within your account. Take note of the Application ID of your app.</p>
+  <p>To complete this tutorial, you'll need to create a Userbase developer account. Upon creation, a default application named "Preview" will be created. Take note of the App ID because you'll need it in a second.</p>
-
-  <p>
-    We're now ready to start building our web app. We'll start by implementing the sign up and login features, and then in the second part we'll implement the to-do functionality.
-  </p>
 
   <h3>Installing the SDK</h3>
 
   We're going to load the Userbase SDK from a CDN with a <code class="language-markup">&lt;script&gt;</code> tag in the head of
   our page:
 
-  <pre data-line="4-6">
+  <pre data-line="4">
     <code class="language-markup"><!--
     <head>
       <meta charset="UTF-8">
       <title>Ugliest To-Do App</title>
-      <script type="text/javascript" 
+      <script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
-        src="https://userbase-public.s3-us-west-2.amazonaws.com/userbase-js/userbase.js">
-      </script>
     </head>
     --></code>
   </pre>
@@ -164,8 +163,8 @@
   <h3>Configuring the SDK</h3>
 
   <p>
-    Before doing anything with the Userbase SDK, we need to let it know our Application ID.
+    Before doing anything with the Userbase SDK, we need to let it know our App ID.
-    Simply replace <code class="language-javascript">'YOUR_APP_ID'</code> with the Application ID of the app you created earlier:
+    Simply replace <code class="language-javascript">'YOUR_APP_ID'</code> with the App ID you received when you <a href="#creating-a-developer-account">created your developer account</a>:
   </p>
 
   <pre data-line="4">
@@ -180,18 +179,13 @@
     </code>
   </pre>
 
-  <p>
-    Now anything we do with the client (e.g. sign in a user, persist data) will
-    happen within the context of the app whose ID we specified.
-  </p>
-
   <h3>Letting new users create an account</h3>
 
   <p>
-    Any actions that our users take needs to happen within an authenticated session. We'll start by adding a way to for new users to create an account with our app.
+    Before our users can start creating to-dos, we need to give them a way to create an account with our app.
   </p>
 
-  <p>First, we'll add a sign up form:</p>
+  <p>First, let's add a sign up form:</p>
 
   <div>
     <pre data-line="2-11">
@@ -215,7 +209,7 @@
     </pre>
   </div>
 
-  <p>Then, we'll add the code to handle the form submission:</p>
+  <p>Then, let's add the code to handle the form submission:</p>
 
   <div>
     <pre data-line="5-16">
@@ -242,7 +236,7 @@
   </div>
 
   <p>
-    Whenever someone submits the form, the <code class="language-javascript">handleSignUp</code> function will be called.
+    Now, whenever someone submits the form, the <code class="language-javascript">handleSignUp</code> function will be called.
   </p>
 
   <p>
@@ -251,12 +245,12 @@
   </p>
 
   <p>
-    Next we get the values of the username and password inputs and call
+    Next, we get the values of the username and password inputs and call
     <code class="language-javascript">userbase.signUp(username, password)</code>. This will request a new account to be created with the Userbase service, and returns a Promise that resolves with a <code class="language-javascript">user</code> object.
   </p>
 
   <p>
-    Go ahead and reload the web app in your browser. Enter a username and password in the form under "Sign Up" and submit. You'll get an alert saying that you signed up. And if go to your Userbase developer account, you should see the new user under your app.
+    Go ahead and reload the page in your browser. Enter a username and password in the form and submit. You should get an alert saying that you signed up. And if go to your Userbase developer account, you should also see the new user under your app.
   </p>
 
   <p>
@@ -269,9 +263,9 @@
 
   <h3>Letting users log in</h3>
 
-  <p>Now that users can create accounts, let's give them the ability to sign in.</p>
+  <p>Now that our users can create accounts, let's give them the ability to login.</p>
 
-  <p>First, we'll add a "Login" form to the page above our "Create Account" form:</p>
+  <p>First, let's add a "Login" form to the page above our "Create Account" form:</p>
 
   <pre data-line="4-10">
     <code class="language-markup">
@@ -291,7 +285,7 @@
     </code>
   </pre>
 
-  <p>Then, we'll add code to handle the form submission:</p>
+  <p>Then, let's add the code to handle the form submission:</p>
 
   <pre data-line="5-14">
     <code class="language-markup">
@@ -313,7 +307,7 @@
       function handleSignUp(e) {
         e.preventDefault()
 
-    ...
+    …
 
     &lt;/script&gt;
 
@@ -327,7 +321,7 @@
     &#x3C;!-- application code --&#x3E;
     &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
 
-    ...
+    …
 
         .catch((e) => document.getElementById('signup-error').innerHTML = e)
       }
@@ -340,12 +334,12 @@
   </pre>
 
   <p>
-    You'll notice this looks very similar to the sign up code above. The <code class="language-javascript">handleLogin</code> function prevents the default form behavior, extracts the input values from the DOM, and calls <code class="language-javascript">userbase.signIn(username, password)</code>. This will attempt to sign in the user with the Userbase service, handling a success with an alert and a failure by displaying the error.
+    You'll notice that this looks very similar to the sign up code from before. The <code class="language-javascript">handleLogin</code> function prevents the default form behavior, extracts the input values from the DOM, and calls <code class="language-javascript">userbase.signIn(username, password)</code>. This will attempt to sign in the user with the Userbase service, handling a success with an alert and a failure by displaying the error.
   </p>
 
   <p>
-    Reload the app and you should see our new login form. Enter the username and
+    Reload the page and you should see our new login form. Enter the username and
-    password you used to create an account in the step above, and submit the form.
+    password you used to create an account in the previous step, and submit the form.
     You should get an alert saying that you signed in.
   </p>
 
@@ -361,10 +355,16 @@
     to the user they are logged in, and display their to-do list.
   </p>
 
-  <p>First, we'll add a new container under the authentication forms:</p>
+  <p>First, let's add a container for the to-do list under the authentication forms:</p>
 
-  <pre data-line="3-9">
+  <pre data-line="8-14">
     <code class="language-markup">
+
+    &#x3C;!-- Auth View --&#x3E;
+    &#x3C;div id=&#x22;auth-view&#x22;&#x3E;
+
+    …
+
     &#x3C;/div&#x3E;
 
     &#x3C;!-- To-dos View --&#x3E;
@@ -379,34 +379,43 @@
     &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
       userbase.configure({ appId: 'YOUR_APP_ID' })
 
-    ...
+    …
 
     &#x3C;/script&#x3E;
     </code>
   </pre>
 
-  <p>Then, we'll add a function to display this view and initially make it hidden:</p>
+  <p>Then, let's add a function to display this view and initially make it hidden:</p>
 
   <div>
-    <pre data-line="1-5,10">
+    <pre data-line="9-13,18">
-      <code class="language-javascript">
+      <code class="language-markup">
-      function showTodos(username) {
+      &#x3C;!-- application code --&#x3E;
-        document.getElementById('auth-view').style.display = 'none'
+      &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
-        document.getElementById('todo-view').style.display = 'block'
+
-        document.getElementById('username').innerHTML = username
+      …
-      }
+
+          .catch((e) => document.getElementById('signup-error').innerHTML = e)
+        }
+
+        function showTodos(username) {
+          document.getElementById('auth-view').style.display = 'none'
+          document.getElementById('todo-view').style.display = 'block'
+          document.getElementById('username').innerHTML = username
+        }
+        
+        document.getElementById('login-form').addEventListener('submit', handleLogin)
+        document.getElementById('signup-form').addEventListener('submit', handleSignUp)
       
-      document.getElementById('login-form').addEventListener('submit', handleLogin)
+        document.getElementById('todo-view').style.display = 'none'
-      document.getElementById('signup-form').addEventListener('submit', handleSignUp)
+      &#x3C;/script&#x3E;
-      
-      document.getElementById('todo-view').style.display = 'none'
       </code>
     </pre>
   </div>
 
   <p>
     Now that we have a function to show a view for signed in users, let's change
-    <code class="language-javascript">handleLogin</code> to call this function when it succeeds:
+    <code class="language-javascript">handleLogin</code> to call this function instead of showing an alert:
   </p>
 
   <pre data-line="7">
@@ -440,26 +449,24 @@
   </pre>
 
   <p>
-    Reload the app and sign in again using your username and password. You should see the
+    Reload the page and login again using your username and password. You should see the
     authentication view disappear and your username show up along with the to-do list heading.
   </p>
 
-  <h3>Using to the database</h3>
+  <h3>Using the database</h3>
 
   <p>
-    Each time a new session is started, we need to establish a connection with the
+    Each time a user signs in, we need to establish a connection with the database that will hold that user's to-dos.
-    database that will hold that user's to-dos.
   </p>
 
   <p>
-    First, let's add a couple of elements for showing a loading indicator and error
+    First, let's add a couple of elements for showing a loading indicator and error messages:
-    messages:
   </p>
 
   <pre data-line="6-7">
     <code class="language-markup"><!--
     <div id="todo-view">
-      <div id="username"></div>
+      <span id="username"></span>
 
       <h1>To-Do List</h1>
       <div id="todos"></div>
@@ -471,32 +478,29 @@
 
   <p>Then, we'll change <code class="language-javascript">showTodos</code> to open a new database with the Userbase service:</p>
 
-  <pre data-line="5,7-17,20-28">
+  <pre data-line="5,7-12,15-25">
     <code class="language-javascript">
     function showTodos(username) {
       document.getElementById('auth-view').style.display = 'none'
       document.getElementById('todo-view').style.display = 'block'
-        
+
       // reset the todos view
       document.getElementById('username').innerHTML = username
+      document.getElementById('todos').innerText = ''
       document.getElementById('db-loading').style.display = 'block'
       document.getElementById('db-error').innerText = ''
 
       userbase.openDatabase('todos', handleDatabaseChange)
-        .then(() => {
+        .catch((e) => document.getElementById('db-error').innerText = e)
-          document.getElementById('db-loading').style.display = 'none'
-        })
-        .catch((e) => {
-          document.getElementById('db-loading').style.display = 'none'
-          document.getElementById('db-error').innerText = e
-        })
     }
 
     function handleDatabaseChange(items) {
+      document.getElementById('db-loading').style.display = 'none'
+
       const todosList = document.getElementById('todos')
 
       if (items.length === 0) {
-        todosList.innerText = "Empty"
+        todosList.innerText = 'Empty'
       } else {
         // render to-dos, not yet implemented
       }
@@ -516,9 +520,9 @@
   </p>
 
   <p>
-    Reload the app and sign in. You'll see the "Loading to-dos..." as a connection
+    Reload the page and sign in again. You'll see the "Loading to-dos..." as a connection
-    to the database is established followed by "Empty" indicating there are
+    to the database is established followed by "Empty", indicating there are
-    currently no to-dos.
+    currently no to-dos in the database.
   </p>
 
 
@@ -529,13 +533,15 @@
     Let's implement that case in <code class="language-javascript">handleDatabaseChange</code>:
   </p>
 
-  <pre data-line="7-22">
+  <pre data-line="9-24">
     <code class="language-javascript"><!--
     function handleDatabaseChange(items) {
+      document.getElementById('db-loading').style.display = 'none'
+
       const todosList = document.getElementById('todos')
 
       if (items.length === 0) {
-        todosList.innerText = "Empty"
+        todosList.innerText = 'Empty'
       } else {
         // clear the list
         todosList.innerHTML = ''
@@ -560,12 +566,12 @@
 
   <h3>Adding to-dos</h3>
 
-  <p>Let's add a form for creating new to-dos:</p>
+  <p>Now, let's add a form for creating new to-dos:</p>
 
   <script type="text/plain" data-line="10-14" class="language-markup">
   <!-- To-dos View -->
   <div id="todo-view">
-    <div id="username"></div>
+    <span id="username"></span>
 
     <h1>To-Do List</h1>
     <div id="todos"></div>
@@ -580,13 +586,13 @@
   </div>
   </script>
 
-  <p>Then, add code to handle the form submission:</p>
+  <p>Then, let's add the code to handle the form submission:</p>
 
-  <pre data-line="5-13,18">
+  <pre data-line="5-13,17,20">
     <code class="language-markup">
     &lt;!-- application code --&gt;
     &lt;script type=&quot;text/javascript&quot;&gt;
-    ...
+    …
 
       function addTodoHandler(e) {
         e.preventDefault()
@@ -600,10 +606,11 @@
 
       document.getElementById('login-form').addEventListener('submit', handleLogin)
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)
-
       document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
+
       document.getElementById('todo-view').style.display = 'none'
-      
+      document.getElementById('add-todo-form').style.display = 'none'
+
     &lt;/script&gt;
     </code>
   </pre>
@@ -617,12 +624,42 @@
   </p>
 
   <p>
-    Reload the app and add some to-dos. Then reload the app again and the to-dos should automatically appear after you login.
+    We hide the <code class="language-markup">add-todo-form</code> element until
+    the user logs in:
+  </p>
+
+  <pre data-line="8">
+    <code class="language-markup">
+    &lt;!-- application code --&gt;
+    &lt;script type=&quot;text/javascript&quot;&gt;
+    …
+
+      function showTodos(username) {
+        document.getElementById('auth-view').style.display = 'none'
+        document.getElementById('todo-view').style.display = 'block'
+        document.getElementById('add-todo-form').style.display = 'block'
+
+        // reset the todos view
+        document.getElementById('username').innerHTML = username
+        document.getElementById('todos').innerText = ''
+        document.getElementById('db-loading').style.display = 'block'
+        document.getElementById('db-error').innerText = ''
+
+        userbase.openDatabase('todos', handleDatabaseChange)
+          .catch((e) => document.getElementById('db-error').innerText = e)
+      }
+
+    &lt;/script&gt;
+    </code>
+  </pre>
+
+  <p>
+    Reload the page and add some to-dos. Then, reload the page again and the to-dos should automatically appear after you login. These to-dos have been successfully persisted in the end-to-end encrypted Userbase database.
   </p>
 
   <h3>Updating to-dos</h3>
 
-  <p>Let's modify how we are rendering the to-do items so we can mark them as completed:</p>
+  <p>Now, let's add a checkbox to allow to-dos to be marked as completed:</p>
 
   <pre data-line="4-16,26">
     <code class="language-javascript">
@@ -647,7 +684,7 @@
       const todoLabel = document.createElement('label')
       todoLabel.innerHTML = items[i].item.todo
 
-    ...
+    …
 
       // append the todo item to the list
       const todoItem = document.createElement('div')
@@ -659,12 +696,12 @@
   </pre>
 
   <p>
-    Reload the app and complete some to-dos. Their state should presist after you reload the app and login again.
+    Reload the page and complete some to-dos. Their state should persist even after you reload the page and login again.
   </p>
 
   <h3>Deleting to-dos</h3>
 
-  <p>Let's create a button for deleting a to-do:</p>
+  <p>And finally, let's create a button for deleting a to-do:</p>
 
   <pre data-line="4-11">
     <code class="language-javascript">
@@ -686,7 +723,7 @@
     </code>
   </pre>
 
-  <p>And append the delete button to the to-do element:</p>
+  <p>And now let's append the delete button to the to-do element:</p>
 
   <pre data-line="3">
     <code class="language-javascript">
@@ -700,7 +737,7 @@
   </pre>
 
   <p>
-    Reload the app and delete some to-dos. They should no longer show up even after you reload the app and login again.
+    Reload the page and delete some to-dos. They should no longer show up even after you reload the page and login again.
   </p>
 
   <h3>Polishing up</h3>
@@ -714,7 +751,7 @@
   <script type="text/plain" data-line="4-5" class="language-markup">
   <!-- To-dos View -->
   <div id="todo-view">
-    <div id="username"></div>
+    <span id="username"></span>
     <input type="button" value="Logout" id="logout-button">
     <div id="logout-error"></div>
 
@@ -722,14 +759,14 @@
     <div id="todos"></div>
   </script>
 
-  <p>Then, add code to handle click event and log out the user:</p>
+  <p>Then, let's add the code to handle the logout:</p>
 
   <pre data-line="9-13,21-30,40">
     <code class="language-markup">
     &#x3C;!-- application code --&#x3E;
     &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
     
-    ...
+    …
 
         .catch((e) => document.getElementById('signup-error').innerHTML = e)
       }
@@ -744,7 +781,7 @@
         document.getElementById('auth-view').style.display = 'none'
         document.getElementById('todo-view').style.display = 'block'
 
-    ...
+    …
 
       function showAuth() {
         document.getElementById('todo-view').style.display = 'none'
@@ -760,26 +797,25 @@
       function handleDatabaseChange(items) {
         const todosList = document.getElementById('todos')
 
-    ...
+    …
 
       document.getElementById('login-form').addEventListener('submit', handleLogin)
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)
       document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
       document.getElementById('logout-button').addEventListener('click', handleLogout)
+
       document.getElementById('todo-view').style.display = 'none'
     &lt;/script&gt;
     </code>
   </pre>
 
-  <p>The <code class="language-javascript">handleLogout</code> function calls <code class="language-javascript">userbase.signOut</code> which sends a request to end the user's session to the Userbase service. A Promise is returned that resolves when the user was signed out, in which case we hide the to-do view and show the authentication view.</p>
+  <p>The <code class="language-javascript">handleLogout</code> function calls <code class="language-javascript">userbase.signOut</code> which sends a request to end the user's session to the Userbase service. A Promise is returned that resolves when the user is signed out, in which case we hide the to-do view and show the authentication view.</p>
 
   <h3>Automatically resuming a session</h3>
 
-  <p>Whenever a user logs in, the Userbase SDK will store information about the session in browser to allow the session to be resumed when the user returns after having navigating away.</p>
+  <p>Whenever a user logs in, the Userbase SDK will store information about the session in the browser to allow it to be resumed when the user returns after having navigating away.</p>
 
-  <p>Let's modify our app to automatically sign in a user when the page loads. We'll add a view that indicates we are signing in the user:</p>
+  <p>Let's modify our app to automatically sign in a returning user when the page loads. First, we'll add a view that indicates we are signing in the user:</p>
-
-  <p>Add a view to show when the app is figuring out whether it can resume a previous session:</p>
 
   <pre data-line="4-5">
     <code class="language-markup">
@@ -795,14 +831,14 @@
     </code>
   </pre>
 
-  <p>In order to automatically resume a session if one is available, we add the following to our application code:</p>
+  <p>In order to automatically resume a session if one is available, we need to add the following to our application code:</p>
 
-  <pre data-line="9,12, 14-23">
+  <pre data-line="12-17">
     <code class="language-markup">
     &#x3C;!-- application code --&#x3E;
     &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
     
-    ...
+    …
     
       document.getElementById('login-form').addEventListener('submit', handleLogin)
       document.getElementById('signup-form').addEventListener('submit', handleSignUp)
@@ -813,15 +849,9 @@
       document.getElementById('auth-view').style.display = 'none'
 
       userbase.signInWithSession()
-        .then((session) => {
+        .then((session) => session.user ? showTodos(session.user.username) : showAuth())
-          if (session.user) {
-            showTodos(session.user.username)
-          } else {
-            showAuth()
-            document.getElementById('loading-view').style.display = 'none')
-          }
-        })
         .catch(() => showAuth())
+        .finally(() => document.getElementById('loading-view').style.display = 'none')
 
     &lt;/script&gt;
     </code>
@@ -832,7 +862,7 @@
   </p>
 
   <p>
-    We make a call to <code class="language-javascript">userbase.signInWithSession</code> to attempt to sign in the user
+    Then, we make a call to <code class="language-javascript">userbase.signInWithSession</code> to attempt to sign in the user
     using an existing session as soon as our app loads.
   </p>
 
@@ -847,14 +877,16 @@
 
   <h3>What's next?</h3>
 
+  <p>And that was it! A fully working (but ugly) web app in just 185 lines of code, including markup and comments.</p>
+
   <p>
-    In a real project you'll likely want a more sophisticated approach: for instance, you may use React to control the DOM or a module bundler to package your application from multiple files, and at the very
+    In a real project you'll likely want to use a more sophisticated approach. For instance, you may want to use React to control the DOM, or a module bundler to package your application from multiple files. At the very
-    least you'll want to display better error messages and add some styling.
+    least, you'll want to add some styling.
   </p>
 
   <p>
-    We are working on a collection of tutorials and sample applications that will
+    We are working on a collection of new tutorials and sample applications that will
-    show you how to do all these things with Userbase and more. You can <a href="/mailing-list">subscribe to our mailing list</a> to get updates on these and more.
+    show you how to do all these things with Userbase, and more. You can <a href="/mailing-list">subscribe to our mailing list</a> to get updates like these in your inbox.
   </p>
 
   <p>If you have any questions, or there's anything we can do to help you with your web app, please get in touch via <a href="mailto:daniel@encrypted.dev">email</a> or <a href="https://twitter.com/UserbaseHQ">Twitter</a>. Thank you!</p>

src/pages/docs_sdk_configure.html

@@ -0,0 +1,31 @@
+<div class="section">
+  <h2><a href="/docs/#sdk">SDK</a> : Configure</h2>
+
+  <p><span class="font-semibold">Configure</span> lets you configure your Userbase client.</p>
+
+  <pre>
+    <code class="language-javascript">userbase.configure({ appId, endpoint })</code>
+  </pre>
+
+  <h3 id="params">Parameters</h3>
+
+  <ul>
+    <li>
+      <span class="field">settings</span> [object] - Contains your configuration settings.
+      <ul>
+        <li><span class="field">appId</span> [string] - Your App ID you received when you created a Userbase application.</li>
+        <li><span class="field">endpoint</span> [string] - If you're hosting your own Userbase server, you can provide its endpoint here.</li>
+      </ul>
+    </li>
+  </ul>
+
+  <h3 id="errors">Errors</h3>
+
+  <ul>
+    <li>ConfigParametersMissing</li>
+    <li>UserAlreadySignedIn</li>
+  </ul>
+
+</div>
+
+<hr>

src/pages/docs_sdk_delete.html

@@ -30,11 +30,11 @@
     <li>DatabaseNameTooLong</li>
     <li>DatabaseNameMustBeString</li>
     <li>ItemIdCannotBeBlank</li>
+    <li>ItemIdTooLong</li>
     <li>ItemIdMustBeString</li>
     <li>ItemDoesNotExist</li>
     <li>ItemUpdateConflict</li>
-    <li>AppIdNotSet</li>
+    <li>UserNotSignedIn</li>
-    <li>AppIdNotValid</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_insert.html

@@ -18,10 +18,10 @@
       <span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
     </li>
     <li>
-      <span class="field">itemId</span> [string | Len: 1-100] - The item's unique identifier.
+      <span class="field">item</span> [object | Max size: 10&nbsp;KB] - The item to insert.
     </li>
     <li>
-      <span class="field">item</span> [object | Max size: 10&nbsp;KB] - The item to insert.
+      <span class="field">itemId</span> [string | Len: 1-100] - The item's unique identifier.
     </li>
   </ul>
 
@@ -32,13 +32,12 @@
     <li>DatabaseNameCannotBeBlank</li>
     <li>DatabaseNameTooLong</li>
     <li>DatabaseNameMustBeString</li>
-    <li>ItemIdCannotBeBlank</li>
     <li>ItemIdTooLong</li>
     <li>ItemIdMustBeString</li>
+    <li>ItemMissing</li>
     <li>ItemTooLarge</li>
     <li>ItemAlreadyExists</li>
-    <li>AppIdNotSet</li>
+    <li>UserNotSignedIn</li>
-    <li>AppIdNotValid</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_open-database.html

@@ -35,12 +35,13 @@
 
   <ul>
     <li>DatabaseAlreadyOpen</li>
+    <li>DatabaseAlreadyOpening</li>
     <li>DatabaseNameCannotBeBlank</li>
     <li>DatabaseNameTooLong</li>
     <li>DatabaseNameMustBeString</li>
+    <li>ChangeHandlerMissing</li>
     <li>ChangeHandlerMustBeFunction</li>
-    <li>AppIdNotSet</li>
+    <li>UserNotSignedIn</li>
-    <li>AppIdNotValid</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_sign-in-with-session.html

@@ -37,6 +37,8 @@
   <ul>
     <li>AppIdNotSet</li>
     <li>AppIdNotValid</li>
+    <li>UserAlreadySignedIn</li>
+    <li>UserCanceledSignIn</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_sign-in.html

@@ -47,6 +47,8 @@
     <li>PasswordMustBeString</li>
     <li>AppIdNotSet</li>
     <li>AppIdNotValid</li>
+    <li>UserAlreadySignedIn</li>
+    <li>UserCanceledSignIn</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_sign-out.html

@@ -15,8 +15,6 @@
 
   <ul>
     <li>UserNotSignedIn</li>
-    <li>AppIdNotSet</li>
-    <li>AppIdNotValid</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_sign-up.html

@@ -47,6 +47,7 @@
     <li>PasswordMustBeString</li>
     <li>AppIdNotSet</li>
     <li>AppIdNotValid</li>
+    <li>UserAlreadySignedIn</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_transaction.html

@@ -1,12 +1,22 @@
 <div class="section">
   <h2><a href="/docs/#sdk">SDK</a> : Transaction</h2>
 
-  <pre>
+  <p><span class="font-semibold">Transaction</span> lets you submit multiple database operations as a single atomic batch. Either all operations succeed, or the entire batch fails. You will never see partial updates. This API will return a promise that gets resolved once the transaction has been fully applied and durably persisted in the database.</p>
-    <code class="language-javascript">userbase.transaction(databaseName, operations)
-  .then(() => {
 
-  })
+  <pre>
-  .catch((e) => console.error(e))</code>
+    <code class="language-javascript">
+    const operations = [
+      { command: 'Update', item: { todo: 'Item A' }, id: '0001' },
+      { command: 'Insert', item: { todo: 'Item B' }, id: '0002' },
+      { command: 'Delete', item: { todo: 'Item C' }, id: '0003' }
+    ]
+
+    userbase.transaction(databaseName, operations)
+      .then(() => {
+        // transaction applied
+      })
+    .catch((e) => console.error(e))
+    </code>
   </pre>
 
   <h3 id="params">Parameters</h3>
@@ -16,7 +26,7 @@
       <span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
     </li>
     <li>
-      <span class="field">operations</span> [Array] - The Insert, Update, or Delete operations to execute in an atomic transaction.
+      <span class="field">operations</span> [Array] - The Insert, Update, or Delete operations to execute as an atomic transaction.
     </li>
   </ul>
 
@@ -27,7 +37,9 @@
     <li>DatabaseNameCannotBeBlank</li>
     <li>DatabaseNameTooLong</li>
     <li>DatabaseNameMustBeString</li>
+    <li>OperationsMissing</li>
     <li>OperationsMustBeArray</li>
+    <li>OperationsConflict</li>
     <li>ItemIdCannotBeBlank</li>
     <li>ItemIdTooLong</li>
     <li>ItemIdMustBeString</li>
@@ -35,8 +47,7 @@
     <li>ItemAlreadyExists</li>
     <li>ItemDoesNotExist</li>
     <li>ItemUpdateConflict</li>
-    <li>AppIdNotSet</li>
+    <li>UserNotSignedIn</li>
-    <li>AppIdNotValid</li>
     <li>ServiceUnavailable</li>
   </ul>
 

src/pages/docs_sdk_update.html

@@ -18,10 +18,10 @@
       <span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
     </li>
     <li>
-      <span class="field">itemId</span> [string | Len: 1-100] - The unique identifier of the item to replace.
+      <span class="field">item</span> [object | Max size: 10&nbsp;KB] - The object to overwrite the existing item with.
     </li>
     <li>
-      <span class="field">item</span> [object | Max size: 10&nbsp;KB] - The object to overwrite the existing item with.
+      <span class="field">itemId</span> [string | Len: 1-100] - The unique identifier of the item to replace.
     </li>
   </ul>
 
@@ -34,11 +34,12 @@
     <li>DatabaseNameMustBeString</li>
     <li>ItemIdCannotBeBlank</li>
     <li>ItemIdMustBeString</li>
+    <li>ItemIdTooLong</li>
+    <li>ItemMissing</li>
     <li>ItemTooLarge</li>
     <li>ItemDoesNotExist</li>
     <li>ItemUpdateConflict</li>
-    <li>AppIdNotSet</li>
+    <li>UserNotSignedIn</li>
-    <li>AppIdNotValid</li>
     <li>ServiceUnavailable</li>
   </ul>