Рубрика «javascript library» - 2

Получил я достаточно стандартное задание: фильтровать вводимые юзером символы в input, т. е. пользователь может ввести в строку набор цифр и букв, например, '5s68d.4r55e.6t5', а на сервер я должен отправить корректное для сохранения сумму в рублях — '568,455' (рублей).

Справился я с заданием достаточно быстро, повесив на input событие focusout, но у моего решения был ряд важных недостатков: где в данном примере заканчивается сумма в рублях и начинаются копейки? Если пользователь введет несколько минуcов (отрицательные значения тоже корректны в данном случае), то какой из минусов считать началом строки? И так далее.
Читать полностью »

image

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

Как и раньше, библиотека OpenSource и распространяется по лицензии MIT, так что берите, используйте и, вообще, далайте что хотите без каких-либо ограничений.

Читать полностью »

cloneКлонирование объектов в JavaScript довольно частая операция, к сожалению, JS не предоставляет быстрых нативных методов для решения этой задачи.

К примеру, популярная Node.JS ORM Sequelize, которую мы используем на backend-е нашего проекта, значительно теряет в производительности на предвыборке большого (1000+) количества строк, только на одном клонировании. Если вместе с этим, к примеру, в бизнес-логике использовать метод clone известной библиотеки lodash — производительность падает в десятки раз.

Но, как оказалось, не всё так плохо и современные JS-движки, такие как, например, V8 JavaScript Engine, могут успешно справляться с этой задачей, если правильно использовать их архитектурные решения. Желающим узнать как клонировать 1 млн. объектов за 30 мс — добро пожаловать под кат, все остальные могут сразу посмотреть реализацию.
Читать полностью »

История старая, я так думаю, все помнят window.cookie = '...' (а может кто этим пользуется), жутко неудобная штука.

Приведу пример на нативном js:

// Добавление печенья
function setCookie(key, value) {
  window.cookie = key + '=' + encodeURIComponent(JSON.stringify(value));
}

// Получение печенья
function getCookie(key) {
  var matches = document.cookie.match(new RegExp(
    '(?:^|; )' + key.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + '=([^;]*)'
  ));
  return JSON.parse(decodeURIComponent(matches[1]));
}

// Добавляем строку
setCookie('string', 'Моя строка');
// Добавляю объект
setCookie('object', {a: 1, b: 2});

// Получаю объект
var object = getCookie('object');

Читать полностью »

image

Electron — система позволяющая создавать кроссплатформенные приложения используя одни только веб-технологии, такие как HTML, CSS и конечно, JS.

Нужно отметить, что разработка на Электроне очень во многом отличается от обычного браузерно-серверного приложения на Node. О чем и будет эта статья.
Читать полностью »

Я не сторонник велосипедов. Прежде чем начать разрабатывать свое решение тривиальной на мой взгляд задачи, всегда трачу уйму времени на поиски уже существующих библиотек или модулей. И далеко не потому, что мой код заведомо будет хуже стороннего. Просто, зачем придумывать то, что уже создано, проверено и отлажено. Гораздо лучше потратить время на создание чего-нибудь нового, непридуманного доселе. Однако в этот раз мне все-таки пришлось садиться за разработку самому. В статье речь пойдет об удобной js-библиотеке, позволяющей «связывать» данные.
Читать полностью »

В прошлом месяце на главной странице Google красовалась ссылка на игру Lightsaber Escape. К сожалению, поиграть мне в нее не удалось, но создать нечто похожее захотелось.

Об идее

Немного истории. Мне в детстве очень нравилась приставка Nintendo Will, именно тем, что ты управляешь движениями и благодаря этому можно сильнее погрузится в атмосферу игры. Для своей игры я тоже хотел использовать данную идею. Контроллером должен был стать телефон с гироскопом (сейчас он есть во многих), а в качестве экрана любое устройство с браузером, поддерживающим Web Socket. В качестве прототипа для игры был выбран «Paint».
Читать полностью »

Примеры внешнего вида виджетов при выборе светлой темы оформления

Некоторое время тому назад я достаточно плотно занимался разработкой всевозможных приложений под facebook и соответственно часть проектов в формате «для души» были связаны именно с этой социальной сетью. Об одном из таких проектов и пойдет речь в этой статье, а именно об альтернативном варианте бейджа для страниц facebook. Толчком к реализации послужил удручающий внешний вид нативных бейджей. Источником вдохновения стал подход к этому вопросу у Google+. Базовые задачи были просты — простота в установке и настройке, а кроме того максимально возможная кросс-браузерность.
Читать полностью »

Эта статья не про ваши сладкие интерфейсы на реакте, ангуляре или что вы там используете? Это статья про те ситуации, когда у вас есть кучка jQuery лапши. Нет, пусть это будут горы jQuery лапши, завернутой во вьюшки бэкбона.

В статье используется библиотека Backbone.View.Elements

Проблема первая: маловыразительные селекторы

Все мы видели лапшу, все мы знаем: лапша в JSе — наверно и в верстке не все хорошо. А раз все так, то код, скорее всего, кишит непонятными манипуляциями с домом. Читать такой код сложно, ведь надо, не упуская мысли автора о том, что здесь вообще происходит, держать в уме кучку невнятных названий для элементов. Итак, давайте придадим коду немножко выразительности:

_selectors: function () {
    return {
        elemName: '.block__elem-name'
    };
}

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

this._elem('elemName');

вмсето

this.$('.block__elem-name');

Читать полностью »

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

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js