Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

[Из песочницы] Ускоряем вёрстку с помощью Автозамены в Punto Switcher

2015-09-30 13:52:54 (читать в оригинале)


Почти все знают о программе Punto Switcher, которая очень полезна тем, что при написании:

БвшмЮ

Автоматически преобразует это в:

<div>

Или

юигеещт

в

.button

В общем нервы остаются целыми, ибо вам не приходится в ручную всё стирать и писать по новой. Можно даже не беспокоиться о том, какая раскладка у вас стоит.

И самое интересное, что благодаря данной программе можно создать своеобразный Emmet. А точнее, готовую структуру для Emmet'a.
Читать дальше →

---

Технические рекомендации и ресурсы Google для мобильных сайтов

2015-09-30 11:17:10 (читать в оригинале)




Предлагаем вашему вниманию материалы доклада Андрея Липатцева, Google, с последней конференции Bitrix Summer Fest. В своём выступлении Андрей рассказал о текущей ситуации с ранжированием и оценкой Google сайтов для мобильных устройств.
Читать дальше →

---

19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек

2015-09-29 15:29:13 (читать в оригинале)


БЭМ набирает популярность и становится актуальнее — например, недавно Google выпустил новую библиотеку блоков под названием Material Design Lite, реализованную по БЭМ-методологии. Команда БЭМ тоже не сидела без дела — мы выпустили новую версию библиотеки bem-components, на базе которой построены сайты и проекты не только Яндекса, но и других разработчиков.

Эти события натолкнули нас на мысль ещё раз вспомнить и рассказать вам, как сформировались принципы разработки библиотек в БЭМ-методологии. Надеемся, что многим это будет интересно и полезно. Итак, поехали.



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

Если вы хотите узнать на примерах, как мы пришли к нашим принципам разработки, добро пожаловать под кат.
Читать дальше →

---

Matreshka.js: события

2015-09-28 09:10:57 (читать в оригинале)

• Matreshka.js: От простого к простому
• 10 причин попробовать Матрешку
• Matreshka.js 1.1: еще больше крутостей
• Matreshka.js: события

Документация на русском
Github репозиторий

Всем привет!

Функциональность, событий в Матрешке стала настолько богатой, что она, без сомнения, заслужила отдельной статьи. Коротко об изменениях в новой версии я рассказывал в предыдущем посте. Теперь давайте разберемся подробно, почему Матрешка называется event-driven фрейморком.

Небольшой код для привлечения внимания:

var object = {a: {b: {c: {d: 1}}}};

MK.on(object, 'a.b.c@change:d', function(evt) {
	alert('"d" изменилось на ' + evt.value);
});

object.a.b.c.d = 2; // "d" изменилось на 2
object.a.b = {c: { d: 42 }}; // "d" изменилось на 42

Напомню, возможности, описанные в этом посте, доступны, в том числе, в виде небольшой библиотеки MatreshkaMagic, на случай, если вам не нужны «фреймворковые» фичи.

Читать дальше →

---

Matreshka.js 1.1: еще больше крутостей

2015-09-28 09:10:24 (читать в оригинале)

• Matreshka.js: От простого к простому
• 10 причин попробовать Матрешку
• Matreshka.js 1.1: еще больше крутостей
• Matreshka.js: события

Документация на русском
Github репозиторий

Всем привет. Сегодня, 28 сентября исполняется два года с первого коммита в репозиторий Матрешки. Так совпало, что к этому времени подоспел новый релиз со всякими вкусностями для любого JavaScript разработчика (даже для тех, кто не хочет использовать Матрешку в качестве фреймворка).

Матрешка — это JavaScript фреймворк (или, если хотите, библиотека), основанный на акцессорах, и выжавшая из них невероятные, на первый взгляд, возможности. Помните, время, когда в JavaScript геттеры и сеттеры только-только появились? Сколько шума было вокруг них… Статьи, разговоры… Затем, всё затихло: многие не понимали, как этими возможностями воспользоваться, кроме как в простых примерах. Матрешка — это прекрасный ответ на вопрос, зачем нужны акцессоры в JavaScript.

По традиции, напомню о том, что умеет этот фреймворк с помощью маленького кусочка кода.

Раньше можно было делать только так:

// this - экземпляр Матрешки
// связываем свойство "x" с элементом на стрнице
this.bindNode('x', 'input.my-node');
// если изменилось, выводим alert
this.on('change:x', function() {
    alert(this.x);
});
// меняем свойство, вызывается обработчик
// меняется и привязаннык к "x" элемент
this.x = 'Wow!';

Теперь можно еще и так:

var object = {};
// связываем свойство "x" с элементом на стрнице
MK.bindNode(object, 'x', 'input.my-node');
// если изменилось, выводим alert
MK.on(object, 'change:x', function() {
    alert(object.x);
});
// меняем свойство, вызывается обработчик
// меняется и привязаннык к "x" элемент
object.x = 'Wow!';

Из-за того, что последние версии Chrome и NodeJS стали, наконец, поддерживать большинство элементов синтаксиса ES6, все примеры ниже в этом посте будут написаны на ES6. Таким нехитрым способом я хочу поздравить всех, кто считает эти нововведения невероятно крутыми и привлечь внимание к ES.next тех, кто с ними еще не знаком.
Читать дальше →