Алексей Симоненко

Как сделать онлайн Twitter трансляцию у себя на мероприятии

Mon, 09 Apr 2012 16:38:00 +0400

Совсем недавно отгремела в Санкт-Петербурге конференция по инновационному маркетингу и брендингу — Digitale. Одним из интерактивных элементов конференции была онлайн трансляция twitter-сообщений по хеш-тегу. Сделать это на конференции выпало мне, и по началу я долго искал подходящий вариант в интернете. Такие сервисы как twihoo, twistori не хотят работать с конференциями и брендировать каналы. Именно поэтому мне пришлось написать такой скрипт самому.

Задача была проста, как только сообщение с хеш-тегом #dconf попадает в Twitter оно сразу же должно быть отображено на экране. Для этого я вооружился Node.js, Twitter Streaming API и Websockets.

Самое удобное в Node.js это возможность получать данные в потоке, а так как Twitter Streaming API отдает данные именно таким способом, то это идеальный вариант. Таким образом Node.js получает сообщения от Twitter.

Получение потока из Twitter Streaming API

Для отправки сообщений клиенту будем использовать Websockets, этот способ так же обеспечит максимально быстрое попадание сообщения с сервера на экран. Так как стандарт Websockets до сих пор находится в активной стадии разработки, и периодически меняется его реализация, то будем использовать socket.io для работы с веб-сокетами. Таким способом мы будем принимать сообщения на клиенте.

Получение сообщений с сервера через websockets

Исходники полной версии можно посмотреть на GitHub. Чтобы запустить сервер вам понадобится CoffeeScript и следующая комманда.

coffee twitter.coffee --name <имя пользователя в twitter> --password <пароль пользователя в twitter> --hash <хеш-теги по которым вы хотите вести трансляцию>

Так же в репозитории есть файл example.html с примером реализации на клиентской части.

Twitter трансляция на любых мероприятиях это очень круто, это не дает участникам скучать. Кстати, именно за счет трансляции хеш-тег #dconf удалось вывести в тренды по всей России, что еще больше привлекло внимание.

И на последок. Вы можете посмотреть работающий пример на сайте Digitale Conference. Делал я этот скрипт только для последних версий Firefox, Chrome, Safari, но вы легко сможете доработать этот скрипт до нужного вам уровня поддержки.

Пользуйтесь!

Поддержка ECMAScript 5 и ECMAScript 6 Harmony в браузерах уже сейчас

Thu, 15 Mar 2012 09:29:41 +0300

Небольшое пояснение для тех кому слова ECMAScript и Harmony ни о чем не говорят. ECMAScript это спецификация языка, на основе которой развивается наш с вами JavaScript. А Harmony это следующая версия ECMAScript, работа над которой сейчас активно ведется. Теперь немного о том какие изменения произошли в этих версиях и какова текущая поддержка в браузерах.

ECMAScript 5

Это первое большое изменение спецификации, разработка которой шла около 10 лет. И, к сожалению, только недавно браузеры начали активное внедрение нового функционала. Коротко о том, что нового пришло с ECMAScript 5.

Array extras

Array.forEach
Array.map
Array.every
Array.filter
Array.some
Array.indexOf
Array.lastIndexOf
Array.isArray

Object extras

Object.create
Object.keys
Object.defineProperty
Object.defineProperties
Object.getOwnPropertyDescriptor
Object.getOwnPropertyNames
Object.preventExtensions
Object.isExtensible
Object.seal
Object.isSealed
Object.freeze
Object.isFrozen

Так же добавлена поддержка native JSON, метода bind для Function и strict режим.

На данный момент, только самые современные браузеры более-менее полно поддерживают ECMAScript 5. Среди них >= IE9, >= Firefox 4, >= Safari 5.1, >= Chrome 13, >= Opera 12. Полную таблицу поддержки спецификации можно посмотреть здесь.

ECMAScript 6 или Harmony

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

Getters и setters — позволяет определять какие параметры можно устанавливать, а какие только читать.
let — точно так же как var ограничивает видимость переменных в пределах функции, let ограничивает видимость переменных в пределах блока.
const — создание read-only констант.
Maps и WeakMap — для работы с объектами ключ/значение.

Кстати, CoffeeScript очень помог развитию Harmony, вот изменения в спецификации напрямую перешедшие из него:

Реструктуризующее присваивание (destructuring assignment).
Возможность указывать значения параметров функции по-умолчанию.
Операторы сравнения is и isnt.

Так же расширение методов Function, String, Number, Object, RegExp, Math и другие изменения.

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

Все это здорово, но я хочу сейчас!

Специально для тех кто хочет уже сейчас писать по спецификации и не думать работает это в их браузере или нет созданы два проекта: es5-shim и es6-shim. Оба этих проекта реализуют функционал из спецификации недоступный текущему браузеру. Разумеется речи не идет о полной поддержки, однако большинство полезных новшеств уже работают хорошо.

