pocket knife js

KILL ALL HUMANS!

I. RobotForensic Anthropologist

Pocket Knife JS

November 10, 2011

Friday, November 11, 11

Who am I

• Diogo Antunes

Who am I

• Diogo Antunes

• JavaScript developer @ SAPO

Who am I

• Diogo Antunes

• @dicode

Who am I

• Diogo Antunes

• @dicode

• http://js.sapo.pt

JS World

• Wonderful things are happening

• Lot’s of new code, snippets

• Great community

• Always looking forward

• JS is cool

• Lot to learn

• Lot to innovate

Pocket Knife

• There are code out there that can help

• You can use it, fork it, re-write it

• but you’ll definitely learn a lot digging in

Going deep

Templating

Mustache

• Logic-less templates with JavaScript

• you can render templates in your browser, or rendering server-side stuff with node.js, use it for rendering stuff in CouchDB’s views

• Plugins for jQuery, Dojo, Yui, CommonJS, qooxdoo

Mustachevar view = { "name": "Bill", "address": { "street": "801 Streetly street", "city": "Boston", "state": "MA", "zip" "02101" }}

var template = '<h1>Contact: {{name}}</h1>{{#address}} <p>{{street}}</p> <p>{{city}}, {{state}} {{zip}}</p>{{/address}}';

var html = Mustache.to_html(template, view);

<h1>Contact: Bill</h1><p>801 Streetly street</p><p>Boston, MA 02101</p>

Loaders

Lab.js

• Loading And Blocking JavaScript

• Load JS from anywhere at anytime

• You can even load LABjs dynamically

Lab.js

require.js

• plugins for jquery, dojo or node.js

• RequireJS is a JavaScript file and module loader.

• It is optimized for in-browser use, but it can be used in other JavaScript environments

require.js

<!DOCTYPE html><html> <head> <title>My Sample Project</title>  <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Project</h1> </body></html>

project-directory/ project.html scripts/ main.js require.js helper/ util.js

require.js

<!DOCTYPE html><html> <head> <title>My Sample Project</title>  <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>My Sample Project</h1> </body></html>

