«Чтение и личный опыт формируют мировоззрение. И даже если вы не помните самый момент получения опыта или содержания книги, то их влияние на ваше представление о мире непременно остается в Вас. Ваш разум похож на скомпилированную программу без исходного кода — он работает, но не ясно как.»
— Пол Грэм, основатель Y Combinator, программист, инвестор, эссеист


Очередная подборка книг от крутейшего в мире бизнес-инкубатора кремниевой долины.

Развёртка панорамы магазина с кафе

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

Женя Гуржей — один из наших первых франчайзи-партнёров, он открылся в октябре 2010 года, когда мы только-только научились открывать магазины в Москве. Он успел заработать на точке, открыть второй магазин, открыть другой бизнес, выйти из франшизы (на 2 недели), закрыть второй магазин и закрыть другой бизнес.

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

Каждый JS-разработчик рано или поздно начинает писать тесты и сожалеть, что не стал делать этого раньше. Поскольку за последние пару лет все постепенно перешли к компонентной разработке на основе React, Angular или, например, Vue, это дало очередной толчок для популяризации тестирования, так как компоненты обычно малы и тестировать их гораздо проще. В данной статье мы рассмотрим компонентное тестирование в React.

Яндекс.Деньги продолжают масштабный редизайн сервиса, начатый два года назад — о первых результатах мы подробно рассказывали на Хабре. Обратная связь, полученная за это время от сообщества и постоянных пользователей, подтвердила нашу гипотезу: чтобы сделать сервис удобным для новой аудитории, нужно почаще повторять мантру «я нерепрезентативен» и смотреть на приборы. 

В этом посте я расскажу, как с помощью серии экспериментов мы помогли дизайнерам продуктов перейти от парадигмы «совершенствуй» к циклу «экспериментируй с новым → измерь → повтори». 

Перед тем, как углубиться в теорию, предлагаю всем читателям наглядный эксперимент: на картинке ниже — два варианта формы ввода данных карты. Попробуйте угадать, какой из них даёт большую конверсию. Правильный ответ — в тексте. К слову, такую игру мы проводим внутри компании после каждого эксперимента — и в среднем 75% коллег не угадывают правильный. 



Небольшое историческое отступление: Яндекс.Деньги существуют с 2002 года, и первые десять лет — то есть большую часть жизни — наша аудитория была очень похожа на аудиторию Хабра: опытные интернет-пользователи, которые работают в IT и смежных отраслях. Даже если нужное действие запрятать в четыре клика от главной страницы (так делать, конечно, не надо) — они справятся, потому что пришли в сервис с чёткой целью и сильной мотивацией. 

Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «React Patterns» Майкла Чана, с некоторыми моими примечаниями и дополнениями.

Прежде всего хотел бы поблагодарить автора оригинального текста. В переводе я использовал понятие «Простой компонент» как обозначение Stateless Component aka Dump Component aka Component vs Container
Конструктивная критика, а так же альтернативные паттерны и фичи React приветствуются в комментах.

Оглавление

• Простые компоненты — Stateless function
• JSX распределение атрибутов — JSX Spread Attributes
• Деструктуризация аргументов — Destructuring Arguments
• Условный рендеринг — Conditional Rendering
• Типы потомков — Children Types
• Массив как потомок — Array as children
• Функция как потомок — Function as children
• Функция в render — Render callback
• Проход по потомкам — Children pass-through
• Перенаправление компонента — Proxy component
• Стилизация компонентов — Style component
• Переключатель событий — Event switch
• Компонент-макет — Layout component
• Компонент-контейнер — Container component
• Компоненты высшего порядка — Higher-order component

Поехали!

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



Конечно, это был не совсем я, но близко. Дело в том, что давным-давно мне предложили помочь Вымпелкому с блогом. На немного необычных условиях. Первым стало отсутствие всякой официальщины – отсюда и совершенно отрывные посты (за часть из которых в корпоративном сегменте смело оторвали бы руки и не только), и самые актуальные темы (Базовая станция вредная? Ещё как!), и вообще много всего.

Но начну с самого начала. Итак, Хабр тогда был торт — большой и зверски агрессивный, хабов не было, а корпоративные блоги были чем-то вроде раздела «тупиковый отстой». За любую ссылку или рекламу тогда почти банили. Или забивали до -50 за час, например. С корпоративным рылом в такой калашный ряд было никак нельзя.

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