Установка PHP 5.4.0 на OS X Lion (10.7.3)

Tue, 13 Mar 2012 09:36:00 +0300

Вчера я написал о выходе PHP 5.4, а сегодня хочу рассказать как его поставить на OS X Lion.

Для дополнительных пакетов будем использовать homebrew. Для кого это что-то новенькое, вот их сайт, где подробно описано как его можно использоват и зачем он вообще нужен. Единственное что напомню, для того чтобы установить homebrew у вас должен быть установлен XCode. Его можно бесплатно установить через Mac App Store. Теперь, когда у нас все готово, можно приступить к установке.

Запускаем в терминале.

/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"

После этого небольшие настройки и установка необходимых пакетов для работы.

sudo chown -R $USER:staff /usr/local
brew install git
brew update
brew install wget

Переходим к связке MySQL+PHP. Первым делом установим MySQL. Возьмем последнюю версию из homebrew, это 5.5.20.

brew install mysql

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

unset TMPDIR
mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

mysql.server start

Дальше устанавливаем дополнительные пакеты необходимые для установки PHP 5.4.

brew install gmp
brew install libjpeg
brew install mcrypt
brew install libmcrypt
brew install gettext
brew install icu4c
brew install libxml2

Как только все пакеты установлены, можно качать последнюю версию PHP, на данный момент это 5.4.0. Пока свежая версия качается будет полезным познакомиться с разделом Migration Guide на официальном сайте, в нем подробно описаны все изменения с версии 5.3.

wget http://ru2.php.net/get/php-5.4.0.tar.bz2/from/ru.php.net/mirror
mv mirror php-5.4.0.tar.bz2
bunzip2 php-5.4.0.tar.bz2 && tar xvf php-5.4.0.tar
cd php-5.4.0

Приступаем к конфигурации PHP и последующей установки.

env EXTRA_LIBS="-lstdc++" ./configure \
--prefix=/usr/local/php \
--with-apxs2=/usr/sbin/apxs \
--with-layout=GNU \
--enable-calendar \
--enable-ftp \
--enable-bcmath \
--enable-mbstring \
--with-icu-dir=/usr/local/Cellar/icu4c/4.8.1.1 \
--enable-intl \
--enable-sockets \
--enable-soap \
--with-gettext=/usr/local/Cellar/gettext/0.18.1.1 \
--with-bz2 \
--with-zlib \
--enable-zip \
--with-gd \
--with-jpeg-dir \
--with-png-dir=/usr/X11 \
--with-xpm-dir \
--with-freetype-dir=/usr/X11 \
--enable-exif \
--with-gmp \
--with-mcrypt \
--with-mysql=mysqlnd \
--with-mysqli=mysqlnd \
--with-pdo-mysql=mysqlnd \
--with-mysql-sock=/usr/local/var/mysql/mysqld.sock \
--with-curl \
--with-openssl \
--with-libxml-dir=/usr/local/Cellar/libxml2/2.7.8 \
--with-xsl=/usr \
--with-xmlrpc \
--enable-shmop \
--enable-pcntl \
--enable-sysvmsg \
--enable-sysvsem \
--enable-sysvshm

make
sudo make install

Для удобства создаем символьные ссылки в /usr/local/bin.

ln -s /usr/local/php/bin/php /usr/local/bin/php
ln -s /usr/local/php/bin/pear /usr/local/bin/pear
ln -s /usr/local/php/bin/pecl /usr/local/bin/pecl
ln -s /usr/local/php/bin/phar.phar /usr/local/bin/phar
ln -s /usr/local/php/bin/php-config /usr/local/bin/php-config
ln -s /usr/local/php/bin/phpize /usr/local/bin/phpize

Остается обновить php.ini, кстати с версии PHP 5.4 многое в нем изменилось, поэтому предлагаю вам свою версию конфига для development окружения.

Перезапускаем Apache — sudo apachectl restart и смотрим на свеженький phpinfo().

На данный момент PECL расширение APC работает исправно, версия 3.1.9. Однако Xdebug до сих пор не работает, даже в последней 2.1.3 версии, будем ждать обновление.

Вышел PHP 5.4, что нового?

Mon, 12 Mar 2012 09:27:23 +0300

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

Главным изменением я бы назвал появление Traits. Это специальная структура позволяющая множественное наследование классом. В других языках это часто называется mixins (примеси). Для маленьких проектов это совершенно ненужная вещь, однако для больших систем, с кучей повторного использования кода, traits будут очень полезными.

Простейший пример, который показывает как это работает:

Пример работы Traits.

С traits могут появится общие реализации всяких паттернов проектирования, которые не будут мешать общему наследованию классов. Например, удобно будет сделать trait Singleton и использовать его там где нужно.

