Всем привет!

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

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



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

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

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

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

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

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

Эффективный или эффектный?

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

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

Здравствуйте, меня зовут Юрий Михайлов. В компании «МегаФон» я занимаю должность директора «Центра компетенций Онлайн». Сегодня я хотел бы рассказать о том, как мы переделали портал www.megafon.ru и создали мобильное приложение «МегаФон Личный кабинет».

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

Эта масштабная работа началась в 2013 году. Были запущены десятки больших проектов, ведь требовалось провести много исследований: оценить сильные и слабые стороны наших сайтов, детально изучить лучший мировой опыт. Необходимо было определить цели и задачи, провести проектирование новых интерфейсов. С самого начала мы поставили перед собой цель: перейти от подхода «сайт — это справочник абонента» к философии важного канала обслуживания и продаж.

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

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

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

Господа, рад представить вам свой новый проект — Refactoring.guru.

Сайт представляет собой каталог запахов грязного кода и, собственно, самих приёмов рефакторинга. В двух словах — это как книга Мартина Фаулера, но лучше. А именно:

• Весь контент доступен на русском языке. Я старался делать описания как можно более живыми, чтобы избавиться от чувства унылости и скуки, которое возникает при чтении любой переводной книги о рефакторинге.
• Все примеры подаются на Java и PHP. Другие языки обязательно будут добавляться со временем, но я пока затрудняюсь решить, каким будет следующий, можете предлагать в комментах.
• Всё везде перелинковано. Рефакторинги сгруппированы по предназначениям и связям.

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

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

Буду рад всем отзывам и пожеланиям! (а также лайкам и твитам)

Спросите у водителя рейсового междугороднего автобуса: «сколько часов добираться в пункт назначения?». В большинстве случаев — услышите тишину, а если не повезет — получите испепеляющий взгляд и привкус бензина будет преследовать вас пару дней как минимум: потому что неизвестно никому, что случится за поворотом :-) То же самое происходит ежедневно в программных проектах — и в ответ на «когда» нужно либо промолчать, либо что-то красиво и уверенно соврать.



Разработка софта (полет на Марс, строительство небоскреба новой спиралевидной формы в Дубае) — это, положив руку на сердце, настолько сложный и полный рисков процесс, что, не имея формально четкого технического задания (в стиле строгого доказательства формулы корней квадратного уравнения через вывод из бинома Ньютона) — можно лишь задекларировать религиозные постулаты (фичи) и сроки (пророчества) и заставить себя и других поверить в них (во веки веков аминь). Поэтому вы обречены каждый раз шагать в туман с молитвенником и компасом — каждый раз надеясь на удачу и… надежных людей в команде.

Сенсорные экраны на мобильных телефонах, планшетах, ноутбуках и настольных компьютерах открыли веб-разработчикам целый ряд новых взаимодействий. В переведенном руководстве Патрик Локи рассматривает основы работы с сенсорными событиями в JavaScript. Все рассматриваемые далее примеры есть в архиве.

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

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

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

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

Роб Грин, владелец собственного консалтингового агентства в Лос-Анжелесе, уже долгое время работает в сфере SEO. За эти годы он видел множество интернет-магазинов и может четко сказать, чего не хватало большинству из них. Он собрал список из 46 самых актуальных советов, которые он давал своим клиентам.

1. Никогда не оставляйте письмо без ответа. Всего 48 часов, и ваш клиент перестанет ждать.

2. Дайте клиенту увидеть стоимость доставки без регистрации.

3. Если вы доставляете товар в различные регионы (страны), сделайте список регионов в алфавитном порядке.

Google Web Starter Kit — конструктор и шаблоны для быстрой разработки отзывчивых мобильных сайтов, которые хорошо работают на любой платформе и почти в любом браузере (кроме самых старых). Такие сайты везде выглядят, как нативные приложения.

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

• HTML-шаблоны, оптимизированные для мобильного применения;
• отзывчивый макет для разных мобильных устройств
• руководство по стилю визуальных компонентов;
• поддержка Guilp.js (по умолчанию), Node.js, Ruby и Sass.

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

Кросс селлинг (cross selling) – дословно: перекрестные продажи. Об эффективности данного метода на Западе известно давно. Так, в 2006 году Amazon сообщил, что 35% всех продаж составили именно перекрестные.

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

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

Много статей написано о дизайне, даже очень много, как о его UX (user experience), так и UI (user interface) составляющих. Эта статья не для новичков, так что углубляться в основы мы здесь не будем.

Мы рассматриваем дизайн и формулировки не с точки зрения внешнего вида, хотя есть проекты, в которых именно внешний вид составляет основную ценность продукта, а с точки зрения конверсии. В статье, на примере наших приложений Photo and Video Transfer app и Image Transfer, мы расскажем о работе над следующими задачами, при помощи дизайна:

• Увеличение количества email подписчиков.
• Увеличение количество пользователей разрешивших push notifications.
• Увеличение прибыли при работе по freemium модели.
• Увеличение показателя возвращаемости пользователей.
• Уменьшение показателей отказов.

Ниже вы сможете найти исходные данные и практические рекомендации. Так же крайне рекомендуем прочитать предыдущую статью о продвижении мобильных приложений, её вы cможете найти тут. Итак начнём.

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

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

В 2011 году была переведена хорошая статья „Лучшие шрифты для программирования“. Теперь представляется список самых удачных шрифтов для кода на момент июня 2014 года.
Хотя я и уверен, что многих устраивает Courier New, используемый по умолчанию в Windows во многих редакторах. Но, как человек любящий типографику, настаиваю обратить внимание на одну из гарнитур из этой статьи. Хороший шрифт — это прекрасно!

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

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

Я — веб-разработчик с непрофильным образованием и ~10-летним стажем. Я делал для веба все, что только могло прийти в голову моим заказчикам и, иногда, начальству. Я люблю эту работу. Но все же есть несколько вещей, которые я делаю совсем не улыбаясь. Одна из них — это file uploader. From the very beginning — когда еще никому не приходило в голову делать его аяксовым — и до настоящего времени — когда он ресайзит картинки, загружает файлы в несколько потоков и многое-многое другое — он остается для меня одной из самых нелюбимых задач. Вроде как у меня получилось с этим справиться. Если интересно — добро пожаловать под кат.
Вас ждут немножко Coffeescript-а, совсем чуть-чуть жалоб на jQuery, краткое описание $.Deferred, один к месту и не к месту нечаянно примененный паттерн и отсылка к одной забавной и интересной книге.

Всю документацию на английском языке вы сможете прочесть на maxmert.com.

Требования и задачи

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

• Возможность легко добавить/удалить размер или тему. Json-файл с прописанными темами и размерами для каждого виджета. Таким образом можно конфигурировать фреймворк исправляя json-файл.
• Модульность. При отключении или добавлении любого виджета фреймворк должен стабильно работать (привет bootstrap).
• Особое именование классов для избежания переопределения пользовательских классов.
• Javascript компоненты без jQuery (но с возможностью его использования, если он подключен).

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

Осторожно! Трафик.

«Детали — это не детали. Они создают дизайн.» — Чарльз Имз.

Успех цифровых продуктов определяется мелочами. Книга «Микровзаимодействия» Дэна Саффера научит вас проектировать эффективные функциональные элементы. А этот подробный конспект поможет лучше запомнить прочитанное или даже заменит англоязычный оригинал.

Как пользователю изменить настройку? Как включить бесшумный режим или узнать о получении нового сообщения?

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