Episode 0.6.7 – HTML5 Boilerplate, Modernizr, and more with Paul Irish

Adam and Wynn caught up with Paul Irish of Google’s Chrome developer relations team to talk about HTML5, JavaScript, CSS3, polyfills, and more. Items mentioned in the show: Paul Irish – Chrome dev relations guy at Google. Dion Almaer – Host of Function Source, all around JavaScript, frontend expert. “HTML5 is a jewel that we […]

capt: Command line tool for creating Backbone.js apps #

If you set out to use Backbone.js for a client-centric application, one thing you might miss coming from a server-side MVC framework is some basic file structure, dependency managment, and generator support. To solve this problem Ben Nolan has created Capt.

Capt is aimed at developers building single page, stand alone applications as well as server-backed applications using Node.js, bundling the following projects and languages:

Languages

  • Coffeescript
  • JavaScript
  • SCSS
  • LESS

Testing frameworks

  • Qunit
  • Jasmine [planned]

Libraries

  • jQuery
  • Backbone.js
  • Underscore.js
  • json2.js

Installation

You can grab Capt from npm

npm install capt

To check your installation and see usage help, just run capt in your
terminal:

Usage:

capt new projectname 
  - create a new project

capt server
  - serve the current project on port 3000

capt watch
  - watch the current project and recompile as needed

There’s also generators to create Backbone models and controllers:

capt generate model <model name>

capt generate controller <controller name>

Capt is still in alpha but is under active development. Got ideas? Why
not contribute?

[Source on GitHub] [Web
site
]

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith Adam and Wynn were joined by Nathan Smith, creator of 960.gs to talk about his new project Formalize and the latest news on The Changelog. Download MP3 Items mentioned in the show: Nathan Smith, front end dev, speaker, and author 960 Grid System […]

reveal: jQuery modal for HTML5 and data attributes #

The Zurb team has long pushed the envelope of CSS3. Now they’ve released a simple plugin for jQuery that uses HTML5 data attributes to wire up links to modal dialogs. To use, you’ll need jQuery, the plugin, and the base CSS:

<link rel="stylesheet" href="reveal.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>

To create a dialog, just create a <div> with a reveal-modal class and an ID:

<div id="theModal" class="reveal-modal">
    <h1>Listen to the Changelog</h1>
    <p class="lead">The Changelog is hands-down the best Open Source podcast on the interwebs.</p>
    <a class="close-reveal-modal">×</a>
</div>

Screencap

Now, we just need a link or button to open the dialog, wiring up via the data-reveal-id attribute:

<a href="#" data-reveal-id="theModal">What's the greatest tech podcast?</a>

Reveal also supports advanced options such as animation, animation speed, and close button behavior, specified in additional data-* attributes:

<a href="#" data-reveal-id="theModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">What's the greatest tech podcast?</a>

If you like Reveal, be sure and check out Orbit, a slick jQuery content slider plugin.

[Source on GitHub] [Reveal project page]

treesaver: HTML5, JavaScript library for creating magazine style layouts for iPad and web #

A new breed of mobile devices led by the Apple iPad are changing the way we think about web layout. Applications like Flipboard and Feedly have led the charge in a resurgence of magazine-style layouts both on the web and on the tablet.

Treesaver from Filipe Fortes is a new JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. Weighing in at just 25KB, Treesaver’s feature set is impressive providing support for grid and column layouts, custom UI’s, repeating content, cover pages, figures and illustrations, and analytics.

Demo 1 Demo 2

The Treesaver wiki has a nice walkthrough to get you started and the project ships with an HTML boilerplate for both your content:

<!doctype html>
<html class="no-js no-treesaver">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Sample Treesaver Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="resources" href="resources.html">
    <script src="treesaver-0.9.0.js"></script>
  </head>

  <body>
    <article>
      <p>This markup is an example of a page using Treesaver for layout. It is not very exciting right now.</p>
    </article>
  </body>
</html>

and your resources:

<!doctype html>
<html>
  <body>
    <div class="chrome">
      <div class="viewer"></div>
    </div>

    <div class="grid">
      <div class="column"></div>
    </div>

    <div class="loading">
      Loading
    </div>

    <div class="error">
      Error
    </div>
  </body>
