Tag: html

MDwiki: Javascript/HTML 5 CMS/Wiki that runs on the client

http://dynalon.github.io/mdwiki/#!index.md

Ya’ll know how I like my Markdown. Markdown and wikis. Like chocolate and peanut butter.

From the MDwiki webpage:

MDwiki is a CMS/Wiki completely built in HTML5/Javascript and runs 100% on the client. No special software installation or server side processing is > required. Just upload the mdwiki.html shipped with MDwiki into the same directory as your markdown files and you are good to go!

Thymeleaf: Extensible Java-based XML / XHTML / HTML5 template engine

Thymeleaf Logo

A Java templating language. I like how the syntax modifies attributes on existing tags like this:

<input type="text" th:field="*{name}" />

From the Thymeleaf website:

Thymeleaf is a Java library. It is an XML / XHTML / HTML5 template engine
(extensible to other formats) that can work both in web and non-web
environments. It is better suited for serving XHTML/HTML5 at the view layer of
web applications, but it can process any XML file even in offline environments.

It provides an optional module for integration with Spring MVC, so that you
can use it as a complete substitute of JSP in your applications made with this
technology, even with HTML5.

The main goal of Thymeleaf is to provide an elegant and well-formed way of
creating templates. Its Standard and SpringStandard dialects allow you to
create powerful natural templates, that can be correctly displayed by browsers
and therefore work also as static prototypes. You can also extend Thymeleaf by
developing your own dialects.

Sample markup

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</th>
      <th th:text="#{msgs.headers.price}">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

YDN-DB: HTML5 Javascript database library for IndexedDB

yathit logo

OK. So I’m not even gonna lie. I had no idea what IndexedDB was before I came across YDN-DB. I’ve only dabbled with serious JavaScript development so far, and the framework-soup that has arisen in the space rivals Java at this point.

Anyway, on to the website!

YDN-DB is a pure javascript library, which uses HTML5 browser database sunch as IndexedDB, WebDatabase (WebSQL) and WebStorage (localStorage). Most
modern browsers including IE10, Chrome, Firefox and Safari support either IndexedDB or WebSQL. The library can also be used in web client such as
phonegap, WebView and UIWebView mobile clients.

Supports:

  • Chrome 4+ (IndexedDB or WebSql)
  • Firefox 3+ (IndexedDB draft), Firefox 10+ (IndexedDB)
  • IE 6 (userdata), IE7+ (localStorage), IE10+ desktop/mobile (IndexedDB)
  • Safari 3.1+ desktop/mobile/iOS web client (WebSql)
  • Android web client, Android browser 2.1+ (WebSql), 4+ (IndexedDB)
  • Opera 10+ (WebSql), Opera 15+ (IndexedDB)

Code snippets:

var db = new ydn.db.Storage('db-name');
db.put('store-name', {message: 'Hello world!'}, 'id1');
db.get('store-name', 'id1').always(function(record) {
  console.log(record);
});

Indexed Queries

var q = db.from('people').where('age', '>=', 25);
q.list(10).done(function(peoples) {
  console.log(peoples); // list of first 10 peoples
});

var q = db.from('people').where('country', '=', 'US').order('name');
q.list(10).done(function(peoples) {
  console.log(peoples); // list of first 10 peoples from US ordered by name
});
q.list(10).done(function(peoples) {
  console.log(peoples); // next 10 peoples
});

Streaming API for reduced memory usage

var q = db.from('author').where('first', 'starts', input_value);
var ul = document.getElementById('auto-suggestion-list');
ul.innerHTML = '';
q.open(function (cursor) {
  var li = document.createElement('li');
  var people = cursor.getValue();
  li.textContent = people.first + ' ' + people.last;
});

Synchronize with REST backend services

var schema = {
  stores: [{
        name: 'todo',
        keyPath: 'id',
        Sync: {
          format: 'gcs',  // Google Cloud Storage
          Options: {
            bucket: 'ydn-note-data',
            prefix: 'todo/'
          }
        }
  }]
};
var db = new ydn.db.Storage(db_name, schema);
// GET https://ydn-note-data.storage.googleapis.com/todo/id123
db.get('todo', 'id123');
// PUT https://ydn-note-data.storage.googleapis.com/todo/id123
db.put('todo', 'id123');
// DELETE https://ydn-note-data.storage.googleapis.com/todo/id123
db.remove('todo', 'id123');