Дружим WordPress и Webpack

Опубликовано

Разработку фронтенда сегодня уже тяжело представить без webpack, а все потому что он предоставляет очень удобные возможности для автоматизации многих процессов. Это очень сильно облегчает процесс разработки и само-собой ускоряет его. В этот раз, когда я решил обновить тему для своего блога, я решил попробовать использовать его возможности. Особенно мне хотелось использовать sass при создании темы и добавить postcss с autoprefixer. Ну что же, есть желание, то надо пробовать. 

Разработка игры: Умник! Играй с друзьями

Опубликовано

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

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

Вот и в один из вечеров я решил попробовать написать свою игру и посмотреть на каких технологиях это можно сделать. Моя игра Вконтакте http://vk.com/app4533532. А дальше небольшое описание.

Установка bower компонентов через https:// вместо git://

Опубликовано

Большинство компонентов которые устанавливаются через Bower, например, пытаются произвести загрузку через get:// протокол, а он работает по порту 9418. Если у вас установлен фаервол который закрывает этот порт, то само собой загрузить ничего не получится.

Поэтому существует специальная настройка конфигурации которая позволяет загружать компоненты по https протоколу.  Для этого в консоли вашей ОС выполните следующую строку.

git config --global url.https://.insteadOf git://

Сборка backbone+requirejs проекта с помощью grunt

Опубликовано

grunt-logoМоей основной задачей в последнее время является создание одностраничных javascript приложений. В основном я использую фреймворк Backbone и requirejs. Обычно публикация приложения была простым действием «svn update» но из-за этого возникала куча проблем, начиная с несжатых файлов стилей, огромного количества js файлов и заканчивая кэшированием файлов браузером.

Поэтому я решил озадачится и воспользоваться сборщиком проектов, который должен был решить все возможные проблемы с публикацией проектов. Выбор пал на Grunt. Почему именно он? Возможно потому что для него сейчас уже существует огромное количество плагинов и им легко пользоваться.

Не буду вдаваться в описание этого сборщика, в Интернете есть достаточное количество уже информации. Расскажу о том, как он помогает решать непосредственно мои задачи.

Сортировка DOM элементов с jQuery

Опубликовано

Очень часто может возникнуть ситуация когда необходима сортировка html элементов в DOM с помощью javascript.

Для решения данной задачи можно воспользоваться встроенной функцией sort.

Например, у нас есть вот такой неупорядоченный список.

<button class="sort-elements">Сортировать</button>

<div class="sorting">
    <ul class="elements">
        <li>Элементы</li>
        <li>Для</li>
        <li>Проверки</li>
        <li>Сортировки</li>
        <li>На</li>
        <li>jQuery</li>
    </ul>
</div>

Для его сортировки можно использовать следующий метод

$('.sort-elements').click(function(){
    var $elements = $('.elements li');
    var $target = $('.sorting ul');
    
    $elements.sort(function (a, b) {
        var an = $(a).text(),
            bn = $(b).text();
        
        if (an && bn) {
            return an.toUpperCase().localeCompare(bn.toUpperCase());
        }
        
        return 0;
    });
    
    $elements.detach().appendTo($target);
});

Или вот здесь можно посмотреть рабочий пример сортировки.

strip_tags на javascript или как убрать html теги

Опубликовано

Простенькая функция на javascript которая поможет вам убирать html теги

function strip(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent||tmp.innerText;
}

Передача JSON объекта в iframe или в новое окно через postMessage

Опубликовано

Передача информации между родительским окном и iframe на странице или дочерним окном стала возможна благодаря новым возможностям HTML5. Теперь запросто можно отправить JSON объект, например, в открытый iframe на другом домене. Это стало возможным благодаря window.postMessage.

Пишем плагин-виджет для WordPress и публикуем в репозитории

Опубликовано

Написание виджетов для WordPress является для разработчиков постоянной задачей, потому что через виджеты очень легко выводить какую-либо дополнительную или справочную информацию.

Создание виджета ничем не отличается от написания плагина для WordPress, которую я писал в предыдущей статье. Но в этот раз, я хотел бы рассказать не только о том, как написать свой виджет, но о том, как добавить плагин в репозиторий WordPress.

Лови moment.js или удобная библиотека для работы со временем на JavaScript

Опубликовано

momentjsРабота с датой в javascript для разработчиков в том виде, в котором она реализована, порой предоставляется не совсем удобной. Для того, что бы отформатировать дату в нужном формате приходится использовать множество функций объекта Date. Например, куда проще с этим делом обстоит в языке PHP в котором с помощью функции date можно форматировать дату в нужный формат. В JavaScript же нам понадобиться использовать методы объекта, например, getFullYeargetHours или им подобные, да и еще проверять что бы у числа были впереди идущие нули.

Все это порождает огромное количество кода с разными проверками. Чтобы этого избежать хочу порекомендовать вам одну из удобных (на мой взгляд) библиотек для работы со временем на JavaScript. Это — moment.js.

Данная библиотека предоставляет не только удобные функции для форматирования даты, но и различные возможности для операций над временем и главное — ее можно использовать вместе с node.js, что позволит вам сократить время разработки ваших приложений. Кроме того, библиотека имеет множественную локализацию включая русскую. Скачать последнюю версию библиотеки вы всегда сможете на GitHub. Дальше рассмотрим несколько основных возможностей библиотеки.

Как отсортировать json объект на javascript

Опубликовано

Благодаря встроенной в javascript функции sort можно очень просто сортировать массивы

[1, 3, 9, 2].sort(function(a,b){return a-b;});
  // Returns: [1, 2, 3, 9]

UPD: Стоить заметить, что для сортировки числовых значений надо задать функциональный литерал иначе функция сортирует массив как строковые значения.

Но как быть, когда нам пришел json объект с произвольными данными и нам надо отсортировать его по какому-то из значений, например, «цене товара» или «времени добавления» ?

Для этого в javascript в функцию sort можно передать функцию сортировки. Вот пример, как можно сортировать json объект на javascript

[
  { name: "Клиент 1", price: 2000 },
  { name: "Клиент 2", price: 1000 },
  { name: "Клиент 5", price: 1200 },
  { name: "Клиент 3", price: 3000  }
].sort(function(obj1, obj2) {
  // Сортировка по возрастанию
  return obj1.price-obj2.price;
});

Для обратной сортировки можно поменять местами первый и второй объект

[
  { name: "Клиент 1", price: 2000 },
  { name: "Клиент 2", price: 1000 },
  { name: "Клиент 5", price: 1200 },
  { name: "Клиент 3", price: 3000  }
].sort(function(obj1, obj2) {
  // Сортировка по убыванию
  return obj2.price-obj1.price;
});

UPD: Сортировка массива объектов по строкам

[
  { name: "Бананы", price: 2000 },
  { name: "Сливы", price: 1000 },
  { name: "Тыква", price: 1200 },
  { name: "Ананасы", price: 3000  }
].sort(function(obj1, obj2) {
  if (obj1.name < obj2.name) return -1;
  if (obj1.name > obj2.name) return 1;
  return 0;
});
Страница 1 из 212