Остальные изменения я бы не назвал глобальными, скорее это небольшие улучшения синтаксиса и увеличение производительности. Хотя, можно отдельно сказать про встроенный в PHP веб-сервер. Думаю он будет полезен исключительно в процессе разработки. Запускается из терминала достаточно просто:

php -S localhost:3000

Правда немного напрягает что нужно писать отдельный класс для роутинга статических файлов и запускать его потом таким образом:

php -S localhost:3000 router.php

Примеры как писать такой файл можно посмотреть в документации.

Небольшие улучшения

Короткая форма записи массивов, прямо из JavaScript приехала видимо ☺
```
$array = ['php', 'mysql', 'apc'];
```
Вызов элемента массива возвращаемого функцией напрямую
```
foo()[0];
```
Вызов метода класса без присвоения класса переменной
```
(new Foo)->bar();
```
Вызов <?=$variable?> теперь возможен при выключенном short_open_tag
E_STRICT теперь входит в E_ALL

Один момент я так и не понял, в одной из beta-версий был scalar typehints я даже писал о нем в том году, однако в changelog я так и не смог найти упоминания о нем. Если его и правда убрали, то зачем?

Так же очень радует что выкинули большинство legacy функций и настроек, например magic_quotes, safe_mode, register_globals, y2k_compliance удалены из языка. Во всех расширениях использующих MySQL работа теперь идет через MySQL Native Driver.

Что ждать дальше?

В данный момент идет активная чистка багов. 38 ошибок уже исправлено и так как вышел PHP 5.4.1 RC1, ожидаем скорого релиза следующей версии. Кстати, в языке с релизом PHP 5.4.1 будет поддержка Apache 2.4, выходу которого я на днях очень удивился в Twitter.

В то же время началась работа над следующей мажорной версией PHP 5.5 или 6.0 — толком чего ожидать пока не ясно, но можно следить за развитием здесь.

Наверное я не на все моменты обратил внимания, если пропустил что-то интересное, напишите мне об этом.

Что мне дал 2011 год

Fri, 30 Dec 2011 13:44:00 +0300

Совершенно точно этот год был очень насыщенным. Работал в этом году с такими трендами как HTML5, CSS3, JavaScript. И в отличии от прошлого года уже не в теории, а на практике. Во многом на это повлияло быстрое развитие браузеров, даже Internet Explorer, что для него это вообще дико.

HTML5

Про большинство возможностей из спецификации я знал уже давно, но на практике получилось использовать только в этом году. Активно использовал новые возможности форм, хранение данных в localStorage/sessionStorage. Делал возможным, чтобы сайты работали в offline с помощью Application Cache. Активно использовал History API, чтобы сохранять состояние сайта и давать возможность возвращаться назад. Использовал Geolocation API для создания умных контактов. Web Workers для работы с тяжелыми JavaScript операциями и WebSocket для двустороннего соединения с сервером.

CSS3

Большинство браузеров в этом году очень сильно продвинулись в реализации CSS3 спецификации. Можно посмотерть что уже можно использовать с помощью сервиса caniuse.com. Однако самый большой минус этого движения был в появлении кучи одинаковых свойств с префиксами каждого браузера. Хорошо что есть такая замечательная штука как LESS, именно с ее помощью я верстал все последие сайты. Даже накидал небольшой набор функций для My Less Framework, что еще больше упростило жизнь.

JavaScript

JavaScript, я считаю, самым большим трендом этого года. Причем не только на клиентской стороне, но и на серверной.

Клиентский JavaScript
Я познакомился и стал активно использовать Backbone.js — MVC фреймворк для создания полноценных JavaScript приложений. Больше не пихаю во все места таких монстров как jQuery/Prototype/YUI/Dojo когда этого не нужно, а грамотно использую микро-фреймворки. Разобрался и полюбил CoffeeScript, теперь на Vanilla JavaScript смотрю с изумленным глазами ;)

Серверный JavaScript
Заменил PHP на NodeJS, заменил MySQL на MongoDB, заменил Apache на Nginx, заменил FTP на Capistrano. Написал несколько npm модулей, таких как: node-tumblr, node-gisty и других, которые я пока немогу выложить в open source. Начал помогать сообществу и делать pull request в открытые проекты, например: добавил авторизацию через ВКонтакте к everyauth.

В общем старался помогать сообществу как мог, спасибо что весь год меня читали. С новым годом вас!

Асинхронный скрипт подключения к Google Analytics социальных кнопок

Wed, 21 Dec 2011 10:29:00 +0300

В корпоративном блоге Serenity я написал статью о том, что в Google Analytics можно отслеживать нажатия на социальные кнопки и о том, почему я считаю это важным. Однако, по-умолчанию этот механизм работает только для кнопок +1. Для того чтобы в отчет попадали нажатия на другие социальные кнопки нам придется воспользоваться Google’вским API: Social Interaction Analytics.

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

