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

var retina = window.devicePixelRatio > 1 ? true : false;

Теперь переменная retina примет значение true, если у читателя сетчаточный дисплей. В дальнейшем можно использовать простой оператор if, чтобы выполнить тот или иной код в зависимости от типа дисплея.

if (retina) {
    // у читателя дисплей типа retina
}
else {
    // у читателя дисплей не типа retina
}

Зачем?

Вчера в который раз возник вопрос по подбору нескольких иконок в очередном веб-проекте. В основном пользуюсь готовыми иконками из бесплатных наборов. До недавнего времени прибегал к услугам сайта iconpicker.deviantech.ru. Навигация по иконкам была хоть и не самая удобная, но явно лучше, чем просто проглядывать их в Finder'е (или Explorer'е). Однако в последнее время сайт недоступен.

В итоге решил сделать собственный навигатор по иконкам:

Неделю назад я уже писал о Codeception и об его использования для тестирования PHP приложений. После прошлого поста несколько багов было исправлено. Спасибо за багрепорты. Если вы ещё не пробовали Codeception, советую посмотреть прошлую статью и испытать его для приемочных тестов.

Сегодня я хочу рассказать, как в Codeception реализовано юнит-тестирование в BDD-стиле.

Замечу, что модуль для тестирования юнитов пока экспериментальный. Не в значении «нестабильный», а в значении «может и будет расширяться для удоволетворения всех необходимых нужд».

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

Итак, первый совет. Забудьте всё что вы знаете о юнит-тестах. Швырните табуреткой в человека, который сказал вам, что без них не обойтись. Попробуем разобраться, в каких случаях нужно их использовать, а в каких — нецелесообразно.

В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет.

1. Отображайте нажатия кнопок и кнопкоподобных ссылок

Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

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

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)

Как-то давно я уже писал об этом, но немного скудно и сумбурно. После я решил расширить список инструментов в обзоре, добавить статье структуры, учесть критику (большое спасибо Lefty за советы) и отправил ее на конкурс на СекЛаб (и опубликовал ссылку, но по всем понятным причинам ее никто не увидел). Конкурс закончен, результаты объявили и я с чистой совестью могу ее (статью) опубликовать на Хабре.

Бесплатные инструменты пентестера веб-приложений

В данной статье я расскажу о наиболее популярных инструментах для пентестинга (тестов на проникновение) веб-приложений по стратегии «черного ящика».
Для этого мы рассмотрим утилиты, которые помогут в данном виде тестирования. Рассмотрим следующие категории продуктов:

1. Сетевые сканеры
2. Сканеры брешей в веб-скриптах
3. Эксплойтинг
4. Автомазация инъекций
5. Дебаггеры (снифферы, локальные прокси и т.п.)

Хочу представить вам новый профессиональный инструмент для веб-разработки под Windows.

Open Server — это портативный локальный WAMP/WNMP сервер, имеющий многофункциональную управляющую программу и большой выбор подключаемых компонентов. Представленный пакет программ не является очередной любительской сборкой собранной «на коленке», это первый полноценный профессиональный инструмент, созданный специально для веб-разработчиков с учётом их рекомендаций и пожеланий.

Если вы всё еще используете Denwer, Xampp, Vertrigo и т.д. или предпочитаете устанавливать все компоненты сервера раздельно — добро пожаловать под кат.

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

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

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

Но статья, на самом деле, не об этом. Я хочу рассказать про две замечательные команды git, которые я недавно для себя открыл. Это git blame и git bisect

Не один раз в комментариях замечал что народ негодует по поводу того, что веб-разработчики стали злоупотреблять использованием Bootstrap от Twitter. Признаюсь, я и сам успел закончить несколько небольших веб-приложений с использованием этого набора скриптов и стилей. Я не против использования Bootstrap от Twitter, я против злоупотребления этим когда есть столько хороших альтернатив. Я почти каждый день натыкаюсь на интерфейсы, построенные на Twitter Bootstrap, и это начинает напрягать. Последней каплей для поиска альтернативы стало изменение интерфейса биллинг панели моего хостера на шаблон Bootstrap. В этой записи я хотел бы немного рассказать про одну из альтернатив — HTML KickStart.

Всем привет! Судя по слухам, 19 января, в свет должен был выйти очередной RC PHP 5.4. Возможно даже, что он будет финальным. А это значит, что нужно скорее заняться изучением новых возможностей.