</html>

Be sure and check out the impressive demos, especially on the iPad. With this first public release, Filipe admits the project still needs a lot of work. But the GitHub repo has a deep wiki and is very active. If you’re interested in contributing, you can help knock out the growing list of bugs and features.

iPad screenshot

[Source on GitHub] [Homepage]

Happy.js: Lightweight, extensible form validation plugin for jQuery/Zepto.js, HTML5, and Underscore.js #

The great thing about open source is that you’re likely to find a project that is as ‘full-featured’ or ‘lightweight’ as your tastes. Happy.js from Henrik Joreteg at &yet aims to be a lightweight form validation plugin for jQuery or Zepto.js that also supports the HTML5 required input attribute.

Setting up the script

To use Happy.js, you’ll need to include three items in your document’s <head>.

jQuery (or Zepto.js)

<script src="jquery.js"></script>

Happy.js itself

<script src="happy.js"></script>

Your JavaScript validation functions either externally referenced or inline, like this example:

<script type="text/javascript" charset="utf-8">
  var happy = {
    USPhone: function (val) {
      console.log('is phone called');
      return /^(?(d{3}))?[- ]?(d{3})[- ]?(d{4})$/.test(val)
    },

    email: function (val) {
      return /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i.test(val);
    },

    minLength: function (val, length) {
      return val.length >= length;
    },

    maxLength: function (val, length) {
      return val.length <= length;
    },

    equal: function (val1, val2) {
      console.log('isEqual called', val1, val2);
      console.log((val1 == val2));
      return (val1 == val2);
    }
  };
</script>

The form markup

With the script in place, you can set up your HTML as usual:

<form id="awesomeForm" action="/lights/camera" method="post">
  <input id="yourName" type="text" name="name" />
  <input id="email" type="text" name="email" />
</form>

… and then add your validation rules with .isHappy:

<script>
  $(document).ready(function () {
    $('#awesomeForm').isHappy({
      fields: {
        // reference the field you're talking about, probably by `id`
        // but you could certainly do $('[name=name]') as well.
        '#yourName': {
          required: true,
          message: 'Might we inquire your name'
        },
        '#email': {
          required: true,
          message: 'How are we to reach you sans email??'
          test: happy.email // this can be *any* function that returns true or false
        }
      }
    });
  }); 
</script>

Validation options determine if a value is required, a message displayed upon failure, and a test function you supply to validate the field value. This function can be anything that returns true or false. On blur and submit events Happy.js will run validations and set an unhappy class on the field and prepend the field with an error message like this one, which you can style with CSS:

<span id=​"textInput1_unhappy" class=​"unhappyMessage">​Please enter an email​</span>

Happy.js also lends itself to Underscore.js integration, with Underscore’s mixin feature:

_.mixin({
  USPhone: function (val) {
    console.log('is phone called');
    return /^(?(d{3}))?[- ]?(d{3})[- ]?(d{4})$/.test(val)
  },

  email: function (val) {
    return /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i.test(val);
  },

  minLength: function (val, length) {
    return val.length >= length;
  },

  maxLength: function (val, length) {
    return val.length <= length;
  },

  equal: function (val1, val2) {
    console.log('isEqual called', val1, val2);
    console.log((val1 == val2));
    return (val1 == val2);
  }
});

With this integration option, set up your validation test to _.email instead of happy.email;

[Source on GitHub] [Comment on Hacker News]

rapt: Platform game in HTML5, Canvas, and jQuery #

Ask ten people to define HTML5 and you’d probably get a dozen definitions. For Evan Wallace, Justin Ardini, and Kayle Gishen, it means gaming. The trio has released Robots Are People, Too (R.A.P.T), a platform game built using HTML5’s <canvas> API and jQuery. RAPT offers multiplayer gameplay and a level editor so you can extend the gameplay with your own creations.

Here’s a short gameplay video

Building your own game? View the RAPT source including the ~20,000 lines of JavaScript for techniques to handle things like collision detection

...