Смотреть рабочий скрипт подключения социальных кнопок к Google Analytics.

Вам остается заменить UA-XXXX-1 на свой собственный Google Analytics ID и в post_url заменить ссылку на страницу, которую будете отслеживать.

Лучше всего взять сжатую версию скрипта (1,4k) и поместить перед </head>.

Кстати, из прошлой статьи я понял, что для многих не очевидно как и куда вставлять сами кнопки. Исправляюсь, вот пример кода для каждого социального сервиса, вставлять внутри <body>

Пример как вставлять социальные кнопки.

Пример работы такого скрипта можно посмотерть на сайте convertcss.com и в корпоративном блоге Serenity.

Что нового в ECMAScript 5

Wed, 14 Dec 2011 12:11:44 +0300

Презентация о новых методах в ECMAScript 5

Очень подробно, с примерами, рассказано о таких методах как:

Object.create
Object.defineProperties
Object.keys
Object.seal и Object.freeze и Object.preventExtensions

Источник: ECMAScript 5

Как управлять задачами cron с помощью Capistrano для NodeJS проектов

Tue, 22 Nov 2011 10:42:00 +0300

Я уже рассказывал о том как доставлять NodeJS проект на сервер с помощью Capistrano, теперь я расскажу как можно управлять задачами cron с помощью все того же Capistrano.

Для начала нам понадобится whenever — это замечательная библиотека для удобной работы с задачами крона. Библиотека написана на Ruby, но так как у вас уже стоит Capistrano это не должно быть проблемой. Устанавливаем:

gem install whenever

Чтобы создать структуру для работы с whenever, вызываем в кроне вашего проекта следующую команду:

wheneverize .

В проект будет добавлен один единственный файл config/schedule.rb, именно в нем будут описаны все задачи для исполения кроном. Для примера хочу показать как с помошью whenever можно запускать CoffeeScript файлы.

Смотреть пример schedule.rb на GitHub Gist.

То есть, каждые 2 часа из папки проекта будет запущен файл import.coffee. Больше примеров по работе с whenever можно посмотреть здесь.

Теперь нам осталось обновить config/deploy.rb, который мы разобрали в прошлый раз, и добавить в него два новых этапа, это task :update_crontab и task :clear_crontab. Результат:

Смотреть пример deploy.rb на GitHub Gist.

Думаю доставка ваших приложений с whenever будет еще проще, ведь теперь вы можете удаленно управлять кроном.

Асинхронное подключение Google Analytics, Google +1, Facebook SDK, Twitter Widgets и Вконтакте API

Wed, 16 Nov 2011 10:22:00 +0300

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

Вот работающий скрипт для подключения Google Analytics, Google +1 Button, Facebook SDK, Twitter Widgets и Вконтакте API.

Смотреть пример асинхронного подключения Google Analytics, Google +1, Facebook SDK, Twitter Widgets и Вконтакте API.

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

Большинство сервисов уже умеют работать с кодом, загруженным асинхронно, хотя не указывают это в документации. Все перечисленные мною сервисы умеют так делать. Например, чтобы на сайте появилась кнопка “мне нравится” от Вконтакте достаточно добавить всю необходимую логику в функцию window.vkAsyncInit, вот так:

Асинхронное подключение “мне нравится” от Вконтакте API.

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

NodeJS для начинающих

Wed, 09 Nov 2011 23:28:47 +0300

NodeJS для начинающих:

Хорошая книжка о NodeJS на русском языке. Подойдет для начинающих.

Как преобразовать ваши JavaScript файлы в CoffeeScript формат.

Mon, 07 Nov 2011 08:42:05 +0300

JS2Coffee — это небольшой npm модуль, который позволяет конвертировать JavaScript файлы в CoffeeScript. Для многих начинающих вникать в синтаксис CoffeeScript это должно очень помочь.

Использовать js2coffee из консоли очень просто:

js2coffee main.js > main.coffee

А чтоб еще больше упростить работу с конвертацией из формата в формат, был запущен сайт js2coffee.org. На нем вы сможете в онлайн режиме конвертировать свои JS файлы в CoffeeScript, и больше, вы сможете конвертировать CoffeeScript файлы в JavaScript — правда незнаю зачем это может быть нужным.

Удаленная доставка NodeJS приложения с помощью Capistrano

Wed, 02 Nov 2011 10:09:39 +0300

Думаю, каждый разработчик сталкивался с проблемой развертывания своего сайта/приложения на живой сервер. И, думаю, каждый мечтает о такой кнопочки, нажав которую все его изменения попадали бы на сервер.

Capistrano — это инструмент для быстрого развертывания и выполнения задача на удаленной машине. Изначально он был разработан для развертывания проектов на Ruby On Rails, но как оказалось может применяться для чего угодно. С помощью capistrano можно доставлять PHP, Python, NodeJS проекты.