Я несколько лет профессионально занимаюсь веб-разработкой и в качестве основного серверного языка использую PHP. Так что узнав о выходе столь крупного обновления, я отправился собирать информацию. Под катом shortlist самых значимых нововведений.

Вы уже слышали о разворачивающейся войне за рынок в $12.7 миллиардов, в которой Facebook проиграл первый раунд? Добро пожаловать в эру гео-социальных сервисов и игр. Этот голубой океан подогревается с одной стороны рекламным рынком — таргетинг рекламы в реальном времени здесь-и-сейчас дает даже больше возможностей, чем информация из профиля в фейсбуке. А с другой стороны активно интересуются гео-социальным рынком большие ритейлеры и маленькие бизнесы, которых не устраивает эффективность существующих маркетинговых каналов.

Казалось бы, а при чем тут игры? Но Foursquare, лидер среди чекин-сервисов, быстро вырос в том числе и на игровой механике достижения и удержания статуса «мэра». Гео-социальные игры могут стать точкой самого бурного роста и так переживающей вторую молодость индустрии мобильных развлечений. Для одного из моих личных проектов я делал обзор, которым и хочу с вами поделиться.

Хотите поднять клон Github на своём собственном сервере с приватными репозиториями за корпоративным файрволом? Теперь вы можете это сделать благодаря появлению open source проекта GitLab. Он является хорошей альтернативой для корпоративной версии Github стоимостью до $5000 в год.

По сравнению с Gitorious, система GitLab отличается приятным интерфейсом и гораздо проще в установке.

13 октября вышла версия 1.0, через неделю обещают выкатить 1.1, а затем новые релизы GitLab 1.2, 1.3 и т.д. будут выходить каждый месяц.

Памятка начинающему экзорцисту.

Прежде, чем начать: я знаю, что такое phpDaemon и System_Daemon. Я читал статьи по этой тематике, и на хабре тоже.

Итак, предположим, что вы уже определились, что вам нужен именно демон. Что он должен уметь?

• Запускаться из консоли и отвязываться от неё
• Всю информацию писать в логи, ничего не выводить в консоль
• Уметь плодить дочерние процессы и контролировать их
• Выполнять поставленную задачу
• Корректно завершать работу

Отвязываемся от консоли

// Создаем дочерний процесс
// весь код после pcntl_fork() будет выполняться двумя процессами: родительским и дочерним
$child_pid = pcntl_fork();
if ($child_pid) {
    // Выходим из родительского, привязанного к консоли, процесса
    exit();
}
// Делаем основным процессом дочерний.
posix_setsid();

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

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

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

Tsung — это распределенная система нагрузочного тестирования, написанная на Erlang'е. Заявлена поддержка HTTP, WebDAV, SOAP, PostgreSQL, MySQL, LDAP and XMPP/Jabber. В этой статье я опишу как протестировать обычный web сайт на нагрузку.

При реализации одного из проектов на Yii framework у меня возникла задача сделать регистрацию и авторизацию пользователей через сторонние сервисы (Google, Facebook, Twitter, etc).

У данной задачи есть два пути решения:

• Использовать сервис авторизации, например Loginza;
• Реализовывать функции авторизации самостоятельно для каждого сервиса.

UPDATE: Актуальная версия и инструкция по настройке доступны на github.com. Инструкция в данной статье подходит для EAuth версии <= 1.1.3.

Знаете, работа с стартапе, который пытается создать что-то новое и уникальное на рынке очень захватывает. И не только открывающимися возможностями, но и часто нетривиальными задачами и вопросами, которые ставятся перед создателями и которые раньше никто не решал. Вот один из таких вопросов как раз вчера появился передо мной: дано нам произвольную строку текста, заведомо известно, что она может быть двух, а в некоторых случаях и трехъязычной, то есть там смешанный текст из нескольких языков. Необходимо прозрачно для пользователя определить язык, на котором написан текст.

На самом деле задача не такая и редкая — подобная функциональность есть и в текстовых редакторах, и в переключателе клавиатуры PuntoSwitcher, да и в системах машинного перевода такой функционал востребован, не говоря уже про системы поиска информации. Кстати, именно в контексте создания специализированного поисковика и классификатора текстов и появилась такая проблема. Необходимо было получить такую возможность в собственной программе на платформе РНР и при этом не задействовать сторонние сервисы — подобная возможность в виде веб-сервиса присутствует в Google Language API (в своём блоге я уже исследовал этот сервис), однако она выполняется удалённо и имеет некоторые существенные для нас ограничения, в частности, процедура опознания языка выполняется с существенной задержкой и асинхронна по своей природе. Кроме этого очень хотелось иметь полный контроль над процессом и иметь возможность его гибко настраивать, чего, увы, нет в сторонних сервисах. Поэтому пришлось подумать и попробовать реализовать собственными силами, результат же представляем вашему вниманию.

