Энное количество лет занимался версткой, пока не осознал, что в этой сфере белых пятен практически не осталось. Когда встречаю баг в своей верстке - очень радуюсь, ибо давно их не видел. Плотно сижу на фронтенде, но последние два года постепенно пересаживаюсь на стек .NET'а, занимаюсь проектированием архитектуры приложений.
Апологет agile-методологий, евангелист design patterns и TDD. Впрочем, не особо фанатичный.

Большой поклонник ролевых игр, даже владею сайтом для форумных ролевок (http://dungeonmaster.ru) и занимаюсь написанием его современной версии (по сути, переписываю с нуля).
Контакты

Наибольший вклад в теги

Все теги (14)

Лучшие ответы пользователя

Все ответы (26)
  • Есть альтернативы БЭМ?

    @Quilin
    Full-stack разработчик
    Странное ощущение, что это троловопрос. Тем не менее.

    Вы же понимаете, что методология БЭМ именования классов касается лишь постольку поскольку? Никто из тех, кто пользуется БЭМ в жизни не пишет все эти названия классов вручную, код на выходе может быть тяжеловесным, но та его часть, с которой работает разработчик - лаконичная и адекватная. Хотя, конечно, это зависит от вашего навыка проектирования и разработки. В самом Яндексе, уверяю, далеко не всегда код симпатичный и удобный.

    Если вы собрались переводить ваш сайт с одного подхода на другой, вы так или иначе встанете перед дилеммой: переписывать все или переписывать не все. Другой вопрос, что двойственный подход может стоить вам куда больше полной переписки.

    Исключительно в ваших силах не превращать все в выгребную кучу. Я, например, пользуюсь совершенно тривиальным подходом в верстке, который на достаточно серьезных проектах так и не скатился в тартарары.
    1. Побольше частичных представлений данных. Конечно, не на каждый чих, но на каждую более-менее абстрактную часть модели.
    2. На каждое частичное представление - свой css-файл.
    3. Каждый элемент взаимодействия с пользователем - свой js-компонент.

    Обычный todo-mvc превращается с таким подходом вот в такую структуру:

    todo/
    todo.view
    todo.css
    todo.js
    todo_test.js
    todoitem/
    todoitem.partial
    todoitem.css
    todoitem.js
    todoitem_test.js

    Каждое представление состоит из маленького куска верстки, редко больше 50 строк. Каждый css- и js-файл - аналогично. Последний проект, который я делал по такой схеме пережил два года, примерно 10000 коммитов верстки, представлял собой мастер оплаты, веб-приложение и три админки к нему, и до сих пор адекватно функционирует и изменяется.
    Ответ написан
  • Действительно ли использование селектора по ID - признак абсолютно плохого стиля?

    @Quilin
    Full-stack разработчик
    Я бы все-таки настоятельно не рекомендовал вам использовать селекторы ID именно в CSS по одной простой причине.

    Движки рендеринга Gecko и Webkit при формировании Reflow и Layout соответственно строят индексы по ID ровно таким же способом, как и по имени класса. В качестве побочного явления - вы можете написать примерно то же, что и здесь, и код будет работать именно таким образом. Как по мне, это несколько неочевидное поведение, что стили применяются ко всем элементам с таким идентификатором, а не только к первому.

    Многие разработчики, да и начинающие верстальщики путают концепцию CSS и их селекторов с особенностями языка XML. Надо понимать, что ID в XML - это строгий параметр, по которому строится индекс с BST, который позволяет быстро находить первое совпадение идентификатора (то же происходит и в JS при вызове document.getElementById("test")), но в CSS и при построении лайаута все гораздо менее строго. И следует заметить, что сами разработчики браузеров решили так сделать, основываясь, вероятнее всего, на концепции того, что верстальщикам нередко приходится повторно пользоваться стилями, описанными для селекторов ID.

    Таким образом, с точки зрения быстродействия "#" ничем не отличается от ".", по крайней мере, в современных вебкитах и фаерфоксах. Теперь что касается точки зрения good practice.

    Я лично занимаюсь версткой уже почти десять лет, и точно для себя определил, что в работе, когда речь заходит о чужой или смежной с чужой области ответственности (а CSS - это смежная с дизайном область верстки), ничего уникального не бывает в принципе. А раз так - идентификатор может и запутать.

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

    Ну а что касается аргументов про "больше кода", могу предложить таким борцам за лишний десяток знаков перейти на шаблонизаторы; или перенять даже целиком концепцию БЭМ, тогда код совсем в разы уменьшится.
    Ответ написан
  • Почему неправильно считает JQuery, где ошибка?

    @Quilin
    Full-stack разработчик
    1. Оптимизируйте селекторы.
    #valmovaya #area-h1 - вот это плохой селектор, потому что он ищет по идентификатору внутри элемента с идентификатором, но вторая часть уже лишена особого смысла, поскольку первый идентификатор по определению и так уникален. Оставьте просто #area-h1. А еще лучше вообще уберите из идентификатора указатель на название тега, это архидурной тон.

    2. val возвращает строковое значение. Работать со строками как с числами - очень плохая затея, даже в языках с динамической типизацией. Либо пользуйтесь parseInt(vaml_h1), либо вообще кастом в духе +valm_h1.

    3. jQuery не считает, арифметические расчеты это зона контроля JavaScript.

    Любой из этих трех вариантов вам подойдет, в принципе.
    var valm_w1 = +$("#area-w1").val();
    var valm_w3 = parseInt($("#area-w3").val());
    var valm_h1 = parseFloat($("#area-h1").val());
    Ответ написан
  • Нормальный ли это подход к организации JS код?

    @Quilin
    Full-stack разработчик
    Этот подход "псевдоооп", хотя у вас и есть какие-то объекты, вы лишаете себя целой кучи полезных вещей - наследования, полиморфизма, не очень оптимально работаете с памятью.

    В JS ооп принято варить через прототипы. Например, вот так:

    (function (my) {
    my.Form = function () {
      $(document).on('submit', 'form', function (evt) {
        // это же просто пример, так?
      });
    };
    my.Form.prototype.submit = function () {
      // ...
    };
    })(MY);


    В дальнейшем, если вам понадобится не просто форма, а, например, валидируемая форма, или даже AJAX-форма, вы сможете без проблем отнаследоваться от этой формы и добавить ништяков. Например.

    (function (my) {
    my.ValidatedForm = function () {
      // something
    };
    my.ValidatedForm.prototype = new my.Form();
    my.ValidatedForm.prototype.isValid = function () {
      // ...
    };
    })(MY);


    Также у вас появится доступ к состоянию инстанса через ключевое слово this: для этого потребуется создавать экземпляры через оператор new. Будет выглядеть как-то так:

    var myForm = new MY.Form();
    myForm.submit();


    Это не всегда нужно делать именно так, но все зависит только от того, чего вы в конечном счете пытаетесь достичь. Я очень советую почитать статьи Ильи Кантора, автора сайта javascript.ru про ООП в JS. Он прилично пишет и хорошо разбирается в предметной области.
    Ответ написан
  • Проблема с подчеркиванием javaskript

    @Quilin
    Full-stack разработчик
    $(window).load(function(){
    	$('.fixBlock').liFixar({
    		side: 'top',
    		position: 0,
    		fix: function(el, side){
    			el.addClass("fixed");
    			el.liFixar('update')
    		},
    		unfix: function(el, side){
    			el.removeClass("fixed");
    			el.liFixar('update')
    		}
    	});
    })


    .hr li {
        background: #FFF;
        color: #000;
    }
    .hr .fixed {
        background: none;
        color: #fff;
    }
    .hr .fixed:hover {
        border-bottom: 1px solid #aa5;
    }


    По-хорошему, ваш JS код не должен хранить данных о внешнем виде сайта. Это нарушает основной принцип декомпозиции логики и отображения и в дальнейшем вам аукнется - например, если у вас появится задача сделать "ночную" версию сайта или мобильную.
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (4)