Дружим WordPress и Webpack

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

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

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

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

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

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

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

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

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

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

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

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

Передача 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. Дальше рассмотрим несколько основных возможностей библиотеки.

HTML5 Local Storage

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

Могу предположить, что уже многие слышали у новых возможностях html5. Одной из такой является localStorage. Говоря простыми словами — это клиент-сайд база данных, которая позволяет сохранять данных в форме «ключ — значение». Это достаточно удобно для сохранения временных данных пользователей.

На данный момент эта возможность поддерживается большинством современных браузеров: Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+, Chrome 4+, Opera 10.6+. Далее я хотел бы рассказать как использовать это небольшое удобство для ваших проектов.

Стиль для placeholder в CSS3 или реализация placeholder на javascript

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

Многие уже знают, что в html5 для input элементов добавился атрибут placeholder которого очень не хватало. Благодаря которому легко добавлять в input поля текст для примера или подсказки.

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

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder {
   color: red;
}

Пока что данные стили реализованы для браузеров на webkit и для firefox. Но не будем забывать, что старые версии браузеров ещё не поддерживают этот атрибут.

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

function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

// А в DOM ready можно прописать следующее условие

if (!hasPlaceholderSupport()) {
        $('[placeholder]').focus(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
          }
        }).blur(function() {
          var input = $(this);
          if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
          }
        }).blur();
}

Соотвественно здесь вам придется уже добавить свои стили для класса placeholder

Установка и настройка Subversion 1.6 на CentOS 5

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

Subversion или другими словами – система контроля (управления) версиями. Думаю, что многим разработчикам это знакомо. Практически любая разработка программного обеспечения или даже сайта не обходится без этой системы. Вы ещё не используете системы контроля версиями? То пора эта начать, даже если вы единственный разработчик.

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

Страница 1 из 3123