gryzzly

window.onload = function () {
  // create canvas DOM element / object
  var canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  
  // get context to draw on it
  canvas = canvas.getContext("2d");

  var drawSmiley = function (x, y) {
    // "http://lorempixel.com/400/200/animals/3/" tiger

gryzzly

HTML & CSS:

• http://teamtreehouse.com/
• http://htmldog.com/
• https://developer.mozilla.org/en/CSS/Getting_Started
• PDF “HTML5 fundamentals”: http://public.dhe.ibm.com/software/dw/web/wa-html5fundamentals/wa-html5fundamentals-pdf.pdf
• http://www.abookapart.com/ – Notice HTML5 and CSS3 books there (although most of the books are well worth checking out)

JavaScript:

gryzzly

// constructor definition
var Foo = function() {
  // when invoked with `new` it's as if the following implicitly happens
  // this = { constructor: Foo };
  // return this;
};

// For every function, `prototype` property is created automatically:
Foo.hasOwnProperty('prototype') // true

gryzzly

// request default HTML5 widget's code
$.getJSON(
  'http://soundcloud.com/oembed' +
  '?format=json' + 
  '&url=http://soundcloud.com/forss/flickermood'
).done(function (embedData) { 
  console.log(embedData.html);
});

// request Flash widget code 

gryzzly

/* global Tyrtle:true */
(function (window) {

  /**
   * Tyrtle renderer/reporter for Karma
   * @param {Object} karma Karma runner instance
   */
  function TyrtleKarmaRenderer(karma) {
    this.karma = karma;
  }

gryzzly

/* global Tyrtle */
// by convention, test files end with `-test`
var tests = Object.keys(window.__karma__.files).filter(RegExp.prototype.test.bind(/-test\.js$/));

window.requirejs.config({
  // Karma serves files from '/base'
  baseUrl: '/base/public/',
  paths: {
    '$':          'lib/dollar/dollar',
    'backbone':   'vendor/backbone',

gryzzly

(function(root, mod) {
  if (typeof exports == "object" && typeof module == "object") return mod(exports); // CommonJS
  if (typeof define == "function" && define.amd) return define(["exports"], mod); // AMD
  mod(root.tabTalk || (root.tabTalk = {})); // Plain browser env
})(this, function(exports) {"use strict";
  var 
      win = window
    , storage = win.localStorage
    , prefix = 'tab_'
    , instance = prefix + date.now() // identify this tab

gryzzly

return !!(// double negation is required since logical operators dont always return Booleans
  ENV_VAR || 
  SomeLongStore.get('key') ||
  SomeConfig.get('layer', 'sub-layer') === 'required-value' ||
  this.anotherLongCondition()
)

vs

gryzzly

Example of a tedious task when using backbone MVC

You have three components each of which might have certain state. These components depend on one particular component that emits events. These three views have to all define the emitting component as a dependency and manually subscribe to the events in order to sync the state.

var View = require('lib/View'),
    source = require('source'); 
    
module.exports = View.extend({

gryzzly

// 
// To be used like this:
// 
//
// {{debounced-input
//   placeholder="1000000"
//   value=propertyName
//   debounceWait=300 <-- debounce wait value
//   fireAtStart=false <-- corresponds to Ember.run.debounce’s 4th param, if false, will run at the end of wait period
//   class="form-control" <-- all regular text input attributes work