require(["helper/util"], function() { //This function is called when scripts/helper/util.js is loaded.});

webkit-based

zepto.js

• minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

• ~5kb

• has almost everything

zepto.js

$(document).ready(function(){ ... });

$.isFunction(function), $.isObject(object), $.isArray(array);

$('some selector').bind('click', function(event){ ... });

animation

émile

• Stand-alone CSS animation JavaScript mini-framework

• Doesn't need a JavaScript framework

• Full set of CSS properties for animation (length-based and colors)

• Easing and callbacks

• Less than 50 lines of code

émile

• one method

emile(element, style, options, after)

shifty

• A teeny tiny tweening engine in JavaScript

• low-level library meant to be encapsulated by higher-level tools

shifty - do’s

• Tweening of Numbers.

• Extensibility hooks for the tweening.

shifty - dont’s

• Keyframing.

• Drawing.

• Much else.

shiftyvar myTweenable = new Tweenable();

myTweenable.tween( from, to );

myTweenable.tween( from, to, duration, callback, easing );

myTweenable.tween({ from: { }, // Object. Contains the properties to tween. Must all be `Number`s. Note: This object's properties are modified by the tween. to: { }, // Object. The "destination" `Number`s that the properties in `from` will tween to. duration: 1000, // Number. How long the tween lasts for, in milliseconds. easing: 'linear', // String. Easing equation to use. You can specify any easing method that was attached to `Tweenable.prototype.formula`. start: function () {}, // Function. Runs as soon as the tween begins. Handy when used with the `queue` extension. step: function () {}, // Function. Runs each "frame" that the tween is updated. callback: function () {} // Function. Runs when the tween completes.});

swipe.js

• lightweight mobile slider with 1-to-1 touch movement

swipe.js

window.mySwipe = new Swipe(document.getElementById('slider'), { startSlide: 2, speed: 400, auto: 3000, callback: function(event, index, elem) { // do something cool }});

selectors

Jaguar

• standalone CSS selector engine developed for the Shrike JavaScript library

• 0 Regexes

• 0 Try-catch blocks

• No browser sniffing

• Only 3kb (minified and gzipped)

Jaguar

Jaguar.search(String selector[, DOMElement|DOMDocument context])// Or simply:Jaguar(String selector[, DOMElement|DOMDocument context])

Jaguar.match(Jaguar('#id')[0], '#id') // trueJaguar.match(Jaguar('#cake')[0], '.edible') // hopefully true

enhancement

underscore

• functional programming

• utility-belt library

• think Prototype.js

• without extending built-in

• so fits great with jQuery or Zepto

underscore

var lyrics = [ {line : 1, words : "I'm a lumberjack and I'm okay"}, {line : 2, words : "I sleep all night and I work all day"}, {line : 3, words : "He's a lumberjack and he's okay"}, {line : 4, words : "He sleeps all night and he works all day"}];

_(lyrics).chain() .map(function(line) { return line.words.split(' '); }) .flatten() .reduce(function(counts, word) { counts[word] = (counts[word] || 0) + 1; return counts;}, {}).value();

=> {lumberjack : 2, all : 4, night : 2 ... }

Backbone.js

• supplies structure to JavaScript-heavy applications

• Backbone's only hard dependency is Underscore.js. For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( > 1.4.2) or Zepto.

Backbone.jsvar Sidebar = Backbone.Model.extend({ promptColor: function() { var cssColor = prompt("Please enter a CSS color:"); this.set({color: cssColor}); }});

window.sidebar = new Sidebar;

var ItemView = Backbone.View.extend({ tagName: 'li'});

var item = new ItemView();

my-class

• 100% no wrappers, same perfs as hand-written pure JS classes

• not only a class implementation, it's mostly a class design

my-class

(function() {

var Person = my.Class({ constructor: function(name) { this.name = name; }, sayHello: function() { console.log('Hello from ' + this.name + '!'); } })

var sylvester = new Dreamer('Sylvester', 'eating Tweety'); sylvester.sayHello(); sylvester.sayDream();

alert('See this page source & open your JS console');

communication

• clone-variant of the XMLHttpRequest object API

• makes cross-domain JSON-P styled call

jXHRfunction handleError(msg,url) { alert(msg);}

function doit() { var x1 = new jXHR(); x1.onerror = handleError; x1.onreadystatechange = function(data){ if (x1.readyState === 4) { alert("Success:"+data.source); } }; x1.open("GET","jsonme.php?callback=?&data="+

encodeURIComponent(JSON.stringify({data:"my value 1"}))+"&_="+Math.random());

x1.send();}

benchmarking

benchmark.js

• works on nearly all JavaScript platforms

• supports high-resolution timers

• returns statistically significant results

benchmark.jsvar suite = new Benchmark.Suite;

// add testssuite.add('RegExp#test', function() { /o/.test('Hello World!');}).add('String#indexOf', function() { 'Hello World!'.indexOf('o') > -1;}).add('String#match', function() { !!'Hello World!'.match(/o/);})// add listeners.on('cycle', function(event, bench) { console.log(String(bench));}).on('complete', function() { console.log('Fastest is ' + this.filter('fastest').pluck('name'));})// run async.run({ 'async': true });

• fast prototyping your Javascript game

• displayed using Canvas or DOM mode

• CSS animations

feature detection

Modernizr

• feature detection with media queries and conditional resource loading

• adds classes to html element to say if a certain feature is available

• Modernizr JS object let’s you have a set of flags that help you building your code

Modernizr

if (Modernizr.geolocation) { //do whatever you want}

system.js

• Javacript object with the user's system information

document.body.innerHTML = [

'<strong>Browser</strong> ' + System.browser, '<strong>OS</strong> ' + System.os, '', '<strong>Canvas</strong> ' + System.support.canvas, '<strong>Local storage</strong> ' + System.support.localStorage, '<strong>File API</strong> ' + System.support.file, '<strong>FileSystem API</strong> ' + System.support.fileSystem, '<strong>RequestAnimationFrame</strong> ' + System.support.requestAnimationFrame, '<strong>Session storage</strong> ' + System.support.sessionStorage, '<strong>WebGL</strong> ' + System.support.webgl, '<strong>Worker</strong> ' + System.support.worker

].join( '<br />' );

events

EventEmitter

• you can listen for and emit events from what ever objects you choose

• port of the node.js EventEmitter

EventEmitter// Initialise the EventEmittervar ee = new EventEmitter();

// Initialise the listener functionfunction myListener() { console.log('The foo event was emitted.');}

// Add the listeneree.addListener('foo', myListener);

// Emit the foo eventee.emit('foo'); // The listener function is now called

// Remove the listeneree.removeListener('foo', myListener);

// Log the array of listeners to show that it has been removedconsole.log(ee.listeners('foo'));

polyfills

Augment.js

• Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods

Augment.js

Array.prototype.everyArray.prototype.filterArray.prototype.forEachArray.prototype.indexOfArray.isArrayDate.nowDate.prototype.toJSONDate.prototype.toISOStringFunction.prototype.bindObject.keysString.prototype.trim

State Machine

gowiththeflow

• asynchronous flow-control micro library

• asynchronous code is executed, sequentially or in parallel

gowiththeflow

what you just need

• Build only what you need, when you need it.

• Lightweight, expressive, familiar.

• think of it as NPM's little sister

• if one library goes bad or unmaintained, it can be replaced with another

Ender is not a JavaScript library.

ender build domready qwery underscore

$('#content a.button') .bind('click.button', function (e) { $(this).data('clicked', true).unbind() e.preventDefault() }) .css({ opacity: 1 , color: 'red' }) .fadeOut(250)$.map(['a', 'b', 'c'], function (letter) { return letter.toUpperCase()})$.ajax('/data', function (resp) { $('#content').html(resp)})

// IN THE BROWSER

// Require packages to access them as raw packagesvar _ = require('underscore') , _.each([1, 2, 3], alert)

// Access methods augmented directly to the $$.ready(function () { $([1, 2, null, 3]) .filter(function (item) { return item }) .each(alert)})

full purpose frameworks

• jQuery

• Dojo

• Prototype.js

• YUI

• LibSAPO.js

• etc.

why should I bother?

be a better developer

Make It WorkMake It RightMake It Fast

Do’s and don’ts

Wrap Up

Use it carefully

Think for yourself

Thanks

pocket knife js

Technology

leksell gama knife - fisica medica

mack the knife

ausstattungsliste neue modelle ligier js 50 - js 50 - l js...

pocket loox n/c series - · pdf filepocket loox n/c series...

7 foarfece şi ferăstraie - pentagon romaniafoarfeci /...

pocket loox n/c series - · pdf filepocket loox n/c series...

digital pocket tester - dhtester.co.kr · digital pocket...

simotion rotary knife v3 - support.industry.siemens.com ·...

js dom & js bom

q umb ed ca tion d s r - emisec.co.za · mbonda sp mbombo...

knife romance

synchros - guede-solingen.de · with a slim, semi-flexible...

cutlery knife set

· 4.4 js 43s * : js ias : 41.4.] .

elettrobisturi electrosurgical knife ... - carlo de...

jack knife / jambe bras alternés jack knife crunch avec...

elaboración de un diagrama jack knife

build your own laguiole style de vie pocket knife...drive...

radiocirugÍa gamma-knife

radiochirurgia con gamma-knife: indicazioni ed …