CollisionDetector.overlapCirclePolygon = function(circle, polygon) {
  // see if any point on the border of the the polygon is in the circle
    var len = polygon.vertices.length;
  for(var i = 0; i < len; ++i)
  {
    // if a segment of the polygon crosses the edge of the circle
    if(this.intersectCircleSegment(circle, polygon.getSegment(i))) {
      return true;
    }

    // if a vertex of the polygon is inside the circle
    if(polygon.getVertex(i).sub(circle.center).lengthSquared() < circle.radius * circle.radius) {
      return true;
    }
  }

  // otherwise, the circle could be completely inside the polygon
    var point = circle.center;
  for (var i = 0; i < len; ++i) {
    // Is this point outside this edge?  if so, it's not inside the polygon
    if (point.sub(polygon.vertices[i].add(polygon.center)).dot(polygon.segments[i].normal) > 0) {
            return false;
    }
  }
  // if the point was inside all of the edges, then it's inside the polygon.
  return true;
};

...

Hat tip to Dion.

[Source on GitHub] [Homepage]

node-o3-canvas: HTML5 Canvas API for NodeJS #

This isn’t the first time we’ve featured the work of our friends over at Ajax.org. In the past we mentioned o3 and Cloud9 and even had them on the podcast, see episode 0.1.6.

Their project, node-o3-canvas, is an HTML5 Canvas implementation for NodeJS based on LibAGG and Freetype. It’s implemented using their previously mentioned O3 component system. The goal with node-o3-canvas is not only to create a Canvas-spec type API, but also to extend it to provide easy image resizing, and image processing API’s for server side image processing needs.

Ajax.org makes use of node-o3-canvas as a way to render Canvas charts server-side to allow emailing or save-as-picture.

Example usage

How to use:

var createContext = require('path/to/node-o3-canvas/lib/o3-canvas');

Here’s a simple example usage:

var ctx = createContext(300,300, "argb");
ctx.clearRect(0,0,300,300);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

var buf = ctx.pngBuffer();
console.log(buf.toBase64());

[Source on GitHub] [Readme] [Blog Post]

waterunderice: Resumable, asynchronous file uploads using WebSockets and HTML5 #

As browser support for HTML5 grows, web developers are finding new options for tasks formerly only possible with browser plugins. Flash has long been the go-to method for large file uploads, however the new HTML5 File API promises a more native solution, allowing files to be read and chunked up on the client using JavaScript.

Taking advantage of this new API and Websockets, Derrick Parkhurst has created Water under Ice which offers resumable, asynchronous file uploads in supported browsers.

Beyond the browser requirements, the project requires jQuery, jQuery UI, and a Websocket compatible server backend such as em-websockets or Socket.IO. On the client, simply add the required JavaScript and CSS to your <head>:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css" media="screen" rel="StyleSheet" type="text/css">  
<link href="css/web_socket_file_uploader.css" media="screen" rel="StyleSheet" type="text/css">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>  
<script language="javascript" src="js/web_socket_client.js" type="text/javascript"></script>
<script language="javascript" src="js/web_socket_file_uploader.js" type="text/javascript"></script>
<script language="javascript" src="js/application.js" type="text/javascript"></script>

… and the file <input> along with other controls:

<div class="file_uploader">
  <h2>File Upload</h2>
  <div class="file_progress_bar">
    <span class="file_information" name="file_information"></span>
    <input class="file_browse_button" type="button" value="Browse">
    <input class="file_upload_button" type="button" value="Upload">
    <input class="file_reupload_button" type="button" value="Reupload">
    <input class="file_pause_button" type="button" value="Pause">
    <input class="file_resume_button" type="button" value="Resume">
    <input class="file_cancel_button" type="button" value="Cancel">
    <span class="file_progress" name="file_progress"></span>
    <input class="file_name_input" name="file_name_input" type="file">
  </div>
</div>

Example

Beyond the limited browser support, Derrick also mentions some other caveats with the Websockets approach:

WebSockets currently only provides for ASCII transfers. Thus, files must be Base64 encoded prior to upload. This increases the total bytes transferred by one third and can load the CPU.

That said, the project is worth a look to see what’s possible and where HTML5 is headed.

[Source on GitHub]

Watch Wednesday

Quick hitting list of projects to check out on GitHub: pauldowman / gitmodel Git Model is an ActiveModel-compatible NoSQL store based on git. Not ready for primetime but very interesting. assaf / vanity Vanity is declarative A/B testing for Rails. sidelab / tile5 Tile5 is a nifty multi-provider mobile-optimized mapping framework for building mapping or […]

