Category Archives: javascript

AngularJS. Способ внедрения кастомного кода в общий шаблон

Допустим, мы хотим динамически менять заголовок страницы и подсвечивать нужную часть меню в зависимости от текущего контроллера. Топорный способ сделать это — в каждом контроллере пихать в $rootScope переменные типа title и sitePart (для подсветки пункта главного меню). Минус — всегда есть риск забыть установить эти параметры в контроллере. Но есть другой способ, который сводится …

Пример работы с ng-class в Angular.js

Два способа менять класс в зависимости от условия:

ng:class="{true:'<название класса>', false:''}[$index==selectedIndex]"

1	ng:class="{true:'<название класса>', false:''}[$index==selectedIndex]"

ng-class="{<название класса>: $index==selectedIndex}"

1	ng-class="{<название класса>: $index==selectedIndex}"

Подробнее: http://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class-with-angularjs А то в официальных доках на эту тему не густо(

Плагины для быстрого поиска jQuery-обработчиков событий на странице

Firefox https://addons.mozilla.org/ru/firefox/addon/firequery/ http://www.sprymedia.co.uk/article/Visual+Event (тут теперь просто букмарклет). Google Chrome https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim

Фишки JSON.stringify()

В общем тут говорится о том, что этот метод может принимать дополнительные параметры, которые могут фильтровать и форматировать вывод. http://freshbrewedcode.com/jimcowart/2013/01/29/what-you-might-not-know-about-json-stringify/

js-Библиотека для рисования сложных графиков

https://github.com/unconed/MathBox.js Вот что на нем можно делать — http://acko.net/blog/making-mathbox/

Подробно о директивах в AngularJS

http://youtu.be/WqmeI5fZcho

Оптимизация DOM анимации. Приоритетность оптимизаций.

Источник — http://www.xiper.net/collect/js-plugins/overclock-site/optimizacia-dom-animacii.html Постарался упорядочить действия, направленные на оптимизацию DOM/CSS анимации, в порядке эффективности. Чем выше оптимизация в списке, тем больший прирост производительности она обычно дает.

Всестороннее тестирование приложения с AngularJS и Testacular

http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html

JS-Библиотека для создания CSS3-анимаций

https://github.com/jlongster/css-animations.js Позволяет делать анимации примерно так:

// Changing an animation

var anim = CSSAnimations.get('pulse');
anim.setKeyframe('100%', { 'background-color': 'red' });

// Dynamically creating and applying an animation

var anim = CSSAnimations.create();
anim.setKeyframe('0%', { transform: 'translateY(0)' });
anim.setKeyframe('70%', { transform: 'translateY(50px)' });
anim.setKeyframe('100%', { transform: 'translateY(150px)' });

$(el).css({ 'animation-name': anim.name,
            'animation-duration': '1s' });

$(el).on('animationend', function() {
    CSSAnimations.remove(anim.name);
});

// Changing an animation

var anim = CSSAnimations.get('pulse');

anim.setKeyframe('100%', { 'background-color': 'red' });

// Dynamically creating and applying an animation

var anim = CSSAnimations.create();

anim.setKeyframe('0%', { transform: 'translateY(0)' });

anim.setKeyframe('70%', { transform: 'translateY(50px)' });

anim.setKeyframe('100%', { transform: 'translateY(150px)' });

$(el).css({ 'animation-name': anim.name,

'animation-duration': '1s' });

$(el).on('animationend', function() {

CSSAnimations.remove(anim.name);

});

50 Javascript-библиотек для создания чартов и графиков

http://techslides.com/50-javascript-charting-and-graphics-libraries/