RinatMullayanov

// http://javascript.crockford.com/prototypal.html
// базовый вариант наследования предложенный Дугласом Крокфордом
function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
}

// ECMASсript 3
// продвинутый вариант того что предложил Дуглас Крокфорд

RinatMullayanov

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0)
    throw RangeError('Cannot create product ' +
                      name + ' with a negative price');
  return this;
}

RinatMullayanov

var Circle = function() {};
Circle.prototype = {
  area: function() {
    return Math.PI * this.radius * this.radius;
  },
  grow: function() {
    this.radius++;
  },
  shrink: function() {
    this.radius--;

RinatMullayanov

.some-block {} /*block*/
.some-block__element {} /*element*/
.some-block_size_large {} /*modificator of block*/
.some-block__element_size_large {} /*modificator of element*/

/*
Block may contains another blocks and elements.
Element may contains another blocks and elements.
*/

RinatMullayanov

  ////////////////////////////////////
  // $provider
  ////////////////////////////////////

  function supportObject(delegate) {
    return function(key, value) {
      if (isObject(key)) {
        forEach(key, reverseParams(delegate));
      } else {
        return delegate(key, value);

RinatMullayanov

<div class="main">
    <!--flex block-->
    <div class="item">1 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">2 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">3 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->
    <div class="item">4 Lorem ipsum dolor sit amet, consecteur adipisicing elit. Excepturi repellat nisi ad soluta vitae velit similique consequatur aliquam, facere ea.</div>
    <!--flex block-->

vslinko

import pgquery from 'pgquery'

const role = 'admin'
const likes = 5

console.log(pgquery`
  SELECT * FROM users WHERE role = ${role} AND likes > ${likes}
`)
/*
{ queryString: '\n  SELECT * FROM users WHERE role = $1::varchar AND likes > $2::int\n',

nanomen

# Материалы

- CSS Flexible Box Layout Module Level 1 - http://www.w3.org/TR/css-flexbox-1/
- Solved by Flexbox - http://philipwalton.github.io/solved-by-flexbox/
- Полное руководство по Flexbox - http://frontender.info/a-guide-to-flexbox/
- Строим с flexbox - http://habrahabr.ru/post/257253/
- Flexbox, теперь понятно - Вадим Макеев (2013) - https://vimeo.com/67011034
- Гибкие коробки на практике - Арсений Форштретер (2014) - https://events.yandex.ru/lib/talks/2231/

# Гифки для презентации http://www.thokamaer.com/

RinatMullayanov

function updateTask(oldTask, newTask) {
  var promise = new Promise(function (resolve, reject) {
    resolve({status: 'success'});
    // resolve(Error('some error'));
  });
  return promise;
}  

phungnc

// Below is the source code pick from angular.js
// Read source code help us more clearer 
// the difference between service, factory, provider
  function provider(name, provider_) {
    if (isFunction(provider_) || isArray(provider_)) {
      provider_ = providerInjector.instantiate(provider_);
    }
    if (!provider_.$get) {
      throw Error('Provider ' + name + ' must define $get factory method.');
    }