Несколько интересностей и полезностей для веб-разработчика (выпуск 8)

[AlexanderPHP]

Спасибо за отличную подборку!

[ilusha_sergeevich]

Пожалуйста, это вам спасибо за благодарность.

[dooreelkow]

От имени AlexanderPHP благодарю за спасибо за благодарность!

[idg_dima]

От имени ilusha_sergeevich выражаю признательность за благодарность за спасибо за благодарность!

[AlexanderPHP]

Уже не прокатит признательность, за благодарность, за спасибо, за благодарность :)

[malroc]

jQuery необязателен, а Backbone вместе с Underscore весят около 10kB, так что откуда там взялись 34, не очень понятно.

[malroc]

А вот кстати для самого Riot jQuery похоже обязателен. Так что сравнение действительно некорректно: 10kB Backbone + Underscore против 90kB jQuery + Riot

[malroc]

Вообще не очень понятна эта экономия на спичках: какой смысл делать минималистичный недофреймворк на 1kB, если к нему всё равно нужен jQuery, весящий на два порядка больше. Странный в общем подход.

[edogs]

Не как оправдание, но как объяснение.
jQuery, если он подключен на сайте через гугл.апи, с хорошей степенью вероятности у клиента уже будет подгружен когда-то раньше с другого сайта, в меру необычайной популярности jQuery, следовательно будет взят из кэша и следовательно лишних килобайтов загружено не будет.

[fleshy]

там по-моему упор все-таки не на скорость/размер, а на простоту API. Плюс jquery у всех давно из cdn кэшируется

[limitium]

Проблемы бэкбона

[malroc]

Да нет этих проблем.

[ChemAli]

Sir Trevor вызвал давно забытое чувство воодушевления.

[malroc]

Слушайте, может вы разбирались, а в Throjax есть двусторонний дата-байндинг? Я честно сказать не понял из официального описания. Собственно это единственная вещь, которой мне действительно не хватает в Backbone и которая пока не реализована в полноценном виде ни в одном из известных мне плагинов.

[tenbits]

На этой неделе обновился LESSHat — очень крутая коллекция миксинов. Добавлена поддержка `keyframes`, и многое другое.

[ilusha_sergeevich]

Тсс… я хотел об этом немного позже рассказать :) А по поводу keyframes… Они так сильно замарочились с регулярками, а синтаксис LESS все равно заставил из создавать пустой селектор с неким магическим числом. Поэтому можно было сделать все намного проще:

.keyframes(@identifier: slidein, @animation: ~"{0%, 50%, 100% { opacity: 0; } 25%, 75% {opacity: 0 }") {
  .webkit { content: ~"''; } @-webkit-keyframes @{identifier} @{animation}"}
     .moz { content: ~"''; }    @-moz-keyframes @{identifier} @{animation}"}
      .ms { content: ~"''; }     @-ms-keyframes @{identifier} @{animation}"}
       .o { content: ~"''; }      @-o-keyframes @{identifier} @{animation}"}
     .key { content: ~"''; }         @keyframes @{identifier} @{animation}"}
}

[tenbits]

Да я вот сел щупать `keyframes` и немного расстроился по синтаксису. Всё как бы хорошо, но кажется многострочная декларация не работает, _или я что-то не так делаю_.

.keyframes(~"
    slidein,
    0% { opacity: 0 }
    100% { opacity: 1 }
");
</sourcce>

[ilusha_sergeevich]

Не так. ~"_" — это содержимое для переменной @animation, а на для всех @arguments

[tenbits]

Да, уже разобрался. LESS не поддерживает мултистрочные стринги, поэтому такая декларация не проходит, а в одну строку писать анимационные фрэймы дело не радостное :) Создал pull request к less.js, авось примут.

[leMar]

Я не понял что такого полезного делает Bear CSS.
Пока я вижу, что он просто парсит классы и вставляет их в css. И все. Если только это — то это скорее во вред, чем во благо.

[ilusha_sergeevich]

Я тоже так подумал сначала, но начитавшись заумностей про Атомы&Молекулы/OCSS/SMACSS решил попробовать. И я увидел в этом плюс. Четко видишь перед собой все дерево и создаешь грамотный CSS. И мне показалось так быстрее и проще.

[leMar]

Я не увидел где он генерит дерево. Можете мне привести пример html, на котором он покажет себя с хорошей стороны. Пока я вижу, что он просто перед классы и фигачит их друг под другом.

[z6Dabrata]

Один из вариантов применения — использовать с Chrome DevTools workspaces.
На данный момент есть только возможность редактировать существующие классы, поэтому весьма удобно иметь готовую структуру.

[zandroid]

Отркывайте нужный CSS-файл в табе Sources и добавляйте нужный классы, а потом можете их уже редактировать и на табе Elements

[z6Dabrata]

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

Разумеется bear.js работает только для самый простых случаев и при более сложной разметке, с вложенными классами, придется многое делать вручную, но даже минимальная помощь — уже приятно.