zev/userbase-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor edits to tutorial language + ellipsis fix

Browse Source
This commit is contained in:
Justin Berman
2019-11-02 00:18:46 -07:00
parent 16531a03db
commit edf82b6a28
1 changed files with 45 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/docs.html
View File

@@ -24,9 +24,7 @@
<pre> <pre>
<code class="language-markup"><!-- <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> --></code>
</pre> </pre>
@@ -92,11 +90,11 @@
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 fully functional web app. Making things pretty is left as an exercise to the reader.
</p> </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>You can see a live demo of what we'll be building <a href="https://ugliest-todo.netlify.com/" target="_blank">here</a>.</p>
<h3>Prerequisites</h3> <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>You just need to be familiar with <a href="https://www.w3schools.com/html/html_editors.asp" target="_blank"">HTML</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" target="_blank">JavaScript basics</a>.</p>
<h3>Setting up</h3> <h3>Setting up</h3>
@@ -136,7 +134,7 @@
<h3>Creating a developer account</h3> <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, you'll need it in a second.</p>
<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. 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.
@@ -147,14 +145,12 @@
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 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: our page:
<pre data-line="4-6"> <pre data-line="4">
<code class="language-markup"><!-- <code class="language-markup"><!--
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ugliest To-Do App</title> <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> </head>
--></code> --></code>
</pre> </pre>
@@ -165,7 +161,7 @@
<p> <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 Application 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 created your developer account:
</p> </p>
<pre data-line="4"> <pre data-line="4">
@@ -313,7 +309,7 @@
function handleSignUp(e) { function handleSignUp(e) {
e.preventDefault() e.preventDefault()
... …
&lt;/script&gt; &lt;/script&gt;
@@ -327,7 +323,7 @@
&#x3C;!-- application code --&#x3E; &#x3C;!-- application code --&#x3E;
&#x3C;script type=&#x22;text/javascript&#x22;&#x3E; &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
... …
.catch((e) => document.getElementById('signup-error').innerHTML = e) .catch((e) => document.getElementById('signup-error').innerHTML = e)
} }
@@ -363,8 +359,14 @@
<p>First, we'll add a new container under the authentication forms:</p> <p>First, we'll add a new container under the authentication forms:</p>
<pre data-line="3-9"> <pre data-line="8-14">
<code class="language-markup"> <code class="language-markup">
&#x3C;!-- Auth View --&#x3E;
&#x3C;div id=&#x22;auth-view&#x22;&#x3E;
…
&#x3C;/div&#x3E; &#x3C;/div&#x3E;
&#x3C;!-- To-dos View --&#x3E; &#x3C;!-- To-dos View --&#x3E;
@@ -379,7 +381,7 @@
&#x3C;script type=&#x22;text/javascript&#x22;&#x3E; &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
userbase.configure({ appId: 'YOUR_APP_ID' }) userbase.configure({ appId: 'YOUR_APP_ID' })
... …
&#x3C;/script&#x3E; &#x3C;/script&#x3E;
</code> </code>
@@ -388,8 +390,16 @@
<p>Then, we'll add a function to display this view and initially make it hidden:</p> <p>Then, we'll add a function to display this view and initially make it hidden:</p>
<div> <div>
<pre data-line="1-5,10"> <pre data-line="9-13,18">
<code class="language-javascript"> <code class="language-javascript">
&#x3C;!-- application code --&#x3E;
&#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
…
.catch((e) => document.getElementById('signup-error').innerHTML = e)
}
function showTodos(username) { function showTodos(username) {
document.getElementById('auth-view').style.display = 'none' document.getElementById('auth-view').style.display = 'none'
document.getElementById('todo-view').style.display = 'block' document.getElementById('todo-view').style.display = 'block'
@@ -400,6 +410,7 @@
document.getElementById('signup-form').addEventListener('submit', handleSignUp) document.getElementById('signup-form').addEventListener('submit', handleSignUp)
document.getElementById('todo-view').style.display = 'none' document.getElementById('todo-view').style.display = 'none'
&#x3C;/script&#x3E;
</code> </code>
</pre> </pre>
</div> </div>
@@ -444,11 +455,11 @@
authentication view disappear and your username show up along with the to-do list heading. authentication view disappear and your username show up along with the to-do list heading.
</p> </p>
<h3>Using to the database</h3> <h3>Using the database</h3>
<p> <p>
Each time a new session is started, we need to establish a connection with the Each time a new session is started when a user signs up or logs in, we need to establish a
database that will hold that user's to-dos. connection with the database that will hold that user's to-dos.
</p> </p>
<p> <p>
@@ -586,7 +597,7 @@
<code class="language-markup"> <code class="language-markup">
&lt;!-- application code --&gt; &lt;!-- application code --&gt;
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
... …
function addTodoHandler(e) { function addTodoHandler(e) {
e.preventDefault() e.preventDefault()
@@ -647,7 +658,7 @@
const todoLabel = document.createElement('label') const todoLabel = document.createElement('label')
todoLabel.innerHTML = items[i].item.todo todoLabel.innerHTML = items[i].item.todo
... …
// append the todo item to the list // append the todo item to the list
const todoItem = document.createElement('div') const todoItem = document.createElement('div')
@@ -729,7 +740,7 @@
&#x3C;!-- application code --&#x3E; &#x3C;!-- application code --&#x3E;
&#x3C;script type=&#x22;text/javascript&#x22;&#x3E; &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
... …
.catch((e) => document.getElementById('signup-error').innerHTML = e) .catch((e) => document.getElementById('signup-error').innerHTML = e)
} }
@@ -744,7 +755,7 @@
document.getElementById('auth-view').style.display = 'none' document.getElementById('auth-view').style.display = 'none'
document.getElementById('todo-view').style.display = 'block' document.getElementById('todo-view').style.display = 'block'
... …
function showAuth() { function showAuth() {
document.getElementById('todo-view').style.display = 'none' document.getElementById('todo-view').style.display = 'none'
@@ -760,7 +771,7 @@
function handleDatabaseChange(items) { function handleDatabaseChange(items) {
const todosList = document.getElementById('todos') const todosList = document.getElementById('todos')
... …
document.getElementById('login-form').addEventListener('submit', handleLogin) document.getElementById('login-form').addEventListener('submit', handleLogin)
document.getElementById('signup-form').addEventListener('submit', handleSignUp) document.getElementById('signup-form').addEventListener('submit', handleSignUp)
@@ -802,7 +813,7 @@
&#x3C;!-- application code --&#x3E; &#x3C;!-- application code --&#x3E;
&#x3C;script type=&#x22;text/javascript&#x22;&#x3E; &#x3C;script type=&#x22;text/javascript&#x22;&#x3E;
... …
document.getElementById('login-form').addEventListener('submit', handleLogin) document.getElementById('login-form').addEventListener('submit', handleLogin)
document.getElementById('signup-form').addEventListener('submit', handleSignUp) document.getElementById('signup-form').addEventListener('submit', handleSignUp)