XOP

JSConf Budapest 12-13 May

official site

schedule

Read before Proceed!

This is the instant notes of the conference flow
Some details are missing (and so do Caps), others just dropped for the sake of brevity

XOP

(function (global) {
  var metaViewport = document.querySelector('meta[name="viewport"]');
  var metaViewportStr = metaViewport && metaViewport.outerHTML || '';
  var metaCharset = document.querySelector('meta[charset]');
  var metaCharsetStr = metaCharset && metaCharset.outerHTML || '';
  var queryCache = {};

  /**
   * Get the styling nodes to inject in the head of the embedded document
   *

XOP

function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

        canvas.getContext('2d').drawImage(this, 0, 0);

XOP

function getArgs(func) {
  // First match everything inside the function argument parens.
  var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1];
 
  // Split the arguments string into an array comma delimited.
  return args.split(',').map(function(arg) {
    // Ensure no inline comments are parsed and trim the whitespace.
    return arg.replace(/\/\*.*\*\//, '').trim();
  }).filter(function(arg) {
    // Ensure no undefined values are added.

XOP

.feed{
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: placeHolderShimmer;
	-webkit-animation-timing-function: linear;
	background: #f6f7f8;
	background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-image: linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
	background-repeat: no-repeat;

XOP

//
// function
function iteratePaths(stream, start, finish, paths) {
    paths.forEach(function (path) {
        stream.pipe(gulp.dest(start + path + finish));
    });
    return stream;
}

//

XOP

/**
 * App 
 */

//
// only relevant code!
//
var $ = require('zepto');

//

XOP

(function(undefined, body, selectors){

    var collection = [];
    var current;

    for(var key in selectors){
        current = body.querySelectorAll(selectors[key]);
        current = [].slice.call(current);
        current = current.map(function(i){ return i[key] });

XOP

//
// render in separate layer
// hack to balance CPU/GPU load
// usage gpuRender(chrome, mac-chrome)
gpuRender($browsers){
    $i = 0;
    $comma = ",";
    $rule = "";

    for $b in arguments {

XOP

//
// SCSS for convenience


//
// self sibling
// usage: basically margins and other layout specifics
.element + .element {

}