Задать вопрос
  • Как сверстать текст по дуге?

    Принципиальная особенность (достоинство) этого способа – в том, что геометрия самих букв тоже изменяется. Напр. в букве "H" параллельные вертикальные становятся непараллельными, получив перспективное искажение. Т.е. это 100% честное искажение всей картинки, а не разброс букв по отдельности.

    Способ: отрисовать этот текст в SVG, из него сделать canvas в разрешении с запасом – в несколько раз больше нужного. В canvas применить нужные искажения (легкая фраза, за которой куча сложностей, в т.ч. математика и антиалиасинг).

    Вставить как data-uri и просто новые canvas.

    Сделал пример, в котором из такого:
    <svg xmlns="http://www.w3.org/2000/svg"
         width="920" height="160" viewBox="0 0 230 40">
      <text text-anchor="middle" x="115" y="32" font-family="Times New Roman" font-size="35">
        Hello, Toster
      </text>
    </svg>
    получается такая картинка:
    example.png
    P.S. там всё сыро, надо ещё по краям области билиниар интерполяцию прозрачности, что ли, сделать..
    Ответ написан
    2 комментария
  • Реально ли неофициально устроиться на оффлайн работу в IT (без паспорта)?

    sergiks
    @sergiks Куратор тега Веб-разработка
    ♬♬
    Если с английским всё неплохо, а вот это «sinior» – просто опечатка, то есть смысл найти долгоиграющую задачу / работу через UpWork.

    Через другие каналы можно найти такого же плана работу с зарубежным стартапом, организованным русскоговорящими основателями, и общение будет на Русском языке.

    В обоих случаях вам будет капать в меру регулярная высокая по местным оценкам оплата в валюте на ваш счёт в PayPal или Payoneer, и про паспорт никто и не вспомнит.
    Ответ написан
    7 комментариев
  • Как сделать линию HR вертикальной?

    Расположить поверх большой <div> с border-left:1px solid #CCC?
    Ответ написан
    Комментировать
  • Как отрисовать данные из одного массива по 6 строк в 3ех столбцах?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Остаток от деления порядкового номера элемента в массиве на число элементов в блоке принимает нулевое значение, когда пора создавать новый блок. А предыдущий готовый, если есть, вставлять в документ.

    var i
      , w
      , div
      , box
      , label
      , parent = document.body // к чему приклеивать блоки
      , perBlock = 5 // сколько в одном блоке
    ;
      
    for( i = 0; i < widgetSettings.length; i++) {
      w = widgetSettings[i];
    
      box = document.createElement('input');
      box.type = 'checkbox';
      box.id = box.name = w.id;
      box.value = w.value;
      
      label = document.createElement('label');
      label.appendChild(box);
      label.appendChild( document.createTextNode(w.text));
      
      if( i % perBlock === 0) {
        if(div) parent.appendChild(div);
        div = document.createElement('div');
      }
      div.appendChild(label);
    }
    if( (i-1) % perBlock) parent.appendChild(div);

    Fiddle
    Ответ написан
    Комментировать
  • Необычный hover эффект?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Событие mousemove или onEnterFrame(),
    пересчитать прозрачность каждой точки, как квадрат расстояния от позиции мыши.

    Сделал пример на canvas.
    upd. добавил инертности/плавности перехода цветов.
    Ответ написан
    3 комментария
  • Как получить массив дат от определенной даты?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Сделать объект даты на тот момент, и прибавлять по дню.

    var D = new Date("2017-08-27")
      , Till = new Date()
      , result = []
    ;
    
    function pad(s){ return ('00' + s).slice(-2)}
    
    while( D.getTime() < Till.getTime()) {
      result.push( '' + D.getFullYear() +'-'+ pad(D.getMonth()+1) +'-'+ pad(D.getDate()));
      D.setDate( D.getDate()+1);
    }
    //  2017-08-27,2017-08-28,2017-08-29,2017-08-30,2017-08-31
    Ответ написан
    Комментировать
  • Есть ли функция, которая сравнивает id и возвращает новый массив?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Fiddle
    function findDevice(id) {
      for( let i in devices) {
        if( devices.hasOwnProperty(i) && devices[i].id === id)
          return devices[i];
    	}
    }
    
    function addDevices(p) {
      p.devices = [];
    	for( let i = 0; i < p.devices_ids.length; i++)
    	  p.devices.push( findDevice( p.devices_ids[i]));
      return p;
    }
    
    var result = people.map(addDevices);
    Ответ написан
    Комментировать
  • Как собрать данные с инпута и завернуть их в ссылку?

    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 комментарий