Что нужно чтобы Capistrano работал?

Наличие ssh-доступа к серверу.
Исходники должны находится под контролем Subversion или Git (возможно что-то еще).

Capistrano замечательно работает на Mac OS X, Linux и Windows и его установка нужна только на локальной машине, машине разработчика. То есть на сервер capistrano устанавливать не нужно.

Для установки на своей машине вам нужны будут Ruby и RubyGems, после чего достаточно:

gem install capistrano

Вот несколько команд для работы с инструментом:

capify . — создает папки и файлы с настройками capistrano по умолчанию
cap deploy:setup — удаленная настройка файловой структуры для последующей доставки
cap deploy — доставка новой версии на сервер
cap deploy:rollback — откатывает версию на сервере до предыдущего состояния

Теперь о том как доставлять NodeJS проекты

Сразу целиком покажу пример конфига (config/deploy.rb) для развертывания приложения на сервере.

Смотреть пример deploy.rb на GitHub Gist.

Остановимся на некоторых настройках подробней.

set :application, "application-name.js"

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

set :node_file, "server.coffee"

Главный файл запуска сервера.

set :host, "87.250.250.11"
set :user, "root"
set :admin_runner, "www-data"

Доступ к удаленному серверу.

set :repository, "git@github.com:meritt/application-name.js.git"
set :scm, :git
set :branch, "master"

Настройки работы с репозиторием: в данном случае используется GitHub.

set :deploy_via, :remote_cache

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

Дополнительно, думаю, стоит описать этапы.

task :start, :stop, :restart

Запускает и останавливает приложение с помощью forever — это NodeJS модуль, который следит чтобы node процесс был запущен, и перезапускает его если нужно.

task :npm_install, :npm_update_symlink

Устанавливает npm модули, необходимые для приложения, и обновляет их при необходимости.

task :setup_for_nodejs

Создает начальную файловую структуру для последующей доставки.

Я не стал описывать настройку Apache/Nginx для того чтобы они проксировали работу приложения на 80 порт, думаю это и так понятно как делать. Единственное добавлю, что эти операции стоит добавить в этап :setup_for_nodejs.

Вот и все, обычный процесс для вас будет выглядеть так:

capify .
создание своего конфига
cap deploy:setup

А дальше многократное cap deploy и может иногда cap deploy:rollback.

Немного о возможностях

В этой статье я лишь описал как доставить файлы, установить npm модули и запускать сервер, однако идея развертывания на этом не заканчивается. Немного разобравшись, вы сможете:

создавать базу, вносить в нее изменения, заполнять данными по умолчанию
запускать фоновые процессы
развертывать приложение на нескольких серверах сразу
создавать объединенные и сжатые версии стилей и скриптов

и многое другое что вам придет в голову.

Бесплатный совет: потратьте 10-40 минут, создайте своему приложению правила доставки и наслаждайтесь тем, что доставка вашего приложения происходит по нажатию на одну кнопку.

Что интересного в PHP 5.4 beta 2 и как поставить на OS X Lion

Wed, 19 Oct 2011 02:13:00 +0400

ОБНОВЛЕНИЕ: Вышел PHP 5.4, полный обзор что нового появилось.

Вот и подошла следующая версия PHP к своему бета-тестированию. Для себя я отмечаю следующие улучшения и возможности:

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

Полный CHANGELOG для PHP 5.4 beta 1, а так же описание на что следует обратить внимание при тестировании кода, UPGRADING.

Теперь немного о том как установить beta-версию на OS X Lion.

Установка очень похожа на установку PHP 5.3.8 на OS X Lion.

Ставим Homebrew — это очень простое занятие, достаточно запустить в консоли

/usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

и после этого назначить права доступа

sudo chown -R $USER:staff /usr/local

Для того чтобы обновлять пакеты нужно поставить git

brew install git

После этого все обновления происходят через команду

brew update

Теперь приступим к установки необходимых пакетов для нашего PHP, разумеется начнем с MySQL 5.5

brew install mysql

после установки MySQL нужно будет выполнить инструкции которые подскажет Homebrew, затем ставим оставшиеся пакеты

brew install libjpeg brew install gmp brew install mcrypt brew install libmcrypt brew install gettext brew install icu4c brew install libxml2

Остается дело за конфигурацией и установкой PHP 5.4 beta 1, скачиваем, распаковываем и начинаем конфигурацию