Дисклеймер: настоящий текст не претендует ни на объективность, ни на правдивость, ни на правильность. Все нижеописанное было сделано только «just for fun» и не ради каких-либо призов или поощрений. Скрипты и логика их работы заведомо находятся на уровне быдлокода, я это понимаю и признаю. Замечания принимаются с благодарностью.

Два для назад я наткнулся на конкурс «Canon: Все краски мира». И сразу обратил внимание на простую систему голосования — не надо было не регится, ни вводить капчу, а просто кликать на кнопку «Проголосовать за эту работу».
Собственно, загрузив пару фотографий, я принялся экспериментировать.
1)Можно проголосовать один раз с одного компьютера. Через некоторое время можно проголосовать из другого браузера.
2)При подключении через прокси или впн, или через 3g можно было проголосовать еще раз.

Хорошо, ставим Tor+Vidalia(еще на виндовом компе). Запускам тор — можно голосовать. Перезапускаем — нельзя. Убиваем куки, меняем юзерагент — опять можно. Хорошо.
Открываем исходник страницы, ищем место с кнопкой голосования:

<fоrm action="/work/vote" method="post">
<inрut type="hidden" name="photo_id" value="1522" />
<inрut type="submit" name="vote" value="Проголосовать за эту работу" />
</fоrm>

Абсолютно просто. При нажатии на кнопку выполняется запрос konkurs.photonews.ru/work/vote?photo_id=1522
Выполнить его можно с помощью хоть wget:
wget -O /dev/null --referer="http://konkurs.photonews.ru/work/show/1522" ttp://konkurs.photonews.ru/work/vote?photo_id=1522

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

Алгоритмы и концепции

Сортировка и поиск

Понимание/знание известных алгоритмов сортировки очень важно, поскольку многие решения связанные с сортировкой или поиском, мягко говоря, требуют владения этими алгоритмами. Хороший способ показать свои знания перед интервьюером, когда дана здача на сортировку – это «пробежать» по известным алгоритмам и увидеть/выяснить какой из них лучше всего подходит для решения данной задачи. Вы получите и решение и то, что интервьюер будет довольным вашими «разными» способов решения одной и той же задачи.

Судя по комментариям в этой статье, создание веб-приложений с возможностью аякс-навигации является интересной для сообщества темой и пока еще немногие сталкивались с подобной задачей. Я расскажу о ее решении с помощью небольшой библиотеки под названием jQuery-Pjax (либо моего форка ее).

Моя мотивация: в проекте нужно было реализовать mp3-плеер, играющий независимо от навигации на сайте. Далее потребовалось добавить поддержку браузеров без pushState — и я сделал форк библиотеки.

Основные особенности

• навигация по сайту и обработка форм без полной перезагрузки страниц
• чистые url, доступные для прямого доступа
• поддержка #!/hash для устаревших браузеров (добавлено в моей версии)
• работа с кнопками «назад» и вперед» для современных браузеров
• а теперь и для старых — благодаря benalman.com/projects/jquery-hashchange-plugin
• похоже, есть проблемы с ИЕ7 (спасибо Nc_Soft) (тем более, большое спасибо за участие Nc_Soft) и, возможно, opera 11.5 (пока не могу подтвердить, но нахожу крайне удивительным из-за dev.opera.com/articles/view/introducing-the-html5-history-api) — сообщение artishok — проверено и работает на сборке 1074 (not_ice)
• imsamurai (https://github.com/imsamurai) предложил улучшения библиотеки (и я радостью слил изменения): встроенная функция для отправки форм, улучшения работы с хешами и более развитая система триггеров. (у imsamurai, к сожалению, нет аккаунта на хабре — будем рады помощи)

Ссылки

• jQuery Pjax github.com/defunkt/jquery-pjax
• мой форк с поддержкой хеш-навигации github.com/ckald/jquery-pjax
• работа библиотеки на примере моего проекта amsterdamusic.com.ua
• пример от создателя pjax.heroku.com

Принцип работы Pjax