Вопрос для собеседования

var a = true;
a |= false;
var b = false;
b &= true;
Что будет в переменных a и b?
Ответ не самый прозаичный: console.log(a === 1);
console.log(b === 0);
Все потому, что сравнение происходит именно побитово, т.е. в двоичной системе счисления, представление чисел как последовательности 32-х бит из нулей и едениц. Каждый бит каждого числа сравниваются по парам по правилам логического сравнения. Результируещее значение приводится к числу в десятичной системе.
В данном примере срабатывает приведение типов, true=>1, false=>0.
x|0 всегда === x
x&0 всегда === 0
В итоге мы получаем:
var a = 1;
a = 1|0; => 1
var b = 0;
b = 0&1; => 0

Chaplin загрузка контроллеров по имени модуля в RequireJS

В Chaplin чтобы задать роут есть функция match match('*path', 'home#index'); где home - это имя контроллера, а index - его метод. И тут начинается самое интересное.
Где же ищет Chaplin этот контролер? Он использует функцию require, которая ищет этот модуль, и если он еще не загружен, то загружает его.
Chaplin передает в require не просто имя 'home', а settings.controllerPath + name + settings.controllerSuffix, т.е. даже не рассчитывает на то, что модуль можно брать уже загруженный, т.е. по имени модуля, а не по имени файла.
Когда знаешь как это работает, легко можно сделать так, чтобы в функцию match передавать имя модуля.
В общем то дальше будет только очевидное, но все же. ЧТобы передать имя модуля, нужно чтобы эта строчка settings.controllerPath + name + settings.controllerSuffix собственно и была именем модуля. Чтобы не путаться, я советую делать хотя бы так:
                        
require.config({
    paths: {
        //controlers
        NameController: 'controllers/name-controller'
    }
});
....................
require(['application', 'routes'], function(Application, routes) {
    new Application({routes: routes, controllerPath:'', controllerSuffix: 'Controller'});
});
....................
define(function() {
    return function(match) {
        match('', 'Name#method');
    };
});
                        
                    

Календарь для выставления свободных номеров для отельеров

Проект на GitHub: https://github.com/Krivega/TableAv.
demo.
Описание и возможность использовать как плагин запилю в ближайшее время.

JavaScript WebSocket constructor

JS-класс, реализующий соединение по WebSocket'у, и дающий гибкие методы взаимодействия:
1) .open(callback) подписка на открытие соединения;
2) .send(method, params) послать даные;
3) .on(method, params, calback) послать данные и подписаться на ответ;
4) .subscribeNotif(method, calback) подписаться на уведомления;

Данные форматируются для формата JSON-RPC

Проект на GitHub: https://github.com/Krivega/websocket.

Динамическая таблица с сортировкой, пагинатором и многим другим на JavaScript

Проект на GitHub: https://github.com/Krivega/tabless.
demo

Перемещение и сортировка checkbox'ов

Все чекбоксы остортированы, если мы выбираем очередной, то он переносится в другую зону(зону чЕкнутых:) ), там они тоже сортируются. Обратно тоже работает.

Без лишних слов: Demo Прокомментирую код, с перемещением все понятно, испульзуюя JQuery все становится легко и доступно. Я опишу фунцию сортировки: Перебираем все sortInput'ы и создаем пары инпутов и их лейблов, затем добавляем их в массив:
                        
$(sortInput).each(function() {
    var pair = {
        inputTag: $(this),
        labelTag: $(this).next("label")
    };
    elms.push(pair);
});
                        
                    

Удаляем инпуты и лейблы, но сохраняем их обьекты-jquery(метод detach):
                        
$(sortInput).detach();
$(sortlabel).detach();
                        
                    

Собственно сортируем массив:
                        
elms.sort(function(a, b) {
return a.labelTag.text() > b.labelTag.text();
});
                        
                    

И вставляем инпуты и лейблы в container:
                        
$.each(elms , function(){
$(container).append(this.inputTag).append(this.labelTag);
});
                        
                    

Финальный код:
                        