h5Validate: HTML5 Form Validation for jQuery #

h5Validate is a jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don’t yet support HTML5.

In browsers that do support HTML5, h5Validate adds some much-needed features, such as the ability to customize the user interface when an input fails validation.

For demo and usage, see the h5Validate homepage.

Jump Start

Copy and paste this at the end of the body on any page with an HTML5 form. If html5 validation rules exist in the form, you’re in business!

<script src="lib/jquery/jquery-1.4.2.min.js"></script>
<script src="jquery.h5validate.js"></script>

<script>
$(document).ready(function () {
    $('form').h5Validate();
});
</script>

h5Validate is sponsored by Zumba Fitness and Rese Property Management

[Source on GitHub] [Homepage & Demo]

rack-modernizr: Ruby Rack middleware for Modernizr on the server #

A couple of weeks ago we covered modernizr-server, a nifty PHP project that lets you tap into the power Modernizr on the server. Modernizr, of course, is the JavaScript feature detection library that allows you to check browser support for HTML5 and other advanced features.

Inspired by modernizr-server, Marshall Yount brings Modernizr to your Ruby web projects via some slick Rack middleware. The first time a user visits your site, rack-modernizr adds the Modernizr library to your page automatically and stuffs all that Modernizr info into a cookie that you can check on subsequent requests on the server side.

To install, grab the gem:

gem install rack-modernizr

To use in your Rack app, just require it in your rackup file:

# config.ru

require ::File.expand_path('../config/environment',  __FILE__)
require 'modernizr'
use Rack::Modernizr

run MyApp::Application

In Rails, add the gem to your Gemfile and configure the middleware in your application.rb

module MyApp
  class Application < Rails::Application

  config.middleware.use Rack::Modernizr

end

[Source on GitHub]

node-canvas: Render and stream HTML5 Canvas using Node.js #

You knew with TJ Holowaychuk joining the team, the already crazy amount of Node goodness from the bright folks over at LearnBoost would only get better.

Today, they’re taking the wraps off of Node Canvas, a server-side implementation of the HTML5 <canvas>. Node Canvas uses the Cairo library to render Canvas objects and then streams them back to the browser as PNGs.

Like all things Node these days, install using npm

npm install canvas

You can then create Canvas objects with the familiar API.

/**
 * Module dependencies.
 */

var Canvas = require('canvas')
  , canvas = new Canvas(150, 150)
  , ctx = canvas.getContext('2d')
  , fs = require('fs');

ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings
ctx.save();                  // Save the default state

ctx.fillStyle = '#09F'       // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings

ctx.save();                  // Save the current state
ctx.fillStyle = '#FFF'       // Make changes to the settings
ctx.globalAlpha = 0.5;    
ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings

ctx.restore();               // Restore previous state
ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings

ctx.restore();               // Restore original state
ctx.fillRect(60,60,30,30);   // Draw a rectangle with restored settings

Now the whole point is to stream it back to the browser:

var out = fs.createWriteStream(__dirname + '/state.png')
  , stream = canvas.createPNGStream();

stream.on('data', function(chunk){
  out.write(chunk);
});

There are great examples in the test suite as well as a side-by-side comparison of Flot vs. node-canvas.

Be sure and catch TJs introductory screencast:

LearnBoost is the company behind Socket.io. Be sure and catch Episode 0.3.1 on Websockets if you missed it.

[Source on GitHub] [Blog post]

baker: Publish eBooks on the iPad using HTML5 #

Screenshot

Want to create an eBook but don’t want to futz with learning new tools? Davide Casali, Marco Colombo, and Alessandro Morandi have created Baker, a new framework to let you create books for the iPad using HTML5, CSS3, and JavaScript. Baker aims to do for books what PhoneGap has done for HTML5 web apps in just three steps.

Design

Baker currently supports portrait layouts, so just design your book using a web layout 768px wide. Pages can be as tall as you want and will scroll anything over 1024px. Multiple chapters are supported using separate HTML files.

Package

Drop the contents of your book into a /book folder, naming chapters sequentially as 1.html, 2.html, 3.html, etc. You may use subfolders for assets, but your chapters must be in the root folder.