env EXTRA_LIBS="-lstdc++" ./configure --prefix=/usr/local/php --with-apxs2=/usr/sbin/apxs --with-layout=GNU --enable-calendar --enable-ftp --enable-bcmath --enable-mbstring --enable-mbregex --with-icu-dir=/usr/local/Cellar/icu4c/4.8.1 --enable-intl --enable-cli --enable-sockets --enable-soap --with-gettext=/usr/local/Cellar/gettext/0.18.1.1 --with-bz2 --with-zlib --enable-zip --with-gd --with-jpeg-dir --with-png-dir=/usr/X11 --with-xpm-dir --with-freetype-dir=/usr/X11 --enable-exif --with-gmp --with-mcrypt --with-mysql=mysqlnd --with-pdo-mysql=mysqlnd --with-mysql-sock=/tmp/mysql.sock --with-curl --with-openssl --with-libxml-dir=/usr/local/Cellar/libxml2/2.7.8 --with-xsl=/usr --with-xmlrpc --enable-shmop --enable-pcntl --enable-sysvmsg --enable-sysvsem --enable-sysvshm

ну а далее как обычно

make sudo make install

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

За что я люблю CoffeeScript

Wed, 10 Aug 2011 10:30:00 +0400

В последнее время я начал больше писать о JavaScript, о NodeJS, поэтому хочу немного написать о CoffeeScript — именно на нем я решаю большинство стоящих передо мной задач. Например node-tumblr, мой первый NodeJS модуль, был написан именно на этом языке.

Пару слов о том что же это такое

CoffeeScript — это высокоуровневый язык программирования, который компилируется в JavaScript. Язык исправляет многие недостатки JavaScript. Добавляет стройности коду, убирает лишние скобки и точки-с-запятой, вправляет мозги как правильно писать нативный JS код.
Однако не стоит забывать золотое правило языка: “это лишь JavaScript”, поэтому не стройте иллюзий ;)

Текущая версия 1.1.2 и это стабильный, устоявшийся релиз. То есть можно смело использовать.

За что же я его люблю?

Сразу предупреждаю, некоторые примеры запрещены беременным женщинам и людям с нарушенной психикой.

Однострочные условия, как в Ruby:

# CoffeeScript
options = {} unless options?

options.type = type if type?

// JavaScript
var options;
if (typeof options === "undefined" || options === null) {
  options = {};
}

if (typeof type !== "undefined" && type !== null) {
  options.type = type;
}

Работа с объектами:

# CoffeeScript
options = {url}

options =
  url:  'link'
  text: 'description'
  show: false

// JavaScript
var options = {
  url: url
};

var options = {
  url: 'link',
  text: 'description',
  show: false
};

Работа с функциями (замыкания, однострочные функции, параметры по-умолчанию, возвращаемые значение):

# CoffeeScript
do ->
  parse = (body) -> JSON.parse body

  request = (url, fn = ->) ->
    xhr {url}, (error, request, body) -> fn.call @, parse body

// JavaScript
(function() {
  var parse, request;

  parse = function(body) {
    return JSON.parse(body);
  };

  request = function(url, fn) {
    if (fn == null) {
      fn = function() {};
    }

    return xhr({
      url: url
    }, function(error, request, body) {
      return fn.call(this, parse(body));
    });
  };
})();

Работа с this (сохранение текущего контекста):

# CoffeeScript
do (tumblr) ->
  @debug = (text) -> console.log text

  @periodical = (message) ->
    setTimeout (=> @debug message), 1000

// JavaScript
var __bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };

(function(tumblr) {
  this.debug = function(text) {
    return console.log(text);
  };

  this.periodical = function(message) {
    return setTimeout(__bind(function() {
      return this.debug(message);
    }, this), 1000);
  };
})(tumblr);

И напоследок, совсем страшное:

# CoffeeScript
do (tumblr) ->
  @posts = (options, fn) ->
    [fn, options] = [options, null] if typeof options is 'function'

    request options, fn

  alias = (self, type) ->
    self[type] = (options, fn) -> @posts options, fn

  alias tumblr, type for type in ['text', 'quote', 'link', 'answer', 'video', 'audio', 'photo']

// JavaScript
(function(tumblr) {
  var alias, type, _i, _len, _ref, _results;

  this.posts = function(options, fn) {
    var _ref;

    if (typeof options === 'function') {
      _ref    = [options, null],
      fn      = _ref[0],
      options = _ref[1];
    }

    return request(options, fn);
  };

  alias = function(self, type) {
    return self[type] = function(options, fn) {
      return this.posts(options, fn);
    };
  };

  _ref = ['text', 'quote', 'link', 'answer', 'video', 'audio', 'photo'];

  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    type = _ref[_i];

    _results.push(alias(tumblr, type));
  }

  return _results;
})(tumblr);

Как видите язык почерпнул много хорошего из Ruby, Python, Haskell и других похожих языков.

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

Так же вы можете познакомится с исходным кодом node-tumblr, написанном на CoffeeScript и посмотреть результат компиляции его в JavaScript код.

В ближайшее время я расскажу о небольшой хитрости, она поможет начинающим разработчикам на CoffeeScript.

