Введение в веб-компоненты. Часть 1

Есть какие-то проблемы с моим кодом? Я готов выслушать критику.

Введение в веб-компоненты. Часть 1

Также всю нужную информацию вы можете узнать из моих профилей на хабре и github

Введение в веб-компоненты. Часть 1

Такие вопросы в личку

Введение в веб-компоненты. Часть 1

Мы все люди занятые, а сегодня вообще выходной и честно, у меня нету сейчас времени придумывать и описывать пример, который для вас покажется «хорошим». На вскидку это: виджеты — Google+ Галерея, shared-файлы dropbox, Google Talk Chat на любом сайте; элементы — <input type=calendar>, <input type=barcode>; и т.д.

В данном случае, я сделал перевод стандарта, который лично меня заинтересовал. Это и так была тяжелая работа, я ещё в комментариях доказывать, что парни из Google не недальновидны — это уж слишком.

Введение в веб-компоненты. Часть 1

Не хочется дублировать текст, ответил выше.
habrahabr.ru/post/152001/#comment_5161636

Введение в веб-компоненты. Часть 1

Это ни в коей мере не убийца HTML. Возможно я напишу статью про то зачем нужны веб-компоненты.

Но, как минимум, вам никогда не хотелось сделать <input type=calendar>? Или свой собственный <select>? Причём с fallback'ом для старых браузеров

Сейчас я могу порекомендовать посмотреть видео Google I/O 2012 — The Web Platform's Cutting Edge.

Введение в веб-компоненты. Часть 1

Во всех примерах на странице стандарта, html/css/js в одной куче, но я не вижу принципиальных проблем при вынесении ресурсов во внешние файлы. Стандартом это явно не запрещается.

Например, в рассылке w3c приводили такой пример эмуляции <style scoped> для <link rel="stylesheet" />:

<style scoped>
@import url('/css/styles.css');
</style>

Возможность сделать так, это основная причина не вводить атрибут scoped для <link rel="stylesheet" />.

Нужно дождаться реализации в Google Chrome и тогда уже можно говорить что-то конкретное.

Принуждение провайдеров прокуратурою ко блокировке YouTube и ВКонтакте без суда назначено совершить во всей России

Хорошая антиреклама к довольно дурацкому фильму. Если бы не запреты, его бы посмотрело, от силы, несколько [сотен]тысяч человек.

Но если не учитывать кинематографическую ценность фильма [censore], то сюжетная канва примерно соответствует тому, чему нас обучали в институте на занятиях по культурологии и истории.
Однако же, боюсь, что в настоящее время программа курса несколько поменялась.

Обзоры Nokia Lumia 920 и Nokia Lumia 820

Во всех обзорах новый телефонов от Nokia говорится про пешеходные маршруты и дополнительную реальность, но будут ли эти функции эффективно работать в России, а в частности, в Москве?

Вышел PhpStorm 5 — еще больше умных полезных штук

Как обновится с 4.0.3 до 5.0.1 с сохранением настроек и плугинов?

Vanilla JS — очень мощный javascript-фреймворк

Выше написал.. Pure JS параллакс скроллинг без jQuery. При этом, в версии с использованием jQuery, кода больше. Работает во всех браузерах в которых работает jQuery-версия. В IE6 не работает только из-за CSS.
Vanilla JS — это конечно саркастическая шутка, а вот pure JS — это вполне реальность.

BigVideo.js: фоновое видео на весь экран

ОМГ! Простите, но причём тут HTML5 Fullscreen API?

И вообще зачем этот плугин и зачем для такой задачи jQuery? Это делается несколькими строками pure js-кода. Если мы говорим про поддержку HTML5 video, то предполагается что браузер не IE8-. А если этот плугин делает что-то ещё, то вы явно забыли про это написать.

По моему, этот плагин не нужен.

В общем, подписываюсь под комментом Alinaki

P.S.

Поскольку на мобильных устройствах автоматическое воспроизведение видео запрещено… заменять… статическое фоновое изображение:… if (Modernizr.touch) ...

. *баный стыд. А что тогда делает плугин?
P.S.S. Плугин вроде бы детектит поддержку форматов видео и, вроде бы есть fallback на flash, но всё равно в браузерах без поддержки определённого формата видео (в данном случае mp4) мы видим простой чёрный вон.

Будущее вселенной

Спасибо

В Firefox 16 заработает инкрементальный сборщик мусора

Кто-то забыл добавить

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

via Paul Irish

Neutrino — крошечный js-фреймворк с полноценным наследованием и событиями

Добавлю, что наследование на прототипах со ссылкой на super банально делается через Object.create

function inherit(Child, Parent) {
	(Child.prototype = Object.create(Child["superclass"] = Parent.prototype)).constructor = Child;
};

function classB() {
  classB.superclass.constructor.apply(this, arguments)
}
inherit(classB, classA);

Это конечно всё уже можно обернуть

Neutrino — крошечный js-фреймворк с полноценным наследованием и событиями

Всё хорошо, но только зачем вы заменяете нативный bind на ваш собственный?

Да и вы можете ещё ужать код используя jQuery.Event или DOM Event constructors

function classA(container) {
  this.container = container;
}
classA.prototype.on = function(eType, handler) {
  this.container.addEventListener(eType, handler);
}
classA.prototype.un = function(eType, handler) {
  this.container.removeEventListener(eType, handler);
}
classA.prototype.fire = function(eType, data) {
  this.container.dispatchEvent(
    new CustomEvent(eType, {bubbles : true, cancelable : true, detail : data})
  );
}

var A = new classA(document.querySelector("#test"));
A.on("testns:someevent1", function(e){  console.log(e.detail + "")  })
A.fire("testns:someevent1", {toString : function(){return "test"}})

Код банальный, я знаю. Но тут основное нативный new CustomEvent()

Кроссбраузерный placeholder + fix для Chrome

ext
Наверняка и для вашего браузера есть подобное расширение.

Smooth.js — jQuery-плагин для CSS3-transitions с даунгрейдом до $.animate

Для детектинга окончания CSS анимации советую воспользоваться встроенным в браузеры обработчиком.

В Opera не работает, по крайней мере syabro.github.com/smooth/ из комментария

Internet Explorer 7-9: выбор инструментов для максимальной поддержки CSS3, HTML5

Также в IE6+, да и в другие браузеры, можно добавить поддержку DOM 4 API и ES5 (и частично методов из ES6). Для того, чтобы писать примерно так:

var element = document.querySelector("#test_element[type=test]");
element.querySelectorAll("span:nth-child(2n)").forEach(function(node) {//We can use 'forEach' because NodeList inherit from Array now
  node.addEventListener("click", function(){  /**/  })
})

Либа, демка

Vanilla JS — очень мощный javascript-фреймворк

Моя демка написана с использованием DOM4 и ES5, работает в IE7+ и остальных.
Там конечно не 0 КиБ, а 24 КиБ для IE7, 14 КиБ для IE8 и 8 КиБ для всех остальных (gzip). Всё просто работает и можно писать на Vanila JS