Во время работы над последним проектом накопилось несколько интересных CSS-трюков, о которых хочу рассказать. Хотя, возможно, это уже придумано до нас и все об этом уже знают. В примерах используется LESS, а не чистый CSS.

Событие автоподстановки в инпут поля

Проблема: узнать, что пользователь воспользовался функцией автоподстановки. Задача была в том, чтобы подсвечивать кнопку Login, если в полях e-mail и password введено что-либо. Проблема в том, что если эти поля заполняются автоподстановкой из ключницы браузера, то событие change на инпутах не выстреливает.

Решение: использовать псевдокласс :valid. Он срабатывает у инпута, если в нем есть контент, который удовлетворяет типу инпута (text, e-mail) и если у этого инпута стоит атрибут required. Правда решение не работает в IE, но нам не требуется поддержка этого браузера.

<input required="required" class="email-input" type="email" />
<input required="required" class="password-input" type="password"/>
<div class="go">Login</div>

.email-input:valid ~  .password-input:valid ~ .go {
	//стили для активной кнопки Login
}

A/B тестирование — это мощный маркетинговый инструмент для повышения эффективности работы вашего интернет-ресурса. С помощью A/B тестов повышают конверсию посадочных страниц, подбирают оптимальные заголовки объявлений в рекламных сетях, улучшают качество поиска.

Мне часто приходится сталкиваться с задачами организации A/B тестирования в различных интернет-проектах. В этой статье хочу поделиться необходимыми базовыми знаниями для проведения тестов и анализа результатов.

Для правильного принятия бизнес-решений необходимо владеть наиболее полной и подробной информацией о состоянии дел в компании. Но нередко такая информация ограничена годовыми да квартальными отчётами.

Этого, безусловно, мало. Для эффективного анализа на предприятиях часто внедряют системы бизнес-аналитики (англ. business intelligence, далее — BI-системы). Сегодня мы хотим поделиться несколькими советами, которые могут помочь при создании BI-системы в вашей компании (и которые помогли бы нам самим год назад).

В Badoo используется много сервисов на C и C++, большинство из которых работают с огромными объёмами данных. Как правило, сервисы выступают в роли «быстрого кэша» или «быстрой базы данных», т.е. совершают различные операции с массивами однотипных данных. Для быстрого доступа к данным мы давно и успешно используем Judy-массивы (англ. Judy arrays). Но однажды нам захотелось странного: обрабатывать большие массивы целых чисел на PHP, и мы сразу вспомнили про Judy.

Немного истории

Judy-массивы были изобретены Дугласом Баскинсом (англ. Douglas Baskins) в начале 2000-го года. Проект их разработки финансировался компанией HP, но примерно через два года был закрыт. За это время было выпущено четыре версии, причём разработка последней заняла больше года, и в ней разработчики смогли в два раза ускорить Judy, в два раза уменьшить потребление памяти, хоть и далось это нелёгкой ценой: объём кода вырос в 5 раз, а его сложность  ― на порядок.

Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.

Требования

С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

• письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
• они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
• нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
• редактирование компонентов, которые применяются еще в 50 шаблонах писем;
• необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).

Данный пост навеян коментарием уважаемого хабраюзера SerafimArts о том, что LESS много чего не умеет. Хочется развеять эти крамольные заявления и заодно показать, каким прекрасным может быть LESS, если правильно его готовить.

Примечание: некоторые примеры «из жизни» в данной статье предоставлены для тех людей, кто по каким-то причинам (вплоть до религиозных) не использует Autoprefixer.

Примечание 2: для всего, что написано ниже используется последняя версия LESS, потому что нет вообще ни одной причины её не использовать.

Слияния

Они же объединения, они же мерджи (Merge). Используются, если вам нужно что-нибудь присоединить через пробел или через запятую. Транзишны, трасформы, множественные бэкграунды, тени (простите за русское слово: бокс-шадоуы звучит как-то неласково) ликуют. Лучше всего за меня скажут примеры.

Статья по мотивам Изображения в верстке. Хватит это терпеть. Скорее даже по мотивам комментариев к этой статье и в общем реакции хабра на призыв использования векторной графики везде, где можно и действительно нужно.

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

На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.

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

Спам

Куча писем попадает в спам. Даже если они таковыми и не являются. 30% сервисов, в которых я регистрируюсь отправляют подтверждение регистрации мне на почту, но я ловлю его в спаме. Но это я. Да, я читаю папку «спам». Складывается впечатление, что многим просто плевать на потенциальных клиентов. Куда смешнее получать подобные письма в спам от компаний, предоставляющих, например, услуги рассылок. Каламбур.

Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

На первый взгляд, этот язык может показаться довольно простым. Встраивание в веб-страницу базового функционала JavaScript — это не проблема для любого опытного разработчика, даже если он ранее не сталкивался с этим языком. Однако это обманчивое впечатление, поскольку JavaScript гораздо сложнее, мощнее и чувствительнее к нюансам, чем кажется поначалу. Немало тонкостей в этом языке приводит к большому количеству распространённых ошибок. Сегодня мы рассмотрим некоторые из них. На эти ошибки нужно обратить особое внимание, если вы хотите отлично программировать на JavaScript.

В связи с событиями у Clodo, выкладываю свой скрипт для резервного копирования. Очень подходит для небольших vps. Заточен для Ubuntu, но думаю, это не проблема.

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

