mozilla

Revision 474825 of Roller

  • Revision slug: Web/Apps/Reference_apps/Roller
  • Revision title: Roller
  • Revision id: 474825
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment
Tags: 

Revision Content

Roller is a micro blog app that allows you to post text, upload an image or paste a link that has an image extension such as jpg, gif, png or jpeg. Read the full developer walkthrough

Difficulty: Advanced

Code Breakdown:

  • 5% HTML
  • 26% CSS
  • 69% JavaScript

 

 

Web API Usage

appcache
Chrono does not require a network connection to run.
Open Web Apps
Uses the Open Web Apps installation API to allow installation on the device independently on Marketplace.

Custom Elements

Gaia Building Blocks
Chrono uses the same UI components as the built-in apps.

Third-party Libraries

volo.js
Uses a volo.js script to optimize app before release, i.e. by auto-generating an appcache manifest.
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/6235/roller1.jpg" style="width: 179px; height: 269px; float: left; padding-right: 30px; padding-bottom: 30px;">
  <p>Roller is a micro blog app that allows you to post text, upload an image or paste a link that has an image extension such as jpg, gif, png or jpeg. <a class="walkthrough" href="https://github.com/ednapiranha/roller/tree/master/doc/development_process.md"> Read the full developer walkthrough </a></p>
  <p>Difficulty: Advanced</p>
  <p>Code Breakdown:</p>
  <ul style="position: relative; left: 30px">
    <li>5% HTML</li>
    <li>26% CSS</li>
    <li>69% JavaScript</li>
  </ul>
  <p> </p>
  <div id="view-code">
          <a class="app-source button" href="https://github.com/ednapiranha/roller/">View Source</a>
  <a class="app-source button" href="https://github.com/ednapiranha/roller/archive/master.zip">Download</a>
      </div>
</div>
<p> </p>
<h2 id="Web_API_Usage"><a class="walkthrough" href="https://hacks.mozilla.org/2012/11/hacking-firefox-os/">Web API Usage</a></h2>
<dl>
  <dt>
    <a href="/en-US/docs/HTML/Using_the_application_cache">appcache</a></dt>
  <dd>
    Chrono does not require a network connection to run.</dd>
  <dt>
    <a href="/en-US/docs/Web/Apps/JavaScript_API">Open Web Apps</a></dt>
  <dd>
    Uses the Open Web Apps installation API to allow installation on the device independently on Marketplace.</dd>
</dl>
<h2 id="Custom_Elements">Custom Elements</h2>
<dl>
  <dt id="Gaia_Building_Blocks">
    <a href="https://wiki.mozilla.org/Gaia/Design/BuildingBlocks">Gaia Building Blocks</a></dt>
  <dd>
    Chrono uses the same UI components as the built-in apps.</dd>
</dl>
<h2 id="Third-party_Libraries">Third-party Libraries</h2>
<dl>
  <dt>
    <a href="http://volojs.org/" rel="external" target="_blank">volo.js</a></dt>
  <dd>
    Uses a volo.js script to optimize app before release, i.e. by auto-generating an appcache manifest.</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