Технари, кстати, оказались совершенно офигенные. Только плевать они хотели на Хабр, по большому счёту. Как и везде.

Привет! Это пятый с 2010 года список полезных книг. Набралась всего дюжина за два года. Смотрите, что можно скачать в дорогу или просто почитать, когда будет время, и делитесь, пожалуйста, в комментариях своими (я буду поднимать их в пост). В этой подборке довольно много социнжиниринга, точнее, тем около него. Поехали.

Конструкции, или почему не ломаются вещи, Дж. Гордон
Прекрасная, хоть и очень длинная штука, которая рассказывает про сопромат простыми словами и почти для детей. Но на уровне жёсткого хардкора. По своей полезности для осознания физики вокруг может сравниться с не менее прекрасной современной «Квантовая вселенная. Как устроено то, что мы не можем увидеть» Брайана Кокса и Джеффа Форшоу. Рекомендую обе. Будет, что почитать в дороге, если вдруг почувствуете, что играть на планшете надоело. И о чём подумать, когда выяснится, что вся та фигня, которую вам давали на уроках химии, физики и прочего в школе и университете вдруг начинает выстраиваться в стройную теорию.

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

В прошлый раз разгорелась целая дискуссия про интровертов в магазине. Так вот, интроверты в магазине — это счастье. Потому что именно по ним можно определить, насколько хорошо оный магазин работает. Как минимум четверть населения нашей страны интровертична и при этом доходит до магазинов (то есть это не клинические хикки).

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

Итак, самый верный способ сорвать покупку, когда всё хорошо — это пройти за спиной человека, рассматривающего полку. Это знает каждый, кто хоть раз занимался трассировкой потоков в магазинах. Если у человека за спиной образовался второй покупатель или консультант — он начинает беспокоиться, как разработчик, у которого за спиной во время отладки кто-то молча стоит. И чаще всего покидает магазин в ближайшие 30 секунд. Причём часто не осознаёт, почему.

Зацепил меня один кусок дискуссии про маркетинг сегодня на Хабре. Что это, как это, как оно для IT. Всё там хорошо кроме одного — нет понимания, что маркетинг — это не специальный шаман в проекте, который что-то там крутит, а фиговина, в которой должен живо принимать участие каждый. В IT, не в IT — неважно. Поэтому расскажу, почему.

Представьте себе небольшую парикмахерскую на первом этаже жилого дома. Наверняка у вас есть такие рядом. У неё очень ограничен круг потенциальных клиентов – это жители ближайших домов. Маркетинг – это сделать так, чтобы большинство из них стриглись именно там. Каждый косяк – это потерянный клиент (а новому взяться негде, помните?). Каждый успех – это клиент на 5-6 лет минимум, то есть не одна стрижка, а сразу много.

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

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

Привет! Не думал, что когда-нибудь буду публиковать тут настолько далёкое от ИТ, но давайте попробуем, благо новые тематики позволяют. Сейчас расскажу, как именно мы учим своих продавцов. Если вы физически что-то продаёте — это гайд, как не сильно накосячить. Механика обтачивалась примерно три года.

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

Теперь посмотрим на сам процесс продажи. Он делится на пять шагов — приветствие, засада, разработка, презентация, продажа. Самая частая ошибка приветствия в том, что продавец, скорее всего, не доктор. Поэтому «Вам чем-нибудь помочь?» — это где угодно, но только не в стенах нашего магазина. Правильно улыбнуться и поздороваться с человеком, когда он заходит на точку. Задать настроение и обозначить, что вы его увидели. И всё. Не лезть к нему и не подходить даже. Человек зашёл — не надо набрасываться.

Хотя нет, прежде чем переходить к пунктам, обсудим подготовку.

Главный наш принцип в отношении покупателя — относиться к нему как к другу. Это не красивые слова, а одна предельно конкретная вещь — не делай ничего такого, что не сделал бы с другом.

Предлагаю читателям «Хабрахабра» перевод статьи «Functional Animation In UX Design: What Makes a Good Transition?» за авторством Nick Babich.



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

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

На прошлой неделе закончился интенсив по продуктовому дизайну в Британке, который курировали дизайнеры Mail.Ru Group. Мы уже несколько лет выступаем с лекциями и мастер-классами в БВШД, преподаём в образовательных программах в Бауманке и других университетах, а теперь упаковали всё это в целостный курс.

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