$(document).ready(function() {
    function sortContent(container, sortInput, sortlabel) {
        var elms = [];
        $(sortInput).each(function() {
            var pair = {
                inputTag: $(this),
                labelTag: $(this).next("label")
            };
            elms.push(pair);
        });
        $(sortInput).detach();
        $(sortlabel).detach();
        elms.sort(function(a, b) {
            return a.labelTag.text() > b.labelTag.text();
        });
        $.each(elms, function() {
            $(container).append(this.inputTag).append(this.labelTag);
        });
    }
    sortContent('#form1', '#form1 input[type=checkbox]', '#form1 label');
    $('#form1').on('change', 'input[type=checkbox]', function() {
        var $this = $(this),
            thisId = $this.attr('id'),
            thisLabel = $('#form1').find('label[for="' + thisId + '"]');
        if ($this.is(':checked')) {
            $this.appendTo('#form2');
            thisLabel.appendTo('#form2');
        }
        sortContent('#form2', '#form2 input[type=checkbox]', '#form2 label');
    });
    $('#form2').on('change', 'input', function() {
        var $this = $(this),
            thisId = $this.attr('id'),
            thisLabel = $('#form2').find('label[for="' + thisId + '"]');
        if (!$this.is(':checked')) {
            $this.appendTo('#form1');
            thisLabel.appendTo('#form1');
        }
        sortContent('#form1', '#form1 input[type=checkbox]', '#form1 label');
    });
});
                        
                    

Vanilla JavaScript vs JQuery

JQuery методы и их аналоги на чистом Java Script

jQueryJavaScript
                                        
$(document).ready(function() {
// code…
                                        });
                                    
                                        
document.addEventListener("DOMContentLoaded", function() {
// code…
});
                                        
                                    
                                        var divs = $("div");
                                        
                                    
                                        var divs = document.querySelectorAll("div");
                                        
                                    
                                        var newDiv = $("<div/>");
                                    
                                        var newDiv = document.createElement("div");
                                        
                                    
                                        newDiv.addClass("foo");
                                    
                                        newDiv.classList.add("foo");
                                        
                                    
                                        newDiv.toggleClass("foo");
                                        
                                    
                                        newDiv.classList.toggle("foo");
                                        
                                    
                                        
$("a").click(function() {
// code…
})
                                        
                                    
                                        
[].forEach.call(document.querySelectorAll("a"), function(el) {
    el.addEventListener("click", function() {
        // code…
    });
});
                                        
                                    
                                        $("body").append($("<p/>"));
                                        
                                    
                                        document.body.appendChild(document.createElement("p"));
                                        
                                    
                                        $("img").filter(":first").attr("alt", "My image");
                                        
                                    
                                        document.querySelector("img").setAttribute("alt", "My image");
                                        
                                    
                                        var parent = $("#about").parent();
                                        
                                    
                                        var parent = document.getElementById("about").parentNode;
                                        
                                    
                                        var clonedElement = $("#about").clone();
                                        
                                    
                                        var clonedElement = document.getElementById("about").cloneNode(true);
                                        
                                    
                                        $("#wrap").empty();
                                        
                                    
                                        
var wrap = document.getElementById("wrap");
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
                                        
                                    
                                        if($("#wrap").is(":empty"))
                                        
                                    
                                        if(!document.getElementById("wrap").hasChildNodes())
                                        
                                    
                                        var nextElement = $("#wrap").next();
                                        
                                    
                                        var nextElement = document.getElementById("wrap").nextSibling;
                                        
                                    
источник http://sharedfil.es/js-48hIfQE4XK.html

Прижать футер к низу страницы средствами JavaScript

Самый простой способ прижать футер к низу страницы используя JavaScript
На самом деле все очень просто! Сразу скажу, что использую JQuery.
                        
function footerToBottom() {
    var browserHeight = $(window).height(),
        footerOuterHeight = $('#footer').outerHeight(true),
        mainHeightMarginPaddingBorder = $('#main').outerHeight(true) - $('#main').height();
    $('#main').css({
        'min-height': browserHeight - footerOuterHeight - mainHeightMarginPaddingBorder,
    });
};
footerToBottom();
$(window).resize(function() {
    footerToBottom();
});
                        
                    
А теперь по порядку. Сперва мы создаем функцию, в которой получаем высоту рабочей области браузера, далее вычисляем высоту футера со всеми марджинами, паддинами и бордерами, вычисляем высоту всех марджинов, паддингов и бордеров у контейнера #main.
Теперь, когда все данные у нас в переменных, задаем контейнеру #main минимальную высоту, за счет которой я и прижимаю футер к низу. Следом сразу запускаю функцию footerToBottom(); и, очень важно, ставлю обработчик события на окно браузера-изменение размера, и по нему тоже запуская функцию footerToBottom();

Не забываем о Jquery, это все можно было написать и начистом JS конечно, но код был бы гораздо длинней.

Все гениальное-просто!
Demo

Плагин на JQuery «desart.accordion»

И так пришло время представить вам новую версию плагина аккордеона! Добавилась одна функция и еще кое-что...
Самое главное - я добавил класс "active" к заголовкам раскрытых элементов. Это позволяет визуально помечать раскрытые элементы и использовать стилизацию меню типа "плюс-минус" (см. Demo).
А теперь к параметрам, они все те же что и в предыдущей версии:

