mozilla

Revision 474879 of General Notes

  • Revision slug: Web/Apps/Reference_apps/General_notes
  • Revision title: General notes
  • Revision id: 474879
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment

Revision Content

General Notes is a simple note app that allows you to sync local and remote content. Read the full developer walkthrough.

Difficulty: Medium

Code Breakdown:

  • 5% HTML
  • 14% CSS
  • 81% JavaScript

 

 

 

Web API Usage

IndexedDB
Stores local and remote notes on the client side.
appcache
Enables the page and functionality to work offline.

Third-party Libraries

Node.js
Both server and client code are written in JavaScript.
redis
A key-value store that contains all the server notes.
jQuery
Uses jQuery to simplify common tasks such as DOM manipulation.
RequireJS
Uses RequireJS to split JavaScript code into more easily maintainable modules.

Revision Source

<div class="summary">
  <img alt="" src="https://mdn.mozillademos.org/files/6239/notes1.jpg" style="width: 179px; height: 269px; float: left; padding-right: 30px; padding-bottom: 30px;" />
  <p>General Notes is a simple note app that allows you to sync local and remote content. <a class="walkthrough" href="https://hacks.mozilla.org/2013/05/building-a-notes-app-with-indexeddb-redis-and-node-js"> Read the full developer walkthrough</a>.</p>
  <p>Difficulty: Medium</p>
  <p>Code Breakdown:</p>
  <ul style="position: relative; left: 30px">
    <li>5% HTML</li>
    <li>14% CSS</li>
    <li>81% JavaScript</li>
  </ul>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="view-code">
    <a class="app-source button" href="https://github.com/ednapiranha/generalnotes/">View Source</a> <a class="app-source button" href="https://github.com/ednapiranha/generalnotes/archive/master.zip">Download</a></div>
</div>
<p>&nbsp;</p>
<h2 id="Web_API_Usage">Web API Usage</h2>
<dl>
  <dt>
    <a href="/en-US/docs/IndexedDB">IndexedDB</a></dt>
  <dd>
    Stores local and remote notes on the client side.</dd>
  <dt>
    <a href="/en-US/docs/HTML/Using_the_application_cache">appcache</a></dt>
  <dd>
    Enables the page and functionality to work offline.</dd>
</dl>
<h2 id="Third-party_Libraries">Third-party Libraries</h2>
<dl>
  <dt>
    <a href="http://nodejs.org/" rel="external" target="_blank">Node.js</a></dt>
  <dd>
    Both server and client code are written in JavaScript.</dd>
  <dt>
    <a href="http://redis.io" rel="external" target="_blank">redis</a></dt>
  <dd>
    A key-value store that contains all the server notes.</dd>
  <dt>
    <a href="http://jquery.com/" rel="external" target="_blank">jQuery</a></dt>
  <dd>
    Uses jQuery to simplify common tasks such as DOM manipulation.</dd>
  <dt>
    <a href="http://requirejs.org/" rel="external" target="_blank">RequireJS</a></dt>
  <dd>
    Uses RequireJS to split JavaScript code into more easily maintainable modules.</dd>
</dl>
Revert to this revision