Лирика

Я на полном серьезе думаю о том, чтобы комитету отвечающему за ECMAScript стоит рассмотреть CoffeeScript как эволюцию JavaScript, и в последствии реализовать этот язык на уровне браузеров.

Как навести порядок в зоопарке микро-фреймворков?

Fri, 05 Aug 2011 10:30:00 +0400

Я написал уже несколько обзоров о том, какие микро-фреймворки бывают, и собираюсь делать это и дальше. Однако в какой-то момент управлять этим зоопарком становится сложно. На помощь приходит библиотека Ender. Хотя постойте, это вовсе не библиотека, по крайней мере в том смысле, к которому вы привыкли. Это скорее инструмент для создания собственного фреймворка из других библиотек.

Авторы, Dustin Diaz (ded) и Jacob Thornton (fat) гордо именуют свое творчество как “The no-library library”, и что-то в этом названии есть.

Чтобы начать работать с Ender, его нужно установить через npm:

npm install ender -g

Теперь у нас появляется возможность работать с Ender через командную строку, вкратце его API:

add
remove
build
compile
refresh
search
info
help

Подробное описание каждого метода можно почитать на сайте.

Например, чтобы сделать свою собственную сборку из Undescore.js, Qwery и Reqwest нужно будет выполнить build команду:

ender build underscore,qwery,reqwest

Мы получаем собранную версию ender.js, сжатую версию ender.min.js и директорию node_modules (если она еще не создана) со всеми нужными npm модулями.

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

Это все хорошо, но что мы получаем на клиентской стороне?

Если бы мы просто объединили все микро-фреймворки в один файл, Ender бы ничем не отличался от других компановщиков. Однако, Ender, и здесь пошел дальше — он пытается все методы микро-фреймворков завернуть через себя и использовать напрямую у элементов. То есть, по сути, синтаксис jQuery:

// Описываем дополнительный метод
$.ender({
  rand: function() {
    return this[Math.floor(Math.random() * this.length)];
  }
}, true);

// Применяем его
$('p').rand();

Определенно вам понравится работать с Ender, он небольшой по размеру и несет в себе хороший функционал для упрощения работы с микро-фреймворками.

JavaScript микро-фреймворки. Часть 3.

Thu, 04 Aug 2011 11:30:00 +0400

Сегодня у нас в выпуске очень интересные микро-фреймворки. Каждый из них позволяет использовать возможности HTML5 не думая об обратной совместимости со старыми браузерами.

Небольшое отвлечение: вы наверное думаете, как же с таким большим количеством микро-фреймворков справится, следить за всем, подключать кучу файлов, у каждого к тому же свое API — для этого есть отличное решение, о нем я напишу завтра ;)

H5F

Автор, Ryan Seddon, описывает свое творение:

H5F добавляет поддержку HTML5 форм для браузеров без таких возможностей. Это новые поля, новые атрибуты, часть нового API для работы с формами.

Вам нравятся новые возможности форм, добавленные в HTML5? Если вы хотите активно их использовать, то этот микро-фреймворк обеспечит вам обратную совместимость со старыми браузерами. Вам больше не придется отдельно описывать на JavaScript’е логику обязательных полей, валидацию, авто-фокусировки и так далее. Крайне полезная вещь.

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

<form id="signup">
  <label>Электронный адрес *</label>
  <input type="email" name="email" placeholder="mail@serenity.su" required>

  <label>Телефон</label>
  <input type="tel" name="phone" pattern="\d{10}">

  <label>Индекс *</label>
  <input type="number" name="postcode" min="1001" max="8000" required>

  <input type="submit">
</form>

store.js

Автор Marcus Westin

localStorage для всех браузеров (в том числе старых) без использования cookie или flash.

О плюсах работы с localStorage я уже рассказывал. В данном случае лишь скажу что этот микро-фреймворк исправляет совместимость с браузерами в которых нет localStorage. И работает надо сказать очень хорошо.

Buzz

Автор Jay Salvat

Мощный микро-фреймворк для работы с HTML5 Audio. Так же добавляет обратную совместимость в старых браузерах.

Первое что приходит на ум, а причем здесь Google Buzz — немного разобравшись понимаешь что абсолютно не причем ;) Отличная работа Джея, теперь можно не думать о Flash-проигрывателях и смело использовать новые возможности HTML 5 Audio. Так же мы получаем богатое API для управления проигрывателем.

Пример работы с Audio API:

var audio = new buzz.sound( "/files/myfile", {
  formats: ["ogg", "mp3", "acc"]
});

audio.play()
     .fadeIn()
     .loop()
     .bind("timeupdate", function() {
       var timer = buzz.toTimer(this.getTime());
       document.getElementById("timer").innerHTML = timer;
     });

JavaScript микро-фреймворки

