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

Исходники Reddit

Gravit

Замечательный графический редактор с открытым исходным кодом. Есть приложения под Mac, Linux, Windows, а также браузерная версия. В Gravit на данный момент реализован базовый функционал: слои, шейпы, пентул и множество различных функций для манипуляций с объектами. Но данный проект по большему счету ориентирован именно на веб-дизайн. Правильнее всего сказать, что Gravit — это смесь графического редактора в типичном представлении с визуальным редактором для разработки сайтов. Именно эта идея и ее реализация в формате open source делает продукт уникальным.

Ваш интернет-магазин работает хорошо: у вас есть трафик на сайте, покупатели довольны продукцией. У вас всё отлично и повысить продажи без дополнительного бюджета на интернет-маркетинг невозможно? А как насчет брошенных корзин?

Очередное исследование, проведенное американскими специалистами показало, что 67,45% посетителей бросают оформление заказа. А это значит, что вы получаете только ⅓ потенциальных продаж интернет-магазина.

(пример работы протокола HandlerSocket на картинке)

Вступление

В предыдущем проекте возникла потребность в разгрузке базы данных, тогда жизнь и столкнула меня с HandlerSocket`ом.

HandlerSocket — это протокол, реализованный в одноимённом плагине для РСУБД MySQL, позволяющий использовать NoSQL методику для доступа к данным, хранящимся в InnoDB таблицах. Основная причина, по которой используют NoSQL решения — это очень быстрый поиск по первичному ключу.


Под катом вас ожидает:

• Новая библиотека для работы с HS, написанная на PHP;
• Сравнение производительности существующих решений + нового;
• Symfony2 bundle для работы с HS;
• Плагины к Munin для мониторинга активности HS;
• Разные мысли вслух и рассказы о «шишках».

Доброго времени суток, %username%!

Сегодня я расскажу тебе, как при помощи напильника, кучки серверов и такой-то матери собрать что-то смутно похожее на EC2 от Amazon.
Статья получилась больше обзорная, так что придётся разбить её на несколько частей.


Я тебя слепила из того что было.

Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.


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

Предлагаю вашему вниманию первую часть перевода книги «Mature optimization» Карлоса Буэно о принципах оптимизации высоконагруженных проектов.

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

Книгу стоит прочесть, если вы:

1. Хотите повысить производительность своего проекта, но не знаете с чего начать.
2. Хотите повысить производительность своего проекта, но боитесь все сломать.
3. Не знаете о подводных камнях оптимизации производительности.
4. Давно хотели настроить мониторинг проекта, но не уверены что именно стоит мониторить.
5. У вас есть система мониторинга, но она не сообщает о проблемах заранее.

Привет! Меня зовут Александр Завьялов. В Яндексе я занимаюсь разработкой интерфейсов. Недавно я выступил перед коллегами с докладом об аппаратном ускорении в жизни верстальщика, где также коснулся смежных тем. Рассказал о производительности веб-страниц, о том, как она измеряется и к чему она может стремиться.

^{Ссылка, если видео не отображается}

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

После написания статьи про защиту от инъекций я взялся за написание класса, реализующего изложенные в ней идеи.
А точнее, поскольку ключевой функционал уже использовался в рамках рабочего фремворка, я занялся выделением его в самостоятельный класс. Пользуясь случаем, хочу поблагодарить участников PHPClub-а за помощь в исправлении нескольких критических ошибок и полезные замечания. Ниже я постараюсь описать основные особенности, но сначала небольшой
В двух словах, класс строится вокруг набора функций-хелперов, позволяющих выполнять большинство операций с БД в одну строку, обеспечивая при этом (в отличие от стандартных API) полную защиту от SQL инъекций, реализованную с помощью расширенного набора плейсхолдеров, защищающих любые типы данных, которые могут попадать запрос.
В основу класса положены три базовых принципа:

1. 100% защита от SQL инъекций
2. При этом защита очень удобная в применении, делающая код короче, а не длиннее
3. Универсальность, портабельность и простота освоения

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

Docker в значительной мере изменил подход к настройке серверов, поддержке и доставке приложений. Разработчики начинают задумываться о том, можно ли архитектуру их приложений разделить на более мелкие компоненты, которые будут запускаться в изолированных контейнерах, что позволит достичь большего ускорения, параллелизации исполнения и надежности. Также Docker решает важную проблему снятия облачного vendor–lock и позволяет легко мигрировать настроенные приложения между собственными серверами и облаками. Все что требуется от сервера, чтобы запустить Docker – более-менее современная ОС Linux с ядром не ниже 3.8.

В этой статье мы расскажем о том, как просто использовать Docker и какие преимущества он даст сисадмину и разработчику. Забудьте про проблемы с зависимостями, запускайте на одном сервере софт, требующий разные дистрибутивы Linux, не бойтесь «загрязнить» систему неправильными действиями. И делитесь наработками с сообществом. Docker решает множество актуальных проблем и помогает сделать IaaS гораздо более похожими на PaaS, без vendor-lock.



На облачных VPS от Infobox мы сделали готовый образ Ubuntu 14.04 с Docker. Получите бесплатную пробную версию (кнопка «Тестировать 10 дней») и начните использовать Docker прямо сейчас! Не забудьте поставить галочку «Разрешить управление ядром ОС» при создании сервера, это требуется для работы Docker. В самое ближайшее время у нас появятся и другие ОС с Docker внутри.

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

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

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

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

Эффект Glitch Лукаса Беббера выглядит очень круто — как будто вы смотрите на текст на старом мониторе, который слишком часто роняли на пол и у него «плавает» вертикальная синхронизация и сведение.

Реализация этого эффекта на CSS выглядит вполне убедительно. Мне пришлось немного поломать голову, чтобы выяснить, как он работает, и теперь я хочу объяснить это вам. Кроме того, я воспроизвёл этот эффект не только для текста, но и для растровых изображений и SVG, а так же написал несколько примесей Sass, чтобы облегчить работу с ним.

«Я рекламист: да-да, это именно я загаживаю окружающую среду. Я — тот самый тип, что продает вам разное дерьмо. Тот, что заставляет вас мечтать о вещах, которых у вас никогда не будет. О вечно лазурных небесах, о неизменно соблазнительных красотках, об идеальном счастье, подкрашенном в PhotoShop'e… Сделать так, чтобы у вас постоянно слюнки текли, — вот она, моя наивысшая цель. В моей профессии никто не желает вам счастья. Ведь счастливые люди — не потребляют», — отрывок из романа «99 франков» Фредерика Бегбедера.



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

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

Вот основные мысли:

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

А еще, эта статья — наш ответ Чемберлену, то есть Хабравчанину, написавшему "За что конкретно я ненавижу некоторых отдельно взятых маркетологов…".

В последнее время на Хабре появляется все больше постов о целесообразности проведения А/Б тестирований (об их пользе, увеличении конверсий). Если внимательно следовать инструкциям — получается очень интересная вещь: незначительное изменение интерфейса и логики вывода информации может привести к значительному изменению конверсии, если перемножить все цифры конверсий под подобным катом — то можем получить рост и в 2 раза.

Уже представляю себе десятки, а то и сотни вебмастером и менеджеров, которые проверяют с помощью А/Б тестов каждое изменение своего проекта, заказывают аудит в usability-лабораториях и ждут роста конверсий в пресловутые 2 раза. Что происходит на самом деле — давайте разберемся…

В разработке интерфейсов отдельные фреймворки уже не так важны: когда инструменты доступны, наша задача сводится к выбору нужных. Чтобы сделать правильный выбор, следует начать с общего подхода, с методологии. Большинство методологий, однако, разработаны крупными компаниями. Применимы ли они в маленьких проектах или для успешного использования их нужно переизобретать заново?

Скорее всего, вы уже знаете об одной из таких методологий, разработанной Яндексом, — БЭМ. БЭМ утверждает, что трёх сущностей (блоков, элементов и модификаторов) достаточно для написания HTML и CSS, задания структуры кода и компонентной структуры с последующим масштабированием проекта до самого высокого уровня.

Я проработал в Яндексе достаточно долго и видел, как эта методология работает на больших проектах. В Яндексе БЭМ используют для разработки CSS- и JavaScript-компонент, с помощью этой методологии также пишут шаблоны и задают зависимости между компонентами. Есть БЭМ-инструменты, поощряются различные эксперименты с кодом, исследования. В масштабах большой компании эти трудозатраты окупаются и дают Яндексу возможность быстро и качественно разрабатывать сотни сервисов одновременно.

Могут ли маленькие команды получить от БЭМ то же самое? Я совершенно не был в этом уверен. Всё же БЭМ — абстракция, которая поставляется вместе с инструментами и технологиями. Для маленькой компании польза от переключения на «полный стек» этих технологий — сомнительна, многие из инструментов изначально приспособлены под крупные и сложные задачи. Быть может, тогда полезной окажется сама идея, сама методология?

Изначально эта моя статья была опубликована в известном многим журнале Smashing Magazine. Но я решил, что и на Хабре она может быть интересна, ведь многие здесь занимаются собственными небольшими проектами.

В настоящее время в сфере обеспечения безопасности веб-сайтов и приложений возникла очень интересная ситуация: с одной стороны, некоторые разработчики уделяют особое внимание безопасности, с другой, они напрочь забывают о некоторых видах атак и не считают ошибки, позволяющие выполнить данные атаки, уязвимостями. Например, к такой категории можно отнести CSRF (Сross Site Request Forgery). Эта атака позволяет производить различные действия на уязвимом сайте от имени авторизованного пользователя. Если вы не слышали о таком, то я рекомендую прочитать соответствующую статью в Википедии, чтобы иметь общее представление об этом виде атак. Основная часть статьи предназначена тем, кто обеспокоен правильной защитой своих сайтов от CSRF.

Свободный движок WebKit теперь поддерживает srcset атрибут изображений, IMG элементов (официальная спецификация от W3C). Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей. Также важно отметить о наличие изящного решения для браузеров, которые еще не поддерживают данный функционал.

Обратите внимание, в необходимости использовать последние ночные сборки WebKit.

Сегодня, 28 августа, команда разработчиков PHP объявила об релизе версии 5.6.0!

Основные нововведения PHP 5.6.0:

• Скалярные выражения в константах
• Функции с переменным числом аргументов при помощи оператора ...
• Оператор возведения в степень **
• Импорт функций и констант при помощи ключевого слова use
• В ядро включен интерактивный отладчик phpdbg.
• Разрешено повторное использование php://input, а $HTTP_RAW_POST_DATA объявлена устаревшей
• GMP-объекты теперь поддерживают перегрузку операторов
• Поддержка загрузки файлов больше 2 Гб

Уровень подготовки веб-мастера: любой

У вас есть не только сайт, но и приложение Android? Теперь вы можете подключить одно к другому, чтобы пользователи смартфонов и планшетов могли легко находить контент приложения прямо в результатах поиска Google.

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



Сотни разработчиков приложений уже пользуются индексированием приложений. Среди них уже и первые разработчики из России, как, например, Афиша. На конференции Google I/O мы представили множество новых функций, упрощающих размещение ссылок на сайт в приложении, связь страниц сайта с приложением настройки, отслеживание эффективности и возможных ошибок.

* Надеюсь, ilusha_sergeevich не обвинит меня в плагиате.
Если что, пост переименую.

[Тут была картинка для привлечения внимания]

• donut.js — микро-библиотека, рисующая бубликовые (donut chart) и круговые диаграммы
• Балалайка
• Функция procrastinate
• Противный зловред
• Идея: mousedown вместо click
• Совет: меньше используйте CDN
• Редактор SuitUp и чистка WYSIWYG от мусора
• Простейший полифил для addEventListener
• Репорт об опечатках на сайте
• vanillatree — ванильная замена jstree
• Немного опросов

Всем привет! За время работы постепенно накапливаются наработки, которыми можно было бы поделиться с сообществом. Но ни одна из этих наработок не тянет на большой полноценный пост. Поэтому я собрал все мелочи, что вспомнил, в одной статье: несколько простых опен-сорц проектов, пара советов и находок. Каждый из предложенных скриптов в этой статье поставляется как есть, под лицензией WTFPL (кроме Балалайки). С радостью приму пулл реквесты с исправлением багов или изменениями в README.

donut.js — микро-библиотека, рисующая бубликовые (donut) и круговые диаграммы

Во время работы над очередным проектом, появилась задача нарисовать много информативных бубликов на карте мира, и не просто нарисовать, а еще и поддержать ИЕ8, который, как известно, не умет SVG, а только безобразный VML. Первое, что приходит в голову, это Raphael. Порывшись некоторое время, я нашел это решение. К сожалению, автор проявил изобретательность простым хаком: на круговой диаграмме (pie chart) он нарисовал белый круг. Это решение не подошло, так как дырка бублика должна быть прозрачной. Изучение возможности рисования при помощи Raphael таких диаграмм мне показалось чересчур трудоёмким. Остальные скрипты на просторах интернета мне так же не подошли. Пришлось писать свой костыль, взяв за основу математику рисования арок этого проекта. Арки для VML версии нарисованы используя элемент arc.

var myDonutDiv = donut(options);

Расширение mysqlnd появилось ещё в PHP 5.3, но до сих пор малоизвестно среди разработчиков. Однако оно незаменимо, если ваша система основана на MySQL. Если вы хотите узнать, почему это расширение так важно, что оно собой представляет, как его использовать и какие оно даёт преимущества — читайте статью.