• Анимировать svg картинку на js, что лучше для этого подходит?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    1. CSS анимации, которые упомянули выше, стоит использовать осторожно - IE имеет проблемы с интеграцией их и SVG. Такой вариант не всегда подойдет.
    2. SMIL... Процитирую MDN: "Chrome 45 deprecated SMIL in favor of CSS animations and Web animations". Пока все работает. Что будет дальше - кто его знает.
    3. На VanillaJS делать хитрые анимации с SVG достаточно сложно. Вариант с генерацией CSS анимации из JS имеет те же проблемы, что и использование CSS анимаций в чистом виде.
    4. Почему-то у нас народ любит хвалить GSAP. Но есть и другие инструменты, например Anime.js - меньше пафоса, свою задачу решает. Я бы отдал предпочтение второму варианту, но тут уж на вкус и цвет...
    Ответ написан
    1 комментарий
  • Canvas рисуем мышкой прозивольную фигуру, как сделать замыкание фигуры если линии пересекаются?

    twobomb
    @twobomb
    Типа такого?
    Проверка пересечения двух линий
    function intersection(ax1,ay1,ax2,ay2,bx1,by1,bx2,by2){//true есть пересечение иначе false
    var v1,v2,v3,v4;
    v1=(bx2-bx1)*(ay1-by1)-(by2-by1)*(ax1-bx1);
    v2=(bx2-bx1)*(ay2-by1)-(by2-by1)*(ax2-bx1);
    v3=(ax2-ax1)*(by1-ay1)-(ay2-ay1)*(bx1-ax1);
    v4=(ax2-ax1)*(by2-ay1)-(ay2-ay1)*(bx2-ax1);
    return (v1*v2<0) && (v3*v4<0);
    }
    Ответ написан
    8 комментариев
  • Как работать фрилансеру на зарубежных биржах фриланса не зная языка?

    @polifill
    Google Translate достаточно для ОЧЕНЬ МНОГИХ СЛУЧАЕВ.
    У меня друган так работает,
    выходит до 3000 долларов.
    Разумеется, он освоил слепой десятипальцевый метод набора на клавиатуре.
    ;)

    С посредниками не здорово.

    Не потяните посредника.
    Если только вы не мегапрофи.

    Разговоры по согласованию задачи занимают ОЧЕНЬ много времени (и требуют квалификации не только в языке, а и в области проекта), и потому посредники заберут у вас за это много денег.

    Если вы мегапрофи, то отдать со своих 5000 долларов 500 посреднику сможете.
    Если вы не профи - то будете с трудом зарабатывать 1000, а отдать все равно придется 500
    ;)
    Ответ написан
  • Как работать фрилансеру на зарубежных биржах фриланса не зная языка?

    sptm
    @sptm
    software developer / DevOps engineer
    Совсем без языка - ну никак, разве что в команде, в которой вы не будете никак контактировать с заказчиком напрямую.
    Но могу сказать, что для начала хватит и очень базового знания языка и Google Translate.
    Ответ написан
  • Как исправить баг в chrome OC mac?

    @GreatRash
    Почему бы вам не анимировать при помощи CSS? Transition, animate - вот это всё.

    Хром на маке медленно работает, медленней чем Сафари, причина этого непонятна лично мне. Замечал падение производительности некоторых плагинов (к примеру Unity Player) более чем в 2 раза. Можно попробовать открыть chrome://flags и сравнить значения на винде и на маке. Может там аппаратное ускорение например выключено по умолчанию...
    Ответ написан
    4 комментария
  • Онлайн сервис проверки кросбраузерности в mac?

    @Mihail9575
    Можешь попробовать поизврощаться и установить mac на виртуалку...
    Ответ написан
    Комментировать
  • Settings user в sublime text 2?

    jlekapb
    @jlekapb
    .do
    я скрываю неиспользуемые пакеты, чтобы при вызове ctrl+shift+p не видеть лишних строк:
    {
    "ignored_packages":
    [
    "ActionScript",
    "AppleScript",
    "ASP",
    "Batch File",
    "C#",
    "C++",
    "Clojure",
    "D",
    "Erlang",
    "Go",
    "Graphviz",
    "Groovy",
    "Haskell",
    "LaTeX",
    "Lisp",
    "Lua",
    "Makefile",
    "MATLAB",
    "Objective-C",
    "OCaml",
    "Perl",
    "Python",
    "PyV8",
    "R",
    "Scala",
    "ShellScript",
    "TCL",
    "Textile",
    "Vintage"
    ],
    }
    Ответ написан
    Комментировать
  • Объясните коротко, по делу что же лучше/производительнее/удобнее и в каких ситуациях?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Добавлю к вышесказанному. on может выполнять то, что выполняют остальные функции.
    обычный клик мышью
    $el.click(function(e) { })     ==   $el.on('click', function(e) { });
    $el.bind('click', function(e) { })     ==   $el.on('click', function(e) { });

    множественное событие.
    $el.bind('keyup keypress blur change', function(e) { })     ==   $el.on('keyup keypress blur change', function(e) { });

    live событие. live используется тогда, когда нужно назначить событие на элемент, которого еще не существует, или он будет удаляться и потом опять создаваться.
    jQuery('.el').live('click', function(e) { })  ==  jQuery(document).on('click', '.el', function(e) { });
    Ответ написан
    Комментировать
  • Объясните коротко, по делу что же лучше/производительнее/удобнее и в каких ситуациях?

    live отметаем сразу, т.к. он уже не только deprecated, но и deleted. С bind и click все интереснее - внутри (в коде jquery) они ссылаются на on, и возможно даже будут удалены в будущем. Отличие функциональности click в том, что он может возвращать уже привязанное событие (аналогично trigger), если оное уже есть. Например, объявление click выглядит как-то так (не скажу за все версии):
    function (data, fn) {
        return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);
    }


    Также click не может делегировать события, т.е. вы не сможете сделать так, чтобы событие было актуально не только для всех элементов a, которые уже есть, но и для тех, что сгенерируются любым способом в будущем (собственно, это позволяют live и on, первый из которых имеет статус deleted и недопустим к использованию).

    В целом, использование таких оберток может даже привести к очень незначительному, но все же снижению производительности за счет во многих случаях лишнего вызова дополнительной функции. Поэтому, лично я рекомендовал бы не использовать bind, а выбор между click (и другими "событийными обертками") и on делать на основании приведенного выше участка кода и нужной вам функциональности (еще раз напомню, что click и тп. не позволяют отслеживать появление новых элементов на странице).

    Как-то так. Прошу извинить если немного напутал терминологию.

    UPD. live технически также ссылался на on, но, хотя в отличие от bind и прочих позволял отслеживать появление новых элементов, имел много недостатков - тут можно много интересного прочесть. Возможно, поэтому его и удалили.
    Ответ написан
    2 комментария
  • Объясните коротко, по делу что же лучше/производительнее/удобнее и в каких ситуациях?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    мне казалось что все что не .on помечено как deprecated...

    В любом случае:
    - .on - универсальный метод объеденяющий все ниже перечисленные. Всегда старайтесь использовать его.

    - .live - вешает листенер на document и проверяет источник события. Гуглить "Всплытие событий". Был еще .delegate, который делал ровно то же самое но вы сами указывали ноду на которую вешается обработчик. А теперь вопрос, что будет быстрее? Вешать обработчик напрямую на элемент или на его родителя и проверять с какого элемента этот ивент всплыл? Будет ли разница по глубине DOM дерева? Если мы дошли что чем ближе обработчик висит к целевой ноде, тем быстрее, почему вообще нужно использовать делегирование событий? Помимо упрощения работы (если DOM поменялся обработчики не нужно перерегистрировать так как контейнер не менялся и все еще хранит листенер) есть еще такой параметр как количество листенеров. Если у вас табличка аля эксель, проще повесить один листенер на контейнер чем много-тысяч на каждую ячейку.

    - .bind - просто вешает событие на элемент.

    - .click - алиас для .bind('click').
    Ответ написан
    Комментировать