Publish

To publish your book, you’ll need an Apple Developer account. Then you can publish your book using the Baker XCode project, renaming the project to reflect your book title as well supplying your own icon for the App Store. Check out full instructions in the README

[Source on GitHub] [Homepage] [Follow on Twitter]

trident-js: Javascript animation timeline library #

Kirill Grouchnikov from the Android team at Google has released trident-js, a JavaScript animation library. Trident provides support for constructing, playing, and looping animation timelines, complete with keyframe support:

The three basic timeline concepts illustrated in this sample are:

  • A timeline is associated with an object.
  • A timeline interpolates values of object attributes.
  • The attributes are modified at timeline pulses.

The Timeline object supports methods such as play(), playReverse(), replay(), replayReverse(), suspend(), abort(), playLoop(), and playInfiniteLoop() It also maintains states including IDLE, PLAYING_FORWARD, PLAYING_REVERSE, and others.

Be sure to check out the demonstrations captured in this screencast:

[Source on GitHub] [Screencast] [Demos]

orona: Multiplayer websockets tank warfare game powered by Node.js #

Technologies like Websockets show a lot of promise for web-based multiplayer games. You’ve probably seen Rumpetroll, the super cool Websockets demo.

Now, Stéphan Kochen is developing Orona a websockets-powered port of Bolo, a multiplayer tank warfare game.

Orona was developed in CoffeeScript and runs on Connect the Node.js web framework from Tim Caswell. Stéphan has also extracted a realtime browser game framework from Orona that he calls Villain.

You can play the multiplayer demo or install it locally via npm to play by yourself:

npm install coffee-script
npm install connect
npm install villain

Once installed, you can browse to http://localhost:8124/bolo.html to play the game.

[Source on GitHub] [Demo]

Deutsche Telekom releases Unify, metaframework for mobile built on HTML5, JavaScript, and Sass #

At JSConf.eu 2010, Deutsche Telekom took the wraps off of their Unify Project which aims to provide a unified API for building cross-platform mobile and desktop applications.

Unify looks to be a metaframework of sorts, wrapping other popular frameworks:

  • qooxdoo is a comprehensive and innovative framework for creating rich internet applications (RIAs) using object-oriented JavaScript
  • PhoneGap provides a native wrapper for web apps, providing interfaces for device features not supported with browser-based apps alone.
  • Sass is a superset of CSS3 syntax and provides programmatic features for CSS such as variables, mixins, and selector nesting, covered way back in Episode 0.0.1
  • Adobe AIR provides a cross-platform runtime for desktop applications.

Unify currently supports iOS, Android, and WebOS devices and plans to support BlackBerry OS 6.0 soon.

API

The Unify API provides a single progamming model to features such as IO, storage, cache, geolocation, and even UI.

Here’s the ScrollView class as an example:

unify.ui.mobile.ScrollView
  • Scrolling could be enabled/disabled separately for each axis.
  • Indicator style is changable through an API call (per instance)
  • Flips back when scrolling out of allowed ranges.
  • Smooth animations for deleleration and flip back
  • Page based scrolling where the content is auto-splitted into pages which are used for snapping into

Keep an eye on the Unify Roadmap for updates and real-world implementations.

[Source on GitHub] [Homepage]

vexflow: HTML5, Canvas, JavaScript library for music and guitar tablature #

In Episode 0.3.4, Zed Shaw and I talked about the sad state of guitar tab sites, and he mentioned VexFlow as a project to watch. VexFlow is a set of open source projects from Mohit Muthanna that use HTML5, <canvas>, and SVG to render embeddable guitar tabs and music in blog posts or web pages.

VexTab

Instead of using the ubiquitous (yet extremely free-form) ASCII tabs with which most guitarists are familiar, VexFlow introduces its own tablature and music markup language:

VexTab is a language that allows you to easily create, edit, and share guitar tablature. Unlike ASCII tab, which is designed for readability, VexTab is designed for writeability.

VexTab is easy to write

tabstave
notes 0/4 14/3 13/1 14/3 0/4 12/3 12/1 12/3 | 
notes 0/4 10/3 10/1 10/3 0/4 9/3 8/1 9/3