Однако создание хорошего контента – задача не из легких для многих маркетологов, и часто именно этот шаг является камнем преткновения на тропе успеха многих контент-маркетинговых программ. Эффективный контент-маркетинг требует хорошей стратегии, отличного планирования, оптимизированной дистрибуции и продвижения и постоянного анализа эффективности контента.

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

.

Чтобы упростить этот процесс и помочь вам максимизировать эффективность программы вашего контент-маркетинга, мы собрали всеобъемлющий план-конспект о том, как оптимизировать весь жизненный цикл контент-маркетинговой кампании, чтобы помочь вам оставаться на верном пути к положительным показателям ROI. Это первая из шести частей цикла, который проведет вас через каждый этап всего жизненного цикла успешной контент-маркетинговой программы.
Итак, без дальнейших церемоний, давайте перейдем к стратегии.

Что значит выработать стратегию контент-маркетинга

Низкая скорость поисковых запросов

Работая над поисковым движком по социальной информации (ark.com), мы остановили свой выбор на Elasticsearch, так как по отзывам он был очень легок в настройке и использовании, имел отличные поисковые возможности и, в целом, выглядел как манна небесная. Так оно и было до тех пор, пока наш индекс не вырос до более-менее приличных размером ~ 1 миллиарда документов, размер с учетом реплик уже перевалил за 1,5 ТБ.

Даже банальный Term query мог занять десятки секунд. Документации по ES не так много, как хотелось бы, а гуглинг данного вопроса выдавал результаты 2х-летней давности по совсем не актуальным версиям нашего поискового движка (мы работаем с 0.90.13 — что тоже не достаточно старая вещь, но мы не можем позволить себе опустить весь кластер, обновить его, и запустить заново на текущий момент — только роллинг рестарты).

Низкая скорость индексации

Вторая проблема — мы индексируем больше документов в секунду (порядка 100к), чем Elasticsearch может обрабатывать. Тайм-ауты, огромная нагрузка на Write IO, очереди из процессов в 400 единиц. Все выглядит очень страшно, когда смотришь на это в Marvel.

Как решать эти проблемы — под катом

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

В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!

Отображение списка (множества) элементов на странице — это стандартная задача для практически любого web-приложения. В этом посте я хотел бы поделиться некоторыми советами по повышению производительности.

Для тестового примера я создам небольшое приложение, которое рисует множество «целей» (кругов) на элементе canvas. Я буду использовать redux как хранилище данных, но эти советы подойдут и для многих других способов хранения состояния.
Так же эти оптимизации можно применять с react-redux, но для простоты описания я не буду использовать эту библиотеку.

Данные советы могут повысить производительность приложения в 20 раз.

В апреле этого года мы перезапустили tinkoff.ru. Банк превратился в финансовый супермакет. Теперь не только клиент банка, но и любой посетитель оплатит мобильный, проверит налоги и оформит ипотеку — всё на одной платформе. В этой статье я поделюсь опытом и технологическими решениями, к которым мы пришли за год разработки.

D3.js (или просто D3) — это JavaScript-библиотека для обработки и визуализации данных с невероятно огромными возможностями. Я, когда впервые узнал про нее, наверное, потратил не менее двух часов, просто просматривая примеры визуализации данных, созданных на D3. И конечно, когда мне самому понадобилось строить графики для небольшого внутреннего сайта на нашем предприятии, первым делом вспомнил про D3 и с мыслью, что “сейчас я всех удивлю крутейшей визуализацией”, взялся изучать исходники примеров…

Это история о том как создавался сайт интернет-магазина Сотмаркет и менялась работа с каналами привлечения трафика по мере роста компании.

Все фотографии в этой статье взяты из трилогии Кристофера Нолана «Тёмный рыцарь». Это всё же Бэтмен!

Давайте сыграем!

При подготовке вы хорошо поработали с телефоном. Интервью в офисе этим утром проходили занятно. После общего обеда сотрудник отдела кадров сел за стол напротив вас. Он спросил: «Какую зарплату вы бы хотели?».

Что вам делать? Что же вам делать?!

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

Или, возможно, он попробует другой подход, чтобы подтолкнуть вас назвать цифру: «Какая зарплата у вас сейчас?».

Этот вопрос звучит вполне резонно. Разве не надо отвечать на этот вопрос?