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

parseUrl('https://gostash.it/ru/stashes/create?type=snippet')

В ответ получаем следующее:

{
    "protocol":"https:",
    "host":"gostash.it",
    "hostname":"gostash.it",
    "pathname":"/ru/stashes/create",
    "search":"?type=snippet",
    "hash":""
}

Сам скрипт:

  function parseUrl(href) {
    const match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);

    return {
      protocol: match[1],
      host: match[2],
      hostname: match[3],
      port: match[4],
      pathname: match[5],
      search: match[6],
      hash: match[7],
    };
  }

Простая в использовании библиотека, позволяет строить красивые графики использую <canvas>.

Фичи

— Библиотека содержит 8 типов графиков
— Графики адаптивны — будут выглядеть везде хорошо, как на десктопах, так и на мобильных устройствах
— Можно совмещать разные типы графиков
— Отличная документация
— Простое API

Теперь покажу пример подключения и использования библиотеки, и перейдём к типам видов графиков (картинки).

Продолжение »

На сайте Designmodo предоставлена большая подборка плагинов, без дополнительных библиотек типа jQuery.

В подборке есть плагин для модальных окон, сладер, проигрыватель видео, кастомный скроллбар и много другое. Вот список некоторых, интересных плагинов на мой взгляд.

Plyr (Github)
Красивый плеер для воспроизведения видео с таких сервисов как Youtube, Vimeo

Продолжение »

function getIndexOfElem(elem) {
  if (elem instanceof Element) {
    return Array.prototype.indexOf.call(elem.parentElement.children, elem);
  }
}

Простая функция, которая переберет в цикле нужные вам для проверки свойства CSS и проверит поддерживает ли их браузер.

function checkCssSupport(containerSelector) {
    var supportValues = [
        {
            feature: "display",
            value  : "flex",
        }
    ], supportIndex, curFeature,
       curValue, notSupportedClass;
    for (supportIndex in supportValues) {
        curFeature = supportValues[supportIndex].feature;
        curValue   = supportValues[supportIndex].value;
        notSupportedClass = 'no-' + curValue + '-support';
        $(containerSelector).addClass(notSupportedClass);
        if (typeof(CSS) !== 'undefined') {
            if (CSS.supports(curFeature, curValue)) {
                $(containerSelector).removeClass(notSupportedClass);
            }
        }
    }
}

Продолжение »

/**
 * @param {Number} from
 * @param {Number} to
 * @param {Number} speed
 * @param {Function} update
 */
const animateNumber = function(from, to, speed, update) {
    const piece = (to - from) / (3.6 * speed);
    const step = () => {
        num += piece;

        update(num);

        (num <= to) && requestAnimationFrame(step);
    };
    let num = from;
    
    requestAnimationFrame(step);
};

(function($) {
    $.rand = (arg)=>{
        return ($.isArray(arg))?arg[$.rand(arg.length)]:(typeof arg == "number")?Math.floor(Math.random() * arg):11;
    };
})(jQuery);
var items = [523,3452,334,31,57,5346];
console.log($.rand(10));
console.log($.rand(items));
console.log($.rand());

var data =[
{name:'Яблоко',cost:21},
{name:'Яблоко',cost:21},
{name:'Яблоко',cost:20},
{name:'Груша',cost:30},
{name:'Слива',cost:20}
];
function uniq(arr) {
    const index = [];
    return arr.filter((elem) => {
        const str = JSON.stringify(elem);
        return index.includes(str) ? false : index.push(str);
    });
}
//по полю
function onlyUniq(myArr, key) {
    return myArr.filter((obj, pos, arr) => {
        return arr.map(el => el[key]).indexOf(obj[key]) === pos;
    });
}
console.log(uniq(data));
console.log(onlyUniq(data, 'name'));

// Изменяет URL в формате key/value
// Возвращяет изменный URL

function UpdateQueryString(key, value, url) {
    if (!url) {
        url = window.location.href;
    }

    var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
    var separator = '/';

    if (url.match(re)) {
        return url.replace(re, '$1' + key + "/" + value + '$2');
    }
    else {
        return url + separator + key + "/" + value;
    }
}

В соц. сетях, например в Twitter, вы заметите, что даты выводятся в формате — 1 hour ago. Чтобы сделать на своё сайте также, нам достаточно использовать timeago.js

Если вам нужна поддержка русского языка, достаточно подключить его так:

<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.ru.js"></script>

Другие локализации можете найти тут — locales

// JS
jQuery(function ($) {
    $(document).ready(function() {
        $(".time").timeago();
    });
});

// Html
<time class="time" datetime="2015-08-18T09:24:17Z" title="18 Августа 2015">18 Августа 2015</time>