Вольный перевод довольно старой статьи с MySQL Performance Blog о том, что лучше сразу же настроить после установки базовой версии mySQL.

Давно хотел написать на эту тему. Первым толчком послужила статья Miško Hevery "Static Methods are Death to Testability". Я написал ответную статью, но так и не опубликовал ее. А вот недавно увидел нечто, что можно назвать «Классо-Ориентированное Программирование». Это освежило мой интерес к теме и вот результат.

«Классо-Ориентированое Программирование» — это когда используются классы, состоящие только из статических методов и свойств, а экземпляр класса никогда не создается. В этой статье я буду говорить о том, что:

• это не дает никаких преимуществ по сравнению с процедурным программированием
• не стоит отказываться от объектов
• наличие статических членов класса != смерть тестам

Хотя эта статья про PHP, концепции применимы и к другим языкам.

Всем привет!

Я работаю над фронтендом огромного проекта — поисковой выдачи Яндекса. И у нас, как и у любого другого большого веб-проекта, есть огромное количество css-кода и немаленькая команда, которая с ним взаимодействует.

Когда много людей, используя разные инструменты, пишут и редактируют css, со временем этот css может получиться очень запутанным, неконсистентым и в целом начинает выглядеть плохо. Например, кому-то удобнее писать вендорные префиксы в одном порядке, кому-то — в другом, кто-то ставит кавычки вокруг url, кто-то — нет, а кто-нибудь фикся срочную багу к релизу мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает.



Но несмотря на то, что все пишут код по-разному, у нас в репозитории идеальный порядок: css-код полностью консистентен, и прекрасно выглядит. Весь.

Как мы этого добились, можно прочитать под катом.

На этой неделе вышла новая версия CSScomb — инструмента, который делает CSS-код красивым. О том, как «расчёску» используют в Яндексе, недавно писал Beyondtheclouds. Я же расскажу, что нового появилось в третьей версии и что делать, если базовой функциональности не хватает. Например, как написать свой плагин или даже постпроцессор.

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

Зачем нужны линзы

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

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

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

Когда я разрабатываю системы на Zend Framework, то всегда использую gettext и Zend_Translate. Всё лаконично просто и обычно не возникает никаких проблем с переводом даже больших проектов. Для каждого языка генерируются свои файлы .po и .mo, переводы пляшут от дефолтного языка, ключи тоже на этом же языке. Переводчикам удобно передать эти файлы, которые они могут открыть в POEdit и удобно всё перевести. Так вот, на стороне сервера всё очень просто, но часто нужно переводить какие-то сообщения «на лету» в JavaScript, а он не понимает ваши .mo файлы. Но хотелось бы пользоваться именно ими, чтобы не разделять перевод одного проекта на 2 части (backend, frontend). И я начал искать. В Интернете существует достаточно большое количество таких решений, но все они почему-то обрастают зависимостями:

code.google.com/p/gettext-js (Prototype)
angular-gettext.rocketeer.be (Angular)
github.com/jakob-stoeck/jquery-gettext (jQuery)

А хотелось иметь именно «pure-js» решение. Ок, напишем своё.

В этом посте я хочу обобщить и поделится полученным опытом при разработке библиотеки node-queue-lib. Я расскажу о технологиях, которые помогли мне довести дело до финального конца — работоспособного кода, который уже работает на одном из моих сервисов. Особенностью данной библиотеки является кросс-платформенный клиент, т.е. клиент работающий в node.js и браузере и основан на одном и том же коде. В посте будут описаны следующие инструменты, без которых разработка этой библиотеки превратилась бы в ад:

• Тестирование (jasmine_node)
• Покрытие кода тестами (istanbul)
• Сборка клиенткой части библиотеки (browserify)
• Автоматизированное тестирование клиента (phantomjs)
• Поиск утечек памяти (memwatch)

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

И дополнительно, повторю, что статья обзорная, и не ставит целью научить Вас виртуозно пользоваться всеми перечисленными инструментами. Я лишь покажу дверь, но откроете Вы её сами…

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

Чуть больше года назад меня попросили поучаствовать в развитии одной известной в узких кругах (но не всегда с хорошей стороны) социальной сети. В то время я уже был фанатом языка Haxe, поэтому с тем на чём писать вопросов не возникало. А вот с БД они появились. Опыт использования MS SQL Server и MySQL говорили о том, что когда дело касается больших объёмов информации, то порой случаются сложности (практически невозможным становится изменение структуры БД, а когда-то быстрые запросы работают уже критически медленно). Посовещавшись с коллегами (у которых уже был опыт с Mongo), мы решили использовать именно эту СУБД. А о тех особенностях, которые всплыли в течение этого года я и расскажу ниже.

Эта история началась около 6 месяцев назад. Я тогда написал свой первый осмысленный модуль для Rails — Sourcebuster. И заодно получил инвайт на хабр за пост об этом модуле. На самом деле большая часть теории уже изложена по ссылке, и я не хочу копипастить старое. Вместо этого предлагаю вам перед прочтением этого поста ознакомится с предыдущим.

Для тех, кому лень — буквально абзац краткого содержания предыдущих серий. 6 месяцев назад я написал модуль для Ruby on Rails, который помогает определять источники постетителей сайта и использовать полученные данные для разных маркетингово-аналитических садомазо развлечений. Сейчас я решил познакомиться поближе с JS и портировал его на JavaScript, о чём и собираюсь рассказать в этом посте.