• Как собрать данные с инпута и завернуть их в ссылку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Fiddle
    var $in = $('#input')
      , $check = $('#check')
    	, $links = $('#links')
    ;
    
    $check.on('click', function () {
    	var val = $in.val();
    	$in.val('');
      $links.append(
    	  "<a class='link' href='#'>%VALUE%</a>"
    		  .replace('%VALUE%', val)
    	);
    });


    То же на чистом JavaScript без jQuery:
    spoiler
    var els = {
    	input: document.getElementById('input'),
    	check: document.getElementById('check'),
    	links: document.getElementById('links'),
    	link: document.createElement('a')
    };
    
    els.link.className = 'link';
    els.link.href = '#';
    
    els.check.addEventListener('click', function(){
    	var a = els.link.cloneNode();
    	a.innerText = els.input.value;
    	els.input.value = '';
    	els.links.appendChild(a);
    });
    Fiddle
    Ответ написан
  • Как реализовать такой эффект для двух пересекающихся картинок?

    Есть похожее CSS-свойство mix-blend-mode:
    mix-blend-mode: multiply;

    Fiddle
    Ответ написан
    Комментировать
  • Как авторизовать пользователя на нужной странице?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Так при редиректе создавайте сессию, и в ней держите изначальное намерение посетителя.
    Ответ написан
  • Как добиться такого эффекта для двух пересекающихся картинок?

    Есть два способа:

    Первый вариант: mix-blend-mode: multiply;Fiddle

    Второй вариант, когда обе картинки – фон одного элемента:
    .fx {
      background-image: url( bg1.png ), url( bg2.png );
      background-repeat: no-repeat, no-repeat;
      background-blend-mode: multiply, normal;
    }
    Fiddle
    Ответ написан
    4 комментария
  • Как сделать подстановку текста в инпут по клику?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    document
      .getElementById('e-example')
      .addEventListener('click', function(){
        document.getElementById('search').value = this.innerText;
      });

    Fiddle
    ef748af96dc149ca8580c9fb97baa66a.png
    Ответ написан
    Комментировать
  • Kак мне поменять картинку через canvas?

    В скрипте /assets/js/base.js эта картинка задана в переменной image.src = 'data:image/png;base64,...

    Вам нужно перевести вашу картинку в нужный размер 190x140, затем закодировать в base64 и подставить в том скрипте.
    Ответ написан
    Комментировать
  • Как найти все комментарии в группе вк?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    1. Подключить callback API, и получать на вашем сервере уведомления о каждом комментарии.
    2. Заносить id коммента в кэш (скажем, Redis).
    3. Проверять через 15 минут коммент и стирать, если лайков мало.


    Для маленьких групп можно и
    без callback api
    1. Вы знаете / запоминаете где-то ID всех своих постов.
    2. Через wall.getComments() получаете для каждого поста список комментов с отметкой времени и счётчиком лайков.
    3. Комменты старше X и числом лайков меньше Y – удаляете.
    Ответ написан
    6 комментариев
  • Есть ли способ "самоуничтожить" html документ?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Надёжного / серьёзного способа нет. Миллион способов обойти это ограничение: от снимков экрана (в т.ч. буквальных, на телефон или фотоаппарат), до консоли разработчика, где видны все сетевые запросы и ответы.

    Можно «секретную» часть подгружать через ajax POST-запрос. Пользователь должен быть авторизован на вашем сайте. На сервере проверять, что именно этот пользователь ещё не получал эту инфу, и пометить, что он её получил.

    AJAX-запрос невозможен при выключенном JavaScript. Так что положимся на него же (на JS) для удаления подгруженного контента по таймауту.
    Ответ написан
    Комментировать
  • Как объединить два массива?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    У вас не массивы [] а объекты {}.

    В Underscore.js есть метод extend()
    исходник
    _.extend = createAssigner(_.allKeys);
    
      var createAssigner = function(keysFunc, undefinedOnly) {
        return function(obj) {
          var length = arguments.length;
          if (length < 2 || obj == null) return obj;
          for (var index = 1; index < length; index++) {
            var source = arguments[index],
                keys = keysFunc(source),
                l = keys.length;
            for (var i = 0; i < l; i++) {
              var key = keys[i];
              if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key];
            }
          }
          return obj;
        };
      };
    
      _.allKeys = function(obj) {
        if (!_.isObject(obj)) return [];
        var keys = [];
        for (var key in obj) keys.push(key);
        if (hasEnumBug) collectNonEnumProps(obj, keys);
        return keys;
      };



    В jQuery тоже есть extend().
    исходник
    jQuery.extend = jQuery.fn.extend = function() {
    	var options, name, src, copy, copyIsArray, clone,
    		target = arguments[ 0 ] || {},
    		i = 1,
    		length = arguments.length,
    		deep = false;
    
    	// Handle a deep copy situation
    	if ( typeof target === "boolean" ) {
    		deep = target;
    
    		// Skip the boolean and the target
    		target = arguments[ i ] || {};
    		i++;
    	}
    
    	// Handle case when target is a string or something (possible in deep copy)
    	if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
    		target = {};
    	}
    
    	// Extend jQuery itself if only one argument is passed
    	if ( i === length ) {
    		target = this;
    		i--;
    	}
    
    	for ( ; i < length; i++ ) {
    
    		// Only deal with non-null/undefined values
    		if ( ( options = arguments[ i ] ) != null ) {
    
    			// Extend the base object
    			for ( name in options ) {
    				src = target[ name ];
    				copy = options[ name ];
    
    				// Prevent never-ending loop
    				if ( target === copy ) {
    					continue;
    				}
    
    				// Recurse if we're merging plain objects or arrays
    				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
    					( copyIsArray = Array.isArray( copy ) ) ) ) {
    
    					if ( copyIsArray ) {
    						copyIsArray = false;
    						clone = src && Array.isArray( src ) ? src : [];
    
    					} else {
    						clone = src && jQuery.isPlainObject( src ) ? src : {};
    					}
    
    					// Never move original objects, clone them
    					target[ name ] = jQuery.extend( deep, clone, copy );
    
    				// Don't bring in undefined values
    				} else if ( copy !== undefined ) {
    					target[ name ] = copy;
    				}
    			}
    		}
    	}
    
    	// Return the modified object
    	return target;
    };
    Ответ написан
    Комментировать
  • Какой алгоритм подойдет для описания полета насекомого?

    sergiks
    @sergiks Куратор тега Алгоритмы
    ♬♬
    Можно сделать цепочку преследования: к случайной точке тянется одна, к ней другая, и т.д., а последняя – муха.

    Очередную точку ставить на плоскости случайно, в любом месте внутри допустимой области. Эта точка – цель, к которой стремится следующая, невидимая точка: каждый следующий кадр её координаты изменяются на k * векторИзТекущегоПоложения-в-Цель:
    x = x + k * (xTarget - x);
    y = y + k * (yTarget - y);

    Так «преследователь» замедляется, по мере приближения к цели, никогда её не достигая.

    Эта невидимая точка – не одна. К ней, как к цели, стремится следующая. К той ещё одна. Наконец, сама муха по этому закону стремится к хвосту этой цепи - очередной точке.

    Чем больше звеньев в такой цепи, тем плавнее получается кривая. При приближении мухи к цели ближе, чем на D, генерится следующая случайная цель.

    Сделал рабочий пример.

    Можно поменять алгоритм и сделать, скажем, линейную скорость постоянной. Или случайно варьировать параметры k и D – от этого поменяется скорость и траектория от плавной ближе к ломаной.
    Ответ написан
    Комментировать
  • Как монетизировать расширение для браузера?

    Google пишут про 4 основных варианта:
    • In-app payments – покупки внутри приложения
    • One-time charge – разовый платёж
    • Subscription – подписка
    • Offering a limited trial version of your item – ограниченная (по времени или функциям) пробная версия
    fd335810f2c049558c97cd360aecc412.png
    Ответ написан
    3 комментария
  • Как сделать required для одного из трех select?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Перед тем, как «дальше» проверяйте, выбрано ли значение хотя бы в одном из трёх <select>
    Ответ написан
  • Как отрисовать контур в SVG?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Небольшая проблема была в том, что у вас этот контур состоял из двух кусков: правого верхнего уголка и всего остального (привет дизайнеру?). Исправил путь так, что теперь это один сплошной путь, без лишних точек и без ненужных групп <g>.
    скриншот
    bde82874e0b0474da2c847039e028361.png

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

    Подобрал на глаз длину штриха 2200, чтобы полностью закрывал всю длину, и на эту же величину смещаю паттерн при наведении мышки. CSS transition делает анимацию плавного перехода от нулевого смещения (паттерн начинается с 0 и полностью закрывает нижнюю копию) до смещения в 2200, чтобы начался пробел и полностью открыл нижний путь.

    Чтобы срабатывали стили :hover при наведении мышки пришлось обернуть SVG в <div>

    Fiddle
    Ответ написан
    1 комментарий
  • Как сделать поиск по буквам в масиве?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    JSON у вас некорректный: беспорядок в кавычках.

    Примерно так решается задача:
    $search = 'b';
    
    $json = '{"1":{"name":"Browser"},"2":{"name":"Браузер"},"3":{"name":"Повар"},"4":{"name":"bонки"}}';
    $data = json_decode($json);
    
    $found = array();
    foreach($data as $entry) {
    	$name = $entry->name;
    	if( false !== mb_stristr( $name, $search)) {
    		array_push( $found, $name);
    	}
    }
    
    print_r($found);
    /* Array
    (
        [0] => Browser
        [1] => bонки
    ) */
    Ответ написан
    Комментировать
  • Случайное число с заданной вероятностью, какой алгоритм?

    sergiks
    @sergiks Куратор тега Алгоритмы
    ♬♬
    Делают длинный диапазон, составленный из отрезков, пропорциональных вероятностям.
    0..22 : "0"
    22..22+19=41: "1"
    41..41+16=57: "2"
    ...
    ..100: "8"

    Выбор из него с линейной вероятностью даст желаемое распределение.

    Например, выпало 56 – попадает в диапазон, относящийся к "2"
    Ответ написан
    1 комментарий
  • Почему users.get не возвращает информацию о 1000?

    sergiks
    @sergiks Куратор тега ВКонтакте
    ♬♬
    Варианты:
    1. id повторяются
    2. id и короткое имя указывают на одного пользователя
    3. id отрицательны
    4. id не числа и не короткие имена
    Ответ написан
  • Можно ли как-то делать автопостинг в VK API без колесика рядом с датой, которое ведет на standalone приложение?

    sergiks
    @sergiks Куратор тега ВКонтакте
    ♬♬
    Технически можно постить не через API, а имитируя действия пользователя в браузере. Например, в безголовом браузере phantom.js или web view в Electron или nw.js
    Ответ написан
  • Как написать алгоритм поиска соседних элементов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Идея с отдельной работой по X и по Y неплохо работает. На каждом кадре проверяем каждую из 200 точек (это совсем не много).

    Сортируем массив точек по их X-координате. Двигаемся слева направо, выбирая очередную точку.

    Смотрим от неё влево (чтобы не проверять одну связь дважды, выбираем полуплоскость от точки) и отбираем только те точки, чей X отличается не более, чем на radius.

    Из них смотрим только на те, у которых Y не более, чем на radius отличается (уже в любую сторону: и вверх и вниз).

    У них проверяем уже евклидово расстояние – корень из суммы квадратов расстояний по X и по Y – чтобы было не больше radius. У таких есть «связь» – рисуем им ребро.

    Работающий fiddle (неминифицированный исходник на github)
    538264abb31847baa28fe05e015ac13c.png

    На компе даёт около 60 fps, на мобильнике от 40 до 55, т.е. совершенно приемлемая скорость при 200 точках.

    Первая версия ответа

    Интересна ситуация, наихудшая для оптимизации: когда за 1 кадр может поменяться максимальное число связей. Предположу, что это сетка из равносторонних треугольников, где длина ребра равна «триггерной» дистанции:
    картинка треугольной сетки
    5297fe1c584f4551aca5b77a2a987549.jpg
    Тут большинство точек, кроме крайних, взаимосвязаны. У каждой по 6 ближайших соседей. Примерно 200 * 6 / 2 = 600 связей (чуть меньше из-за краёв).

    Если такую сетку пропорционально увеличить на любую малую величину, сразу все связи порвутся, их станет ноль. Пусть на месте останется, скажем, левый верхний угол сетки. Тогда наибольший путь проделает нижний правый угол. Тут вопросы к особенностям вашей задачи:
    1. округляются ли координаты до целых или до какой-то точности?
    2. какой наибольший путь может проделать за один кадр точка?

    В идеальном мире всем достаточно проделать бесконечно малый шаг, и, вуаля!, было 600 связей, стало 0. Такой же шажок назад – не было связей, и вот их 600. Т.е. надо бы в каждый кадр проверять 600 ребер. Считать это за теоретический предел оптимизации?

    Сущности
    Точки и рёбра. Ребро ссылается на две точки. Точка ссылается на рёбра. Ребро имеет длину и, в зависимости от длины, может быть «видимым».

    Важнее всего следить за рёбрами, длина которых близка к пороговой – и с меньшей и с большей стороны. Такие стоит проверять почти каждый кадр, т.к. статус ребра может поменяться за один кадр. Прочие рёбра и кандидаты в рёбра проверять можно изредка.

    Можно давать рёбрам веса, пропорциональные желаемой частоте их обновления. Скажем, от 0 до 1. Вес равный 1 значит, что нужно проверять каждый кадр. Например, вес W = Math.max(0, D - Math.abs( length - D))/D, где D – пороговая дистанция.

    Остаётся сделать механизм, отбирающий рёбра в работу на очередном кадре, исходя из их весов. Запоминать время, когда ребро было обновлено. Приоритет его попадания в обработку равен W * (time - timeUpdated)
    Ответ написан
    3 комментария
  • Как оптимизировать svg-файл, в котором находится 5 000 точек, для встраивания на страницу?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Браузеру тяжеловато отрисовываеть такое количество элементов.

    Canvas вместо SVG не рассматривали?
    Ответ написан
    1 комментарий