Как запретить "резиновую прокрутку" в Safari 5.1

Mon, 01 Aug 2011 17:38:18 +0400

Safari 5.1 — это версия по-умолчанию в OS X Lion. Вместе с ней мы получили “резиновую прокрутку”, как на устройствах iOS. Однако на некоторых веб-сервисах, где нужно использовать прокрутку одного из элементов дизайна, то есть не всего сайта, такая прокрутка очень мешает. Это сервисы как Google Reader, Twitter, наша внутренняя система и другие.

Исправить этот недочет можно следующим образом:

html, body {
  height: 100%;
  overflow: hidden;
}

Конечно, такой метод убьет любую прокрутку на сайте, поэтому нужно не забывать добавить “overflow: auto" для необходимых элементов.

Tumblr — мой первый NodeJS модуль

Thu, 28 Jul 2011 16:30:00 +0400

Давно уже полюбил NodeJS, нравится он мне своей быстротой, синтаксисом и возможностью не делить скрипты на серверной и клиентской части. Но этот пост немного не об этом ;)

Решил написать свой первый публичный модуль для реализации новой версии API блого-хостинговой платформы Tumblr. Изначально все было написано на CoffeeScript, но есть build-скрипт для создания JavaScript версии. Мне очень хотелось бы услышать критику сообщества, буду хоть понимать на каком я уровне все это делаю :)

Исходники находятся на GitHub, там есть версия на CoffeeScript и версия на JavaScript

Как использовать?

Все достаточно просто, сразу покажу примеры:

Пример кода на CoffeeScript.

И для тех кто не любит CoffeeScript пример на JavaScript:

Пример кода на JavaScript.

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

Чтобы начать работу вам понадобится названия блога, например blog.tumblr.com (свои доменные имена тоже работают), и OAuth Consumer Key.

Как получить OAuth Consumer Key?

Для этого вам нужно зарегистрировать свое приложение здесь. После этого на странице своих приложений вы найдете OAuth Consumer Key.

Все что остается — это поставить node-tumblr к себе, можно через NPM:

npm install node-tumblr

или из исходников.

Очень надеюсь на вашу критику, так как NodeJS мне очень нравится. И я хочу расти как специалист в этой области, а конструктивная критика, ваша оценка и мнения очень помогают ;) Спасибо.

JavaScript микро-фреймворки. Часть 2.

Wed, 27 Jul 2011 11:11:00 +0400

Продолжаем наш обзор JavaScript микро-фреймворков. Надеюсь они уже начали приносить вам радость. Возможно уже скоро вы и сами захотите написать что-то свое? :)

Underscore.js

Автором является компания DocumentCloud

Underscore это вся мощь Prototype.js (или Ruby) при работе с массивами и объектами, но без расширения встроенных в JavaScript объектов.

Крайне полезный микро-фреймворк, добавляет около 60 функций для работы с массивами, хешами, объектами и функциями. Такие функции как forEach, map, reduce, filter, every, some и indexOf сильно упрощают жизнь JS-разработчику.

Qwery

Dustin Diaz (ded), пишет:

Qwery это небольшой, но невероятно быстрый движок поиска элементов, работает с правилами CSS1, CSS2, CSS3

Искать DOM элементы приходится постоянно, и поисковые движки появились уже давно. Данный движок отличает размер, всего лишь 1Кб, и при этом он позволяет использовать все современные правила поиска.

{{ mustache }}

Честно говоря, затрудняюсь сказать кто был первым автором, но скорее всего это Chris Wanstrath (defunkt)

Logic-less templates

В этот раз я не стал переводить описание, очень сложно передать на русском суть этой фразы ;)

mustache это замечательный шаблонный движок, лишенный всякой ерунды. Когда ваш JS-проект вырастает во что-то более серьезное mustache очень спасает, позволяет разделить логику и вывод. И это при том что сам фреймворк занимает всего лишь 1,5Кб.

JavaScript микро-фреймворки

1 часть (Zepto.js, emile.js, Reqwest)

Встроенный веб-сервер в PHP 5.4

Sun, 24 Jul 2011 01:26:00 +0400

ОБНОВЛЕНИЕ: Вышел PHP 5.4, полный обзор что нового появилось.

Давно не писал что нового появилось в PHP 5.4, было совсем не до этого. А тем временем добавили очень интересную вещь — встроенный веб-сервер. Само предложение как обычно появилось в Wiki и обсуждалось там совсем немного.

Зачем оно вообще нужно?

А очень просто, мы наконец-то можем забить на установку всяких Apache/Lighttpd и прочих на машину разработчика, так как все что нужно будет здесь. Очень удобно получить проект, ввести что-то типа:

php -S localhost:8000

и все, можно работать, разрабатывать/тестировать.

На официальном сайте уже доступна документация, пока только на английском языке.