1) $('.container').accordion_desart -вызов плагина и применение его к блоку с классом ".container"
2) accordionContainer: ".accordion" сам аккордеон
3) accordionTitle: ".acc-title" класс заголовка блока
4) accordionHidden: ".acc-hidden" скрываемый/показываемый блок
5) accordionVisible: ".acc-visible" класс блока, который нужно отображать по умолчанию
6) hideOther: "yes" скрывать открытые блоки при открытии нового
7) hideClicking: "yes" повторное скрытие блока при повторном нажатии

И последнее изменение-это то что плагину теперь достаточно указать просто заголовок для скрытия, а он скроет автоматически следующий блок сразу за заголовком.

Обязательно посмотрите демонстрацию работы плагина, или скачайте пример:
Source jquery.desart.accordion-2.0
Demo

Трудовая деятельность

Образование

  • 2005-2010Кубанский Государственный Университет, Факультет Математики и Компьютерных Наук
  • 2008-2010Институт профессиональной переподготовки и повышения квалификации, факультет дизайна и компьютерной графики разработки приложений веб-дизайна и компьютерной графики на предприятия (организации)

Навыки

  • Team/Technical Leadership
  • Front-end Development
  • JavaScript
  • HTML/CSS/SASS

Основной опыт

  • Front-end Engineering
  • Optimizing Performance
  • Backbone.js
  • ReactJS
  • MarkoJS
  • Webpack
  • Gulp
  • jQuery
  • Coding sites
  • Node.js

Дополнительный опыт

  • Code Review
  • RequireJS
  • Grunt
  • Chaplin.js
  • Bootsrap
  • Foundation
  • Git
  • Mercurial
  • SVN
  • AJAX
  • WebSockets
  • Compass
  • Prototyping
  • User Interface Design
  • Usability of interfaces

Личные проекты

  • 2013/04 - 2014/04NovaMenu
    Электронное меню для баров и ресторанов.
[PDF]

Я Front-end разработчик. Занимаюсь проектировкой и разработкой интерфейсов для веб-приложений и сайтов. Front-end это не просто красивое лицо, это дружественный, понятный интерфейс веб-проекта. Моя цель, как front-end разработчика, это создание интересных, легких, быстрых интерфейсов.

80-90% случаев конечного пользователя, время отклика расходуется на внешнем интерфейсе. Если вас волнует доступность и масштабируемость, то нужно сосредоточиться на внутренней начинке веб-ресурса.
Но если вы беспокоитесь о том, как долго пользователи ждут ваш сайт, чтобы загрузить, нужно сосредоточить внимание на интерфейсе, это является лучшим выбором.

Если это веб-проект, то разметка это то, с чего начинается клиентская сторона. В верстке использую все из последнего арсенала HTML5 и  CSS3. Так же я приверженец подхода « graceful degradation». Большое внимание я уделяю интерактивности создаваемого мною фронтенда. Интерактивность я создаю с помощью JavaScript. Даешь юзабилити интерфейсов!!!

Но все же больше я себя позиционирую как JavaScript программист. Я использую ООП-подходы, классы, прототипы, замыкания и прочие вещи, я на пути познания секретов «JavaScript-Ninja»!

Что я делаю

  • Front-end Development
  • JavaScript Development
  • Leadership
Что я делаю>

Трудовая деятельность

Образование

  • 2005-2010Кубанский Государственный Университет, Факультет Математики и Компьютерных Наук
  • 2008-2010Институт профессиональной переподготовки и повышения квалификации, факультет дизайна и компьютерной графики разработки приложений веб-дизайна и компьютерной графики на предприятия (организации)

Личность

Я Front-end разработчик.
Занимаюсь JavaScript программированием, а так же проектировкой интерфейсов и сайтов. Я преданный своему делу и ориентированный на качество, разработчик пользовательских интерфейсов. Я сосредоточен на развитии семантических, удобных и доступных веб-приложений.
Сайты и интерфейсы я разрабатываю, используя инновационные и прогрессивные Front-end технологии веб-разработки, делая их интуитивно понятными для конечных пользователей.

Навыки

  • Team/Technical Leadership
  • Front-end Development
  • JavaScript
  • HTML/CSS/SASS

Основной опыт

  • Front-end Engineering
  • Optimizing Performance
  • Backbone.js
  • ReactJS
  • MarkoJS
  • Webpack
  • Gulp
  • jQuery
  • Coding sites
  • Node.js

Дополнительный опыт

  • Code Review
  • RequireJS
  • Grunt
  • Chaplin.js
  • Bootsrap
  • Foundation
  • Git
  • Mercurial
  • SVN
  • AJAX
  • WebSockets
  • Compass
  • Prototyping
  • User Interface Design
  • Usability of interfaces