tabstave
notes 0/4 5/3 5/1 5/3 0/4 4/3 3/1 4/3 |
notes (3/1.4/3)s(1/1.2/3) 

tabstave
notes 0/5 0/5 3b4/5 0/4 3b4/4 0/4 |
notes 2/3 0/1 3/2 2/3 0/1 3/2 2/3

This intro to Dead or Alive in VexTab can be beautifully rendered into guitar tablature using TabDiv, VexFlow’s HTML5/JavaScript/<canvas>/SVG embedding library.

Rendered tablature

VexFlow also supports clef-based music notation as well.

tabstave notation=true
notes :8 [ 5s7/5 ] :q (5/2.6/3)h(7/3) [ :8 6/4 :16 7p5/5 ]

becomes

Rendered music

For browsers without <canvas> support, TabDiv supports SVG with the help of RaphaëlJS from Dmitry Baranovskiy.

You can try your hand at writing VexTab in your browser with Mohit’s awesome tutorial.

[Source on GitHub] [Homepage] [Tutorial]

html5-boilerplate: Best practices starting point project for HTML5 and mobile web apps #

While HTML5 is expanding in definition to include any whizz-bang feature in the post rounded corner web era, implementing actual HTML5 in your web app can be confusing. It’s a fast moving landscape that touches everything from traditional web apps to mobile.

Paul Irish, the Google Chrome dev relations guy who gave us the bulletproof syntax for @font-face, brings us his HTML5 Boilerplate a great tutorial/starting point for implementing a number of best practices in your desktop and mobile web applications including

  • HTML5 <!doctype> and CSS reset
  • Handheld stylesheets
  • CSS media queries for advanced mobile device targeting (even portrait or landscape layouts)
  • Paul’s Modernizr script for detecting device capabilities such as Modernizr.video.ogg

The current version is heavily documented. Paul promises a more slim, production ready version soon.

Check out the source on GitHub and the HTML5 Boilerplate homepage

Episode 0.2.6 – Douglas Crockford on JSON and JavaScript from TXJS

While at TXJS, Adam and Wynn caught up with Douglas Crockford, author of both JavaScript: The Good Parts and the JSON spec, and a global namespace unto himself. Items mentioned in the show: JSON – (JavaScript Object Notation) is a lightweight data-interchange format, easy for humans to read and write. The JSON Saga – how […]

jStorage – stash that hash using jQuery, Prototype, or Mootools #

jStorage from Andris Reinman is a small (2kb) simple wrapper for popular javascript frameworks to abstract local storage. HTML5 local storage is used if present and it even supports userData in older versions of IE.

compatibility chart

The simple API supports, get, set, delete and flush operations:

// set a value
$.jStorage.set(key, value)

// retrieve a value with a default if not set
value = $.jStorage.get(key, "default value")

// delete a key, throws exception if not set
$.jStorage.deleteKey(key)

// flush entire cache

$.jStorage.flush()

[Source on GitHub] [Homepage]

cartagen – Client side framework for creating vector maps in HTML5 #

Cartagen from Jeffrey Warren is a client framework to build vector-based maps in HTML5.

Here’s a quick video demo:

One interesting feature is how Cartagen uses GSS, or a CSS vocabulary for geospatial data:

waterway: {
  fillStyle: "#57d",
  strokeStyle: "#24a",
  lineWidth: 4,
  pattern: "/images/pattern-water.gif"
},
water: {
  strokeStyle: "#24a",
  lineWidth: 4,
  pattern: "/images/pattern-water.gif"
},
highway: {
  strokeStyle: "white",
  lineWidth: 6,
  outlineWidth: 3,
  outlineColor: "white",
  fontColor: "#333",
  fontBackground: "white",
  fontScale: "fixed",
  text: function() { return this.tags.get('name') }
}

Cartagen comes in both client and server editions

[Source on GitHub] [Cartagen.org Wiki] [API docs]

Episode 0.0.8 – Marshall Culpepper from Appcelerator Titanium

Adam and Wynn spoke with Marshall Culpepper from Appcelerator about their open source projects Titanium Desktop and Titanium Mobile. Items mentioned in the show RaphaelJS WebGL CodeStrong Titanium developer docs Fix Me Titanium Desktop on GitHub Titanium Mobile on GitHub