potch

(function(d, id) {
    var menu = d.createElement('menu');
    var item = d.createElement('menuitem');
    var el = d.getElementById(id);    
    menu.setAttribute('id', 'fullscreen');
    menu.setAttribute('type', 'context');
    item.setAttribute('label', 'Fullscreen');
    item.addEventListener('click', function() {
        if (el.requestFullScreen) {
            el.requestFullScreen();

potch

// this is crazy
Function.prototype.callMeMaybe = function(ctx) {
    var args = Array.prototype.slice.call(arguments,1);
    if (Math.random() > .5) {
        return this.apply(ctx, args);
    }
};

function square(n) {
    return n * n;

potch

JSS: JSON Style Sheets

“Wait, what?”

Sometimes you want to include some CSS in a JavaScript file. Maybe it's a standalone widget. A big ol' string is a pain to manage, and won't minify so pretty. Especially if you want your CSS safely namespaced. For example:

.widget {
    background: #abc123;
    width: 100px;

/* ... */

potch

// 5
&:nth-child(5):nth-last-child(1) {
    display: none;
}
// 6
&:nth-child(5):nth-last-child(2),
&:nth-child(6):nth-last-child(1) {
    display: none;
}
// 7

potch

/* The CSS for targeting trailing nodes in a grid with rows of 4 nodes */

div:nth-last-child(-n+3):nth-child(4n+1),
div:nth-last-child(-n+2):nth-child(4n+2),
div:nth-last-child(-n+1):nth-child(4n+3) {
    background: blue;
}

potch

function interpolate(s) {
    var tokens = [];
    var types = [
        {re: /^\{\{\s*/, name: 'keystart'},
        {re: /^\s*\}\}/, name: 'keyend'},
        {re: /^[a-zA-Z0-9_\-\$]+/, name: 'key'},
        {re: /^./, name: 'content'}
    ];
    function tokenize(s) {
        var col = 0;

potch

Woot!!!!

potch

Woot!!!!

potch

Web Components

First Draft- Names are not necessarily final.

For the purposes of this document, layout terminology assumes a small-screen handheld phone. Positions/appearances will likely differ on larger displays or with different input techniques.

Structural Components

'View'

potch

function addFullScreenMenu () {
    var menu = document.createElement('menu');
    var item = document.createElement('menuitem');
    menu.setAttribute('id', 'fsmenu');
    menu.setAttribute('type', 'context');
    item.setAttribute('label', 'Fullscreen');
    item.addEventListener('click', function (e) {
        if (window.fullScreen) {
            document.body.mozCancelFullScreen();